/* ============================================================================
   akdbkd

   The interface has no colour of its own.

   Every accent below resolves from --a-h / --a-s / --a-l, which ambient.js
   rewrites from the dominant colour of whatever video is on screen. The chrome
   is otherwise pure monochrome. A video platform's content is already the most
   saturated thing on the page, so a fixed brand accent can only compete with it
   or hide from it -- deriving from it means the chrome can never clash, and
   every clip gets its own environment.

   Navigation floats rather than framing. A full-height sidebar and a
   full-width tab bar both spend permanent screen area on something used for a
   fraction of a second; a glass rail that expands on intent, and a dock that
   hovers over the content, spend almost none.
   ========================================================================= */

:root {
  /* Content-derived accent, rewritten at runtime. These are the neutral
     defaults used before the first sample and for un-sampleable embeds. */
  --a-h: 0;
  --a-s: 0%;
  --a-l: 72%;

  --accent:      hsl(var(--a-h) var(--a-s) var(--a-l));
  --accent-dim:  hsl(var(--a-h) var(--a-s) var(--a-l) / .34);
  --accent-ghost: hsl(var(--a-h) var(--a-s) var(--a-l) / .12);
  --accent-glow: hsl(var(--a-h) calc(var(--a-s) + 12%) calc(var(--a-l) - 6%) / .5);

  /* True neutrals. No blue cast: a cool grey next to a hue-shifting accent
     reads as a second, unintended colour. */
  --ink-0: #08080a;
  --ink-1: #101012;
  --ink-2: #17171a;
  --ink-3: #202024;
  --ink-4: #2e2e34;

  --fg:   #fafafa;
  --fg-2: #a3a3ac;
  /* Was #6e6e78, which measured 3.97:1 on the darkest ground -- under the
     4.5:1 WCAG AA needs for body text, and this token is used for
     timestamps, counts and hints, all of which are body text. */
  --fg-3: #90909c;

  --warn: #f5a524;
  --bad:  #f04438;

  /* Glass. One recipe, used for every floating surface, so they read as the
     same material rather than as separate panels. */
  --glass: color-mix(in srgb, var(--ink-1) 62%, transparent);
  --glass-line: color-mix(in srgb, #ffffff 9%, transparent);
  --glass-spec: color-mix(in srgb, #ffffff 16%, transparent);
  --blur: saturate(180%) blur(22px);

  --t-xs: 11px; --t-sm: 13px; --t-md: 15px; --t-lg: 19px; --t-xl: 25px; --t-2xl: 34px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 36px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --dock-h: 62px;
  --dock: calc(var(--dock-h) + var(--safe-b) + 12px);

  /* Two springs. Soft for surfaces, snappy for direct manipulation --
     anything the finger is on should settle faster than anything it isn't. */
  --spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%,
                   .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 60.2%, 1.001);
  --snap: cubic-bezier(.2, .9, .3, 1.2);
  --ease: cubic-bezier(.22, .61, .36, 1);

  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, system-ui, sans-serif;
  font-size: var(--t-md);
  color-scheme: dark;
}

.display {
  font-family: "Bricolage Grotesque", var(--font-ui, system-ui), sans-serif;
  font-variation-settings: "wdth" 96, "opsz" 24;
  letter-spacing: -.03em;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  background: var(--ink-0); color: var(--fg);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }

/* ============================================================================
   Identity — monochrome. The mark picks up the ambient accent only on the
   boot screen, where there is no video to take colour from yet.
   ========================================================================= */

.mark { display: block; overflow: visible; color: var(--fg); }

/* The boot mark performs the gesture it depicts: the incoming card drops into
   place while the settled one rises to meet it. The logo is the loading
   animation, so there is no separate spinner to design. */
.mark.is-drawing .mark-back {
  transform-origin: 26.5px 11.5px;
  animation: card-in .62s var(--spring) .1s both;
}
.mark.is-drawing .mark-front {
  transform-origin: 21.5px 31px;
  animation: card-settle .55s var(--spring) both;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(-11px) scale(.86); }
  to   { opacity: .45; transform: none; }
}
@keyframes card-settle {
  from { opacity: 0; transform: translateY(9px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

.wordmark {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-variation-settings: "wdth" 88;
  font-weight: 700; letter-spacing: -.055em; color: var(--fg);
}
.lockup { display: inline-flex; align-items: center; gap: var(--sp-2); }

.boot {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: var(--sp-4);
  background: var(--ink-0);
  transition: opacity .5s var(--ease), visibility .5s;
}
.boot.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot::after {
  /* A single slow breath of light behind the mark. The only moment the
     product shows colour before content does. */
  content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, hsl(0 0% 100% / .07), transparent 62%);
  animation: breathe 3.4s var(--ease) infinite;
}
@keyframes breathe { 0%, 100% { transform: scale(.9); opacity: .5; } 50% { transform: scale(1.06); opacity: 1; } }
.boot > * { position: relative; z-index: 1; }
.boot-word {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-variation-settings: "wdth" 88;
  font-size: var(--t-lg); font-weight: 700; letter-spacing: -.05em;
  opacity: 0; animation: fade-up .6s var(--ease) .8s forwards;
}
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================================
   Screens
   ========================================================================= */

.screen { position: fixed; inset: 0; overflow-y: auto; }
.screen[data-screen="feed"] { overflow: hidden; }
.screen:not([data-screen="feed"]) { padding-bottom: var(--dock); background: var(--ink-0); }

.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: calc(var(--safe-t) + var(--sp-4)) var(--sp-4) var(--sp-3);
  background: linear-gradient(to bottom, var(--ink-0) 62%, transparent);
}
.bar h1 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-variation-settings: "wdth" 92;
  font-size: var(--t-xl); font-weight: 700; letter-spacing: -.035em;
  margin: 0; flex: 1;
}
.bar-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-sm); font-weight: 600; color: var(--fg-2);
  padding: 8px 10px; border-radius: var(--r-full);
  background: var(--ink-2);
  transition: background .18s, color .18s, transform .18s var(--snap);
}
.bar-btn:hover { background: var(--ink-3); color: var(--fg); }
.bar-btn:active { transform: scale(.94); }
.pad { padding: 0 var(--sp-4) var(--sp-6); }

