/* ═══════════════════════════════════════════════════════════════════
   VibeJam v2 · 全息生成室 Holo Studio — spec-holo.md
   tokens · shell · stage · card + foil · home conveyor · CSS fallback ·
   views · dialogs · twin · compact · tablet · phone · landscape · reduced motion
   ═══════════════════════════════════════════════════════════════════ */
@property --step { syntax: "<integer>"; inherits: true; initial-value: 18; }

:root {
  --ink-0: #07050B; --ink-1: #0F0B16; --ink-2: #171121; --ink-3: #211830; --card: #0B0911;
  --line: rgba(246,241,250,.09); --line-2: rgba(246,241,250,.16);
  --fg: #F6F1FA; --fg-2: #B8AEC6; --fg-3: #7D7290;
  --pink: #FF3D9A; --pink-hi: #FF8CC6; --violet: #9D5CFF; --violet-hi: #C9A6FF; --blue: #5B7CFF; --signal: #4DFFB8; --gold: #FFD27A;
  --grad: linear-gradient(100deg, #FF3D9A 0%, #D447F0 42%, #9D5CFF 72%, #5B7CFF 100%);
  --holo: linear-gradient(115deg, #FF3D9A, #C26BFF 25%, #5B7CFF 50%, #4DFFB8 70%, #FF8CC6 85%, #FF3D9A);
  --glow-pink: 0 0 0 1px rgba(255,61,154,.45), 0 0 28px rgba(255,61,154,.30);
  --glow-violet: 0 0 0 1px rgba(157,92,255,.45), 0 0 32px rgba(157,92,255,.28);
  --disp: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --num: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "PingFang SC", "Microsoft YaHei", monospace;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --top: 56px; --bot: 64px; --folio: 32px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}

/* ─────────────── base ─────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink-0); color: var(--fg); }
body { font: 15px/1.7 var(--body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
a, button, summary { touch-action: manipulation; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--pink-hi); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
::selection { background: rgba(255,61,154,.35); color: #fff; }
.num, .hstats b, .stamp, .lstats { font-variant-numeric: tabular-nums; }

/* ─────────────── shell (phone-first) ─────────────── */
.app {
  position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: calc(var(--top) + var(--sat)) minmax(0, 1fr) calc(var(--bot) + var(--sab));
}
.top {
  grid-row: 1; grid-column: 1; position: relative; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: var(--sat) max(14px, var(--sar)) 0 max(14px, var(--sal));
  background: var(--ink-0); border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin-right: auto; padding: 8px 0; }
.logo b { font: 800 20px/1 var(--num); letter-spacing: -.025em; }
.logo .tag { font: 500 11px/1 var(--mono); color: var(--fg-2); letter-spacing: .04em; white-space: nowrap; }
.logo .tl { display: none; }
.logo .ts { display: none; }
.pill { display: none; }
.topr { display: flex; align-items: center; gap: 10px; flex: none; }
.top .online { display: none; }
.online { font: 500 12px/1 var(--mono); color: var(--fg-2); align-items: center; gap: 8px; white-space: nowrap; letter-spacing: .02em; }
.ldot { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); color: var(--signal); flex: none; }
.ldot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; animation: ping 2.4s var(--ease) 3 both; }
.ldot.pink { background: var(--pink); color: var(--pink); }
@keyframes ping { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(3.2); opacity: 0; } }
.qbtn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); font: 600 16px/1 var(--mono); color: var(--fg); flex: none; transition: background .16s, border-color .16s; }
.qbtn:hover { background: var(--ink-2); border-color: rgba(246,241,250,.3); }
.cta { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--grad); color: #07050B; font: 700 14px/1 var(--body); white-space: nowrap; flex: none; transition: transform .16s var(--ease), box-shadow .2s; }
.cta:hover { box-shadow: var(--glow-pink); }
.cta:active, .btn:active, .ib:active { transform: scale(.98); }
.cta .arr { display: none; }

.stage { grid-row: 2; grid-column: 1; position: relative; overflow: hidden; isolation: isolate; }
.stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 55% at 50% 52%, rgba(157,92,255,.16), transparent 70%), radial-gradient(40% 40% at 50% 60%, rgba(255,61,154,.10), transparent 70%);
}
.folio { display: none; }
.tabs {
  grid-row: 3; grid-column: 1; position: relative; z-index: 20;
  display: flex; align-items: stretch; justify-content: space-around;
  padding: 0 max(4px, var(--sar)) var(--sab) max(4px, var(--sal));
  background: var(--ink-1); border-top: 1px solid var(--line);
}
.tabs a { position: relative; flex: 1 1 0; min-width: 56px; height: var(--bot); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--fg-2); font: 500 11px/1.2 var(--body); }
.tabs a .ic { width: 22px; height: 22px; }
.tabs a[aria-current="page"] { color: var(--pink-hi); }
.tabs a[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--holo); }
.tabs .rq { display: none; }
.fcta { display: none; }

/* views */
.view { position: absolute; inset: 0; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 24px; scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent; }
.view.is-leaving { opacity: 0; transition: opacity .12s linear; }
.view.is-entering { animation: vin .16s linear both; }
.view.is-entering [data-gen] { animation: genin .32s var(--ease) both; animation-delay: calc(var(--gi, 0) * 30ms); }
@keyframes vin { from { opacity: 0; } to { opacity: 1; } }
@keyframes genin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.veil { position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: 0; background: center / cover; mix-blend-mode: screen; }
html.vz .veil { background-image: url(media/gen/noise-s5.webp); }   /* lazy (§9.1): set on the first view change or the desktop idle prefetch */
.colophon { margin-top: 28px; font: 500 11.5px/1.5 var(--mono); color: var(--fg-3); letter-spacing: .02em; }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--bot) + var(--sab) + 16px); z-index: 60; translate: -50% 12px; opacity: 0; pointer-events: none; max-width: calc(100vw - 32px);
  padding: 10px 16px; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line-2); color: var(--fg); font: 500 13px/1.4 var(--mono); text-align: center;
  transition: opacity .2s var(--ease), translate .2s var(--ease); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.toast.on { opacity: 1; translate: -50% 0; }
dialog .toast { bottom: 24px; }

/* ─────────────── shared atoms ─────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 999px; font: 700 15px/1 var(--body); white-space: nowrap; transition: transform .16s var(--ease), box-shadow .2s, background .16s, border-color .16s, color .16s; }
.btn.pri { background: var(--grad); color: #07050B; }
.btn.pri:hover { box-shadow: var(--glow-pink); }
.btn.ghost { border: 1px solid var(--line-2); color: var(--fg); background: rgba(15,11,22,.5); }
.btn.ghost:hover { border-color: rgba(246,241,250,.34); background: var(--ink-2); }
.btn.sm { height: 44px; padding: 0 16px; font-size: 14px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: default; box-shadow: none; }
.btn .ic { width: 18px; height: 18px; }
.ib { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--fg); background: rgba(15,11,22,.6); flex: none; transition: background .16s, border-color .16s, transform .16s var(--ease); }
.ib:hover { background: var(--ink-2); border-color: rgba(246,241,250,.34); }
.ib .ic { width: 18px; height: 18px; stroke-width: 1.8; }
.vk { display: flex; align-items: center; gap: 8px; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.vk > i { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); flex: none; }
.view h2, .dlg h2.cname { font: 900 26px/1.25 var(--disp); letter-spacing: -.02em; }
.vsub { font: 400 14px/1.65 var(--body); color: var(--fg-2); }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--d, var(--pink)); flex: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; background: rgba(7,5,11,.72); border: 1px solid var(--line-2); font: 600 11px/1 var(--mono); letter-spacing: .06em; color: var(--fg); white-space: nowrap; }
.chipm { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-2); font: 500 12px/1 var(--mono); color: var(--fg); white-space: nowrap; background: var(--ink-2); }
.chipm .ic { width: 16px; height: 16px; }
.nzb { position: absolute; inset: 0; background: var(--ink-2) center / cover no-repeat; }
.nzb.s1 { background-image: url(media/gen/noise-s1.webp); } .nzb.s2 { background-image: url(media/gen/noise-s2.webp); }
.nzb.s3 { background-image: url(media/gen/noise-s3.webp); } .nzb.s4 { background-image: url(media/gen/noise-s4.webp); }
.nzb.s5 { background-image: url(media/gen/noise-s5.webp); } .nzb.s6 { background-image: url(media/gen/noise-s6.webp); }
.nzb.s19 { background-image: url(media/gen/noise-s19.webp); }
/* image loading convention: --ink-2 + brand noise, fades on load */
.im { position: relative; background: var(--ink-2); overflow: hidden; }
.im > img { width: 100%; height: 100%; object-fit: cover; }
.im > .nz { position: absolute; inset: 0; background: url(media/gen/noise-s5.webp) var(--nzx, 0%) var(--nzy, 0%) / 300%; transition: opacity .2s; pointer-events: none; }
.im.ld > .nz { opacity: 0; }

/* ─────────────── card + Prompt-Foil (SE2) ─────────────── */
.card { position: relative; isolation: isolate; display: block; border-radius: 18px; background: var(--card); border: 1px solid var(--line-2); overflow: hidden; }
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; z-index: 6; opacity: 0; transition: opacity .16s; pointer-events: none;
  background: var(--holo); background-size: 200% 200%; background-position: var(--px, 50%) var(--py, 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.card.is-done::before { opacity: 1; }
.card .gl, .row .gl { position: absolute; inset: 0; z-index: 7; opacity: 0; visibility: hidden; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%) 100% 0 / 300% 100% no-repeat; }
.card.glint .gl { animation: glint .6s var(--ease) 1 both; }
@keyframes glint { 0% { visibility: visible; opacity: 1; background-position: 100% 0; } 90% { opacity: 1; } 100% { visibility: hidden; opacity: 0; background-position: 0% 0; } }
.card .fx { position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 2; }
.card.is-live .fx { opacity: 1; }
.fx.foil { background: repeating-linear-gradient(115deg, #FF3D9A 0%, #C26BFF 7%, #5B7CFF 14%, #4DFFB8 21%, #FF8CC6 28%); background-size: 400% 400%; background-position: var(--px, 50%) var(--py, 50%); mix-blend-mode: normal; }
.card.is-live .fx.foil { opacity: .16; }
.fx.micro { background: var(--holo); background-size: 300% 300%; background-position: calc(100% - var(--px, 50%)) var(--py, 50%); -webkit-mask: var(--micro) 0 0 / 180px 180px; mask: var(--micro) 0 0 / 180px 180px; }
.card.is-live .fx.micro { opacity: .24; }
.fx.glare { background: radial-gradient(farthest-corner circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.28), transparent 55%); }
.card.is-live .fx.glare { opacity: .9; }
html.dodge .card.is-live .fx.foil { mix-blend-mode: color-dodge; filter: brightness(.6) contrast(1.4) saturate(1.3); opacity: .5; }
.card.is-live:not(.tile) { transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); }

/* the ONE GenCanvas */
canvas[data-gl] { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity .15s; display: block; pointer-events: none; }
canvas[data-gl].on { opacity: 1; }

/* generation window (live / detail / wip / medallion) */
.art { position: relative; display: block; overflow: hidden; background: var(--ink-2); }
.art > picture, .art > picture > img, .art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.art .final { opacity: 0; }
.art > .nz { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: transparent center / cover no-repeat; opacity: 0; }
.art > .chip, .art > .badge, .art > .slot, .art > .got, .art > .hintb, .art > .loading { z-index: 3; }
.artlink { position: absolute; inset: 0; z-index: 4; }
/* collect FLIP flyers (home.js): fixed, origin top-left so translate + scale map rect → rect; hidden while the home is hard-paused */
.flyer { position: fixed; z-index: 15; pointer-events: none; overflow: hidden; border-radius: 10px; transform-origin: 0 0; background: var(--ink-2); box-shadow: 0 18px 40px -14px rgba(0,0,0,.65); }
.flyer img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fly-off .flyer { visibility: hidden; }

