:root{color-scheme:dark;--bg:#0b1120;--panel:rgba(21,31,50,.84);--panel2:rgba(15,23,42,.72);--line:#1e293b;--text:#e2e8f0;--muted:#94a3b8;--accent:#38bdf8;--warm:#f59e0b;--danger:#fb7185;--ok:#34d399}
*{box-sizing:border-box}html,body{max-width:100%;overflow-x:hidden}body{margin:0;background-color:var(--bg);color:var(--text);background-image:linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px);background-size:30px 30px;background-attachment:fixed}button,input,select,textarea{font:inherit}button{touch-action:manipulation}.tool-wrap{width:100%;max-width:80rem;margin:auto;padding:1.5rem 1rem 5rem}.crumb{display:flex;align-items:center;gap:.5rem;color:#64748b;font-size:.875rem;margin-bottom:.5rem}.crumb a{color:#64748b;text-decoration:none}.crumb a:hover{color:var(--accent)}.hero{text-align:center;margin:0 auto 1.5rem;max-width:52rem;min-width:0}.badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);background:#151f32;padding:.3rem .75rem;border-radius:999px;color:var(--warm);font-size:.75rem}.badge:before{content:"";width:.4rem;height:.4rem;background:var(--warm);border-radius:50%;box-shadow:0 0 12px var(--warm)}.hero h1{font-size:clamp(1.9rem,5vw,2.7rem);line-height:1.15;margin:.8rem 0 .55rem;color:white;overflow-wrap:anywhere}.hero h1 span{color:var(--accent)}.hero p{margin:0;color:var(--muted);line-height:1.75}.tool-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.25rem;align-items:start;min-width:0}.stack{display:grid;gap:1.25rem;min-width:0}.panel{background:var(--panel);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:1rem;box-shadow:0 20px 60px -20px rgba(0,0,0,.55);padding:1rem;min-width:0}.panel h2,.panel h3{color:white;margin-top:0}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.85rem;flex-wrap:wrap}.panel-title h2,.panel-title h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:#cbd5e1;margin:0}.controls{display:grid;gap:.85rem}.row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;min-width:0}.field{display:grid;gap:.35rem;min-width:0}.field label,.label{font-size:.78rem;color:var(--muted)}.input,.select,.textarea{width:100%;min-width:0;background:#0f172a;border:1px solid var(--line);border-radius:.6rem;color:var(--text);padding:.65rem .75rem;outline:0}.textarea{resize:vertical;min-height:90px}.input:focus,.select:focus,.textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,189,248,.1)}input[type=range]{accent-color:var(--warm);width:100%}.check{display:flex;gap:.5rem;align-items:center;color:#cbd5e1;font-size:.84rem}.check input{accent-color:var(--accent);width:1rem;height:1rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:40px;padding:.55rem .9rem;border-radius:.6rem;border:1px solid var(--line);background:#0f172a;color:#cbd5e1;cursor:pointer;transition:.2s}.btn:hover{border-color:#475569;color:white;transform:translateY(-1px)}.btn.primary{color:#082f49;background:var(--accent);border-color:var(--accent);font-weight:700}.btn.warm{color:#1c1917;background:var(--warm);border-color:var(--warm);font-weight:700}.btn.danger{color:#fecdd3;border-color:#9f1239;background:rgba(159,18,57,.15)}.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}.chips{display:flex;flex-wrap:wrap;gap:.45rem;min-width:0}.chip{border:1px solid var(--line);background:#0f172a;color:var(--muted);border-radius:999px;padding:.4rem .7rem;font-size:.75rem;cursor:pointer}.chip:hover,.chip.active{border-color:var(--warm);color:var(--warm);background:rgba(245,158,11,.08)}.preview{min-height:280px;border:1px solid var(--line);border-radius:.8rem;background:#0f172a;overflow:hidden;position:relative}.code{white-space:pre-wrap;word-break:break-word;background:#080d19;border:1px solid var(--line);border-radius:.7rem;padding:1rem;color:#bae6fd;font:500 .78rem/1.7 "Fira Code",monospace;max-height:360px;overflow:auto}.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}.metric{background:var(--panel2);border:1px solid var(--line);border-radius:.7rem;padding:.8rem;min-width:0}.metric b{display:block;color:white;font:700 clamp(.95rem,2vw,1.25rem) "Fira Code",monospace;overflow-wrap:anywhere}.metric span{display:block;font-size:.7rem;color:#64748b;margin-top:.25rem}.status{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:.55rem;background:#0f172a;padding:.7rem .8rem;color:var(--muted);font-size:.8rem;line-height:1.6}.status.warn{border-left-color:var(--warm)}.status.error{border-left-color:var(--danger)}.status.ok{border-left-color:var(--ok)}.tabs{display:flex;gap:.35rem;overflow:auto;padding-bottom:.2rem;max-width:100%}.tab{white-space:nowrap}.tab.active{color:#082f49;background:var(--accent);border-color:var(--accent)}.seo{max-width:58rem;margin:4rem auto 0;display:grid;gap:1.25rem}.seo p,.seo li{color:var(--muted);line-height:1.85;font-size:.92rem}.seo h2{font-size:1.25rem}.seo h3{font-size:1rem;margin-top:1.3rem}.seo ul,.seo ol{padding-left:1.2rem}.faq details{border-top:1px solid rgba(51,65,85,.65)}.faq details:first-child{border-top:0}.faq summary{cursor:pointer;color:#e2e8f0;font-weight:600;padding:1rem 0;display:flex;justify-content:space-between;gap:1rem;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";color:var(--warm);font-size:1.2rem}.faq details[open] summary:after{content:"−"}.faq .answer{color:var(--muted);font-size:.88rem;line-height:1.8;padding:0 0 1rem}.ad-slot{max-width:58rem;min-height:90px;margin:2rem auto;border:1px dashed #334155;border-radius:.8rem;display:flex;align-items:center;justify-content:center;color:#475569;font-size:.7rem;letter-spacing:.12em}.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,20px);background:#1e293b;border:1px solid #475569;border-radius:.7rem;padding:.7rem 1rem;color:white;z-index:1000;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hidden{display:none!important}.drop-zone{border:1px dashed #475569;border-radius:.75rem;padding:1rem;text-align:center;color:var(--muted);cursor:pointer}.drop-zone:hover{border-color:var(--accent)}canvas{max-width:100%;height:auto}.compare{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.compare figure{margin:0;min-width:0}.compare figcaption{font-size:.72rem;color:var(--muted);margin-bottom:.35rem}
@media(max-width:900px){.tool-grid{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.tool-wrap{padding:1rem .75rem 4rem}.field-grid,.compare{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr 1fr}.panel{padding:.85rem}.btn{flex:1}.row.actions .btn{flex:1 1 42%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}