/* Hype · one look everywhere: YouTube-simple, the hype pink only for hype, black for the bell, red only for LIVE */
:root {
  --bg: #FFFFFF; --bg2: #F2F2F2; --bg3: #E3E3E3; --ink: #0F0F0F; --ink2: #5F5F5F; --line: #E3E3E3;
  --hype: #C8104F; --hype-ink: #FFFFFF; --hype-soft: #FDE8F0;
  --live: #CC0000; --ok: #0B7A3E; --warn: #8F5300; --warn-soft: #FCEFD9; --danger: #B3261E; --link: #065FD4; --focus: #2F55D4;
  --scrim: rgba(0, 0, 0, .74); --shadow: 0 8px 28px rgba(0, 0, 0, .16);
  --top: 56px; --rail: 236px; --mini: 88px; --tabs: 58px; --r: 12px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0F0F0F; --bg2: #272727; --bg3: #3D3D3D; --ink: #F1F1F1; --ink2: #AAAAAA; --line: #303030;
  --hype: #FF4F8E; --hype-ink: #1C0010; --hype-soft: #3A1426;
  --ok: #4BD98C; --warn: #F6BE55; --warn-soft: #352610; --danger: #FF8A80; --link: #3EA6FF; --focus: #86A6FF;
  --scrim: rgba(0, 0, 0, .78); --shadow: 0 8px 28px rgba(0, 0, 0, .6); color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0F0F0F; --bg2: #272727; --bg3: #3D3D3D; --ink: #F1F1F1; --ink2: #AAAAAA; --line: #303030;
  --hype: #FF4F8E; --hype-ink: #1C0010; --hype-soft: #3A1426;
  --ok: #4BD98C; --warn: #F6BE55; --warn-soft: #352610; --danger: #FF8A80; --link: #3EA6FF; --focus: #86A6FF;
  --scrim: rgba(0, 0, 0, .78); --shadow: 0 8px 28px rgba(0, 0, 0, .6); color-scheme: dark }

* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font); overflow-x: hidden }
a { color: inherit; text-decoration: none }
button, input, select, textarea { font: inherit; color: inherit }
img { max-width: 100% }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0 }
.skip { position: absolute; left: 16px; top: 8px; z-index: 60; display: inline-flex; align-items: center; min-height: 44px; background: var(--bg); padding: 10px 14px; border-radius: 8px; font-weight: 700; opacity: 0; pointer-events: none }
.skip:focus { opacity: 1; pointer-events: auto }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none }
.boot { padding: 48px 0; color: var(--ink2) }

/* ---------- top bar */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; height: calc(var(--top) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); background: var(--bg) }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 900; letter-spacing: .07em; font-size: 18px; min-height: 44px; padding-right: 8px; flex: none }
.mark { width: 28px; height: 28px; flex: none; display: block }
.top-search { flex: 1 1 auto; max-width: 640px; margin: 0 auto; display: flex; min-width: 0 }
#top .top-search input { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--line); border-right: 0; border-radius: 999px 0 0 999px; padding: 0 16px; background: var(--bg); font-size: 16px }
.top-search .icon-btn { width: 64px; height: 40px; border: 1px solid var(--line); border-radius: 0 999px 999px 0; background: var(--bg2) }
.top-r { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: none }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; position: relative; flex: none; color: var(--ink) }
.icon-btn:hover { background: var(--bg2) }
.dot { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--hype); color: var(--hype-ink); font-size: 13px; font-weight: 700; line-height: 20px; text-align: center }
.streak { width: auto; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 2px; color: var(--hype); font-weight: 800 }
.streak .ic { width: 22px; height: 22px }
.me-btn { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 2px }
#top .create-btn { margin-right: 4px; background: var(--hype); color: var(--hype-ink) }
#top .create-btn:hover { background: var(--hype); opacity: .9 }
.me-btn .join { box-shadow: inset 0 0 0 1.5px var(--hype); background: transparent; color: var(--hype); font-weight: 700 }
.composer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--bg2); margin: 4px 0 18px }
.composer .av { width: 36px; height: 36px }
.composer input[name=title] { border: 0; background: var(--bg); border-radius: 999px; min-height: 44px; padding: 0 16px; font-size: 16px; min-width: 0 }
.composer .q-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center }
.composer:not(:focus-within) .q-more { display: none }
.q-kinds { display: flex; flex-wrap: wrap; gap: 6px }
.q-kinds .chip-r span { min-height: 36px; background: var(--bg) }
.q-when { display: flex; align-items: center; gap: 8px }
.q-when span { margin: 0 }
.q-when input { width: auto !important; min-height: 40px !important; font-size: 14px !important }
.yours { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 4px 0 10px; padding-bottom: 2px }
.yours::-webkit-scrollbar { display: none }
.yours > b { flex: none; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--hype) }
.yours a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--hype-soft); max-width: 300px }
.yours .y-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600 }
.yours em { font-style: normal; font-size: 13px; color: var(--hype); font-weight: 700; flex: none; font-variant-numeric: tabular-nums }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--hype); flex: none }
.dot-live.on { background: var(--live) }
@media (pointer: coarse) { .yours a { min-height: 44px } .q-kinds .chip-r span { min-height: 44px } }
.crowd { display: flex; align-items: center; margin-top: 6px; font-size: 13px; color: var(--ink2) }
.crowd .av { margin-right: -8px; box-shadow: 0 0 0 2px var(--bg) }
.crowd .av:last-of-type { margin-right: 6px }
.only-sm { display: none }

/* ---------- frame: rail, main, bottom tabs */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: calc(100vh - var(--top)) }
.rail { position: sticky; top: calc(var(--top) + env(safe-area-inset-top, 0px)); height: calc(100vh - var(--top) - env(safe-area-inset-top, 0px)); overflow-y: auto; padding: 4px 12px 24px max(12px, env(safe-area-inset-left, 0px)); scrollbar-width: thin; background: var(--bg) }
.rail-sec { padding: 8px 0; border-bottom: 1px solid var(--line) }
.rail-sec:last-child { border-bottom: 0 }
.rail-h { padding: 8px 12px; font-weight: 700; font-size: 15px }
.nav-i { display: flex; align-items: center; gap: 18px; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; min-width: 0 }
.nav-i span { overflow-wrap: anywhere }
.nav-i:hover { background: var(--bg2) }
.nav-i.on { background: var(--bg2); font-weight: 700 }
.cat-dot { width: 24px; height: 24px; border-radius: 50%; background: hsl(var(--h) 60% 34%); flex: none; display: inline-block }
main { min-width: 0; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 32px 16px; outline: none }
.tabs { display: none; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: calc(var(--tabs) + env(safe-area-inset-bottom, 0px)); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background: var(--bg); border-top: 1px solid var(--line) }
.tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 13px; min-width: 0; position: relative; color: var(--ink2) }
.tab.on { color: var(--ink); font-weight: 700 }
.tab-create .ic { width: 44px; height: 30px; padding: 3px 10px; border-radius: 999px; stroke-width: 2.4; background: var(--hype); color: var(--hype-ink) }
.tab .dot { top: 4px; right: calc(50% - 26px) }

@media (max-width: 1199px) {
  .shell { grid-template-columns: var(--mini) minmax(0, 1fr) }
  .rail { padding: 4px }
  .rail .rail-sec { border: 0; padding: 0 }
  .rail .rail-sec:not(:first-child) { display: none }
  .rail .nav-i { flex-direction: column; gap: 4px; justify-content: center; min-height: 68px; padding: 6px 2px; font-size: 13px; text-align: center }
}
@media (max-width: 759px) {
  .shell { grid-template-columns: minmax(0, 1fr) }
  .rail { display: none }
  .tabs { display: flex }
  main { padding-bottom: calc(var(--tabs) + env(safe-area-inset-bottom, 0px) + 24px) }
  .top-search, #top .create-btn { display: none }
  .only-sm { display: inline-grid }
  .logo span { font-size: 17px }
}
body.rail-open .rail { display: block; position: fixed; z-index: 45; left: 0; top: 0; height: 100%; width: min(300px, 86vw); padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px 24px max(12px, env(safe-area-inset-left, 0px)); box-shadow: var(--shadow) }
body.rail-open .rail .rail-sec { display: block; padding: 8px 0; border-bottom: 1px solid var(--line) }
body.rail-open .rail .nav-i { flex-direction: row; gap: 18px; min-height: 44px; padding: 0 12px; font-size: 14px; text-align: left; justify-content: flex-start }
body.rail-open::after { content: ""; position: fixed; inset: 0; background: var(--scrim); z-index: 40 }

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--bg2); color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; text-decoration: none }
.btn:hover { background: var(--bg3) }
.btn .ic { width: 20px; height: 20px }
.btn.primary { background: var(--ink); color: var(--bg) }
.btn.primary:hover { opacity: .88 }
.btn.hype, .btn.hype-btn.on { background: var(--hype); color: var(--hype-ink) }
.btn.hype:hover, .btn.hype-btn.on:hover { opacity: .9 }
.btn.on, .btn.in { background: var(--bg3); color: var(--ink) }
.btn.sm { min-height: 32px; padding: 0 12px; font-size: 13px }
.btn.big { min-height: 48px; padding: 0 28px; font-size: 16px }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line) }
.btn.danger { color: var(--danger) }
.btn b { font-variant-numeric: tabular-nums }
.link { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; cursor: pointer; font-weight: 600; font-size: inherit }
@media (pointer: coarse) { .btn, .btn.sm { min-height: 44px } .chip, .chip.sm { min-height: 44px } .seg a { min-height: 44px } .mini { min-height: 44px } .foot-links a { min-height: 44px } }

/* ---------- chips and segments */
.chips { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 12px 16px; position: sticky; top: calc(var(--top) + env(safe-area-inset-top, 0px)); z-index: 20; background: var(--bg); margin: 0 -16px }
.chips::-webkit-scrollbar { display: none }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 10px; background: var(--bg2); font-weight: 600; font-size: 14px; border: 0; cursor: pointer; white-space: nowrap }
.chip:hover { background: var(--bg3) }
.chip.on { background: var(--ink); color: var(--bg) }
.chip.sm { min-height: 32px; font-size: 13px; padding: 0 12px; border-radius: 8px }
.chip.static { cursor: default }
.sortbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 4px 0 16px }
.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--bg2); max-width: 100%; overflow-x: auto; scrollbar-width: none }
.seg::-webkit-scrollbar { display: none }
.seg a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ink2); white-space: nowrap }
.seg a.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .18) }

/* ---------- cards (YouTube's anatomy: picture, avatar, title, who, when) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px 16px; margin-bottom: 28px }
.card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 12px }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--bg2) }
.thumb > img, .thumb > .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.kind { position: absolute; left: 8px; top: 8px; background: var(--scrim); color: #FFFFFF; font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 6px; max-width: calc(100% - 100px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sample { position: absolute; right: 8px; top: 8px; background: #FFF3C4; color: #4A3700; font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 6px }
.tb { position: absolute; right: 8px; bottom: 8px; background: var(--scrim); color: #FFFFFF; font-size: 13px; font-weight: 700; padding: 2px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; white-space: nowrap }
.tb.live { background: var(--live); color: #FFFFFF; letter-spacing: .04em }
.meta { display: flex; gap: 12px; align-items: flex-start; min-width: 0 }
.av-l { flex: none; display: block }
.av { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: hsl(var(--h) 60% 30%); color: #FFFFFF; font-weight: 700; font-size: 15px; flex: none; line-height: 1 }
.av.sm { width: 28px; height: 28px; font-size: 13px }
.av.xs { width: 24px; height: 24px; font-size: 13px }
.av.xl { width: 88px; height: 88px; font-size: 36px }
.av.sys { background: var(--bg3); color: var(--ink) }
.av.sys .ic { width: 16px; height: 16px }
.txt { flex: 1; min-width: 0 }
.txt h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.35; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere }
.sub { display: flex; flex-wrap: wrap; column-gap: 5px; color: var(--ink2); font-size: 13px; line-height: 1.5 }
.sub a:hover { color: var(--ink) }
.why { margin-top: 4px; font-size: 13px; color: var(--ink2); display: inline-flex; gap: 4px; align-items: center }
.why::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hype); flex: none }
.c-acts { display: flex; flex-direction: column; align-items: center; flex: none; margin-top: -4px }
.hy { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; color: var(--ink2); font-size: 13px; font-weight: 700; padding: 2px 4px; font-variant-numeric: tabular-nums }
.hy .ic { width: 22px; height: 22px; stroke-width: 2.1 }
.hy.on { color: var(--hype) }
.hy:hover { background: var(--bg2) }
.menu { position: absolute; right: 0; top: 100%; min-width: 220px; background: var(--bg); border-radius: 12px; box-shadow: var(--shadow); padding: 8px 0; z-index: 25; border: 1px solid var(--line) }
.menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 16px; border: 0; background: transparent; cursor: pointer; text-align: left; font-size: 14px; color: var(--ink) }
.menu button:hover { background: var(--bg2) }
.menu .ic { width: 20px; height: 20px }
.card.ad .thumb .art { display: grid; place-items: center; align-content: center; gap: 8px; background: linear-gradient(135deg, var(--hype), hsl(300 70% 32%)); text-align: center; padding: 16px }

/* generated covers: six looks, all from one hue */
.art { position: relative; display: grid; align-content: end; gap: 6px; padding: 14px 16px; color: #FFFFFF; container-type: inline-size;
  background: radial-gradient(120% 90% at 0% 0%, hsl(var(--h) 85% 58%) 0%, transparent 60%), linear-gradient(135deg, hsl(var(--h) 70% 34%), hsl(calc(var(--h) + 40) 75% 20%)); overflow: hidden }
.art-ic { position: absolute; right: 14px; top: 12px; opacity: .9; display: flex }
.thumb .art-ic, .hero .art-ic, .nx-t .art-ic { display: none }
.art-ic .ic { width: 28px; height: 28px; stroke-width: 2 }
.art-t { font-weight: 800; font-size: 20px; font-size: clamp(16px, 7cqi, 32px); line-height: 1.1; padding-bottom: .16em; letter-spacing: -.01em; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; text-shadow: 0 1px 3px rgba(0, 0, 0, .3) }
.art-c { font-size: 13px; font-weight: 700; opacity: .92 }
.art.look-poster { background: hsl(var(--h) 85% 90%); color: hsl(var(--h) 70% 16%) }
.art.look-poster .art-t { text-transform: uppercase; letter-spacing: .02em; text-shadow: none; font-size: clamp(17px, 8cqi, 36px) }
.art.look-neon { background: radial-gradient(80% 80% at 80% 20%, hsl(var(--h) 90% 22%) 0%, #07070C 70%); color: hsl(var(--h) 100% 78%); box-shadow: inset 0 0 0 2px hsl(var(--h) 100% 60% / .55) }
.art.look-neon .art-t { text-shadow: 0 0 14px hsl(var(--h) 100% 55%) }
.art.look-split { background: linear-gradient(115deg, hsl(var(--h) 75% 40%) 0 54%, hsl(calc(var(--h) + 170) 70% 26%) 54% 100%) }
.art.look-minimal { background: hsl(var(--h) 35% 95%); color: hsl(var(--h) 45% 14%) }
.art.look-minimal .art-t { text-shadow: none; font-weight: 700 }
.art.look-minimal .art-ic { color: hsl(var(--h) 60% 35%) }
.art.look-stripes { background: repeating-linear-gradient(135deg, hsl(var(--h) 78% 36%) 0 18px, hsl(var(--h) 78% 30%) 18px 36px) }

/* ---------- shelves, boxes */
.shelf { margin: 8px 0 28px; min-width: 0 }
.shelf-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap }
.shelf h2, .h2 { font-size: 20px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px }
.shelf-h h2 { margin: 0 }
.row-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity }
.row-scroll .card { scroll-snap-align: start }
.box { background: var(--bg2); border-radius: var(--r); padding: 16px; margin: 0 0 16px; min-width: 0 }
.box h2 { font-size: 16px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px }
.box h2 .ic { width: 20px; height: 20px }
.box h3 { font-size: 14px; margin: 14px 0 8px }
.page-h { padding: 20px 0 12px }
.page-h h1 { margin: 0; font-size: 24px; display: flex; align-items: center; gap: 8px; text-wrap: balance }
.page-h p { margin: 6px 0 0; color: var(--ink2); max-width: 70ch }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--ink2); min-height: 44px; font-weight: 600 }
.back .ic { width: 20px; height: 20px }
.empty { text-align: center; padding: 48px 16px; color: var(--ink2) }
.empty h1, .empty h2 { color: var(--ink); font-size: 20px; margin: 0 0 8px }
.empty p { margin: 0 auto; max-width: 48ch }
.empty .btn { margin-top: 16px }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.fine { color: var(--ink2); font-size: 13px }
.err { color: var(--danger); font-weight: 600; margin: 0 }
.ok { color: var(--ok); display: inline-flex; align-items: center; gap: 4px; font-weight: 700 }
.ok .ic { width: 18px; height: 18px }
.demo { background: var(--warn-soft); color: var(--warn); padding: 10px 12px; border-radius: 10px; margin: 0 }
.narrow { max-width: 520px }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2) }
.note-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px }
.onboard { display: grid; gap: 12px }
.onboard h2 { margin: 0; font-size: 18px }
.onboard p { margin: 4px 0 0; color: var(--ink2) }
.pick { display: flex; flex-wrap: wrap; gap: 8px }
.pick .chip { background: var(--bg) }
.pick .chip.on { background: var(--ink) }
.onboard .btn { justify-self: start }

/* ---------- forms */
.stack { display: grid; gap: 12px }
label > span { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 8px 12px; font-size: 16px }
input[type=file] { font-size: 14px; max-width: 100% }
textarea { resize: vertical; line-height: 1.45 }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--hype) }
.check span { font-weight: 400; font-size: 14px; display: inline; margin: 0 }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0 }
.sign { margin: 12px 0; padding: 14px; border-radius: var(--r); background: var(--bg); border: 2px solid var(--hype); display: grid; gap: 10px; box-shadow: var(--shadow) }
.card .sign { margin: 0 }
.sign-h { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.sign-h b { font-size: 15px }
.sign-f { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px }
.sign-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.sign-row .fine a { color: var(--link); text-decoration: underline }
.panel { margin: 0 0 12px; padding: 14px; border-radius: var(--r); background: var(--bg2); display: grid; gap: 10px; min-width: 0 }
.card .panel { margin: 0 }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.panel textarea { font: 13px/1.4 var(--mono) }
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px }
.copyrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 }
.copyrow input { flex: 1 1 220px; min-width: 0; width: auto !important; font-size: 14px !important }

/* ---------- the drop page */
.watch { display: grid; grid-template-columns: minmax(0, 1fr) 402px; gap: 24px; max-width: 1720px; margin: 0 auto; padding-top: 16px }
.w-main { min-width: 0 }
.hero { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000000 }
.hero > img, .hero > .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.hero > .art { padding: 24px 28px 96px }
.hero > .art .art-t { font-size: clamp(24px, 6.5cqi, 60px) }
.hero > .art .art-ic .ic { width: 40px; height: 40px }
.hero-over { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 20px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); color: #FFFFFF; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.hero-over .tb { position: static }
.hero-over b { font-size: 18px }
.hero-over .cd { font-size: clamp(22px, 4vw, 40px); font-variant-numeric: tabular-nums; font-weight: 800 }
.cd-l { font-weight: 700; opacity: .92 }
.w-title { font-size: 20px; line-height: 1.3; margin: 12px 0 10px; text-wrap: balance; overflow-wrap: anywhere }
.w-host { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px }
.who { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px }
.who b { display: block; overflow-wrap: anywhere }
.who small { color: var(--ink2); font-size: 13px }
.acts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px }
.facts .fact { display: flex; align-items: center; gap: 10px; min-height: 32px; flex-wrap: wrap; overflow-wrap: anywhere }
.facts .fact .ic { width: 20px; height: 20px }
.facts .stats { color: var(--ink2); font-size: 13px; font-weight: 600 }
.body p { margin: 8px 0; overflow-wrap: anywhere }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px }
.tags .chip { background: var(--bg) }
.host-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px }
.new-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--hype-soft) }
.new-banner h2 { margin: 0 }
.new-banner p { margin: 4px 0 0 }
.cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.cta h2 { margin: 0 }
.cta p { margin: 4px 0 0; color: var(--ink2); max-width: 60ch }
.place-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.big-n { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap }
.big-n b { font-size: 36px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--hype); line-height: 1 }
.big-n span { color: var(--ink2) }
.st { display: inline-flex; align-items: center; gap: 6px }
.code { margin: 10px 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.code b { font: 800 24px var(--mono); letter-spacing: .15em }
.miles { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.miles li { background: var(--bg); border-radius: 10px; padding: 10px; display: grid; gap: 2px; box-shadow: inset 0 0 0 1px var(--line) }
.miles li span { color: var(--ink2); font-size: 13px }
.miles li.done { box-shadow: inset 0 0 0 2px var(--ok) }
.miles li.done b::after { content: " ✓"; color: var(--ok) }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-bottom: 16px }
.two-col > .box { margin: 0 }
.leaders, .ranked { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.leaders li, .ranked li { display: flex; align-items: center; gap: 10px; min-height: 36px }
.leaders a, .ranked a { flex: 1; min-width: 0; overflow-wrap: anywhere }
.rank { width: 24px; text-align: center; font-weight: 800; color: var(--ink2); font-variant-numeric: tabular-nums; flex: none }
.hy-n { display: inline-flex; align-items: center; gap: 2px; color: var(--hype); font-weight: 700 }
.hy-n .ic { width: 18px; height: 18px }
.faces { display: flex; flex-wrap: wrap; gap: 6px }
.more-n { align-self: center; color: var(--ink2); font-weight: 600 }
.updates { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px }
.updates li { display: flex; gap: 10px }
.updates p { margin: 4px 0 0 }
.poll .opts { display: flex; flex-wrap: wrap; gap: 8px }
.poll .opts .btn { background: var(--bg) }
.bars { display: grid; gap: 6px }
.bar-row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 10px; background: var(--bg); overflow: hidden }
.bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--hype-soft) }
.bar-row span, .bar-row b { position: relative }
.bar-row.mine { box-shadow: inset 0 0 0 2px var(--hype) }
.comments { margin: 24px 0 }
.c-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px }
.c-head h2 { margin: 0; font-size: 18px }
.c-form { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 16px; flex-wrap: wrap }
.c-form textarea { flex: 1 1 260px; min-width: 0; width: auto; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 8px 0 }
.c-form textarea:focus { border-bottom-color: var(--ink); outline: none }
.c-form.reply { margin: 8px 0 }
.cm { display: flex; gap: 12px; margin: 14px 0 }
.cm-b { flex: 1; min-width: 0 }
.cm-b p { margin: 4px 0; overflow-wrap: anywhere }
.c-meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px }
.c-meta a, .c-meta b { font-weight: 700; color: var(--ink) }
.c-meta span { color: var(--ink2) }
.c-meta .host-tag { background: var(--bg2); padding: 0 6px; border-radius: 6px; color: var(--ink); font-weight: 600 }
.cm-acts { display: flex; gap: 2px; flex-wrap: wrap; margin-left: -10px }
.mini { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; border-radius: 999px; border: 0; background: transparent; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--ink2) }
.mini:hover { background: var(--bg2) }
.mini.on { color: var(--hype) }
.mini .ic { width: 18px; height: 18px }
.cm-kids { border-left: 2px solid var(--line); padding-left: 10px }
.cm .cm .av.sm { width: 24px; height: 24px }
.cm[data-depth="2"] .cm-kids, .cm[data-depth="3"] .cm-kids, .cm[data-depth="4"] .cm-kids { border-left: 0; padding-left: 0 }
.cm.folded > .cm-b > .cm-kids { display: none }
.w-side { min-width: 0 }
.side-h { font-size: 16px; margin: 0 0 12px }
.nx-list { display: grid; gap: 10px }
.nx { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 10px; position: relative; min-width: 0 }
.nx-t { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; display: block }
.nx-t > .art { padding: 8px 10px }
.nx-t .art-t { font-size: 14px }
.nx-t .art-ic, .nx-t .art-c { display: none }
.nx-x { display: grid; gap: 2px; min-width: 0; align-content: start }
.nx-x b { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere }
.nx-x span { font-size: 13px; color: var(--ink2) }
.room-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px }
.room .tb { position: static }
.room-list { max-height: 340px; overflow-y: auto; display: grid; gap: 6px; padding-right: 4px; margin-bottom: 8px; align-content: start }
.msg { display: flex; gap: 8px; align-items: baseline; font-size: 14px; overflow-wrap: anywhere }
.msg b { flex: none }
.room-f { display: flex; gap: 8px }
.room-f input { flex: 1; min-width: 0; width: auto !important; border-radius: 999px !important }