/* ============================================================================
   Feed
   ========================================================================= */

.feed-top {
  position: fixed; z-index: 14; left: 0; right: 0;
  top: calc(var(--safe-t) + var(--sp-3));
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--sp-3); pointer-events: none;
}

/* Segmented control on glass, not two bare words. The moving pill is the
   affordance -- it shows the two are one control with one state. */
.scopes {
  position: relative; display: flex; pointer-events: auto;
  padding: 3px; border-radius: var(--r-full);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.scopes::before {
  content: ""; position: absolute; z-index: 0;
  top: 3px; bottom: 3px; left: 3px; width: var(--pill-w, 84px);
  border-radius: var(--r-full);
  background: hsl(0 0% 100% / .13);
  transform: translateX(var(--pill-x, 0));
  transition: transform .42s var(--spring), width .42s var(--spring);
}
.scope {
  position: relative; z-index: 1;
  padding: 7px 15px; border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: 600; color: var(--fg-2);
  white-space: nowrap; transition: color .24s;
}
.scope.is-on { color: var(--fg); }

.sound {
  position: absolute; right: var(--sp-3); pointer-events: auto;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: transform .3s var(--spring), background .2s;
}
.sound:hover { background: var(--ink-3); }
.sound:active { transform: scale(.88); }
.sound[data-state="off"] .sound-on, .sound[data-state="on"] .sound-off { display: none; }

.unmute-nudge {
  position: fixed; z-index: 14;
  top: calc(var(--safe-t) + 60px); right: var(--sp-3);
  font-size: var(--t-xs); font-weight: 600;
  padding: 7px 12px; border-radius: var(--r-full);
  background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  animation: nudge-in .5s var(--spring);
}
@keyframes nudge-in { from { opacity: 0; transform: translateY(-8px) scale(.92); } }

.feed {
  height: 100dvh; overflow-y: scroll;
  scroll-snap-type: y mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.feed::-webkit-scrollbar { display: none; }

.card {
  position: relative; height: 100dvh;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; place-items: center;
  overflow: hidden; contain: layout paint;
}
/* The card takes focus so a keyboard user can reach the rail inside it.
   Without a tabindex the like, comment, save and follow controls were
   unreachable without a mouse. */
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

.frame { position: absolute; inset: 0; overflow: hidden; background: #000; }
.stage { position: absolute; inset: 0; display: grid; place-items: center; }
.card video,
.card .yt {
  width: 100%; height: 100%;
  object-fit: cover;          /* fill the frame -- same on every breakpoint,
                                 same for hosted and embedded video */
  background: #000; display: block;
}
.card .yt { width: 100%; height: 100%; border: 0; display: block; }
.card.is-embed .pause-glyph, .card.is-embed .progress { display: none; }

.frame::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48%;
  background: linear-gradient(to top, rgb(0 0 0 / .82), rgb(0 0 0 / .3) 44%, transparent);
  pointer-events: none;
}
.frame > * { position: relative; z-index: 1; }
.frame > .stage { z-index: 0; }

/* ---- caption ------------------------------------------------------------ */

.card-meta {
  position: absolute; z-index: 3; left: 0; right: 88px;
  bottom: calc(var(--dock) + var(--sp-3)); padding: 0 var(--sp-4);
}
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-2); }
.ai-badge, .src-badge, .remix-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-full); color: var(--fg);
  background: color-mix(in srgb, #000 46%, transparent);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  text-decoration: none;
}
.ai-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--warn); }

