html{-webkit-text-size-adjust:100%}body{margin:0}[hidden]{display:none!important}img{max-width:100%}

/* Layout: one venue. Arena hero (idol POV), then the nightly ritual (ticket quiz), the binder showroom, editorial stories, lab, mascot, your seat, venue map. Quiet grid, one loud layer: light + foil. */
:root{
  /* Soundcheck (light) */
  --light-d:#A792FF; --light-lf:#8F74F5; --light-ink-l:#5A3ED0; --light-ink-d:#BCAEFF; --on-light-d:#14121B; --on-light-lf:#FFFFFF;
  --light:var(--light-lf); --on-light:var(--on-light-lf); --accent:var(--light-ink-l);
  --bg:#F5F5F2; --bg-2:color-mix(in oklab, var(--light) 10%, #E8E9EE); --surface:#FFFFFF; --ink:#0B0A10; --ink-2:#2F2D3A; --muted:#5A5768;
  --line:rgba(11,10,16,.14); --line-2:rgba(11,10,16,.28);
  --good:#0E7C55; --bad:#C2324A; --gold:#B5862B;
  --glass:rgba(255,255,255,.76);
  --shade-1:color-mix(in srgb,var(--bg) 72%,transparent); --shade-2:color-mix(in srgb,var(--bg) 22%,transparent);
  --shadow:0 1px 2px rgba(11,10,16,.06), 0 20px 40px -22px rgba(11,10,16,.32);
  --foil:linear-gradient(115deg,#ff8fcf 0%,#ffd77a 17%,#8bffc0 34%,#73dcff 51%,#a796ff 68%,#ff8fcf 85%,#ffd77a 100%);
  --foil-text:linear-gradient(100deg,var(--accent) 0%,color-mix(in oklab,var(--accent) 50%,#D6336C) 50%,var(--accent) 100%);
  --note-bg:#FFF6CC; --note-ink:#3B3418; --note-line:#D9C66E;
  --shades:1;
  --font-display:"Anybody","Arial Narrow",system-ui,sans-serif;
  --font-body:"IBM Plex Sans KR",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-hangul:"Black Han Sans","IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --gutter:clamp(16px,4vw,48px); --maxw:1320px; --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --light:var(--light-d); --on-light:var(--on-light-d); --accent:var(--light-ink-d);
    --bg:#0A0910; --bg-2:color-mix(in oklab, var(--light) 5%, #100E18); --surface:#16141F; --ink:#F1EEF8; --ink-2:#C6C1D4; --muted:#8E889F;
    --line:rgba(241,238,248,.09); --line-2:rgba(241,238,248,.18);
    --good:#3DDC97; --bad:#FF6B81; --gold:#F2CF73;
    --glass:rgba(16,14,24,.6);
    --shade-1:color-mix(in srgb,var(--bg) 78%,transparent); --shade-2:color-mix(in srgb,var(--bg) 30%,transparent);
    --shadow:0 1px 0 rgba(255,255,255,.03), 0 26px 60px -30px rgba(0,0,0,.85);
    --foil-text:linear-gradient(100deg,#ff8fcf 0%,#ffd77a 20%,#8bffc0 40%,#73dcff 60%,#a796ff 80%,#ff8fcf 100%);
    --note-bg:#2A2614; --note-ink:#F2E6B0; --note-line:#625829;
    --shades:0; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --light:var(--light-d); --on-light:var(--on-light-d); --accent:var(--light-ink-d);
  --bg:#0A0910; --bg-2:color-mix(in oklab, var(--light) 5%, #100E18); --surface:#16141F; --ink:#F1EEF8; --ink-2:#C6C1D4; --muted:#8E889F;
  --line:rgba(241,238,248,.09); --line-2:rgba(241,238,248,.18);
  --good:#3DDC97; --bad:#FF6B81; --gold:#F2CF73;
  --glass:rgba(16,14,24,.6);
  --shade-1:color-mix(in srgb,var(--bg) 78%,transparent); --shade-2:color-mix(in srgb,var(--bg) 30%,transparent);
  --shadow:0 1px 0 rgba(255,255,255,.03), 0 26px 60px -30px rgba(0,0,0,.85);
  --foil-text:linear-gradient(100deg,#ff8fcf 0%,#ffd77a 20%,#8bffc0 40%,#73dcff 60%,#a796ff 80%,#ff8fcf 100%);
  --note-bg:#2A2614; --note-ink:#F2E6B0; --note-line:#625829;
  --shades:0; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background-color .5s var(--ease),color .5s var(--ease)}
a{color:inherit} button{font:inherit;color:inherit} p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grain{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin:0 0 14px}
.kicker .ko{font-family:var(--font-body);letter-spacing:.04em;color:var(--accent);text-transform:none}
.sec-title{font-family:var(--font-display);font-stretch:118%;font-weight:780;font-size:clamp(38px,5.6vw,82px);line-height:.92;letter-spacing:-.025em;margin:0;text-wrap:balance}
.sec-lede{max-width:52ch;color:var(--ink-2);font-size:17px;margin-top:18px}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.sec-head__aside{font-family:var(--font-mono);font-size:12px;color:var(--muted);text-align:right;letter-spacing:.06em}
.foil-text{background:var(--foil-text);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foilshift 9s linear infinite}
@keyframes foilshift{to{background-position:-220% 0}}
.section{padding-block:clamp(72px,10vw,136px);position:relative}
.section--alt{background:var(--bg-2)}
.btn{--h:50px;display:inline-flex;align-items:center;gap:10px;height:var(--h);padding:0 24px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .25s var(--ease),background-color .25s,border-color .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn--light{background:var(--light);color:var(--on-light);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 30px -12px color-mix(in srgb,var(--light) 70%,transparent)}
.btn--ghost{border-color:var(--line-2);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--ink{background:var(--ink);color:var(--bg)}
.btn--sm{--h:40px;padding:0 18px;font-size:14px}
.btn svg{width:16px;height:16px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:26px;height:26px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--c);position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),inset 0 2px 3px rgba(255,255,255,.5);transition:transform .2s var(--ease)}
.sw:hover{transform:scale(1.12)}
.sw--special::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.9) 0 2px,transparent 3px),radial-gradient(circle at 68% 64%,rgba(255,255,255,.7) 0 1.4px,transparent 2.4px)}
.sw[aria-pressed="true"]::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--ink)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:12px;background:color-mix(in oklab,var(--ink) 7%,transparent);gap:4px}
.seg button{border:0;background:transparent;border-radius:9px;height:34px;padding:0 10px;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink-2);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.14)}
.tabs{display:inline-flex;flex-wrap:wrap;padding:4px;border-radius:12px;background:color-mix(in oklab,var(--ink) 7%,transparent);gap:4px}
.tabs button{border:0;background:transparent;border-radius:9px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink-2)}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.14)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow);min-width:0}
.panel__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;display:flex;justify-content:space-between;gap:8px}
.chip{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}

/* notes */
.note{margin-top:clamp(28px,4vw,48px);background:var(--note-bg);color:var(--note-ink);border:1px dashed var(--note-line);border-radius:14px;padding:18px 20px;font-size:14.5px;line-height:1.6;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;max-width:900px}
.note__tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;white-space:nowrap;padding-top:2px}
.note p + p{margin-top:8px}
body.notes-off .note{display:none}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
.nav.is-scrolled{background:color-mix(in srgb,var(--bg) 76%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:24px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.logo span{font-weight:340;font-stretch:110%}
.logo svg{width:30px;height:30px;flex:none}
/* kpop-fandom, written like the address: one word with a short lilac dash (narrow, so it reads as a dash and not a dot) */
.logo{gap:0}.logo svg{margin-right:10px}
.logo .dash,.foot__big .dash{font-weight:800;font-stretch:58%;color:var(--light);-webkit-text-fill-color:var(--light);margin:0 .03em}
.nav__links{display:flex;gap:20px;list-style:none;margin:0;padding:0;font-size:14px;font-weight:500}
.nav__links a{text-decoration:none;color:var(--ink-2)} .nav__links a:hover{color:var(--ink)}
/* tooltips in the menu (The Crowd, your seat chip) follow the theme: a dark panel with a soft glow in dark,
   white paper with an ink border in light (the screentone look) */
.me-chip__tip{background:#1E1B2A!important;color:#F1EEF8!important;border:1px solid #3d3852;box-shadow:0 10px 24px -12px rgba(0,0,0,.8),0 0 22px -10px var(--light)}
html:root:not(.is-dark) .me-chip__tip{background:#fff!important;color:var(--ink)!important;border:2px solid var(--ink);box-shadow:none}
@media (min-width:821px){
  .nav__links a[data-hint]::after{background:#1E1B2A;color:#F1EEF8;border:1px solid #3d3852;box-shadow:0 10px 24px -12px rgba(0,0,0,.8),0 0 22px -10px var(--light)}
  html:root:not(.is-dark) .nav__links a[data-hint]::after{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:none}
}
/* menu explanation (The Crowd): a tooltip on hover or keyboard focus on a computer, a small line under the word on a phone */
.nav__links a[data-hint]{position:relative}
@media (min-width:821px){
  .nav__links a[data-hint]::after{content:attr(data-hint);position:absolute;left:50%;top:calc(100% + 12px);transform:translate(-50%,-4px);white-space:nowrap;font:500 12px/1 var(--font-body);padding:8px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:5}
  .nav__links a[data-hint]:hover::after,.nav__links a[data-hint]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
}
@media (max-width:820px){
  .nav__links a[data-hint]:not([data-short])::after{display:none}
  .nav__links a[data-hint]::after{content:attr(data-short);position:absolute;left:50%;top:calc(100% + 1px);transform:translateX(-50%);white-space:nowrap;font:600 8.5px/1 var(--font-mono);letter-spacing:.06em;color:var(--muted)}
  .nav__links a[data-hint][aria-current]::after{display:none}
}
.nav__actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.seat-chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);text-decoration:none;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;white-space:nowrap}
.seat-chip i{width:28px;height:28px;border-radius:50%;background:var(--light);display:grid;place-items:center;box-shadow:0 0 14px -2px var(--light)}
.seat-chip i svg{width:22px;height:22px}
.toggle{position:relative;width:64px;height:34px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);cursor:pointer;padding:0;flex:none}
.toggle__ico{position:absolute;top:50%;width:14px;height:14px;transform:translateY(-50%);color:var(--muted)}
.toggle__ico--sun{left:9px}.toggle__ico--moon{right:9px}
.toggle__knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;transition:transform .45s cubic-bezier(.7,-0.3,.25,1.4),background-color .3s}
.toggle__knob svg{width:14px;height:14px}
.toggle__knob .i-moon{display:none}
.is-dark .toggle__knob{transform:translateX(30px);background:var(--light);color:var(--on-light)}
.is-dark .toggle__knob .i-sun{display:none}.is-dark .toggle__knob .i-moon{display:block}
.theme-name{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);min-width:84px}

/* hero / arena */
.hero{-webkit-user-select:none;user-select:none;position:relative;min-height:clamp(640px,90vh,960px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;margin-top:-68px;touch-action:pan-y}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-2;cursor:crosshair}
.hero.is-dragging .hero__canvas{cursor:grabbing}
/* Haepi can be picked up and moved over the arena */
.hero.is-over-haepi .hero__canvas{cursor:grab}
.hero.is-moving-haepi,.hero.is-moving-haepi .hero__canvas{cursor:grabbing;user-select:none}
.hero__fallback{position:absolute;inset:0;z-index:-3;background:radial-gradient(ellipse 80% 50% at 50% 100%,color-mix(in srgb,var(--light) 35%,transparent),transparent 70%),radial-gradient(circle,var(--light) 1.2px,transparent 1.6px) 0 0/14px 12px,var(--bg);-webkit-mask-image:linear-gradient(to top,#000 20%,transparent 85%);mask-image:linear-gradient(to top,#000 20%,transparent 85%)}
.hero__shade{position:absolute;inset:0;z-index:-1;pointer-events:none;transition:opacity .6s;background:linear-gradient(90deg,var(--shade-1) 0%,var(--shade-2) 42%,transparent 62%),linear-gradient(0deg,var(--bg) 0%,transparent 22%)}
.hero.is-seatview .hero__shade{opacity:.35}
.hero__rail{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;pointer-events:none}
.hero__in{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:end;padding-block:150px 60px;pointer-events:none}
.hero__in > *{pointer-events:auto}
.hero__copy{min-width:0;transition:opacity .5s,transform .5s var(--ease)}
.hero.is-seatview .hero__copy{opacity:0;transform:translateY(12px);pointer-events:none}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding:7px 14px 7px 10px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin:0 0 24px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--light);animation:live 2s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--light) 70%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.hero__title{font-family:var(--font-display);font-weight:820;font-stretch:116%;font-size:clamp(44px,6.4vw,108px);line-height:.88;letter-spacing:-.03em;margin:0}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero__title .line > span{display:inline-block;white-space:nowrap;animation:rise 1.1s var(--ease) both}
.hero__title .line:nth-child(2) > span{animation-delay:.12s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero__lede{max-width:46ch;font-size:clamp(16px,1.35vw,19px);color:var(--ink-2);margin:24px 0 28px}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap}
.dock{justify-self:end;width:min(100%,400px);padding:16px 18px;border-radius:22px;background:var(--glass);border:1px solid var(--line-2);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);display:grid;gap:12px}
.dock__row{display:grid;gap:8px}
.dock__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.dock__label b{color:var(--accent);font-weight:600}
.dock__acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dock__acts .btn{justify-content:center;padding:0 12px}
.dock__meta{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;line-height:1.5}
.dock__meta .mono{color:var(--ink);font-weight:600}
/* during an event the site wears the event colors; picking a color switches the event off */
.dock__evnote{margin:-4px 0 0;font-size:11.5px;line-height:1.4;color:var(--muted)}
.dock__evnote b{color:var(--accent);font-weight:600}
.you-tag{position:absolute;z-index:4;left:0;top:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transition:opacity .4s;will-change:transform}
.you-tag.is-on{opacity:1}
.you-tag__label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;padding:5px 10px;border-radius:999px;background:var(--ink);color:var(--bg);white-space:nowrap}
.you-tag__line{width:1px;height:28px;background:var(--ink);opacity:.55}
.you-tag.is-short .you-tag__code{display:none}
.bubble{position:absolute;z-index:5;left:0;top:0;transform:translate(10px,-50%) scale(.92);transform-origin:0 50%;opacity:0;pointer-events:none;max-width:190px;padding:6px 11px;border-radius:12px 12px 12px 3px;font-size:12.5px;font-weight:600;line-height:1.35;color:var(--ink);background:color-mix(in srgb,var(--light) 16%,var(--glass));border:1px solid color-mix(in srgb,var(--light) 55%,transparent);box-shadow:0 0 16px color-mix(in srgb,var(--light) 30%,transparent);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);transition:opacity .25s,transform .35s var(--ease)}
.bubble.is-on{opacity:1;transform:translate(10px,-50%) scale(1)}
/* when Haepi is on the right half of the screen, the bubble sits on his left */
.bubble.is-left{transform:translate(calc(-100% - 10px),-50%) scale(.92);transform-origin:100% 50%;border-radius:12px 12px 3px 12px}
.bubble.is-left.is-on{transform:translate(calc(-100% - 10px),-50%) scale(1)}
.seatview-bar{position:absolute;z-index:6;left:50%;top:96px;transform:translate(-50%,-10px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--line-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;transition:opacity .4s,transform .4s var(--ease);white-space:nowrap}
.hero.is-seatview .seatview-bar{opacity:1;transform:translate(-50%,0);pointer-events:auto}

.ticker{border-block:1px solid var(--line);overflow:hidden;background:var(--bg);position:relative;z-index:2}
.ticker__track{display:flex;width:max-content;animation:tick 52s linear infinite}
.ticker__item{display:flex;align-items:center;gap:14px;padding:14px 22px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--ink-2)}
.ticker__item b{color:var(--ink);font-weight:600}
.ticker__item svg{width:14px;height:14px;color:var(--light)}
@keyframes tick{to{transform:translateX(-50%)}}

