:root { color-scheme: dark; --bg:#0b0d10; --surface:#12161b; --surface-raised:#171c22; --text:#f3f5f7; --muted:#9aa3ad; --border:#2a323c; --accent:#69d2a4; --accent-strong:#8ce2bd; --danger:#ff9c9c; --focus:#a9e8cf; --radius:14px; --max:920px; }
* { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; }
body { margin:0; min-width:320px; min-height:100vh; background:var(--bg); color:var(--text); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.6; }
button,input { font:inherit; }
a { color:var(--accent-strong); text-underline-offset:.2em; }
a:hover { text-decoration-thickness:2px; }
.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; }
.skip-link { position:fixed; top:12px; left:12px; z-index:10; transform:translateY(-160%); border-radius:8px; background:var(--text); color:var(--bg); padding:10px 14px; font-weight:700; }
.skip-link:focus { transform:translateY(0); }
.shell { width:min(100% - 32px,var(--max)); margin-inline:auto; }
.site-header { border-bottom:1px solid var(--border); }
.site-header .shell { display:flex; min-height:58px; align-items:center; }
.brand { color:var(--text); font-weight:700; text-decoration:none; letter-spacing:-.01em; }
main { padding-block:34px 64px; }
.intro { max-width:720px; margin-bottom:24px; }
.eyebrow { margin:0 0 6px; color:var(--accent-strong); font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
h1,h2 { margin-top:0; color:var(--text); line-height:1.15; letter-spacing:-.025em; }
h1 { margin-bottom:12px; font-size:clamp(2rem,8vw,3.4rem); }
h2 { margin-bottom:12px; font-size:clamp(1.25rem,4vw,1.65rem); }
p { margin-top:0; }
.intro p:last-child,.content-section>p { color:var(--muted); }
.tool { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:18px; }
.tool-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.tool-heading h2 { margin:0; }
.input-grid,.results { display:grid; gap:14px; }
.field label { display:block; margin-bottom:7px; font-weight:650; }
.field input { width:100%; min-height:48px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text); padding:10px 12px; outline:none; }
.field input:hover { border-color:#3b4653; }
.field input:focus-visible,.button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.field input[aria-invalid="true"] { border-color:var(--danger); }
.hint,.result-note,.result-context,.error { font-size:.875rem; }
.hint { margin:7px 0 0; color:var(--muted); }
.error { margin:14px 0 0; color:var(--danger); font-weight:650; }
.button { min-height:44px; border:1px solid var(--border); border-radius:9px; padding:8px 13px; cursor:pointer; }
.button-secondary { background:var(--surface-raised); color:var(--text); }
.button-secondary:hover { border-color:#465361; }
.results { grid-template-columns:1fr; margin-top:20px; border-top:1px solid var(--border); padding-top:20px; }
.result-block { min-width:0; border-radius:10px; background:var(--surface-raised); padding:16px; }
.result-label,.result-note { display:block; }
.result-label { color:var(--muted); font-size:.86rem; font-weight:650; }
.result-value { display:block; overflow-wrap:anywhere; margin:3px 0 2px; font-size:clamp(1.8rem,8vw,2.45rem); font-variant-numeric:tabular-nums; font-weight:750; line-height:1.15; letter-spacing:-.035em; }
.result-note { color:var(--muted); }
.result-context { margin:14px 0 0; color:var(--muted); }
.content-section { max-width:760px; margin-top:44px; }
.formula-list { display:grid; gap:8px; margin-top:16px; }
.formula-list p { margin:0; }
code { display:inline-block; max-width:100%; overflow-wrap:anywhere; border:1px solid var(--border); border-radius:8px; background:var(--surface); padding:6px 8px; color:var(--text); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em; }
details { border-top:1px solid var(--border); padding:14px 0; }
details:last-child { border-bottom:1px solid var(--border); }
summary { cursor:pointer; font-weight:650; }
details p { margin:10px 0 0; color:var(--muted); }
.site-footer { border-top:1px solid var(--border); color:var(--muted); }
.footer-inner { display:flex; flex-direction:column; gap:6px; padding-block:22px; font-size:.9rem; }
@media (min-width:640px) { .shell { width:min(100% - 48px,var(--max)); } main { padding-top:48px; } .tool { padding:24px; } .input-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .results { grid-template-columns:repeat(3,minmax(0,1fr)); } .footer-inner { flex-direction:row; align-items:center; justify-content:space-between; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }