:root { color-scheme: light; --bg:#f5f1e7; --card:#fffdf7; --fg:#202c31; --muted:#4f6266; --line:#a9b9b8; --accent:#00665e; --warm:#9c3c15; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { color-scheme:dark; --bg:#15282d; --card:#1c343a; --fg:#f2eee1; --muted:#c0d0cb; --line:#779994; --accent:#7fe0ca; --warm:#ffb48d; } }
:root[data-theme="dark"] { color-scheme:dark; --bg:#15282d; --card:#1c343a; --fg:#f2eee1; --muted:#c0d0cb; --line:#779994; --accent:#7fe0ca; --warm:#ffb48d; }
* { box-sizing:border-box; }
body { margin:0; color:var(--fg); background:radial-gradient(ellipse at top right, color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%),var(--bg); font-family:"Noto Serif CJK SC","Songti SC",serif; line-height:1.8; }
main { max-width:1120px; margin:auto; padding:32px 24px; }
header { position:relative; padding:12px 0 28px; }
h1 { max-width:18em; font-size:clamp(28px,4vw,43px); line-height:1.45; margin:24px 0; }
h2 { font-size:24px; color:var(--accent); line-height:1.5; }
h3 { margin-bottom:8px; }
p { overflow-wrap:anywhere; }
.eyebrow,footer,.hint { font-size:14px; color:var(--muted); }
.eyebrow { padding-right:100px; }
#theme { position:absolute; top:10px; right:0; }
section { background:var(--card); border:1px solid var(--line); padding:24px; margin:20px 0; border-radius:4px; }
.workspace { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:28px; }
.workspace > * { min-width:0; }
label { display:block; margin:14px 0 4px; }
input,button { font:inherit; color:var(--fg); background:var(--card); border:1px solid var(--muted); border-radius:4px; min-height:44px; padding:6px 10px; max-width:100%; }
input { width:100%; font-variant-numeric:tabular-nums; }
input[type="range"] { padding:0; accent-color:var(--accent); }
button { cursor:pointer; }
button:hover { border-color:var(--accent); }
:focus-visible { outline:3px solid var(--warm); outline-offset:3px; }
.buttons { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
form button { margin-top:12px; }
.error { color:var(--warm); }
.result { overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.placeholder { padding:24px; border-left:3px solid var(--accent); color:var(--muted); }
svg { display:block; width:100%; height:auto; }
svg text { fill:var(--fg); font:14px "Noto Sans CJK SC",sans-serif; }
.axis { stroke:var(--muted); stroke-width:1; }
.step { stroke:var(--accent); stroke-width:2.5; }
.closed { fill:var(--accent); stroke:var(--accent); }
.open { fill:var(--card); stroke:var(--accent); stroke-width:2; }
.current { stroke:var(--warm); stroke-width:2; stroke-dasharray:5 4; }
.marker { fill:var(--warm); }
table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:14px; }
th,td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; }
th:first-child { width:18%; }
.bar { display:block; height:7px; background:var(--accent); margin:5px 0; }
.dots { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0; }
.dot { padding:0 4px; min-width:23px; border:1px solid var(--accent); border-radius:50%; text-align:center; }
.explanation { max-width:85ch; }
[hidden] { display:none !important; }
@media(max-width:720px) { main { padding:16px 12px; } section { padding:16px 12px; } .workspace { grid-template-columns:1fr; gap:16px; } h2 { font-size:21px; } }
@media(prefers-reduced-motion:no-preference) { header { animation:arrive .5s ease-out; } @keyframes arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } }