/* ── Explore feed + post composer ────────────────────────────────────────────
   Y2K web furniture, borrowed from the app's own vocabulary rather than
   invented: the bevel and title-bar colours are the ones window-pass.js already
   paints (#dfdfdf / #c0c0c0 / #808080, title #0a246a → #a6caf0), and the jelly
   ramps are the ones overlay-items.js uses for the stickers. Reusing both is
   what keeps the feed feeling like part of this app instead of a costume.

   The rule throughout: chrome is period, content is not. Frames, tabs and
   buttons get bevels and gloss; photographs get a plain dark ground and are
   left alone. */

:root {
  --y2k-face:   #d6dde5;
  --y2k-lt:     #ffffff;
  --y2k-mid:    #c0c8d2;
  --y2k-dk:     #7c8794;
  --y2k-ink:    #14202e;
  --y2k-titleA: #0a246a;
  --y2k-titleB: #4aa3e8;
  --y2k-jelly:  #35b6ff;
  --y2k-jellyD: #0a6bb5;
  --y2k-pink:   #ff4fa8;
}

/* Outset bevel — light from the top-left, exactly as the era drew it. */
.y2k-out {
  box-shadow:
    inset  1px  1px 0 var(--y2k-lt),
    inset  2px  2px 0 rgba(255,255,255,.55),
    inset -1px -1px 0 var(--y2k-dk),
    inset -2px -2px 0 rgba(0,0,0,.14);
}
.y2k-in {
  box-shadow:
    inset  1px  1px 0 var(--y2k-dk),
    inset -1px -1px 0 var(--y2k-lt);
}

.fd-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(10, 16, 26, 0.55);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.fd-overlay[hidden] { display: none; }

.fd-modal {
  width: min(1100px, 100%);
  max-height: min(88vh, 900px);
  /* An empty feed collapsed the window to a 128px letterbox strip — which is
     what every visitor sees until the first post is approved. A window keeps
     its shape whether or not there is anything in it. */
  height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--y2k-face);
  color: var(--y2k-ink);
  border-radius: 6px;
  border: 1px solid var(--y2k-dk);
  box-shadow:
    inset 1px 1px 0 var(--y2k-lt),
    inset -1px -1px 0 var(--y2k-dk),
    0 24px 70px rgba(10, 20, 46, .5);
  overflow: hidden;
  padding: 3px;
}

.fd-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 8px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, var(--y2k-titleA), var(--y2k-titleB));
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.fd-title {
  margin: 0;
  font: 800 12px/1 "Tahoma", "Verdana", system-ui, sans-serif;
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,.45);
}
.fd-sorts { display: flex; gap: 3px; margin-left: auto; }
.fd-sort {
  border: 1px solid var(--y2k-dk);
  border-radius: 4px;
  padding: 5px 11px;
  font: 700 10.5px/1 "Tahoma", "Verdana", system-ui, sans-serif;
  color: var(--y2k-ink);
  cursor: pointer;
  /* Aqua gloss: a hard highlight over the top half, nothing over the bottom. */
  background:
    linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.18) 48%, rgba(255,255,255,0) 50%),
    linear-gradient(var(--y2k-lt), var(--y2k-face) 55%, var(--y2k-mid));
  box-shadow: inset 1px 1px 0 var(--y2k-lt), inset -1px -1px 0 rgba(0,0,0,.18);
}
.fd-sort:hover { filter: brightness(1.06); }
/* Active tabs are pressed IN, not tinted — the affordance the era used. */
.fd-sort.on {
  background: linear-gradient(var(--y2k-mid), var(--y2k-face));
  box-shadow: inset 1px 1px 0 var(--y2k-dk), inset -1px -1px 0 var(--y2k-lt);
  transform: translateY(1px);
}
.fd-close, .fd-view {
  width: 21px; height: 19px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--y2k-dk);
  border-radius: 3px;
  font: 700 11px/1 "Tahoma", system-ui, sans-serif;
  color: var(--y2k-ink);
  cursor: pointer;
  background:
    linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.1) 50%, rgba(255,255,255,0) 52%),
    linear-gradient(var(--y2k-lt), var(--y2k-face) 60%, var(--y2k-mid));
  box-shadow: inset 1px 1px 0 var(--y2k-lt), inset -1px -1px 0 rgba(0,0,0,.2);
}
.fd-close:hover, .fd-view:hover { filter: brightness(1.08); }
.fd-close:active, .fd-view:active {
  box-shadow: inset 1px 1px 0 var(--y2k-dk), inset -1px -1px 0 var(--y2k-lt);
  transform: translateY(1px);
}
.fd-close { font-weight: 800; }
.fd-sort:focus-visible, .fd-close:focus-visible,
.fd-try:focus-visible, .fd-post:focus-visible {
  outline: 2px solid rgba(90, 130, 255, 0.9);
  outline-offset: 2px;
}