/* ---------- communities, profiles, lists */
.comm-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 0 12px }
.comm-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 800; color: #FFFFFF; background: hsl(var(--h) 60% 30%); flex: none }
.comm-t { flex: 1; min-width: 200px }
.comm-t h1 { margin: 0; font-size: 24px }
.comm-t p { margin: 6px 0 0; color: var(--ink2) }
.rules { display: flex; gap: 8px; align-items: center; padding: 10px 12px; background: var(--bg2); border-radius: 10px; margin-bottom: 12px; font-size: 14px }
.rules .ic { width: 20px; height: 20px }
.comm-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start }
.comm-side { position: sticky; top: calc(var(--top) + 16px) }
.comm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-bottom: 24px }
.comm-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r); background: var(--bg2); min-width: 0 }
.comm-card .comm-ic { width: 44px; height: 44px; font-size: 18px }
.comm-card .comm-t { min-width: 0 }
.comm-card .comm-t span { display: block; color: var(--ink2); font-size: 13px }
.comm-chips { display: flex; flex-wrap: wrap; gap: 8px }
.comm-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; border-radius: 999px; background: var(--bg2); font-size: 14px; min-width: 0; max-width: 100% }
.box .comm-chip { background: var(--bg) }
.comm-chip span:last-child { color: var(--ink2); font-size: 13px }
.prof { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 24px 0 16px }
.prof-t { flex: 1; min-width: 220px }
.prof-t h1 { margin: 0 0 4px; font-size: 28px; overflow-wrap: anywhere }
.prof-t p { margin: 6px 0 0 }
.prof .sub { font-size: 14px }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--hype-soft); color: var(--hype); font-weight: 700; font-size: 13px }
.badge .ic { width: 16px; height: 16px }
.search-big { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 0 }
.search-big input[name=q] { flex: 2 1 260px; width: auto }
.search-big input[name=where] { flex: 1 1 160px; width: auto }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px }
.streak-card { display: flex; align-items: center; gap: 20px }
.flame { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--hype-soft); color: var(--hype); position: relative; flex: none }
.flame .ic { width: 30px; height: 30px }
.flame b { position: absolute; bottom: -6px; right: -6px; background: var(--hype); color: var(--hype-ink); border-radius: 999px; min-width: 28px; height: 28px; display: grid; place-items: center; font-size: 14px; padding: 0 6px }
.streak-card h2 { margin: 0 }
.streak-card p { margin: 4px 0 0; color: var(--ink2) }
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 0 0 16px }
.statrow div { background: var(--bg2); border-radius: 12px; padding: 12px }
.statrow b { display: block; font-size: 22px; font-variant-numeric: tabular-nums }
.statrow span { color: var(--ink2); font-size: 13px }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line) }
.consent { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0 }
.consent legend { font-weight: 600; font-size: 13px; margin-bottom: 4px; padding: 0 }
.lines, .inbox, .people, .plain, .dir { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--bg); border-radius: 10px }
.lines a { display: grid; min-width: 0; overflow-wrap: anywhere }
.lines .pos { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--hype) }
.inbox li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px }
.inbox li.new { background: var(--hype-soft) }
.inbox li div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere }
.people li { display: flex; align-items: center; gap: 12px }
.people a { flex: 1; display: grid; min-width: 0 }
.people a span { color: var(--ink2); font-size: 13px }
.plain li { padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere }
.plain li p { margin: 4px 0 0 }
.dir { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 6px 16px }
.dir a { color: var(--link); text-decoration: underline; overflow-wrap: anywhere }
.pager { display: flex; gap: 8px; margin-top: 16px }
.doc { max-width: 70ch; padding: 20px 0 }
.doc h1 { font-size: 26px; margin: 0 0 12px }
.doc h2 { font-size: 18px; margin: 24px 0 8px }
.doc li { margin: 6px 0 }
.doc a { color: var(--link); text-decoration: underline }

