*,:before,:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}:root{--bg:#f8fafc;--surface:#fff;--ink:#0f172a;--muted:#475569;--faint:#64748b;--accent:#2563eb;--accent-dark:#1d4ed8;--accent-soft:#eff6ff;--border:#e2e8f0;--header-bg:#0f172a;--header-ink:#f8fafc;--header-muted:#94a3b8;--radius:10px}body{color:var(--ink);background:var(--bg);flex-direction:column;min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.6;display:flex}img,svg{max-width:100%;display:block}h1,h2,h3{line-height:1.25}a{color:var(--accent)}.container{width:100%;max-width:720px;margin-inline:auto;padding-inline:1rem}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.site-header{background:var(--header-bg);color:var(--header-ink)}.header-inner{flex-direction:column;gap:.75rem;padding-block:1rem;display:flex}.brand{color:inherit;flex-direction:column;text-decoration:none;display:flex}.brand-name{letter-spacing:.04em;font-size:1.25rem;font-weight:700}.brand-sub{color:var(--header-muted);font-size:.75rem}.site-nav{flex-wrap:wrap;gap:.25rem;display:flex}.site-nav a{color:#cbd5e1;border-radius:6px;padding:.25rem .5rem;font-size:.875rem;font-weight:500;text-decoration:none}.site-nav a:hover{color:#fff;background:#ffffff14}.site-main{flex:1;width:100%}.hero-home{text-align:center;background:var(--surface);border-bottom:1px solid var(--border);padding-block:3rem 2rem}.hero-home h1{letter-spacing:.06em;font-size:2rem}.hero-tagline{color:var(--accent);margin-top:.25rem;font-size:1.125rem;font-weight:600}.hero-sub{color:var(--faint);margin-top:.5rem}.hero-cta{margin-top:1.5rem}.breadcrumb{padding-block:1rem 0;font-size:.8125rem}.breadcrumb ol{gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.breadcrumb li{color:var(--faint)}.breadcrumb li+li:before{content:"/";color:#cbd5e1;margin-right:.5rem}.breadcrumb a{color:var(--muted);text-decoration:none}.breadcrumb a:hover{color:var(--accent);text-decoration:underline}.tool-hero{text-align:center;padding-block:2.5rem 1.5rem}.tool-hero h1{letter-spacing:-.01em;font-size:1.75rem}.tool-hero-sub{color:var(--faint);margin-top:.5rem;max-width:40rem;margin-inline:auto}.btn{border-radius:var(--radius);font:inherit;text-align:center;cursor:pointer;border:1px solid #0000;padding:.625rem 1.25rem;font-weight:600;text-decoration:none;transition:background-color .15s;display:inline-block}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-dark)}.btn-ghost{border-color:var(--border);color:var(--muted);background:0 0}.btn-ghost:hover{background:var(--accent-soft);color:var(--accent)}.btn-sm{padding:.25rem .75rem;font-size:.8125rem}.lookup{padding-block:1.5rem .5rem}.lookup .container{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:0 1px 3px #0f172a0f}.input-row{flex-direction:column;gap:.75rem;display:flex}.input-row input{font:inherit;letter-spacing:.02em;border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--ink);padding:.875rem 1rem;font-size:1.25rem}.input-row input::placeholder{color:#94a3b8}.input-row input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}.result-area{margin-top:1.25rem}.result-panel{border:1px solid var(--border);border-radius:var(--radius);background:#fbfdff;padding:1rem 1.25rem}.result-code{letter-spacing:.04em;color:var(--accent-dark);margin:0 0 .75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.375rem;font-weight:700}.result-warning{color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:6px;margin:0 0 .875rem;padding:.625rem .75rem;font-size:.875rem;font-weight:600}.result-list{margin:0}.result-row{border-bottom:1px solid var(--border);flex-direction:column;gap:.125rem;padding:.625rem 0;display:flex}.result-row:last-of-type{border-bottom:none}.result-row dt{color:var(--faint);font-size:.8125rem;font-weight:600}.result-row dd{color:var(--ink);margin:0;font-size:1.25rem;font-weight:700}.result-note{color:var(--faint);margin:.75rem 0 0;font-size:.875rem}.btn-copy{background:var(--accent-soft);color:var(--accent-dark);border-color:#bfdbfe;width:100%;margin-top:1rem}.btn-copy:hover{background:#dbeafe}.error{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;margin:0;padding:.75rem 1rem;font-size:.9375rem;font-weight:600}.history{padding-block:1rem}.section-head{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem;display:flex}.section-head h2{font-size:1.125rem}.history-list{flex-wrap:wrap;gap:.5rem;padding:0;list-style:none;display:flex}.history-chip{color:var(--muted);background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:.375rem .75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.875rem;font-weight:600}.history-chip:hover{color:var(--accent-dark);border-color:var(--accent);background:var(--accent-soft)}.code-explainer,.engineering-guide,.faq,.coming-soon,.tools,.about-teaser,.page{padding-block:1.5rem}.code-explainer h2,.engineering-guide h2,.faq h2,.coming-soon h2,.tools h2{margin-bottom:1rem;font-size:1.25rem}.code-explainer h3,.engineering-guide h3,.tools h3{margin-top:1.25rem;margin-bottom:.25rem;font-size:1rem}.code-types{flex-direction:column;gap:1rem;display:flex}.guide-principle{color:var(--accent-dark);margin-top:1rem;font-weight:600}.engineering-guide p,.code-explainer p{color:var(--muted);margin-bottom:.875rem}.engineering-guide h2+h2{margin-top:2rem}.example-block{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);margin-bottom:.875rem;padding:.875rem 1rem}.example-code{color:var(--accent-dark);margin-bottom:.5rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.25rem;font-weight:700}.example-values{margin:0}.example-row{align-items:baseline;gap:1rem;padding:.25rem 0;display:flex}.example-row dt{color:var(--faint);flex:1;font-size:.875rem}.example-row dd{color:var(--ink);margin:0;font-weight:600}.steps{margin-bottom:.875rem;padding-left:1.25rem}.steps li{color:var(--muted);margin-bottom:.625rem}.steps li strong{color:var(--ink)}.code-example{color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:6px;margin-bottom:0;padding:.5rem .75rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.875rem}.code-note{color:var(--faint);border-top:1px solid var(--border);margin-top:.5rem;padding-top:.875rem;font-size:.875rem}.tools-group{margin-bottom:1.25rem}.tool-list{flex-direction:column;gap:.5rem;padding:0;list-style:none;display:flex}.tool-list-muted{color:var(--faint)}.about-teaser{text-align:center;color:var(--faint)}.page h1{margin-bottom:1rem;font-size:1.75rem}.page p{color:var(--muted);margin-bottom:.75rem}.page h2{margin-top:1.75rem;margin-bottom:.5rem;font-size:1.125rem}.page ul,.page ol{color:var(--muted);margin:0 0 .75rem 1.25rem}.page li{margin-bottom:.375rem}.page a{color:var(--accent-dark)}.page .page-updated{color:var(--faint);margin-top:2rem;font-size:.875rem}.faq-list{flex-direction:column;gap:1.25rem;display:flex}.faq-item dt{color:var(--ink);margin-bottom:.25rem;font-weight:700}.faq-item dd{color:var(--muted);margin:0}.site-footer{background:var(--header-bg);color:#cbd5e1;padding-block:1.5rem;font-size:.875rem}.footer-inner{text-align:center;flex-direction:column;align-items:center;gap:.75rem;display:flex}.footer-trust{color:#e2e8f0;flex-wrap:wrap;justify-content:center;gap:.5rem;font-weight:500;display:flex}.footer-brand{color:var(--header-muted)}.footer-nav{gap:1rem;display:flex}.footer-nav a{color:#cbd5e1;text-decoration:none}.footer-nav a:hover{color:#fff;text-decoration:underline}@media (width>=640px){.header-inner{flex-direction:row;justify-content:space-between;align-items:center}.hero-home h1{font-size:2.5rem}.tool-hero h1{font-size:2.25rem}.input-row{flex-direction:row}.input-row input{flex:1}.code-types{flex-direction:row}.code-types article{flex:1;min-width:0}.tool-list{flex-flow:wrap;gap:1.5rem}}