/* daily: ticket quiz */
.daily{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px;align-items:start}
.ticket-q{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,1fr) 112px;min-height:560px}
.ticket-q::before,.ticket-q::after{content:"";position:absolute;right:104px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
.ticket-q::before{top:-10px}.ticket-q::after{bottom:-10px}
.ticket-q__main{padding:clamp(22px,3.2vw,38px);display:flex;flex-direction:column;min-width:0;position:relative;overflow:hidden;border-radius:24px 0 0 24px}
.ticket-q__timer{position:absolute;left:0;top:0;height:6px;width:100%;background:var(--light);transform-origin:left}
.ticket-q__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding-bottom:18px;margin-bottom:22px;border-bottom:1px dashed var(--line-2)}
.ticket-q__admit{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ticket-q__set{font-family:var(--font-display);font-stretch:105%;font-weight:700;font-size:19px;letter-spacing:-.01em;margin-top:4px}
.ticket-q__no{font-family:var(--font-display);font-stretch:62%;font-weight:750;font-size:34px;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
/* during a question the ticket head shrinks to one row, so time bar, question and answers fit on one screen */
.ticket-q__head--slim{align-items:center;flex-wrap:nowrap;padding-bottom:12px;margin-bottom:16px}
.ticket-q__head--slim>div:first-child{flex:1;min-width:0}
.ticket-q__head--slim>div:first-child{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.ticket-q__head--slim .ticket-q__set{font-size:15px;margin:0}
.ticket-q__head--slim .ticket-q__admit{display:none}
.ticket-q__head--slim~.quiz__q{font-size:clamp(22px,2.2vw,30px);max-width:32ch;margin-bottom:20px}
.ticket-q__head--slim .ticket-q__no{font-size:22px}
.quiz__secs.is-low{color:var(--bad)}
.ticket-q__stub{border-left:2px dashed var(--line-2);display:grid;align-content:space-between;justify-items:center;padding:24px 8px;background:color-mix(in oklab,var(--light) 9%,transparent);border-radius:0 24px 24px 0;text-align:center}
.ticket-q__stub span{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg)}
.ticket-q__stub b{font-family:var(--font-display);font-stretch:62%;font-size:40px;line-height:1;color:var(--accent)}
.stamp{position:absolute;z-index:3;right:150px;top:30px;padding:8px 14px;border:3px solid var(--good);color:var(--good);border-radius:10px;font-family:var(--font-mono);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-12deg) scale(2.2);opacity:0;pointer-events:none;mix-blend-mode:multiply}
:root[data-theme="dark"] .stamp{mix-blend-mode:normal}
.stamp{display:none}
.stamp.is-on{display:block;animation:stampIn .55s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes stampIn{to{transform:rotate(-12deg) scale(1);opacity:.9}}
.quiz__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.quiz__step{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--muted)}
.quiz__prog{display:flex;gap:6px}
.quiz__prog i{width:28px;height:6px;border-radius:3px;background:color-mix(in oklab,var(--ink) 10%,transparent)}
.quiz__prog i.on{background:var(--light)}.quiz__prog i.ok{background:var(--good)}.quiz__prog i.no{background:var(--bad)}
.quiz__secs{margin-left:auto;font-family:var(--font-display);font-stretch:60%;font-weight:700;font-size:26px;font-variant-numeric:tabular-nums;line-height:1}
.quiz__q{font-family:var(--font-display);font-stretch:96%;font-weight:680;font-size:clamp(24px,2.8vw,36px);line-height:1.12;letter-spacing:-.018em;margin:0 0 24px;text-wrap:balance;max-width:26ch}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{display:flex;align-items:flex-start;gap:14px;text-align:left;padding:15px 17px;border-radius:16px;border:1px solid var(--line-2);background:transparent;cursor:pointer;font-size:15.5px;line-height:1.4;transition:border-color .2s,background-color .2s,transform .2s var(--ease),opacity .3s}
.opt:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px)}
.opt__k{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;font-weight:600;background:color-mix(in oklab,var(--ink) 8%,transparent)}
.opt:disabled{cursor:default}
.opt.is-correct{border-color:var(--good);background:color-mix(in srgb,var(--good) 13%,transparent)}
.opt.is-correct .opt__k{background:var(--good);color:#fff}
.opt.is-wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)}
.opt.is-wrong .opt__k{background:var(--bad);color:#fff}
.opt.is-dim{opacity:.45}
.quiz__fb{margin-top:auto;padding-top:22px;display:flex;gap:14px;align-items:center;min-height:96px;flex-wrap:wrap}
.quiz__fb .haepi{width:60px;height:72px;flex:none}
.quiz__fb p{font-size:15px;color:var(--ink-2);flex:1;min-width:200px}
.quiz__fb p b{color:var(--ink)}
.linkbtn{border:0;background:none;padding:0;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:inherit}
.quiz__end{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;flex:1}
.quiz__score{font-family:var(--font-display);font-stretch:62%;font-weight:800;font-size:clamp(78px,9vw,124px);line-height:.85;font-variant-numeric:tabular-nums}
.quiz__score small{font-size:.32em;font-stretch:100%;font-weight:500;color:var(--muted)}
.quiz__end h3{font-family:var(--font-display);font-stretch:110%;font-weight:720;font-size:26px;margin:14px 0 8px}
.quiz__end p{margin:0 0 20px;color:var(--ink-2);max-width:40ch}
.quiz__acts{display:flex;gap:10px;flex-wrap:wrap}
.reward{width:clamp(160px,17vw,200px);display:grid;justify-items:center;gap:10px}
.reward .holo-stage{animation:dealIn 1.1s var(--ease) both}
@keyframes dealIn{0%{transform:translate(120px,-80px) rotate(180deg) scale(.4);opacity:0}60%{opacity:1}100%{transform:none}}
.reward__cap{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center}
.side{display:grid;gap:20px}
.lamps{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:8px 0 14px}
.lamp{aspect-ratio:1/2.3;border-radius:99px 99px 6px 6px;background:color-mix(in oklab,var(--ink) 8%,transparent);position:relative}
.lamp::after{content:"";position:absolute;left:50%;top:12%;width:64%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:var(--line-2)}
.lamp.is-lit::after{background:var(--light);box-shadow:0 0 14px 3px color-mix(in srgb,var(--light) 55%,transparent)}
.lamp.is-today::after{animation:live 2s infinite}
.lamp.is-gold::after{background:var(--gold);box-shadow:0 0 14px 3px color-mix(in srgb,var(--gold) 50%,transparent)}
.side__line{font-size:14px;color:var(--ink-2)}
.side__line b{font-family:var(--font-display);font-stretch:70%;font-size:22px;color:var(--ink)}
.count{font-family:var(--font-display);font-stretch:58%;font-weight:700;font-size:54px;line-height:1;font-variant-numeric:tabular-nums}
.count-sub{font-size:13px;color:var(--muted);margin-top:8px}
.lb{list-style:none;margin:14px 0 0;padding:0;display:grid}
.lb li{display:grid;grid-template-columns:26px 14px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.lb li:first-child{border-top:0}
.lb .r{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.lb .d{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.lb .h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.lb .s{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:13px;text-align:right}
.lb .s small{color:var(--muted);margin-left:6px}
.lb .me{background:color-mix(in srgb,var(--light) 13%,transparent);border-radius:10px;padding-inline:8px;margin-inline:-8px;border-top-color:transparent}

/* binder: high gloss holo */
.binder{background:radial-gradient(120% 70% at 70% 0%,color-mix(in oklab,var(--light) 16%,transparent),transparent 60%),var(--bg-2)}
.binder__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center}
.binder__feature{display:grid;justify-items:center;gap:14px}
.binder__feature .holo-stage{width:min(340px,78vw)}
.binder__hint{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.binder__fan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);align-items:end}
/* a binder page: six pockets, every card tucked in a little crooked, as if slid in by hand. Hover and it straightens and
   lifts out of its sleeve. Empty sleeves show only the number and the rarity still to find. */
.binder__pocket{display:grid;gap:14px;justify-items:center;min-width:0}
.binder__fan{align-items:start;width:100%}
.binder__fan > *{--tilt:0deg;transform:rotate(var(--tilt));transition:transform .45s var(--ease)}
.binder__fan > :nth-child(6n+1){--tilt:-2.4deg}.binder__fan > :nth-child(6n+2){--tilt:1.6deg}.binder__fan > :nth-child(6n+3){--tilt:-1deg}
.binder__fan > :nth-child(6n+4){--tilt:2deg}.binder__fan > :nth-child(6n+5){--tilt:-1.6deg}.binder__fan > :nth-child(6n+6){--tilt:1.1deg}
.binder__fan > .holo-stage:hover,.binder__fan > .holo-stage:focus-within{transform:rotate(0) translateY(-8px);z-index:2}
.binder__fan:not(.is-all) > :nth-child(n+7){display:none}
.binder__fan.is-all > :nth-child(n+7){animation:dealIn .7s var(--ease) both}
@media (prefers-reduced-motion:reduce){.binder__fan > *{transition:none}.binder__fan > .holo-stage:hover{transform:rotate(var(--tilt))}}
.binder__fan .slot{border-radius:clamp(10px,1.3vw,18px)}
.slot--lock{position:relative;align-content:center;background:repeating-linear-gradient(135deg,transparent 0 9px,color-mix(in srgb,var(--line) 55%,transparent) 9px 10px)}
.slot__no{position:absolute;top:9%;left:0;right:0;font-size:9px;opacity:.8}
.slot__rar{font-size:9.5px;letter-spacing:.14em}
.slot--lock[data-rarity="rare"] .slot__rar{color:#7fb3ff}.slot--lock[data-rarity="holo"] .slot__rar{color:var(--light)}.slot--lock[data-rarity="daesang"] .slot__rar{color:#d9b25a}
.slot__hint{position:absolute;bottom:8%;left:8%;right:8%;font-size:8.5px;line-height:1.4;letter-spacing:.08em}
.binder__more{font-size:14px}
/* own pages: the binder and the settings let the dotted page background run through */
.page-main .binder{background:radial-gradient(120% 70% at 70% 0%,color-mix(in oklab,var(--light) 12%,transparent),transparent 60%)}
.page-main .settings.section--alt{background:transparent}
.slot{aspect-ratio:55/85;border-radius:5.2cqw;border:2px dashed var(--line-2);display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);container-type:inline-size;padding:8px}
.slot b{font-family:var(--font-display);font-size:34px;color:var(--ink-2);letter-spacing:0}
.binder__meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 28px;align-items:center;margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.rarity{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13.5px;color:var(--ink-2)}
.rarity span{display:inline-flex;align-items:center;gap:8px}
.rarity i{width:22px;height:14px;border-radius:4px;background:var(--c)}
.meter{width:200px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;width:var(--v);background:var(--foil)}
.binder__odds{grid-column:1/-1;font-size:14px;color:var(--muted)}
.holo-stage{position:relative;width:100%;perspective:1000px;container-type:inline-size}
.holo{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;--o:0;--px:0;--py:0;--flip:0deg;--foil-base:0;--foil-boost:0;--c1:#FFCF5C;--c2:#FF7F5C;
  position:relative;display:block;width:100%;aspect-ratio:55/85;padding:0;border:0;background:none;cursor:pointer;border-radius:5.2cqw;color:#F4F2FA;font-family:var(--font-body);text-align:left;transform-style:preserve-3d;transform:rotateY(calc(var(--ry) + var(--flip))) rotateX(var(--rx));transition:transform .8s var(--ease)}
.holo.is-tracking{transition:none}
.holo:focus-visible{outline:none}
.holo:focus-visible .holo__face{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.holo[data-rarity="rare"]{--foil-base:.06;--foil-boost:.32}
.holo[data-rarity="holo"]{--foil-base:.2;--foil-boost:.62}
.holo[data-rarity="daesang"]{--foil-base:.32;--foil-boost:.5}
.holo__face{position:absolute;inset:0;overflow:hidden;border-radius:inherit;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:linear-gradient(160deg,#2A2640,#121019 62%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 26px 50px -26px rgba(0,0,0,.75)}
.holo[data-rarity="daesang"] .holo__face--front{box-shadow:inset 0 0 0 1.6cqw #c9a24a,inset 0 0 0 2.1cqw #f7dc8c,0 26px 50px -26px rgba(0,0,0,.75)}
.holo__face--back{transform:rotateY(180deg)}
.holo__top{position:absolute;left:7%;right:7%;top:3.6%;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:2.9cqw;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,242,250,.66)}
.holo__rar{color:#F4F2FA}
.holo__art{position:absolute;left:6.5%;right:6.5%;top:9.6%;height:53%;border-radius:3.6cqw;overflow:hidden;background:radial-gradient(120% 90% at 28% 18%,var(--c1),var(--c2) 64%,#1D1A31 100%);transform:translate(calc(var(--px) * -5px),calc(var(--py) * -5px)) scale(1.03)}
.holo__art svg{width:100%;height:100%;display:block}
.holo__body{position:absolute;left:7%;right:7%;top:66%;bottom:4.4%;display:flex;flex-direction:column;gap:1.5cqw}
.holo__term{font-family:var(--font-display);font-stretch:118%;font-weight:800;font-size:7.6cqw;line-height:.95;letter-spacing:-.01em;text-transform:uppercase}
.holo__kr{font-family:var(--font-body);font-weight:700;font-size:3.9cqw;color:var(--c1)}
.holo__def{font-size:3.5cqw;line-height:1.38;color:rgba(244,242,250,.72)}
.holo__series{margin-top:auto;display:flex;justify-content:space-between;gap:6px;font-family:var(--font-mono);font-size:2.6cqw;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,250,.6)}
@container (max-width:230px){.holo__def{display:none}.holo__term{font-size:8.6cqw}.holo__kr{font-size:4.8cqw}.holo__top{font-size:3.8cqw}.holo__series{font-size:3.4cqw}}
.holo__foil{position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:color-dodge;opacity:calc(var(--foil-base) + var(--o) * var(--foil-boost));
  background-image:repeating-linear-gradient(118deg,#ff6fa8 0%,#ffd36b 6%,#7bf0c5 12%,#6fb6ff 18%,#b28bff 24%,#ff6fa8 30%),repeating-linear-gradient(32deg,transparent 0 4%,rgba(255,255,255,.28) 4.6% 5.2%,transparent 5.8% 9%);
  background-size:260% 260%,190% 190%;background-position:var(--mx) var(--my),calc(100% - var(--mx)) var(--my);filter:brightness(.66) contrast(1.55) saturate(1.25)}
.holo[data-rarity="daesang"] .holo__foil{background-image:repeating-linear-gradient(118deg,#6e4d10 0%,#f7dc8c 7%,#b5862b 14%,#fff4cf 21%,#6e4d10 28%),repeating-linear-gradient(32deg,transparent 0 4%,rgba(255,255,255,.3) 4.6% 5.2%,transparent 5.8% 9%)}
.holo[data-rarity="holo"] .holo__foil::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23fff'%3E%3Cpath d='M12 8l1.2 3.8L17 13l-3.8 1.2L12 18l-1.2-3.8L7 13l3.8-1.2z'/%3E%3Cpath d='M64 22l.8 2.4 2.4.8-2.4.8-.8 2.4-.8-2.4-2.4-.8 2.4-.8z'/%3E%3Cpath d='M40 52l1 3 3 1-3 1-1 3-1-3-3-1 3-1z'/%3E%3Cpath d='M86 64l1.4 4.2 4.2 1.4-4.2 1.4L86 75.4l-1.4-4.2-4.2-1.4 4.2-1.4z'/%3E%3Cpath d='M20 82l.8 2.4 2.4.8-2.4.8-.8 2.4-.8-2.4-2.4-.8 2.4-.8z'/%3E%3Ccircle cx='52' cy='88' r='1'/%3E%3Ccircle cx='90' cy='30' r='.9'/%3E%3Ccircle cx='30' cy='34' r='.8'/%3E%3C/g%3E%3C/svg%3E");background-size:36% auto;background-position:calc(var(--mx) * -.4) calc(var(--my) * -.4);opacity:calc(.35 + var(--o) * .65)}
.holo__glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:overlay;opacity:calc(.18 + var(--o) * .72);background:radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.85) 0%,rgba(255,255,255,.32) 22%,rgba(0,0,0,.42) 86%)}
.holo__back-dots{position:absolute;inset:0;background-image:radial-gradient(circle,color-mix(in srgb,var(--light-d) 80%,transparent) 0 .7cqw,transparent 1.1cqw);background-size:5cqw 4.2cqw;-webkit-mask-image:radial-gradient(120% 80% at 50% 110%,#000 20%,transparent 70%);mask-image:radial-gradient(120% 80% at 50% 110%,#000 20%,transparent 70%);opacity:.9}
.holo__back-mark{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:2.6cqw;font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:7.4cqw;letter-spacing:-.01em}
.holo__back-mark .haepi{width:40cqw;height:46cqw}
.holo__back-label{position:absolute;left:0;right:0;bottom:6%;text-align:center;font-family:var(--font-mono);font-size:2.8cqw;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,242,250,.6)}

/* stories */
.stories{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.story{grid-column:span 4;display:flex;flex-direction:column;gap:14px;text-decoration:none;min-width:0;border:0;background:none;padding:0;text-align:left;cursor:pointer}
.story--lead{grid-column:span 8;grid-row:span 2}
.story[hidden]{display:none}
.cover{position:relative;container-type:inline-size;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:linear-gradient(150deg,var(--c1),var(--c2));isolation:isolate}
.story--lead .cover{aspect-ratio:16/10.5}
.cover::after{content:"";position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cover__ko{position:absolute;font-family:var(--font-hangul);color:rgba(255,255,255,.94);line-height:.84;white-space:nowrap;transition:transform .8s var(--ease)}
.cover[data-v="1"] .cover__ko{left:-.04em;bottom:-.08em;font-size:34cqw}
.story:not(.story--lead) .cover[data-v="1"] .cover__ko{font-size:30cqw}
.cover[data-v="2"] .cover__ko{writing-mode:vertical-rl;right:7%;top:-.06em;font-size:24cqw}
.cover[data-v="3"]::before{content:"";position:absolute;width:62%;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(255,255,255,.08) 60%);z-index:-1}
.cover[data-v="3"] .cover__ko{left:50%;top:50%;transform:translate(-50%,-50%);font-size:17cqw}
.story:hover .cover__ko{translate:0 -6px}
.cover__lab{position:absolute;left:14px;top:14px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88);display:flex;gap:10px}
.cover__daily{position:absolute;right:14px;top:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:rgba(0,0,0,.42);color:#fff;backdrop-filter:blur(6px)}
.story__meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.story__meta b{color:var(--accent);font-weight:600}
.story h3{font-family:var(--font-display);font-weight:680;font-size:21px;line-height:1.15;letter-spacing:-.012em;margin:0;text-wrap:balance;color:var(--ink)}
.story--lead h3{font-size:clamp(26px,2.8vw,38px)}
.story p{color:var(--ink-2);font-size:15.5px;max-width:58ch}
.story:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.watch{grid-column:span 4;border-radius:18px;border:1px solid var(--line);background:var(--surface);padding:20px;display:grid;gap:12px;align-content:start}
.watch h4{margin:0;font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.01em}
.watch ol{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.watch li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;font-size:14.5px}
.watch li span:first-child{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.watch li small{font-family:var(--font-mono);font-size:11px;color:var(--accent)}
/* reader */
.reader{border:0;padding:0;width:min(780px,100vw - 32px);max-height:calc(100dvh - 48px);border-radius:22px;background:var(--surface);color:var(--ink);box-shadow:0 40px 120px -30px rgba(0,0,0,.6)}
.reader::backdrop{background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(6px)}
.reader__bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 12px 24px;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.reader__prog{position:absolute;left:0;bottom:-1px;height:2px;background:var(--light);width:0}
.reader__x{border:1px solid var(--line-2);background:transparent;border-radius:999px;height:34px;padding:0 14px;cursor:pointer;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em}
.reader__cover{margin:24px 24px 0;aspect-ratio:21/9}
.reader__body{padding:28px clamp(20px,5vw,56px) 48px}
.reader__body h2{font-family:var(--font-display);font-stretch:105%;font-weight:760;font-size:clamp(30px,4.2vw,48px);line-height:1.02;letter-spacing:-.02em;margin:10px 0 16px;text-wrap:balance}
.reader__dek{font-size:19px;color:var(--ink-2);line-height:1.5;margin-bottom:22px}
.reader__by{display:flex;gap:12px;align-items:center;font-size:13.5px;color:var(--muted);padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:26px}
.reader__by .haepi{width:34px;height:40px}
.reader__body p.t{font-size:18px;line-height:1.75;max-width:64ch;margin:0 0 20px}
.reader__body p.t:first-of-type::first-letter{font-family:var(--font-display);font-weight:800;font-size:3.4em;float:left;line-height:.8;margin:.06em .1em 0 0;color:var(--accent)}
.pull{margin:30px 0;padding:6px 0 6px 22px;border-left:3px solid var(--light);font-family:var(--font-display);font-stretch:96%;font-weight:620;font-size:clamp(22px,2.6vw,30px);line-height:1.2;letter-spacing:-.01em;max-width:28ch}
.term{display:inline-flex;gap:6px;align-items:baseline;padding:1px 8px;border-radius:6px;background:color-mix(in oklab,var(--light) 14%,transparent);font-weight:600}
.term i{font-style:normal;font-size:.85em;color:var(--accent)}
.reader__quiz{margin-top:28px;border-radius:16px;padding:18px 20px;background:color-mix(in oklab,var(--light) 10%,var(--surface));display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.reader__quiz p{flex:1;min-width:220px;font-size:15px}

/* lab + archive */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.lab{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--light) 22%,var(--surface)) 0%,var(--surface) 62%);min-height:560px;display:flex;flex-direction:column}
.lab__head{position:relative;z-index:2;padding:26px 26px 0}
.lab h3,.enc h3{font-family:var(--font-display);font-stretch:118%;font-weight:760;font-size:28px;line-height:1;margin:0 0 8px;letter-spacing:-.02em}
.lab__head p,.enc > div > p{font-size:14.5px;color:var(--ink-2);max-width:38ch}
.lab__canvas{flex:1;width:100%;min-height:360px;display:block;cursor:grab;touch-action:pan-y}
.lab__foot{position:relative;z-index:2;padding:0 26px 24px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.lab__fallback{flex:1;display:grid;place-items:center;color:var(--muted);font-size:14px}
.enc{border-radius:26px;border:1px solid var(--line);background:var(--surface);padding:26px;display:flex;flex-direction:column;gap:22px}
.gens{display:grid;gap:14px}
.gen{display:grid;grid-template-columns:62px minmax(0,1fr) 64px;gap:14px;align-items:center;font-size:13.5px}
.gen__n{font-family:var(--font-display);font-weight:700}
.gen__track{position:relative;height:30px;border-radius:8px;background:color-mix(in oklab,var(--ink) 7%,transparent)}
.gen__bar{position:absolute;top:0;bottom:0;left:var(--l);width:var(--w);border-radius:8px;background:var(--light);color:var(--on-light);display:flex;align-items:center;padding-inline:8px;font-family:var(--font-mono);font-size:11px;white-space:nowrap;overflow:hidden}
.gen__bar.is-live{background:repeating-linear-gradient(135deg,var(--light) 0 6px,color-mix(in srgb,var(--light) 65%,transparent) 6px 12px)}
.gen__p{font-family:var(--font-mono);font-size:12px;color:var(--muted);text-align:right}
.axis{display:grid;grid-template-columns:62px minmax(0,1fr) 64px;gap:14px}
.axis__t{position:relative;height:16px;font-family:var(--font-mono);font-size:10.5px;color:var(--muted)}
.axis__t span{position:absolute;transform:translateX(-50%)}
.axis__t span:first-child{transform:none}.axis__t span:last-child{transform:translateX(-100%)}
.enc__links{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.enc__links a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px;border-radius:14px;border:1px solid var(--line-2);text-decoration:none;font-weight:600;font-size:14px}
.enc__links a:hover{border-color:var(--ink)}
.enc__links small{font-family:var(--font-mono);color:var(--muted);font-weight:400}

/* haepi */
.mascot{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,5vw,72px);align-items:center}
.mascot__stage{position:relative;aspect-ratio:1;border-radius:32px;display:grid;place-items:center;background:radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--light) 32%,transparent),transparent 62%),var(--surface);border:1px solid var(--line);overflow:hidden;max-width:560px;width:100%;justify-self:center}
.mascot__stage .haepi{width:62%;height:auto;filter:drop-shadow(0 30px 40px color-mix(in srgb,var(--light) 40%,transparent))}
.mascot__ko{position:absolute;left:24px;top:20px;font-family:var(--font-hangul);font-size:clamp(32px,4vw,56px);color:var(--accent);line-height:1}
.mascot__moods{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px)}
.mascot__moods button{border:0;background:transparent;cursor:pointer;padding:7px 13px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.mascot__moods button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.mascot__name{font-family:var(--font-display);font-stretch:130%;font-weight:830;font-size:clamp(56px,8vw,112px);line-height:.85;letter-spacing:-.04em;margin:0}
.mascot__bio{font-size:18px;color:var(--ink-2);max-width:46ch;margin:20px 0 24px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 26px;border-top:1px solid var(--line)}
.facts div{padding:12px 0;border-bottom:1px solid var(--line);display:grid;gap:2px}
.facts div:nth-child(odd){padding-right:16px}
.facts dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;font-weight:500}
.merch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.merch figure{margin:0;padding:14px 10px 12px;border-radius:16px;border:1px solid var(--line);background:var(--surface);display:grid;justify-items:center;gap:8px;text-align:center}
.merch svg{width:100%;max-width:96px;height:96px}
.merch figcaption{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.haepi{overflow:visible}
.haepi__acc{display:none}
:root[data-event="halloween"] .haepi__acc--halloween,:root[data-event="winter"] .haepi__acc--winter,:root[data-event="blossom"] .haepi__acc--blossom,:root[data-event="runner"] .haepi__acc--runner,:root[data-event="seven"] .haepi__acc--seven{display:inline}
/* five events do not fit on one row of the compact dock: two rows of three */
/* Time slip: the umbrella needs room above Haepi on the mascot card */
:root[data-event="runner"] .mascot__stage .haepi{width:56%;transform:translateY(9%)}
#events{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
.seg button.is-live{position:relative}
.seg button.is-live::after{content:"";position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:#FF8A2A;box-shadow:0 0 8px #FF8A2A}
.haepi--bob{animation:bob 4.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5%)}}
.haepi__tent path{transform-box:fill-box;transform-origin:50% 0;animation:sway 2.6s ease-in-out infinite alternate}
.haepi__tent path:nth-child(2){animation-delay:-.6s}.haepi__tent path:nth-child(3){animation-delay:-1.2s}.haepi__tent path:nth-child(4){animation-delay:-1.8s}
.haepi__stick{transform-box:fill-box;transform-origin:20% 90%;animation:wave 1.4s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes wave{from{transform:rotate(-10deg)}to{transform:rotate(12deg)}}
.haepi__blink{transform-box:fill-box;transform-origin:center;animation:blink 5.6s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.haepi__shades{opacity:var(--shades);transform:translateY(calc((1 - var(--shades)) * -14px));transition:opacity .4s,transform .4s var(--ease)}

/* seat */
.seat{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(22px,3vw,40px);align-items:start}
.seat__left{display:grid;gap:22px;position:sticky;top:96px}
.ticket{display:grid;grid-template-columns:minmax(0,1fr) auto;border-radius:18px;background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);overflow:hidden;position:relative}
.ticket__main{padding:20px 20px 20px 30px;display:grid;gap:12px;min-width:0;background:var(--foil) left top/8px 100% no-repeat}
.ticket__row{display:flex;gap:22px;flex-wrap:wrap}
.ticket__f{display:grid;gap:2px}
.ticket__f span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ticket__f b{font-family:var(--font-display);font-stretch:90%;font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1}
.ticket__name{font-size:14px;color:var(--ink-2)}
.ticket__stub{border-left:2px dashed var(--line-2);padding:16px;display:grid;place-items:center;gap:4px;background:color-mix(in oklab,var(--light) 12%,transparent);min-width:96px;text-align:center}
.ticket__stub b{font-family:var(--font-display);font-stretch:62%;font-size:44px;line-height:1;color:var(--accent)}
.ticket__stub span{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ticket::before,.ticket::after{content:"";position:absolute;right:88px;width:16px;height:16px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.ticket::before{top:-8px}.ticket::after{bottom:-8px}
.field{display:grid;gap:8px}
.field label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input{font:inherit;font-size:18px;padding:14px 16px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);width:100%}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--light) 22%,transparent)}
.field__hint{font-size:13px;color:var(--muted)}
.field__hint.is-error{color:var(--bad)}
.seat__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tile{border-radius:20px;border:1px solid var(--line);background:var(--surface);padding:20px;display:grid;gap:10px;align-content:start;min-width:0}
.tile--wide{grid-column:1/-1;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px}
.tile--wide .haepi{width:76px;height:90px}
.tile__title{font-family:var(--font-display);font-stretch:105%;font-weight:720;font-size:24px;letter-spacing:-.015em;line-height:1.1}
.tile__value{font-family:var(--font-display);font-stretch:70%;font-weight:750;font-size:42px;line-height:1}
.tile__value small{font-size:.42em;font-stretch:100%;color:var(--muted);font-weight:500}
.tile__text{font-size:14px;color:var(--ink-2)}
.reading{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.reading li{display:grid;gap:6px;font-size:14px}
.reading .row{display:flex;justify-content:space-between;gap:10px}
.reading .row span:last-child{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;width:var(--v);background:var(--light)}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;border:1px solid var(--line-2);font-size:13.5px;font-weight:600}
.fchip i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.fchip small{font-family:var(--font-mono);font-size:10px;color:var(--muted);font-weight:400}

/* venue map */
.venue{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(122px,auto);gap:10px;grid-template-areas:"a stage stage stage stage b" "a floor floor floor floor b" "c floor floor floor floor d" "box box merch merch arcade arcade"}
.z-stage{grid-area:stage}.z-floor{grid-area:floor}.z-a{grid-area:a}.z-b{grid-area:b}.z-c{grid-area:c}.z-d{grid-area:d}.z-box{grid-area:box}.z-merch{grid-area:merch}.z-arcade{grid-area:arcade}
.zone{border-radius:16px;padding:16px;display:grid;align-content:space-between;gap:10px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;position:relative;min-width:0;transition:transform .2s var(--ease),box-shadow .2s}
.zone:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--ink),var(--shadow)}
.zone__top{display:flex;justify-content:space-between;align-items:start;gap:8px}
.zone__code{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted)}
.zone__name{font-family:var(--font-display);font-weight:700;font-size:clamp(16px,1.4vw,20px);letter-spacing:-.015em;line-height:1.1}
.zone__desc{font-size:13.5px;color:var(--ink-2)}
.status{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:999px;white-space:nowrap}
.status--open{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.status--soon{background:color-mix(in oklab,var(--light) 16%,transparent);color:var(--accent)}
.status--later{background:color-mix(in oklab,var(--ink) 8%,transparent);color:var(--muted)}
.zone--stage{background:var(--light);color:var(--on-light);box-shadow:none}
.zone--stage .zone__desc,.zone--stage .zone__code{color:color-mix(in srgb,var(--on-light) 78%,transparent)}
.zone--stage .status{background:color-mix(in srgb,var(--on-light) 18%,transparent);color:var(--on-light)}
.zone--floor{background:radial-gradient(circle,color-mix(in srgb,var(--light) 50%,transparent) 1.2px,transparent 1.8px) 0 0/14px 14px,var(--surface)}

.foot{border-top:1px solid var(--line);padding-block:64px 96px}
.foot__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:end}
.foot__big{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:clamp(40px,7vw,96px);letter-spacing:-.04em;line-height:.9}
.foot__big span{font-weight:300}
.foot__small{font-size:14px;color:var(--muted);max-width:46ch}
.cbar{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg);border-radius:999px;padding:6px 6px 6px 16px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;box-shadow:0 16px 40px -16px rgba(0,0,0,.5)}
.cbar button{border:0;border-radius:999px;background:var(--bg);color:var(--ink);font:inherit;font-weight:600;padding:8px 14px;cursor:pointer}