/* ---------- host tools */
.templates { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 176px); gap: 12px; overflow-x: auto; padding: 2px 2px 12px; margin-bottom: 16px }
.tpl { display: grid; gap: 6px; font-size: 14px }
.tpl > .art { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; padding: 10px }
.tpl .art-t { font-size: 15px }
.tpl .art-ic .ic { width: 20px; height: 20px }
.tpl.on > .art { box-shadow: 0 0 0 3px var(--hype) }
.create-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start }
.create { display: grid; gap: 14px; max-width: 760px; min-width: 0 }
.create .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px }
.kinds, .looks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0 }
.kinds legend, .looks legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; padding: 0; width: 100% }
.chip-r, .look-r { position: relative }
.chip-r input, .look-r input { position: absolute; opacity: 0; pointer-events: none }
.chip-r span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--bg2); font-weight: 600; cursor: pointer; margin: 0; font-size: 14px }
.chip-r .ic { width: 18px; height: 18px }
.chip-r input:checked + span { background: var(--ink); color: var(--bg) }
.chip-r input:focus-visible + span, .look-r input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px }
.look-r .art { width: 112px; aspect-ratio: 16 / 9; border-radius: 8px; padding: 8px; cursor: pointer; margin: 0 }
.look-r .art-t { font-size: 13px }
.look-r input:checked + .art { box-shadow: 0 0 0 3px var(--hype) }
details { background: var(--bg2); border-radius: 12px; padding: 0 14px }
details[open] { padding-bottom: 14px }
summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer }
details > *:not(summary) { margin-top: 10px }
.sticky-act { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; z-index: 5 }
.preview { position: sticky; top: calc(var(--top) + 16px); display: grid; gap: 8px; min-width: 0 }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px }
.tile { background: var(--bg2); border-radius: 12px; padding: 14px; min-width: 0 }
.tile b { display: block; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums }
.tile span { color: var(--ink2); font-size: 13px }
.vbars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; height: 190px; align-items: end }
.vb { display: grid; grid-template-rows: auto 1fr auto; height: 100%; justify-items: center; min-width: 0 }
.vb b { font-size: 13px; font-variant-numeric: tabular-nums }
.vb i { width: 70%; max-width: 32px; background: var(--hype); border-radius: 4px 4px 0 0; align-self: end; min-height: 2px }
.vb span { font-size: 13px; color: var(--ink2); white-space: nowrap }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.hbars li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto; gap: 10px; align-items: center }
.hbars span { overflow-wrap: anywhere; font-size: 14px }
.hb { height: 10px; border-radius: 5px; background: var(--bg3); overflow: hidden }
.hb i { display: block; height: 100%; background: var(--hype); border-radius: 5px }
.hbars b { font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right }
.table-wrap { overflow-x: auto; max-width: 100% }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px }
.tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle }
.tbl th { font-size: 13px; color: var(--ink2); font-weight: 600; white-space: nowrap }
.tbl td.row { display: flex; gap: 6px }
.tbl tr.ours td { background: var(--hype-soft) }
.tbl .av { vertical-align: middle }
.mono { font-family: var(--mono); font-size: 13px }
.vs td { text-align: center }
.vs td:first-child, .vs th:first-child { text-align: left }
.vs .no { color: var(--ink2) }
.vs .part { font-size: 13px; color: var(--warn); font-weight: 600 }
.vs .q { color: var(--warn); font-weight: 800 }
.markets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px }
.market { margin: 0 }
.m-head { display: grid; gap: 2px; margin-bottom: 10px }
.m-head b { font-size: 16px }
.share { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.share li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 4ch; gap: 10px; align-items: center }
.share a { overflow-wrap: anywhere }
.share b { text-align: right; font-variant-numeric: tabular-nums }
.words { display: grid; gap: 12px }
.word { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center }
.word h2 { margin: 6px 0 4px }
.word p { margin: 0; color: var(--ink2); max-width: 70ch }
.word.said { box-shadow: inset 0 0 0 2px var(--ok) }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-weight: 700; font-size: 13px }

/* ---------- footer and toast */
.foot { margin-top: 40px; padding: 24px 0; border-top: 1px solid var(--line); display: grid; gap: 10px }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px }
.foot-links a { color: var(--ink2); font-size: 13px; min-height: 32px; display: inline-flex; align-items: center }
.foot a:hover { color: var(--ink) }
.foot .fine a { color: var(--link); text-decoration: underline }
#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 12px; display: flex; gap: 12px; align-items: center; width: max-content; max-width: min(560px, calc(100vw - 32px)); box-shadow: var(--shadow); font-weight: 600 }
#toast .btn { background: var(--bg); color: var(--ink) }

@media (max-width: 1099px) {
  .watch { grid-template-columns: minmax(0, 1fr) }
  .comm-body { grid-template-columns: minmax(0, 1fr) }
  .comm-side { position: static }
  .create-wrap { grid-template-columns: minmax(0, 1fr) }
  .preview { position: static; order: -1 }
}
@media (max-width: 759px) {
  #toast { bottom: calc(var(--tabs) + 16px + env(safe-area-inset-bottom, 0px)) }
  .sticky-act { bottom: calc(var(--tabs) + env(safe-area-inset-bottom, 0px)) }
  .vb:nth-child(even) span { visibility: hidden }
  .vb b { display: none }
  .page-h h1 { font-size: 22px }
}
@media (max-width: 480px) {
  .miles { grid-template-columns: minmax(0, 1fr) }
  .nx { grid-template-columns: 132px minmax(0, 1fr) }
  .lines li { grid-template-columns: minmax(0, 1fr) auto }
  .lines li > .fine:last-child { grid-column: 1 / -1 }
  .hero > .art { padding: 16px 18px 80px }
  .hbars li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto }
}
@media (prefers-reduced-motion: no-preference) { .btn, .chip, .hy, .nav-i, .seg a { transition: background-color .15s, color .15s, opacity .15s } }

