/* ============================================================================
   Mirrento — mock app UI for the site (#559)
   ----------------------------------------------------------------------------
   Static copies of the three surfaces the app ships, so the site shows the app
   as it looks today, not an old design. Every value here is copied from the
   app source (`mirrento` on main), not invented:
     · .am-display  ← HTML_DISPLAY (the prompter) + static/pd-render.css
     · .am-remote   ← HTML_REMOTE (the /remote page, swipe mode)
     · .am-qr       ← HTML_CONTROL #qr-modal (Pair iPhone)
     · .am-window   ← HTML_CONTROL header, now-playing rail and library
   If the app's look changes, change it here from the source again.
   Sizes scale with the mock (container query units), so one rule set works
   from a phone to a wide screen. Motion is optional: everything reads as a
   still frame under prefers-reduced-motion.
   ========================================================================== */

.am-display, .am-remote, .am-window, .am-qr {
  --am-paper:       #f5f5f7;
  --am-paper-dim:   rgba(245,245,247,0.72);
  --am-paper-faint: rgba(245,245,247,0.32);
  --am-hair:        rgba(255,255,255,0.16);
  --am-amber:       #f4b454;
  --am-rec:         #ff3b30;
  --am-ok:          #30d158;
  --am-voice:       #5ec69a;
  --am-read-dim:    0.65;
  --am-f-ui:     "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --am-f-mono:   "Geist Mono", Menlo, monospace;
  --am-f-prompt: "Newsreader", ui-serif, Georgia, serif;
  font-family: var(--am-f-ui);
  color: var(--am-paper);
  -webkit-font-smoothing: antialiased;
}
.am-ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* =============================== DISPLAY ================================ */
/* HTML_DISPLAY: bg #04040a, three ambient washes, chrome pills top, the
   reticle in the side gutters only (#486), text in Newsreader, dock bottom. */
