/* ── 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;
  /* The jelly was blue; it is the cherry now, everywhere the window has a hero. */
  --y2k-jelly:  #f0334f;
  --y2k-jellyD: #8e0e3a;
  --y2k-jellyL: #ffb3bf;
  --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;
}
/* The masonry: 4 px rows, each tile spanning what its shape needs (feed.js
   sets the span). Rounded, a breath of space, no border — the pictures are
   the surface. `dense` lets a short tile fill a hole a tall one left. */
.fd-grid.fd-masonry {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  grid-auto-rows: 4px;
  grid-auto-flow: dense;
  gap: 8px;
  padding: 2px;
}
.fd-masonry .fd-tile { aspect-ratio: auto; height: 100%; border: none; border-radius: 12px; background: #0f1520; }
.fd-masonry .fd-tile:hover { box-shadow: 0 0 0 2px var(--sel, #d61f4d), 0 10px 28px rgba(0,0,0,.45); }
.fd-masonry .fd-tile:focus-visible { outline: 2px solid var(--sel, #d61f4d); outline-offset: 2px; }
.fd-masonry .fd-tile img { height: 100%; }

/* 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(240,51,79,.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. */
  /* The status bar and the notch sit over this. Without the inset the title
     bar and its close button were drawn UNDERNEATH them: on an iPhone 12 Pro
     Max the X landed behind the clock and the viewer could not be closed at
     all. The blue bar grows upward to fill the inset so it still reads as one
     title bar rather than a stripe floating below a black gap.
     The inset goes through a variable so it can be exercised on a desktop. */
  --fd-safe-top: env(safe-area-inset-top, 0px);
  background:
    linear-gradient(90deg, rgba(10,36,106,.96), rgba(74,163,232,.88)) top / 100% calc(30px + var(--fd-safe-top)) no-repeat,
    linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,0));
  padding: calc(6px + var(--fd-safe-top)) 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(110,10,40,.85);
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(var(--y2k-jellyL), var(--y2k-jelly) 46%, var(--y2k-jellyD));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -6px 12px rgba(110,10,40,.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(80,6,30,.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(80,6,30,.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(var(--y2k-jellyL), 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(110,10,40,.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-grid.fd-masonry { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .fd-masonry .fd-tile { border-radius: 9px; }
  .fd-over { padding-right: 84px; }
  .fd-head { padding: 11px 12px; }
}

@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, #f0334f); color: #fff;
  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, #f0334f); color: #fff;
  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, #f0334f);
  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; }

/* Names that open a profile. The affordance is deliberately quiet — an
   underline on hover, a pointer — because a feed full of link-blue names reads
   as a forum, not a gallery. */
.fd-profile-link { cursor: pointer; pointer-events: auto; }
.fd-profile-link:hover .fd-who,
.fd-profile-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.fd-profile-link:focus-visible { outline: 2px solid rgba(255,255,255,.85); outline-offset: 2px; border-radius: 4px; }
.fd-cmt-meta b.fd-profile-link:hover { color: #fff; }

/* "Use this camera" — the camera's own name sits under the verb, small. */
.fd-try-name {
  position: relative;
  font: 600 8.5px/1.2 "Tahoma", "Verdana", system-ui, sans-serif;
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 2px rgba(80,6,30,.7);
  max-width: 66px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fd-try-name:empty { display: none; }


/* ── "Use this camera": the hero pill under the caption ───────────────────── */
.fd-use {
  pointer-events: auto; align-self: flex-start; max-width: 100%;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 6px 18px 6px 8px; margin-top: 2px;
  border: none; border-radius: 999px;
  background: var(--cta);
  color: #fff; text-align: left; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px rgba(190, 20, 60, .45);
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.fd-use:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 26px rgba(190, 20, 60, .55); }
.fd-use:active:not(:disabled) { transform: scale(.97); }
.fd-use:disabled { opacity: .7; cursor: default; }
.fd-use-ico {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.fd-use-ico svg { width: 20px; height: 20px; }
.fd-use-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.1; }
.fd-use-l { font: 700 13px/1.1 "Inter", -apple-system, system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap; }
.fd-use-name { font: 500 11px/1.1 "Inter", -apple-system, system-ui, sans-serif; color: rgba(255,255,255,.85); max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-use-name:empty { display: none; }

/* ═══ Explore: four shelves ════════════════════════════════════════════════════
   The window keeps its Y2K chrome; what changes is what it holds. */

/* ── Title bar: tabs, search, bell, Post ─────────────────────────────────── */
.fd-head { gap: 6px; }
.fd-back {
  width: 26px; height: 24px; border: 1px solid var(--y2k-dk); border-radius: 4px; padding: 0; cursor: pointer; color: var(--y2k-ink);
  display: inline-flex; align-items: center; justify-content: center;
  background: 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-back[hidden] { display: none; }
.fd-back svg { width: 14px; height: 14px; }
.fd-tabs { display: flex; gap: 3px; margin-left: 6px; }
.fd-tab {
  border: 1px solid var(--y2k-dk); border-radius: 4px; padding: 5px 11px; cursor: pointer; color: var(--y2k-ink);
  font: 700 10.5px/1 "Tahoma", "Verdana", system-ui, sans-serif;
  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-tab:hover { filter: brightness(1.06); }
.fd-tab.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); }
/* One bar: the sort as a select beside the tabs, dressed as the same button. */
.fd-sortwrap {
  position: relative; display: inline-flex; align-items: center; margin-left: 8px;
  border: 1px solid var(--y2k-dk); border-radius: 4px; color: var(--y2k-ink); height: 24px;
  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-sortwrap:hover { filter: brightness(1.06); }
.fd-sortsel {
  appearance: none; -webkit-appearance: none; border: none; background: none; outline: none; cursor: pointer;
  padding: 0 22px 0 10px; height: 100%; color: inherit;
  font: 700 10.5px/1 "Tahoma", "Verdana", system-ui, sans-serif;
}
.fd-sortsel:focus-visible { outline: 2px solid var(--sel, #d61f4d); outline-offset: 1px; border-radius: 4px; }
.fd-sortchev { position: absolute; right: 8px; top: 50%; width: 6px; height: 6px; border-right: 2px solid var(--y2k-ink); border-bottom: 2px solid var(--y2k-ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.fd-sorts { display: none; }
.fd-search {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; min-width: 150px; max-width: 260px; flex: 1 1 160px;
  border: 1px solid var(--y2k-dk); border-radius: 4px; background: #fff; color: var(--y2k-dk);
  box-shadow: inset 1px 1px 0 var(--y2k-dk), inset -1px -1px 0 var(--y2k-lt);
}
.fd-search svg { width: 13px; height: 13px; flex: none; }
.fd-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: 600 11px/1 "Tahoma", "Verdana", system-ui, sans-serif; color: var(--y2k-ink); }
.fd-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.fd-bell {
  position: relative; width: 26px; height: 24px; border: 1px solid var(--y2k-dk); border-radius: 4px; padding: 0; cursor: pointer; color: var(--y2k-ink);
  display: inline-flex; align-items: center; justify-content: center;
  background: 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-bell[hidden] { display: none; }
.fd-bell svg { width: 14px; height: 14px; }
.fd-bell b { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--y2k-pink); color: #fff; font: 700 9px/16px "Tahoma", system-ui, sans-serif; text-align: center; }
.fd-bell b[hidden] { display: none; }
/* Post: the same jelly the Try tile wore, as a pill. */
.fd-post {
  position: relative; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 11px 0 8px; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(110,10,40,.85); color: #fff; cursor: pointer;
  font: 700 10.5px/1 "Tahoma", "Verdana", system-ui, sans-serif; text-shadow: 0 1px 2px rgba(80,6,30,.7);
  background: linear-gradient(var(--y2k-jellyL), var(--y2k-jelly) 46%, var(--y2k-jellyD));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -4px 8px rgba(110,10,40,.5), 0 2px 6px rgba(0,0,0,.35);
}
.fd-post::before { content: ''; position: absolute; left: 6%; right: 6%; top: 2px; height: 42%; border-radius: 999px; background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,0)); pointer-events: none; }
.fd-post svg { width: 13px; height: 13px; position: relative; }
.fd-post span { position: relative; }
.fd-post:hover { filter: brightness(1.08); }
.fd-close svg { width: 12px; height: 12px; }

/* ── Sort strip under the title bar ──────────────────────────────────────── */
.fd-modal > .fd-sorts { margin: 0; padding: 6px 8px 0; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; flex: 0 0 auto; }
.fd-sorts-hint { margin-left: auto; font: 600 10px/1.2 "Tahoma", "Verdana", system-ui, sans-serif; color: var(--y2k-dk); text-align: right; }
.fd-immersive > .fd-sorts, .fd-immersive .fd-sorts { display: none; }

/* ── Tiles: the camera on every tile ─────────────────────────────────────── */
.fd-tile { position: relative; }
.fd-tile-tries { display: none; }
.fd-tile-cam {
  position: absolute; left: 5px; bottom: 5px; max-width: calc(100% - 10px);
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px 0 5px; border-radius: 10px;
  background: rgba(255,255,255,.9); color: var(--y2k-ink); font: 700 9.5px/1 "Tahoma", "Verdana", system-ui, sans-serif;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); pointer-events: none;
}
.fd-tile-cam svg { width: 12px; height: 12px; flex: none; }
.fd-tile-cam b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-tile-music {
  position: absolute; right: 5px; top: 5px; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.9); color: var(--y2k-ink); box-shadow: 0 1px 3px rgba(0,0,0,.3); pointer-events: none;
}
.fd-tile-music svg { width: 11px; height: 11px; }
.fd-tile-new { position: absolute; left: 6px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--y2k-pink); box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.fd-tile-post {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; aspect-ratio: 1; padding: 8px;
  border: 1.5px dashed var(--y2k-dk); border-radius: 4px; background: rgba(255,255,255,.35); color: var(--y2k-ink); cursor: pointer; text-align: center;
  font: 600 10px/1.2 "Tahoma", "Verdana", system-ui, sans-serif;
}
.fd-tile-post strong { font-size: 11px; }
.fd-tile-post-ico { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(var(--y2k-jellyL), var(--y2k-jelly) 46%, var(--y2k-jellyD)); color: #fff; }
.fd-tile-post-ico svg { width: 14px; height: 14px; }
.fd-tile-post:hover { background: rgba(255,255,255,.6); }

/* ── Cameras shelf ───────────────────────────────────────────────────────── */
.fd-cams { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px 10px; padding: 10px; }
.fd-cam { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; border: none; background: none; padding: 0; cursor: pointer; color: var(--y2k-ink); text-align: left; min-width: 0; }
.fd-cam-art { width: 100%; aspect-ratio: 10 / 13; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.fd-cam-art canvas { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.3)); transition: transform .14s ease; }
.fd-cam:hover .fd-cam-art canvas { transform: translateY(-2px); }
.fd-cam strong { font: 700 11px/1.15 "Tahoma", "Verdana", system-ui, sans-serif; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-cam-by { font: 600 9.5px/1.2 "Tahoma", "Verdana", system-ui, sans-serif; color: var(--y2k-dk); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-cam-keep .fd-cam-art { border: 1.5px dashed var(--y2k-dk); color: var(--y2k-dk); }
.fd-cam-keep .fd-cam-art svg { width: 22px; height: 22px; }

/* ── Music shelf ─────────────────────────────────────────────────────────── */
.fd-music-shelf { padding: 8px 10px; }
.fd-music-shelf .fd-music-row { max-width: 640px; }

/* ── People ──────────────────────────────────────────────────────────────── */
.fd-people { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.fd-person {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; max-width: 640px;
  background: rgba(255,255,255,.5); border: 1px solid var(--y2k-mid);
}
.fd-person .fd-avatar { width: 36px; height: 36px; }
.fd-person-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; cursor: pointer; }
.fd-person-meta strong { font: 700 12px/1.1 "Tahoma", "Verdana", system-ui, sans-serif; }
.fd-person-meta span { font: 600 10px/1.2 "Tahoma", "Verdana", system-ui, sans-serif; color: var(--y2k-dk); }
.fd-person-covers { display: flex; gap: 3px; }
.fd-person-covers img { width: 30px; height: 30px; border-radius: 4px; object-fit: cover; display: block; }
.fd-follow {
  flex: none; height: 24px; padding: 0 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.22); color: #fff;
  font: 700 10px/1 "Tahoma", "Verdana", system-ui, sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.fd-follow.on { background: rgba(255,255,255,.85); color: var(--y2k-ink); text-shadow: none; }
.fd-person .fd-follow { border-color: var(--y2k-dk); background: linear-gradient(var(--y2k-lt), var(--y2k-face) 60%, var(--y2k-mid)); color: var(--y2k-ink); text-shadow: none; }
.fd-person .fd-follow.on { background: linear-gradient(var(--y2k-mid), var(--y2k-face)); }
.fd-byline .fd-follow { margin-left: 4px; }

/* ── Rail: share ─────────────────────────────────────────────────────────── */
.fd-rail .fd-share {
  display: flex; align-items: center; justify-content: center; width: 46px; height: 40px; border-radius: 13px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(14,22,34,.5); color: rgba(255,255,255,.9); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fd-share-ico svg { width: 18px; height: 18px; }

/* ── Notifications ───────────────────────────────────────────────────────── */
.fd-notif {
  position: absolute; top: 34px; right: 8px; z-index: 6; width: min(360px, calc(100% - 16px)); max-height: 60%; overflow-y: auto;
  background: var(--y2k-face); border: 1px solid var(--y2k-dk); border-radius: 4px;
  box-shadow: inset 1px 1px 0 var(--y2k-lt), inset -1px -1px 0 var(--y2k-dk), 0 10px 30px rgba(0,0,0,.35);
}
.fd-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; background: linear-gradient(90deg, var(--y2k-titleA), var(--y2k-titleB)); color: #fff; font: 800 11px/1 "Tahoma", "Verdana", system-ui, sans-serif; }
.fd-notif-head .fd-cmt-x { color: #fff; }
.fd-notif-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border: none; border-bottom: 1px solid var(--y2k-mid); background: none; cursor: pointer; text-align: left; color: var(--y2k-ink); font: 600 11px/1.3 "Tahoma", "Verdana", system-ui, sans-serif; }
.fd-notif-row:hover { background: rgba(255,255,255,.45); }
.fd-notif-row .fd-avatar { width: 26px; height: 26px; flex: none; }
.fd-notif-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fd-notif-txt em { font-style: normal; color: var(--y2k-dk); font-size: 10px; }
.fd-notif-thumb { width: 34px; height: 34px; border-radius: 4px; object-fit: cover; }

/* ── The side: desktop column / phone sheet ──────────────────────────────── */
.fd-side { color: var(--y2k-ink); font: 600 11px/1.35 "Tahoma", "Verdana", system-ui, sans-serif; }
.fd-side-grab { display: none; }
.fd-side-peek { display: none; }
.fd-side-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.fd-side-by { display: flex; align-items: center; gap: 8px; }
.fd-side-by .fd-avatar { width: 28px; height: 28px; }
.fd-side-who { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.fd-side-who strong { font-size: 12px; }
.fd-side-when { color: var(--y2k-dk); font-size: 10px; }
.fd-side-by .fd-follow { border-color: var(--y2k-dk); background: linear-gradient(var(--y2k-lt), var(--y2k-face) 60%, var(--y2k-mid)); color: var(--y2k-ink); text-shadow: none; }
.fd-side-by .fd-follow.on { background: linear-gradient(var(--y2k-mid), var(--y2k-face)); }
.fd-side-cap { margin: 0; font-weight: 500; font-size: 12px; }
.fd-side-cam { border: 1px solid var(--y2k-mid); border-radius: 8px; padding: 8px; background: rgba(255,255,255,.45); display: flex; flex-direction: column; gap: 8px; }
.fd-side-cam[hidden] { display: none; }
.fd-side-cam-row { display: flex; align-items: center; gap: 8px; }
.fd-side-cam-art { width: 40px; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; }
.fd-side-cam-art canvas { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.fd-side-cam-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fd-side-cam-meta strong { font-size: 12px; }
.fd-side-cam-meta span { color: var(--y2k-dk); font-size: 10px; }
.fd-side .fd-use-side { min-height: 36px; padding: 4px 12px 4px 6px; gap: 6px; }
.fd-side .fd-use-side .fd-use-ico { width: 26px; height: 26px; }
.fd-side .fd-use-side .fd-use-ico svg { width: 16px; height: 16px; }
.fd-side .fd-use-side .fd-use-l { font-size: 11px; }
.fd-side-also { display: flex; flex-direction: column; gap: 5px; }
.fd-side-also[hidden] { display: none; }
.fd-side-also-l { font-size: 10px; color: var(--y2k-dk); }
.fd-side-also-row { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.fd-side-also-tile { width: 52px; height: 40px; border: none; padding: 0; border-radius: 4px; overflow: hidden; cursor: pointer; background: #000; }
.fd-side-also-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd-side-also-more { font-size: 10px; color: var(--y2k-dk); padding: 0 4px; }
.fd-side-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.fd-side-act { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 4px; cursor: pointer; border: 1px solid var(--y2k-dk); color: var(--y2k-ink); font: 700 10.5px/1 "Tahoma", "Verdana", system-ui, sans-serif; background: 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,.18); }
.fd-side-act svg { width: 12px; height: 12px; }
.fd-side-act.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); }
.fd-side-act[hidden] { display: none; }
.fd-side-cmts { display: flex; flex-direction: column; gap: 6px; }
.fd-side-cmts-l { font-size: 10px; color: var(--y2k-dk); text-transform: uppercase; letter-spacing: .04em; }
.fd-side .fd-cmt-list { display: flex; flex-direction: column; gap: 6px; }
.fd-cmt-row { display: flex; align-items: flex-start; gap: 6px; }
.fd-cmt-row .fd-avatar { width: 22px; height: 22px; flex: none; }
.fd-cmt-body { flex: 1; min-width: 0; font-weight: 500; font-size: 11px; }
.fd-cmt-body em { font-style: normal; color: var(--y2k-dk); font-size: 10px; margin-left: 4px; }
.fd-cmt-del { border: none; background: none; color: var(--y2k-dk); cursor: pointer; font-size: 10px; padding: 2px 4px; }
.fd-cmt-del[hidden] { display: none; }
.fd-side .fd-cmt-form { display: flex; gap: 4px; }
.fd-side .fd-cmt-form[hidden] { display: none; }
.fd-side .fd-cmt-in { flex: 1; min-width: 0; }
.fd-side .fd-cmt-signin[hidden] { display: none; }

/* Desktop: the slide is a row — the picture and the column. */
@media (min-width: 900px) {
  /* The stage is absolutely placed inside the slide (it always was); the
     column takes the right-hand 360px and the stage keeps the rest. */
  .fd-immersive .fd-slide { position: relative; }
  .fd-immersive .fd-slide:not(.fd-is-track) .fd-stage { right: 360px; }
  .fd-immersive .fd-slide .fd-side { position: absolute; top: 0; right: 0; bottom: 0; width: 360px; overflow-y: auto; background: var(--y2k-face); border-left: 1px solid var(--y2k-dk); }
  .fd-immersive .fd-slide .fd-side-body { padding-top: 46px; }   /* the title bar floats over the top */
  .fd-immersive .fd-slide:not(.fd-is-track) .fd-over,
  .fd-immersive .fd-slide:not(.fd-is-track) .fd-rail { display: none; }
  .fd-immersive .fd-slide .fd-music-chip { right: 372px; }
}
/* Phone: the side is a sheet that peeks at the bottom and pulls up. */
@media (max-width: 899px) {
  .fd-slide { position: relative; }
  .fd-side {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; max-height: 42px; overflow: hidden;
    background: var(--y2k-face); border-top: 1px solid var(--y2k-dk); border-radius: 12px 12px 0 0;
    box-shadow: 0 -6px 20px rgba(0,0,0,.35); transition: max-height .28s cubic-bezier(.22,1,.36,1);
  }
  .fd-side-open .fd-side { max-height: 78%; overflow-y: auto; }
  .fd-side-grab { display: block; width: 100%; height: 18px; border: none; background: none; padding: 0; cursor: pointer; touch-action: none; }
  .fd-side-grab span { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--y2k-dk); margin: 7px auto 0; }
  .fd-side-peek { display: block; text-align: center; font-size: 10px; color: var(--y2k-dk); padding: 0 10px 8px; }
  .fd-side-open .fd-side-peek { display: none; }
  .fd-side .fd-side-by, .fd-side .fd-side-cap { display: none; }   /* the overlay already shows them */
  .fd-side .fd-side-acts { display: none; }                          /* the rail has them */
  .fd-over { padding-bottom: 60px; }
  .fd-rail { bottom: 60px; }
}
/* In the reel on a phone the title bar is back · title · close; the shelves
   and the search wait behind the back button. */
@media (max-width: 899px) {
  .fd-immersive .fd-tabs, .fd-immersive .fd-sortwrap, .fd-immersive .fd-search, .fd-immersive .fd-post, .fd-immersive .fd-bell { display: none; }
}

/* ── Everything in the body sits on the dark photo ground, so it is drawn for
   it: light text, glass cards. (The side column sits on the face and keeps its
   ink.) The first cut used the face's ink and muted grey here — invisible. */
.fd-body .fd-cam strong { color: #eef2fa; }
.fd-body .fd-cam-by { color: #9fb0d8; }
.fd-body .fd-cam-keep .fd-cam-art { border-color: rgba(255,255,255,.35); color: #9fb0d8; }
.fd-body .fd-tile-post { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.35); color: #eef2fa; }
.fd-body .fd-tile-post span { color: #9fb0d8; }
.fd-body .fd-tile-post:hover { background: rgba(255,255,255,.12); }
.fd-body .fd-person { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.fd-body .fd-person-meta strong { color: #eef2fa; }
.fd-body .fd-person-meta span { color: #9fb0d8; }
.fd-body .fd-person .fd-avatar { border-color: rgba(255,255,255,.35); }
.fd-body .fd-note { color: #c8d2e0; }

/* ── The side column sits on the FACE (light), and inherited the comment
   sheet's white-on-dark input, note and sign-in button — invisible there. */
.fd-side .fd-note { color: var(--y2k-dk); }
.fd-side .fd-cmt-in { background: #fff; color: var(--y2k-ink); border: 1px solid var(--y2k-dk); box-shadow: inset 1px 1px 0 var(--y2k-dk), inset -1px -1px 0 var(--y2k-lt); border-radius: 4px; min-height: 36px; }
.fd-side .fd-cmt-in::placeholder { color: var(--y2k-dk); }
.fd-side .fd-cmt-send { min-height: 36px; border-radius: 4px; }
.fd-side .fd-cmt-signin {
  margin: 0; min-height: 36px; border-radius: 4px; color: var(--y2k-ink); border: 1px solid var(--y2k-dk);
  background: 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,.18);
  font: 700 11px/1 "Tahoma", "Verdana", system-ui, sans-serif;
}
.fd-side .fd-cmt-del { color: var(--y2k-dk); }

/* Credit on a borrowed camera: one quiet line under the hero pill and in the
   side card. The name is a link to the person it came from. */
.fd-remix { font: 600 11px/1.3 "Tahoma", "Verdana", system-ui, sans-serif; color: rgba(255,255,255,.78); text-shadow: 0 1px 2px rgba(0,0,0,.5); margin-top: 6px; }
.fd-remix b { font-weight: 800; color: #fff; }
.fd-remix i { font-style: normal; }
.fd-remix .fd-profile-link { cursor: pointer; }
.fd-remix-side { color: var(--y2k-ink); text-shadow: none; opacity: .85; margin-top: 0; }
.fd-remix-side b { color: var(--y2k-ink); }

/* ── The side column, dark ────────────────────────────────────────────────────
   It sat on the window's light face beside a picture on black — a grey slab
   next to the photograph. It is part of the viewer now: near-black, light
   ink, the Y2K bevels kept but cut from dark metal. Desktop column and phone
   sheet alike. */
.fd-immersive .fd-slide .fd-side,
.fd-side {
  background: #0e1118; color: #eef2fa;
  border-color: rgba(255,255,255,.12);
}
.fd-side-when, .fd-side-cam-meta span, .fd-side-also-l, .fd-side-also-more, .fd-side-cmts-l,
.fd-cmt-body em, .fd-side .fd-note, .fd-side .fd-cmt-del, .fd-side-peek { color: #9fb0d8; }
.fd-side-cam { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.fd-side-by .fd-follow, .fd-side-act, .fd-side .fd-cmt-signin {
  color: #eef2fa; border-color: rgba(255,255,255,.22);
  background: linear-gradient(#2a2f3a, #171a21 60%, #0f1117);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.14), inset -1px -1px 0 rgba(0,0,0,.5);
}
.fd-side-by .fd-follow.on, .fd-side-act.on {
  background: linear-gradient(#0f1117, #1c2028);
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.6), inset -1px -1px 0 rgba(255,255,255,.12);
}
.fd-side .fd-cmt-in { background: #000; color: #eef2fa; border-color: rgba(255,255,255,.22); box-shadow: none; }
.fd-side .fd-cmt-in::placeholder { color: #7d88a8; }
.fd-side .fd-cmt-send { background: var(--cta, linear-gradient(120deg,#f0334f,#8e0e3a)); color: #fff; border: none; border-radius: 999px; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 18px rgba(190,20,60,.35); }
.fd-side-grab span { background: rgba(255,255,255,.35); }
.fd-side-cam-meta strong, .fd-side-who strong { color: #fff; }

/* The pitch over the grid: why this feed and not the others. */
.fd-pitch { margin: 6px 4px 12px; font: 500 12px/1.5 "Tahoma", "Verdana", system-ui, sans-serif; color: #9fb0d8; max-width: 720px; }
.fd-pitch b { color: #eef2fa; font-weight: 700; }
@media (max-width: 520px) { .fd-pitch { font-size: 11.5px; margin: 4px 2px 10px; } }
/* Your own post: edit the caption in place. */
.fd-side-cap-empty { display: none; }
.fd-side-edit { align-self: flex-start; border: none; background: none; padding: 0; font: 700 11px/1 "Tahoma", "Verdana", system-ui, sans-serif; color: var(--y2k-jelly, #f0334f); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fd-side-edit[hidden] { display: none; }
.fd-side-editbox { display: flex; flex-direction: column; gap: 6px; }
.fd-side-editbox textarea { resize: vertical; min-height: 64px; padding: 8px; font: 500 12px/1.4 "Tahoma", "Verdana", system-ui, sans-serif; }
.fd-side-editbtns { display: flex; gap: 6px; }