:root{
  --ink:#111; --line:#111; --paper:#f6f4ef; --wood:#d8b88a; --brass:#c69a3e; --steel:#9aa0a6;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--paper); color:var(--ink);
  font:16px/1.5 -apple-system,Inter,Segoe UI,Roboto,sans-serif;
  display:flex; flex-direction:column; align-items:center;
  -webkit-font-smoothing:antialiased;
}
header{margin:48px 24px 8px; text-align:center}
h1{font-size:30px; font-weight:600; letter-spacing:-.02em; margin:0}
.sub{color:#666; margin-top:6px}
.stage{width:min(820px,92vw); margin:24px 0; touch-action:none; cursor:grab}
.stage.drag{cursor:grabbing}
.hint{color:#888; font-size:13px; text-align:center; margin-top:-8px}
.controls{display:flex; gap:10px; align-items:center; margin:8px 0 40px}
button{
  font:inherit; font-size:14px; padding:9px 16px; border:1px solid var(--ink);
  background:transparent; color:var(--ink); border-radius:999px; cursor:pointer;
}
button.on{background:var(--ink); color:var(--paper)}
.readout{font-variant-numeric:tabular-nums; color:#666; min-width:150px; text-align:center}
footer{color:#999; font-size:12px; margin-bottom:40px}

/* cards block (.cards/.card/.spec/.materials/.how/.swatch) is styled in index.html's <style> — that's the split */