.card-author { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 6px; }
.avatar {
  width: 34px; height: 34px; border-radius: var(--r-full);
  display: grid; place-items: center; flex: none;
  font-size: var(--t-sm); font-weight: 700; color: #fff;
  box-shadow: inset 0 0 0 1.5px hsl(0 0% 100% / .32);
}
.card-handle { font-size: var(--t-md); font-weight: 700; letter-spacing: -.015em; }

/* Follow reads as accent-tinted glass, so it belongs to the content it sits
   on rather than to a brand palette. */
.follow-pill {
  font-size: var(--t-xs); font-weight: 700; padding: 5px 12px;
  border-radius: var(--r-full); color: var(--fg);
  background: var(--accent-ghost);
  border: 1px solid var(--accent-dim);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .28s var(--spring), background .2s, border-color .2s;
}
.follow-pill:hover { background: var(--accent-dim); }
.follow-pill:active { transform: scale(.9); }
.follow-pill.is-on { background: transparent; border-color: hsl(0 0% 100% / .22); color: var(--fg-2); }

.card-caption {
  font-size: var(--t-sm); line-height: 1.48; margin: 0 0 2px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 12px rgb(0 0 0 / .55);
}
.card-caption.is-open { -webkit-line-clamp: unset; line-clamp: unset; }
.caption-more { font-size: var(--t-sm); font-weight: 600; color: var(--fg-2); }

/* Not the accent.
   The accent is derived from the dominant colour of the video it sits on, so
   accent-coloured text placed directly over that video is guaranteed to be
   the lowest-contrast pairing available -- green topics on a green clip.
   The accent is only safe where something opaque sits behind it. */
.card-topics {
  font-size: var(--t-sm); font-weight: 600; margin: 3px 0 0;
  color: var(--fg);
  text-shadow: 0 1px 12px rgb(0 0 0 / .7);
}

.sound-chip {
  display: inline-flex; align-items: center; gap: 7px; margin-top: var(--sp-2);
  font-size: var(--t-xs); font-weight: 600; max-width: 100%;
  padding: 6px 13px 6px 9px; border-radius: var(--r-full);
  background: color-mix(in srgb, #000 42%, transparent);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.sound-chip svg { width: 13px; height: 13px; flex: none; color: var(--accent); animation: spin 5.5s linear infinite; }
.sound-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- rail --------------------------------------------------------------- */

.rail {
  position: absolute; z-index: 3; right: var(--sp-2);
  bottom: calc(var(--dock) + var(--sp-3));
  display: flex; flex-direction: column; gap: var(--sp-4); align-items: center;
}
.rail button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  transition: transform .3s var(--spring);
}
.rail button:active { transform: scale(.84); }
.rail svg {
  width: 27px; height: 27px;
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / .55));
}
.rail .n { text-shadow: 0 1px 6px rgb(0 0 0 / .7); }
/* A liked heart must be recognisable on any frame, so it keeps a fixed hue
   rather than borrowing the video's. Everything else on the rail stays
   monochrome, so one steady colour still means exactly one thing. */
.rail .is-on { color: #ff3b5c; }
.rail .is-on svg {
  animation: pop .42s var(--spring);
  filter: drop-shadow(0 0 10px rgb(255 59 92 / .55)) drop-shadow(0 1px 4px rgb(0 0 0 / .8));
}
@keyframes pop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.34) rotate(-7deg); } }