/* ---------- stylishly neutral (owner, 10-30): black, white and grey carry the app so every host's cover is the color on the page;
   pink is only the mark and the hype itself */
#top .create-btn, #top .create-btn:hover { background: var(--ink); color: var(--bg) }
.me-btn .join { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink) }
.tab-create .ic { background: var(--ink); color: var(--bg) }
.btn.hype, .btn.hype:hover { background: var(--ink); color: var(--bg) }
.btn.hype-btn.on, .btn.hype-btn.on:hover { background: var(--hype); color: var(--hype-ink) }
.yours > b { color: var(--ink2) }
.yours a { background: var(--bg2) }
.yours em { color: var(--ink2) }
.dot-live { background: var(--ink2) }
.why::before { background: var(--ink2) }
.sign { border-color: var(--ink) }
.new-banner { background: var(--bg2) }
.big-n b { color: var(--ink) }
.bar-fill { background: var(--bg3) }
.badge { background: var(--bg2); color: var(--ink) }
.lines .pos { color: var(--ink) }
.inbox li.new { background: var(--bg2) }
.vb i, .hb i { background: var(--ink2) }
.tbl tr.ours td { background: var(--bg2) }
.art { background: radial-gradient(120% 90% at 0% 0%, hsl(var(--h) 55% 52%) 0%, transparent 62%), linear-gradient(135deg, hsl(var(--h) 38% 30%), hsl(calc(var(--h) + 30) 40% 16%)) }
@media (max-width: 480px) {
  .acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 6px }
  .acts .btn { padding: 0 10px; min-width: 0 }
  .acts .btn span { overflow: hidden; text-overflow: ellipsis }
  .acts .btn.icon-only { width: 44px; padding: 0 }
}
@media (max-width: 380px) {
  .acts { grid-template-columns: auto minmax(0, 1fr) auto auto }
  .acts .hype-btn span, .acts .btn[data-act="share"] span { display: none }
  .acts .hype-btn, .acts .btn[data-act="share"] { min-width: 44px; padding: 0 12px }
}