.am-display {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  background: #04040a;
  isolation: isolate;
}
.am-display::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 18% 12%, rgba(10,132,255,0.16), transparent 65%),
    radial-gradient(40% 50% at 82% 18%, rgba(255,106,165,0.14), transparent 65%),
    radial-gradient(55% 45% at 50% 96%, rgba(183,139,255,0.16), transparent 70%);
  filter: saturate(120%);
}
/* #grain: the film grain over the ambient washes, under the text. */
.am-display::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.am-chrome {
  position: absolute; top: max(10px, 1.6cqw); left: max(10px, 1.6cqw); right: max(10px, 1.6cqw);
  z-index: 4;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--am-f-mono); font-size: clamp(9px, 1.05cqw, 11px);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--am-paper-faint);
}
.am-chrome > span { display: flex; gap: 10px; align-items: center; }
.am-pill {
  position: relative;
  padding: 0.82em 1.45em;
  border: 1px solid var(--am-hair);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(110%);
          backdrop-filter: blur(28px) saturate(200%) brightness(110%);
  display: inline-flex; align-items: center; gap: 0.6em;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 18px -10px rgba(0,0,0,0.5);
  white-space: nowrap;
}
.am-pill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(120deg, #0a84ff 0%, #b78bff 38%, #ff6aa5 70%, #f4b454 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.45; pointer-events: none;
}
/* #pillVoice.on: voice follow active = green */
.am-pill.am-voice { border-color: var(--am-voice); color: var(--am-voice); box-shadow: 0 0 14px color-mix(in oklab, var(--am-voice) 40%, transparent); }
.am-pill.am-voice::after,
.am-pill.am-pace::after { background: linear-gradient(120deg, var(--am-amber), #ff9a3c); opacity: 0.75; }
/* #pillPace.pace-ok */
.am-pill.am-pace { border-color: var(--am-amber); color: var(--am-amber); font-variant-numeric: tabular-nums; }
/* #pillPace.pace-hot: more than 5 s over the chapter target */
.am-pill.am-pace.hot { border-color: var(--am-rec); color: var(--am-rec); box-shadow: 0 0 14px color-mix(in oklab, var(--am-rec) 40%, transparent); }
.am-pill.am-pace.hot::after { background: linear-gradient(120deg, var(--am-rec), #ff7a6b); }
/* #chrome .pill-btn: hover invites only while voice sync is off */
button.am-pill:not(.am-voice):hover { border-color: var(--am-amber); color: var(--am-amber); }
/* #closeDisplay */
.am-pill.am-close { color: var(--am-rec); padding: 0.62em 1.1em; font-size: 1.25em; }

.am-stage { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
/* Timer mode (#533): text above the band dims to --read-dim, everything at
   and below the band is at full visibility. Voice follow drops the mask and
   dims read words instead (.am-follow below). */
.am-display:not(.am-follow) .am-stage {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,var(--am-read-dim)) 0, rgba(0,0,0,var(--am-read-dim)) calc(50% - 1.3em), #000 calc(50% - 0.65em), #000 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,var(--am-read-dim)) 0, rgba(0,0,0,var(--am-read-dim)) calc(50% - 1.3em), #000 calc(50% - 0.65em), #000 100%);
}
.am-scroller {
  position: absolute; top: 50%; left: 0; right: 0;
  padding: 0 8%;
  will-change: transform;
}
/* Voice-follow block mode (#478): the view moves by blocks, eased. */
.am-follow .am-scroller { transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
.am-content {
  font-family: var(--am-f-prompt);
  font-size: clamp(17px, 3.4cqw, 56px);
  line-height: 1.3;
  color: var(--am-paper);
}
/* static/pd-render.css */
.am-content .chapter { margin: 2em 0; text-wrap: pretty; }
/* body.follow-mode .chapter: greedy wrapping, so words never hop lines. */
.am-follow .am-content .chapter { text-wrap: wrap; }
.am-content .chapter:first-child { margin-top: 0; }
.am-content .chap-mark {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--am-f-mono); font-size: max(9px, 0.26em);
  color: var(--am-amber); letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 0.7em; font-weight: 600; opacity: 0.95;
}
.am-content .chap-mark::before { content: ""; width: 1.8em; height: 1px; background: linear-gradient(90deg, var(--am-amber), transparent); }
.am-content .chapter-body { display: block; }
.am-content .cue {
  display: inline-block; vertical-align: baseline;
  font-family: var(--am-f-mono); font-size: max(9px, 0.42em); font-weight: 500; letter-spacing: 0.04em;
  color: var(--am-amber); opacity: 0.85;
  background: color-mix(in oklab, var(--am-amber) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--am-amber) 35%, transparent);
  padding: 0.15em 0.55em; margin: 0 0.3em; border-radius: 999px;
  text-transform: lowercase; white-space: nowrap; transform: translateY(-0.25em);
}
/* .tone-pill: the {{tone}} name at the start of its passage; colours come
   inline from the palette, as pd-render.js writes them. */
.am-content .tone-pill { margin-right: 0.35em; }
.am-content strong.emph {
  font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in oklab, var(--am-amber) 70%, transparent); text-decoration-thickness: 2px;
}
.am-content em.ital { font-style: italic; }
.am-content .cue.slide-cue { color: #0a84ff; border-color: rgba(10,132,255,0.35); background: rgba(10,132,255,0.10); }
/* HTML_DISPLAY body.follow-mode: read words dim, the current word amber. */
.am-follow .w.done { opacity: var(--am-read-dim); }
.am-follow .w.current { color: var(--am-amber); opacity: 1; background: color-mix(in oklab, var(--am-amber) 22%, transparent); }

/* #reticle: 2px amber, in the side gutters only, dots 14px from the edges. */
.am-reticle {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; z-index: 3;
  transform: translateY(-1px); pointer-events: none;
  --pad: 8%;
  background: linear-gradient(90deg,
    transparent 0, var(--am-amber) 14px,
    var(--am-amber) max(14px, calc(var(--pad) - 28px)), transparent max(14px, calc(var(--pad) - 10px)),
    transparent min(calc(100% - 14px), calc(100% - var(--pad) + 10px)), var(--am-amber) min(calc(100% - 14px), calc(100% - var(--pad) + 28px)),
    var(--am-amber) calc(100% - 14px), transparent 100%);
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--am-amber) 55%, transparent));
}
.am-reticle::before, .am-reticle::after {
  content: ""; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--am-amber);
}
.am-reticle::before { left: 14px; }
.am-reticle::after { right: 14px; }

/* #dock */
.am-dock {
  position: absolute; bottom: max(14px, 4cqw); left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 28px;
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(110%);
          backdrop-filter: blur(28px) saturate(200%) brightness(110%);
  border: 1px solid var(--am-hair);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 30px 60px -20px rgba(0,0,0,0.6);
  font-size: clamp(30px, 3.2cqw, 44px);
  /* Like the app: revealed by activity, hidden while you read. */
  opacity: 0; transition: opacity .35s ease;
}
.am-display:hover .am-dock, .am-display.am-active .am-dock { opacity: 1; }
.am-dock-btn {
  width: 1em; height: 1em; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.05); border: 1px solid var(--am-hair); color: var(--am-paper);
  padding: 0; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.am-dock-btn .am-ico { width: 0.36em; height: 0.36em; }
.am-dock-btn.primary {
  width: 1.27em; height: 1.27em;
  background: var(--am-amber); color: #1d1d1f; border-color: rgba(255,255,255,0.20);
  box-shadow: 0 0 30px color-mix(in oklab, var(--am-amber) 45%, transparent);
}
.am-dock-btn.primary .am-ico { width: 0.45em; height: 0.45em; }
/* #kbd-hint / #fs-hint pill */
.am-hint {
  position: absolute; z-index: 4; pointer-events: none;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--am-hair); background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  font-family: var(--am-f-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--am-paper-dim); white-space: nowrap;
}

