/* Facets — the few styles the demo and the previews use. The engine needs none of them. */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/IBMPlexMono-500.woff2") format("woff2"); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--canvas); color-scheme: dark; }
body { min-height: 100svh; color: var(--ink); background: var(--canvas); font: 300 16px/1.6 var(--sans); }
.piece { position: relative; margin: 0; height: 100svh; min-height: 320px; }
.piece canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: crosshair; }
.preview .piece { height: min(72vh, 600px); }
.offscreen { position: fixed; left: -10000px; top: 0; width: 960px; height: 600px; }   /* sized so the engine can read it, but out of view */
.note, figcaption { position: absolute; left: 16px; bottom: 16px; padding: 6px 10px; background: rgba(14,13,16,.78); font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); pointer-events: none; }
.eyebrow { margin: 0 0 8px; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.sheet { width: min(100%, 1180px); margin: 0 auto; padding: 40px clamp(18px, 4vw, 48px) 60px; display: grid; gap: 14px; }
.sheet h1 { font: 300 clamp(28px, 4vw, 48px)/1.05 var(--sans); letter-spacing: -.03em; }
.sheet p { max-width: 640px; color: #cfc9bf; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-top: 6px; }
.swatch { display: grid; grid-template-columns: 34px 1fr; gap: 0 10px; align-items: center; padding: 6px; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; }
.swatch i { display: block; width: 34px; height: 34px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 2px 2px 0 rgba(255,255,255,.28), inset -2px -2px 0 rgba(0,0,0,.28); }
.swatch b { display: block; font: 500 11px/1.3 var(--mono); letter-spacing: .04em; white-space: nowrap; }
.swatch span { display: block; font: 400 10px/1.3 var(--mono); color: var(--ink-soft); white-space: nowrap; }
.specimen { display: grid; gap: 18px; }
.specimen .display { font: 300 clamp(40px, 6vw, 88px)/.95 var(--sans); letter-spacing: -.035em; }
.specimen .body { font: 300 17px/1.6 var(--sans); max-width: 560px; }
.specimen .label { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.specimen .caption { font: 400 12px/1.6 var(--mono); color: var(--ink-soft); }
a { color: var(--ink); }