:root { color-scheme:dark; --bg:#0b0c15; --panel:#13172a; --ink:#edf2fb; --muted:#abb7cc; --line:#2d3650; --accent:#05ea97 }
* { box-sizing:border-box }
html { scroll-padding-top:90px }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",sans-serif; overflow-wrap:anywhere }
a { color:var(--accent); text-underline-offset:.22em }
a:hover { color:#b3ffdc }
a:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible { outline:3px solid var(--accent); outline-offset:5px }
.wrap { max-width:1120px; margin:auto; padding:0 24px }
header { border-bottom:1px solid var(--line); background:var(--bg) }
header nav { display:flex; align-items:center; flex-wrap:wrap; gap:12px 26px; min-height:76px; padding-top:14px; padding-bottom:14px }
header a { color:var(--ink); text-decoration:none; font-size:14px }
.brand { display:flex; align-items:center; gap:9px; font-size:21px; font-weight:800; letter-spacing:.02em }
.open-app { margin-left:auto; color:var(--accent) }
main { padding-bottom:50px!important }
.language { display:flex; justify-content:flex-end; gap:18px; margin:25px 0 40px; font-size:14px }
.language [aria-current] { color:var(--ink); text-decoration:none }
h1,h2,.card h3 { line-height:1.2; letter-spacing:-.025em; text-wrap:balance }
h1 { font-size:clamp(32px,4.7vw,58px); max-width:850px; margin:18px 0 25px }
h2 { font-size:clamp(24px,3vw,31px); margin:0 0 17px }
p { margin:0 0 23px }
.lead { font-size:21px; color:var(--muted); max-width:780px }
.eyebrow,.category { font-size:13px; color:var(--accent); letter-spacing:.07em; margin-bottom:12px }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:22px; margin:42px 0 }
.card { padding:26px; background:var(--panel); border:1px solid var(--line); border-radius:18px }
.card h2, .card h3 { font-size:24px; margin:0 0 17px }
.card h2 a, .card h3 a { color:var(--ink); text-decoration:none }
.card p,.card time { color:var(--muted); font-size:15px }
.card .category { color:var(--accent) }
.reading { max-width:780px; margin:0 auto 70px }
.reading section { margin:42px 0; scroll-margin-top:24px }
.byline,.back { font-size:14px; color:var(--muted) }
.contents { display:grid; gap:6px; border-left:2px solid var(--accent); padding:5px 0 5px 20px; margin:32px 0; font-size:15px }
.product-link { padding:20px 0; border-top:1px solid var(--line) }
footer { border-top:1px solid var(--line); padding-top:28px!important; padding-bottom:38px!important; font-size:14px; color:var(--muted) }
.skip { position:absolute; top:-100px; left:20px; padding:10px; background:var(--panel) }
.skip:focus { top:8px; z-index:10 }
@media(max-width:480px) { .wrap { padding-left:20px; padding-right:20px } header nav { gap:10px 16px } .open-app { margin-left:0 } .language { margin-bottom:28px } .lead { font-size:19px } .card { padding:22px } }
html[lang="ko"] { word-break:keep-all; overflow-wrap:anywhere; }
/* Japanese: headings and labels keep each short phrase on one line (tools/site/phrase.mjs puts it in <ja-ph>); body text
   breaks between characters with kinsoku, and by phrase where the browser supports auto-phrase. */
html[lang="ja"] { word-break:auto-phrase; line-break:strict; }
ja-ph { white-space:nowrap; }
.holdings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:24px; margin:25px 0 }
.holdings-grid label { font-weight:600 }
textarea { display:block; width:100%; margin-top:10px; padding:16px; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:12px; font:16px/1.7 ui-monospace,monospace; resize:vertical }
button { border:0; border-radius:999px; background:var(--accent); color:#06331f; padding:13px 22px; font:inherit; font-size:16px; font-weight:600; cursor:pointer }
.example-note { padding:18px; border-left:2px solid var(--accent); background:var(--panel); font-size:15px }
.calculator-result { background:var(--panel); padding:24px; border:1px solid var(--accent); border-radius:16px; margin:25px 0 }
#overlap-error { color:#ffb6b6; margin-top:18px }
.table-hint { font-size:14px; color:var(--muted); margin-bottom:12px }
.table-scroll { max-width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:12px }
.table-scroll:focus-visible { outline:3px solid var(--accent); outline-offset:5px }
.table-scroll table { width:100%; min-width:640px; border-collapse:collapse; font-size:15px; line-height:1.65 }
.table-scroll caption { text-align:left; padding:18px; color:var(--muted); background:var(--panel) }
.table-scroll th,.table-scroll td { padding:18px; text-align:left; vertical-align:top; border-top:1px solid var(--line) }
.table-scroll thead { background:var(--panel) }
.table-scroll th[scope="row"] { width:18%; min-width:145px; font-weight:600 }
.table-scroll th[scope="row"] a { font-size:13px; font-weight:400 }
.diagram { margin:30px 0; padding:20px 0; border-block:1px solid var(--line) }
.diagram img { display:block; width:100%; max-width:440px; height:auto; margin:0 auto 20px }
.diagram figcaption { font-size:15px; color:var(--muted); margin-bottom:12px }
.diagram details { font-size:15px }
.diagram summary { cursor:pointer; color:var(--accent) }
.diagram summary:focus-visible { outline:3px solid var(--accent); outline-offset:5px }
.chart { margin:30px 0 }
.chart img { display:block; width:100%; height:auto; border-radius:13px }
.chart figcaption { font-size:15px; color:var(--muted); margin:12px 0 }
.chart details { font-size:15px }
.chart summary { cursor:pointer; color:var(--accent) }
.chart summary:focus-visible { outline:3px solid var(--accent); outline-offset:5px }
.chart table { width:100%; border-collapse:collapse; font-size:14px; line-height:1.5; margin-top:10px }
.chart th,.chart td { padding:6px 10px; text-align:left; border-top:1px solid var(--line); font-variant-numeric:tabular-nums }
.chart thead th { color:var(--muted); font-weight:500 }
.citations { font-size:14px; color:var(--muted) }
/* Explained pages (tools/site/explained.mjs) — the disclaimer is part of the reading flow, top and bottom, not a footer note */
.disclaimer { font-size:14px; line-height:1.6; color:var(--muted); padding:14px 18px; border-left:2px solid var(--accent); background:var(--panel); border-radius:0 12px 12px 0; margin:0 0 28px }
.explained .as-of { color:var(--ink) }
.explained .ai-note { white-space:normal }
.explained li { margin-bottom:10px }
.explained dt { font-weight:600; margin-top:14px }
.explained dd { margin:2px 0 0; color:var(--muted) }
.explained details { padding:10px 0; border-bottom:1px solid var(--line) }
.explained summary { cursor:pointer; font-weight:600 }
.explained .product-link small { color:var(--muted) }