:root{--bg:#F6F7FB;--surface:#fff;--ink:#171A2E;--ink2:#494F68;--ink3:#767C95;--accent:#2B3EC8;--accent-ink:#2334A8;
--line:rgba(23,26,46,.09);--ring:0 0 0 1px rgba(23,26,46,.07);--shadow:0 1px 2px rgba(20,24,46,.05),0 2px 6px rgba(20,24,46,.07);
--ok:#1D6B41;--okbg:rgba(29,122,70,.10);--warn:#7A5500;--warnbg:rgba(154,106,0,.11);--input:#FFF7DC;--neutral:rgba(23,26,46,.06)}
@media (prefers-color-scheme:dark){:root{--bg:#0F1119;--surface:#171A27;--ink:#E9EBF5;--ink2:#A8AEC6;--ink3:#7C8199;--accent:#93A0FF;--accent-ink:#A9B3FF;
--line:rgba(233,235,245,.10);--ring:0 0 0 1px rgba(233,235,245,.08);--shadow:0 1px 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.3);
--ok:#7ED0A2;--okbg:rgba(126,208,162,.12);--warn:#E0B662;--warnbg:rgba(224,182,98,.12);--input:#2A2A1F;--neutral:rgba(233,235,245,.07)}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.wrap{max-width:64rem;margin:0 auto;padding:0 24px}
.prose{max-width:68ch}.prose p,.prose li{max-width:68ch}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:-.015em;text-wrap:balance;margin:0 0 12px}
h1{font-size:clamp(2rem, 1.3rem + 2.4vw, 2.9rem);line-height:1.06;font-weight:650}
h2{font-size:1.55rem;line-height:1.22;margin-top:48px}h3{font-size:1.1rem;line-height:1.35;margin-top:24px}
p{margin:0 0 14px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
header.site{padding:22px 0;border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{font-family:Fraunces,Georgia,serif;font-weight:650;font-size:1.2rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
nav.main a{color:var(--ink2);text-decoration:none;margin-left:20px;font-size:15px}nav.main a:hover{color:var(--ink)}
nav.main a.cta{color:var(--accent-ink);font-weight:600}
.hero{padding:64px 0 40px}.hero p.dek{font-size:1.15rem;color:var(--ink2);max-width:60ch;margin-top:14px}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;padding:12px 20px;border-radius:10px;transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.btn:active{transform:scale(.97)}.btn.ghost{background:transparent;color:var(--accent-ink);box-shadow:var(--ring)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{background:var(--surface);border-radius:14px;box-shadow:var(--ring),var(--shadow);padding:20px 22px}
.card h3{margin-top:0}.card p{color:var(--ink2);font-size:15px}
.card .fmt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--ink3);letter-spacing:.04em}
.card a.more{font-weight:600;text-decoration:none}
section.block{padding:40px 0}section.block+section.block{border-top:1px solid var(--line)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.section-head p{color:var(--ink2);margin:0;max-width:60ch}
footer.site{margin-top:64px;padding:32px 0 48px;border-top:1px solid var(--line);color:var(--ink3);font-size:14px}
footer.site a{color:var(--ink2)}footer.site .cols{display:flex;gap:32px;flex-wrap:wrap}
/* tool */
.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);gap:28px;align-items:start}
@media (max-width:820px){.tool{grid-template-columns:1fr}}
.panel{background:var(--surface);border-radius:14px;box-shadow:var(--ring),var(--shadow);padding:22px}
.field{display:grid;gap:6px;margin-bottom:14px}.field label{font-size:14px;font-weight:600}
.field input,.field select{font:inherit;font-size:16px;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:var(--input);color:var(--ink);width:100%}
.field .hint{font-size:12.5px;color:var(--ink3)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.result{position:sticky;top:16px}
.big{font-family:Fraunces,Georgia,serif;font-size:clamp(2.4rem, 2rem + 2vw, 3.4rem);font-weight:650;color:var(--accent-ink);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;font-variant-numeric:tabular-nums}
.kv:last-child{border-bottom:none}.kv b{font-weight:600}
.note{background:var(--neutral);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--ink2);margin-top:14px}
details{margin-top:12px}summary{cursor:pointer;font-weight:600;font-size:14px}
.chk{display:flex;align-items:center;gap:10px;font-size:15px;margin-bottom:8px}.chk input[type=number]{width:70px;padding:6px 8px;font:inherit;border-radius:8px;border:1px solid var(--line);background:var(--input);color:var(--ink)}
.chip{display:inline-block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:2px 9px;border-radius:999px;background:var(--okbg);color:var(--ok)}
/* article */
article.guide{padding:40px 0}article.guide .meta{margin-bottom:12px}
article.guide table{border-collapse:collapse;width:100%;font-size:14.5px;margin:16px 0}
article.guide th{text-align:left;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);padding:0 10px 8px;border-bottom:1px solid var(--line)}
article.guide td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
article.guide td:first-child,article.guide th:first-child{padding-left:0}
.table-scroll{overflow-x:auto}
.callout{background:var(--surface);box-shadow:var(--ring);border-radius:12px;padding:18px 20px;margin:24px 0}
.callout h3{margin-top:0}
ul.plain{padding-left:20px}ul.plain li{margin-bottom:8px}
.tag{display:inline-block;background:var(--neutral);color:var(--ink2);border-radius:6px;padding:0 7px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}