@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:light;--bg:#f7f8fc;--surface:#fff;--surface-2:#f1f4fa;--text:#172033;--muted:#68738a;--line:#e2e7f0;--accent:#4b63f2;--accent-2:#6f7fff;--accent-soft:#edf0ff;--success:#16865d;--danger:#c64050;--shadow:0 16px 50px rgba(29,43,82,.08);--radius:18px;--radius-sm:12px;--max:1180px;--transition:180ms ease;--font:'DM Sans',system-ui,sans-serif;--display:'Manrope','DM Sans',sans-serif}
:root[data-theme=dark]{color-scheme:dark;--bg:#10131b;--surface:#181d28;--surface-2:#202737;--text:#f0f3fb;--muted:#a3aec3;--line:#30394c;--accent:#8995ff;--accent-2:#aab2ff;--accent-soft:#252c4c;--success:#5bd4a0;--danger:#ff8290;--shadow:0 16px 50px rgba(0,0,0,.22)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font);transition:background var(--transition),color var(--transition)}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a,input,textarea,select{outline-offset:3px}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent-2)}.container{width:min(calc(100% - 40px),var(--max));margin-inline:auto}.skip-link{position:absolute;left:-9999px;top:10px;background:var(--surface);padding:10px;z-index:999}.skip-link:focus{left:10px}.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.nav-wrap{height:76px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:10px;font:800 20px var(--display);letter-spacing:-.7px;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:var(--accent);color:white;font-weight:800;box-shadow:0 7px 20px #4b63f238}.brand span:last-child{color:var(--accent)}.desktop-nav{display:flex;align-items:center;gap:22px;margin-left:auto}.nav-link,.nav-button{font-weight:600;font-size:14px;color:var(--muted);border:0;background:none;padding:10px 0}.nav-link:hover,.nav-button:hover{color:var(--text)}.nav-button[aria-expanded=true]{color:var(--accent)}.nav-actions{display:flex;gap:8px;align-items:center}.icon-btn,.mobile-toggle{width:42px;height:42px;border:1px solid var(--line);background:var(--surface);border-radius:13px;color:var(--text);display:grid;place-items:center;font-size:18px}.icon-btn:hover,.mobile-toggle:hover{border-color:var(--accent)}.mobile-toggle{display:none}.mega{position:absolute;top:66px;left:50%;transform:translateX(-50%);width:min(900px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:20px;padding:22px;display:none}.mega.open{display:block;animation:pop .18s ease}.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.mega h3{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:0 0 10px}.mega a{display:flex;gap:9px;align-items:center;padding:7px 8px;border-radius:9px;font-size:13px}.mega a:hover{background:var(--surface-2);color:var(--accent)}.mobile-panel{display:none}.hero{position:relative;overflow:hidden;padding:84px 0 76px;background:radial-gradient(ellipse at 80% 15%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 38%),radial-gradient(ellipse at 12% 90%,color-mix(in srgb,#42c6c6 10%,transparent),transparent 35%)}.hero:before,.hero:after{content:"";position:absolute;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);border-radius:50%;pointer-events:none}.hero:before{width:390px;height:390px;right:-100px;top:-170px}.hero:after{width:260px;height:260px;right:45px;top:-105px}.hero-inner{position:relative;z-index:1;max-width:850px}.eyebrow{display:inline-flex;gap:8px;align-items:center;padding:7px 12px;border:1px solid var(--line);background:var(--surface);border-radius:999px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.3px}.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:#31b88b;box-shadow:0 0 0 4px #31b88b20}.hero h1{font:800 clamp(40px,6vw,72px)/1.04 var(--display);letter-spacing:-3.3px;max-width:780px;margin:24px 0 20px}.gradient-text{background:linear-gradient(100deg,var(--accent),#8a69e8 55%,#27a8bb);background-clip:text;color:transparent}.hero p{font-size:18px;color:var(--muted);max-width:650px;margin:0 0 28px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;justify-content:center;align-items:center;gap:9px;border:1px solid transparent;border-radius:12px;padding:12px 18px;font-weight:700;font-size:14px;transition:transform var(--transition),background var(--transition),border var(--transition)}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--accent);color:white;box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 25%,transparent)}.btn-primary:hover{background:var(--accent-2)}.btn-secondary{background:var(--surface);border-color:var(--line);color:var(--text)}.search-box{display:flex;align-items:center;gap:12px;max-width:660px;margin-top:28px;padding:8px 9px 8px 16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);transition:box-shadow var(--transition),border var(--transition)}.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent),var(--shadow)}.search-symbol{font-size:20px;color:var(--muted)}.search-box input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);padding:9px 0}.search-box .btn{padding:10px 15px}.trust-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;color:var(--muted);font-size:12px}.trust-row span{display:flex;gap:6px;align-items:center}.hero-visual{position:absolute;right:4%;top:20%;width:270px;height:260px;opacity:.92;pointer-events:none}.float-card{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px;box-shadow:var(--shadow);animation:float 6s ease-in-out infinite}.float-card strong{display:block;font-size:13px}.float-card small{color:var(--muted);font-size:11px}.float-card .glyph{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--accent-soft);color:var(--accent);margin-bottom:10px;font-weight:800}.fc1{right:5px;top:10px;transform:rotate(4deg)}.fc2{left:0;top:95px;animation-delay:-2s;transform:rotate(-5deg)}.fc3{right:22px;bottom:0;animation-delay:-4s;transform:rotate(3deg)}.section{padding:68px 0}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:26px}.section-kicker{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);font-weight:800}.section h2{font:800 clamp(26px,3vw,36px)/1.2 var(--display);letter-spacing:-1.2px;margin:7px 0 8px}.section-head p{margin:0;color:var(--muted);max-width:600px}.text-link{color:var(--accent);font-weight:700;font-size:14px;white-space:nowrap}.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.tool-card{position:relative;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:20px;transition:transform var(--transition),box-shadow var(--transition),border var(--transition);animation:rise .45s both}.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}.tool-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:17px;margin-bottom:17px}.tool-card h3{font:700 16px/1.3 var(--display);margin:0 0 8px;letter-spacing:-.3px}.tool-card p{color:var(--muted);font-size:13px;line-height:1.55;margin:0 0 18px}.card-bottom{display:flex;align-items:center;justify-content:space-between;color:var(--accent);font-weight:700;font-size:12px}.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.category-card{display:flex;gap:14px;align-items:flex-start;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:transform var(--transition),border var(--transition)}.category-card:hover{transform:translateY(-3px);border-color:var(--accent)}.category-card .tool-icon{flex:none;margin:0}.category-card h3{font-size:15px;margin:0 0 4px}.category-card p{font-size:12px;color:var(--muted);margin:0}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.filters input,.filters select{max-width:100%;background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:11px;padding:10px 13px}.filters input{flex:1;min-width:210px}.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}.chip{border:1px solid var(--line);background:var(--surface);color:var(--muted);padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700}.chip.active,.chip:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.benefit{padding:24px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}.benefit .tool-icon{margin-bottom:13px}.benefit h3{margin:0 0 8px;font-size:16px}.benefit p{margin:0;color:var(--muted);font-size:14px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}.step{padding:24px;border-top:2px solid var(--accent);background:var(--surface);border-radius:0 0 15px 15px}.step-num{font:800 32px var(--display);color:var(--accent);opacity:.7}.step h3{margin:9px 0 5px}.step p{margin:0;color:var(--muted);font-size:14px}.faq-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}.faq-item h3{font-size:15px;margin:0 0 7px}.faq-item p{font-size:13px;color:var(--muted);margin:0}.cta-panel{background:linear-gradient(120deg,var(--accent-soft),var(--surface));border:1px solid var(--line);border-radius:24px;padding:40px;display:flex;align-items:center;justify-content:space-between;gap:24px}.cta-panel h2{margin:0 0 8px}.cta-panel p{margin:0;color:var(--muted)}.site-footer{margin-top:40px;background:var(--surface);border-top:1px solid var(--line);padding:52px 0 20px}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px}.footer-brand p{max-width:290px;color:var(--muted);font-size:13px}.footer-col h3{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:4px 0 14px}.footer-col a{display:block;font-size:13px;color:var(--muted);margin:9px 0}.footer-col a:hover{color:var(--accent)}.footer-bottom{display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--line);margin-top:34px;padding-top:18px;color:var(--muted);font-size:12px}.page-main{padding:34px 0 70px}.breadcrumbs{font-size:12px;color:var(--muted);margin:0 0 20px}.breadcrumbs a:hover{color:var(--accent)}.tool-heading{max-width:820px;margin-bottom:24px}.tool-heading h1,.info-hero h1{font:800 clamp(30px,4vw,46px)/1.12 var(--display);letter-spacing:-1.6px;margin:9px 0 12px}.tool-heading p,.info-hero p{font-size:16px;color:var(--muted);margin:0;max-width:780px}.workspace{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(18px,3vw,30px);box-shadow:0 8px 30px rgba(25,40,75,.035)}.workspace h2{font:750 19px var(--display);margin:0 0 18px}.tool-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:18px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}.field label,.field-label{font-size:13px;font-weight:700}.field input,.field textarea,.field select,.control-input{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:10px;padding:11px 12px;min-width:0}.field textarea{min-height:130px;resize:vertical}.field input[type=color]{padding:4px;height:44px}.field input[type=range]{padding:0;accent-color:var(--accent)}.field small,.hint{color:var(--muted);font-size:12px}.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}.result-box{border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:18px;min-height:85px;overflow-wrap:anywhere}.result-box .big-result{font:800 28px var(--display);letter-spacing:-.6px}.result-box pre,.output-code{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat{padding:14px;background:var(--surface-2);border-radius:12px}.stat strong{display:block;font:800 23px var(--display)}.stat span{font-size:11px;color:var(--muted)}.tool-content{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}.content-panel{background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:23px}.content-panel h2{font:750 20px var(--display);margin:0 0 10px}.content-panel h3{font-size:15px;margin:20px 0 6px}.content-panel p,.content-panel li{color:var(--muted);font-size:14px}.content-panel ul{padding-left:20px}.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.related-link{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:14px;font-size:13px;font-weight:700}.related-link:hover{border-color:var(--accent);color:var(--accent)}.status{margin-top:12px;font-size:13px;color:var(--muted)}.status.error{color:var(--danger)}.status.success{color:var(--success)}.preview-panel{border:1px solid var(--line);background:var(--bg);border-radius:14px;padding:20px;min-height:100px}.dropzone{border:1.5px dashed var(--line);border-radius:14px;padding:25px;text-align:center;background:var(--bg)}.dropzone.drag{border-color:var(--accent);background:var(--accent-soft)}.preview-img{max-width:100%;max-height:300px;object-fit:contain;border-radius:10px}.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.keypad button{padding:13px 5px;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;color:var(--text);font-weight:700}.keypad button:hover{border-color:var(--accent);color:var(--accent)}.calc-display{font-size:25px!important;text-align:right;font-family:ui-monospace,monospace}.gradient-preview{height:210px;border-radius:15px;border:1px solid var(--line);background:linear-gradient(120deg,#4b63f2,#29b7a5)}.color-swatch{height:100px;border-radius:12px;border:1px solid var(--line)}.timer-display{font:800 clamp(38px,8vw,66px)/1.1 var(--display);letter-spacing:-2px;text-align:center;padding:24px 0;font-variant-numeric:tabular-nums}.passage{font-size:16px;line-height:1.9;padding:18px;background:var(--surface-2);border-radius:12px;margin-bottom:14px}.passage .correct{color:var(--success)}.passage .wrong{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}.passage .current{border-bottom:2px solid var(--accent)}.empty-state{grid-column:1/-1;padding:35px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px}.info-hero{padding:45px 0 20px}.info-body{max-width:800px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px}.loading-shell{text-align:center;padding:80px 20px;color:var(--muted)}.loader{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 14px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}@keyframes rise{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}@keyframes pop{from{opacity:0;translate:0 -5px}to{opacity:1;translate:0 0}}@media(max-width:1000px){.hero-visual{right:-40px;opacity:.4}.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mega-grid{grid-template-columns:repeat(2,1fr)}.desktop-nav{gap:15px}.tool-layout{grid-template-columns:1fr}.footer-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.container{width:min(calc(100% - 28px),var(--max))}.nav-wrap{height:66px;gap:12px}.desktop-nav{display:none}.mobile-toggle{display:grid}.nav-actions{margin-left:auto}.mobile-panel{position:absolute;top:66px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);padding:16px 20px 22px;box-shadow:var(--shadow);max-height:calc(100vh - 66px);overflow:auto}.mobile-panel.open{display:block}.mobile-panel>a,.mobile-panel button{display:flex;width:100%;padding:12px;border:0;background:transparent;color:var(--text);text-align:left;border-radius:9px;font-weight:700}.mobile-panel a:hover,.mobile-panel button:hover{background:var(--surface-2)}.mobile-category{padding-left:14px!important;color:var(--muted)!important;font-size:13px!important;font-weight:500!important}.mega{display:none!important}.hero{padding:62px 0 54px}.hero h1{letter-spacing:-2px}.hero p{font-size:16px}.hero-visual{display:none}.search-box{gap:8px}.search-box .btn{font-size:12px;padding:9px}.section{padding:48px 0}.section-head{align-items:flex-start;flex-direction:column}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.tool-card{padding:15px}.tool-card h3{font-size:14px}.tool-card p{font-size:12px}.tool-icon{width:38px;height:38px;margin-bottom:12px}.benefit-grid,.steps,.faq-list{grid-template-columns:1fr}.cta-panel{align-items:flex-start;flex-direction:column;padding:26px}.tool-content{grid-template-columns:1fr}.related-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr);gap:22px}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column}.page-main{padding-top:25px}.form-row{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:420px){.tool-grid{grid-template-columns:1fr}.category-grid{grid-template-columns:1fr}.brand{font-size:17px}.brand-mark{width:32px;height:32px}.nav-actions{gap:5px}.icon-btn,.mobile-toggle{width:38px;height:38px}.search-box{flex-wrap:wrap}.search-box input{width:calc(100% - 45px)}.search-box .btn{width:100%}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.related-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* ZX Tools identity: high-contrast black, white and vivid red */
:root{--bg:#f7f7f8;--surface:#ffffff;--surface-2:#f0f0f2;--text:#111114;--muted:#66666f;--line:#e2e2e6;--accent:#ed1025;--accent-2:#ff3345;--accent-soft:#fff0f1;--shadow:0 18px 48px rgba(20,8,10,.09);--radius:18px}
:root[data-theme=dark]{--bg:#080809;--surface:#111113;--surface-2:#1a1a1e;--text:#f7f7f8;--muted:#aaaab2;--line:#303035;--accent:#ff2438;--accent-2:#ff4a59;--accent-soft:#351217;--shadow:0 18px 55px rgba(0,0,0,.38)}
.brand{gap:9px;letter-spacing:-.8px}.brand-logo{width:39px;height:39px;object-fit:contain;display:block;border-radius:9px}.brand-name{font:800 20px/1 var(--display);color:var(--text)!important;letter-spacing:-.8px}.brand-name b{color:var(--accent);font-weight:800}.brand-mark{display:none}
.hero{background:radial-gradient(ellipse at 82% 12%,rgba(237,16,37,.10),transparent 34%),linear-gradient(135deg,var(--bg),var(--surface) 68%,color-mix(in srgb,var(--accent) 4%,var(--bg)))}
.hero:before,.hero:after{border-color:color-mix(in srgb,var(--accent) 20%,transparent)}.gradient-text{background:linear-gradient(100deg,#ed1025,#a70b19 72%,#242428);background-clip:text;color:transparent}:root[data-theme=dark] .gradient-text{background:linear-gradient(100deg,#ff3448,#ff7581 68%,#f6f6f7);background-clip:text;color:transparent}
.btn-primary{background:var(--accent);box-shadow:0 8px 22px rgba(237,16,37,.2)}.btn-primary:hover{background:var(--accent-2)}.tool-icon,.float-card .glyph{background:var(--accent-soft);color:var(--accent)}.site-header{border-bottom-color:color-mix(in srgb,var(--accent) 13%,var(--line))}.eyebrow{box-shadow:0 5px 20px rgba(0,0,0,.025)}.tool-card:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}.section-kicker{color:var(--accent)}.step{border-top-color:var(--accent)}.chip.active,.chip:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}