:root {
  --paper:#faf8f3; --ink:#272724; --muted:#77756f; --rule:#dcd7cb; --accent:#a34f3a;
  --run:#c4466e; --ride:#1c80b0; --foot:#7a9a22; --snow:#6a5fb0;
  --serif:Georgia,"Times New Roman",serif; --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme:light;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.6 var(--serif); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration-color:#b4a690; text-underline-offset:4px; }
a:hover, a:focus-visible { color:var(--accent); text-decoration-color:var(--accent); }
button { font:inherit; color:inherit; cursor:pointer; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.preview-header { min-height:56px; padding:10px 40px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--rule); font:12px var(--sans); }
.preview-header a { color:var(--muted); text-decoration:none; }
.preview-label { font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.preview-status { color:var(--muted); border:1px solid var(--rule); padding:3px 8px; border-radius:3px; font-size:10px; white-space:nowrap; }

main { max-width:1060px; margin:0 auto; padding:48px 40px 72px; }
.eyebrow { font:11px/1.5 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
h1 { font-weight:400; letter-spacing:-.035em; font-size:clamp(34px,5vw,50px); line-height:1.1; margin:0 0 16px; }
h2 { font-weight:400; font-size:26px; letter-spacing:-.02em; margin:0 0 6px; }
.lede { color:#66635e; max-width:620px; margin:0 0 36px; }
.small { font:12px/1.6 var(--sans); color:var(--muted); }
section + section { margin-top:64px; }

/* Controls */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.chip { font:12px var(--sans); border:1px solid var(--rule); background:transparent; border-radius:999px; padding:6px 12px; display:inline-flex; gap:7px; align-items:center; }
.chip[aria-pressed="true"] { border-color:var(--ink); background:#fff; }
.swatch { width:9px; height:9px; border-radius:2px; display:inline-block; flex:none; }

/* Legend */
.legend { display:flex; flex-wrap:wrap; gap:16px; font:12px var(--sans); color:var(--muted); margin:0 0 16px; }
.legend span { display:inline-flex; align-items:center; gap:6px; }

/* Tooltip */
.tip { position:fixed; z-index:10; pointer-events:none; background:var(--ink); color:var(--paper); font:12px/1.5 var(--sans); padding:8px 10px; border-radius:4px; max-width:260px; box-shadow:0 6px 20px #0002; opacity:0; transition:opacity 80ms; }
.tip.on { opacity:1; }
.tip b { font-weight:600; }

/* Table view toggle */
details.data-table { margin-top:20px; font:12px var(--sans); color:var(--muted); }
details.data-table table { border-collapse:collapse; margin-top:10px; }
details.data-table td, details.data-table th { padding:3px 14px 3px 0; text-align:left; border-bottom:1px solid var(--rule); font-weight:400; }

.footer-note { border-top:1px solid var(--rule); margin-top:64px; padding-top:18px; font:12px/1.6 var(--sans); color:var(--muted); }

@media (max-width:700px) {
  .preview-header { padding:10px 16px; }
  .preview-label { display:none; }
  main { padding:32px 16px 56px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }