:root { color-scheme: dark; --bg:#111519; --panel:#171e25; --text:#dce2e6; --muted:#9aaab5; --line:#33414e; --accent:#9ddad1; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.6 system-ui,-apple-system,sans-serif; }
main { max-width:1180px; margin:auto; padding:25px 28px 38px; }
a { color:var(--accent); text-underline-offset:3px; }
nav { display:flex; justify-content:space-between; font-size:13px; }
nav a { text-decoration:none; }
.eyebrow { margin:32px 0 5px; color:var(--muted); font:11px/1.6 ui-monospace,monospace; letter-spacing:.1em; }
h1 { font-size:clamp(28px,4vw,40px); line-height:1.2; font-weight:550; letter-spacing:-.035em; margin:0 0 12px; }
.intro { max-width:820px; margin:0; color:var(--muted); }
.ledger { display:flex; flex-wrap:wrap; gap:8px 25px; font-size:13px; margin:18px 0 25px; color:var(--muted); }
.ledger strong { color:var(--accent); font-weight:550; }
fieldset { border:0; padding:0; margin:0; min-width:0; }
button { border:1px solid var(--line); border-radius:4px; padding:7px 11px; color:var(--text); background:var(--panel); font:13px/1.4 system-ui,sans-serif; cursor:pointer; }
button:hover { border-color:var(--accent); }
button:disabled { opacity:.4; cursor:default; }
button[aria-pressed=true] { border-color:var(--accent); background:#213c3c; }
button[data-piece] { display:flex; align-items:center; gap:7px; }
.swatch { display:inline-block; width:10px; height:10px; border-radius:50%; }
.piece-picker,.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.toolbar { margin:13px 0; gap:12px 22px; font-size:12px; color:var(--muted); }
.toolbar label { display:flex; gap:6px; align-items:center; }
input { accent-color:var(--accent); }
.timeline { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.timeline input { flex:1; min-width:110px; }
output { font:12px ui-monospace,monospace; color:var(--muted); min-width:110px; }
.selection { font-size:13px; margin:16px 0 12px; min-height:21px; }
.views { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.view { border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.view h2 { display:flex; flex-wrap:wrap; gap:4px 10px; justify-content:space-between; font-size:13px; font-weight:500; margin:0; padding:10px 12px; background:var(--panel); }
.view h2 span { color:var(--muted); font-size:11px; }
.viewport { height:340px; position:relative; touch-action:none; }
canvas { display:block; width:100%; height:100%; }
.hint { font-size:11px; color:var(--muted); margin:9px 0; }
.explanation { max-width:860px; margin:32px 0 25px; border-top:1px solid var(--line); padding-top:20px; }
.explanation h2 { font-size:21px; font-weight:550; margin:0 0 10px; }
.explanation p { font-size:14px; color:#b8c5cd; }
footer { display:flex; flex-wrap:wrap; gap:10px 22px; font-size:12px; border-top:1px solid var(--line); padding-top:17px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.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; }
@media(max-width:560px) { main { padding:20px 16px; } .views { grid-template-columns:1fr; } .viewport { height:300px; } .timeline input { flex-basis:45%; } }