.progress {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  height: 2px; background: hsl(0 0% 100% / .13);
}
.progress i {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.pause-glyph {
  position: absolute; z-index: 4; inset: 0; display: grid; place-items: center;
  pointer-events: none; opacity: 0; transform: scale(.7);
  transition: opacity .2s var(--ease), transform .3s var(--spring);
}
.pause-glyph.show { opacity: 1; transform: scale(1); }
.pause-glyph svg { width: 74px; height: 74px; filter: drop-shadow(0 4px 20px rgb(0 0 0 / .7)); }

.spinner {
  position: absolute; z-index: 4; width: 28px; height: 28px;
  border: 2px solid hsl(0 0% 100% / .16); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .68s linear infinite;
  opacity: 0; transition: opacity .2s;
}
.spinner.show { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

.burst {
  position: absolute; z-index: 5; pointer-events: none;
  width: 96px; height: 96px; margin: -48px 0 0 -48px;
  color: var(--accent); opacity: 0;
}
.burst.go { animation: burst .8s var(--spring) forwards; }
@keyframes burst {
  0%   { opacity: 0; transform: scale(.25) rotate(-16deg); }
  20%  { opacity: 1; transform: scale(1.16) rotate(8deg); }
  52%  { opacity: 1; transform: scale(1) rotate(-3deg); }
  100% { opacity: 0; transform: scale(1.3) translateY(-34px); }
}

.video-dead {
  position: absolute; z-index: 4; inset: 0; display: grid; place-items: center;
  color: var(--fg-3); font-size: var(--t-sm); pointer-events: none;
}

/* ============================================================================
   Dock — floating, not a bar. Rounded, inset, glass, hovering over content
   instead of walling it off.
   ========================================================================= */

.dock {
  position: fixed; z-index: 20;
  left: 50%; bottom: calc(var(--safe-b) + 10px);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px;
  padding: 6px; border-radius: var(--r-full);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 8px 34px rgb(0 0 0 / .5), inset 0 1px 0 var(--glass-spec);
}
.tab {
  position: relative;
  width: 56px; height: 46px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: var(--r-full);
  font-size: 9.5px; font-weight: 600; color: var(--fg-3);
  transition: color .22s, background .22s, transform .3s var(--spring);
}
.tab:active { transform: scale(.9); }
.tab.is-active { color: var(--fg); }
.tab.is-active::after {
  content: ""; position: absolute; bottom: 4px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: dot-in .4s var(--spring);
}
@keyframes dot-in { from { transform: scale(0); } }
.tab.is-active span:last-child { opacity: 0; }
.tab svg { width: 21px; height: 21px; }

.tab--post {
  width: 46px; height: 46px; border-radius: var(--r-full);
  background: var(--fg); color: var(--ink-0);
  margin: 0 2px;
  box-shadow: 0 3px 14px rgb(0 0 0 / .4);
}
.tab--post:hover { background: #fff; }
.tab--post svg { width: 20px; height: 20px; }

.badge {
  position: absolute; top: 4px; right: 10px;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: var(--r-full);
  background: var(--bad); color: #fff;
  font-size: 9px; font-weight: 800; font-style: normal;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--ink-0);
}

/* ============================================================================
   Lists, grids
   ========================================================================= */

.list-head {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3);
  margin: var(--sp-5) 0 var(--sp-2);
}
.list-empty { color: var(--fg-3); font-size: var(--t-sm); padding: var(--sp-6) 0; text-align: center; }

.row {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-3); margin-bottom: 2px; border-radius: var(--r-md);
  text-align: left; transition: background .18s;
}
.row:hover { background: var(--ink-1); }
.row-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.row-main b { font-size: var(--t-sm); font-weight: 600; }
.row-main small { font-size: var(--t-sm); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-side { font-size: var(--t-xs); color: var(--fg-3); flex: none; font-variant-numeric: tabular-nums; }
.row.is-new { background: var(--accent-ghost); }
.pip {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full);
  background: var(--accent); color: var(--ink-0);
  font-size: var(--t-xs); font-weight: 800; display: grid; place-items: center;
}

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  font-size: var(--t-sm); font-weight: 600; padding: 8px 14px;
  border-radius: var(--r-full); background: var(--ink-2);
  border: 1px solid transparent;
  transition: transform .24s var(--spring), background .18s, border-color .18s;
}
.chip:hover { background: var(--ink-3); border-color: var(--accent-dim); }
.chip:active { transform: scale(.93); }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: var(--sp-3); }
.cell {
  position: relative; aspect-ratio: 9 / 14; overflow: hidden;
  background: var(--ink-2); border-radius: var(--r-sm);
  transition: transform .32s var(--spring);
}
.cell:hover { transform: scale(1.035); z-index: 1; }
.cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cell-blank {
  position: absolute; inset: 0; display: grid; place-items: center; padding: var(--sp-2);
  font-size: var(--t-xs); color: var(--fg-3); text-align: center;
}
.cell-views {
  position: absolute; left: 7px; bottom: 6px;
  font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 5px rgb(0 0 0 / .9);
}
.cell-src {
  position: absolute; right: 5px; top: 5px;
  font-size: 9px; font-weight: 800; letter-spacing: .06em;
  background: rgb(0 0 0 / .62); padding: 2px 5px; border-radius: 5px;
}

.search-input, .share-input {
  width: 100%; padding: 13px var(--sp-4); font-size: 16px;
  background: var(--ink-1); border: 1px solid var(--ink-3);
  border-radius: var(--r-full); color: var(--fg);
  transition: border-color .2s, background .2s;
}
.search-input:focus, .share-input:focus {
  border-color: var(--accent); background: var(--ink-2); outline: none;
}
.share-input { border-radius: var(--r-md); margin-top: var(--sp-2); }

/* ============================================================================
   Profile
   ========================================================================= */

.profile-head { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-4) 0 var(--sp-5); }
.profile-head h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-variation-settings: "wdth" 92;
  margin: 0; font-size: var(--t-xl); font-weight: 700; letter-spacing: -.035em;
}
.profile-bio { margin: 0; color: var(--fg-2); font-size: var(--t-sm); text-align: center; max-width: 34ch; line-height: 1.5; }
.profile-stats { display: flex; gap: var(--sp-6); margin-top: var(--sp-2); }
.stat { display: grid; justify-items: center; gap: 1px; }
.stat b {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: var(--t-xl); font-weight: 700; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: var(--t-xs); color: var(--fg-3); }
.profile-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.profile-actions .btn { width: auto; padding: 11px 26px; margin: 0; }
.streak {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-xs); font-weight: 700; padding: 5px 12px;
  border-radius: var(--r-full);
  color: var(--accent); background: var(--accent-ghost);
  border: 1px solid var(--accent-dim);
}

/* ============================================================================
   Messages
   ========================================================================= */

.thread-body {
  position: absolute; inset: 68px 0 76px; overflow-y: auto;
  padding: var(--sp-4); display: flex; flex-direction: column; gap: 6px;
}
.bubble {
  max-width: 76%; align-self: flex-start;
  background: var(--ink-2); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 5px;
  padding: 10px var(--sp-4); font-size: var(--t-sm); line-height: 1.45;
  animation: bubble-in .34s var(--spring);
}
.bubble.mine {
  align-self: flex-end; color: var(--ink-0);
  background: var(--accent);
  border-radius: var(--r-lg) var(--r-lg) 5px var(--r-lg);
}
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.bubble-video { display: block; font-weight: 700; text-decoration: underline; margin-top: 3px; }

.composer {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: var(--sp-2); padding: var(--sp-3);
  background: var(--ink-0); border-top: 1px solid var(--ink-2);
}
.composer input {
  flex: 1; padding: 12px var(--sp-4); font-size: 16px;
  background: var(--ink-1); border: 1px solid var(--ink-3);
  border-radius: var(--r-full); color: var(--fg);
}
.composer input:focus { border-color: var(--accent); outline: none; }
.composer .btn { width: auto; margin: 0; padding: 12px var(--sp-4); border-radius: var(--r-full); }
.sheet .composer { position: static; padding: var(--sp-3) 0 0; background: none; border: 0; }

/* ============================================================================
   Sheets
   ========================================================================= */

.scrim {
  position: fixed; inset: 0; z-index: 30;
  background: rgb(0 0 0 / .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade .26s var(--ease);
}
@keyframes fade { from { opacity: 0; } }

.sheet {
  position: fixed; z-index: 40;
  left: var(--sp-2); right: var(--sp-2);
  bottom: calc(var(--safe-b) + var(--sp-2));
  max-height: 88dvh; overflow-y: auto;
  background: var(--ink-1);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-xl);
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  box-shadow: 0 20px 60px rgb(0 0 0 / .68), inset 0 1px 0 var(--glass-spec);
  animation: rise .44s var(--spring);
}
.sheet--tall { height: 78dvh; display: flex; flex-direction: column; }
@keyframes rise { from { transform: translateY(110%); } }

.sheet-grab { width: 40px; height: 4px; border-radius: var(--r-full); background: var(--ink-4); margin: 0 auto var(--sp-4); }
.sheet-brand { display: flex; justify-content: center; margin-bottom: var(--sp-3); }
.sheet h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-variation-settings: "wdth" 92;
  margin: 0 0 3px; font-size: var(--t-xl); font-weight: 700; letter-spacing: -.035em;
}
.sheet .sub { margin: 0 0 var(--sp-4); font-size: var(--t-sm); color: var(--fg-3); line-height: 1.5; }

.prompt {
  margin: 0 0 var(--sp-3); padding: 11px var(--sp-4);
  border-radius: var(--r-md); font-size: var(--t-sm); font-weight: 600;
  color: var(--accent); background: var(--accent-ghost);
  border: 1px solid var(--accent-dim);
}
.context { margin: 0 0 var(--sp-3); font-size: var(--t-sm); font-weight: 600; color: var(--accent); }

.field { display: block; margin-bottom: var(--sp-3); }
.field > span {
  display: block; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px;
}
.field > span em { font-style: normal; opacity: .65; text-transform: none; letter-spacing: 0; }
.field input, .field select {
  width: 100%; padding: 13px var(--sp-4);
  background: var(--ink-0); border: 1px solid var(--ink-3);
  border-radius: var(--r-md); font-size: 16px;   /* 16px or iOS zooms on focus */
  transition: border-color .18s, background .18s;
}
.field input:focus, .field select:focus { border-color: var(--accent); background: var(--ink-1); outline: none; }