/* ---------- Hype's own look (10-30): a gathering card leads with WHEN; wider covers; the feed is banded by time */
.thumb { aspect-ratio: 2 / 1; border-radius: 16px }
.dt { flex: none; width: 46px; display: grid; justify-items: center; align-content: center; gap: 0; padding: 6px 0 7px; border-radius: 12px; background: var(--bg2); color: var(--ink); line-height: 1.05 }
.dt span { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2) }
.dt b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums }
.dt.live { background: var(--live); color: #FFFFFF }
.dt.live span { color: #FFFFFF }
.dt.live b { font-size: 13px; letter-spacing: .06em }
.dt.past { opacity: .7 }
.band { margin: 6px 0 4px }
.band-h { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 4px 0 14px }
.band-h > span:last-child { font-size: 13px; font-weight: 700; color: var(--ink2); background: var(--bg2); border-radius: 999px; padding: 2px 9px }
.band-h .dot-live { width: 10px; height: 10px }
.row-scroll .thumb, .nx-t { aspect-ratio: 16 / 9 }

/* ---------- X-style icons (10-30): outline when off, filled when on; the current page's nav icon is filled; pips like X's dot */
.icw { position: relative; display: inline-flex; flex: none }
.icw .ic-fill { display: none }
.nav-i.on .icw .ic-line, .tab.on .icw .ic-line { display: none }
.nav-i.on .icw .ic-fill, .tab.on .icw .ic-fill { display: block }
.pip { position: absolute; top: -1px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--hype); box-shadow: 0 0 0 2px var(--bg) }
.pip.live { background: var(--live) }
.tab .icw { margin-bottom: 1px }
.tab-create .icw .ic-fill, .tab-create .icw .ic-line { display: block }
.tab-create .icw .ic-fill { display: none }

/* ---------- adaptive (10-30): high contrast strengthens lines and secondary text; text size scales the whole page */
@media (prefers-contrast: more) {
  :root { --ink2: #333333; --line: #8A8A8A; --bg3: #CFCFCF }
  :root[data-theme="dark"] { --ink2: #D6D6D6; --line: #6E6E6E; --bg3: #4A4A4A }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink2: #D6D6D6; --line: #6E6E6E; --bg3: #4A4A4A } }
:root[data-text="large"] body { zoom: 1.12 }
:root[data-text="xl"] body { zoom: 1.25 }
.setting > span small { display: block; font-weight: 400; margin-top: 2px }

/* ---------- wide screens: the menu button collapses the rail to icons (YouTube's mini guide) */
@media (min-width: 1200px) {
  body.rail-mini .shell { grid-template-columns: var(--mini) minmax(0, 1fr) }
  body.rail-mini .rail { padding: 4px }
  body.rail-mini .rail .rail-sec { border: 0; padding: 0 }
  body.rail-mini .rail .rail-sec:not(:first-child) { display: none }
  body.rail-mini .rail .nav-i { flex-direction: column; gap: 4px; justify-content: center; min-height: 68px; padding: 6px 2px; font-size: 13px; text-align: center }
}

/* ---------- from the crawl: a send button is visibly off until its form has text; "Going" flashes your place */
.btn:disabled, .btn[disabled] { opacity: .42; cursor: not-allowed; pointer-events: none }
#place.flash { animation: placeFlash 1.6s ease-out }
@keyframes placeFlash { 0%, 40% { box-shadow: 0 0 0 3px var(--ink) } 100% { box-shadow: 0 0 0 0 transparent } }
@media (prefers-reduced-motion: reduce) { #place.flash { animation: none; box-shadow: 0 0 0 3px var(--ink) } }

/* ---------- the sync pill: shows only when something is waiting or the connection is down */
.sync { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: var(--bg2); color: var(--ink2); white-space: nowrap }
.sync.off { background: var(--warn-soft); color: var(--warn) }
@media (max-width: 480px) { .sync { max-width: 120px; overflow: hidden; text-overflow: ellipsis } }

/* ---------- growth + the going card (10-30) */
.rise { color: var(--hype); font-weight: 700 }
.rise::before { content: "▲ " }
#top .install { background: var(--bg2) }
.story-btn { width: 100%; justify-content: flex-start }
.story-out { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap }
.story-out img { width: 120px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow) }
.story-out .stack { flex: 1 1 200px; min-width: 0 }
.going-card { display: grid; gap: 12px }
.going-card .gc-when { display: flex; gap: 12px; align-items: center }
.going-card .gc-when > div { display: grid; min-width: 0 }
.going-card .gc-when > div span { color: var(--ink2); font-size: 13px; overflow-wrap: anywhere }
.going-card .dt { background: var(--bg) }
.going-card .gc-left { margin: 0; font-weight: 700 }
.going-card .btn.big { width: 100% }
.gc-faces { display: flex; align-items: center }
.gc-faces .av { margin-right: -8px; box-shadow: 0 0 0 2px var(--bg2) }
.gc-faces span { margin-left: 14px; color: var(--ink2); font-size: 13px; font-weight: 600 }
.gc-hosts { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px }
.gc-hosts .who { display: flex; align-items: center; gap: 10px; min-height: 36px }
.only-narrow { display: none }
@media (max-width: 1099px) { .only-wide { display: none } .only-narrow { display: grid } }

/* ---------- from Build's census (job a0d1197e, merged 10-30): every link on a card is at least 24 px tall; a cover's words stay
   clear of its badges; the badges and a face pile are picture chrome (clicks pass to the cover) */
.txt h3 a { padding: 3px 0 }
.sub { align-items: center }
.sub a { display: inline-flex; align-items: center; min-height: 24px }
.c-meta a { display: inline-flex; align-items: center; min-height: 24px }
.foot .fine a, .sign-row .fine a { display: inline-block; min-height: 24px; line-height: 24px }
.thumb .art-c { justify-self: start; max-width: calc(100% - 96px); overflow-wrap: anywhere }
.thumb .kind, .thumb .sample, .thumb .tb, .crowd .av { pointer-events: none }

/* ---------- codes, questions, series, giveaway, posters (10-30) */
.miles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)) }
.early { margin: 8px 0 0; font-weight: 700; color: var(--ok) }
.codebox { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 12px; padding: 12px; border-radius: var(--r); background: var(--bg2) }
.codebox label { flex: 1 1 200px; min-width: 0 }
.codebox input { text-transform: uppercase; letter-spacing: .12em; font-family: var(--mono) }
.codes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.codes li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--bg) }
.codes li input { flex: 1 1 220px; min-width: 0; width: auto !important; font-size: 13px !important; min-height: 36px !important }
.codes .mono { font-size: 15px; letter-spacing: .12em }
.win { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px; border-radius: 12px; background: var(--bg); margin-top: 10px }
.win > div { display: grid; flex: 1 1 160px }
.tbl td.ans { max-width: 280px; overflow-wrap: anywhere; font-size: 13px }
.comm-chip.on { box-shadow: inset 0 0 0 2px var(--ink) }
.poster-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 0 }
.poster { max-width: 720px; margin: 0 auto 32px; padding: 32px; border-radius: 20px; background: #FFFFFF; color: #0F0F0F; display: grid; gap: 12px; justify-items: center; text-align: center; box-shadow: var(--shadow) }
.poster-art { width: 100%; aspect-ratio: 2 / 1; border-radius: 16px; overflow: hidden; position: relative }
.poster-art > img, .poster-art > .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.poster h1 { margin: 8px 0 0; font-size: 36px; line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere }
.poster-when { margin: 0; font-size: 18px; color: #3A3A3A }
.poster-qr { width: min(320px, 70%); }
.poster-qr svg { width: 100%; height: auto; display: block }
.poster-cta { margin: 0; font-size: 22px; font-weight: 800 }
.poster-url { margin: 0; font-size: 13px; color: #5F5F5F; overflow-wrap: anywhere; max-width: 100% }
@media print {
  #top, #rail, #tabs, .foot, .no-print, #toast, .skip { display: none !important }
  body { background: #FFFFFF !important }
  .shell { display: block !important }
  main { padding: 0 !important }
  .poster { box-shadow: none; margin: 0 auto; page-break-inside: avoid }
}
@media print { #ld { display: none !important } }

/* 11-04 pivot proof (hype-crypto-web): a long title on a drop's art shrinks instead of being cut (titles go up to 90 characters); the hero's big art keeps its size */
.art .art-t.long { font-size: clamp(14px, 5.6cqi, 28px); -webkit-line-clamp: 4 }
.art .art-t.xlong { font-size: clamp(13px, 4.8cqi, 24px); -webkit-line-clamp: 5 }
.hero > .art .art-t.long, .hero > .art .art-t.xlong { font-size: clamp(22px, 5cqi, 48px) }

/* 11-04 (rivals A29): the host's "Invite a list" box under the line */
.inv-l { margin-top: 10px }
.inv-l > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 700 }
.inv-l > summary .fine { margin-left: auto }
.inv-f { display: grid; gap: 10px; padding-top: 8px }
.inv-f label { display: grid; gap: 4px; font-size: 14px }
.inv-f input[type=file] { min-height: 44px }