:root{
  --bg:#e6ebf0; --fg:#102132; --muted:#5b6b7a;
  --card:#ffffff; --line:rgba(16,33,50,.10); --line-strong:rgba(16,33,50,.20);
  --chip:rgba(16,33,50,.06); --live:#1f9d57; --accent:#9a1d2e;
  --shadow:0 1px 2px rgba(16,33,50,.05),0 8px 24px rgba(16,33,50,.07);
  --shadow-hover:0 2px 6px rgba(16,33,50,.08),0 18px 48px rgba(16,33,50,.14);
  --radius:16px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0a0c10; --fg:rgba(255,255,255,.92); --muted:rgba(255,255,255,.46);
    --card:#13171d; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
    --chip:rgba(255,255,255,.07); --live:#3fd07f; --accent:#e2566b;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.5);
    --shadow-hover:0 2px 8px rgba(0,0,0,.5),0 22px 60px rgba(0,0,0,.65);
  }
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  background:var(--bg);color:var(--fg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  line-height:1.5;letter-spacing:-.011em;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1060px;margin:0 auto;padding:clamp(26px,6vw,68px) clamp(18px,4vw,34px) 40px}
.crumb{font-size:.82rem;color:var(--muted);margin-bottom:22px}
.crumb a{transition:color .15s ease}
.crumb a:hover{color:var(--fg)}
.crumb .sep{opacity:.45;margin:0 .5em}
h1.title{font-size:clamp(2rem,6.4vw,3.1rem);letter-spacing:-.035em;font-weight:700;line-height:1.02;text-wrap:balance}
.lede{color:var(--muted);font-size:clamp(.95rem,2.4vw,1.08rem);max-width:62ch;margin-top:16px;text-wrap:pretty}
.lede strong{color:var(--fg);font-weight:600}
.show{margin-top:clamp(38px,6.4vw,66px)}
.show-head{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:24px}
.show-emoji{font-size:1.4rem;line-height:1}
.show-name{font-size:clamp(1.2rem,3.4vw,1.55rem);font-weight:650;letter-spacing:-.022em;text-wrap:balance}
.show-meta{color:var(--muted);font-size:.8rem;margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}
.show-meta a{transition:color .15s ease}
.show-meta a:hover{color:var(--fg)}
.show-meta .dot{opacity:.5;margin:0 .5em}
.eyebrow{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-variant-numeric:tabular-nums}
.shownav{position:sticky;top:0;z-index:30;display:flex;gap:4px;align-items:center;overflow-x:auto;overflow-y:hidden;margin-top:clamp(22px,4vw,34px);padding:10px 0;background:color-mix(in srgb,var(--bg) 85%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shownav::-webkit-scrollbar{display:none}
.shownav a{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;font-size:.85rem;color:var(--muted);white-space:nowrap;transition:color .15s ease,background .15s ease}
.shownav a:hover,.shownav a[aria-current=true]{color:var(--fg);background:var(--chip)}
.shownav .nv-e{font-size:1rem;line-height:1}
/* archival shelf: a label gutter + a flowing row of previews per show */
.shelf{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(20px,3.5vw,44px);align-items:start;border-top:1px solid var(--line);margin-top:clamp(26px,4vw,46px);padding-top:clamp(26px,4vw,46px);scroll-margin-top:74px}
.shelf-aside{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}
.shelf-id{display:flex;align-items:center;gap:9px}
.shelf-emoji{font-size:1.25rem;line-height:1;flex:0 0 auto}
.shelf-name{font-size:clamp(1rem,2.2vw,1.18rem);font-weight:650;letter-spacing:-.02em;white-space:nowrap}
.shelf-years{margin-top:9px;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.shelf-domain{display:inline-block;margin-top:3px;font-size:.74rem;color:var(--muted);word-break:break-word;transition:color .15s ease}
a.shelf-domain:hover{color:var(--fg)}
.shelf .more{margin-top:18px}
.shelf .grid{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:clamp(16px,2.3vw,26px)}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--line-strong)}
.frame{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#05070a;border-bottom:1px solid var(--line)}
.frame iframe{position:absolute;top:0;left:0;width:400%;height:400%;border:0;transform:scale(.25);transform-origin:0 0;pointer-events:none;background:#05070a}
.frame .open{position:absolute;right:10px;bottom:10px;font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);padding:5px 10px;border-radius:999px;opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease}
.frame .tlbadge{position:absolute;left:10px;top:10px;font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--accent);padding:4px 9px;border-radius:999px;display:flex;align-items:center;gap:5px}
.frame .tlbadge::before{content:"";width:0;height:0;border-left:6px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent}
.card:hover .open{opacity:1;transform:translateY(0)}
.body{padding:14px 16px 17px}
.label{font-weight:600;font-size:1.01rem;letter-spacing:-.012em;text-wrap:balance}
.row{display:flex;align-items:center;gap:9px;margin-top:7px}
.year{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.chip{font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--chip);color:var(--live)}
.chip::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--live);margin-right:5px;vertical-align:middle;animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,208,127,.5)}70%{box-shadow:0 0 0 6px rgba(63,208,127,0)}100%{box-shadow:0 0 0 0 rgba(63,208,127,0)}}
.desc{color:var(--muted);font-size:.855rem;margin-top:10px;line-height:1.5;text-wrap:pretty}
.more,.deeplink{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted);background:none;border:0;padding:0;transition:color .15s ease}
.more{margin-top:20px}
.more:hover,.deeplink:hover{color:var(--fg)}
.more .arrow,.deeplink .arrow{transition:transform .18s ease}
.more:hover .arrow,.deeplink:hover .arrow{transform:translateX(3px)}
.deeplink{margin-top:30px;font-size:.92rem}
/* collapsible archived variants */
.archive{margin-top:30px;border-top:1px solid var(--line);padding-top:8px}
.archive>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:12px 2px;font-size:.9rem;color:var(--muted);font-weight:550;transition:color .15s ease}
.archive>summary::-webkit-details-marker{display:none}
.archive>summary:hover{color:var(--fg)}
.archive>summary .tw{display:inline-block;transition:transform .2s ease;font-size:.8em;opacity:.7}
.archive[open]>summary .tw{transform:rotate(90deg)}
.archive>summary .ct{font-size:.78rem;color:var(--muted);background:var(--chip);border-radius:999px;padding:2px 8px;margin-left:2px}
.archive .grid{margin-top:18px}
/* timeline scrubber */
.tl{margin-top:34px}
.tl-stage{position:relative;width:100%;max-width:920px;margin:0 auto;aspect-ratio:16/10;overflow:hidden;border-radius:16px;border:1px solid var(--line-strong);background:#000;box-shadow:var(--shadow)}
.tl-stage iframe{position:absolute;top:0;left:0;width:160%;height:160%;border:0;transform:scale(.625);transform-origin:0 0;pointer-events:none;opacity:0;transition:opacity .28s ease;background:#000}
.tl-cap{max-width:920px;margin:18px auto 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tl-cap .n{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--accent);padding:4px 10px;border-radius:999px}
.tl-cap .t{font-size:1.15rem;font-weight:650;letter-spacing:-.02em}
.tl-cap .d{color:var(--muted);font-size:.85rem;margin-left:auto;font-variant-numeric:tabular-nums}
.tl-bar{max-width:920px;margin:22px auto 0;display:flex;align-items:center;gap:16px}
.tl-play{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:var(--card);color:var(--fg);cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:transform .12s ease,border-color .15s ease}
.tl-play:hover{border-color:var(--accent)}
.tl-play:active{transform:scale(.96)}
.tl-play[data-state=paused]{padding-left:4px}
.tl-track{flex:1 1 auto;position:relative}
.tl-track::before{content:"";position:absolute;left:7px;right:7px;top:50%;height:2px;background:var(--line);transform:translateY(-50%)}
.tl-ticks{list-style:none;display:flex;justify-content:space-between;position:relative}
.tl-tick{appearance:none;border:0;background:transparent;cursor:pointer;padding:8px 2px;min-width:40px;min-height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--muted);transition:color .15s ease,transform .12s ease}
.tl-tick:active{transform:scale(.96)}
.tl-tick .dot{width:14px;height:14px;border-radius:50%;background:var(--card);border:2px solid var(--line-strong);transition:background-color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.tl-tick .en{font-size:.7rem;font-weight:600;font-variant-numeric:tabular-nums}
.tl-tick:hover{color:var(--fg)}
.tl-tick:hover .dot{border-color:var(--accent)}
.tl-tick[aria-current=true]{color:var(--fg)}
.tl-tick[aria-current=true] .dot{background:var(--accent);border-color:var(--accent);transform:scale(1.2);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.foot{margin-top:74px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.foot a{transition:color .15s ease}
.foot a:hover{color:var(--fg)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .eyebrow,.title,.lede,.shelf{animation:rise .55s cubic-bezier(.2,.7,.3,1) both}
  .title{animation-delay:.04s}.lede{animation-delay:.09s}
  .shelf:nth-of-type(1){animation-delay:.15s}
  .shelf:nth-of-type(2){animation-delay:.21s}
  .shelf:nth-of-type(3){animation-delay:.27s}
  .shelf:nth-of-type(4){animation-delay:.33s}
  .shelf:nth-of-type(5){animation-delay:.39s}
  .shelf:nth-of-type(6){animation-delay:.45s}
  .shelf:nth-of-type(7){animation-delay:.51s}
}
@media (max-width:760px){
  .shelf{grid-template-columns:1fr;gap:16px}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .show-meta{margin-left:0;text-align:left;width:100%}
  .tl-cap .d{margin-left:0;width:100%}
  .tl-tick .en{font-size:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .card,.more,.more .arrow,.frame .open,.tl-stage iframe,.tl-tick .dot{transition:none}
  .chip::before{animation:none}
}
/* ---- card preview overlay (FLIP expand) ---- */
html.ov-lock{overflow:hidden}
.ov[hidden]{display:none}
.ov{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,52px)}
.ov-backdrop{position:fixed;inset:0;background:rgba(6,8,12,.5);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);opacity:0;transition:opacity .42s ease}
.ov.open .ov-backdrop{opacity:1}
.ov-dialog{position:relative;width:min(1100px,92vw);height:min(720px,86vh);background:#05070a;border-radius:18px;overflow:hidden;opacity:0;box-shadow:0 1px 2px rgba(0,0,0,.4),0 30px 90px rgba(0,0,0,.55)}
.ov-stage{position:absolute;inset:0}
#ov-frame{width:100%;height:100%;border:0;background:#05070a;opacity:0;transition:opacity .3s ease}
#ov-frame.loaded{opacity:1}
.ov-ctrls{position:fixed;top:clamp(16px,4vw,52px);right:clamp(16px,4vw,52px);display:flex;gap:9px;opacity:0;transform:translateY(-6px);transition:opacity .3s ease .1s,transform .3s ease .1s;z-index:2}
.ov.open .ov-ctrls{opacity:1;transform:none}
.ov-open,.ov-close{display:inline-flex;align-items:center;justify-content:center;height:42px;border-radius:999px;background:rgba(18,22,28,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.16);cursor:pointer;font:inherit;transition:background .15s ease,transform .12s ease,border-color .15s ease}
.ov-open{padding:0 16px;gap:8px;font-size:.85rem;font-weight:550;text-decoration:none}
.ov-close{width:42px;padding:0}
.ov-open:hover,.ov-close:hover{background:rgba(40,46,54,.82);border-color:rgba(255,255,255,.28)}
.ov-open:active,.ov-close:active{transform:scale(.96)}
.ov-open svg,.ov-close svg{width:16px;height:16px;display:block;flex:0 0 auto}
.ov-cap{position:fixed;top:clamp(16px,4vw,52px);left:clamp(16px,4vw,52px);max-width:55vw;color:rgba(255,255,255,.92);font-size:.9rem;font-weight:550;letter-spacing:-.01em;text-shadow:0 1px 4px rgba(0,0,0,.55);opacity:0;transform:translateY(-6px);transition:opacity .3s ease .1s,transform .3s ease .1s;z-index:2;pointer-events:none}
.ov.open .ov-cap{opacity:1;transform:none}
@media (max-width:640px){
  .ov{padding:0}
  .ov-dialog{width:100%;height:100%;border-radius:0}
  .ov-cap{display:none}
  .ov-ctrls{top:auto;right:auto;bottom:calc(18px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(8px)}
  .ov.open .ov-ctrls{transform:translateX(-50%)}
  .ov-open .lbl{display:none}
  .ov-open{padding:0;width:42px;gap:0}
}
@media (prefers-reduced-motion:reduce){
  .ov-dialog{transition:none!important}
}