.fd-body {
  overflow-y: auto;
  padding: 8px;
  background: #0e1420;
  border-radius: 0 0 4px 4px;
  box-shadow: inset 1px 1px 0 var(--y2k-dk), inset -1px -1px 0 rgba(255,255,255,.25);
  flex: 1 1 auto;
}
.fd-note { color: #c8d2e0; }
.fd-note {
  margin: 0; padding: 28px 8px;
  text-align: center; opacity: 0.62; font-size: 13px;
}
.fd-body > .fd-note {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.fd-note-sm { padding: 0; font-size: 11px; text-align: left; }

.fd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 3px;
}

/* Explore tiles are picture and nothing else — square, edge to edge, no
   captions or buttons. The chrome belongs in the viewer; a grid reads as a
   body of work only when the work is uninterrupted. */
.fd-tile {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid #263247;
  background: #131b28;
  overflow: hidden;
  cursor: pointer;
  display: block;
  transition: box-shadow .18s ease;
}
.fd-tile:hover {
  border-color: var(--y2k-jelly);
  box-shadow: 0 0 0 1px var(--y2k-jelly), 0 0 14px rgba(53,182,255,.55);
  z-index: 1;
}
.fd-tile img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.fd-tile:hover img { transform: scale(1.04); }
.fd-tile:focus-visible { outline: 2px solid rgba(90,130,255,.95); outline-offset: -2px; }

/* Try-count, only on hover — the number is context, not decoration. */
.fd-tile-tries {
  position: absolute; right: 6px; bottom: 6px;
  font: 700 10px/1 ui-monospace, monospace;
  color: #fff;
  padding: 3px 5px; border-radius: 4px;
  background: rgba(0,0,0,.5);
  opacity: 0; transition: opacity .18s ease;
  pointer-events: none;
}
.fd-tile-tries::after { content: ' ✦'; }
.fd-tile:hover .fd-tile-tries, .fd-tile:focus-visible .fd-tile-tries { opacity: 1; }

.fd-tile.fd-is-clip::before {
  content: '';
  position: absolute; right: 7px; top: 7px; z-index: 2;
  width: 0; height: 0;
  border-left: 9px solid rgba(255,255,255,.95);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* ── Immersive viewer ────────────────────────────────────────────────────────
   Full-bleed on black with everything laid over the picture. */
.fd-overlay.fd-immersive { padding: 0; background: #000; backdrop-filter: none; -webkit-backdrop-filter: none; }
.fd-immersive .fd-modal {
  width: 100%; max-width: none; max-height: none; height: 100%;
  border-radius: 0; border: 0; background: #000; box-shadow: none;
}
.fd-immersive .fd-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  border-radius: 0;
  /* Period title bar, then a scrim under it so the picture cannot swallow the
     controls on a bright frame. */
  background:
    linear-gradient(90deg, rgba(10,36,106,.96), rgba(74,163,232,.88)) top / 100% 30px no-repeat,
    linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,0));
  padding: 6px 6px 26px 8px;
  color: #fff;
}
/* Tall enough that a white sky cannot swallow the controls. */
.fd-immersive .fd-title { text-shadow: 0 1px 4px rgba(0,0,0,.6); }
/* Tabs keep their bevel in the viewer — they are chrome, not content. */
.fd-immersive .fd-sort { color: var(--y2k-ink); }
.fd-immersive .fd-body {
  padding: 0; overflow: hidden; box-shadow: none; border-radius: 0; background: #000;
}
/* A whisper of CRT over the letterbox area. Under 4% or it fights the photo. */
.fd-immersive .fd-body::after {
  content: '';
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  background: repeating-linear-gradient(rgba(0,0,0,.035) 0 1px, rgba(0,0,0,0) 1px 3px);
}