/* dock: collapsible console */
.dock{gap:10px !important}
.dock__bar{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:2px 2px 2px 0;cursor:pointer;text-align:left;font-size:14px}
.dock__dot{width:22px;height:22px;border-radius:50%;background:var(--sw, var(--light));flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--light) 25%,transparent),0 0 16px -2px var(--light)}
.dock__sum{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.dock__sum b{color:var(--ink);font-weight:700}
.dock__chev{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dock__chev svg{width:12px;height:12px;transition:transform .35s var(--ease);transform:rotate(180deg)}
.dock[data-open="true"] .dock__chev svg{transform:none}
.dock__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.dock[data-open="true"] .dock__panel{grid-template-rows:1fr}
.dock__inner{overflow:hidden;display:grid;gap:12px;min-height:0}
.dock[data-open="true"] .dock__inner{padding-top:6px}
.dock[data-open="false"] .dock__bar{animation:hint 2.4s ease-in-out 2}
@keyframes hint{50%{transform:translateY(-2px)}}
.is-preview{font-style:italic}
/* holo: real thickness and inspect mode */
.holo{transform:rotateY(calc(var(--ry) + var(--flip))) rotateX(var(--rx)) scale(var(--sc,1)) !important}
.holo__face--front{transform:translateZ(1.6px)}
.holo__face--back{transform:rotateY(180deg) translateZ(1.6px) !important}
.holo__edge{position:absolute;inset:0;border-radius:inherit;transform:translateZ(var(--z));background:var(--edge,linear-gradient(90deg,#e8e4f3,#9e98b4 50%,#e8e4f3));pointer-events:none}
.holo[data-rarity="daesang"]{--edge:linear-gradient(90deg,#fff1c4,#b5862b 50%,#fff1c4)}
.holo[data-rarity="holo"]{--edge:linear-gradient(90deg,#ffd6ec,#9fd8ff 50%,#d8c8ff)}
.holo-stage{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.holo-stage.is-inspect{z-index:40;cursor:grabbing}
.holo-stage.is-inspect .holo__face{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 60px 90px -40px rgba(0,0,0,.8)}

/* refine: calmer sizes, hero fits one laptop screen, compact dock */
.btn{--h:44px;padding:0 20px;font-size:14.5px;gap:8px}
.btn--sm{--h:36px;padding:0 15px;font-size:13.5px}
.btn svg{width:14px;height:14px}
.hero{min-height:max(560px,min(100svh,920px))}
.hero__in{padding-block:120px 44px}
.eyebrow{font-size:11px;padding:6px 12px 6px 9px;margin-bottom:18px;gap:8px}
.hero__title{font-size:clamp(40px,min(5.8vw,11vh),100px)}
.hero__lede{font-size:clamp(15.5px,1.2vw,17.5px);max-width:44ch;margin:18px 0 24px}
.hero__ctas{gap:10px}
.dock{position:relative;width:min(100%,348px);padding:14px 14px 12px;border-radius:20px;gap:12px !important}
.dock__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.swatches--quick{gap:6px;flex-wrap:nowrap;justify-content:space-between;padding-inline:3px}
.swatches--quick .sw{width:19px;height:19px;flex:none}
.swatches--quick .sw[aria-pressed="true"]::after{inset:-4px;border-width:1.5px}
.dock__more{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--light) 12%,transparent);color:var(--accent);font-size:12.5px;font-weight:650;cursor:pointer;flex:none;transition:background-color .2s,border-color .2s}
.dock__more:hover{background:color-mix(in srgb,var(--light) 22%,transparent);border-color:var(--accent)}
.dock__more svg{width:14px;height:14px}
.dock__more .dock__chev{width:10px;height:10px;transition:transform .35s var(--ease);transform:rotate(180deg)}
.dock[data-open="true"] .dock__more .dock__chev{transform:none}
.dock[data-open="false"] .dock__bar{animation:none}
.dock__bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:10px}
.dock__label--top{margin:0;align-items:baseline}
.dock__sum{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dock__sum b{color:var(--ink);font-weight:700}
.dock__acts{display:flex !important;gap:6px;flex:none}
.dock__act{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background-color .2s,border-color .2s}
.dock__act:hover{border-color:var(--ink)}
.dock__act svg{width:14px;height:14px}
.dock__act--ink{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dock__inner{gap:12px}
.dock__hint{position:absolute;left:10px;bottom:calc(100% + 10px);margin:0;padding:6px 11px;border-radius:10px;background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s var(--ease)}
.dock__hint::after{content:"";position:absolute;left:18px;top:100%;border:6px solid transparent;border-top-color:var(--ink)}
.dock.is-new .dock__hint{opacity:1;transform:none;transition-delay:2.6s}
.dock.is-new .sw[aria-pressed="true"]::after{animation:swPulse 1.8s ease-out infinite}
@keyframes swPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--light) 70%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
/* dock: never wider than its own column, so swatches and buttons stay inside */
.dock{grid-template-columns:minmax(0,1fr)}
/* Soundcheck: "the ocean." readable above the lightsticks (darker foil, same hue) */
:root:not(.is-dark) .hero__title .foil-text{background-image:linear-gradient(100deg,color-mix(in oklab,var(--accent) 72%,#0B0A10) 0%,color-mix(in oklab,color-mix(in oklab,var(--accent) 50%,#D6336C) 78%,#0B0A10) 50%,color-mix(in oklab,var(--accent) 72%,#0B0A10) 100%)}
@media (max-width:820px){.dock{width:100%}.hero__in{padding-block:280px 32px}}
@media (max-width:380px){.swatches--quick .sw{width:17px;height:17px}.dock__more span{display:none}.dock__more{padding:0 8px}}
@media (max-width:1080px){
  .nav__links{display:none}
  .daily,.duo,.binder__grid,.mascot,.seat{grid-template-columns:minmax(0,1fr)}
  .seat__left{position:static}
  .side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .side .panel:last-child{grid-column:1/-1}
  .story,.watch{grid-column:span 6}.story--lead{grid-column:1/-1;grid-row:auto}
  .venue{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"stage stage stage stage" "floor floor floor floor" "a a b b" "c c d d" "box box merch merch" "arcade arcade arcade arcade"}
}
@media (max-width:820px){
  .hero__in{grid-template-columns:minmax(0,1fr);padding-block:280px 32px}
  .dock{justify-self:stretch;width:100%}
  .hero__shade{background:linear-gradient(0deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 48%,transparent 72%)}
  .hero__rail,.theme-name{display:none}
  .sec-head{grid-template-columns:minmax(0,1fr)}.sec-head__aside{text-align:left}
  .binder__meta{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .seat-chip span{display:none}.seat-chip{padding-right:6px}
  .opts{grid-template-columns:minmax(0,1fr)}
  .ticket-q{grid-template-columns:minmax(0,1fr)}
  .ticket-q__stub,.ticket-q::before,.ticket-q::after{display:none}
  .ticket-q__main{border-radius:24px}
  .stamp{right:20px}
  .side{grid-template-columns:minmax(0,1fr)}
  .quiz__end{grid-template-columns:minmax(0,1fr);justify-items:start}
  .story,.story--lead,.watch{grid-column:1/-1}
  .merch{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{grid-template-columns:minmax(0,1fr)}.facts div:nth-child(odd){padding-right:0}
  .enc__links{grid-template-columns:minmax(0,1fr)}
  .seat__grid{grid-template-columns:minmax(0,1fr)}
  .venue{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"stage stage" "floor floor" "a b" "c d" "box box" "merch merch" "arcade arcade"}
  .gen,.axis{grid-template-columns:48px minmax(0,1fr) 44px;gap:10px}
  .cbar span{display:none}.cbar{padding-left:6px}
  .note{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}
/* dock, round 4: folded it is one slim bar (your light, Cheer, Seat view, open); unfolded it shows the colors and the options */
.dock[data-open="false"]{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"sum bottom";align-items:center;padding:8px 8px 8px 14px;gap:10px !important}
.dock[data-open="false"] .dock__label--top{grid-area:sum;display:flex;align-items:center;gap:10px;cursor:pointer;min-width:0}
.dock[data-open="false"] .dock__label--top::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;background:var(--light);box-shadow:0 0 0 3px color-mix(in srgb,var(--light) 25%,transparent),0 0 14px -2px var(--light)}
.dock[data-open="false"] .dock__label--top > span:first-child{display:none}
.dock[data-open="false"] .dock__sum{font-size:13px}
.dock[data-open="false"] .swatches--quick,.dock[data-open="false"] .dock__evnote,.dock[data-open="false"] .dock__panel{display:none}
.dock[data-open="false"] .dock__bottom{grid-area:bottom;border-top:0;padding-top:0;gap:6px;flex-direction:row-reverse}
.dock[data-open="false"] .dock__act{font-size:0;gap:0;width:32px;padding:0;justify-content:center}
.dock[data-open="false"] .dock__act svg{width:15px;height:15px}
.dock[data-open="false"] .dock__more{font-size:0;gap:4px;height:32px;padding:0 9px}
.dock[data-open="false"] .dock__more span{display:none}
.dock[data-open="true"]{animation:dockOpen .3s var(--ease)}
@keyframes dockOpen{from{opacity:.6;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dock[data-open="true"]{animation:none}}
.dock__x{display:none;margin-left:auto;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);cursor:pointer;align-items:center;justify-content:center;align-self:center}
.dock__x:hover{color:var(--ink);border-color:var(--ink)}
.dock__x svg{width:12px;height:12px}
.dock[data-open="true"] .dock__label--top{display:flex;align-items:center;justify-content:flex-start;gap:8px}
.dock[data-open="true"] .dock__x{display:inline-flex}
/* the seat bar on The Daily: is this seat saved, before you play */
.seatbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 16px;margin:0 0 22px;padding:14px 18px;border-radius:18px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--light) 9%,var(--glass, transparent))}
.seatbar__icon{width:12px;height:12px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 4px color-mix(in srgb,var(--muted) 22%,transparent)}
.seatbar.is-saved .seatbar__icon{background:#3ad29f;box-shadow:0 0 0 4px rgba(58,210,159,.22)}
.seatbar.is-guest .seatbar__icon,.seatbar.is-pending .seatbar__icon{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent)}
.seatbar__text{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.seatbar__text b{color:var(--ink)}
.seatbar__acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.seatbar__acts [hidden]{display:none!important}
.seatbar.is-saved{padding-block:10px}
.seatbar.is-saved .seatbar__text{font-size:14px}
.quiz__save{margin:10px 0 0;font-size:14px;color:var(--ink-2)}
.quiz__save a{color:var(--accent);font-weight:600}
@media (max-width:640px){.seatbar{grid-template-columns:auto minmax(0,1fr)}.seatbar__acts{grid-column:1/-1;justify-content:flex-start}}
@media (max-width:640px){.section{padding-block:44px}.page-main > .section + .section{padding-top:28px}}
/* homepage rhythm: one calm distance between the blocks, the same above and below every section */
#about.section,#stories.section,#haepi.section,#venue.section{padding-block:clamp(34px,2.8vw,40px)}
#about .intro__in{align-items:start}
#about .intro__in > div:first-child{padding-top:.45em}
@media (max-width:640px){#about.section,#stories.section,#haepi.section,#venue.section{padding-block:40px}}
/* stories on wide screens: the lead story on the left, the others as a column of small cards on the right,
   so both sides end at the same height whatever the number of stories */
@media (min-width:1081px){
  #storyGrid{align-items:stretch}
  #storyGrid > .story--lead{grid-column:1 / span 8;grid-row:1 / span var(--rows,2)}
  #storyGrid > .story:not(.story--lead){grid-column:9 / -1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto 1fr;column-gap:18px;row-gap:8px;align-items:start}
  #storyGrid > .story:not(.story--lead) .cover{grid-row:1 / -1;aspect-ratio:auto;height:100%;min-height:150px;align-self:stretch}
  #storyGrid > .story:not(.story--lead) .story__meta{grid-column:2;grid-row:1;flex-wrap:wrap;row-gap:2px;padding-top:4px}
  #storyGrid > .story:not(.story--lead) h3{grid-column:2;grid-row:2}
  #storyGrid > .story:not(.story--lead) h3{font-size:clamp(17px,1.35vw,20px)}
  #storyGrid > .story--lead:only-child{grid-column:1 / -1}
}
/* small story cards: the upright 드라마 stands at the bottom, clear of the label at the top */
@media (min-width:641px){#storyGrid > .story:not(.story--lead) .cover[data-v="2"] .cover__ko{top:26%}}
/* tablets and small laptops: the lead story on top, the others as a list of wide cards below it (no lonely card in a half-empty row) */
@media (min-width:641px) and (max-width:1080px){
  #storyGrid > .story:not(.story--lead){grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-rows:auto auto 1fr;column-gap:22px;row-gap:8px;align-items:start}
  #storyGrid > .story:not(.story--lead) .cover{grid-row:1 / -1;aspect-ratio:4/3}
  #storyGrid > .story:not(.story--lead) .story__meta{grid-column:2;grid-row:1;padding-top:4px}
  #storyGrid > .story:not(.story--lead) h3{grid-column:2;grid-row:2}
}
/* The Daily: Haepi's answer sits right under the four options; when the sidebar makes the ticket taller, the extra room goes below it */
.quiz__fb{margin-top:0}
/* The Daily ticket: step, progress, category and timer always on one line */
.quiz__top{flex-wrap:nowrap}
.quiz__step{white-space:nowrap}
.quiz__prog{flex:1 1 auto;min-width:0;max-width:220px}
.quiz__prog i{flex:1 1 0;width:auto;min-width:10px;max-width:28px}
.quiz__top .chip{flex:none}
@media (max-width:420px){.quiz__step{font-size:11px;letter-spacing:.06em}.quiz__top{gap:8px}}
/* Screentone: the ticket inked like the other cards, notches with the same ink, a calmer stub */
html:root:not(.is-dark) .ticket-q{border:2px solid var(--ink);box-shadow:none}
html:root:not(.is-dark) .ticket-q::before,html:root:not(.is-dark) .ticket-q::after{border:2px solid var(--ink);right:103px}
html:root:not(.is-dark) .ticket-q::before{top:-11px;clip-path:inset(50% 0 0 0)}
html:root:not(.is-dark) .ticket-q::after{bottom:-11px;clip-path:inset(0 0 50% 0)}
html:root:not(.is-dark) .ticket-q__stub{border-left:2px dashed var(--ink);background:radial-gradient(circle,color-mix(in srgb,var(--light) 55%,transparent) 32%,transparent 36%) 0 0/7px 7px,var(--surface)}
html:root:not(.is-dark) .ticket-q__stub span{background:var(--surface);padding:8px 3px;border-radius:4px}
/* ---------- Your setlist and the Fan Chart (under Your seat) ---------- */
/* dark: no hard line between the page and the footer, and the glow at the bottom of the page fades out before it,
   so page and footer flow into each other (light keeps its ink line, part of the screentone look) */
:root.is-dark .foot{border-top-color:transparent}
:root.is-dark .page-amb::after{-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent);mask-image:linear-gradient(to bottom,#000 45%,transparent)}
/* The Crowd: the theme poll as a paper ballot (same paper and soft shadow as the setlist) */
.crowd__side{display:grid;gap:26px;max-width:none;padding-top:6px}
.poll{position:relative;background:#FFFDF6;color:#17151B;border:2px solid #17151B;border-radius:4px;padding:26px 22px 18px;transform:rotate(.9deg);box-shadow:0 2px 0 rgba(0,0,0,.06),8px 14px 26px -10px rgba(23,21,27,.38)}
.poll::before{content:"";position:absolute;left:50%;top:-13px;width:96px;height:26px;margin-left:-48px;background:rgba(255,211,77,.82);transform:rotate(2.5deg)}
:root.is-dark .poll{background:#1E1B2A;color:#F1EEF8;border-color:#3d3852;box-shadow:0 0 0 1px #06050A,10px 16px 30px -12px rgba(0,0,0,.7),0 0 46px -20px var(--light)}
.poll__head{display:flex;justify-content:space-between;gap:10px;border-bottom:2px dashed currentColor;padding-bottom:8px;font:700 12px var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.poll__when{opacity:.65;font-weight:600}
.poll__q{margin:14px 0 4px;font:800 clamp(22px,2vw,27px)/1.1 var(--font-display);letter-spacing:-.01em}
.poll__intro{margin:0 0 12px;font-size:14px;opacity:.75}
.poll__opts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.poll__opt{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;padding:10px 12px;border:2px solid currentColor;border-radius:10px;background:transparent;color:inherit;font:600 15px var(--font-body);cursor:pointer;overflow:hidden;isolation:isolate;transition:transform .15s}
.poll__opt:not(:disabled):hover{transform:translateX(3px)}
.poll__opt:disabled{cursor:not-allowed;opacity:.6}
.poll__opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.poll__opt.has-result::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:color-mix(in srgb,var(--light) 30%,transparent);z-index:-1;transition:width .6s var(--ease)}
.poll__box{width:18px;height:18px;border:2px solid currentColor;border-radius:4px;display:grid;place-items:center}
.poll__opt[aria-pressed="true"] .poll__box{background:var(--light-d,var(--light));border-color:var(--light-d,var(--light))}
.poll__opt[aria-pressed="true"] .poll__box::after{content:"";width:9px;height:5px;border:solid #14121B;border-width:0 0 2.5px 2.5px;transform:translateY(-1px) rotate(-45deg)}
.poll__pc{font:700 13px var(--font-mono)}
.poll__msg{margin:12px 0 0;font-size:13.5px;opacity:.85}.poll__msg a{color:var(--accent);font-weight:600}
.poll__idea{margin-top:14px;border-top:1px solid rgba(127,120,150,.3);padding-top:10px;font-size:14px}
.poll__idea summary{cursor:pointer;font-weight:600;list-style:none}.poll__idea summary::-webkit-details-marker{display:none}
.poll__idea summary::before{content:"+ ";color:var(--accent)}.poll__idea[open] summary::before{content:"- "}
.poll__ideaform{display:grid;gap:8px;margin-top:10px}
.poll__ideaform textarea{width:100%;border:2px solid currentColor;border-radius:10px;padding:10px 12px;background:transparent;color:inherit;font:15px var(--font-body);resize:vertical}
.poll__ideaacts{display:flex;align-items:center;justify-content:space-between;gap:10px}
.poll__count{font:600 11px var(--font-mono);opacity:.6}
.poll__ideamsg{margin:0;font-size:13px}.poll__ideamsg.is-error{color:var(--bad)}.poll__ideamsg:empty{display:none}
.poll__ideanote{margin:0;font-size:12px;opacity:.6}
.poll__last{margin:12px 0 0;font:600 12px var(--font-mono);opacity:.7}
.crowd__cta{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6;max-width:44ch}.crowd__cta b{color:var(--ink)}.crowd__cta a{color:var(--accent);font-weight:600}
.fc__steps{list-style:none;counter-reset:fcs;margin:14px 0 0;padding:14px 0 0;border-top:1px solid #26222f;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fc__steps li{counter-increment:fcs;display:grid;gap:4px;align-content:start;font-size:12.5px;line-height:1.45;color:#a7a1b8}
.fc__steps li::before{content:counter(fcs);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#1e1b2a;color:#ffd34d;font:700 12px var(--font-mono);box-shadow:inset 0 0 0 1px #3d3852}
.fc__steps b{color:#F1EEF8;font-size:13.5px}
@media (max-width:640px){.fc__steps{grid-template-columns:minmax(0,1fr)}.fc__steps li{grid-template-columns:24px minmax(0,1fr);column-gap:10px}.fc__steps li::before{grid-row:span 2}}
/* the Fan Chart before it opens: empty rows waiting to be filled, and how many setlists are still needed */
.fc__goal{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;margin:0 0 12px;padding:12px;border-radius:10px;background:#15131d}
.fc__goal[hidden]{display:none}
.fc__sticks{grid-column:1 / -1;display:flex;gap:16px;align-items:end}
.fc__stick{width:24px;height:48px;fill:#2a2638;transition:fill .5s,filter .5s}
.fc__stick.is-on{fill:var(--light-d,var(--light));filter:drop-shadow(0 0 6px var(--light-d,var(--light)))}
.fc__stick.is-on circle{fill:#fff;filter:drop-shadow(0 0 5px var(--light-d,var(--light)))}
.fc__stick.is-on:nth-child(1){animation:stickOn .6s var(--ease) both}
@keyframes stickOn{from{transform:scale(.8)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.fc__stick{transition:none;animation:none!important}}
.fc__goaltx{margin:0;font-size:13px;color:#C6C1D4}
.fc__row--ghost{opacity:.5}
.fc__ghost{display:block;width:var(--w,60%);height:9px;border-radius:5px;background:#2c2839;margin:3px 0}
.fc__ghost--sm{height:6px;background:#221f2d}
.fc__row--ghost .fc__p{color:#5d5770}
/* phone and tablet: the poll first (short, something to do), then the Fan Chart, then the setlist link */
@media (max-width:900px){.crowd__side{display:contents}.crowd__side .poll{order:-1}.crowd__cta{order:2}}
@media (prefers-reduced-motion:reduce){.poll__opt,.poll__opt.has-result::before{transition:none}}
/* Your seat: setlist with a short explanation beside it; The Crowd: the chart with the same; Settings: account, light, delete */
.setlist__grid,.crowd__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,72px);align-items:start;margin-top:8px}
.setlist__grid .sl{max-width:640px}
.setlist__side{display:grid;gap:4px;max-width:44ch;padding-top:18px;color:var(--ink-2);font-size:15.5px;line-height:1.6}
.setlist__side p{margin:0 0 12px}.setlist__side b{color:var(--ink)}
@media (max-width:900px){.setlist__grid,.crowd__grid{grid-template-columns:minmax(0,1fr)}.setlist__side,.crowd__side{padding-top:0}}
.sec-title--sm{font-size:clamp(30px,3.6vw,48px)}
.settings__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(22px,3vw,40px);align-items:start}
.settings__grid > .field,.settings__grid > .panel{margin:0}
.settings__grid > .acct{grid-column:span 1}
.settings__grid > .seatdel{border-top:0;padding-top:0;margin-top:0}
/* Your seat: the account sits right under the ticket. A guest sees a short card with two choices; the form opens in place */
.seatacct{display:grid;gap:14px;min-width:0}
/* the greeting is a slim line under streak and binder; the binder tile opens your cards further down */
.seat__grid .tile--greet{order:2;padding:12px 18px;gap:14px}
.tile--greet .haepi{width:46px;height:54px}
.tile--greet .tile__title{font-size:18px}
.tile--greet .tile__text{font-size:13.5px}
.tile--link{color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}
.tile--link:hover{border-color:color-mix(in srgb,var(--light) 60%,var(--line));transform:translateY(-2px)}
.tile--link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tile--link .panel__label{display:flex;justify-content:space-between}
.tile__go{color:var(--accent);letter-spacing:.08em}
@media (prefers-reduced-motion:reduce){.tile--link:hover{transform:none}}
.seatacct .seatsave{grid-template-columns:minmax(0,1fr);gap:16px;margin:0;padding:22px;border-radius:20px}
.seatacct .seatsave__steps,.seatacct .seatsave__why,.seatacct .seatsave__text:empty{display:none}
.seatacct .seatsave__title{font-size:clamp(20px,1.8vw,24px);margin:0 0 4px}
.seatsave__pick{display:none}
.seatacct .seatsave__pick{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 0}
.seatacct .seatsave:not(.is-open) .seatsave__forms{display:none}
.seatacct .seatsave.is-open .seatsave__pick{display:none}
.seatacct .seatsave.is-open .seatsave__title{display:none}
.seatacct .seatsave.is-saved .seatsave__pick{display:none}
.seatacct .seatsave__forms{align-self:stretch}
.sl{position:relative;background:#FFFDF6;color:#17151B;border:2px solid #17151B;border-radius:4px;padding:28px 24px 18px;transform:rotate(-.8deg);box-shadow:0 2px 0 rgba(0,0,0,.06),8px 14px 26px -10px rgba(23,21,27,.38)}
.sl::before{content:"";position:absolute;left:50%;top:-13px;width:104px;height:26px;margin-left:-52px;background:rgba(255,211,77,.82);transform:rotate(-3deg)}
:root.is-dark .sl{background:#1E1B2A;color:#F1EEF8;border-color:#3d3852;box-shadow:0 0 0 1px #06050A,10px 16px 30px -12px rgba(0,0,0,.7),0 0 46px -20px var(--light)}
.sl__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:2px dashed currentColor;padding-bottom:10px}
.sl__k{margin:0;font:900 30px/1 var(--font-display);font-stretch:125%;letter-spacing:-.01em;text-transform:uppercase;text-shadow:.045em .035em 0 color-mix(in oklab,var(--light) 82%,#3a2a10)}
:root.is-dark .sl__k{text-shadow:0 0 14px var(--light)}
.sl__name{font:700 15px var(--font-mono)}.sl__seat{margin-left:auto;font:600 11px var(--font-mono);letter-spacing:.08em;opacity:.65}
.sl__intro{margin:10px 0 4px;font-size:14px;opacity:.75}
.sl__list{list-style:none;margin:0;padding:0}
.sl__row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;column-gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(127,120,150,.22)}
.sl__no{font:800 20px var(--font-mono);color:var(--accent)}
.sl__tx{display:grid;min-width:0}.sl__t{font-weight:700;font-size:16.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sl__a{font-size:12.5px;opacity:.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl__ctl{display:flex;gap:2px;opacity:.45;transition:opacity .2s}.sl__row:hover .sl__ctl,.sl__ctl:focus-within{opacity:1}
@media (hover:none){.sl__ctl{opacity:.8}}
.sl__ctl button{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:inherit;font:600 14px var(--font-mono);cursor:pointer}
.sl__ctl button:hover{background:rgba(127,120,150,.18)}
.sl__enc{margin-top:16px;padding-top:10px;border-top:2px dashed currentColor}
.sl__enck{margin:0 0 4px;font:800 16px var(--font-display);font-stretch:120%;letter-spacing:.04em;text-transform:uppercase}
.sl__enck span{display:block;margin-top:2px;font:400 12.5px var(--font-body);letter-spacing:0;text-transform:none;opacity:.65}
.sl__elist{list-style:none;margin:0;padding:0}
.sl__row--enc{padding:5px 0}.sl__row--enc .sl__no{font-size:15px;opacity:.8}.sl__row--enc .sl__t{font-size:15px}
.sl__enchint{margin:6px 0 0;font-size:13.5px;opacity:.75}
.sl__empty,.sl__cta{margin:14px 0 4px;font-size:14px}.sl__cta a{color:var(--accent);font-weight:600}
.sl__search{position:relative;margin-top:12px}
.sl__search input,.sl__own input{width:100%;height:42px;border:2px solid currentColor;border-radius:10px;padding:0 12px;background:transparent;color:inherit;font:15px var(--font-body)}
.sl__res{display:grid;margin-top:6px}.sl__res:empty{display:none}
.sl__opt{display:grid;text-align:left;gap:1px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:inherit;cursor:pointer}
.sl__opt:hover,.sl__opt:focus-visible{background:color-mix(in srgb,var(--light) 16%,transparent)}
.sl__opt--own{font-size:13.5px;font-weight:600;color:var(--accent)}
.sl__own{margin-top:10px;display:grid;gap:8px}.sl__ownhint{margin:0;font-size:13px;opacity:.7}
.sl__ownrow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 80px;gap:8px}
@media (max-width:520px){.sl__ownrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sl__ownrow input[name=title]{grid-column:1/-1}}
.sl__ownacts{display:flex;gap:14px;align-items:center}.sl__ownmsg{margin:0;font-size:13px;color:var(--bad)}
.sl__foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.sl__toggle{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.sl__toggle input{position:absolute;opacity:0;width:1px;height:1px}
.sl__toggle span{width:38px;height:22px;border-radius:99px;border:2px solid currentColor;position:relative;flex:none;transition:background-color .2s}
.sl__toggle span::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:currentColor;transition:transform .2s}
.sl__toggle input:checked + span{background:var(--light)}.sl__toggle input:checked + span::after{transform:translateX(16px)}
.sl__toggle input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.sl__count{margin-left:auto;font:600 12px var(--font-mono);opacity:.6}
.sl__status{margin:8px 0 0;min-height:1.2em;font:600 12px var(--font-mono);opacity:.7}
.fc{border:3px solid var(--ink);border-radius:14px;background:#0b0a10;color:#F1EEF8;padding:18px 18px 16px}
:root.is-dark .fc{border-color:#2E2A3F;box-shadow:inset 0 0 0 2px #1e1b2a}
.fc__head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.fc__k{margin:0;font:800 20px var(--font-display);font-stretch:120%;letter-spacing:.04em;text-transform:uppercase;color:#ffd34d;text-shadow:0 0 12px rgba(255,211,77,.45)}
.fc__tabs{display:flex;gap:3px;flex-wrap:wrap}.fc__tabs button{border:0;border-radius:6px;padding:5px 8px;background:#1e1b2a;color:#8e889f;font:600 10.5px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.fc__tabs button[aria-pressed="true"]{background:var(--light-d);color:#14121B;box-shadow:0 0 12px -2px var(--light-d)}
.fc__intro{margin:8px 0 12px;font-size:13.5px;color:#C6C1D4}
.fc__list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fc__row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px 10px;border-radius:8px;background:#15131d}
.fc__no{font:700 16px var(--font-mono);color:#8e889f}.fc__row:first-child .fc__no{color:#ffd34d}
.fc__tx{display:grid;position:relative;min-width:0}.fc__t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fc__a{font-size:12px;color:#8e889f}
.fc__bar{position:absolute;left:0;bottom:-6px;height:2px;border-radius:2px;background:var(--light-d)}
.fc__p{font:600 13px var(--font-mono);font-style:normal;color:#7bf0c5}
.fc__wait{padding:14px;border-radius:8px;border:1px dashed rgba(241,238,248,.2);font-size:14px;color:#C6C1D4}
.fc__note{margin:12px 0 0;font-size:12px;color:#8e889f}
.fc__note:empty{display:none}
/* Haepi section: two equal halves, the stage card as tall as the text next to it */
@media (min-width:1081px){.mascot{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.mascot__stage{aspect-ratio:auto;max-width:none;height:100%;min-height:440px}.mascot__stage .haepi{width:auto;height:72%;max-width:62%;object-fit:contain}}
/* Last Train in the menu: a live station sign on wide screens, headphones with a green dot on phones */
.lt-sign{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 12px 0 6px;border-radius:10px;background:#14121B;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.08);position:relative;white-space:nowrap;font-family:var(--font-body);transition:box-shadow .2s,transform .2s}
.lt-sign:hover,.lt-sign[aria-current]{box-shadow:0 0 0 4px rgba(0,168,77,.18)}
.lt-sign:hover{transform:translateY(-1px)}
[data-theme="dark"] .lt-sign{background:#1f1a3a;border-color:rgba(255,255,255,.12)}
.lt-sign__line{flex:none;width:24px;height:24px;border-radius:50%;background:#00a84d;color:#fff;display:grid;place-items:center;font:700 13px/1 var(--font-mono)}
.lt-sign__board{display:grid;overflow:hidden;height:20px}
.lt-sign__row{display:flex;align-items:baseline;gap:7px;line-height:20px;animation:ltsignin .5s ease}
.lt-sign__k{font:500 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#8ee0b0}
.lt-sign__st{font-weight:600;font-size:14px}
.lt-sign__phones{display:none;width:18px;height:18px;color:#ff5fae}
.lt-sign__dot{display:none;width:6px;height:6px;border-radius:50%;background:#2ee08a;position:absolute;top:4px;right:4px;animation:ltsignp 2.4s ease-out infinite}
.lt-sign__tip{position:absolute;top:calc(100% + 8px);right:0;background:#14121B;color:#fff;font:500 12px/1 var(--font-body);padding:8px 10px;border-radius:8px;opacity:0;transform:translateY(-4px);transition:.2s;pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.lt-sign:hover .lt-sign__tip,.lt-sign:focus-visible .lt-sign__tip{opacity:1;transform:none}
@keyframes ltsignin{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes ltsignp{0%{box-shadow:0 0 0 0 rgba(46,224,138,.6)}80%,100%{box-shadow:0 0 0 6px rgba(46,224,138,0)}}
@media (max-width:820px){.lt-sign{width:36px;padding:0;justify-content:center;border-radius:50%}.lt-sign__line,.lt-sign__board,.lt-sign__tip{display:none}.lt-sign__phones,.lt-sign__dot{display:block}}
@media (prefers-reduced-motion:reduce){.lt-sign__row,.lt-sign__dot{animation:none}}

/* ---------- Light theme "Screentone": the manga page over the concert night ----------
   Paper and black ink stay the same for everyone; your light (or the season) colours the screentone dots,
   the main button, your seat and the lightsticks. The arena sky is grey ink with dots (arena.js). */
.hero{margin-top:calc(-1 * var(--navH, 68px))}
:root[data-theme="light"]{--bg:#F4F4F0;--bg-2:#EAEAE5;--surface:#FFFFFF;--ink:#17151B;--ink-2:#34313D;--muted:#5E5A68;--line:rgba(23,21,27,.16);--line-2:#17151B;--glass:#FFFFFF;--shadow:none;--tone:radial-gradient(circle,var(--light) 36%,transparent 40%) 0 0/7px 7px}
@media not (prefers-color-scheme: dark){:root:not([data-theme="dark"]){--bg:#F4F4F0;--bg-2:#EAEAE5;--surface:#FFFFFF;--ink:#17151B;--ink-2:#34313D;--muted:#5E5A68;--line:rgba(23,21,27,.16);--line-2:#17151B;--glass:#FFFFFF;--shadow:none;--tone:radial-gradient(circle,var(--light) 36%,transparent 40%) 0 0/7px 7px}}
html:root:not(.is-dark) .hero__title .foil-text{background:none;color:var(--ink);-webkit-text-fill-color:var(--ink);animation:none}
html:root:not(.is-dark) .hero__shade{background:linear-gradient(0deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 78%,transparent) 12%,color-mix(in srgb,var(--bg) 55%,transparent) 30%,transparent 50%)}
@media (min-width:821px){html:root:not(.is-dark) .hero__shade{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 42%,transparent) 0%,color-mix(in srgb,var(--bg) 22%,transparent) 32%,transparent 52%),linear-gradient(0deg,var(--bg) 0%,transparent 18%)}}
html:root:not(.is-dark) .nav:not(.is-scrolled){background:none}
html:root:not(.is-dark) .nav.is-scrolled{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:2px solid var(--ink)}
/* ink: buttons, pills and cards get a black outline instead of a soft shadow */
a.btn--light,.article a.btn--light{color:var(--on-light);text-decoration:none}
html:root:not(.is-dark) .btn--light{border:2px solid var(--ink);box-shadow:none}
html:root:not(.is-dark) .btn--light:hover{transform:translateY(-2px);box-shadow:none}
html:root:not(.is-dark) .btn--ghost{background:var(--surface);border:2px solid var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
html:root:not(.is-dark) .eyebrow{background:var(--surface);border:2px solid var(--ink);border-radius:18px 18px 18px 4px;color:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
html:root:not(.is-dark) .you-tag__label{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
html:root:not(.is-dark) .you-tag__line{width:2px;opacity:1}
html:root:not(.is-dark) .panel,html:root:not(.is-dark) .ticket,html:root:not(.is-dark) .seatbar,html:root:not(.is-dark) .dock,html:root:not(.is-dark) .lab,html:root:not(.is-dark) .mascot__stage,html:root:not(.is-dark) .reader__quiz{border:2px solid var(--ink);box-shadow:none}
html:root:not(.is-dark) .chip,html:root:not(.is-dark) .seat-chip,html:root:not(.is-dark) .toggle{border-color:var(--ink)}
html:root:not(.is-dark) .ticket__stub,html:root:not(.is-dark) .ticket-q__stub{background:var(--tone),var(--surface)}
html:root:not(.is-dark) .story .cover{box-shadow:none;outline:2px solid var(--ink);outline-offset:-2px}
html:root:not(.is-dark) .story:hover .cover{box-shadow:none}
/* screentone instead of glow: the soft colour clouds become a field of dots in your light */
html:root:not(.is-dark) .ambient::before,html:root:not(.is-dark) .page-amb::after,html:root:not(.is-dark) #about::before,html:root:not(.is-dark) .foot::before{display:none}
html:root:not(.is-dark) .ambient::after{inset:0;opacity:.55;background:var(--tone);-webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.6) 14%,transparent 34%);mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.6) 14%,transparent 34%)}
html:root:not(.is-dark) #about::after{opacity:.35;background:var(--tone)}
html:root:not(.is-dark) .page-amb::before{opacity:.26;background:var(--tone);-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.85),rgba(0,0,0,.5) 22%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.5) 78%,rgba(0,0,0,.85));mask-image:linear-gradient(to right,rgba(0,0,0,.85),rgba(0,0,0,.5) 22%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.5) 78%,rgba(0,0,0,.85))}
@media (max-width:820px){html:root:not(.is-dark) .page-amb::before{opacity:.2}}
html:root:not(.is-dark) .foot{border-top:2px solid var(--ink)}
html:root:not(.is-dark) .foot::after{opacity:.4;background:var(--tone)}
html:root:not(.is-dark) .foot__big{background:none;color:var(--ink);-webkit-text-fill-color:var(--ink)}
html:root:not(.is-dark) main a:not(.btn):not(.logo){color:var(--accent);text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
html:root:not(.is-dark) .grain{display:none}
html:root:not(.is-dark) .hero__lede{text-shadow:0 0 3px var(--bg),0 0 10px var(--bg),0 0 18px color-mix(in srgb,var(--bg) 70%,transparent)}
/* the big headings: a misregistered second ink in your light, like a riso print (the one hard shadow in the light theme) */
html:root:not(.is-dark){--ink2:color-mix(in oklab,var(--light) 82%,#3a2a10)}
html:root:not(.is-dark) .sec-title,html:root:not(.is-dark) .mascot__name,html:root:not(.is-dark) .foot__big{text-shadow:.045em .035em 0 var(--ink2)}
html:root:not(.is-dark) .hero__title{text-shadow:.045em .035em 0 var(--ink2),0 0 10px var(--bg),0 0 18px color-mix(in srgb,var(--bg) 70%,transparent)}
html:root:not(.is-dark) .logo .dash,html:root:not(.is-dark) .foot__big .dash{color:var(--accent);-webkit-text-fill-color:var(--accent)}

.intro__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.intro__text p{font-size:17.5px;color:var(--ink-2);max-width:60ch}
.intro__text p + p{margin-top:14px}
.intro__links{display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:600}
.intro__links a{color:var(--accent);text-underline-offset:3px}
.foot__links{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;margin-top:10px}
#binder,#seat,#acctPanel,#setlist,#settings,#seatSave,#seatDel{scroll-margin-top:96px}
.foot__links a{color:var(--ink-2)}
.foot__small a{color:var(--ink-2);text-underline-offset:3px}
@media (max-width:820px){.intro__in{grid-template-columns:minmax(0,1fr)}}
.lb-head{align-items:center}
.nowrap{white-space:nowrap}
.field__row{display:flex;gap:10px;align-items:stretch}
.field__row input{flex:1;min-width:0}
.field__row .btn{height:auto;min-height:44px;padding-inline:20px}
.field__row .btn:disabled{opacity:.55;cursor:default}
/* Save your seat: e-mail and code fields equally wide, whatever the button says (Save, Send code, Confirm) */
#account .field__row .btn{flex:0 0 124px;justify-content:center}
.field__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.seat__left{position:static}
@media (min-width:1081px){.seat__grid{position:sticky;top:96px}}
.seat__tier{margin-top:-8px}
.account__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.account__state{color:var(--muted)}
.account.is-saved .account__state{color:var(--accent)}
.account__switch{display:flex;gap:18px;flex-wrap:wrap}
.name__view{line-height:1.6}
/* delete my seat: quiet until asked, then one clear red button */
.seatdel{padding-top:18px;border-top:1px solid var(--line);scroll-margin-top:120px}
.seatdel [hidden]{display:none!important}
.seatdel__confirm{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}
.btn.seatdel__yes{background:var(--bad,#E5484D);color:#fff;border-color:transparent;min-height:44px;height:auto;padding-inline:20px}
.btn.seatdel__yes:disabled{opacity:.55;cursor:default}
.claim{margin:18px 0 6px;padding:16px;border:1px solid color-mix(in srgb,var(--light) 45%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--light) 8%,transparent)}
.claim label{color:var(--ink)}
.claim__done{margin:14px 0 4px;color:var(--ink-2)}
.claim__done b{color:var(--ink)}
.quiz__note{margin-top:14px;font-size:13.5px;color:var(--muted)}
.howplay{margin:0 0 20px;padding:0;list-style:none;counter-reset:hp;display:grid;gap:10px}
.howplay li{counter-increment:hp;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;color:var(--ink-2);line-height:1.5}
.howplay li::before{content:counter(hp);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 13px/1 var(--font-mono);background:color-mix(in srgb,var(--light) 22%,transparent);color:var(--ink)}
.howplay b{color:var(--ink)}
@media (max-width:720px){.quiz__haepi{display:none}}
.lb-claim{margin-top:14px}
.lb-claim + .side__line{margin-top:10px}
.name__view b{color:var(--ink);font-weight:600}
.name__view .linkbtn{margin-left:4px}
.seat__left [hidden]{display:none!important}
.account [hidden]{display:none!important}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.howto{margin-top:28px;border:1px solid var(--line);border-radius:22px;background:color-mix(in oklab,var(--surface) 70%,transparent);scroll-margin-top:96px}
.howto summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 24px}
.howto summary::-webkit-details-marker{display:none}
.howto summary .kicker{margin:0}
.howto__open{font-family:var(--font-display);font-size:26px;line-height:1;color:var(--accent);transition:transform .3s var(--ease)}
.howto[open] .howto__open{transform:rotate(45deg)}
.howto__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 24px 24px}
.howto__card{border-radius:16px;background:var(--surface);border:1px solid var(--line);padding:18px 20px}
.howto__card--wide{grid-column:1/-1}
.howto__card h3{font-family:var(--font-display);font-weight:720;font-size:19px;margin:0 0 6px}
.howto__card p{font-size:15px;color:var(--ink-2);margin:0;max-width:72ch}
.tiers{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;counter-reset:t}
.tiers li{display:grid;grid-template-columns:120px minmax(0,1fr) 70px 90px;gap:12px;align-items:center;padding:9px 12px;border-radius:10px;background:color-mix(in oklab,var(--light) calc(var(--i,0)*5% + 4%),transparent);font-size:14.5px}
.tiers li:nth-child(1){--i:0}.tiers li:nth-child(2){--i:1}.tiers li:nth-child(3){--i:2}.tiers li:nth-child(4){--i:3}.tiers li:nth-child(5){--i:4}
.tiers span{color:var(--ink-2)}
.tiers__pts{font-family:var(--font-mono);font-size:12.5px;text-align:right}
.tiers__holo{font-family:var(--font-mono);font-size:12.5px;text-align:right;color:var(--accent)!important}
.binder__odds a,#tTier + a{color:var(--accent);text-underline-offset:3px}
@media (max-width:640px){.howto__grid{grid-template-columns:minmax(0,1fr);padding:0 16px 16px}.howto summary{padding:16px}.tiers li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'n p' 'd h';row-gap:2px}.tiers li b{grid-area:n}.tiers li span:nth-child(2){grid-area:d;font-size:13px}.tiers__pts{grid-area:p}.tiers__holo{grid-area:h}}
.foot__links--small{font-size:13px;margin-top:6px}
.foot__links--small a{color:var(--muted)}
/* laptop and pc: under the big name one row, the line about the site on the left, the links on the right */
@media (min-width:901px){
  .foot__in > div{flex:1 1 100%;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;row-gap:8px;align-items:start}
  .foot__in > div > .foot__small{grid-row:1 / span 2;margin:0;max-width:none;padding-top:1px}
  .foot__in > div > .foot__links{justify-content:flex-end;margin-top:0}
}
/* phones: the footer centred, the links in tidy rows of three */
@media (max-width:640px){
  .foot__in{flex-direction:column;align-items:center;text-align:center;gap:18px}
  .foot__small{margin-inline:auto}
  .foot__links{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:12px 24px;margin-top:16px}
  .foot__links.foot__links--small{margin-top:12px;gap:10px 24px;grid-template-columns:repeat(2,auto)}
  .is-app .foot__links.foot__links--small{grid-template-columns:repeat(3,auto)}
}
.intro__title{font-size:clamp(34px,4.4vw,64px)}
/* the dock in the arena, folded, on wide screens: as wide as what is in it (your light, the mode and three icons), at most
   the 348px of the open console. No width animation: animating to and from "auto" overshoots to the full column. */
@media (min-width:821px){
  .dock[data-open="false"]{width:auto;max-width:min(100%,348px);grid-template-columns:minmax(0,auto) auto}
  .dock[data-open="false"] .dock__label--top{padding-right:14px}
}
/* phones: the folded dock fits its content too, lined up with the text and buttons above it; open it is full width */
@media (max-width:820px){
  .dock[data-open="false"]{justify-self:start;width:auto;max-width:100%;grid-template-columns:minmax(0,auto) auto}
  .dock[data-open="false"] .dock__label--top{padding-right:14px}
}
/* Your seat: the block under the heading that says which seat you play with and how to keep it */
.seatsave{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3vw,40px);align-items:start;margin:0 0 clamp(28px,4vw,44px);padding:clamp(20px,2.4vw,28px);border-radius:22px;background:var(--surface);border:1px solid color-mix(in srgb,var(--light) 40%,var(--line));box-shadow:var(--shadow);scroll-margin-top:110px}
.seatsave.is-saved{border-color:var(--line)}
.seatsave__state{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.seatsave__dot{width:12px;height:12px;border-radius:50%;flex:none;border:2px solid var(--ink-2)}
.seatsave.is-named .seatsave__dot{border:0;background:var(--light);box-shadow:0 0 10px -1px var(--light)}
.seatsave.is-saved .seatsave__dot{border:0;background:#2ee08a;box-shadow:0 0 10px -1px #2ee08a}
.seatsave__title{font-family:var(--font-display);font-weight:720;font-size:clamp(22px,2.2vw,28px);line-height:1.15;margin:0 0 10px}
.seatsave__text{margin:0 0 18px;color:var(--ink-2);font-size:16px;line-height:1.55;max-width:56ch}
.seatsave__steps{margin:0}
.seatsave__why{margin-top:16px;font-size:14px;color:var(--ink-2)}
.seatsave__why summary{cursor:pointer;color:var(--ink);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:6px}
.seatsave__why summary::-webkit-details-marker{display:none}
.seatsave__why summary::before{content:"+";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--line-2);font-size:13px;line-height:1;color:var(--accent);transition:transform .2s}
.seatsave__why[open] summary::before{transform:rotate(45deg)}
.seatsave__why p{margin:8px 0 0;line-height:1.55;max-width:58ch}
.seatsave.is-saved .seatsave__why{display:none}
.seatsave__forms{display:grid;gap:26px;align-self:center;min-width:0}
.seatsave__forms [hidden]{display:none!important}
.field__opt{margin-left:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
#seatForm .field__row .btn{flex:0 0 124px;justify-content:center}
#account .field__row + .field__row{margin-top:10px}
.account__go{margin:14px 0 0}
#account .account__head + .account__text:empty + .acc__sub{margin-top:14px}
.account__go .btn{min-width:124px;justify-content:center}
#account .acc__sub{display:block;margin:12px 0 6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
#account .acc__sub:first-of-type{margin-top:0}
@media (max-width:640px){#seatForm .field__row .btn{flex-basis:96px}}
.seatsave [hidden]{display:none!important}
@media (max-width:900px){.seatsave{grid-template-columns:minmax(0,1fr)}}
/* a saved seat: a short block, so the quiz stays near the top for regular players */
.seatsave.is-saved{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;padding-block:16px}
.seatsave.is-saved .seatsave__title{display:none}
.seatsave.is-saved .seatsave__text{margin:0;font-size:14.5px}
@media (max-width:900px){.seatsave.is-saved{grid-template-columns:minmax(0,1fr)}}
/* The Daily, two columns that end level: left the ticket with the rules under it, right the account (once signed in),
   streak, countdown and board. On narrow screens: ticket, sidebar, then the rules. */
.daily__main{display:grid;gap:20px;min-width:0}
.lb__gap{display:block!important;text-align:center;color:var(--muted);letter-spacing:.3em;padding:2px 0 6px!important;border-top:0!important;font-size:13px}
.lb-more{margin:10px 0 0}
.lb-more:has(> [hidden]){display:none}
.daily__main .howto{margin-top:0}
/* wide screens: both columns end on the same line. The ticket grows when the sidebar is taller, the board grows when the ticket is */
@media (min-width:1081px){
  .daily{align-items:stretch}
  .daily__main{grid-template-rows:minmax(0,1fr) auto}
  .daily > .side{display:flex;flex-direction:column;gap:20px}
  .daily > .side > .panel:last-child{flex:1 1 auto}
}
.acct .panel__label{margin-bottom:10px}
.acct__ok{display:inline-flex;align-items:center;gap:7px;color:#2ee08a}
.acct__ok i{width:9px;height:9px;border-radius:50%;background:#2ee08a;box-shadow:0 0 8px -1px #2ee08a}
.acct__name{margin:0 0 4px;font-family:var(--font-display);font-weight:720;font-size:clamp(20px,1.8vw,24px);line-height:1.2;overflow-wrap:anywhere}
.acct__mail{margin:0 0 12px;font-size:13.5px;color:var(--ink-2)}
.seatsave__acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0;font-size:14px}
.seatsave__lock{color:var(--ink-2);font-size:13px}
.seatsave__lock:empty{display:none}
.acct #seatForm{margin-top:4px}
.acct [hidden]{display:none!important}
@media (max-width:1080px){
  .daily__main{display:contents}
  .daily__main .ticket-q{order:1}.daily > .side{order:2}.daily__main .howto{order:3}
  .side .panel:last-child{grid-column:auto}
  .side:has(#acctPanel[hidden]) .panel:last-child{grid-column:1/-1}
}
/* phones: the two points stay, they are the whole explanation */
@media (max-width:640px){.seatsave__text{margin-bottom:6px;font-size:15px}#account .field__row .btn{flex-basis:96px}}
.account__text:empty{display:none}
.seatsave__text:empty{display:none}
/* the account label in the menu */
.me-chip{display:inline-flex;align-items:center;gap:8px;height:36px;max-width:220px;padding:0 12px 0 11px;border-radius:10px;border:1px solid var(--line-2);color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap;position:relative;transition:border-color .2s,transform .2s}
.me-chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.me-chip__dot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--light);box-shadow:0 0 10px -1px var(--light)}
.me-chip__name{overflow:hidden;text-overflow:ellipsis;min-width:0}
.me-chip__ok{display:none;width:14px;height:14px;flex:none;color:#2ee08a}
.me-chip.is-saved .me-chip__ok{display:block}
.me-chip.is-guest .me-chip__name{color:var(--ink-2);font-weight:500}
.me-chip.is-guest .me-chip__dot{background:transparent;box-shadow:none;border:2px solid var(--ink-2);width:11px;height:11px}
.me-chip__tip{position:absolute;top:calc(100% + 8px);right:0;background:#14121B;color:#fff;font:500 12px/1 var(--font-body);padding:8px 10px;border-radius:8px;opacity:0;transform:translateY(-4px);transition:.2s;pointer-events:none;white-space:nowrap;z-index:5}
.me-chip:hover .me-chip__tip,.me-chip:focus-visible .me-chip__tip{opacity:1;transform:none}
@media (max-width:820px){
  .me-chip{width:36px;padding:0;justify-content:center;border-radius:50%}
  .me-chip__name,.me-chip__tip{display:none}
  .me-chip__dot{width:14px;height:14px}
  .me-chip.is-guest .me-chip__dot{width:13px;height:13px}
  .me-chip.is-saved .me-chip__ok{position:absolute;right:-3px;top:-3px;width:15px;height:15px;padding:2px;border-radius:50%;background:var(--bg);color:#2ee08a}
}
/* wide screens: a little more shade behind the hero text, the arena on the right stays as bright (phones keep their own shade) */
@media (min-width:821px){
  .hero__shade{background:linear-gradient(90deg,var(--shade-1) 0%,var(--shade-1) 26%,color-mix(in srgb,var(--bg) 45%,transparent) 44%,transparent 66%),linear-gradient(0deg,var(--bg) 0%,transparent 22%)}
}
/* homepage below the arena: the light of the arena spills down onto the page */
#about{position:relative;isolation:isolate}
#about::before{content:"";position:absolute;left:0;right:0;top:0;height:min(720px,90vh);z-index:-1;pointer-events:none;
  background:radial-gradient(55% 75% at 15% 0%,color-mix(in srgb,var(--light) 20%,transparent),transparent 70%),radial-gradient(40% 60% at 90% 35%,color-mix(in srgb,var(--light) 10%,transparent),transparent 70%)}
#about::after{content:"";position:absolute;left:0;right:0;top:0;height:min(520px,70vh);z-index:-1;pointer-events:none;opacity:.22;
  background:radial-gradient(circle,color-mix(in srgb,var(--light) 75%,#fff) 1px,transparent 1.6px) 0 0/18px 16px;
  -webkit-mask-image:radial-gradient(70% 90% at 20% 0%,#000 10%,transparent 70%);mask-image:radial-gradient(70% 90% at 20% 0%,#000 10%,transparent 70%)}
:root:not(.is-dark) #about::before{opacity:.55}
:root:not(.is-dark) #about::after{opacity:.14}
.article__body > p.privacy__note::first-letter{all:unset}
.seg--sm{padding:3px;border-radius:10px;gap:2px}
.seg--sm button{height:26px;padding:0 9px;font-size:11.5px;letter-spacing:0;text-transform:none;font-family:var(--font-body,inherit)}
html{scroll-behavior:auto}
.nav__links a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--light);text-decoration-thickness:2px;text-underline-offset:8px}
/* own pages: the first section starts close under the menu (the ambient glow div comes first, so :first-child alone never matched) */
.page-main > .section:first-child,.page-main > .ambient + .section{padding-top:clamp(24px,3vw,40px)}
.page-main > .ambient + #daily .sec-head{margin-bottom:clamp(20px,2.4vw,32px)}
/* own pages, laptop and pc: the page title over the full width (a title that does not fit breaks onto a second line); the small note on the right sits next to the intro */
@media (min-width:821px){
  .page-main > .ambient + .section .sec-head{grid-template-columns:minmax(0,1fr) auto;align-items:end;row-gap:0}
  .page-main > .ambient + .section .sec-head > div:first-child{display:contents}
  .page-main > .ambient + .section .sec-head .kicker{grid-column:1 / -1}
  .page-main > .ambient + .section .sec-head .sec-title{grid-column:1 / -1;text-wrap:balance;font-size:clamp(38px,6.2vw,82px)}
  .page-main > .ambient + .section .sec-head .sec-lede{grid-column:1}
  .page-main > .ambient + .section .sec-head .sec-head__aside{grid-column:2;align-self:end}
  /* no intro under the title (Lightsticks): the note stays on the title's row */
  .page-main > .ambient + .section .sec-head:not(:has(.sec-lede)) .sec-title{grid-column:1}
  .page-main > .ambient + .section .sec-head:not(:has(.sec-lede)) .sec-head__aside{grid-row:2;padding-bottom:.6em}
}
@media (max-width:640px){.page-main > .ambient + .section{padding-top:20px}}
/* one distance between the menu and the first block on every page: stories, articles, rules and privacy pages too */
.page-amb > .stories-page,.page-amb > .article{padding-top:clamp(24px,3vw,40px)}
@media (max-width:640px){.page-amb > .stories-page,.page-amb > .article{padding-top:20px}}
/* own pages: sections follow each other closely, the big homepage spacing is not needed */
.page-main > .section:not(:last-child){padding-bottom:clamp(40px,5vw,64px)}
.page-main > .section + .section{padding-top:clamp(40px,5vw,64px)}
.enc__links .enc__soon{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px;border-radius:14px;border:1px dashed var(--line-2);font-weight:600;font-size:14px;color:var(--ink-2)}
.enc__soon small{font-family:var(--font-mono);font-weight:400;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
/* stage glow: the arena's atmosphere on every page except the homepage */
.page-amb{position:relative;isolation:isolate}
.ambient{position:absolute;left:0;right:0;top:-160px;height:min(1242px,calc(125vh + 92px));z-index:-1;pointer-events:none;overflow:hidden;--a1:var(--c1,#6C4DFF);--a2:var(--c2,#1A1240)}
.ambient::before,.ambient::after{content:"";position:absolute;inset:0}
.ambient::before{inset:-6% -8%}
.ambient::before{background:
  radial-gradient(55% 48% at 50% -4%,color-mix(in srgb,var(--a1) 42%,transparent),transparent 72%),
  radial-gradient(34% 36% at 88% 14%,color-mix(in srgb,var(--light) 26%,transparent),transparent 70%),
  radial-gradient(36% 38% at 8% 30%,color-mix(in srgb,var(--a1) 22%,transparent),transparent 72%),
  radial-gradient(70% 40% at 50% 60%,color-mix(in srgb,var(--a2) 55%,transparent),transparent 75%);
  -webkit-mask-image:linear-gradient(to bottom,#000 35%,transparent 100%);mask-image:linear-gradient(to bottom,#000 35%,transparent 100%);
  animation:ambDrift 22s ease-in-out infinite alternate}
.ambient::after{background:radial-gradient(circle,color-mix(in srgb,var(--light) 75%,#fff) 1px,transparent 1.6px) 0 0/18px 16px;opacity:.28;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 0%,#000 10%,transparent 70%);mask-image:radial-gradient(80% 60% at 50% 0%,#000 10%,transparent 70%)}
@keyframes ambDrift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,1.5%,0) scale(1.06)}}
:root:not(.is-dark) .ambient::before{background:
  radial-gradient(60% 50% at 50% -6%,color-mix(in srgb,var(--light) 46%,transparent),transparent 72%),
  radial-gradient(38% 40% at 92% 12%,color-mix(in srgb,#ffb27a 40%,transparent),transparent 70%),
  radial-gradient(40% 42% at 4% 26%,color-mix(in srgb,#7fb2ff 34%,transparent),transparent 72%)}
:root:not(.is-dark) .ambient::after{opacity:.32;background:radial-gradient(circle,var(--light) 1px,transparent 1.6px) 0 0/18px 16px}
@media (prefers-reduced-motion:reduce){.ambient::before{animation:none}}
/* while scrolling: soft light and dots along the sides, the text column itself stays calm */
.page-amb::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(28% 55% at 0% 55%,color-mix(in srgb,var(--c1,var(--light)) 16%,transparent),transparent 70%),radial-gradient(28% 55% at 100% 45%,color-mix(in srgb,var(--light) 13%,transparent),transparent 70%),radial-gradient(circle,color-mix(in srgb,var(--light) 70%,#fff) 1px,transparent 1.6px) 0 0/18px 16px;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.9),rgba(0,0,0,.15) 24%,transparent 34%,transparent 66%,rgba(0,0,0,.15) 76%,rgba(0,0,0,.9));mask-image:linear-gradient(to right,rgba(0,0,0,.9),rgba(0,0,0,.15) 24%,transparent 34%,transparent 66%,rgba(0,0,0,.15) 76%,rgba(0,0,0,.9));opacity:.55}
:root:not(.is-dark) .page-amb::before{opacity:.3}
@media (max-width:820px){.page-amb::before{opacity:.25}}
/* ...and further down: a second glow towards the bottom of the page */
.page-amb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(1000px,90vh);z-index:-1;pointer-events:none;
  background:radial-gradient(55% 60% at 80% 100%,color-mix(in srgb,var(--light) 13%,transparent),transparent 70%),radial-gradient(45% 50% at 10% 85%,color-mix(in srgb,var(--c1,#6C4DFF) 12%,transparent),transparent 70%)}
/* story covers glow in their own colour */
.story .cover{transition:transform .5s var(--ease),box-shadow .5s var(--ease);box-shadow:0 34px 70px -40px color-mix(in srgb,var(--c1) 75%,transparent)}
.story:hover .cover{transform:translateY(-4px);box-shadow:0 46px 90px -36px color-mix(in srgb,var(--c1) 90%,transparent)}
/* footer: the arena floor, lit from below */
.foot{position:relative;isolation:isolate;overflow:hidden}
.foot::before,.foot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.foot::before{background:radial-gradient(60% 110% at 25% 125%,color-mix(in srgb,var(--light) 30%,transparent),transparent 70%),radial-gradient(45% 90% at 90% 120%,color-mix(in srgb,var(--light) 16%,transparent),transparent 70%)}
.foot::after{background:radial-gradient(circle,color-mix(in srgb,var(--light) 80%,#fff) 1px,transparent 1.6px) 0 0/18px 16px;opacity:.35;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 75%);mask-image:linear-gradient(to top,#000 0%,transparent 75%)}
.foot__big{background:linear-gradient(180deg,var(--ink) 45%,color-mix(in srgb,var(--light) 75%,var(--ink)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-block:.18em .08em;margin-block:-.18em -.08em}
/* the gradient only paints inside the box: the padding makes room for the tall f and the descender of p */
:root:not(.is-dark) .foot::before{opacity:.6}
:root:not(.is-dark) .foot::after{opacity:.18;background:radial-gradient(circle,var(--light) 1px,transparent 1.6px) 0 0/18px 16px}
/* small screens: the menu becomes a scrollable row under the logo instead of disappearing */
@media (max-width:1080px){
  .nav__in{flex-wrap:wrap;height:auto;row-gap:0;padding-block:12px 0}
  .nav__links{display:flex !important;order:3;width:100%;overflow-x:auto;gap:22px;padding:10px 0 12px;white-space:nowrap;scrollbar-width:none}
  .nav__links::-webkit-scrollbar{display:none}
  .nav.is-scrolled,.nav:not(.is-scrolled) .nav__links{border-color:var(--line)}
}
@media (max-width:640px){.nav__actions .btn{display:none}.nav__links{gap:14px;font-size:14px}}
/* narrow phones (many Android phones are 360px wide): the whole menu, Get the app included, fits without scrolling */
.cta-short{display:none}
/* Lightsticks: the first section has its own background colour; let the dotted background show through at the top,
   as on the other pages, and fade into the section colour below the page title */
.page-main > .ambient + .section--alt{background:linear-gradient(to bottom,transparent 0,transparent 300px,var(--bg-2) 620px)}
/* phones: both hero buttons on one row (the played state uses its short label there) */
@media (max-width:640px){.hero__ctas{flex-wrap:nowrap}.hero__ctas .btn{white-space:nowrap;padding-inline:20px}.cta-long{display:none}.cta-short{display:inline}}
@media (max-width:400px){.nav__links{gap:10px;font-size:13.5px}.nav__in{column-gap:12px}.nav__actions{gap:6px}.logo svg{margin-right:8px}}
/* the logo scales with the screen below 420px, so logo and buttons share one row on every phone, signed in or not */
@media (max-width:420px){.logo{font-size:clamp(15px,4.5vw,19px)}.nav__actions{flex-shrink:0}}