.check { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--t-sm); line-height: 1.45; margin-bottom: var(--sp-1); }
.check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--accent); }
.hint { font-size: var(--t-xs); color: var(--fg-3); margin: 0 0 var(--sp-4); line-height: 1.5; }

.btn {
  display: block; width: 100%; padding: 14px; margin-top: var(--sp-2);
  border-radius: var(--r-md); background: var(--ink-3);
  font-size: var(--t-md); font-weight: 600;
  transition: transform .22s var(--spring), background .18s, opacity .18s;
}
.btn:hover { background: var(--ink-4); }
.btn:active { transform: scale(.978); }
/* The one solid-white control on the page. Monochrome, so it stays the
   primary action regardless of what colour the content is throwing off. */
.btn--primary { background: var(--fg); color: var(--ink-0); }
.btn--primary:hover { background: #fff; }
.btn--quiet { background: none; color: var(--fg-3); font-weight: 500; font-size: var(--t-sm); }
.btn--quiet:hover { background: none; color: var(--fg-2); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.err { color: var(--bad); font-size: var(--t-sm); margin: var(--sp-1) 0 0; min-height: 18px; }
.bar-progress { height: 3px; background: var(--ink-3); border-radius: 2px; overflow: hidden; margin: var(--sp-3) 0; }
.bar-progress i { display: block; height: 100%; width: 0; background: var(--fg); transition: width .2s var(--ease); }

/* comments */
.comment-list { flex: 1; overflow-y: auto; margin-bottom: var(--sp-2); }
.comment { padding: var(--sp-3) 0; border-bottom: 1px solid var(--ink-2); }
.comment.is-reply { padding-left: var(--sp-5); border-bottom: 0; padding-bottom: var(--sp-2); }
.comment-head { display: flex; align-items: center; gap: var(--sp-2); }
.comment-head b { font-size: var(--t-sm); font-weight: 600; }
.comment-head small { font-size: var(--t-xs); color: var(--fg-3); }
.tag {
  font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  background: var(--accent-ghost); color: var(--accent);
  padding: 2px 6px; border-radius: 5px;
}
.comment-body { margin: 4px 0 6px; font-size: var(--t-sm); line-height: 1.5; }
.comment-tools { display: flex; gap: var(--sp-4); }
.comment-tools button { font-size: var(--t-xs); font-weight: 600; color: var(--fg-3); transition: color .18s; }
.comment-tools button:hover { color: var(--fg-2); }
.comment-tools button.is-on { color: var(--accent); }
.replying { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-xs); color: var(--fg-3); padding: 7px 0; }
.replying button { font-weight: 600; color: var(--accent); }

.account-row { display: flex; justify-content: space-between; padding: var(--sp-3) 0; border-bottom: 1px solid var(--ink-2); font-size: var(--t-sm); }
.account-row span:last-child { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.toggle-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--ink-2); font-size: var(--t-sm); }
.toggle-row input { width: 20px; height: 20px; accent-color: var(--accent); }

/* ============================================================================
   States
   ========================================================================= */

.state {
  position: absolute; inset: 0; z-index: 8;
  display: grid; place-content: center; justify-items: center;
  text-align: center; gap: var(--sp-2); padding: var(--sp-6);
  background: var(--ink-0);
}
.state svg { width: 44px; height: 44px; color: var(--ink-4); }
.state h1 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-variation-settings: "wdth" 92;
  font-size: var(--t-2xl); margin: var(--sp-3) 0 0; letter-spacing: -.04em; font-weight: 700;
}
.state p { color: var(--fg-3); margin: 0 0 var(--sp-4); max-width: 28ch; line-height: 1.55; }
.state .btn { width: auto; padding: 13px var(--sp-5); }

.banner {
  position: fixed; z-index: 30; top: calc(var(--safe-t) + 8px);
  left: 50%; transform: translateX(-50%);
  padding: 8px var(--sp-4); border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: 600;
  background: var(--warn); color: var(--ink-0);
  animation: nudge-in .4s var(--spring);
}

.toast {
  position: fixed; z-index: 60; left: 50%;
  bottom: calc(var(--dock) + var(--sp-4));
  transform: translate(-50%, 10px);
  padding: 11px var(--sp-4); border-radius: var(--r-full);
  background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 8px 30px rgb(0 0 0 / .5);
  font-size: var(--t-sm); font-weight: 500; max-width: 84vw;
  opacity: 0; pointer-events: none;
  transition: opacity .26s var(--ease), transform .44s var(--spring);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .mark.is-drawing .mark-back { opacity: .45; transform: none; }
  .mark.is-drawing .mark-front { opacity: 1; transform: none; }
  .boot-word { opacity: 1; }
  .spinner { animation: spin 1.4s linear infinite; }
  .sound-chip svg { animation: none; }
}