.fd-reel {
  /* 100% of the CONTAINER, not 100dvh of the viewport.
   *
   * The feed is hosted inside a desktop window and inside a PDA pane, both of
   * which are shorter than the viewport. Sized in dvh a slide overflowed its
   * host — the picture came out too big, and .fd-over, which hangs off the
   * slide's bottom edge, fell below the visible area and took the caption and
   * byline with it. Two reported symptoms, one unit. */
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.fd-reel::-webkit-scrollbar { display: none; }

.fd-slide {
  position: relative;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.fd-stage { position: absolute; inset: 0; }

/* The picture is CONTAINed, never cropped — someone composed it. The gap is
   filled with a blurred, scaled copy of the same frame rather than black bars,
   which is the trick that makes a mixed-ratio feed feel designed. */
.fd-back {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(34px) saturate(140%) brightness(.55);
  transform: scale(1.15);
}
.fd-fore, .fd-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.fd-vid { z-index: 1; }

/* Byline + caption, bottom left, over a gradient so text survives any picture. */
.fd-over {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 22px 96px 26px 18px;
  display: flex; flex-direction: column; gap: 8px;
  color: #fff;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.35) 45%, rgba(0,0,0,.72));
  pointer-events: none;
}
.fd-byline { display: flex; align-items: center; gap: 9px; pointer-events: auto; }
.fd-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.22) center/cover no-repeat;
  border: 1px solid rgba(255,255,255,.5);
  flex: 0 0 auto;
}
.fd-over .fd-who {
  font: 600 13px/1 system-ui, sans-serif;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.fd-cap {
  margin: 0;
  font: 400 13px/1.45 system-ui, sans-serif;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  max-width: 48ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Action rail. Try is the hero: it is what the app is for and what ranking
   counts, so it gets the size and the colour rather than a heart. */
.fd-rail {
  position: absolute; right: 12px; bottom: 26px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
/* The same jelly the stickers are drawn with: a bright top half, a saturated
   body, a dark rim. Built in CSS rather than borrowed as an image so it scales
   and themes with everything else. */
.fd-rail .fd-try {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 78px; padding: 12px 6px 11px;
  border-radius: 16px;
  border: 1px solid rgba(10,60,110,.85);
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(#9fe6ff, var(--y2k-jelly) 46%, var(--y2k-jellyD));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -6px 12px rgba(10,60,110,.5),
    0 3px 10px rgba(0,0,0,.45);
  transition: filter .16s ease, transform .16s ease;
}
/* Specular sweep across the top — the detail that makes it read as jelly. */
.fd-rail .fd-try::before {
  content: '';
  position: absolute; left: 6%; right: 6%; top: 3px; height: 42%;
  border-radius: 999px;
  background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,0));
  pointer-events: none;
}
.fd-rail .fd-try:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.fd-rail .fd-try:active:not(:disabled) { transform: scale(.96); }
.fd-rail .fd-try:disabled { opacity: .6; cursor: default; }
.fd-try-ico {
  font-size: 17px; line-height: 1;
  text-shadow: 0 1px 2px rgba(6,40,80,.75);
  position: relative;
}
.fd-try-label {
  position: relative;
  font: 700 9.5px/1.25 "Tahoma", "Verdana", system-ui, sans-serif;
  text-shadow: 0 1px 2px rgba(6,40,80,.7);
  text-align: center;
  max-width: 66px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  /* Break at spaces only. word-break:break-word split "Aerochrome walk" into
     "Aerochrom / e walk", which looks like a rendering fault rather than a
     wrap — a truncated whole word reads as deliberate, a severed one does not. */
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
/* Deliberately quieter than Try: a like is the small gesture, using someone's
   look is the big one, and the rail should say which is which at a glance. */
.fd-rail .fd-like {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 46px; padding: 7px 4px 6px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(14,22,34,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: rgba(255,255,255,.9);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.fd-rail .fd-like:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.5); }
.fd-rail .fd-like:active { transform: scale(.94); }
.fd-rail .fd-like.on {
  border-color: var(--y2k-pink);
  background: rgba(255,79,168,.22);
}
.fd-like-ico {
  font-size: 15px; line-height: 1;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  transition: color .16s ease, transform .16s ease;
}
.fd-rail .fd-like.on .fd-like-ico {
  color: var(--y2k-pink);
  /* A small kick on the press, so the state change is felt and not just seen. */
  animation: fd-pop .28s ease;
}
@keyframes fd-pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
.fd-like-n {
  font: 700 9.5px/1 ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.fd-rail .fd-like:focus-visible { outline: 2px solid var(--y2k-titleB); outline-offset: 2px; }

.fd-count {
  font: 500 10px/1 ui-monospace, monospace;
  color: rgba(255,255,255,.8);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  font-variant-numeric: tabular-nums;
}
.fd-count b { font-weight: 700; color: #fff; }

.fd-view:focus-visible { outline: 2px solid var(--y2k-titleB); outline-offset: 2px; }
.fd-immersive .fd-title { color: #fff; }
.fd-immersive .fd-view, .fd-immersive .fd-close { color: var(--y2k-ink); }

/* ── Composer ──────────────────────────────────────────────────────────────── */
.fd-compose {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 16px;
  background: rgba(10, 16, 26, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.fd-compose-card {
  width: min(420px, 100%);
  max-height: 90vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  /* Explicit colours, not app theme tokens. This card used to read
     `background: var(--panel, #fbfcfe)` — and --panel is defined nowhere, so it
     fell back to near-white in every theme while `color: var(--text)` went to
     #e7ecfb in dark. White text on a white card. A window that states both of
     its own colours cannot drift out of step with a token it does not own. */
  background: var(--y2k-face);
  color: var(--y2k-ink);
  border-radius: 6px;
  border: 1px solid var(--y2k-dk);
  padding: 18px;
  box-shadow:
    inset 1px 1px 0 var(--y2k-lt),
    inset -1px -1px 0 var(--y2k-dk),
    0 24px 70px rgba(20, 32, 64, 0.4);
}
/* Bleeds to the card edges to read as a real title bar rather than a heading. */
.fd-compose-title {
  margin: -18px -18px 0;
  padding: 7px 10px;
  font: 800 11px/1.35 "Tahoma", "Verdana", system-ui, sans-serif;
  letter-spacing: 0.16em;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 20, 60, .55);
  background: linear-gradient(90deg, var(--y2k-titleA), var(--y2k-titleB));
  border-radius: 5px 5px 0 0;
}
.fd-compose-prev {
  border-radius: 3px; overflow: hidden;
  background: #0e1420;
  max-height: 320px;
  box-shadow: inset 1px 1px 0 var(--y2k-dk), inset -1px -1px 0 rgba(255,255,255,.25);
}
.fd-compose-prev img, .fd-compose-prev video {
  display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain;
}
.fd-field { display: flex; flex-direction: column; gap: 5px; }
/* `hidden` is only `display: none` from the UA stylesheet, so the rule above
   beats it and the TITLE field — which belongs to a bounced track — showed on
   every photo post too. Same guard .fd-overlay already carries. */
.fd-field[hidden] { display: none; }
.fd-field > span {
  font: 700 10px/1 ui-monospace, monospace;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--y2k-ink); opacity: 0.75;
}
.fd-field em { font-style: normal; opacity: 0.6; }
.fd-caption {
  width: 100%;
  border: 1px solid var(--y2k-dk);
  border-radius: 3px; padding: 8px;
  font: 400 13px/1.4 system-ui, sans-serif;
  color: #14202e; background: #fff;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.18);
  resize: vertical;
}
.fd-caption::placeholder { color: #6b7885; }
.fd-stack { margin: 0; font-size: 11px; color: var(--y2k-ink); opacity: 0.78; }
.fd-consent {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 11.5px; line-height: 1.45;
  color: var(--y2k-ink);
  cursor: pointer;
}
.fd-consent-box { margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; }
/* .fd-note is light-on-dark for the feed body; on this pale card it needs the
   opposite, or the "reviewed before they appear" line vanishes into the face. */
.fd-compose-card .fd-note { color: var(--y2k-ink); opacity: 0.75; }
.fd-post, .fd-cancel {
  border-radius: 10px; padding: 11px;
  font: 700 12px/1 "Tahoma", "Verdana", system-ui, sans-serif; cursor: pointer;
  border: 1px solid transparent;
}
/* The same jelly as the Try button, so the two primary actions in the feature
   look like they came from the same place. */
.fd-post {
  position: relative; overflow: hidden;
  color: #fff;
  border-color: rgba(10, 60, 110, .85);
  background: linear-gradient(#9fe6ff, var(--y2k-jelly) 46%, var(--y2k-jellyD));
  text-shadow: 0 1px 2px rgba(6, 40, 80, .7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -6px 12px rgba(10,60,110,.5),
    0 3px 8px rgba(0,0,0,.28);
  transition: filter .16s ease, transform .16s ease;
}
.fd-post::before {
  content: '';
  position: absolute; left: 6%; right: 6%; top: 3px; height: 40%;
  border-radius: 999px;
  background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,0));
  pointer-events: none;
}
.fd-post:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.fd-post:active:not(:disabled) { transform: scale(.98); }
.fd-post:disabled { opacity: 0.45; cursor: not-allowed; }
.fd-cancel {
  background: var(--y2k-mid); color: var(--y2k-ink);
  border-color: var(--y2k-dk);
  box-shadow: inset 1px 1px 0 var(--y2k-lt), inset -1px -1px 0 var(--y2k-dk);
}
.fd-cancel:active { box-shadow: inset 1px 1px 0 var(--y2k-dk), inset -1px -1px 0 var(--y2k-lt); }



@media (max-width: 520px) {
  .fd-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .fd-over { padding-right: 84px; }
  .fd-head { padding: 11px 12px; }
  .fd-sorts { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fd-tile img, .fd-rail .fd-try, .fd-rail .fd-like { transition: none; }
  .fd-rail .fd-like.on .fd-like-ico { animation: none; }
  .fd-reel { scroll-behavior: auto; }
}

/* The desktop-only "Saved. Share it?" nudge reuses the save toast's shell but
   carries a single action, so it needs no second row. */
.save-toast.share-only { gap: 8px; }
.save-toast-share { color: inherit; }

/* ── Tracks ──────────────────────────────────────────────────────────────────
   Music posts. A track shares the grid, the ranking and the likes with the
   photographs; what it needs of its own is a way to say "this is audio" in a
   grid of pictures, and a player worth expanding into. */

/* On the tile: a play mark and a running time. The cover is generated from the
   waveform, so there is no photograph here to protect from chrome. */
.fd-tile-audio {
  position: absolute; left: 6px; bottom: 6px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  padding: 3px 7px 3px 5px;
  border-radius: 999px;
  background: rgba(8, 10, 20, .72);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 700 10px/1 ui-monospace, monospace;
  pointer-events: none;
}
.fd-tile-audio i { font-style: normal; font-size: 8px; opacity: .9; }

/* ── The expanded player ─────────────────────────────────────────────────────
   SoundCloud's shape: cover, title, and a waveform you scrub by dragging.
   The waveform is the scrubber because it is the only progress bar that tells
   you where you are going as well as where you are. */
.fd-track {
  position: absolute; inset: 0; z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* Room at the bottom for .fd-over's caption and .fd-rail's buttons, which
     are laid over every slide regardless of what is in it. */
  padding: 24px 20px 132px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
}
.fd-track-art {
  width: min(52vh, 300px, 74vw);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .1);
  background: #0e1420;
}
.fd-track-meta { max-width: min(560px, 90vw); }
.fd-track-title {
  margin: 0;
  font: 700 clamp(15px, 4.4vw, 20px)/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
  overflow-wrap: anywhere;
}
.fd-track-by {
  margin: 4px 0 0;
  font: 500 12px/1 ui-monospace, monospace;
  color: rgba(255, 255, 255, .68);
}

/* Transport: the button is fixed-size, the waveform takes the rest. */
.fd-track-deck {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(560px, 90vw);
}
.fd-track-play {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: #f2545b;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(242, 84, 91, .45);
  transition: transform .14s ease, filter .14s ease;
}
.fd-track-play:hover  { filter: brightness(1.08); }
.fd-track-play:active { transform: scale(.94); }
.fd-track-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.fd-track .fd-track-ico { line-height: 1; letter-spacing: -1px; }

.fd-wave {
  flex: 1 1 auto;
  min-width: 0;
  height: 62px;
  cursor: pointer;
  /* The pointer is captured for dragging; without this the browser claims the
     gesture as a scroll and the scrub never happens on a phone. */
  touch-action: none;
}
.fd-track-time {
  display: flex;
  justify-content: space-between;
  width: min(560px, 90vw);
  margin: -6px 0 0;
  font: 500 11px/1 ui-monospace, monospace;
  color: rgba(255, 255, 255, .6);
}
.fd-track audio { display: none; }

/* The blurred cover behind the player wants to be darker than it is behind a
   photograph — there is text over all of it, not just the bottom strip. */
.fd-slide.fd-is-track .fd-back { filter: blur(46px) saturate(150%) brightness(.4); }

/* ── Track in the composer ───────────────────────────────────────────────── */
.fd-compose-prev.fd-prev-track {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px;
  max-height: none;
}
/* Both of these have to out-specify `.fd-compose-prev img`, which sets
   `width: 100%; height: auto` for the photo and clip previews and would
   otherwise blow the cover up to the full width of the card — measured at
   285px, which left no room for the player under it. */
.fd-compose-prev.fd-prev-track .fd-prev-art {
  width: 150px; height: 150px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
}
/* An <audio> in a column flex container collapses to zero height unless it is
   told not to — measured at exactly 0px, which is a player you cannot see or
   press. */
.fd-compose-prev.fd-prev-track audio {
  display: block;
  width: 100%;
  height: 40px;
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .fd-track { gap: 11px; padding: 16px 14px 124px; }
  .fd-track-art { width: min(38vh, 210px, 62vw); }
  .fd-track-play { width: 46px; height: 46px; }
  .fd-wave { height: 52px; }
}

/* ── Comments and saved looks ────────────────────────────────────────────────
   Two more actions on the rail. Both stay the same size as the like button so
   the rail reads as one column of controls rather than a pile of shapes. */
.fd-rail .fd-cmt-btn,
.fd-rail .fd-fav {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  width: 46px; min-height: 46px;
  padding: 4px 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(12,16,28,.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 700 11px/1 ui-monospace, monospace;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.fd-rail .fd-cmt-btn:hover, .fd-rail .fd-fav:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.5); }
.fd-rail .fd-cmt-btn:active, .fd-rail .fd-fav:active { transform: scale(.94); }
.fd-cmt-ico { font-size: 14px; line-height: 1; }
.fd-fav-ico { font-size: 16px; line-height: 1; opacity: .55; transition: opacity .14s ease, color .14s ease; }
.fd-rail .fd-fav.on { border-color: #ffc857; background: rgba(255,200,87,.16); }
.fd-rail .fd-fav.on .fd-fav-ico { opacity: 1; color: #ffc857; }

/* ── The comment sheet ───────────────────────────────────────────────────────
   Appended to .fd-overlay, not the body: hosted in a window, the overlay sits
   inside a transformed ancestor, and a fixed child of the body would lay itself
   out against the whole screen instead of the window. */
.fd-cmt {
  position: absolute; inset: 0;
  z-index: 12;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
}
.fd-cmt-card {
  display: flex; flex-direction: column;
  width: min(520px, 100%);
  max-height: min(72%, 560px);
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.16);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: #12172a;
  color: #e8ecf7;
  box-shadow: 0 -18px 50px rgba(0,0,0,.55);
  overflow: hidden;
}
.fd-cmt-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.fd-cmt-title { margin: 0; font: 700 11px/1 ui-monospace, monospace; letter-spacing: .16em; }
.fd-cmt-x {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color: inherit; cursor: pointer; font-size: 12px;
}
.fd-cmt-list {
  flex: 1 1 auto; min-height: 90px;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.fd-cmt-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: start; }
.fd-cmt-av {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(140deg, #3a4668, #232a44) center/cover;
  border: 1px solid rgba(255,255,255,.14);
}
.fd-cmt-body { min-width: 0; }
.fd-cmt-meta { margin: 0 0 2px; display: flex; gap: 8px; align-items: baseline;
  font: 600 11px/1 ui-monospace, monospace; color: rgba(255,255,255,.6); }
.fd-cmt-meta b { color: #fff; }
/* Long words in someone else's text must not widen the sheet. */
.fd-cmt-text { margin: 0; font: 400 13px/1.45 system-ui, sans-serif; overflow-wrap: anywhere; }
.fd-cmt-del {
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid transparent; background: transparent;
  color: rgba(255,255,255,.45); cursor: pointer; font-size: 10px;
}
.fd-cmt-del:hover { color: #fff; border-color: rgba(255,255,255,.2); }
.fd-cmt-del[hidden] { display: none; }

.fd-cmt-form {
  display: flex; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255,255,255,.1);
}
.fd-cmt-form[hidden] { display: none; }
.fd-cmt-in {
  flex: 1 1 auto; min-width: 0; min-height: 42px;
  padding: 0 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: #fff;
  font: 400 14px/1 system-ui, sans-serif;   /* 14px+, or iOS zooms the page on focus */
}
.fd-cmt-in::placeholder { color: rgba(255,255,255,.4); }
.fd-cmt-send {
  flex: 0 0 auto; min-height: 42px; padding: 0 16px;
  border: 0; border-radius: 10px;
  background: var(--y2k-jelly, #35b6ff); color: #06121f;
  font: 700 12px/1 ui-monospace, monospace; cursor: pointer;
}
.fd-cmt-send:disabled { opacity: .55; cursor: default; }
.fd-cmt-signin {
  margin: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  min-height: 44px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); color: #fff;
  font: 700 12px/1 ui-monospace, monospace; cursor: pointer;
}
.fd-cmt-signin[hidden] { display: none; }

/* ── The music library ───────────────────────────────────────────────────────
   Reuses the comment sheet's shell — same card, same list, same dismissal —
   because it is the same kind of thing: a panel raised over the feed to pick
   something and get out. A second visual language for it would be invention
   for its own sake. */
.fd-music-tools {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.fd-music-q {
  flex: 1 1 auto; min-width: 0; min-height: 38px;
  padding: 0 11px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: #fff;
  font: 400 14px/1 system-ui, sans-serif;   /* 14px+, or iOS zooms on focus */
}
.fd-music-q::placeholder { color: rgba(255,255,255,.4); }
.fd-music-sorts { display: flex; gap: 4px; flex: 0 0 auto; }
.fd-music-sort {
  padding: 8px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent; color: rgba(255,255,255,.72);
  font: 700 10px/1 ui-monospace, monospace; cursor: pointer;
}
.fd-music-sort.on { background: #fff; color: #10131f; border-color: #fff; }

.fd-music-list { gap: 2px; }
.fd-music-row {
  display: grid;
  grid-template-columns: 38px 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 8px 4px; border-radius: 10px;
}
.fd-music-row.on { background: rgba(53,182,255,.14); }
.fd-music-play {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.07); color: #fff;
  font-size: 11px; cursor: pointer;
}
.fd-music-row.playing .fd-music-play { background: #f2545b; border-color: transparent; }
.fd-music-meta { min-width: 0; }
.fd-music-name {
  margin: 0; font: 600 13px/1.25 system-ui, sans-serif; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-music-by {
  margin: 2px 0 0; font: 500 11px/1 ui-monospace, monospace;
  color: rgba(255,255,255,.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-music-len { font: 500 11px/1 ui-monospace, monospace; color: rgba(255,255,255,.5); }
.fd-music-use {
  padding: 8px 12px; border-radius: 999px; border: 0;
  background: var(--y2k-jelly, #35b6ff); color: #06121f;
  font: 700 11px/1 ui-monospace, monospace; cursor: pointer;
}
.fd-music-clear {
  margin: 8px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  min-height: 42px; border-radius: 10px;
  border: 1px solid rgba(226,85,95,.5);
  background: rgba(226,85,95,.12); color: #ff9aa1;
  font: 700 12px/1 ui-monospace, monospace; cursor: pointer;
}
.fd-music-clear[hidden] { display: none; }

/* ── "Add music" in the composer ─────────────────────────────────────────── */
.fd-music-pick { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.fd-music-pick[hidden] { display: none; }
.fd-music-pick-label {
  font: 700 10px/1 ui-monospace, monospace; letter-spacing: .12em;
  text-transform: uppercase; color: var(--y2k-ink); opacity: .75;
  flex: 0 0 auto;
}
.fd-music-pick-btn {
  flex: 1 1 auto; min-width: 0; min-height: 38px; padding: 0 12px;
  border-radius: 10px; border: 1px dashed rgba(120,140,200,.5);
  background: rgba(120,140,200,.07); color: inherit;
  font: 600 12px/1.2 system-ui, sans-serif; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-music-pick-btn.on {
  border-style: solid; border-color: var(--y2k-jelly, #35b6ff);
  background: rgba(53,182,255,.12);
}

/* Choosing a real photo for a track's cover. */
.fd-cover-pick {
  min-height: 36px; padding: 0 12px; border-radius: 9px;
  border: 1px dashed rgba(120,140,200,.5);
  background: rgba(120,140,200,.07); color: inherit;
  font: 600 11.5px/1 system-ui, sans-serif; cursor: pointer;
  flex: 0 0 auto;
}

/* ── The chip on a photo that borrowed music ─────────────────────────────── */
.fd-music-chip {
  position: absolute; left: 14px; bottom: 96px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  max-width: min(70%, 300px);
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(10,14,26,.62);
  backdrop-filter: blur(8px);
  color: #fff;
  font: 600 11.5px/1 system-ui, sans-serif;
  cursor: pointer;
}
.fd-music-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-music-chip-ico { flex: 0 0 auto; font-size: 12px; opacity: .85; }
/* Turning while it plays — the one place a spinning record is the honest icon. */
.fd-music-chip.playing .fd-music-chip-ico { animation: fd-spin 2.6s linear infinite; }
@keyframes fd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fd-music-chip.playing .fd-music-chip-ico { animation: none; }
}
.fd-slide.fd-has-music audio { display: none; }

@media (max-width: 560px) {
  .fd-music-chip { bottom: 88px; left: 12px; }
  .fd-music-tools { flex-wrap: wrap; }
  .fd-music-q { flex: 1 1 100%; }
}

/* The picker mounts inside the composer, which is itself a fixed full-screen
   layer — so it has to sit above that card rather than above the feed. */
.fd-compose > .fd-music { z-index: 4; }