:root{ --primary-color:#007bff; --primary-color-hover:#0056b3; --background-color:#f9f9f9; --text-color:#fff; --error-color:red; --container-max-width:800px; --container-padding:20px; --border-radius:10px; --box-shadow:0 2px 8px rgba(0,0,0,0.1);}body{ font-family:'Poppins',Arial,sans-serif; background:var(--background-color); margin:0; padding:0; overflow-x:hidden;}#url-count{ color:#4d2b24 !important; font-weight:700 !important;}.container{ max-width:var(--container-max-width); margin:40px auto; padding:var(--container-padding); background:#fff; box-shadow:var(--box-shadow); border-radius:var(--border-radius);}h1,h2{ text-align:center; margin-bottom:20px;}label{ display:block; margin-bottom:8px; font-weight:700;}input[type="text"]{ width:100%; padding:10px; font-size:1rem; border-radius:var(--border-radius); border:1px solid #ccc; margin-bottom:10px; box-sizing:border-box;}textarea{ width:100%; min-height:200px; max-height:400px; overflow-y:auto; padding:10px; box-sizing:border-box; margin-top:10px; margin-bottom:20px; font-size:1rem; border:1px solid #ccc; border-radius:var(--border-radius); resize:vertical; font-family:monospace;}input,select{ padding:0.5rem; box-sizing:border-box;}button{ padding:10px 20px; width:auto; margin-top:0.5rem; font-size:1rem; margin-right:10px; border:none; border-radius:5px; cursor:pointer; background-color:var(--primary-color); color:var(--text-color); transition:background-color 0.3s; min-width:48px; min-height:48px;}button:hover{ background-color:var(--primary-color-hover);}.output-info{ display:flex; justify-content:space-between; align-items:center; margin-top:20px;}.download-buttons{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}#output-info button{ background:var(--accent) !important;}#download-buttons button{ background:var(--accent) !important; padding:0 40px !important;}#output-info button{ background:var(--accent) !important; padding:0 32px !important; margin:0 0 0 45px;}#error-message,.error{ color:var(--error-color); font-weight:bold; text-align:left; margin-bottom:20px; margin-top:20px;}#spinner-container{ display:none; justify-content:center; align-items:center; margin:20px 0;}.spinner{ border:6px solid #f3f3f3; border-top:6px solid #ed7c6e; border-radius:50%; width:40px; height:40px; animation:spin 1s linear infinite;}@keyframes spin{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}.hidden{ display:none;}:root{ --accent:#ed7c6e; --accent-light:#f9e1de; --muted:#7d8b92; --bg:#fff9f8; --card:#fff3f1; --text:#2b1a15; --container:1200px; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial; color:var(--text); background:linear-gradient(180deg,#ffffff 0%,var(--bg) 100%); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;  } .wrap{max-width:var(--container);margin:0 auto}  header{ display:flex; align-items:center; justify-content:space-between; padding:25px 0 25px; border-bottom:1px solid rgba(77,43,36,0.06); margin-bottom:60px;} } .brand{display:flex;align-items:center;gap:12px} .logo{width:44px; height:44px; border-radius:8px; background:linear-gradient(135deg,var(--accent),#ff9f93); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; box-shadow:0 6px 18px rgba(237,124,110,0.25); float:left; margin:0px 8px 0 0px; } .brand h1{ font-size:1.8rem; margin:3px 0 0 0; text-align:left; float:left; font-weight:800;} nav{display:flex;gap:18px;align-items:center} nav a{color:#2b1a15;text-decoration:none;font-weight:600} .cta{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:8px 12px;border-radius:8px;color:var(--text);font-weight:600}  .hero{ margin-top:8px;background:var(--card);padding:44px;border-radius:10px;box-shadow:0 8px 30px rgba(16,42,67,0.06); } .hero-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:center} .hero h2{font-size:clamp(34px,6vw,52px); line-height:70px;line-height:1.05;margin:0 0 14px;font-weight:800;color:#4d2b24;text-align:left;} .hero p{margin:0 0 20px;color:var(--muted);font-size:16px}  .tool-card{background:#fff;padding:24px;border-radius:12px;margin:35px 0;border:1px solid rgba(237,124,110,0.15);box-shadow:0 4px 14px rgba(237,124,110,0.08)} .input-row{display:flex;flex-direction:column;gap:14px} .input-row input{width:100%;padding:14px 16px;border-radius:10px;border:1px solid #f1d1cc;font-size:15px;outline:none;transition:border 0.2s} .input-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(237,124,110,0.15)} .input-row button{ background:var(--accent);color:#fff;border:none;padding:12px 50px;border-radius:10px;font-weight:700;cursor:pointer;font-size:15px;transition:background 0.2s;} .input-row button:hover{background:#d96456} .helper{font-size:13px;color:var(--muted);margin-top:10px}  .features{display:flex;gap:18px;margin-top:20px;flex-wrap:wrap} .feature{flex:1;min-width:220px;background:transparent;padding:12px;border-radius:8px} .feature h4{margin:0 0 6px;font-size:20px} .feature p{margin:0;color:var(--muted);font-size:16px} .pro-features{padding:56px 20px;background:linear-gradient(180deg,#ffffff 0%,#fff9f8 100%);}.pro-features .container-inner{max-width:1180px;margin:0 auto;}.section-ttl{ font-size:46px; color:#4d2b24; margin-bottom:30px; font-weight:700;}.pro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin-bottom:28px;}.pro-card{ background:linear-gradient(180deg,#fff3f1 0%,#fff 100%); border-radius:12px;padding:20px;box-shadow:0 6px 20px rgba(77,43,36,0.06); border:1px solid rgba(77,43,36,0.06);transition:transform .18s ease,box-shadow .18s ease; display:flex;flex-direction:column;gap:10px;min-height:225px;}.pro-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(77,43,36,0.08);}.card-icon{width:56px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(237,124,110,0.06);}.pro-card h3{ margin:5px 0 3px 0; font-size:24px;color:#4d2b24;font-weight:700;}.pro-card p{margin:0;color:#5b4039;font-size:14px;line-height:1.45;opacity:0.95}.benefits-wrap{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:flex-start;margin-top:22px;}.love-faq{padding:60px 20px;background:#fff;}.container-inner{max-width:1100px;margin:0 auto;}.love-box{ background:#fff3f1; border:1px solid rgba(237,124,110,0.2); border-radius:12px; padding:28px; margin-bottom:40px;margin-top:85px; box-shadow:0 6px 18px rgba(77,43,36,0.06);}.love-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px;}.love-list li{ display:flex; gap:12px;align-items:flex-start;font-size:15px;padding:0 0 20px 0;line-height:1.6;color:#4d2b24;}.love-list li span{font-size:18px;color:#ed7c6e;}.love-list li .icon{ flex-shrink:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,0.06);}.love-list strong{ display:block; color:#4d2b24;font-size:20px;margin-bottom:2px;} .love-box .section-ttl{ margin:0px 0 50px 0;}.faq-box{ background:#fff; border:1px solid rgba(237,124,110,0.12); border-radius:12px; padding:24px;margin-top:85px; box-shadow:0 6px 20px rgba(237,124,110,0.04);}.faq-list{display:flex;flex-direction:column;gap:12px;}.faq-question{ width:100%; background:none; border:none; font-size:16px; font-weight:700; text-align:left; color:#4d2b24; cursor:pointer; padding:12px 0; display:flex; justify-content:space-between; align-items:center;}.faq-icon{ display:inline-block; width:28px; height:28px; line-height:28px; border-radius:6px; background:rgba(237,124,110,0.06); color:#ed7c6e; text-align:center; font-weight:700; transition:transform .25s ease,background .25s ease;}.faq-item.open .faq-icon{transform:rotate(45deg);background:rgba(237,124,110,0.12);}.faq-answer{ max-height:0; overflow:hidden; transition:max-height 0.36s cubic-bezier(.2,.9,.3,1),padding 0.24s ease; padding:0 0; color:#5b4039; font-size:16px; line-height:1.6;}button.faq-question{background:#fff3f1; padding:0 15px;}button.faq-question:hover{background:#fff3f1; padding:0 15px;}.cta-section{  text-align:center; box-shadow:0 -4px 15px rgba(0,0,0,0.1); max-width:1200px; width:100%; margin:2rem auto 3rem auto; position:relative; z-index:2; background:#fff3f1; border:1px solid rgba(237,124,110,0.2); border-radius:12px; margin-bottom:50px; margin-top:85px; box-shadow:0 6px 18px rgba(77,43,36,0.06);padding:60px;}.cta-section h2{ margin-top:0; font-size:46px; color:#4d2b24; margin-bottom:30px; font-weight:800;}.cta-section .cta-btn{  background-color:#4d2b24; color:#fff; padding:1rem 2.5rem; border-radius:8px; font-weight:700; font-size:1.1rem; text-decoration:none; display:inline-block; transition:background-color 0.3s ease,transform 0.2s ease,color 0.3s ease;}body{margin:0;}.footer-dark{ width:100%; left:0; background:#4d2b24; color:#fff3f1; padding-top:48px; padding-bottom:20px; box-sizing:border-box;}.footer-container{ max-width:1200px; margin:0 auto; padding:0 22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:28px; align-items:start;}.footer-col{min-width:0;}.footer-logo{ font-size:20px; font-weight:800; color:#ed7c6e; margin:0 0 25px;}.footer-desc{color:#fff3f1;margin:0 0 8px;line-height:1.6;}.footer-col h4{ margin:0 0 12px; color:#fff3f1; font-size:16px; font-weight:700;}.footer-col ul{list-style:none;margin:0;padding:0;}.footer-col ul li{margin-bottom:8px;}.footer-col a{color:#fff3f1;text-decoration:none;font-size:14px;}.footer-col a:hover{color:#ed7c6e;text-decoration:underline;}.footer-bottom{ margin-top:28px; border-top:1px solid rgba(255,243,241,0.06); padding-top:16px;width:100%;}.footer-bottom-inner{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 22px;}.footer-bottom p{margin:0;font-size:13px;color:#fff3f1;}.footer-bottom a{color:#ed7c6e;text-decoration:none;margin-left:6px;}.socials{display:flex;gap:12px;align-items:center;}.s-link{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:8px;background:rgba(237,124,110,0.06);text-decoration:none;transition:transform .15s ease,background .15s ease;}.s-link:hover{transform:translateY(-3px);background:rgba(237,124,110,0.12);}.s-link svg{width:18px;height:18px;display:block;}.hero-grid.about h2{ font-size:72px; margin:0 0 30px 0;}.hero-grid.about p{ font-size:24px; line-height:36px;}.pro-features.about-us .pro-card{ background:#fff;}.container-inner h2{ text-transform:capitalize; font-weight:800;}.about-story{ background-color:var(--bg-white); padding:5rem 2rem; border-radius:12px; box-shadow:0 8px 25px var(--shadow-subtle); margin-top:3rem;}.story-content{ display:flex; flex-wrap:wrap; align-items:center; gap:3rem;}.story-text h2{ font-size:2.2rem; color:var(--text-dark); margin-bottom:1rem; font-weight:800; text-align:left;}.story-text p{  font-size:16px; margin-bottom:1rem; color:var(--text-medium); line-height:28px;}.story-image{ flex:1; min-width:250px; text-align:center;}.story-image img{ max-width:100%; height:auto; border-radius:12px; box-shadow:0 5px 15px rgba(0,0,0,0.1);}.story-text{ flex:2; min-width:300px;}@media (max-width:880px){ .footer-bottom-inner{flex-direction:column;align-items:flex-start;gap:10px;}}@media (max-width:600px){ .faq-question{font-size:15px;} .faq-icon{width:26px;height:26px;line-height:26px;}}@media (max-width:980px){.benefits-wrap{grid-template-columns:1fr;}.benefits-right{order:2;}.benefits-left{order:1;}}.benefits-left{background:#fff;border-radius:12px;padding:20px;box-shadow:0 8px 22px rgba(16,42,67,0.04);border:1px solid rgba(77,43,36,0.04);}.benefits-left h4{margin:0 0 12px;color:#4d2b24;font-size:18px;}.benefits-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;}.benefits-list li{display:flex;gap:12px;align-items:flex-start;color:#4d2b24;font-weight:600;}.benefits-list li span{font-weight:400;color:#5b4039;margin-left:6px;font-size:14px;}.policy-content a{ color:#ed7c6e;}.last-updated{ text-align:center; margin-top:10px; font-style:italic;}.policy-content h2{ font-size:1.8rem; color:#333; margin-top:3rem; margin-bottom:1rem; font-weight:700; text-align:left;}.section-padding{ max-width:1200px; margin:0 auto; box-sizing:border-box;}.policy-content{ background-color:#fff; padding:3rem 2rem; border-radius:12px; box-shadow:0 8px 25px var(--shadow-subtle);border:1px solid #fdefef;}.policy-content h1{ font-size:2.8rem;  color:#2b1a15; text-align:center; font-weight:800;}.policy-content p{ font-size:1rem; margin-bottom:1rem; color:#5F6B7A;line-height:25px;}.policy-content h2{ font-size:1.8rem; color:#333; margin-top:2rem; margin-bottom:1rem; font-weight:600;}@media (max-width:600px){ .pro-card{padding:16px;} .card-icon{width:48px;height:48px;} .section-ttl{font-size:22px;} .benefits-right{padding:14px;}} footer{margin-top:28px;padding-top:10px;border-top:1px solid rgba(2,50,50,0.03);display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px;flex-wrap:wrap;gap:10px}  @media (max-width:880px){  .hero{padding:28px}  .logo{width:40px;height:40px} }@media (max-width:768px){ .container{ padding:1rem; max-width:90vw; margin:0 auto; box-sizing:border-box; } .output-info{ flex-direction:column; align-items:flex-start; gap:10px; } .download-buttons{ flex-direction:column; width:100%; } button{ width:100%; }}@media (min-width:1024px){ .container{ max-width:min(70vw,1000px); margin:0 auto; }}@media (min-width:1280px){ .container{ max-width:min(60vw,1100px); margin:0 auto; }}@media (min-width:1536px){ .container{ max-width:min(50vw,1200px); margin:0 auto; }}.nav-toggle{ display:none; background:#ed7c6e; border:none; font-size:2rem; cursor:pointer; color:#fff;}@media (max-width:767px){.brand h1{display:none;}header button:hover{ background-color:#ed7c6e !important;} nav{ display:none; flex-direction:column;  background:#4d2b24;  position:absolute;  top:107px;   width:100%;  padding:1rem; } .logo{  width:55px;  height:55px;  margin:7px 0 0 0; }nav a{color:#fff;font-size:20px;} nav.active{ display:flex; } .nav-toggle{  display:block;  width:23%; } header{ position:relative;padding:15px; }.brand{ width:50%;}.input-row button{ padding:6px 28px;}.pro-features{ padding:56px 20px 0 20px;}.love-box{ margin:50px 20px;}.faq-box{ margin:50px 20px;} .cta-section{ padding:40px;  max-width:inherit;  width:auto;  margin:20px 20px 50px 20px;}.cta-section h2{font-size:32px;}footer{display:inherit !important;}.hero-grid.about h2{ font-size:32px; font-weight:700;}.story-text h2{ font-size:32px; font-weight:700;}.container-inner h2{ font-weight:700;} .cta-section{ padding:36px 20px;  margin:55px 20px 50px 20px;}.story-image img{width:100%;}}