/* CSS twin (cssgen.js) */
.twin { --p: 1; }
.twin > .nz { opacity: calc(1 - var(--p)); }
.twin .final { opacity: calc(var(--p) * var(--p)); filter: blur(calc((1 - var(--p)) * 6px)); }
html.lite .twin .final { filter: none; }

/* ═══════════════════════ 01 HOME · 生成传送带 ═══════════════════════ */
.v-home { --art: min(calc(100vw - 92px), 300px); --hd: 24px; padding: 0 16px 24px; }
.band { padding-top: 10px; }
.kicker { display: flex; align-items: center; gap: 8px; font: 500 12px/16px var(--mono); letter-spacing: .04em; color: var(--fg-2); white-space: nowrap; }
.kicker .en { display: none; }
.pdot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); color: var(--pink); flex: none; }
.pdot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; animation: ping 2.4s var(--ease) 3 both; }
.v-home h1 { margin-top: 6px; font: 900 30px/1.2 var(--disp); letter-spacing: -.02em; }
.v-home h1 .ph { display: block; }
.ai { font: 800 1em/1 var(--num); letter-spacing: -.02em; padding: 0 .03em; background: var(--holo); background-size: 160% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.conv { position: relative; display: flex; flex-direction: column; margin-top: 14px; }
.rail { display: none; }
.zone { position: relative; z-index: 1; min-width: 0; }
.zl { order: 2; }
.zr { order: 3; }
.livewrap { order: 1; position: relative; z-index: 1; }
.zlabel { display: flex; justify-content: space-between; align-items: center; height: 20px; font: 500 11px/20px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.zlabel span:last-child { text-transform: none; letter-spacing: .04em; }
.nextbtn { font: 500 11px/20px var(--mono); letter-spacing: .04em; color: var(--fg-2); padding: 0 2px; transition: color .16s; }
.nextbtn:hover { color: var(--pink-hi); }
.zl .zlabel, .zr .zlabel, .fan, .queue, .zl .sub, .legend2 { display: none; }

/* live card */
.live { width: calc(var(--art) + 26px); margin: 0 auto; padding: 12px; z-index: 1; box-shadow: 0 40px 90px -30px rgba(157,92,255,.45), 0 0 0 1px rgba(157,92,255,.06); }
.lhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--hd); font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--fg-2); white-space: nowrap; }
.lhead .tag { padding: 5px 9px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--fg-2); }
.lhead .dt { display: none; }
.stamp { color: var(--pink-hi); font-weight: 600; font-size: 11px; letter-spacing: .06em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.live .art, .detail .art { margin-top: 8px; width: var(--art); height: var(--art); border-radius: 10px; }
.art > .chip { position: absolute; left: 10px; bottom: 10px; }
.slot, .got { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font: 600 11px/1 var(--mono); letter-spacing: .04em; white-space: nowrap; transition: opacity .16s; }
.slot { border: 1px dashed rgba(246,241,250,.36); color: var(--fg-2); background: rgba(7,5,11,.55); }
.got { opacity: 0; color: #07050B; background: var(--signal); }
.badge { position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px); padding: 6px 9px; border-radius: 8px; background: rgba(7,5,11,.72); font: 500 11px/1.2 var(--mono); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
.hintb { position: absolute; right: 10px; top: 10px; padding: 6px 9px; border-radius: 999px; background: rgba(7,5,11,.72); border: 1px solid rgba(255,140,198,.4); font: 500 11px/1 var(--mono); color: var(--pink-hi); opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; }
.live.brush .hintb { opacity: 1; }
.ttl { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; height: 26px; }
.tt, .view h2.tt { font: 800 20px/26px var(--num); letter-spacing: -.02em; min-width: 0; overflow: hidden; overflow: clip visible; white-space: nowrap; text-overflow: ellipsis; }
.tt a { padding: 10px 0; }
.ty { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 11px/1 var(--mono); color: var(--fg-2); }
.by { height: 18px; font: 400 13px/18px var(--body); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plabel { margin-top: 8px; display: flex; align-items: center; gap: 8px; height: 14px; font: 500 11px/14px var(--mono); letter-spacing: .08em; color: var(--fg-3); }
.plabel::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.prompt { margin-top: 4px; height: 54px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font: 400 12px/18px var(--mono); color: var(--fg); overflow-wrap: anywhere; }
.prompt .rd, .prompt .tk.rd { background: linear-gradient(var(--pink), var(--pink)) 0 100% / 100% 2px no-repeat; }
.prompt .tk { background: linear-gradient(var(--pink), var(--pink)) 0 100% / 0 2px no-repeat; transition: background-size .12s linear; }
.prompt .tk.hide { opacity: 0; }
.prompt .tk.caret::after { content: ""; display: inline-block; width: .55em; height: 1.05em; margin-left: 1px; vertical-align: -.18em; background: var(--pink-hi); }
.lstats { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; height: 18px; font: 500 12px/18px var(--mono); color: var(--fg-2); }
.earn { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--pink); color: #07050B; font: 600 11.5px/1 var(--mono); opacity: 0; transform-origin: right center; }
.live.is-done .earn:not(:empty) { opacity: 1; animation: pop .2s var(--ease) both; }
@keyframes pop { from { transform: scale(.9); } to { transform: none; } }
.live .earn:empty { display: none; }

/* controls */
.ctrl { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; min-height: 44px; }
.ctrl .legend { font: 500 12px/1.45 var(--mono); color: var(--fg-3); max-width: 230px; }
.ib .i-pl { display: none; }
.ib[aria-pressed="true"] .i-pa { display: none; }
.ib[aria-pressed="true"] .i-pl { display: block; }
.ib[aria-pressed="true"] { border-color: rgba(255,140,198,.5); color: var(--pink-hi); }
.rmrow { display: none; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.strip { display: block; width: 160px; height: 40px; border-radius: 6px; background: url(media/gen/strip4-pasar.webp) 0 0 / 100% 100%; box-shadow: 0 0 0 1px var(--line-2); }
.rml { font: 500 12px/1.4 var(--mono); color: var(--fg-2); }
.btn.sm.ghost[data-once] { height: 44px; }

/* slivers (phone / tablet) */
.slivers { position: absolute; left: -16px; right: -16px; top: calc(1px + 12px + var(--hd) + 8px); height: var(--art); overflow: hidden; pointer-events: none; z-index: 0; }
.sv { position: absolute; top: 50%; width: 120px; height: 150px; margin-top: -75px; border-radius: 14px; padding: 6px; }
.sv.sl { left: 0; transform: translateX(-103px); }
.sv.sl img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.sv.sr { right: 0; transform: translateX(103px); }
.sv.sr .nzb { inset: 6px; border-radius: 9px; }

/* left/right zones below the card on phones */
.ctas { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.ctas .btn { height: 48px; padding: 0 18px; font-size: 14.5px; }
.hstats { display: flex; gap: 22px; margin-top: 18px; }
.hstats b { display: block; font: 800 26px/1 var(--num); letter-spacing: -.02em; }
.hstats span { font: 400 12px/20px var(--body); color: var(--fg-2); }
.box { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(15,11,22,.72); transition: border-color .2s, background .2s; }
.box:hover { border-color: var(--line-2); background: var(--ink-1); }
.bth { flex: none; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--ink-2); }
.bth img, .bav img { width: 100%; height: 100%; object-fit: cover; }
.bav { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--ink-2); align-self: flex-start; }
.btx { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.bk { font: 700 12.5px/18px var(--mono); letter-spacing: .06em; color: var(--pink-hi); }
.bq { font: 400 13.5px/1.6 var(--body); color: var(--fg); }
.btx small { font: 400 12px/18px var(--body); color: var(--fg-2); }

/* minis (fan / queue / ribbon / picks) */
.mini { width: 180px; padding: 8px; border-radius: 14px; }
.mini .art { position: relative; width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--ink-2); }
.mini .art img { width: 100%; height: 100%; object-fit: cover; }
.mini .mt { display: block; margin-top: 7px; font: 800 13px/18px var(--num); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.mini .mm { display: block; font: 500 11px/14px var(--mono); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; letter-spacing: .02em; }
.mini .code, .node .ncode { position: absolute; left: 5px; top: 5px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px; border-radius: 999px; background: rgba(7,5,11,.74); font: 600 10px/1 var(--mono); letter-spacing: .03em; color: var(--fg); }
.mm2 .m2m { display: inline-flex; align-items: center; gap: 5px; font: 500 10.5px/1.2 var(--mono); color: var(--fg-2); white-space: nowrap; overflow: hidden; }

/* ─── CSS fallback (§4.4): the home "generates" with no JS ─── */
@keyframes stepc { from { --step: 18; } to { --step: 30; } }
@keyframes resolve { from { opacity: 0; } to { opacity: 1; } }
@keyframes on { from { opacity: 0; } to { opacity: 1; } }
@keyframes off { to { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.gen-armed):not(.rm) .live { animation: stepc .96s steps(12, end) .9s both; }
  html:not(.gen-armed):not(.rm) .live .final { animation: resolve .96s steps(12, end) .9s both; }
  html:not(.gen-armed):not(.rm) .live .stepn { font-size: 0; }
  html:not(.gen-armed):not(.rm) .live .stepn::before { font-size: 11px; counter-reset: n var(--step); content: "STEP " counter(n) "/30"; }
  html:not(.gen-armed):not(.rm) .live::before,
  html:not(.gen-armed):not(.rm) .live [data-collected],
  html:not(.gen-armed):not(.rm) .live .earn { animation: on .16s 1.86s both; }
  html:not(.gen-armed):not(.rm) .live .slot { animation: off .16s 1.86s both; }
  html:not(.gen-armed):not(.rm) .live .gl { animation: glint .6s cubic-bezier(.2,.8,.2,1) 1.86s both; }
}
.live.is-done .final, .live.is-done [data-collected], .live.is-done::before { opacity: 1; }
.live.is-done .slot { opacity: 0; }
.card.is-done [data-collected] { opacity: 1; }
.card.is-done .slot { opacity: 0; }
html.rm .live .final { opacity: 1; }

/* ═══════════════════════ 02 WORKS ═══════════════════════ */
.v-works { display: flex; flex-direction: column; }
.whead { display: flex; flex-direction: column; gap: 12px; }
.v-works h2 { font: 900 24px/1.25 var(--disp); }
.v-works h2 .clipnum { font-size: 34px; }
.clipnum { font: 800 64px/1 var(--num); letter-spacing: -.03em; color: transparent; background: var(--clip, var(--holo)) center / cover; -webkit-background-clip: text; background-clip: text; font-variant-numeric: tabular-nums; -webkit-text-stroke: 1px rgba(246,241,250,.3); filter: brightness(1.45) saturate(1.15); }
.v-works .clipnum { --clip: url(media/micro/w-pasar.webp); }
.search { position: relative; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 4px 0 14px; border-radius: 999px; background: var(--ink-1); border: 1px solid var(--line-2); transition: border-color .16s, box-shadow .2s; }
.search:focus-within { border-color: rgba(255,140,198,.6); box-shadow: 0 0 0 3px rgba(255,61,154,.14); }
.search .ic { width: 18px; height: 18px; color: var(--fg-3); }
.search input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; color: var(--fg); font: 400 14px/1 var(--body); outline: none; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--fg-3); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search .btn { height: 44px; padding: 0 16px; font-size: 13.5px; }
.wbar { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chipf { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ink-1); font: 600 13.5px/1 var(--body); color: var(--fg-2); white-space: nowrap; transition: border-color .16s, background .16s, color .16s; }
.chipf .ic { width: 18px; height: 18px; }
.chipf b { font: 600 11.5px/1 var(--mono); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.chipf:hover { color: var(--fg); border-color: rgba(246,241,250,.3); }
.chipf[aria-current="true"] { background: var(--fg); color: #07050B; border-color: var(--fg); }
.chipf[aria-current="true"] b { color: rgba(7,5,11,.6); }
.tdesc { font: 400 13px/1.55 var(--body); color: var(--fg-2); min-width: 0; }
.tdesc .clr { margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); font: 500 12px/1.4 var(--mono); color: var(--fg); }
@media (max-width: 1179px) { .tdesc .clr { min-height: 44px; padding: 0 12px; } }
.wallbox { position: relative; margin-top: 14px; }
.wall { --t: calc((100vw - 32px - 24px) / 4); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tile { aspect-ratio: 1; border-radius: 12px; background: var(--ink-2); overflow: hidden; transform-origin: var(--ox, 50%) var(--oy, 50%); transition: scale .22s var(--ease), box-shadow .22s var(--ease); }
.tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile > .nz { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url(media/gen/noise-s5.webp) var(--nzx, 0%) var(--nzy, 0%) / 300%; opacity: 1; transition: opacity .2s; }
.tile.is-done > .nz { opacity: 0; }
.tile:not(.ld) > .nz { opacity: 1 !important; }
.wall.is-entering .tile > .nz { animation: off .36s steps(6, end) calc((var(--r) + var(--c)) * 40ms) both; }
.tile.is-noise > .nz { opacity: .85 !important; transition: opacity .24s steps(6, end); }
.tile.is-noise { pointer-events: none; }
.tile.is-noise::before { opacity: 0 !important; }
.tile .code { position: absolute; left: 6px; top: 6px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 999px; background: rgba(7,5,11,.74); font: 600 11px/1 var(--mono); letter-spacing: .03em; color: var(--fg); }
.tile .tg { position: absolute; right: 6px; top: 6px; z-index: 3; width: 22px; height: 22px; padding: 3px; border-radius: 6px; background: rgba(7,5,11,.62); color: var(--fg); }
.tile .cap { display: none; }
.tile .peek { display: none; }
.tile .best { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; z-index: 3; padding: 4px 8px; border-radius: 999px; background: var(--pink); color: #07050B; font: 600 11px/1 var(--mono); white-space: nowrap; display: none; }
.tile.is-top { box-shadow: 0 0 0 2px var(--pink), 0 0 26px rgba(255,61,154,.35); }
.tile.is-top .best { display: block; }
.ctacell { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px; border-radius: 12px; border: 1px dashed var(--line-2); background: var(--ink-1); font: 700 12.5px/1.35 var(--body); color: var(--fg); transition: border-color .2s, background .2s; }
.ctacell small { font: 500 11px/1.35 var(--mono); color: var(--pink-hi); }
.ctacell.jamc { border-style: solid; border-color: rgba(255,61,154,.35); background: linear-gradient(var(--ink-1), var(--ink-1)) padding-box; position: relative; overflow: hidden; }
.ctacell.jamc::before { content: ""; position: absolute; inset: 0; background: var(--grad); opacity: .14; pointer-events: none; }
.ctacell:hover { border-color: rgba(255,140,198,.6); }
.nomatch { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 8; width: min(420px, 92%); padding: 22px; border-radius: 16px; background: var(--ink-1); border: 1px solid var(--line-2); text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.nomatch p { font: 600 15px/1.6 var(--body); margin-bottom: 14px; }

/* ═══════════════════════ 03 NEBULA ═══════════════════════ */
.v-nebula { display: flex; flex-direction: column; }
.nl { display: flex; flex-direction: column; }
.nl h2 { margin-top: 8px; }
.nl h2 .ph { display: block; }
.nl .vsub { margin-top: 10px; }
.nl .online { display: flex; margin-top: 12px; font-size: 12.5px; }
.need { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.nl0 { font: 500 12px/1 var(--mono); color: var(--fg-3); letter-spacing: .06em; margin-right: 2px; }
.tg { height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ink-1); font: 600 13.5px/1 var(--body); color: var(--fg-2); transition: background .16s, border-color .16s, color .16s; }
.tg[aria-pressed="true"] { border-color: rgba(255,140,198,.6); background: rgba(255,61,154,.14); color: var(--fg); }
.tg[aria-pressed="true"]::after { content: " ✓"; color: var(--pink-hi); }
.mrow { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.timer { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font: 600 14px/1 var(--mono); color: var(--fg); font-variant-numeric: tabular-nums; }
.timer .ic { width: 18px; height: 18px; color: var(--fg-3); }
.mstat { min-height: 20px; margin-top: 10px; font: 500 12.5px/1.6 var(--mono); color: var(--fg-2); }
.mstat .again { margin-left: 8px; color: var(--pink-hi); padding: 10px 4px; }
.mstat .again { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; vertical-align: middle; }
.dcard { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 12px; border-radius: 16px; }
.dav { flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--ink-2); }
.dav img { width: 100%; height: 100%; object-fit: cover; }
.dtx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dq { font: 400 14px/1.6 var(--body); }
.dtx small { font: 500 12px/1.4 var(--mono); color: var(--fg-2); }
.field { position: relative; flex: none; margin-top: 18px; width: 100%; aspect-ratio: 358 / 440; border-radius: 18px; overflow: hidden; background: radial-gradient(70% 60% at 30% 35%, rgba(157,92,255,.22), transparent 70%), radial-gradient(60% 50% at 70% 65%, rgba(255,61,154,.14), transparent 70%), var(--ink-1); border: 1px solid var(--line); container-type: size; }
.nbg, .nbg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nbg img { opacity: .55; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.wires path { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 3 4; stroke-linecap: round; }
.wires path.live { stroke-dasharray: none; }
.v-deals .wires path.live { stroke: url(#wg-d); }
.v-nebula .wires path.live { stroke: url(#wg-n); }
.nodes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }   /* above the WIP card: replies are never hidden under it */
.node { pointer-events: auto; }
.node { position: absolute; left: var(--x); top: var(--y); translate: calc(-1 * var(--x)) calc(-1 * var(--y)); display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 16px; background: var(--ink-1); border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .2s; }
.node .nav { width: 40px; height: 40px; flex: none; border-radius: 10px; overflow: hidden; background: var(--ink-2); }
.node .nav img { width: 100%; height: 100%; object-fit: cover; }
.node .nn { display: flex; flex-direction: column; min-width: 0; }
.node .nn b { font: 800 13px/1.2 var(--num); white-space: nowrap; }
.node .nn span { display: none; font: 400 11px/1.3 var(--body); color: var(--fg-2); white-space: nowrap; }
.node .np { position: absolute; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--fg-3); background: var(--ink-0); top: 50%; margin-top: -4px; }
.node.is-hit { border-color: rgba(255,61,154,.7); box-shadow: 0 0 0 3px rgba(255,61,154,.18), 0 0 24px rgba(255,61,154,.25); }
.node.is-hit .np { border-color: var(--pink); background: var(--pink); }
.reply { position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0; padding: 7px 10px; border-radius: 12px; background: var(--fg); color: #07050B; font: 600 12px/1.35 var(--body); white-space: nowrap; opacity: 0; scale: .9; pointer-events: none; transition: opacity .16s var(--ease), scale .16s var(--ease); z-index: 3; }
.reply em { font-style: normal; margin-left: 6px; padding: 1px 5px; border-radius: 4px; background: rgba(7,5,11,.12); font: 600 10.5px/1.4 var(--mono); color: rgba(7,5,11,.65); }
.reply::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--fg); }
.node.below .reply { bottom: auto; top: calc(100% + 8px); }
.node.below .reply::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--fg); }
.node.is-hit .reply { opacity: 1; scale: 1; }
.node .nav { position: relative; }
.node .ncode { left: 3px; top: auto; bottom: 3px; padding: 2px 4px; font-size: 9px; }
.node.pr .np { right: -5px; } .node.pl .np { left: -5px; }
.node.pb .np { left: 50%; top: auto; bottom: -5px; margin: 0 0 0 -4px; }
.node.al .reply { left: 0; translate: 0 0; } .node.al .reply::after { left: 28px; }
.node.ar .reply { left: auto; right: 0; translate: 0 0; } .node.ar .reply::after { left: auto; right: 23px; }
.wip { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; width: 150px; padding: 8px; border-radius: 14px; }
.wip .wh { display: flex; justify-content: space-between; gap: 6px; font: 500 10.5px/1.6 var(--mono); color: var(--fg-2); letter-spacing: .02em; white-space: nowrap; }
.wip .wh .st { color: var(--pink-hi); font-weight: 600; }
.wip .art { margin-top: 6px; width: 100%; aspect-ratio: 1; border-radius: 8px; }
.wip .wt { margin-top: 7px; font: 700 13px/1.35 var(--body); }
.wip .wm { font: 500 11px/1.45 var(--mono); color: var(--fg-2); }
.wip .wm b { color: var(--pink-hi); font-weight: 600; }
.pk { position: absolute; left: 0; top: 0; z-index: 3; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 3px rgba(255,61,154,.25), 0 0 14px rgba(255,61,154,.8); offset-rotate: 0deg; pointer-events: none; }
.pk.rm { width: 28px; height: 18px; margin: -9px 0 0 -14px; border-radius: 999px; background: var(--grad); box-shadow: 0 0 16px rgba(255,61,154,.6); color: #07050B; font: 600 11px/18px var(--mono); text-align: center; font-style: normal; }

/* ═══════════════════════ 04 JAM ═══════════════════════ */
.v-jam { display: flex; flex-direction: column; }
.jl { display: grid; grid-template-areas: "k" "v" "s" "f" "c"; }
.jl .jk { grid-area: k; }
.jl .neon { grid-area: v; align-self: end; justify-self: start; z-index: 2; margin: 0 0 12px 14px; }
.jl .js1 { grid-area: s; margin-top: 14px; }
.jl .facts { grid-area: f; }
.jl .jcta { grid-area: c; margin-top: 16px; justify-self: start; }
.jl .kv { grid-area: v; margin-top: 12px; }
.neon { font: 900 64px/1 var(--disp) !important; letter-spacing: .02em !important; color: #FFE9F4; -webkit-text-stroke: 1px rgba(255,255,255,.9); text-shadow: 0 0 6px #FF8CC6, 0 0 18px #FF3D9A, 0 0 42px #FF3D9A, 0 0 80px #9D5CFF; }
.view[data-view=jam].is-entering .neon { animation: flicker .9s steps(1, end) 1; }
@keyframes flicker { 0%, 18%, 22%, 52%, 56%, 100% { opacity: 1; } 20%, 54% { opacity: .35; } }
.kv { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--ink-2); box-shadow: 0 0 0 1px var(--line); }
.kv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.kv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(7,5,11,.75)); pointer-events: none; }
.kv .nzb { z-index: 1; opacity: 0; }
.view[data-view=jam].is-entering .kv .nzb { animation: off .96s steps(12, end) both; opacity: 1; }
.kv.fallback img { content: url(media/gen/b-jam.webp); }
.facts { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
.facts > div { padding: 12px; border-radius: 12px; background: var(--ink-1); border: 1px solid var(--line); }
.facts dt { font: 500 11px/1.4 var(--mono); color: var(--fg-3); letter-spacing: .08em; }
.facts dd { margin-top: 4px; font: 500 14px/1.5 var(--body); color: var(--fg); }
.facts .fbig { font: 800 24px/1.1 var(--num); letter-spacing: -.02em; }
.facts .cd { display: block; margin-top: 2px; font: 600 14px/1.4 var(--mono); color: var(--pink-hi); font-variant-numeric: tabular-nums; }
.board { margin-top: 20px; }
.bh { display: flex; justify-content: space-between; align-items: center; height: 24px; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--fg-2); text-transform: uppercase; }
.live-tag { display: inline-flex; align-items: center; gap: 7px; padding-right: 9px; color: var(--pink-hi); font-weight: 600; }
.rows { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.row { position: relative; display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) 64px 44px; align-items: center; column-gap: 10px; height: 56px; padding: 0 0 0 10px; border-radius: 12px; background: var(--ink-1); border: 1px solid var(--line); cursor: pointer; transition: background .16s, border-color .16s; }
.row:hover { background: var(--ink-2); }
.row { overflow: hidden; }
.row.card::before { border-radius: 12px; }
.row .rk { font: 800 18px/1 var(--num); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.row.top3 .rk { background: var(--holo); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.row .rav { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--ink-2); }
.row .rav img { width: 100%; height: 100%; object-fit: cover; }
.row .rav.crop img { object-position: 66% 38%; transform: scale(1.7); }
.row .rt { min-width: 0; display: flex; flex-direction: column; }
.row .rt b { font: 800 14px/1.25 var(--num); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.row .rt b .cdg { display: inline-flex; align-items: center; gap: 4px; padding: 2px 5px; border-radius: 5px; background: var(--ink-3); font: 600 10.5px/1.2 var(--mono); color: var(--fg-2); flex: none; }
.row .rt small { font: 400 12px/1.3 var(--body); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .rt small .cand { margin-left: 6px; color: var(--pink-hi); font: 500 11px/1 var(--mono); }
.row .rm { display: none; }
.row .bar { display: none; }
.row .cnt { font: 600 14px/1 var(--mono); text-align: right; font-variant-numeric: tabular-nums; color: var(--fg); }
.row .rgo { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.row .rgo:focus-visible { outline-offset: -2px; }
.row > :not(.rgo):not(.heart):not(.gl) { pointer-events: none; }
.row .heart { position: relative; z-index: 2; }
.row .rt b .rtt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.row:not(.top3) .cand { display: none; }
.row .gl { border-radius: inherit; }
.heart { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--fg-2); transition: color .16s, background .16s; }
.heart .ic { width: 20px; height: 20px; }
.heart:hover { background: var(--ink-3); color: var(--fg); }
.heart[aria-pressed="true"] { color: var(--pink); }
.heart[aria-pressed="true"] .ic { fill: var(--pink); }
.lastrow { margin-top: 4px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; height: auto; min-height: 52px; padding: 8px 14px; border: 1px dashed var(--line-2); background: transparent; font: 600 13.5px/1.4 var(--body); color: var(--fg); grid-template-columns: none; }
.lastrow span:last-child { font: 500 12px/1.4 var(--mono); color: var(--pink-hi); }

/* ═══════════════════════ 05 DEALS ═══════════════════════ */
.v-deals { display: flex; flex-direction: column; }
.dhead h2 { margin-top: 8px; }
.dhead .vsub { margin-top: 8px; }
.graph { position: relative; margin-top: 18px; }
.gnodes { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; padding-left: 34px; }
.gn { position: relative; padding: 12px 14px; border-radius: 14px; background: var(--ink-1); border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .2s; }
.gt { font: 600 12px/1.4 var(--mono); color: var(--fg-2); letter-spacing: .04em; }
.gb { margin-top: 4px; font: 600 14px/1.45 var(--body); display: flex; align-items: center; gap: 8px; }
.gb .amt { font: 800 18px/1 var(--num); letter-spacing: -.01em; }
.gb .lk, .gb .lk2 { width: 18px; height: 18px; color: var(--fg-2); }
.gb .lk2 { display: none; color: var(--signal); }
.gn.ok .gb .lk { display: none; } .gn.ok .gb .lk2 { display: block; }
.gb.tm { font: 600 20px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.gs { font: 400 12.5px/1.5 var(--body); color: var(--fg-2); margin-top: 2px; }
.gd { display: none; margin-top: 6px; align-items: center; gap: 5px; font: 600 12px/1.3 var(--mono); color: var(--signal); }
.gd .ic { width: 15px; height: 15px; stroke-width: 2; }
.gn.ok .gd { display: inline-flex; }
.gn.run { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal), 0 0 22px rgba(77,255,184,.18); }
.gn.ok { border-color: rgba(77,255,184,.42); }
.port { position: absolute; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--fg-3); background: var(--ink-0); z-index: 3; }
.gn.ok .port, .gn.run .port { border-color: var(--pink); }
.gnodes .port { left: -5px; top: 24px; }
.gnodes .port.po, .gnodes .port.pd { display: none; }
.gnodes .port.pi { display: block; }
.gnodes .gn[data-n="1"] .port.po { display: block; }
.g3c { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; margin-top: 6px; padding: 6px; border-radius: 12px; background: var(--card); }
.g3c .art { grid-row: span 2; width: 72px; height: 72px; border-radius: 8px; }
.g3c .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g3c .nzb { z-index: 1; opacity: 1; transition: opacity .2s; }
.g3c.dev .nzb { animation: off .96s steps(12, end) both; }
.g3c.is-done .nzb, html.rm .g3c .nzb { opacity: 0; }
.g3t { font: 700 12.5px/1.35 var(--body); align-self: end; }
.g3m { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1.4 var(--mono); color: var(--fg-2); align-self: start; }
.side { display: none; }
.gact { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding-left: 34px; }
.gact .btn { height: 44px; padding: 0 18px; font-size: 14px; }
.tlink { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; font: 600 13.5px/1.4 var(--body); color: var(--pink-hi); }
.tlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.ledger { margin-top: 22px; }
.lh, .rl { font: 500 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--fg-2); }
.lrows { margin-top: 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lrow { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 12px; background: var(--ink-1); border: 1px solid var(--line); min-height: 44px; transition: background .16s; }
.lrow:hover { background: var(--ink-2); }
.lrow .lav { width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--ink-2); }
.lrow .lav img { width: 100%; height: 100%; object-fit: cover; }
.lrow .lt { display: none; }
.lrow .la { font: 600 11px/1.3 var(--mono); color: var(--pink-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .lt small .dot { width: 5px; height: 5px; vertical-align: 1px; }
.dstats { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.bigs { display: flex; flex-direction: column; }
.bigs .clipnum { font-size: 40px; }
.v-deals .clipnum { --clip: linear-gradient(100deg, rgba(255,61,154,.5), rgba(157,92,255,.32) 48%, rgba(77,255,184,.3)), url(media/micro/w-kopitiam.webp); background-blend-mode: screen; background-position: 50% 40%; filter: brightness(1.2) saturate(1.2); }
.bl, .smalls span { font: 400 12px/20px var(--body); color: var(--fg-2); }
.smalls { display: flex; gap: 26px; }
.smalls b { display: block; font: 800 24px/1.1 var(--num); letter-spacing: -.02em; }
.dstats .btn { align-self: flex-start; }
.testis { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.tcard { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; padding: 12px; border-radius: 16px; }
.tav { grid-row: span 2; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--ink-2); }
.tav img { width: 100%; height: 100%; object-fit: cover; }
.tq { font: 400 14px/1.6 var(--body); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.tcard small { font: 500 12px/1.4 var(--mono); color: var(--fg-2); }

/* ═══════════════════════ 06 SEAT ═══════════════════════ */
.v-seat { display: flex; flex-direction: column; }
.sl h2 { margin-top: 8px; }
.sl h2 .ph { display: block; }
.tagline { margin-top: 8px; font: 600 15px/1.5 var(--body); color: var(--pink-hi); }
.seatwrap { position: relative; margin-top: 16px; padding-top: 30px; }
.seats { --cell: 30px; --sg: 3px; display: grid; grid-template-columns: repeat(10, var(--cell)); gap: var(--sg); width: max-content; max-width: 100%; }
.seats li { position: relative; width: var(--cell); height: var(--cell); display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--line-2); font: 500 10px/1 var(--mono); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.seats li.taken { background: rgba(157,92,255,.28); border-color: rgba(157,92,255,.35); color: var(--fg-3); }
.seats li.mine { background: var(--pink); border-color: var(--pink); color: #07050B; font-weight: 700; box-shadow: var(--glow-pink); z-index: 1; }
.seats li.mine::before { content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; translate: -50% 0; padding: 5px 9px; border-radius: 999px; background: var(--fg); color: #07050B; font: 600 11px/1 var(--mono); white-space: nowrap; letter-spacing: .02em; }
.seats li.mine::after { content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--fg); border-bottom: 0; }
.sfacts { margin-top: 12px; font: 500 13px/1.6 var(--mono); color: var(--fg-2); }
.sfacts b { color: var(--fg); font-weight: 600; }
.cdrow { margin-top: 10px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cdrow span { font: 500 12px/1.4 var(--mono); color: var(--fg-3); letter-spacing: .06em; }
.cdrow .cd { font: 600 28px/1.1 var(--mono); color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.perks { margin-top: 8px; font: 400 13.5px/1.6 var(--body); color: var(--fg-2); }
.sl .btn { margin-top: 16px; align-self: flex-start; }
.sl { display: flex; flex-direction: column; }
.sr { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.plan { position: relative; padding: 16px; border-radius: 16px; background: var(--ink-1); border: 1px solid var(--line-2); }
.plan.pfound { border: 0; background: linear-gradient(var(--ink-1), var(--ink-1)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; }
.plan.ppro { border-color: var(--violet); }
.pn0 { display: flex; align-items: center; gap: 8px; font: 600 12px/1.4 var(--mono); letter-spacing: .08em; color: var(--fg-2); }
.rec { padding: 3px 8px; border-radius: 999px; background: var(--grad); color: #07050B; font: 700 11px/1.2 var(--body); letter-spacing: 0; }
.pp { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pp b { font: 800 30px/1 var(--num); letter-spacing: -.02em; }
.pp span { font: 500 13px/1.4 var(--body); color: var(--fg-2); }
.pf { margin-top: 8px; font: 400 13.5px/1.6 var(--body); color: var(--fg-2); }
.plan .btn { margin-top: 12px; height: 44px; font-size: 14px; }
.faqlink { display: inline-flex; align-items: center; min-height: 44px; font: 600 14px/1.4 var(--body); color: var(--pink-hi); align-self: flex-start; }
.ribbon { display: none; }
.rminis { display: flex; gap: 12px; margin-top: 8px; }
.rcta { display: flex; align-items: center; justify-content: center; width: 108px; padding: 10px; border-radius: 14px; border: 1px dashed var(--line-2); text-align: center; font: 600 12.5px/1.4 var(--body); color: var(--fg-2); background: var(--ink-1); transition: border-color .2s, color .2s; }
.rcta:hover { border-color: rgba(255,140,198,.6); color: var(--fg); }

/* ═══════════════════════ DIALOGS ═══════════════════════ */
.dlg { padding: 0; margin: 0; border: 0; background: transparent; color: var(--fg); max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; overflow: visible; }
.dlg::backdrop { background: rgba(7,5,11,.78); }
.dlg[open] { animation: dfade .2s var(--ease); }
.dlg[open]::backdrop { animation: dfade .2s linear; }
@keyframes dfade { from { opacity: 0; } to { opacity: 1; } }
.sheet { position: relative; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--ink-1); padding: calc(60px + var(--sat)) 16px calc(24px + var(--sab)); scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent; }
.dlg[open] .sheet { animation: sheetin .26s var(--ease); }
@keyframes sheetin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.x { position: absolute; top: calc(8px + var(--sat)); right: 8px; z-index: 10; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--fg); transition: background .16s; }
.x:hover { background: var(--ink-3); }
.x .ic { width: 20px; height: 20px; }

/* detail */
.dlg-work { --art: calc(100vw - 58px); }
.dgrid { display: flex; flex-direction: column; gap: 18px; }
.detail { width: calc(var(--art) + 26px); max-width: 100%; padding: 12px; }
.detail .art { touch-action: pan-y; }
.detail .lhead .dt { display: inline; }
.loading { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 6px 10px; border-radius: 999px; background: rgba(7,5,11,.7); font: 500 11px/1 var(--mono); color: var(--fg-2); opacity: 0; transition: opacity .2s; }
.detail.is-loading .loading { opacity: 1; }
.detail .hint { margin-top: 8px; font: 500 11px/1.4 var(--mono); color: var(--fg-3); }
.detail .got { right: 10px; bottom: 10px; }
.dinfo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dchips { display: flex; gap: 8px; flex-wrap: wrap; }
.dtitle { font: 800 26px/1.15 var(--num) !important; letter-spacing: -.025em !important; }
.crow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.who { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 13.5px/1.4 var(--body); color: var(--fg); }
a.who:hover { color: var(--pink-hi); }
.who .wav { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--ink-2); flex: none; }
.who .wav img { width: 100%; height: 100%; object-fit: cover; }
.nums { font: 500 12.5px/1 var(--mono); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badges span { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; font: 500 12px/1 var(--mono); border: 1px solid var(--line-2); color: var(--fg-2); }
.badges .ep { background: var(--pink); border-color: var(--pink); color: #07050B; font-weight: 600; }
.desc { font: 400 14.5px/1.7 var(--body); color: var(--fg-2); min-height: 50px; }
.desc .sk { display: block; height: 12px; margin: 7px 0; border-radius: 6px; background: var(--ink-2); }
.desc .sk.s2 { width: 70%; }
.pcard { border-radius: 12px; background: var(--ink-0); border: 1px solid var(--line-2); padding: 0 14px 12px; }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--fg-3); border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.prow .copy { height: 44px; padding: 0 12px; font: 600 12.5px/1 var(--body); letter-spacing: 0; }
.ptxt { font: 400 13px/20px var(--mono); color: var(--fg); overflow-wrap: anywhere; max-height: 120px; overflow-y: auto; }
.acts { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.acts .replay { height: 44px; padding: 0 16px; font-size: 14px; }
.pager { display: flex; align-items: center; gap: 10px; font: 500 12.5px/1 var(--mono); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.more .ml { font: 500 12px/1.4 var(--mono); color: var(--fg-2); letter-spacing: .04em; }
.mminis { display: flex; gap: 10px; margin-top: 8px; }
.mm2 { display: flex; flex-direction: column; gap: 6px; width: 88px; padding: 6px; border-radius: 12px; }
.mm2 .art { width: 100%; aspect-ratio: 1; border-radius: 8px; }
.mm2 .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm2 .m2t { font: 700 11.5px/1.3 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* creator */
.cgrid { display: flex; flex-direction: column; gap: 18px; }
.ccard { width: 100%; max-width: 300px; padding: 12px; border-radius: 18px; }
.ccard .art { position: relative; width: 100%; aspect-ratio: 1; border-radius: 10px; }
.ccard .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cct { display: block; margin-top: 10px; font: 800 16px/1.3 var(--num); }
.ccm { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font: 500 11.5px/1.4 var(--mono); color: var(--fg-2); }
.cinfo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cname { font: 800 34px/1.05 var(--num) !important; letter-spacing: -.03em !important; margin-top: 4px; }
.crole { font: 500 14px/1.5 var(--body); color: var(--fg-2); }
.cstats { font: 600 13px/1.5 var(--mono); color: var(--fg); font-variant-numeric: tabular-nums; }
.cquote { font: 400 15px/1.7 var(--body); }
.ctesti { font: 400 13.5px/1.6 var(--body); color: var(--fg-2); padding-left: 12px; border-left: 2px solid var(--pink); }
.ctesti:empty { display: none; }
.cmodels { display: flex; gap: 6px; flex-wrap: wrap; }
.cpl { margin-top: 4px; font: 500 11.5px/1.4 var(--mono); color: var(--fg-3); letter-spacing: .06em; }
.cpicks { display: flex; gap: 10px; }
.cinfo .btn { margin-top: 6px; align-self: flex-start; height: 48px; }

/* faq */
.dlg-faq .sheet { padding-top: calc(24px + var(--sat)); }
.ftitle { font: 900 28px/1.2 var(--disp) !important; padding-right: 56px; }
.fsub { margin-top: 6px; font: 400 14px/1.6 var(--body); color: var(--fg-2); }
.faqs { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.faqs details { border-radius: 14px; background: var(--ink-0); border: 1px solid var(--line); overflow: hidden; }
.faqs details[open] { border-color: var(--line-2); }
.faqs summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 16px; font: 600 15px/1.45 var(--body); cursor: pointer; list-style: none; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; flex: none; font: 500 18px/1 var(--mono); color: var(--pink-hi); transition: transform .2s var(--ease); }
.faqs details[open] summary::after { transform: rotate(45deg); }
.faqs details p { padding: 0 16px 14px; font: 400 14px/1.75 var(--body); color: var(--fg-2); }
.fcta2 { margin-top: 18px; }

/* claim */
.dlg-claim .sheet { display: flex; flex-direction: column; align-items: center; text-align: center; container-type: size; }
.ck { justify-content: center; }
.medal { --m: min(342px, calc(100vw - 48px)); position: relative; margin-top: 16px; width: var(--m); height: var(--m); flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #1a1226 0%, #07050B 70%); border: 0; }
.medal.card::before { padding: 3px; }
.medal .final img { border-radius: 50%; }
.medal > .nz { border-radius: 50%; }
.mcss { position: absolute; inset: 0; border-radius: 50%; z-index: 0; display: none; background: radial-gradient(circle at 50% 50%, #241835 0 30%, transparent 31%), repeating-conic-gradient(from 0deg, rgba(255,61,154,.55) 0 4deg, rgba(157,92,255,.35) 4deg 8deg, rgba(91,124,255,.4) 8deg 12deg), radial-gradient(circle, transparent 0 38%, #07050B 38.5% 40%, transparent 40.5% 62%, #07050B 62.5% 64%, transparent 64.5%); -webkit-mask: radial-gradient(circle, #000 0 70%, transparent 70.5%); mask: radial-gradient(circle, #000 0 70%, transparent 70.5%); }
.medal.nomedia .mcss { display: block; }
.medal.nomedia .final { display: none; }
.mno { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 4; font: 800 64px/1 var(--num); letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transition: opacity .3s var(--ease); filter: drop-shadow(0 2px 18px rgba(255,61,154,.35)); white-space: nowrap; }
.medal.n24 .mno { opacity: 1; }
.gold { position: absolute; inset: 0; z-index: 5; opacity: 0; visibility: hidden; pointer-events: none; border-radius: 50%; background: linear-gradient(115deg, transparent 40%, rgba(255,210,122,.75) 50%, transparent 60%) 100% 0 / 300% 100% no-repeat; }
.medal.goldrun .gold { animation: glint .6s var(--ease) 1 both; }
.mcap { margin-top: 14px; min-height: 20px; font: 600 12px/20px var(--mono); color: var(--gold); letter-spacing: .08em; opacity: 0; transition: opacity .3s; }
.mcap.on { opacity: 1; }
.mperks { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.mperks li { display: flex; align-items: center; gap: 8px; font: 500 14px/20px var(--body); }
.mperks .ic { width: 18px; height: 18px; color: var(--signal); stroke-width: 2; }
.btn.big { margin-top: 16px; width: min(360px, 100%); }
.mnote { margin-top: 8px; font: 500 12px/20px var(--mono); color: var(--fg-3); }

/* ═══════════════════════ TABLET + PHONE (stacked) ═══════════════════════ */
@media (min-width: 414px) and (max-width: 720px) {
  .logo .ts { display: inline; }
}
@media (max-width: 720px) {
  .cta { padding: 0 14px; font-size: 13.5px; }
  .v-home .ttl .tt { font-size: 20px; }
  .tt[data-qa-inline] a { padding: 9px 0; }

}

/* ─────────── tablet: 721–1179 (and short wide screens) ─────────── */
@media (min-width: 721px) and (max-width: 1179px), (min-width: 1180px) and (max-height: 619px) {
  :root { --top: 64px; --bot: 72px; }
  .top { padding: var(--sat) max(24px, var(--sar)) 0 max(24px, var(--sal)); gap: 12px; }
  .logo b { font-size: 22px; }
  .logo .tl { display: inline; }
  .cta .arr { display: inline; }
  .tabs { justify-content: center; }
  .tabs a { flex: 0 1 128px; min-width: 96px; font-size: 13px; }
  .view { padding: 24px 32px 32px; }
  .view h2 { font-size: 34px; line-height: 1.2; }
  .v-home { --art: 420px; padding: 0 32px 32px; }
  .band { padding-top: 18px; text-align: center; }
  .kicker { justify-content: center; font-size: 13px; }
  .kicker .en { display: inline; }
  .v-home h1 { font-size: 44px; line-height: 1.12; }
  .v-home h1 .ph { display: inline; }
  .conv { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: start; }
  .livewrap { grid-column: 1 / -1; }
  .slivers { left: -32px; right: -32px; }
  .sv.sl { transform: translateX(-80px); } .sv.sr { transform: translateX(80px); }
  .zl { grid-column: 1; } .zr { grid-column: 2; }
  .zl .sub { display: block; margin-top: 18px; font: 400 14.5px/1.7 var(--body); color: var(--fg-2); }
  .live .lhead .dt { display: inline; }
  .view h2.tt { font-size: 22px; }
  .prompt { font-size: 12.5px; }
  .box:first-of-type { margin-top: 18px; }
  .bth { width: 84px; height: 84px; }
  .wall { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .whead { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
  .search { width: 380px; }
  .tile .code { left: 8px; top: 8px; }
  .field { aspect-ratio: 16 / 11; }
  .node { left: var(--px); top: var(--py); translate: calc(-1 * var(--px)) calc(-1 * var(--py)); }
  .node .nav { width: 52px; height: 52px; }
  .node .nn span { display: block; }
  .wip { width: 166px; }
  .jl { grid-template-areas: "k k" "v v" "s s" "f f" "c c"; }
  .facts { grid-template-columns: 1fr 1fr; }
  .neon { font-size: 88px !important; }
  .row { grid-template-columns: 34px 44px minmax(0, 1fr) 150px 54px 44px; padding-left: 14px; }
  .row .rav { width: 44px; height: 44px; }
  .row .bar { display: block; height: 6px; border-radius: 99px; background: var(--ink-2); overflow: hidden; }
  .row .bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--grad); transition: width .32s var(--ease); }
  .lrows { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .testis { flex-direction: row; }
  .testis .tcard { flex: 1; }
  .seats { --cell: 44px; --sg: 6px; }
  .seats li { font-size: 12px; border-radius: 8px; }
  .sr { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; }
  .sr .pk0, .sr .faqlink { grid-column: 1 / -1; }
  .dlg-work { --art: min(480px, calc(100vw - 108px)); }
  .sheet { padding: calc(64px + var(--sat)) 40px calc(32px + var(--sab)); }
  .dlg-faq { width: min(560px, 100vw); margin-left: auto; }
  .dlg-claim .medal { --m: min(360px, calc(100vw - 80px)); }
}

/* ═══════════════════════ DESKTOP (≥1180 × ≥620) ═══════════════════════ */
@media (min-width: 1180px) and (min-height: 620px) {
  :root { --top: 64px; }
  .app { grid-template-rows: var(--top) minmax(0, 1fr) var(--folio); }
  .top { padding: 0 32px; gap: 18px; }
  .logo { margin-right: 0; flex: 1 1 0; }
  .logo b { font-size: 22px; }
  .logo .tl { display: inline; }
  .pill { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--ink-1); border: 1px solid var(--line-2); flex: none; }
  .pill a { position: relative; padding: 9px 16px; border-radius: 999px; font: 600 14px/1 var(--body); color: var(--fg-2); transition: color .16s, background .16s; white-space: nowrap; }
  .pill a:hover { color: var(--fg); background: var(--ink-3); }
  .pill a[aria-current="page"] { color: #07050B; background: var(--holo); background-size: 200% 100%; }
  .topr { flex: 1 1 0; justify-content: flex-end; gap: 18px; }
  .top .online { display: flex; }
  .top .qbtn { margin-left: 0; }
  .top > .online, .top > .qbtn, .top > .cta { flex: none; }
  .cta .arr { display: inline; }
  .cta { padding: 0 20px; }
  .folio { grid-row: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 32px; border-top: 1px solid var(--line); font: 500 11.5px/1 var(--mono); color: var(--fg-3); letter-spacing: .02em; }
  .fh { text-align: center; }
  .fp { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
  .fn { font-weight: 500; color: var(--fg-2); margin-right: 4px; font-variant-numeric: tabular-nums; }
  .fa { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--fg-2); }
  .fa .ic { width: 16px; height: 16px; }
  .fa:hover, .fl:hover { color: var(--fg); background: var(--ink-2); }
  .fl { margin-left: 8px; padding: 4px 6px; border-radius: 6px; color: var(--fg-2); }
  .tabs { display: none; }
  .colophon { display: none; }
  .view { overflow: hidden; padding: 24px 32px; }
  .view h2 { font-size: 44px; line-height: 1.15; }
  .vsub { font-size: 15px; line-height: 1.7; }
  .toast { bottom: calc(var(--folio) + 20px); }

  /* ── home (tall) ── */
  .v-home { --art: clamp(300px, calc(100svh - 480px), 420px); --hd: 24px; padding: 0 32px; display: flex; flex-direction: column; justify-content: center; }
  .v-home > * { flex: none; }
  .band { padding-top: 14px; text-align: center; }
  .kicker { justify-content: center; font-size: 13px; letter-spacing: .06em; }
  .kicker .en { display: inline; }
  .v-home h1 { margin-top: 6px; font-size: 56px; line-height: 1.05; }
  .v-home h1 .ph { display: inline; }
  .conv { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--art) + 26px) minmax(0, 1fr); column-gap: 48px; margin: 16px auto 0; width: 100%; max-width: 1640px; align-items: start; }
  .zl, .zr, .livewrap { order: 0; }
  .rail { display: block; position: absolute; left: -32px; right: -32px; top: calc(1px + 12px + var(--hd) + 8px + var(--art) / 2); height: 1px; z-index: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent); }
  .slivers { display: none; }
  .zl .zlabel, .zr .zlabel { display: flex; }
  .fan, .queue { display: block; position: relative; height: 280px; margin-top: 6px; }
  .zl .sub { display: block; margin-top: 8px; max-width: 400px; font: 400 15px/1.7 var(--body); color: var(--fg-2); }
  .live .lhead .dt { display: inline; }
  .live .stamp { font-size: 11.5px; }
  .view h2.tt { font-size: 22px; }
  .prompt { font-size: 12.5px; }
  .ctas { margin-top: 16px; gap: 10px; }
  .ctas .btn { height: 52px; padding: 0 22px; font-size: 15px; }
  .hstats { margin-top: 22px; gap: 26px; }
  .hstats b { font-size: 34px; }
  .bth { width: 84px; height: 84px; }
  .box { margin-top: 14px; }
  .fan .mini { position: absolute; left: var(--fx); top: var(--fy); rotate: var(--fr); z-index: var(--fz); transition: left .64s var(--ease), top .64s var(--ease), rotate .64s var(--ease), opacity .3s; }
  .fan .mini[data-slot="0"] { --fx: 0px; --fy: 18px; --fr: -9deg; --fz: 1; }
  .fan .mini[data-slot="1"] { --fx: 78px; --fy: 8px; --fr: -4deg; --fz: 2; }
  .fan .mini[data-slot="2"] { --fx: 156px; --fy: 0px; --fr: 1deg; --fz: 3; }
  .fan .mini.gone { opacity: 0; }
  .queue .mini { position: absolute; top: 0; transition: left .64s var(--ease), opacity .3s; }
  .queue .mini[data-q="1"] { left: 0; }
  .queue .mini[data-q="2"] { left: 196px; opacity: .7; }
  .queue .mini.enter { opacity: 0; }
  .queue .mini:hover { border-color: rgba(246,241,250,.3); }
  .queue .mini .art { background: var(--ink-2); }
  .ctrl { margin-top: 8px; min-height: 36px; height: 36px; gap: 12px; }
  .ctrl .ib { width: 36px; height: 36px; }
  .ctrl .legend { max-width: none; }

  /* ── works ── */
  .v-works { padding: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 44px 36px minmax(0, 1fr); column-gap: 24px; row-gap: 10px; }
  .whead, .wbar { display: contents; }
  .v-works h2 { grid-area: 1 / 1; align-self: center; font: 900 28px/44px var(--disp); white-space: nowrap; }
  .v-works h2 .clipnum { font-size: 44px; line-height: 44px; vertical-align: -4px; }
  .v-works .search { grid-area: 1 / 2; justify-self: end; width: 440px; height: 44px; }
  .search input { height: 40px; }
  .search .btn { height: 36px; }
  .chips { grid-area: 2 / 1; flex-wrap: nowrap; gap: 6px; align-self: center; }
  .chipf { height: 36px; padding: 0 13px; font-size: 13px; }
  .chipf .ic { width: 16px; height: 16px; }
  .tdesc { grid-area: 2 / 2; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
  .wallbox { grid-area: 3 / 1 / 4 / 3; margin: 0; min-height: 0; container-type: size; }
  .wall { --t: min(calc((100cqw - 70px) / 8), calc((100cqh - 30px) / 4)); grid-template-columns: repeat(8, var(--t)); grid-template-rows: repeat(4, var(--t)); gap: 10px; justify-content: center; align-content: center; height: 100%; }
  .tile { width: var(--t); height: var(--t); aspect-ratio: auto; }
  .tile .code { left: 8px; top: 8px; }
  .tile .tg { right: 8px; top: 8px; }
  .tile .cap { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 26px 10px 9px; background: linear-gradient(180deg, transparent, rgba(7,5,11,.9) 70%); transition: opacity .16s; }
  .tile .cap b { font: 800 13px/1.25 var(--num); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tile .cap small { font: 500 11px/1.3 var(--mono); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tile .peek { display: flex; flex-direction: column; gap: 3px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; max-height: 74%; padding: 9px 9px 8px; background: rgba(11,9,17,.95); border-top: 1px solid var(--line-2); transform: translateY(101%); transition: transform .2s var(--ease); }
  .tile .peek b { font: 800 14px/1.2 var(--num); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tile .peek .pm { font: 500 11px/1.3 var(--mono); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tile .peek .pp2 { font: 400 12px/16px var(--mono); color: var(--fg); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
  .tile .peek .pf2 { font: 500 11px/1.3 var(--mono); color: var(--pink-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tile.is-open { scale: 1.22; z-index: 5; box-shadow: 0 24px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(157,92,255,.35), 0 0 36px rgba(157,92,255,.25); }
  .tile.is-open .peek { transform: none; }
  .tile.is-open .cap { opacity: 0; }
  .tile .best { bottom: auto; top: 8px; }
  .tile.is-top .tg { display: none; }
  .ctacell { width: var(--t); height: var(--t); aspect-ratio: auto; padding: 12px; font-size: 13.5px; }

  /* ── 12-col views ── */
  .v-nebula, .v-jam, .v-seat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .nl { grid-column: 1 / span 5; min-height: 0; overflow: hidden; }
  .field { grid-column: 6 / span 7; margin: 0; height: 100%; aspect-ratio: auto; border-radius: 20px; }
  .nl h2 { margin-top: 10px; }
  .nl .vsub { margin-top: 16px; }
  .nl .online { margin-top: 16px; }
  .need { margin-top: 16px; }
  .mrow { margin-top: 16px; }
  .mrow .btn { height: 52px; }
  .mstat { margin-top: 12px; }
  .dcard { margin-top: 12px; }
  .node { padding: 8px 14px 8px 8px; gap: 12px; width: 200px; height: 80px; border-radius: 18px; }
  .node .nav { width: 64px; height: 64px; border-radius: 12px; }
  .node .nn b { font-size: 15px; }
  .node .nn span { display: block; }
  .wip { width: 220px; padding: 10px; border-radius: 16px; }
  .wip .wh { font-size: 11px; }
  .wip .wt { font-size: 14px; }

  .jl { grid-column: 1 / span 5; display: flex; flex-direction: column; min-height: 0; overflow: visible; }   /* the neon glow may spill */
  .jl .neon { margin: 10px 0 0; align-self: flex-start; font-size: 112px !important; line-height: 1.04 !important; }
  .jl .js1 { margin-top: 14px; }
  .jl .kv { order: 9; margin-top: 18px; flex: none; height: 140px; aspect-ratio: auto; }
  .facts { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
  .jl .jcta { margin-top: 18px; align-self: flex-start; padding: 0 28px; }
  .board { grid-column: 6 / span 7; margin: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .rows { margin-top: 12px; }
  .row { height: 56px; grid-template-columns: 40px 44px minmax(0, 1fr) 132px 150px 50px 44px; column-gap: 12px; padding-left: 16px; }
  .row .rk { font-size: 20px; }
  .row .rav { width: 44px; height: 44px; }
  .row .rt b { font-size: 15px; }
  .row .rt b .cdg { display: none; }
  .row .rm { display: inline-flex; justify-self: start; }
  .row .bar { display: block; height: 6px; border-radius: 99px; background: var(--ink-2); overflow: hidden; }
  .row .bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--grad); transition: width .32s var(--ease); }
  .lastrow { flex-wrap: nowrap; height: 52px; min-height: 0; padding: 0 16px; }

  .v-deals { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 24px; row-gap: 22px; align-content: start; }
  .dhead { grid-column: 1 / -1; }
  .dhead h2 { margin-top: 8px; }
  .graph { grid-column: 1 / span 8; margin: 0; min-height: 0; }
  .ledger { grid-column: 9 / span 4; margin: 0; min-height: 0; overflow: hidden; }
  .dstats { grid-column: 1 / span 4; margin: 0; align-self: end; gap: 10px; }
  .testis { grid-column: 5 / span 8; margin: 0; flex-direction: row; gap: 14px; align-self: end; }
  .gnodes { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 0; padding: 0; }
  .gn { width: 180px; padding: 14px; min-height: 124px; }
  .gn.g3 { min-height: 0; }
  .gnodes .port { top: 31px; }
  .gnodes .port.pi { display: block; left: -5px; }
  .gnodes .port.po { display: block; left: auto; right: -5px; top: 31px; bottom: auto; }
  .gnodes .port.pd { display: block; left: 50%; margin-left: -4.5px; top: auto; bottom: -5px; }
  .gnodes .gn[data-n="1"] .port.pi, .gnodes .gn[data-n="4"] .port.po { display: none; }
  .gn .gs { display: none; }
  .g3c { display: block; margin-top: 8px; padding: 0; background: none; }
  .g3c .art { width: 132px; height: 132px; border-radius: 10px; }
  .g3c.card { border: 0; border-radius: 10px; overflow: visible; }
  .g3c .gl { inset: 0; border-radius: inherit; }
  .g3c.card::before { inset: -3px; border-radius: 13px; }
  .g3t { display: block; margin-top: 8px; }
  .g3m { margin-top: 2px; }
  .side { display: flex; align-items: center; gap: 10px; position: absolute; z-index: 2; left: 243px; top: 196px; width: 300px; height: 56px; padding: 0 16px; border-radius: 14px; background: var(--ink-1); border: 1px dashed var(--line-2); font: 500 13px/1.4 var(--body); color: var(--fg-2); transition: border-color .2s, color .2s; }
  .side .port { left: 50%; margin-left: -4.5px; top: -5px; }
  .side .sck { width: 18px; height: 18px; color: var(--signal); stroke-width: 2; margin-left: auto; opacity: 0; transition: opacity .2s; }
  .side.ok { border-style: solid; border-color: rgba(77,255,184,.42); color: var(--fg); }
  .side.ok .sck { opacity: 1; }
  .side.ok .port { border-color: var(--pink); }
  .gact { position: absolute; left: 0; bottom: 0; margin: 0; padding: 0; }
  .lrows { grid-template-columns: 1fr; gap: 4px; }
  .lrow { flex-direction: row; align-items: center; gap: 12px; height: 44px; padding: 4px 12px 4px 4px; min-height: 0; }
  .lrow .lav { width: 36px; height: 36px; aspect-ratio: auto; flex: none; }
  .lrow .lt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .lrow .lt b { font: 800 14px/1.2 var(--num); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lrow .lt small { font: 400 12px/1.25 var(--body); color: var(--fg-2); }
  .lrow .la { font-size: 13px; }
  .bigs .clipnum { font-size: 64px; }
  .smalls b { font-size: 28px; }
  .dstats .btn { height: 48px; }
  .tcard { flex: 1 1 0; height: 152px; grid-template-columns: 48px minmax(0, 1fr); align-content: start; }
  .tav { width: 48px; height: 48px; }

  .sl { grid-column: 1 / span 7; min-height: 0; overflow: hidden; }
  .sr { grid-column: 8 / span 5; margin: 0; display: flex; min-height: 0; overflow: hidden; gap: 10px; }
  .v-seat { grid-template-rows: minmax(0, 1fr) auto; row-gap: 20px; }
  .sl h2 { font-size: 40px; line-height: 1.15; }
  .sl h2 .ph { display: inline; }
  .tagline { font-size: 16px; }
  .seats { --cell: 48px; --sg: 6px; }
  .seats li { font-size: 12.5px; border-radius: 9px; }
  .seatwrap { margin-top: 14px; }
  .cdrow .cd { font-size: 36px; }
  .plan { padding: 16px 18px; }
  .ribbon { grid-column: 1 / -1; display: flex; flex-direction: column; }
  .rminis .mini { width: 108px; padding: 6px; border-radius: 12px; }
  .rminis .mini .art { width: 96px; height: 96px; border-radius: 8px; }
  .rminis .mini .mt { margin-top: 4px; font-size: 11.5px; line-height: 16px; }
  .rminis .rcta { height: 128px; }

  /* dialogs */
  .dlg { width: auto; height: auto; max-width: none; max-height: none; margin: auto; inset: 0; }
  .sheet { border-radius: 22px; border: 1px solid var(--line-2); padding: 24px; box-shadow: 0 40px 120px rgba(0,0,0,.6); }
  .x { top: 14px; right: 14px; }
  .dlg-work { width: min(1120px, calc(100vw - 64px)); height: min(720px, calc(100svh - 32px)); }
  .dlg-work .sheet { container-type: size; }
  .dgrid { display: grid; grid-template-columns: 440px minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .dlg-work { --art: min(416px, calc(100svh - 32px - 48px - 112px)); }
  .detail { width: 440px; }
  .detail .art { width: var(--art); height: var(--art); }
  .dinfo { padding-right: 48px; gap: 12px; }
  .dtitle { font-size: 36px !important; }
  .dlg-work .colophon, .dlg-creator .colophon, .dlg-faq .colophon, .dlg-claim .colophon { display: none; }
  .mm2 { width: 96px; }
  .dlg-creator { width: min(760px, calc(100vw - 64px)); height: min(520px, calc(100svh - 32px)); }
  .cgrid { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .ccard { width: 280px; }
  .ccard .art { width: 256px; height: 256px; aspect-ratio: auto; }
  .cinfo { gap: 7px; padding-right: 40px; }
  .cname { font-size: 40px !important; }
  .cpicks .mm2 { width: 84px; }
  .cmodels { margin-right: -24px; gap: 6px; }
  .cmodels .chipm { height: 26px; padding: 0 9px; gap: 5px; font-size: 11.5px; }
  .dlg-faq { width: 520px; height: calc(100svh - var(--top) - var(--folio)); margin: var(--top) 0 var(--folio) auto; inset: 0 0 auto auto; }
  .dlg-faq .sheet { border-radius: 22px 0 0 22px; border-right: 0; padding: 26px 28px; }
  .dlg-faq[open] .sheet { animation: drawerin .26s var(--ease); }
  @keyframes drawerin { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
  .dlg-claim { width: 560px; height: min(720px, calc(100svh - 32px)); }
  .dlg-claim .medal { --m: min(360px, calc(100cqh - 300px), 100cqw); margin-top: 16px; }
  .mno { font-size: 88px; }
}

/* ─────────── desktop compact: max-height 819 ─────────── */
@media (min-width: 1180px) and (min-height: 620px) and (max-height: 819px) {
  :root { --top: 56px; }
  .cta { height: 40px; }
  .qbtn { width: 40px; height: 40px; }
  .view { padding: 16px 24px; }
  .view h2 { font-size: 32px; line-height: 1.2; }
  .v-home { --art: clamp(300px, calc(100svh - 326px), 440px); --hd: 32px; padding: 0 32px; justify-content: flex-start; }
  .band { position: absolute; z-index: 2; left: 32px; top: 14px; width: calc((100% - 64px - var(--art) - 26px - 96px) / 2); padding: 0; text-align: left; }
  .kicker { justify-content: flex-start; font-size: 12px; }
  .kicker .en { display: none; }
  .v-home h1 { font-size: 40px; line-height: 1.1; margin-top: 6px; }
  .v-home h1 .ph { display: block; }
  .conv { margin-top: 14px; }
  .zl { padding-top: 112px; }
  .zl .sub { display: none; }
  .legend2 { display: block; margin-top: 8px; font: 500 12px/18px var(--mono); color: var(--fg-3); }
  .fan, .queue { height: 236px; margin-top: 4px; }
  .fan .mini, .queue .mini { width: 150px; }
  .fan .mini[data-slot="0"] { --fx: 0px; --fy: 15px; }
  .fan .mini[data-slot="1"] { --fx: 65px; --fy: 7px; }
  .fan .mini[data-slot="2"] { --fx: 130px; --fy: 0px; }
  .queue .mini[data-q="2"] { left: 164px; }
  .ctas { margin-top: 16px; }
  .ctas .btn { height: 48px; padding: 0 20px; }
  .hstats b { font-size: 28px; }
  .prompt { height: 36px; -webkit-line-clamp: 2; }
  .live .lhead { padding-right: 76px; gap: 6px; }
  .live .stamp { font-size: 10.5px; letter-spacing: .02em; }
  .live .lhead .tag { padding: 5px 8px; }
  .ctrl { position: absolute; top: 13px; right: 13px; margin: 0; height: 32px; min-height: 0; gap: 4px; z-index: 3; }
  .ctrl .ib { width: 32px; height: 32px; }
  .ctrl .ib .ic { width: 16px; height: 16px; }
  .ctrl .legend { display: none; }
  .zr .box { margin-top: 12px; }
  .zr .box.quote { padding: 12px; }

  .v-works { padding: 14px; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 44px minmax(0, 1fr); }
  .v-works h2 { grid-area: 1 / 1; }
  .v-works h2 .h2x { display: none; }
  .chips { grid-area: 1 / 2; justify-self: start; }
  .v-works .search { grid-area: 1 / 3; width: 300px; }
  .tdesc { display: none; }
  .tdesc.srch { display: block; position: absolute; }
  .wallbox { grid-area: 2 / 1 / 3 / 4; }

  .v-nebula, .v-jam, .v-seat { column-gap: 20px; }
  .nl .vsub { margin-top: 12px; font-size: 14px; line-height: 1.6; }
  .nl .online, .need, .mrow { margin-top: 12px; }
  .mrow .btn { height: 48px; }
  .mstat { margin-top: 8px; }
  .dcard { margin-top: 8px; padding: 10px; }
  .dav { width: 52px; height: 52px; }
  .node { width: 180px; height: 64px; padding: 6px 12px 6px 6px; }
  .node .nav { width: 48px; height: 48px; }
  .wip { width: 180px; }

  .jl .neon { font-size: 88px !important; margin-top: 4px; }
  .jl .js1 { margin-top: 10px; font-size: 14px; line-height: 1.6; }
  .facts { margin-top: 12px; gap: 8px; }
  .facts > div { padding: 10px 12px; }
  .facts .fbig { font-size: 22px; }
  .jl .jcta { margin-top: 12px; height: 48px; }
  .jl .kv { height: 100px; margin-top: 12px; }
  .rows { margin-top: 8px; }
  .row { height: 46px; }
  .row .rav { width: 36px; height: 36px; }
  .lastrow { height: 46px; }

  .v-deals { row-gap: 16px; }
  .dhead .vsub { font-size: 14px; }
  .gn { min-height: 110px; padding: 12px; }
  .g3c .art { width: 96px; height: 96px; }
  .side { top: 158px; }
  .lrows { margin-top: 8px; gap: 3px; }
  .lrow { height: 34px; }
  .lrow .lav { width: 28px; height: 28px; }
  .lrow .lt small { display: none; }
  .bigs .clipnum { font-size: 48px; }
  .smalls b { font-size: 24px; }
  .tcard { height: 126px; padding: 10px 12px; }
  .tq { font-size: 13.5px; line-height: 1.55; }

  .sl h2 { font-size: 32px; }
  .seats { --cell: 40px; --sg: 5px; }
  .seatwrap { margin-top: 10px; }
  .cdrow .cd { font-size: 28px; }
  .ribbon { display: none; }
  .v-seat { grid-template-rows: minmax(0, 1fr); }
  .plan { padding: 12px 16px; }
  .pp b { font-size: 26px; }
  .pf { margin-top: 6px; font-size: 13px; line-height: 1.55; }
}
@media (min-width: 1180px) and (min-height: 620px) and (max-width: 1259px) {
  .top .online { display: none; }
}

/* ─────────── phone + landscape phone: compact jam / deals (§5.5, §5.6 phone) ─────────── */
@media (max-width: 720px) {
  /* nebula (§5.4 phone): copy → field → Daniel card → colophon */
  .nl { display: contents; }
  .v-nebula > .field { order: 1; }
  .nl > .dcard { order: 2; }
  .v-nebula > .colophon { order: 3; }
  .v-nebula > *, .nl > * { flex: none; }
  .mstat { display: flex; flex-direction: column; align-items: flex-start; }
  .mstat .again { margin-left: -6px; }
  .view.is-entering .nl > * { animation: genin .32s var(--ease) both; }
  html.rm .view.is-entering .nl > * { animation: none !important; }
}
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  /* nebula field (§5.4 phone): avatar tiles with the name underneath, set around the WIP card */
  .v-nebula .field { aspect-ratio: 358 / 440; }
  .node { left: var(--px); top: var(--py); translate: calc(-1 * var(--px)) calc(-1 * var(--py)); flex-direction: column; gap: 3px; padding: 5px 5px 4px; border-radius: 14px; }
  .node .nav { width: 44px; height: 44px; border-radius: 10px; }
  .node .nn { align-items: center; }
  .node .nn b { font-size: 11px; }
  .node .nn span { display: none; }
  .node .ncode { left: 2px; bottom: 2px; padding: 1px 4px; font-size: 8.5px; }
  .wip { width: min(150px, 40cqw); padding: 7px; }
  .wip .wx { display: none; }
  .wip .art { margin-top: 5px; }
  .wip .wt { margin-top: 6px; font-size: 12.5px; }
  .wip .wm { font-size: 10.5px; }
  .reply { padding: 6px 9px; font-size: 11.5px; }
  /* jam (§5.5 phone): the facts as a 4-row list · board rows 52 */
  .facts { grid-template-columns: 1fr; gap: 0; margin-top: 12px; border-top: 1px solid var(--line); }
  .facts > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 7px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
  .facts dd { margin-top: 0; font-size: 13.5px; line-height: 1.45; }
  .facts .fbig { font-size: 20px; line-height: 1.2; }
  .facts .cd { display: inline-block; margin: 0 0 0 8px; font-size: 13px; }
  .jl .jcta { margin-top: 12px; height: 48px; }
  .jl .kv { aspect-ratio: 2 / 1; }
  .board { margin-top: 14px; }
  .rows { margin-top: 8px; gap: 3px; }
  .row { height: 52px; grid-template-columns: 24px 40px minmax(0, 1fr) 34px 44px; column-gap: 8px; }
  .lastrow { min-height: 48px; padding: 6px 14px; }
  /* deals graph rows (§5.6 phone): the done status rides on the title line */
  .gn { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 10px 14px; }
  .gn > :not(.port) { grid-column: 1 / -1; }
  .gn > .gt { grid-column: 1; grid-row: 1; }
  .gn > .gd { grid-column: 2; grid-row: 1; margin-top: 0; }
  .gb { margin-top: 2px; }
  /* deals (§5.6 phone) */
  .dhead .vsub { font-size: 14px; line-height: 1.55; }
  .graph { margin-top: 12px; }
  .gnodes { gap: 8px; }
  .g3c { grid-template-columns: 56px minmax(0, 1fr); }
  .g3c .art { width: 56px; height: 56px; }
  .gact { padding-left: 0; gap: 12px; margin-top: 12px; flex-wrap: nowrap; }
  .gact .btn { padding: 0 14px; flex: none; }
  .gact .tlink { font-size: 13px; white-space: nowrap; }
  .ledger { margin-top: 16px; }
  .lrows { gap: 6px; }
  .lrow { position: relative; padding: 0; gap: 0; overflow: hidden; border-radius: 10px; }
  .lrow .lav { border-radius: 0; }
  .lrow .la { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; background: linear-gradient(180deg, transparent, rgba(7,5,11,.9) 50%); line-height: 1.3; white-space: normal; overflow: visible; text-shadow: 0 1px 2px #07050B; }
  .dstats { margin-top: 16px; display: grid; grid-template-columns: auto auto; justify-content: start; align-items: end; column-gap: 24px; row-gap: 12px; }
  .dstats .btn { grid-column: 1 / -1; height: 48px; }
  .smalls { flex-direction: column; gap: 4px; }
  .smalls p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; line-height: 1.2; }
  .smalls p span { line-height: 1.2; white-space: nowrap; }
  .smalls b { display: inline; font-size: 20px; }
  .testis { margin-top: 16px; gap: 8px; }
  .tcard + .tcard { grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; row-gap: 1px; padding: 8px 12px; align-items: center; }
  .tcard + .tcard .tav { width: 32px; height: 32px; border-radius: 8px; }
  .tcard + .tcard .tq { display: block; font-size: 13px; line-height: 1.45; white-space: nowrap; text-overflow: ellipsis; }
  .tcard + .tcard small { font-size: 11.5px; line-height: 1.3; }
}

@media (max-width: 380px) {
  .v-nebula .field { aspect-ratio: 328 / 424; }   /* a little taller on small phones: bottom-row replies clear the WIP card */
}

/* ─────────── landscape phone: rail ─────────── */
@media (max-height: 500px) and (pointer: coarse) {
  :root { --bot: 0px; }
  .app { grid-template-columns: calc(64px + var(--sal)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .top { display: none; }
  .stage { grid-column: 2; grid-row: 1; }
  .tabs { grid-column: 1; grid-row: 1; flex-direction: column; justify-content: flex-start; gap: 0; padding: 4px 0 var(--sab) var(--sal); border-top: 0; border-right: 1px solid var(--line); overflow: hidden; }
  .tabs a { flex: none; width: 64px; min-width: 0; height: 48px; font-size: 11px; gap: 2px; }
  .tabs a .ic { width: 20px; height: 20px; }
  .tabs a[aria-current="page"]::before { top: 8px; bottom: 8px; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  .tabs .rq { display: grid; place-items: center; width: 44px; height: 44px; margin: auto auto 4px; border-radius: 50%; border: 1px solid var(--line-2); font: 600 15px/1 var(--mono); color: var(--fg); }
  .fcta { display: inline-flex; align-items: center; position: fixed; z-index: 40; right: max(14px, var(--sar)); bottom: max(12px, var(--sab)); height: 44px; padding: 0 18px; border-radius: 999px; background: var(--grad); color: #07050B; font: 700 14px/1 var(--body); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
  .view { padding: 14px 20px 68px; }
  .view h2 { font-size: 26px; }
  .v-home { --art: min(calc(100svh - 92px), 300px); padding: 0 20px 68px; }
  .band { display: flex; align-items: baseline; gap: 14px; padding-top: 8px; text-align: left; min-height: 36px; flex-wrap: wrap; }
  .kicker { justify-content: flex-start; }
  .kicker .en { display: none; }
  .v-home h1 { font-size: 22px; line-height: 1.3; margin: 0; white-space: nowrap; }
  .v-home h1 .ph { display: inline; }
  .conv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; align-items: start; margin-top: 10px; }
  .livewrap { grid-column: 1 / -1; }
  .zl { grid-column: 1; } .zr { grid-column: 2; }
  .slivers { display: none; }
  .live { width: 100%; max-width: 760px; display: grid; grid-template-columns: var(--art) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto auto 1fr; column-gap: 18px; margin: 0; }
  .live .lhead { grid-column: 2; grid-row: 1; }
  .live .art { grid-column: 1; grid-row: 1 / span 7; margin: 0; }
  .live .ttl { grid-column: 2; grid-row: 2; margin-top: 10px; }
  .live .by { grid-column: 2; grid-row: 3; }
  .live .plabel { grid-column: 2; grid-row: 4; }
  .live .prompt { grid-column: 2; grid-row: 5; }
  .live .lstats { grid-column: 2; grid-row: 6; margin-top: 10px; }
  /* ⏸ ⟲ sit in the card's right column, bottom-left — clear of the floating CTA (§8) */
  .ctrl { position: absolute; left: calc(var(--art) + 31px); bottom: 12px; margin: 0; justify-content: flex-start; z-index: 3; }
  .ctrl .legend { display: none; }
  /* nebula: copy | the phone field (358:440) */
  .v-nebula { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .v-nebula > .nl { grid-column: 1; grid-row: 1; }
  .v-nebula > .field { grid-column: 2; grid-row: 1; margin: 0; }
  .v-nebula > .colophon { grid-column: 1 / -1; }
  /* jam: sign + facts | board */
  .v-jam { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 20px; align-items: start; }
  .v-jam > .colophon { grid-column: 1 / -1; }
  .jl { grid-template-areas: "k" "v" "s" "f" "c"; }
  .neon { font-size: 64px !important; }
  .board { margin-top: 0; }
  .row { height: 46px; grid-template-columns: 24px 36px minmax(0, 1fr) 34px 44px; padding-left: 10px; }
  .row .rav { width: 36px; height: 36px; }
  .row .bar { display: none; }
  /* deals: graph | ledger + stats; testimonials in one row */
  .v-deals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; align-content: start; }
  .v-deals > .dhead, .v-deals > .testis, .v-deals > .colophon { grid-column: 1 / -1; }
  .v-deals > .graph { grid-column: 1; grid-row: 2 / span 2; }
  .v-deals > .ledger { grid-column: 2; grid-row: 2; margin-top: 12px; }
  .v-deals > .dstats { grid-column: 2; grid-row: 3; align-self: start; }
  .lrows { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tcard + .tcard { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; padding: 12px; align-items: start; }
  .tcard + .tcard .tav { width: 44px; height: 44px; border-radius: 10px; }
  .tcard + .tcard .tq { display: -webkit-box; white-space: normal; font-size: 14px; line-height: 1.6; }
  .tcard + .tcard small { font-size: 12px; line-height: 1.4; }
  /* seat: grid + countdown | plans */
  .v-seat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-content: start; }
  .v-seat > .colophon { grid-column: 1 / -1; }
  .seats { --cell: 30px; --sg: 4px; }
  .seats li { font-size: 10px; border-radius: 6px; }
  .sr { grid-template-columns: 1fr; gap: 8px; }
  .tabs a[data-nav] span { font-size: 11px; }
  .sheet { padding: calc(56px) max(20px, var(--sar)) 24px max(20px, var(--sal)); }
  .wall { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
  /* overlays: two columns, content starts at the top (✕ floats top-right) */
  .dlg-work .sheet, .dlg-creator .sheet { padding-top: 14px; }
  .dlg-work { --art: min(calc(100svh - 110px), 280px); }
  .dgrid { display: grid; grid-template-columns: calc(var(--art) + 26px) minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .dinfo { padding-right: 44px; }
  .dlg-work .lhead .dt { display: none; }
  .cgrid { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .ccard { width: 240px; }
  .cinfo { padding-right: 44px; }
  .dlg-claim .sheet { display: grid; grid-template-columns: auto minmax(0, 340px); grid-auto-rows: min-content; column-gap: 28px; row-gap: 10px; align-content: center; justify-content: center; align-items: center; text-align: left; padding-top: 16px; padding-bottom: 16px; }
  .dlg-claim .medal { --m: min(calc(100svh - 64px), 300px); grid-column: 1; grid-row: 1 / span 6; }
  .dlg-claim .sheet > :not(.medal):not(.x) { grid-column: 2; margin: 0; }
  .dlg-claim .mperks { align-items: flex-start; }
  .dlg-claim .ck { justify-content: flex-start; justify-self: start; }
}

/* ═══════════════════════ REDUCED MOTION ═══════════════════════ */
html.rm *, html.rm *::before, html.rm *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; scroll-behavior: auto !important; }
html.rm .view.is-entering { animation: vin .12s linear both !important; animation-duration: .12s !important; }
html.rm .view.is-entering [data-gen] { animation: none !important; }
html.rm .card.is-done::before { --px: 62%; --py: 30%; }
html.rm .card .gl, html.rm .card .fx { display: none; }
html.rm .card.is-live { transform: none !important; }
html.rm .veil { display: none; }
html.rm .ldot::after, html.rm .pdot::after { display: none; }
html.rm .ctrl .ib, html.rm .ctrl .legend { display: none; }
html.rm .ctrl .rmrow { display: flex; }
html.rm .tile, html.rm .fan .mini, html.rm .queue .mini { transition: none; }
html.rm .live .final { transition: opacity .6s linear; }
@media (prefers-reduced-motion: reduce) {
  .view.is-entering [data-gen] { animation: none; }
  .veil { display: none; }
}