:root{--bg: #e7eaed;--surface: #f6f7f8;--raised: #dde1e5;--ink: #1b1e22;--ink-2: #4f5660;--ink-3: #636a74;--line: rgba(27, 30, 34, .12);--stage: #d6dbe0;--stage-dot: #aeb7c1;--paper: #d9412b;--paper-back: #faf8f3;--ease: cubic-bezier(.22, 1, .36, 1);--display: "Bricolage Grotesque", system-ui, sans-serif;--text: "Atkinson Hyperlegible Next", system-ui, sans-serif;color-scheme:light}@media (prefers-color-scheme: dark){:root{--bg: #16181b;--surface: #1e2125;--raised: #272b30;--ink: #eceef0;--ink-2: #a7adb5;--ink-3: #8a919a;--line: rgba(236, 238, 240, .1);--stage: #22262b;--stage-dot: #414851;--paper-back: #f2efe8;color-scheme:dark}}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--text);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:2px solid var(--ink);outline-offset:2px}kbd{font:600 12px/20px var(--text);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 6px;background:var(--surface);color:var(--ink-2)}.icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}.button{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:10px;font:600 15px var(--text);text-decoration:none;transition:background-color .16s var(--ease),transform .12s var(--ease)}.button.primary{background:var(--ink);color:var(--surface)}.button.primary:hover{background:var(--ink-2)}.button:active{transform:scale(.97)}.bar{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}.bar-row{max-width:1200px;margin:0 auto;padding:12px 32px;display:flex;align-items:center;gap:40px}.brand{display:inline-flex;align-items:center;gap:10px;font:600 20px var(--display);text-decoration:none;white-space:nowrap}.mark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:4px;background:#d9412b;color:#faf8f3;font:500 18px var(--text)}.path{flex:1;display:flex;align-items:center;list-style:none;margin:0;padding:0}.station{display:flex;align-items:center;flex:1 1 auto}.station:last-child{flex:0 0 auto}.station:not(:last-child):after{content:"";flex:1;min-width:16px;margin:0 12px;border-top:2px dashed var(--ink-3);opacity:.45}.station.complete:after{border-top-style:solid;border-color:var(--ink);opacity:1}.station:after{transition:opacity .24s var(--ease),border-color .24s var(--ease)}.station a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;border-radius:6px;padding:4px}.station a:hover .station-name{color:var(--ink)}.node{width:11px;height:11px;border:1.5px solid var(--ink-3);transform:rotate(45deg);margin:0 2px;transition:background-color .24s var(--ease),border-color .24s var(--ease)}.complete .node{background:var(--ink);border-color:var(--ink)}.current .node{background:#d9412b;border-color:var(--ink)}.locked .node{border-style:dashed}.station-name{font-size:15px;color:var(--ink-2);transition:color .24s var(--ease)}.current .station-name{color:var(--ink);font-weight:600}.station-count{font-size:13px;color:var(--ink-3)}main{max-width:1200px;margin:0 auto;padding:40px 32px 96px}h1,h2{font-family:var(--display);font-weight:500}.picker-head h1{font-size:48px;line-height:1.04;letter-spacing:-.02em;margin:0 0 12px}.picker-head p{font-size:18px;color:var(--ink-2);max-width:36rem;margin:0 0 24px}.filters{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:10px;background:var(--raised)}.filters a{padding:6px 14px;border-radius:6px;font-size:15px;color:var(--ink-2);text-decoration:none;transition:background-color .16s var(--ease),color .16s var(--ease)}.filters a:hover{color:var(--ink)}.filters a[aria-current]{background:var(--surface);color:var(--ink);font-weight:600}.features{margin-top:32px;display:grid;grid-template-columns:minmax(0,2.2fr) minmax(220px,1fr);gap:16px;align-items:stretch}.features.single{grid-template-columns:minmax(0,1fr)}.up-next{display:grid;grid-template-columns:minmax(200px,360px) minmax(0,1fr);align-items:center;gap:40px;padding:24px;border-radius:16px;background:var(--surface)}.up-next-art canvas{display:block;width:100%;aspect-ratio:1;border-radius:8px;image-rendering:pixelated}.up-next-label{font-size:15px;color:var(--ink-3);margin:0 0 4px}.up-next h2{font-size:40px;line-height:1.08;letter-spacing:-.02em;margin:0 0 8px}.up-next p{color:var(--ink-2);margin:0 0 24px}.today{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:16px;background:var(--surface);text-decoration:none}.today canvas{display:block;width:100%;max-width:280px;margin:8px auto;aspect-ratio:1;border-radius:8px;image-rendering:pixelated}.today-label{display:flex;justify-content:space-between;gap:8px;font-size:15px;color:var(--ink-3)}.today-date{color:var(--ink-2)}.today-name{font:500 24px/1.15 var(--display)}.today:hover .today-name{text-decoration:underline;text-underline-offset:4px}.welcome{margin-top:24px;display:flex;align-items:center;gap:16px 24px;padding:16px 20px;border-radius:12px;border:1.5px dashed var(--ink-3)}.welcome p{flex:1;margin:0;color:var(--ink-2)}.welcome strong{color:var(--ink)}.welcome .button{flex:none;height:40px}.pips{display:inline-flex;gap:5px;margin-left:auto;padding:0 2px}.pip{width:6px;height:6px;border:1.5px solid var(--ink-3);transform:rotate(45deg)}.pip.on{background:var(--ink-2);border-color:var(--ink-2)}.shelf{margin-top:48px}.shelf h2{display:flex;align-items:baseline;gap:12px;font-size:24px;margin:0 0 16px}.shelf-count{font:14px var(--text);color:var(--ink-3)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:16px}.tile{position:relative;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;background:var(--surface);text-decoration:none}.tile canvas{display:block;width:100%;aspect-ratio:1;image-rendering:pixelated}.tile-label{display:flex;flex-direction:column;gap:2px;padding:12px 16px 16px}.tile-name{font-weight:600}a.tile:hover .tile-name{text-decoration:underline;text-underline-offset:4px}.tile-meta{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-3)}.tile.folded:after{content:"";position:absolute;top:0;right:0;width:32px;height:32px;background:linear-gradient(to bottom left,var(--bg) 50%,var(--paper) 50%);border-bottom-left-radius:4px}.drawer-link{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--line);font-size:15px;text-decoration:none;white-space:nowrap;transition:background-color .16s var(--ease)}.drawer-link:hover,.drawer-link[aria-current]{background:var(--surface)}.drawer-icon{position:relative;width:14px;height:11px;border:1.5px solid currentColor;border-radius:2px}.drawer-icon:after{content:"";position:absolute;left:3px;right:3px;top:3px;height:1.5px;background:currentColor}.drawer-count{font-size:13px;color:var(--ink-3)}.drawer .grid{margin-top:32px}.drawer-next{margin:32px 0 0;color:var(--ink-2)}.drawer-next a{color:var(--ink);font-weight:600;text-underline-offset:4px}.empty{margin-top:32px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 24px;border-radius:16px;border:1.5px dashed var(--line)}.empty-art{width:56px;height:56px;margin-bottom:24px;border:1.5px dashed var(--ink-3);transform:rotate(45deg);opacity:.6}.empty p{margin:0 0 20px;max-width:28rem;color:var(--ink-2)}.empty .empty-title{font:500 24px var(--display);color:var(--ink);margin-bottom:4px}.tile.soon{background:transparent;border:1.5px dashed var(--line)}.soon-art{aspect-ratio:1;display:grid;place-items:center}.soon-art:before{content:"";width:40%;aspect-ratio:1;border:1.5px dashed var(--ink-3);opacity:.5;transform:rotate(45deg)}.tile.soon .tile-name{color:var(--ink-2)}.ws-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-bottom:24px}.back{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--ink-2);text-decoration:none}.back:hover{color:var(--ink)}.ws-title{flex:1}.ws-meta{display:flex;align-items:center;gap:8px;margin:4px 0 0;font-size:14px;color:var(--ink-3)}.ws-meta .pips{margin-left:0}.ws-meta .dot{width:3px;height:3px;background:var(--ink-3)}.ws-head h1{font-size:36px;line-height:1.1;letter-spacing:-.02em;margin:0}.swatches{display:flex;gap:8px}.swatches button{width:20px;height:20px;padding:0;border:1px solid var(--line);border-radius:4px;background:var(--swatch)}.swatches button[aria-checked=true]{outline:2px solid var(--ink);outline-offset:2px}.ws-body{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}.stage{position:relative;margin:0 auto;width:min(100%,calc(100vh - 200px));min-width:280px;aspect-ratio:1;border:1px solid var(--line);border-radius:12px;overflow:hidden}.stage canvas{display:block;width:100%;height:100%;image-rendering:pixelated;cursor:grab;touch-action:none}.stage.dragging canvas{cursor:grabbing}.view-controls{position:absolute;top:12px;right:12px;display:flex;gap:8px}.view-controls button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:14px;transition:background-color .16s var(--ease),color .16s var(--ease)}.view-controls button[aria-pressed=true]{background:var(--ink);color:var(--surface)}.view-controls button:disabled{color:var(--ink-3);cursor:default}.hint{position:absolute;left:12px;bottom:12px;padding:2px 8px;border-radius:6px;background:var(--surface);font-size:13px;color:var(--ink-2);pointer-events:none;transition:opacity .3s var(--ease)}.stage.touched .hint{opacity:0}.panel{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:16px;background:var(--surface)}.step-count{font-size:14px;color:var(--ink-3);margin:0 0 -8px}.instruction{font-size:21px;line-height:1.4;font-weight:500;min-height:4.2em;margin:0}.symbol{align-self:flex-start;font-size:14px;color:var(--ink-2);text-underline-offset:4px}.symbol[hidden]{display:none}.tip summary{width:fit-content;font-size:14px;color:var(--ink-2);cursor:pointer}.tip summary:hover,.tip[open] summary{color:var(--ink)}.tip p{margin:8px 0 0;padding:12px;border-radius:8px;background:var(--raised);font-size:15px;color:var(--ink-2)}.controls{display:flex;gap:8px}.controls button{display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:44px;border-radius:10px;border:1px solid var(--line);background:var(--surface);transition:background-color .16s var(--ease),transform .12s var(--ease)}.controls button:hover{background:var(--raised)}.controls button:active{transform:scale(.97)}.controls .play{flex:1;background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:600}.controls .play:hover{background:var(--ink-2)}.scrub{width:100%;margin:0;accent-color:var(--ink)}.finish{padding:16px;border-radius:12px;background:var(--raised);animation:rise .36s var(--ease)}.finish p{margin:0 0 12px;color:var(--ink-2)}.finish .finish-title{font:600 20px var(--display);color:var(--ink);margin-bottom:4px}.step-list{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px;max-height:320px;overflow-y:auto}.step-list button{display:flex;align-items:flex-start;gap:12px;width:100%;padding:8px;border:0;border-radius:8px;background:transparent;text-align:left;font-size:14px;line-height:20px;color:var(--ink-2);transition:background-color .16s var(--ease),color .16s var(--ease)}.step-list button:hover{background:var(--raised)}.step-list button[aria-current]{background:var(--raised);color:var(--ink)}.step-list .num{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:4px;background:var(--raised);font-size:12px;font-weight:600;transition:background-color .24s var(--ease),color .24s var(--ease)}.step-list .past .num{background:var(--ink);color:var(--surface)}.step-list [aria-current] .num{background:var(--paper);color:#fff}.keys{display:flex;flex-wrap:wrap;gap:8px 20px;margin:24px 0 0;font-size:14px;color:var(--ink-3)}.keys span{display:inline-flex;align-items:center;gap:6px}.picker-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.chip-count{margin-left:6px;font-size:13px;color:var(--ink-3)}.filters a[aria-current] .chip-count{color:var(--ink-2)}.button.surprise{height:40px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}.button.surprise:hover{background:var(--raised)}.button.secondary{border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}.button.secondary:hover{background:var(--surface)}.play-all{align-self:flex-start;border:0;background:none;padding:0;font-size:14px;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px}.play-all[aria-pressed=true]{color:var(--ink)}.finish .tally{font-size:14px;color:var(--ink-3)}.finish .tally a{color:var(--ink-2);text-underline-offset:3px}.finish .share-status{margin:8px 0 0;font-size:14px;overflow-wrap:anywhere}.finish .share-status:empty{display:none}.finish-actions{display:flex;flex-wrap:wrap;gap:8px}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}.bar{view-transition-name:bar}::view-transition-group(root){animation-duration:.26s;animation-timing-function:var(--ease)}::view-transition-new(root){animation:rise .26s var(--ease) both}@keyframes rise{0%{opacity:0;transform:translateY(8px)}}@media (max-width: 880px){.bar-row{padding:12px 16px;gap:12px}.path{min-width:0}.station:not(:last-child):after{min-width:8px;margin:0 4px}.drawer-link{flex:none;padding:0 10px}.brand{font-size:0;gap:0}.station:not(.current) .station-name,.station:not(.current) .station-count{display:none}main{padding:24px 16px 64px}.picker-head h1{font-size:36px}.features{grid-template-columns:minmax(0,1fr)}.drawer-name{display:none}.welcome{flex-direction:column;align-items:flex-start}.up-next{grid-template-columns:1fr;gap:20px;padding:16px}.up-next h2{font-size:32px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ws-head h1{font-size:28px}.ws-body{grid-template-columns:1fr;gap:16px}.stage{width:100%;min-width:0}.panel{position:static;padding:16px}.instruction{font-size:19px;min-height:0}.keys{display:none}}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}