/* ============================================================================
   Desktop

   The rail floats: inset from every edge, rounded, glass, 72px of icons that
   expands to 232px on hover. A full-height panel spends permanent screen width
   on navigation used for a fraction of a second, and on a video product that
   width is the product.

   Behind the frame sits an ambient wash of the current clip's colour, so the
   page around the video is lit by the video. It is the same idea as the
   accent, at room scale.
   ========================================================================= */

.rail-nav { display: none; }

@media (min-width: 900px) {
  :root {
    --rail-w: 72px;
    --rail-open: 232px;
    --stage-w: min(408px, calc((100dvh - 132px) * 0.5625));
  }

  .dock { display: none; }

  .rail-nav {
    position: fixed; z-index: 26;
    top: var(--sp-4); bottom: var(--sp-4); left: var(--sp-4);
    width: var(--rail-w);
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding: var(--sp-3);
    border-radius: var(--r-xl);
    background: var(--glass);
    border: 1px solid var(--glass-line);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    box-shadow: 0 16px 50px rgb(0 0 0 / .5), inset 0 1px 0 var(--glass-spec);
    overflow: hidden;
    transition: width .5s var(--spring);
  }
  .rail-nav:hover, .rail-nav:focus-within { width: var(--rail-open); }

  .rail-brand {
    display: flex; align-items: center; gap: var(--sp-3);
    height: 46px; padding: 0 9px; flex: none;
    margin-bottom: var(--sp-2);
  }

  .rail-items { display: flex; flex-direction: column; gap: 3px; }

  .rail-item {
    position: relative;
    display: flex; align-items: center; gap: var(--sp-3);
    height: 46px; padding: 0 12px; border-radius: var(--r-md);
    color: var(--fg-3); text-align: left; white-space: nowrap;
    transition: color .22s, background .22s;
  }
  .rail-item:hover { color: var(--fg); background: hsl(0 0% 100% / .05); }
  .rail-item.is-active { color: var(--fg); }
  /* Active state is an accent halo behind the icon, not a slab of grey --
     it tracks the content the way everything else does. */
  .rail-item.is-active::before {
    content: ""; position: absolute; left: 6px;
    width: 34px; height: 34px; border-radius: var(--r-sm);
    background: var(--accent-ghost);
    box-shadow: inset 0 0 0 1px var(--accent-dim);
  }
  .rail-item svg { flex: none; position: relative; z-index: 1; width: 22px; height: 22px; }
  .rail-item.is-active svg { color: var(--accent); }

  /* Labels are revealed by the rail's own width, staggered so the row reads
     left to right rather than appearing as a block. */
  .rail-label {
    font-size: var(--t-md); font-weight: 600;
    opacity: 0; transform: translateX(-6px);
    transition: opacity .26s var(--ease), transform .4s var(--spring);
  }
  .rail-nav:hover .rail-label,
  .rail-nav:focus-within .rail-label { opacity: 1; transform: none; }
  .rail-nav:hover .rail-item:nth-child(1) .rail-label { transition-delay: .02s; }
  .rail-nav:hover .rail-item:nth-child(2) .rail-label { transition-delay: .05s; }
  .rail-nav:hover .rail-item:nth-child(3) .rail-label { transition-delay: .08s; }
  .rail-nav:hover .rail-item:nth-child(4) .rail-label { transition-delay: .11s; }
  .rail-nav:hover .rail-item:nth-child(5) .rail-label { transition-delay: .14s; }
  .rail-nav:hover .rail-item:nth-child(6) .rail-label { transition-delay: .17s; }

  .rail-badge {
    position: absolute; left: 30px; top: 8px;
    min-width: 16px; height: 16px; padding: 0 5px; border-radius: var(--r-full);
    background: var(--bad); color: #fff;
    font-size: 9px; font-weight: 800; font-style: normal;
    display: grid; place-items: center; z-index: 2;
  }

  .rail-post {
    display: flex; align-items: center; gap: var(--sp-3);
    height: 46px; padding: 0 12px; margin-top: var(--sp-2);
    border-radius: var(--r-md);
    background: var(--fg); color: var(--ink-0);
    font-size: var(--t-md); font-weight: 700; white-space: nowrap;
    transition: transform .26s var(--spring), background .18s;
  }
  .rail-post:hover { background: #fff; }
  .rail-post:active { transform: scale(.96); }
  .rail-post svg { flex: none; width: 22px; height: 22px; }

  .rail-keys {
    margin-top: auto; padding: var(--sp-3) 12px 0;
    display: grid; gap: 7px; font-size: var(--t-xs); color: var(--fg-3);
    white-space: nowrap;
    opacity: 0; transition: opacity .24s var(--ease) .12s;
  }
  .rail-nav:hover .rail-keys, .rail-nav:focus-within .rail-keys { opacity: 1; }
  .rail-keys div { display: flex; align-items: center; gap: 6px; }
  kbd {
    font: inherit; font-size: 10px; font-weight: 700;
    background: var(--ink-3); border: 1px solid var(--ink-4);
    border-radius: 5px; padding: 1px 6px; color: var(--fg-2);
  }

  /* ---- layout ---------------------------------------------------------- */

  .screen { left: calc(var(--rail-w) + var(--sp-6)); }
  .screen:not([data-screen="feed"]) { padding-bottom: var(--sp-6); }
  .pad { max-width: 820px; padding: 0 var(--sp-6) var(--sp-6); }
  .bar { padding: var(--sp-5) var(--sp-6) var(--sp-3); }
  .bar h1 { max-width: 820px; }

  .feed-top { left: calc(var(--rail-w) + var(--sp-6)); top: var(--sp-5); }
  .sound { right: var(--sp-6); }
  .unmute-nudge { right: var(--sp-6); top: 70px; }

  /* ---- the stage ------------------------------------------------------- */

  .card {
    display: flex; align-items: center; justify-content: center;
    gap: var(--sp-5); padding: var(--sp-5) 0;
    background: var(--ink-0);
  }

  /* The room light. A soft wash of the clip's own colour behind the frame,
     so the page is lit by the content rather than sitting in a black void. */
  .card::before {
    content: ""; position: absolute; z-index: 0;
    width: min(78vw, 900px); aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
      hsl(var(--a-h) var(--a-s) var(--a-l) / .17), transparent 62%);
    filter: blur(46px);
    transition: background .8s var(--ease);
    pointer-events: none;
  }

  .frame {
    position: relative; inset: auto; z-index: 1;
    width: var(--stage-w);
    height: calc(var(--stage-w) / 0.5625);
    max-height: calc(100dvh - 96px);
    border-radius: var(--r-xl);
    overflow: hidden; background: #000;
    box-shadow: 0 30px 80px -24px rgb(0 0 0 / .92),
                0 0 0 1px hsl(0 0% 100% / .07),
                0 0 64px -18px var(--accent-glow);
    transition: box-shadow .8s var(--ease);
  }
  .stage { position: absolute; inset: 0; }

  .card-meta { right: var(--sp-4); bottom: var(--sp-4); padding: 0 var(--sp-4); }
  .progress { bottom: 0; }

  .rail {
    position: static; z-index: 1;
    justify-content: flex-end; padding-bottom: var(--sp-4);
    gap: var(--sp-5);
  }
  .rail button { color: var(--fg-2); transition: color .18s, transform .3s var(--spring); }
  .rail button:hover { color: var(--fg); transform: scale(1.08); }
  .rail button svg { filter: none; }
  .rail .is-on { color: var(--accent); }
  .rail .n { text-shadow: none; }

  .state { left: calc(var(--rail-w) + var(--sp-6)); }
  .toast { left: calc(50% + (var(--rail-w) + var(--sp-6)) / 2); bottom: var(--sp-5); }

  /* Sheets become centred cards. A bottom sheet on a wide screen makes the
     user's eye travel the full height of the display to read a form. */
  .sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(452px, 92vw);
    transform: translate(-50%, -50%);
    border-radius: var(--r-xl);
    max-height: 86dvh;
    animation: pop-in .34s var(--spring);
  }
  .sheet--tall { height: 74dvh; }
  .sheet-grab { display: none; }
  @keyframes pop-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }

  .grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
  .thread-body, .composer { left: calc(var(--rail-w) + var(--sp-6)); }
}

@media (min-width: 1320px) {
  :root { --rail-open: 248px; }
  .grid { grid-template-columns: repeat(5, 1fr); }
  .pad { max-width: 960px; }
}

/* Facade for embedded players. The card shows our own thumbnail until it is
   scrolled to, so it never displays the embed's un-started red play button;
   the player is mounted already-playing and torn down on scroll-away. */
.poster {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: var(--ink-2);
}
.poster::after {
  /* Same top-to-bottom darkening the playing state has, so the swap is not
     a visible flash of brightness. */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / .45), transparent 55%);
}
.card.is-embed .stage iframe { position: absolute; inset: 0; }
.card.is-embed.is-playing .poster { opacity: 0; transition: opacity .45s var(--ease); }

.src-badge { color: var(--fg-2); }


/* First-run topic picker. Selected chips invert rather than gaining a tick,
   so the chosen set reads at a glance instead of needing to be counted. */
#interests-choices { margin-bottom: var(--sp-4); max-height: 46dvh; overflow-y: auto; }
.chip.is-picked {
  background: var(--fg); color: var(--ink-0); border-color: var(--fg);
}