:root{color-scheme:light;--paper: #efefef;--paper-2: #f2f2f2;--ink: #0a0a0a;--muted: #8a8a8a;--quiet: #b0b0b0;--line: #d4d4d4;--void: #080808;--void-2: #101010;--lime: #aeff00;--indigo: #1500b6;--font: Geist, "Inter Tight", ui-sans-serif, system-ui, sans-serif;--mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;font-family:var(--font);color:var(--ink)}*{box-sizing:border-box}html{scroll-behavior:smooth}html,body,#root{margin:0;min-height:100%;background:var(--paper)}body{overflow-x:hidden}button,input,a{font:inherit;color:inherit}button{cursor:pointer}.page{padding-top:52px}.nav{position:fixed;top:0;left:0;right:0;z-index:20;height:52px;display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(280px,1.15fr);align-items:center;padding:0 28px;background:var(--paper);border-bottom:1px solid rgb(0 0 0 / .06);font-size:10px;letter-spacing:.14em;font-weight:500}.nav.is-dark{background:var(--void);color:#f0f0f0;border-bottom-color:#1c1c1c}.nav.is-dark .gallery,.nav.is-dark .brand,.nav.is-dark .nav-links a,.nav.is-dark .source{color:#f0f0f0}.nav.is-dark .nav-progress{background:#f0f0f0}.nav.is-dark .nav-stats{color:#f0f0f0}.nav.is-dark .nav-stats b{background:#f0f0f0}.nav.is-dark .source{border-color:#555}.nav-left{position:relative;display:flex;gap:18px;align-items:baseline}.nav-progress{position:absolute;left:0;bottom:-16px;height:1px;background:var(--ink)}.gallery,.source,.brand,.nav-links a{text-decoration:none;color:var(--ink)}.gallery,.source{letter-spacing:.12em;text-transform:none;font-size:10px}.gallery:hover,.source:hover,.nav-links a:hover,.brand:hover{opacity:.55}.brand{letter-spacing:.16em}.nav-stats{margin:0;color:var(--ink);white-space:nowrap}.nav-stats b{display:inline-block;width:6px;height:6px;background:var(--ink);margin-right:10px;transform:translateY(-1px)}.nav-stats span{margin-left:14px}.nav-links{display:flex;gap:16px;justify-content:flex-end;align-items:center;white-space:nowrap;padding-left:28px}.nav-links .source{margin-left:4px;padding:4px 8px;border:1px solid currentColor}.block{padding:28px 36px 48px}.light{background:var(--paper);color:var(--ink)}.dark{background:var(--void);color:#f3f3f3}.sec-head{display:flex;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:.16em;color:var(--muted);margin-bottom:28px}.sec-head.invert,.dark .sec-head{color:#6e6e6e}.meta-row{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:24px;font-size:10px;letter-spacing:.14em;color:#5c5c5c;line-height:1.45;margin:18px 0 12vh}.meta-row p{margin:0}.meta-end{text-align:right}.hero{min-height:calc(100dvh - 52px);display:flex;flex-direction:column}.hero-title{font-size:clamp(44px,9.6vw,132px);font-weight:400;letter-spacing:-.055em;line-height:.9;margin-top:auto;width:100%}.hero-title .pr-text{letter-spacing:-.055em;white-space:nowrap}.hero-rule{height:1px;background:#0000002e;margin:18px 0 22px}.hero-subwrap{display:flex;justify-content:space-between;align-items:end;gap:24px;min-height:96px}.hero-sub{font-size:clamp(16px,1.7vw,22px);font-weight:400;line-height:1.35;letter-spacing:-.02em;max-width:34ch;white-space:pre-line}.scroll-hint{font-size:10px;letter-spacing:.14em;color:var(--quiet);margin-bottom:8px}.statement{min-height:100dvh;display:flex;flex-direction:column}.statement-title{margin:auto;font-size:clamp(36px,4.6vw,64px);font-weight:400;letter-spacing:-.04em;line-height:1.15;text-align:center;white-space:pre-line}.modes{display:flex;flex-wrap:wrap;gap:18px;font-size:10px;letter-spacing:.14em;color:#5a5a5a;align-items:center}.modes em{margin-left:auto;font-style:normal;color:#cfcfcf}.display{margin:0 0 28px;font-size:clamp(40px,6vw,88px);font-weight:400;letter-spacing:-.05em;line-height:.95}.display.invert,.invert .pr-text{color:#f5f5f5}.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #222;border-left:1px solid #222}.tile{min-height:320px;padding:18px 22px 20px;border-right:1px solid #222;border-bottom:1px solid #222;background:#0a0a0a;display:flex;flex-direction:column;min-width:0}.tile-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;color:#6a6a6a}.tile-top button{background:none;border:0;padding:0;color:#8a8a8a;letter-spacing:.14em;font-size:10px}.tile-title{margin:48px 0 auto;font-size:clamp(32px,3.6vw,56px);font-weight:400;letter-spacing:-.045em;color:#fff}.tile-blurb{margin:18px 0 14px;color:#9a9a9a;font-size:13px;line-height:1.4;max-width:36ch}.tile-foot{display:flex;justify-content:space-between;align-items:center}.tile-foot code{font-family:var(--mono);color:var(--lime);font-size:12px}.dot{width:8px;height:8px;display:block}.dot.lime{background:var(--lime)}.dot.empty{border:1px solid #555;background:transparent}.dot.red{background:#ff3d00}.dot.cyan{background:#19c8ff}.dot-pair{display:flex;gap:3px}.pin-wrap{height:220vh;background:var(--paper)}.pin-sticky{position:sticky;top:52px;height:calc(100dvh - 52px);display:flex;flex-direction:column}.pin-title{margin:auto;font-size:clamp(32px,4.4vw,62px);font-weight:400;letter-spacing:-.045em;line-height:1.15;text-align:center;white-space:pre-line}.pin-bar{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;font-size:10px;letter-spacing:.16em;color:#7a7a7a}.pin-bar i{display:block;height:1px;background:#d8d8d8;position:relative}.pin-bar b{position:absolute;left:0;top:0;height:1px;background:var(--indigo)}.playground .display{margin-bottom:22px}.play-shell{display:grid;grid-template-columns:1fr 320px;border:1px solid #d0d0d0;min-height:640px;background:#f7f7f7}.play-shell.dark .specimen-stage,.play-shell.dark .specimen{background:var(--void);color:#fff}.specimen{display:flex;flex-direction:column;min-width:0;background:var(--paper-2)}.specimen-top{display:flex;justify-content:space-between;padding:14px 16px;font-size:10px;letter-spacing:.16em;color:#8a8a8a}.specimen-stage{flex:1;display:grid;place-items:center;padding:24px;min-height:280px}.specimen-type{font-size:clamp(36px,5vw,72px);font-weight:400;letter-spacing:-.045em;text-align:center;width:min(16ch,100%)}.specimen-foot{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:8px 14px;border-top:1px solid #e4e4e4;font-size:10px;letter-spacing:.12em}.replay-btn{background:none;border:0;padding:0;letter-spacing:.14em;font-size:10px}.specimen-foot input[type=range],.slider input[type=range]{width:100%;appearance:none;height:1px;background:#111;border-radius:0}.specimen-foot input[type=range]::-webkit-slider-thumb,.slider input[type=range]::-webkit-slider-thumb{appearance:none;width:8px;height:8px;background:#111;border:0;border-radius:0}.readout{font-variant-numeric:tabular-nums;color:#666}.code{margin:0;background:#080808;color:#eee;padding:16px 18px 18px;font-family:var(--mono);font-size:12px;line-height:1.45;position:relative;min-height:118px}.code .prop{color:var(--lime)}.code .copy{position:absolute;right:12px;top:12px;background:transparent;border:1px solid #444;color:#ddd;font-size:10px;letter-spacing:.12em;padding:4px 8px}.controls{border-left:1px solid #d0d0d0;padding:14px 14px 18px;background:#f4f4f4;overflow:auto}.field{display:grid;gap:8px;margin-bottom:16px}.field>span,.slider>span{font-size:10px;letter-spacing:.16em;color:#7a7a7a}.field input[type=text],.field input:not([type=range]){border:1px solid #c8c8c8;background:#fff;padding:8px 10px;border-radius:2px;font-size:14px}.chips{display:flex;flex-wrap:wrap;gap:6px}.chips button,.reset{background:#fff;border:1px solid #c8c8c8;border-radius:2px;padding:6px 8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase}.chips button.is-on{background:#111;color:#fff;border-color:#111}.tabs{display:flex;gap:18px;border-bottom:1px solid #d8d8d8;margin:6px 0 16px;font-size:11px;letter-spacing:.16em}.tabs button{background:none;border:0;padding:0 0 8px;color:#8a8a8a;text-transform:uppercase}.tabs button.is-on{color:#111;box-shadow:inset 0 -1px #111}.slider{display:grid;gap:8px;margin-bottom:14px}.slider span{display:flex;justify-content:space-between}.slider b{color:#111;font-weight:500}.swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.swatch{width:18px;height:18px;border:1px solid #111;padding:0}.swatch.is-on{outline:2px solid #111;outline-offset:2px}.swatch.none{background:linear-gradient(to bottom right,transparent calc(50% - 1px),#111 calc(50% - 1px),#111 calc(50% + 1px),transparent calc(50% + 1px)),#fff}.swatch.spectrum{background:conic-gradient(#ff3d00,#aeff00,#00d4ff,#1500b6,#ff3d00)}.hex{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.1em}.hex input{width:84px;border:1px solid #c8c8c8;padding:4px 6px;font-family:var(--mono);font-size:11px}.colours .pair{display:grid;grid-template-columns:14px auto 1fr;gap:8px;align-items:center;font-size:11px;margin-top:8px}.colours i{width:14px;height:14px;border:1px solid #111;display:block}.colours em{font-style:normal;letter-spacing:.12em;font-size:10px}.colours code{font-family:var(--mono);justify-self:end;font-size:11px}.reset{width:100%;margin-top:8px;padding:10px}.trig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}.trig-card{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px;text-decoration:none;color:inherit;min-height:220px;display:flex;flex-direction:column;gap:16px}.trig-card span{font-size:10px;letter-spacing:.16em;color:var(--muted)}.trig-title,.trig-card strong{font-size:32px;font-weight:400;letter-spacing:-.04em}.trig-card p{margin:auto 0 0;color:#6a6a6a;font-size:13px;line-height:1.4}.install{min-height:70vh}.install-lede{max-width:52ch;color:#9a9a9a;line-height:1.5}.install-lede code{font-family:var(--mono);color:var(--lime)}.install-code{max-width:560px;margin:28px 0}.install-code code{color:#eee}.kicker{font-size:11px;letter-spacing:.12em;color:#666}.pr{position:relative;display:block}.pr-text{margin:0;display:block;white-space:pre-line;opacity:0}.pr-text.is-on{opacity:1}.pr-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.pr-canvas.is-off{opacity:0}@media(max-width:980px){.nav{grid-template-columns:1fr;height:auto;padding:10px 16px 12px;gap:8px}.page{padding-top:92px}.nav-links,.nav-stats{justify-content:flex-start;overflow:auto}.meta-row{grid-template-columns:1fr 1fr;margin-bottom:48px}.preset-grid,.trig-grid,.play-shell{grid-template-columns:1fr}.block{padding:22px 16px 36px}.pin-sticky{top:92px;height:calc(100dvh - 92px)}}@media(prefers-reduced-motion:reduce){.pr-text{opacity:1}.pr-canvas{display:none}}