/* ============================ REMOTE (iPhone) =========================== */
/* HTML_REMOTE, swipe mode on (#536), inside a phone frame. */
.am-phone {
  position: relative;
  width: 100%; max-width: 300px;
  aspect-ratio: 9 / 19.5;
  margin: 0 auto;
  border-radius: 44px;
  padding: 10px;
  background: #1a1a1f;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset, 0 40px 80px -30px rgba(0,0,0,0.8);
}
.am-remote {
  --am-fill: rgba(255,255,255,0.045);
  --am-hair-strong: rgba(255,255,255,0.16);
  container-type: inline-size;
  position: relative;
  height: 100%;
  border-radius: 35px;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(244,180,84,0.16), transparent 65%),
    radial-gradient(80% 60% at 50% 100%, rgba(183,139,255,0.16), transparent 65%),
    #060611;
  font-size: 4.3cqw;
}
.am-remote .shell { height: 100%; display: flex; flex-direction: column; gap: 3cqw; padding: 13cqw 4.5cqw 4.5cqw; }
.am-remote .top { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.am-remote .brand { font-family: var(--am-f-prompt); font-size: 6.4cqw; letter-spacing: -0.02em; display: flex; align-items: center; gap: 2cqw; }
.am-remote .brand .dot { width: 2.3cqw; height: 2.3cqw; border-radius: 50%; background: var(--am-rec); box-shadow: 0 0 10px rgba(255,59,48,0.7); }
.am-remote .conn {
  display: inline-flex; align-items: center; gap: 2cqw; padding: 1.6cqw 3.4cqw; border-radius: 999px;
  font-family: var(--am-f-mono); font-size: 3.1cqw; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--am-ok); border: 1px solid rgba(48,209,88,0.35); background: rgba(48,209,88,0.08);
}
.am-remote .conn::before { content: ""; width: 2cqw; height: 2cqw; border-radius: 50%; background: currentColor; }
.am-remote .card {
  position: relative;
  border-radius: 5cqw; padding: 4cqw 4.5cqw; min-width: 0;
  flex: 1 0 auto; display: flex; flex-direction: column;
  /* .card.swipe: the status card is the gesture surface */
  border: 1px dashed rgba(244,180,84,0.55); background: rgba(244,180,84,0.05);
}
.am-remote .card-head { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; margin-bottom: 1.5cqw; }
.am-remote .script { font-family: var(--am-f-mono); font-size: 2.9cqw; letter-spacing: 0.18em; text-transform: uppercase; color: var(--am-paper-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-remote .counter { font-family: var(--am-f-mono); font-size: 3.4cqw; letter-spacing: 0.08em; color: var(--am-amber); white-space: nowrap; }
.am-remote .chapter { font-size: 5.6cqw; font-weight: 600; line-height: 1.2; margin: 0.5cqw 0 2.6cqw; }
.am-remote .line {
  font-family: var(--am-f-prompt); font-size: 5.6cqw; line-height: 1.35; min-height: 2.7em;
  padding-left: 3.4cqw; border-left: 2px solid var(--am-amber);
}
.am-remote .badges { display: flex; flex-wrap: wrap; gap: 1.7cqw; margin-top: 3cqw; }
.am-remote .badge {
  font-family: var(--am-f-mono); font-size: 2.8cqw; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 1.1cqw 2.8cqw; border-radius: 999px; border: 1px solid var(--am-hair-strong); color: var(--am-paper-dim);
}
.am-remote .badge.playing { color: var(--am-ok); border-color: rgba(48,209,88,0.40); }
.am-remote .badge.voice { color: var(--am-amber); border-color: rgba(244,180,84,0.45); }
.am-remote .swipe-help { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6cqw; margin-top: 2cqw; text-align: center; }
.am-remote .gesture { font-family: var(--am-f-mono); font-size: 4.9cqw; color: var(--am-amber); min-height: 1.4em; }
.am-remote .legend { font-family: var(--am-f-mono); font-size: 3cqw; letter-spacing: 0.08em; color: var(--am-paper-faint); line-height: 1.6; }
.am-remote .controls { display: flex; flex-direction: column; gap: 2.4cqw; }
.am-remote .row { display: grid; gap: 2.4cqw; }
.am-remote .row.two { grid-template-columns: 1fr 1fr; }
.am-remote .row.main { grid-template-columns: 1fr auto 1fr; align-items: center; }
.am-remote .btn {
  min-height: 12cqw; border-radius: 4.5cqw; background: var(--am-fill); border: 1px solid var(--am-hair-strong);
  display: flex; align-items: center; justify-content: center; gap: 1.5cqw;
  font-size: 3.9cqw; font-weight: 500; color: var(--am-paper);
}
.am-remote .btn.tall { min-height: 17cqw; flex-direction: column; gap: 0.5cqw; font-size: 3.4cqw; color: var(--am-paper-dim); }
.am-remote .btn.small { min-height: 9cqw; padding: 0 3cqw; font-size: 3.5cqw; border-radius: 3cqw; }
.am-remote .btn.mode { border-color: rgba(244,180,84,0.6); color: var(--am-amber); background: rgba(244,180,84,0.08); }
.am-remote .btn .am-ico { width: 5.6cqw; height: 5.6cqw; stroke-width: 1.8; }
.am-remote .play {
  width: 22cqw; height: 22cqw; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--am-amber); color: #07070a;
  box-shadow: 0 0 60px rgba(244,180,84,0.45), 0 20px 50px -10px rgba(244,180,84,0.40), inset 0 1px 0 rgba(255,255,255,0.45);
}
.am-remote .play svg { width: 9cqw; height: 9cqw; }
/* #g-play / #g-pause: the glyph shows the state, as on the /remote page */
.am-remote .play .g-play, .am-remote.am-paused .play .g-pause { display: none; }
.am-remote.am-paused .play .g-play { display: block; }
.am-remote .row.speed { grid-template-columns: 1fr auto 1fr; align-items: center; }
.am-remote .speed-val { min-width: 20cqw; text-align: center; }
.am-remote .speed-val .num { font-family: var(--am-f-mono); font-size: 6.4cqw; color: var(--am-paper); }
.am-remote .speed-val .lbl { font-family: var(--am-f-mono); font-size: 2.7cqw; letter-spacing: 0.16em; text-transform: uppercase; color: var(--am-paper-faint); }
.am-remote .foot a { color: var(--am-paper-faint); font-size: 3.5cqw; text-decoration: none; }
.am-remote .foot { display: flex; justify-content: space-between; align-items: center; gap: 3cqw; }
.am-remote .foot span { color: var(--am-paper-faint); font-size: 3.4cqw; }
/* The finger: a soft dot that draws the swipe on the card. Decoration only. */
.am-remote .finger {
  position: absolute; left: 50%; top: 58%; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw;
  border-radius: 50%; background: rgba(245,245,247,0.22); box-shadow: 0 0 0 1px rgba(245,245,247,0.35);
  opacity: 0; pointer-events: none;
}

/* ============================ PAIR iPHONE (QR) ========================== */
/* HTML_CONTROL #qr-modal: modal card, title + close, QR centred on white. */
.am-qr {
  width: 100%; max-width: 300px; margin: 0 auto;
  padding: 22px; border-radius: 22px; text-align: center;
  background: #0d0d12;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 30px 70px -26px rgba(0,0,0,0.6);
}
.am-qr .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.am-qr h4 { margin: 0; font-family: var(--am-f-ui); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.am-qr .x {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
}
.am-qr .x .am-ico { width: 16px; height: 16px; }
.am-qr .code { display: inline-block; padding: 12px; border-radius: 8px; background: #fff; }
.am-qr .code svg { display: block; width: 150px; height: 150px; }
.am-qr p { margin: 16px 0 0; font-size: 14px; color: rgba(245,245,247,0.78); }

/* ============================ CONTROL WINDOW ============================ */
/* The control panel inside the macOS window it opens in (#427). */
.am-window {
  container-type: inline-size;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 50px 100px -40px rgba(0,0,0,0.8);
  background:
    radial-gradient(70% 70% at 88% 5%,  rgba(244,180,84,0.20), transparent 65%),
    radial-gradient(70% 70% at 12% 95%, rgba(183,139,255,0.20), transparent 65%),
    radial-gradient(50% 50% at 50% 50%, rgba(10,132,255,0.06), transparent 70%),
    #060611;
  font-size: 13.5px;
}
.am-window .titlebar { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.06); }
.am-window .titlebar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.am-window .titlebar i:nth-child(2) { background: #febc2e; }
.am-window .titlebar i:nth-child(3) { background: #28c840; }
.am-window .titlebar b { flex: 1; text-align: center; margin-right: 52px; font-weight: 500; font-size: 12.5px; color: rgba(245,245,247,0.55); }
.am-window .body { padding: 22px 22px 24px; display: grid; gap: 16px; }
.am-window .cp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.am-window .cp-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--am-f-prompt); font-weight: 600; font-size: 22px; letter-spacing: -0.015em; line-height: 1; }
.am-window .cp-brand .rec { width: 10px; height: 10px; border-radius: 50%; background: var(--am-rec); box-shadow: 0 0 0 3px rgba(255,59,48,0.25), 0 0 12px rgba(255,59,48,0.6); animation: am-rec 1.6s ease-in-out infinite; }
.am-window .cp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.am-window .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 500; border-radius: 999px; padding: 8px 14px; white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.14); color: var(--am-paper);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px -10px rgba(0,0,0,0.4);
  letter-spacing: -0.005em;
}
.am-window .btn.amber { background: var(--am-amber); color: #1d1d1f; font-weight: 600; border-color: transparent; box-shadow: 0 14px 32px -12px rgba(244,180,84,0.45); min-width: 92px; }
.am-window .btn.icon { width: 34px; height: 34px; padding: 0; border-radius: 10px; }
.am-window .btn.on { color: var(--am-amber); border-color: color-mix(in oklab, var(--am-amber) 45%, transparent); background: color-mix(in oklab, var(--am-amber) 12%, transparent); }
.am-window .btn .am-ico { width: 16px; height: 16px; }
/* .btn-group: New + paste from clipboard, joined. */
.am-window .btn-group { display: inline-flex; }
.am-window .btn-group > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.am-window .btn-group > .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: rgba(255,255,255,0.06); padding-left: 10px; padding-right: 12px; }
/* .library .lib-toolbar: the Search scripts field above the columns. */
.am-window .lib-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.am-window .lib-toolbar .input {
  width: 100%; max-width: 280px; padding: 8px 12px; border-radius: 10px;
  background: #0d0d12; border: 1px solid rgba(255,255,255,0.08);
  font-size: 12.5px; color: var(--am-paper-faint);
}
.am-window .chip {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  font-family: var(--am-f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em;
  border: 1px solid rgba(255,255,255,0.08); color: rgba(245,245,247,0.78); text-transform: uppercase;
}
.am-window .now-rail {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 14px 18px; border-radius: 18px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 18px 36px -18px rgba(0,0,0,0.4);
}
.am-window .now-rail::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(120deg, rgba(244,180,84,0.7), rgba(244,180,84,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.5; pointer-events: none;
}
.am-window .now-block { flex: 1; min-width: 120px; padding: 0 8px; }
.am-window .now-label { font-family: var(--am-f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,247,0.32); }
.am-window .now-title { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* .library: columns (#502, #513) title · chapters · length · takes ·
   last take · modified · source · actions; the loaded row (.now) carries an
   amber edge. */
.am-window .library { --lib-cols: minmax(0, 1fr) 64px 56px 48px 80px 80px 104px 64px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025); overflow: hidden; }
.am-window .lib-head, .am-window .lib-row { display: grid; grid-template-columns: var(--lib-cols); gap: 12px; align-items: center; padding: 12px 18px; }
.am-window .lib-head { padding: 10px 18px; font-family: var(--am-f-mono); font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(245,245,247,0.32); border-bottom: 1px solid rgba(255,255,255,0.08); }
.am-window .lib-row { border-bottom: 1px solid rgba(255,255,255,0.08); }
.am-window .lib-row:last-child { border-bottom: 0; }
.am-window .lib-row.now { background: rgba(244,180,84,0.05); box-shadow: inset 3px 0 0 var(--am-amber); }
.am-window .lib-head .num, .am-window .lib-row .num { text-align: right; }
.am-window .lib-row .name { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-weight: 500; }
.am-window .lib-row .name > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.am-window .lib-row .tech { font-family: var(--am-f-mono); font-size: 10.5px; font-weight: 400; color: rgba(245,245,247,0.55); }
.am-window .lib-row .excerpt { font-family: var(--am-f-prompt); font-size: 12px; font-weight: 400; color: rgba(245,245,247,0.32); margin-top: 2px; }
.am-window .lib-row .meta { font-family: var(--am-f-mono); font-size: 12px; color: rgba(245,245,247,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-window .lib-row .actions { display: flex; gap: 8px; justify-content: flex-end; }
.am-window .lib-row .actions i { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; color: rgba(245,245,247,0.72); }
.am-window .lib-row .actions i.play { background: var(--am-amber); color: #07070a; }
.am-window .lib-row .actions .am-ico { width: 14px; height: 14px; }
/* The app's narrow rules: ≤840px drops chapters and source (.wide),
   ≤720px keeps title, length and actions (.opt), rail labels go to icons. */
@container (max-width: 840px) {
  .am-window .library { --lib-cols: minmax(0, 1fr) 56px 48px 80px 80px 64px; }
  .am-window .wide { display: none; }
}
@container (max-width: 640px) {
  .am-window .library { --lib-cols: minmax(0, 1fr) 56px 64px; }
  .am-window .lib-head, .am-window .lib-row { gap: 8px; padding: 12px; }
  .am-window .rail-lbl, .am-window .cp-lbl, .am-window .opt { display: none; }
  .am-window .body { padding: 16px 14px 18px; }
}
@keyframes am-rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  .am-window .cp-brand .rec { animation: none; }
  .am-follow .am-scroller { transition: none; }
}