:root{--bg:#101522;--panel:#182033;--panel-2:#1f2940;--ink:#f3ecdf;--muted:#b8b3c4;--rule:#334061;--accent:#ffb26b;--focus:#ffd166;
 --a1:#2bd4a7;--a2:#1f8fff;--b1:#ff7a59;--b2:#ffc94d;--c1:#b388ff;--c2:#5ac8fa}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden;position:relative}
.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 90% at 20% 0%,#1d2a4a 0%,#101522 55%,#0b0f1a 100%)}
.sky canvas{position:absolute;inset:0;width:100%;height:100%}
.blob{position:absolute;width:52vmax;height:52vmax;border-radius:50%;filter:blur(70px);opacity:.42;mix-blend-mode:screen;animation:drift 26s ease-in-out infinite alternate}
.b1{left:-18vmax;top:-20vmax;background:radial-gradient(circle,var(--a1),transparent 60%)}
.b2{right:-16vmax;top:-12vmax;background:radial-gradient(circle,var(--b1),transparent 60%);animation-delay:-8s;animation-duration:31s}
.b3{left:20vmax;bottom:-30vmax;background:radial-gradient(circle,var(--c1),transparent 60%);animation-delay:-15s;animation-duration:36s}
.b4{right:10vmax;bottom:-24vmax;background:radial-gradient(circle,var(--b2),transparent 60%);animation-delay:-4s;animation-duration:29s;opacity:.28}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(9vmax,6vmax) scale(1.15)}}
.wrap{width:min(1180px,100% - 32px);margin:0 auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#1a1206;padding:8px 12px;border-radius:8px;z-index:5}
.skip:focus{left:16px}
.hero{padding:64px 0 26px}
.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--muted);margin:0 0 10px}
h1{font:400 clamp(3rem,10vw,6.4rem)/1 Georgia,"Times New Roman",serif;margin:0 0 18px;letter-spacing:-.01em}
.shine{background:linear-gradient(100deg,#fff6e6 0%,var(--b2) 28%,var(--b1) 52%,var(--c1) 76%,var(--a1) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shimmer 12s linear infinite}
@keyframes shimmer{to{background-position:200% 0}}
.lede{font-size:1.12rem;max-width:64ch;margin:0 0 16px;color:var(--muted)}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.hero-facts span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border:1px solid var(--rule);border-radius:999px;background:rgba(255,255,255,.04)}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin:14px 0 26px}
.door{--g1:var(--a1);--g2:var(--a2);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--rule);border-radius:22px;overflow:hidden;color:inherit;text-decoration:none;box-shadow:0 20px 60px rgba(0,0,0,.35);transition:transform .2s,box-shadow .2s,border-color .2s;position:relative}
.door::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--g1),var(--g2));z-index:1}
.door-b{--g1:var(--b1);--g2:var(--b2)}
.door-c{--g1:var(--c1);--g2:var(--c2)}
.door-d{--g1:#7ee787;--g2:#ffc94d;grid-column:1/-1;flex-direction:row;min-height:360px}
.door-d .art{flex:1 1 52%;height:auto;min-height:320px}
.door-d .art canvas{width:100%;height:100%;object-fit:cover}
.door-d .body{flex:1 1 48%}
@media (max-width:900px){.door-d{flex-direction:column;min-height:0}.door-d .art{height:200px;min-height:0}}
.wander-art{width:100%;height:100%;display:block;object-fit:cover}
.door:hover{transform:translateY(-4px);border-color:var(--g2);box-shadow:0 26px 70px rgba(0,0,0,.45)}
.door:focus-visible,.notes a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.art{height:176px;background:linear-gradient(135deg,color-mix(in srgb,var(--g1) 28%,#0f1424),color-mix(in srgb,var(--g2) 22%,#0f1424));overflow:hidden;position:relative;display:flex;align-items:center}
.art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--panel) 0%,transparent 12%,transparent 88%,var(--panel) 100%);pointer-events:none}
.marquee{display:flex;gap:10px;padding:0 10px;width:max-content;animation:slide 60s linear infinite}
.door-b .marquee{animation-direction:reverse;animation-duration:70s}
.marquee img{width:160px;height:102px;border-radius:10px;object-fit:cover;box-shadow:0 8px 20px rgba(0,0,0,.4);flex:none}
.marquee.still{animation:none}
@keyframes slide{to{transform:translateX(-50%)}}
.rule30{width:100%;height:100%;display:block;object-fit:cover}
.body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1}
.door h2{font:400 2rem/1.1 Georgia,"Times New Roman",serif;margin:0;background:linear-gradient(90deg,#fff,color-mix(in srgb,var(--g2) 70%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.door .facts{margin:0;color:var(--muted)}
.door ul{margin:0;padding-left:18px;font-size:14px}
.door li{margin:4px 0}
.door .go{margin-top:auto;align-self:flex-start;padding:10px 16px;border-radius:999px;font-weight:700;color:#12101a;background:linear-gradient(90deg,var(--g1),var(--g2));box-shadow:0 8px 24px color-mix(in srgb,var(--g1) 40%,transparent)}
.notes{padding:20px 22px;background:rgba(255,255,255,.04);border:1px dashed var(--rule);border-radius:18px;margin-bottom:32px;backdrop-filter:blur(6px)}
.notes h2{font:400 1.3rem Georgia,"Times New Roman",serif;margin:0 0 8px}
.notes ul{margin:0;padding-left:18px;font-size:14px;color:var(--muted)}
.notes li{margin:4px 0}
.notes a{color:var(--accent)}
footer{padding:0 0 44px;font-size:13px;color:var(--muted)}
pre.readme{white-space:pre-wrap;word-break:break-word;background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:20px;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto}
.back{display:inline-block;margin:18px 0 0;color:var(--accent)}
@media (prefers-reduced-motion:reduce){.blob,.shine,.marquee{animation:none}}
@media (max-width:480px){.hero{padding-top:40px}.body{padding:18px}.art{height:150px}.marquee img{width:130px;height:83px}}
.poker-art{display:flex;align-items:center;justify-content:center;gap:20px;font:clamp(3rem,7vw,6rem) Georgia,serif;color:#efbc72;background:radial-gradient(ellipse,#32684d,#12362c);text-shadow:0 0 35px #efbc7244}.poker-art span{color:#efa89b}.door-poker{border-color:#587761}
.zone-art{display:flex;align-items:center;justify-content:center;gap:16px;font:clamp(1.8rem,4.5vw,3.4rem) Georgia,serif;color:#efbc72;background:radial-gradient(ellipse,#1f4d5e,#102323);letter-spacing:.06em;text-shadow:0 0 30px #8fe3c044}.zone-art span{color:#8fe3c0;font-size:.5em;letter-spacing:.22em;font-family:system-ui,sans-serif}.zone-art span.u{color:#f0a0a0}.door-zone{border-color:#3f6b74}

.door-adventures{grid-column:1/-1;display:grid;grid-template-columns:1.15fr 1fr;--g1:#ffc18d;--g2:#c7b7ff}.adventure-art{align-self:stretch;display:flex;align-items:center;background:#222941}.adventure-art img{display:block;width:100%;height:auto}.door-adventures .body{padding:30px}.door-adventures .eyebrow{color:#ffc18d}@media(max-width:720px){.door-adventures{display:flex}.door-adventures .body{padding:22px}}

/* Arcade Fun, Sudoku and shader-toy doors: as big as the editions, with direct links inside */
.door-squares{--g1:#ffe9a8;--g2:#ff9d5c}.squares-art{display:flex;align-items:center;justify-content:center;gap:12px;min-height:150px;background:radial-gradient(60% 80% at 50% 40%,#4a3a12 0%,#15130f 70%);font:400 38px Georgia,serif;color:#ffe9a8}.squares-art span{padding:8px 14px;border:1px solid #ffc94d;border-radius:14px;box-shadow:0 0 24px rgba(255,201,77,.4)}.squares-art i{font-style:normal;color:#b3b8bf}.squares-art b{color:#7ee787;font-weight:400}
.door-fun{--g1:#ffd166;--g2:#ff8a5b}.fun-art{display:flex;align-items:center;justify-content:center;min-height:150px;background:radial-gradient(60% 80% at 50% 40%,#5a3b2a 0%,#20161a 70%)}.fun-art span{font-size:64px;color:#ffd166;text-shadow:0 0 30px #ff8a5b}
.door-links{cursor:default}.door-links:hover{transform:none}
.door-sudoku{--g1:#9ad0ff;--g2:#c7b7ff}.door-shaders{--g1:#ff9ad0;--g2:#ffd166}
.sudoku-art{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:18px 26%;min-height:150px;background:radial-gradient(70% 90% at 50% 30%,#1e2b4a 0%,#0f1424 70%)}.sudoku-art span{display:flex;align-items:center;justify-content:center;border:1px solid #9ad0ff66;border-radius:6px;color:#dbe9ff;font:600 18px Georgia,serif;background:#ffffff08}
.shader-art{display:flex;align-items:center;justify-content:center;min-height:150px;background:radial-gradient(60% 80% at 50% 40%,#3a1f2a 0%,#15101a 70%)}.shader-art i{width:96px;height:96px;border-radius:50%;background:conic-gradient(from 20deg,#ff9ad0,#ffd166,#7ee787,#5ac8fa,#c7b7ff,#ff9ad0);filter:blur(1px) saturate(1.2);box-shadow:0 0 40px #ff9ad066,inset 0 0 30px #0008}
.door .pills{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.door .pills a{padding:8px 12px;min-height:40px;display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:999px;background:rgba(255,255,255,.05);color:inherit;text-decoration:none;font-size:14px}
.door .pills a:hover,.door .pills a:focus-visible{border-color:var(--g2);color:#fff;outline:none}
.door-links .go{text-decoration:none}

/* the builders' door: a castle on a green field */
.door-builders{--g1:#7ee787;--g2:#9ad0ff}
.builders-art{position:relative;min-height:150px;background:linear-gradient(#5f8fd6 0 52%,#7fa35a 52% 100%);overflow:hidden}
.builders-art i{position:absolute;display:block;background:#8a8a86;border-radius:2px}
.builders-art .w1{left:26%;bottom:34%;width:48%;height:14%}
.builders-art .w2{left:26%;bottom:48%;width:48%;height:4%;background:#a6a6a2}
.builders-art .t1{left:20%;bottom:34%;width:9%;height:34%}
.builders-art .t2{left:71%;bottom:34%;width:9%;height:34%}
.builders-art .k{left:42%;bottom:44%;width:16%;height:26%;background:#e8ecef}
.builders-art .s1,.builders-art .s2,.builders-art .s3{width:6px;height:6px;border-radius:50%;background:#ffc94d;box-shadow:0 0 10px #ffc94d}
.builders-art .s1{left:36%;top:18%}.builders-art .s2{left:58%;top:12%}.builders-art .s3{left:49%;top:26%;background:#ff7a59;box-shadow:0 0 10px #ff7a59}

/* the Wander showcase: a slideshow that plays by itself, chips for the galleries, a filmstrip and a lightbox */
@property --sc-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.door-showcase{grid-column:1/-1;overflow-anchor:none;--g1:#7ee787;--g2:#ffc94d;position:relative;cursor:default;isolation:isolate}
.door-showcase:hover{transform:none}
.door-showcase::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--sc-a),#ffc94d,#7ee787,#9ad0ff,#ff7a59,#c7b7ff,#ffc94d);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:sc-spin 9s linear infinite;pointer-events:none;z-index:1}
.door-showcase::after{content:"";position:absolute;inset:-40px;background:radial-gradient(60% 50% at 50% 0%,rgba(255,201,77,.18),transparent 70%);pointer-events:none;z-index:0}
@keyframes sc-spin{to{--sc-a:360deg}}
.door-showcase .sc-head{padding:26px 30px 8px;position:relative;z-index:2}
.door-showcase .sc-head h2{background:linear-gradient(90deg,#ffe9a8,#ffc94d 40%,#7ee787 75%,#9ad0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc{position:relative;z-index:2;padding:0 30px 26px;display:flex;flex-direction:column;gap:12px}
.sc-stage{position:relative;aspect-ratio:16/9;max-height:640px;border-radius:18px;overflow:hidden;background:#05070c;box-shadow:0 30px 70px rgba(0,0,0,.5);outline:none;cursor:zoom-in}
.sc-stage:focus-visible{box-shadow:0 0 0 3px var(--g2),0 30px 70px rgba(0,0,0,.5)}
.sc-bg{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(26px) saturate(1.4) brightness(.55);opacity:.9}
.sc-layer{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.sc-layer.is-on{opacity:1}
.sc-layer img{width:100%;height:100%;object-fit:contain;display:block}
.sc-layer.is-on img{animation:sc-burns 7s ease-out forwards}
@keyframes sc-burns{from{transform:scale(1)}to{transform:scale(1.06)}}
.sc-prog{position:absolute;left:0;top:0;right:0;height:3px;background:rgba(255,255,255,.12);z-index:3}
.sc-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffc94d,#7ee787)}
@keyframes sc-prog{from{width:0}to{width:100%}}
.sc-count{position:absolute;top:12px;right:14px;padding:4px 10px;border-radius:999px;background:rgba(5,7,12,.6);color:#f3ecdf;font:600 12px ui-monospace,Menlo,monospace;letter-spacing:.04em;z-index:3}
.sc-cap{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;background:linear-gradient(transparent,rgba(5,7,12,.85));color:#f3ecdf;font-size:15px;line-height:1.45;z-index:3;pointer-events:none}
.sc-cap b{display:block;color:#ffc94d;font:600 12px ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.sc-ctl{position:absolute;right:12px;bottom:14px;display:flex;gap:6px;z-index:4}
.sc-btn{min-width:44px;min-height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.35);background:rgba(5,7,12,.6);color:#fff;font-size:20px;cursor:pointer;backdrop-filter:blur(6px)}
.sc-btn:hover,.sc-btn:focus-visible{border-color:var(--g2);color:var(--g2);outline:none}
.sc-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.sc-chip{flex:0 0 auto;padding:8px 12px;min-height:40px;border-radius:999px;border:1px solid var(--rule);background:rgba(255,255,255,.05);color:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.sc-chip[aria-pressed=true]{border-color:var(--g2);color:var(--g2);background:rgba(255,201,77,.12)}
.sc-chip:hover,.sc-chip:focus-visible{border-color:var(--g2);outline:none}
.sc-shuffle{margin-left:auto;border-color:#9ad0ff66;color:#9ad0ff}
.sc-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}
.sc-thumb{flex:0 0 auto;width:132px;height:74px;padding:0;border-radius:10px;overflow:hidden;border:2px solid transparent;background:#05070c;cursor:pointer;scroll-snap-align:center;opacity:.75;transition:opacity .2s,transform .2s}
.sc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sc-thumb:hover,.sc-thumb:focus-visible{opacity:1;transform:translateY(-2px);outline:none;border-color:rgba(255,255,255,.4)}
.sc-thumb.is-cur{opacity:1;border-color:var(--g2);box-shadow:0 0 0 3px rgba(255,201,77,.3)}
dialog.sc-light{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0}
dialog.sc-light::backdrop{background:rgba(5,7,12,.94)}
dialog.sc-light img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.sc-lcap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:60px 90px 22px 22px;background:linear-gradient(transparent,rgba(5,7,12,.9));color:#f3ecdf;font-size:16px;line-height:1.45}
.sc-lctl{position:absolute;right:12px;bottom:14px;display:flex;gap:6px}
@media (max-width:720px){.door-showcase .sc-head{padding:22px 18px 6px}.sc{padding:0 12px 18px}.sc-stage{aspect-ratio:4/3;border-radius:14px}.sc-cap{font-size:13px;padding:36px 12px 12px}.sc-ctl{top:10px;left:8px;right:auto;bottom:auto}.sc-btn{min-width:40px;min-height:40px;font-size:18px}.sc-lcap{padding:50px 16px 64px}.sc-lctl{bottom:10px;right:8px}}
@media (prefers-reduced-motion:reduce){.door-showcase::before{animation:none}.sc-layer.is-on img{animation:none}.sc-layer{transition:none}.sc-prog i{animation:none!important}}

/* the start-here door: big and first */
.door-start{grid-column:1/-1;--g1:#ffd166;--g2:#7ee787}
.start-art{display:flex;align-items:center;justify-content:center;gap:18px;min-height:150px;background:radial-gradient(70% 90% at 50% 30%,#2a2f4a 0%,#0f1424 70%)}
.start-art span{font-size:56px;line-height:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.door-start .pills a:first-child{background:var(--g1);color:#1a1408;font-weight:700;border-color:transparent}
@media (max-width:640px){.start-art span{font-size:40px}.start-art{gap:10px}}

/* the first look: ten pictures right under the title, before any door */
.first-look{margin:-8px auto 10px}
.fl-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px}
.fl-head .eyebrow{margin:0}
.jump-links a.jump-all{background:#ffc94d;color:#1a1408;border-color:transparent;font-weight:600}
.fl-tip{color:#ffc94d;font-weight:600}
.fl-links{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.fl-links a{padding:7px 12px;min-height:36px;display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:999px;background:rgba(255,255,255,.05);color:inherit;text-decoration:none;font-size:13px}
.fl-links a:hover{border-color:#ffc94d}
.fl-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.fl-strip .fl-pic{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--rule);background:#05070c;box-shadow:0 12px 30px rgba(0,0,0,.35);text-decoration:none;color:#fff}
.fl-strip img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.fl-strip .fl-pic:hover img,.fl-strip .fl-pic:focus-visible img{transform:scale(1.05)}
.fl-strip .fl-pic:focus-visible{outline:2px solid #ffc94d;outline-offset:2px}
.fl-strip .fl-see{display:block;width:100%;height:100%;color:inherit;text-decoration:none}
.fl-strip .fl-see:focus-visible{outline:2px solid #ffc94d;outline-offset:-2px}
.fl-go,.sc-go{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:#ffc94d;color:#1a1408;font:600 12.5px/1 inherit;font-family:inherit;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.45);pointer-events:auto}
.fl-go:hover,.sc-go:hover,.fl-go:focus-visible,.sc-go:focus-visible{background:#ffe08a;outline:none}
.fl-go[hidden],.sc-go[hidden],.sc-lgo[hidden],.sc-qr[hidden],.sc-qr[hidden]+small{display:none}
.fl-strip .fl-go{position:absolute;top:8px;right:8px;z-index:2}
.sc-cap .sc-go{margin-top:10px;min-height:38px;font-size:14px;padding:0 16px}
.sc-lgo{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:2}
.sc-lgo .sc-go{min-height:44px;font-size:15px;padding:0 18px}
.sc-qr{width:132px;height:132px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.sc-lgo small{color:#d9d2c4;font-size:12px;text-shadow:0 1px 3px #000}
@media (max-width:900px),(pointer:coarse){.sc-qr,.sc-lgo small{display:none}}
.fl-strip span{position:absolute;left:0;right:0;bottom:0;padding:22px 9px 7px;font-size:11px;letter-spacing:.04em;text-shadow:0 1px 3px #000;background:linear-gradient(transparent,rgba(0,0,0,.72));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.fl-strip{grid-template-columns:repeat(3,1fr)}.fl-strip .fl-pic:nth-child(n+10){display:none}}
@media (max-width:640px){.fl-strip{display:flex;overflow-x:auto;gap:8px;padding:2px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:thin}.fl-strip .fl-pic{flex:0 0 74%;scroll-snap-align:center}.fl-strip .fl-pic:nth-child(n+10){display:block}}
@media (prefers-reduced-motion:reduce){.fl-strip img{transition:none}}

/* the song at the top of the page */
.jam{display:flex;gap:18px;align-items:center;margin:18px auto 0;padding:14px 16px;background:linear-gradient(120deg,rgba(255,178,107,.14),rgba(255,255,255,.04) 45%,rgba(120,200,255,.12));border:1px solid var(--rule);border-radius:20px;backdrop-filter:blur(8px);box-shadow:0 0 calc(10px + var(--beat,0)*50px) rgba(255,178,107,calc(.12 + var(--beat,0)*.5))}
.jam-play{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 22px;border:0;border-radius:999px;background:linear-gradient(100deg,var(--accent),var(--focus));color:#1a1206;font:inherit;font-weight:700;font-size:1.05rem;cursor:pointer;box-shadow:0 8px 26px rgba(255,178,107,.35);transition:transform .15s}
.jam-play:hover{transform:translateY(-1px)}.jam-play:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.jam-play .jam-icon{font-size:1.15rem;display:inline-block;transform:scale(calc(1 + var(--beat,0)*.35))}
.jam-body{flex:1 1 auto;min-width:0}
.jam-title{margin:0 0 6px;line-height:1.35;font-size:1.05rem}.jam-title b{font-weight:700}.jam-mix,.jam-by{color:var(--muted)}
.jam-eyebrow{display:block;font-size:11px;letter-spacing:.18em;color:var(--muted);margin-bottom:2px}
.jam-bar{position:relative;height:10px;border-radius:999px;background:rgba(255,255,255,.1);cursor:pointer;overflow:hidden}
.jam-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--accent),var(--focus));border-radius:999px}
.jam-bar:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.jam-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:8px 0 0;font-size:13px;color:var(--muted)}
.jam-meter{display:inline-flex;align-items:flex-end;gap:2px;height:18px}.jam-meter i{display:block;width:4px;height:3px;border-radius:2px;background:var(--accent);opacity:.8;transition:height .08s}
.jam-chip{padding:6px 12px;min-height:34px;display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:999px;background:rgba(255,255,255,.05);color:inherit;text-decoration:none;font:inherit;font-size:13px;cursor:pointer}
.jam-chip[aria-pressed="true"]{background:rgba(255,178,107,.18);border-color:var(--accent)}
.jam-vol{display:inline-flex;align-items:center;gap:6px}.jam-vol input{width:90px;accent-color:var(--accent)}
.jam-glow{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 50% 0%,rgba(255,178,107,.38),transparent 70%);opacity:var(--beat,0);transition:opacity .08s}
.jam+.hero{padding-top:30px}
@media (max-width:720px){.jam{flex-direction:column;align-items:stretch;padding:12px;gap:12px}.jam-play{justify-content:center;min-height:52px}.jam-vol input{width:70px}}
@media (prefers-reduced-motion:reduce){.jam-play .jam-icon{transform:none}.jam-glow{display:none}.jam{box-shadow:none}}
.jam.is-on .jam-play,.jam-float.is-on{background:linear-gradient(100deg,#2b3450,#3a4668);color:var(--ink);box-shadow:none;border:1px solid var(--rule)}
.jam-float{position:fixed;top:12px;right:12px;z-index:6;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:linear-gradient(100deg,var(--accent),var(--focus));color:#1a1206;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.jam-float[hidden]{display:none}.jam-float:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media (max-width:480px){.jam-float{top:auto;bottom:14px;right:12px}}

/* jump straight in: the driving games and roaming, near the top */
.jump{margin:6px auto 18px;padding:14px 16px;border:1px solid var(--rule);border-radius:18px;background:linear-gradient(120deg,rgba(255,178,107,.1),rgba(255,255,255,.03) 50%,rgba(120,200,255,.1))}
.jump .eyebrow{margin:0 0 10px}
.jump-new{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;overflow-x:auto;scroll-snap-type:x proximity;margin:0 0 10px;padding:6px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.jump-new-tag{flex:0 0 auto;scroll-snap-align:start;font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.08em;color:#1a1408;background:var(--gold,#ffc94d);border-radius:999px;padding:4px 9px}
.jump-new a{flex:0 0 auto;scroll-snap-align:start;padding:6px 11px;min-height:32px;display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:999px;background:rgba(255,201,77,.08);color:inherit;text-decoration:none;font-size:13px;white-space:nowrap}
.jump-new a:hover{border-color:var(--gold,#ffc94d)}
.jump-links{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.jump-links a{padding:8px 13px;min-height:38px;display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:999px;background:rgba(255,255,255,.06);color:inherit;text-decoration:none;font-size:14px}
.jump-links a:hover{border-color:var(--accent);background:rgba(255,178,107,.14)}
.jump-links a:nth-child(-n+3){background:linear-gradient(100deg,var(--accent),var(--focus));color:#1a1206;font-weight:700;border-color:transparent}
.jump-note{margin:10px 0 0;font-size:13px;color:var(--muted)}.jump-note code{font:12px ui-monospace,Menlo,monospace}
@media (max-width:640px){.jump-links{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}.jump-links a{flex:0 0 auto}}

/* the premiere: the newest update, bold yellow at the top of the front page */
.premiere{margin-top:18px;padding:22px 20px;border:3px solid #ffd21f;border-radius:18px;background:linear-gradient(135deg,rgba(255,210,31,.16),rgba(255,140,0,.08));box-shadow:0 0 28px rgba(255,210,31,.35);text-align:center}
.premiere-tag{margin:0;color:#ffd21f;font-weight:900;letter-spacing:.3em;font-size:.9rem}
.premiere-title{margin:.2em 0;color:#ffd21f;font-weight:900;font-size:clamp(2rem,6vw,3.4rem);text-shadow:0 0 18px rgba(255,210,31,.55)}
.premiere-lede{margin:0 auto 14px;max-width:46em;color:#fff3b0;font-weight:700}
.premiere-go{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.premiere-go a,.premiere-also a{color:#ffd21f;font-weight:800;text-decoration:none;border:2px solid #ffd21f;border-radius:999px;padding:8px 16px}
.premiere-go a.premiere-big{background:#ffd21f;color:#1a1300;font-size:1.15rem;padding:12px 22px}
.premiere-go a:hover,.premiere-also a:hover{filter:brightness(1.15);box-shadow:0 0 14px rgba(255,210,31,.6)}
.premiere-also{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:14px 0 0;color:#ffd21f;font-weight:800}
.premiere-also a{font-size:.9rem;padding:5px 12px}

/* the chillout mix, three across under the song. Never upscaled past the picture's own 1264px, so it is shown at
   true size when there is room for it and simply gets smaller when there is not -- it is never stretched. Three
   across needs 3792px to be literally actual size, which no screen has, so they share the width instead. */
.mixrow{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin:18px auto 0}
/* a business card is 3.5 by 2 inches, which is 336 by 192 at 96dpi; the picture is a touch taller than that
   ratio, so 336 wide gives a card about 206 tall. They sit at that size and centre rather than stretching. */
/* the three sit on a shared height rather than a shared width, so a near-square picture can stand between two
   banners without towering over them: each card takes the width its own picture asks for at that height. */
.mixshot{flex:0 0 auto;max-width:100%;min-width:0;line-height:0;border-radius:12px;overflow:hidden;
  border:1px solid var(--rule);background:#0b0e14;transition:transform .15s,border-color .15s}
.mixshot:hover{transform:translateY(-2px);border-color:var(--accent)}
.mixshot:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.mixshot img{display:block;height:206px;width:auto;max-width:100%}
@media (max-width:760px){.mixrow{gap:10px}.mixshot img{height:160px}}

/* the violet entry: What the law decides. Its own colour so it reads as a new room rather than another link. */
.premiere-also a.also-violet{border-color:#a98bff;color:#d8caff;
  background:linear-gradient(140deg,rgba(169,139,255,.20),rgba(169,139,255,.05))}
.premiere-also a.also-violet:hover{border-color:#d8caff;background:linear-gradient(140deg,rgba(169,139,255,.34),rgba(169,139,255,.10))}

/* the amber entry: Store the path, not the palace. */
.premiere-also a.also-amber{border-color:#ffb454;color:#ffd9a0;
  background:linear-gradient(140deg,rgba(255,180,84,.20),rgba(255,180,84,.05))}
.premiere-also a.also-amber:hover{border-color:#ffd9a0;background:linear-gradient(140deg,rgba(255,180,84,.34),rgba(255,180,84,.10))}

/* the stereogram hint under the row: cross your eyes, bring the circles together, and the sheet
   lifts off the page. Dark yellow so the one line that explains it carries its own light. */
.stereonote{max-width:68ch;margin:14px auto 0;text-align:center;color:var(--muted);
  font-size:.95rem;line-height:1.75}
.stereonote b{color:var(--ink);font-weight:700}
.stereonote mark.stereo-key{background:#8a6a00;color:#fff6d5;padding:.16em .44em;
  border-radius:7px;box-shadow:0 0 0 1px rgba(255,201,77,.5);font-weight:600;
  white-space:normal}
@media (max-width:760px){.stereonote{font-size:.9rem;margin-top:12px}}

/* the note under the three cards: quiet, centred, and the same width as the row above it */
.mixnote{max-width:68ch;margin:12px auto 0;text-align:center;color:var(--dim,#9fb0ca);
  font-size:.95rem;line-height:1.6}
.mixnote em{color:#ffd9a0;font-style:italic}

/* the two sheets of the mark sit as a pair: a wider gap between them, about one of their own circles across.
   The row drops to 184px so four cards still fit on one line inside the 1060px wrap. */
.mixshot img{height:184px}
.mixshot.logo + .mixshot.logo{margin-left:18px}
@media (max-width:760px){.mixshot img{height:150px}.mixshot.logo + .mixshot.logo{margin-left:10px}}

/* the teal entry: A field that lifts. */
.premiere-also a.also-teal{border-color:#3cdcd2;color:#a9f2ec;
  background:linear-gradient(140deg,rgba(60,220,210,.20),rgba(60,220,210,.05))}
.premiere-also a.also-teal:hover{border-color:#a9f2ec;background:linear-gradient(140deg,rgba(60,220,210,.34),rgba(60,220,210,.10))}

/* The four fill the row the player above them fills, and keep their own shapes doing it. Each card grows in
   proportion to its picture's aspect ratio, so sharing the free space leaves them all exactly the same height --
   whatever the window is. Nothing is stretched; the row simply gets as wide as the song does.
   banner 1264/776 = 1.629 · sheet 328/348 = 0.943 */
.mixrow{flex-wrap:nowrap;align-items:stretch}
.mixshot{flex:1 1 0;min-width:0}
.mixshot.banner{flex-grow:1.629}
.mixshot.logo{flex-grow:.943}
.mixshot img{display:block;width:100%;height:auto}
@media (max-width:760px){
  /* on a phone let them wrap to two lines at a readable size rather than squeezing four across */
  .mixrow{flex-wrap:wrap}
  .mixshot{flex:0 0 auto}
  .mixshot img{height:150px;width:auto}
}

/* the two mixes of the song, as one pair of chips rather than two loose buttons */
.jam-mixpick{display:inline-flex;gap:0}
.jam-mixpick .jam-chip{border-radius:0}
.jam-mixpick .jam-chip:first-child{border-radius:999px 0 0 999px}
.jam-mixpick .jam-chip:last-child{border-radius:0 999px 999px 0;margin-left:-1px}
.jam-mixpick .jam-chip[aria-pressed="true"]{position:relative;z-index:1}