:root {
  --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --ink: #eceff4;
  --muted: rgba(236, 239, 244, 0.55);
  --panel: #121419;
  --accent: #ffb27a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }                   /* beats the display: grid / flex rules below */
html, body { margin: 0; height: 100%; overflow: hidden; background: #1d1b1d; color: var(--ink); font-family: var(--ui-font); }
button { font: inherit; color: inherit; }

#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: manipulation; }

/* ---------------------------------------------------------------- loading */
/* the door (PROTOTYPE): a Liquid Glass title card (HIG Native, dark) over a blurred still of the room, dimmed 35%
   (the kit's glass-dim). It is there from the first paint; the Enter buttons wait for the room. Text sizes follow the
   HIG iOS text styles (Large Title 34, Body 17, Subheadline 15, Footnote 13), as this is a page, not a Mac window. */
#loader {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  background: #2a1218 url("../assets-proto/door/room-landscape.webp") center / cover no-repeat;
  transition: opacity 0.5s ease;
}
@media (orientation: portrait) { #loader { background-image: url("../assets-proto/door/room-portrait.webp"); } }
#loader::before { content: ""; position: fixed; inset: 0; background: rgb(0 0 0 / 0.35); pointer-events: none; }
#loader.done { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- room UI */
#hint {
  position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  margin: 0; padding: 9px 16px; border-radius: 999px; font-size: 14px; white-space: nowrap;
  background: rgba(14, 12, 16, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.6s ease; pointer-events: none;
}
#hint.gone, body[data-phase="loading"] #hint { opacity: 0; }
@media (max-width: 520px) { #hint { white-space: normal; width: calc(100vw - 40px); text-align: center; } }

#back {
  position: fixed; top: max(16px, env(safe-area-inset-top)); left: 16px; padding: 8px 14px; border: 0; border-radius: 999px;
  background: rgba(14, 12, 16, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; font-size: 14px;
}
#back:hover { background: rgba(30, 26, 34, 0.8); }

#tip {
  position: fixed; left: 0; top: 0; pointer-events: none; z-index: 20;
  display: grid; gap: 2px; padding: 7px 11px; border-radius: 8px; font-size: 13px;
  background: rgba(14, 12, 16, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#tip span { color: var(--muted); font-size: 12px; }

#toast {
  position: fixed; left: 50%; top: 22px; transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  padding: 9px 16px; border-radius: 999px; font-size: 14px; background: rgba(14, 12, 16, 0.8);
  transition: opacity 0.25s ease, transform 0.25s ease; z-index: 30;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

#veil { position: fixed; inset: 0; background: #0b0a0c; opacity: 0; pointer-events: none; z-index: 40; }   /* faded by camera.js */

/* keyboard route to every record: hidden until it gets focus (Tab) */
#records-nav {
  position: fixed; left: 16px; top: 64px; max-height: calc(100vh - 96px); overflow: auto; z-index: 10;
  padding: 12px; border-radius: 12px; background: rgba(14, 12, 16, 0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden;
}
#records-nav:focus-within { clip-path: none; width: 280px; height: auto; padding: 12px; overflow: auto; }
#records-nav h2 { margin: 2px 6px 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
#records-nav ul { list-style: none; margin: 0; padding: 0; }
#records-nav button {
  display: grid; width: 100%; text-align: left; padding: 7px 8px; border: 0; border-radius: 7px; background: none; cursor: pointer; font-size: 14px;
}
#records-nav button small, #records-nav a small { color: var(--muted); font-size: 12px; }
#records-nav button:hover, #records-nav button:focus-visible, #records-nav a:hover, #records-nav a:focus-visible { background: rgba(255, 255, 255, 0.08); }
#records-nav a { display: grid; padding: 7px 8px; border-radius: 7px; color: inherit; text-decoration: none; font-size: 14px; }
#records-nav .links-title, #records-nav h2:not(:first-child) { margin-top: 14px; }
body:not([data-phase="room"]):not([data-phase="desk"]) #records-nav { display: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- the player, on the iMac screen */
#player {
  position: fixed; inset: 0; z-index: 15; pointer-events: none; opacity: 0; transition: opacity 0.22s ease;
  font-size: clamp(12px, calc(var(--sw, 1000px) * 0.0122), 18px);
}
#player.on { opacity: 1; }
#player:focus { outline: none; }
#player > * { pointer-events: auto; }
#player { --tw: calc(var(--sw) / 2); }                         /* the transcript's width ... */
#player.collapsed:not(.narrow) { --tw: 4.1em; }                 /* ... folded: a rail for the two buttons */
#player .pane { position: fixed; top: var(--sy); height: var(--sh); overflow: hidden; }
#player .film { left: var(--sx); width: calc(var(--sw) - var(--tw)); background: #0c0d10; display: flex; flex-direction: column; }
#player .transcript { left: calc(var(--sx) + var(--sw) - var(--tw)); width: var(--tw); background: var(--panel); display: flex; flex-direction: column; }
/* the transcript keeps its width while it folds, so it slides away under the rail instead of re-wrapping */
#player:not(.narrow) .transcript > * { width: calc(var(--sw) / 2); flex-shrink: 0; }
#player:not(.narrow) .transcript > .lines { flex-shrink: 1; }
#player.collapsed:not(.narrow) .transcript > * { opacity: 0; }
#player.animating .film { transition: width 0.34s cubic-bezier(0.3, 0.7, 0.2, 1); }
#player.animating .transcript { transition: left 0.34s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.34s cubic-bezier(0.3, 0.7, 0.2, 1); }
#player.animating .transcript > * { transition: opacity 0.2s ease; }

/* a project with a technical deck: the film's side scrolls, the deck under the film; the controls stay at the top */
#player:not(.narrow) .film.has-deck { display: block; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
#player:not(.narrow) .film.has-deck:focus-visible { outline-offset: -2px; }
#player:not(.narrow) .film.has-deck .controls { position: sticky; top: 0; z-index: 1; background: #0c0d10; transition: box-shadow 0.2s ease; }
#player:not(.narrow) .film.has-deck.stuck .controls { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 18px -6px rgba(0, 0, 0, 0.55); }

.film-frame { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; }
.film-frame video { width: 100%; aspect-ratio: 16 / 9; max-height: 100%; background: #000; display: block; object-fit: contain; }
.big-play {
  position: absolute; width: 4.2em; height: 4.2em; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.2em;
  background: rgba(255, 255, 255, 0.92); color: #111;
}

.controls { display: flex; align-items: center; gap: 0.75em; padding: 0.7em 1em 0.9em; }
.controls button { width: 2.2em; height: 2.2em; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); cursor: pointer; padding: 0; flex: none; }
.controls button:hover { background: rgba(255, 255, 255, 0.16); }
.controls svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.ctl-play[data-state="paused"] .i-pause, .ctl-play[data-state="playing"] .i-play { display: none; }
.ctl-mute[data-state="on"] .i-x, .ctl-mute[data-state="muted"] .i-waves { display: none; }
.ctl-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.85em; white-space: nowrap; }
.ctl-seek { flex: 1; min-width: 60px; accent-color: var(--accent); height: 1.6em; cursor: pointer; }

.transcript header { padding: 1.6em 6.4em 0.6em 1.6em; }
.transcript .eyebrow { margin: 0 0 0.3em; font-size: 0.75em; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.transcript h2 { margin: 0; font-size: 1.25em; font-weight: 600; line-height: 1.25; }
.transcript .lines { position: relative; flex: 1; overflow-y: auto; padding: 0.4em 0.8em 40% 0.8em; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }
.transcript ol { list-style: none; margin: 0; padding: 0; }
.transcript li button {
  display: grid; grid-template-columns: 3.4em 1fr; gap: 0.5em; width: 100%; text-align: left; cursor: pointer;
  padding: 0.55em 0.8em; border: 0; border-radius: 0.5em; background: none; color: var(--muted);
  line-height: 1.4; transition: color 0.25s ease, background-color 0.25s ease; position: relative;
}
.transcript li button:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); }
.transcript li button time { font-variant-numeric: tabular-nums; font-size: 0.8em; padding-top: 0.2em; opacity: 0.7; }
.transcript li button[aria-current] { color: #fff; background: rgba(255, 255, 255, 0.06); }
.transcript li.chapter button {               /* a record with two films: a heading before each */
  display: block; padding: 1.6em 1.07em 0.4em; font-size: 0.75em; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
}
.transcript li.chapter:first-child button { padding-top: 0.6em; }
.transcript li.chapter button:hover { color: var(--ink); }
.transcript li button[aria-current]::before {
  content: ""; position: absolute; left: 0; top: 0.5em; bottom: 0.5em; width: 3px; border-radius: 2px; background: var(--accent);
}

.player-close {
  position: fixed; top: calc(var(--sy) + 0.9em); left: calc(var(--sx) + var(--sw) - 3.2em);
  width: 2.3em; height: 2.3em; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); cursor: pointer; padding: 0; z-index: 2;
}
.player-close:hover { background: rgba(255, 255, 255, 0.2); }
.player-close svg { width: 1.1em; height: 1.1em; }

/* fold / unfold the transcript: beside the close button, or under it on the folded rail */
.panel-toggle {
  position: fixed; top: calc(var(--sy) + 0.9em); left: calc(var(--sx) + var(--sw) - 6em);
  width: 2.3em; height: 2.3em; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); cursor: pointer; padding: 0; z-index: 2;
}
.panel-toggle:hover { background: rgba(255, 255, 255, 0.2); }
.panel-toggle svg { width: 1.25em; height: 1.25em; }
.panel-toggle[aria-expanded="true"] .i-unfold, .panel-toggle[aria-expanded="false"] .i-fold { display: none; }
#player.collapsed .panel-toggle { top: calc(var(--sy) + 3.8em); left: calc(var(--sx) + var(--sw) - 3.2em); }
#player.animating .panel-toggle { transition: top 0.34s cubic-bezier(0.3, 0.7, 0.2, 1), left 0.34s cubic-bezier(0.3, 0.7, 0.2, 1); }
#player.narrow .panel-toggle { display: none; }

/* the technical deck */
.deck { padding: 0 1.2em 1.8em; }
.deck-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  margin-top: 0.5em; padding: 1.1em 0 0.9em; border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.deck-head .eyebrow { margin: 0 0 0.3em; font-size: 0.75em; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.deck-head h3 { margin: 0; font-size: 1.05em; font-weight: 600; line-height: 1.3; }
.deck-pdf {
  flex: none; padding: 0.5em 0.95em; border-radius: 999px; background: rgba(255, 255, 255, 0.08);
  color: var(--ink); text-decoration: none; font-size: 0.85em; white-space: nowrap;
}
.deck-pdf:hover { background: rgba(255, 255, 255, 0.16); }
.slides { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9em; }
.slides li { position: relative; }
.slides img { display: block; width: 100%; height: auto; border-radius: 0.35em; background: #1b1d23; }
.slides .hot { position: absolute; border-radius: 0.25em; }            /* the deck's own links, over the slide */
.slides .hot:hover, .slides .hot:focus-visible { background: rgba(0, 136, 255, 0.12); outline: 2px solid var(--accent); outline-offset: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* narrow screens: the film fills the screen, the transcript goes under it */
#player.narrow { font-size: 14px; }
#player.narrow .film { width: var(--sw); }
#player.narrow .film .controls { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.4em 0.6em; background: linear-gradient(transparent, rgba(0,0,0,0.7)); }
#player.narrow .transcript {
  left: var(--sx); width: var(--sw); top: calc(var(--sy) + var(--sh) + 10px); height: auto;
  bottom: max(10px, env(safe-area-inset-bottom)); border-radius: 10px;
}
#player.narrow .transcript header { padding: 1em 1em 0.3em; }
.transcript .tabs { display: flex; gap: 0.25em; width: max-content; margin: 0 0 0.6em; padding: 0.2em; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.transcript .tabs button { border: 0; background: none; padding: 0.4em 0.95em; border-radius: 999px; font-size: 0.85em; color: var(--muted); cursor: pointer; }
.transcript .tabs button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); color: var(--ink); }
#player.narrow .transcript .deck { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0.8em 1.2em; }
#player.narrow .transcript .deck-head { margin-top: 0; padding-top: 0.2em; border-top: 0; }
#player.narrow .transcript[data-tab="deck"] .lines, #player.narrow .transcript[data-tab="deck"] h2,
#player.narrow .transcript[data-tab="transcript"] .deck { display: none; }
#player.narrow .transcript .lines { padding-bottom: 30%; }
#player.narrow .player-close { top: calc(var(--sy) - 2.7em); left: calc(var(--sx) + var(--sw) - 2.3em); background: rgba(14, 12, 16, 0.7); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ================================================================ PROTOTYPE additions */
/* the door card */
#loader .door { position: relative; margin: auto; width: min(452px, 100%); animation: door-in 0.6s ease both; }
#loader .door-card {
  display: grid; justify-items: center; text-align: center; padding: 30px 32px 18px; border-radius: var(--radius-mac-alert);
}
#loader :where(.door-card p) { margin: 0; }            /* low specificity: each line sets its own top margin below */
#loader .door-photo {
  width: 88px; height: 88px; margin-bottom: 14px; border-radius: 50%; object-fit: cover; object-position: 50% 18%;
  background: var(--mac-fill-secondary); box-shadow: 0 0 0 0.5px var(--separator);
}
#loader .door-name { margin: 0; font: 700 34px/41px var(--font-sans); letter-spacing: 0.4px; color: var(--glass-label-primary); }
#loader .door-role { margin-top: 4px; text-wrap: balance; font: 400 17px/22px var(--font-sans); letter-spacing: -0.43px; color: var(--glass-label-secondary); }
#loader .door-cert {                     /* the badge and its name, as a capsule label */
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 5px 13px 5px 6px; border-radius: var(--radius-capsule);
  background: var(--mac-fill-primary); font: 600 15px/20px var(--font-sans); letter-spacing: -0.23px; color: var(--glass-label-primary);
}
#loader .door-cert img { flex: none; width: 22px; height: 22px; }
#loader .door-goal { max-width: 32ch; text-wrap: balance; margin-top: 14px; font: 400 17px/22px var(--font-sans); letter-spacing: -0.43px; color: var(--glass-label-primary); }

#loader .door-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 22px; }
#loader .door-btn { height: 44px; padding: 0 14px; border-radius: var(--radius-capsule); font: 600 17px/22px var(--font-sans); letter-spacing: -0.43px; }
#loader .door-btn:not(.mac-btn--primary) { background-color: var(--mac-fill-primary); color: var(--glass-label-primary); }
/* the default button: Apple's web button blue, so white text keeps 4.5:1 (the system blue gives 3.2:1) */
#loader .door-btn.mac-btn--primary { background-color: #0071e3; }
#loader .door-btn:disabled { background-color: var(--mac-fill-tertiary); color: var(--glass-label-secondary); }
#loader .door-btn:hover:not(:disabled) { filter: brightness(1.1); }

/* the room's progress, under the buttons; it folds away once the room is ready (the status still says so) */
#loader .door-progress { display: grid; grid-template-rows: 1fr; width: 100%; transition: grid-template-rows 0.35s ease, opacity 0.35s ease; }
#loader .door-progress > * { min-height: 0; }
#loader .door-progress-inner { display: grid; gap: 6px; justify-items: center; overflow: hidden; padding-top: 12px; }
#loader.at-door .door-progress { grid-template-rows: 0fr; opacity: 0; }
#loader progress { width: 100%; height: 4px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 2px; background: var(--mac-fill-primary); }
#loader progress::-webkit-progress-bar { background: var(--mac-fill-primary); border-radius: 2px; }
#loader progress::-webkit-progress-value { background: var(--accent); border-radius: 2px; transition: width 0.2s linear; }
#loader progress::-moz-progress-bar { background: var(--accent); border-radius: 2px; }
#loader .loading-text { font: 400 13px/18px var(--font-sans); letter-spacing: -0.08px; color: var(--glass-label-secondary); }
#loader.failed .loading-text { color: var(--glass-label-primary); }
#loader.failed progress { display: none; }

#loader .door-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; width: 100%; margin-top: 18px; padding-top: 6px;
  border-top: 0.5px solid var(--separator);
}
#loader .door-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border-radius: 8px;
  font: 400 17px/22px var(--font-sans); letter-spacing: -0.43px; color: var(--link); text-decoration: none;
}
#loader .door-link svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#loader .door-link:hover { text-decoration: underline; text-underline-offset: 3px; }
#loader .door-foot { display: grid; gap: 2px; justify-items: center; margin-top: 4px; }
#loader .door-foot p, #loader .door-skip { font: 400 13px/18px var(--font-sans); letter-spacing: -0.08px; }
#loader .door-foot p { color: var(--glass-label-secondary); }
#loader .door-skip { display: inline-flex; align-items: center; min-height: 32px; color: var(--link); text-decoration: none; border-radius: 6px; }
#loader .door-skip:hover { text-decoration: underline; text-underline-offset: 3px; }
@keyframes door-in { from { opacity: 0; transform: translateY(6px); } }

/* a phone: a fuller card, the buttons stacked at the iOS size, the links two by two */
@media (max-width: 520px) {
  #loader { padding-left: 12px; padding-right: 12px; }
  #loader .door-card { padding: 26px 20px 12px; }
  #loader .door-photo { width: 76px; height: 76px; margin-bottom: 12px; }
  #loader .door-buttons { grid-template-columns: 1fr; }
  #loader .door-btn { height: 50px; }
  #loader .door-links { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: 28px; }
  #loader .door-skip { min-height: 44px; }
}
/* short screens (a phone on its side): no photo, tighter spacing; the page scrolls if it must */
@media (max-height: 620px) {
  #loader .door-photo { display: none; }
  #loader .door-card { padding-top: 22px; }
  #loader .door-cert, #loader .door-goal { margin-top: 10px; }
  #loader .door-buttons { margin-top: 16px; }
}
@media (prefers-reduced-transparency: reduce) {
  #loader .door-card { background: #1e1e20; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

#sound, #skip {
  position: fixed; top: max(16px, env(safe-area-inset-top)); z-index: 12; padding: 7px 13px; border: 0; border-radius: 999px;
  background: rgba(14, 12, 16, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; font-size: 13px;
  color: var(--ink); text-decoration: none;
}
#sound { right: 16px; }
#skip { right: 132px; }
#sound[aria-pressed="false"] .s-on, #sound[aria-pressed="true"] .s-off { display: none; }
#sound:hover, #skip:hover { background: rgba(30, 26, 34, 0.85); }
body[data-phase="playing"] #sound, body[data-phase="playing"] #skip { display: none; }
body[data-phase^="computer"] #sound, body[data-phase^="computer"] #skip { display: none; }   /* in the computer */

#hint-desk {
  position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0;
  padding: 9px 16px; border-radius: 999px; font-size: 14px; white-space: nowrap; pointer-events: none;
  background: rgba(14, 12, 16, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#drag-tip { position: fixed; left: 0; top: 0; z-index: 21; pointer-events: none; padding: 5px 9px; border-radius: 7px; font-size: 13px;
  font-variant-numeric: tabular-nums; background: rgba(14, 12, 16, 0.85); }

/* the back of the sleeve: Andy's liner-notes card (his design and exact spec, 2026-11-03), laid over the sleeve's back
   cover on screen. His sizes are CSS px on a 720 px card (540 pt), so lengths are multiples of --u (the card's width /
   720) and type of --t (--u times --fit, which shrinks long notes to fit the square). js/sleeve-back.js paints the same
   card on a canvas from this layout, so every visible mark is text, a border, a background or an inline SVG path. */
@font-face { font-family: "Libre Caslon Condensed"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../assets-proto/fonts/LibreCaslonCondensed-wght-latin.woff2") format("woff2"); }
@font-face { font-family: "Libre Caslon Condensed"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../assets-proto/fonts/LibreCaslonCondensed-Italic-latin.woff2") format("woff2"); }
/* the signature: Apple Chancery on Macs, Felipa elsewhere */
@font-face { font-family: "AY Signature"; font-display: swap;
  src: local("Apple Chancery"), local("Apple-Chancery"), url("../assets-proto/fonts/Felipa-latin.woff2") format("woff2"); }
#sleeve-back {
  --sb-paper: #fffcf4; --sb-ink: #000; --sb-accent: #970e53;   /* the one accent; could swap to #000 or #014d80 */
  --sb-serif: "Libre Caslon Condensed", "Iowan Old Style", Georgia, serif;
  --sb-hair: max(1px, calc(var(--cw) / 720));
  position: fixed; inset: 0; z-index: 16; pointer-events: none; opacity: 0; transition: opacity 0.16s ease;
}
#sleeve-back.on { opacity: 1; }
#sleeve-back > * { pointer-events: auto; }
.sb-card {
  --u: calc(var(--cw) / 720); --t: calc(var(--u) * var(--fit, 1));
  position: fixed; left: var(--cx); top: var(--cy); width: var(--cw); height: var(--ch); overflow: hidden;
  display: flex; flex-direction: column;
  padding: calc(34 * var(--u)) calc(48 * var(--u)) calc(39.3 * var(--u));
  background: var(--sb-paper); color: var(--sb-ink);
  font-family: var(--sb-serif); font-size: calc(17 * var(--t)); font-weight: 400; line-height: 1.412; font-synthesis: none;
}
:where(.sb-card) :where(p, h2, h3, dl, dd, ol) { margin: 0; padding: 0; }   /* no specificity: the rules below win */
.sb-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u));
  padding-bottom: calc(16 * var(--t)); border-bottom: calc(2 * var(--u)) solid var(--sb-ink); }
.sb-eyebrow, .sb-label, .sb-credits dt { font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1; }
.sb-eyebrow { font-size: calc(13 * var(--t)); color: var(--sb-accent); margin-bottom: calc(1.7 * var(--t)); }
.sb-dot { margin: 0 0.7em 0 0.72em; }
.sb-draft { margin-left: 0.8em; padding: 0.1em 0.6em; border: 1px solid currentColor; border-radius: 999px; font-size: 0.85em; }
.sb-close { flex: none; display: grid; place-items: center; width: calc(32 * var(--u)); height: calc(32 * var(--u));
  margin-right: calc(-6.65 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sb-ink); cursor: pointer; }
.sb-close svg { width: calc(14.8 * var(--u)); height: calc(14.8 * var(--u)); }
.sb-close:hover { background: color-mix(in srgb, var(--sb-ink) 7%, transparent); }
#sb-title { flex: none; font-size: calc(58 * var(--t) * var(--title-k, 1)); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05;
  margin-top: calc(30.65 * var(--t)); text-decoration: underline; text-decoration-thickness: calc(3 * var(--t));
  text-underline-offset: calc(2.6 * var(--t)); text-decoration-skip-ink: auto; }
.sb-subtitle { flex: none; font-style: italic; font-size: calc(21 * var(--t)); line-height: 1.25; margin-top: calc(13.2 * var(--t)); }
.sb-cols { flex: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(44 * var(--u)); align-items: start;
  margin: calc(35.4 * var(--t)) 0 calc(28 * var(--t)); }
.sb-cols.sb-wide { grid-template-columns: 1fr; }
.sb-label { font-size: calc(12 * var(--t)); }
.sb-problem { font-size: calc(21 * var(--t)); font-weight: 500; line-height: 1.34; margin-top: calc(13.3 * var(--t)); }
.sb-built { margin-top: calc(15.2 * var(--t)); }
.sb-mark { color: var(--sb-accent); }
.sb-steps { list-style: none; margin-top: calc(13.3 * var(--t)); border-top: var(--sb-hair) dotted var(--sb-ink); }
.sb-steps li { display: grid; grid-template-columns: calc(36 * var(--t)) 1fr; align-items: baseline; padding: calc(11 * var(--t)) 0;
  border-bottom: var(--sb-hair) dotted var(--sb-ink); font-size: calc(17.5 * var(--t)); font-weight: 500; line-height: 1.2; }
.sb-n { color: var(--sb-accent); font-size: calc(14 * var(--t)); font-weight: 600; }
.sb-credits { flex: none; margin-top: auto; padding-top: calc(17.8 * var(--t)); border-top: var(--sb-hair) dotted var(--sb-ink);
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(28 * var(--u)); }
.sb-credits.sb-two { grid-template-columns: 1fr 1fr; column-gap: calc(44 * var(--u)); }
.sb-credits dt { font-size: calc(12 * var(--t)); }
.sb-credits dd { font-size: calc(15.5 * var(--t)); line-height: 1.31; margin-top: calc(6.85 * var(--t)); }
.sb-tool { white-space: nowrap; }                                   /* a logo never ends a line without its name */
.sb-logo { height: 1.05em; width: auto; vertical-align: -0.2em; margin-right: 0.28em; }
.sb-logo-mono { filter: brightness(0); }                            /* one colour, in the ink: only where the standard logo blends in */
.sb-foot { flex: none; display: flex; align-items: center; gap: calc(12 * var(--t)) calc(18 * var(--t)); margin-top: calc(22.85 * var(--t)); }
.sb-credits[hidden] + .sb-foot { margin-top: auto; }
.sb-actions { display: flex; flex-wrap: wrap; gap: calc(12 * var(--t)); }
.sb-actions button, .sb-actions a {
  display: inline-flex; align-items: center; gap: calc(8.5 * var(--t)); height: calc(44 * var(--t)); padding: 0 calc(19 * var(--t));
  border: max(1px, calc(1.25 * var(--u))) solid var(--sb-ink); border-radius: calc(5 * var(--u)); background: transparent; color: var(--sb-ink);
  font: 600 calc(17 * var(--t)) / 1 var(--sb-serif); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.sb-actions .sb-play { gap: calc(11 * var(--t)); background: var(--sb-accent); border-color: var(--sb-accent); color: var(--sb-paper); }
.sb-actions .sb-play:hover { background: color-mix(in srgb, var(--sb-accent) 86%, #000); }
.sb-actions .sb-deck:hover, .sb-actions a:hover { background: color-mix(in srgb, var(--sb-ink) 6%, transparent); }
.sb-i-play { flex: none; width: calc(10.5 * var(--t)); height: calc(12.6 * var(--t)); }
.sb-i-out { flex: none; width: calc(10 * var(--t)); height: calc(10 * var(--t)); }
.sb-card :focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; }
.sb-status { font-style: italic; font-size: calc(15.5 * var(--t)); line-height: 1.3; }
.sb-sign { margin: 0 calc(3.9 * var(--t)) 0 auto; font-family: "AY Signature", "Apple Chancery", cursive; font-size: calc(30 * var(--t)); line-height: 1;
  white-space: nowrap; }
/* narrow windows (the same test as the camera's): one column at a readable size, from the sleeve's top down to the
   bottom of the window; the header stays, the rest scrolls. The canvas on the 3D sleeve keeps Andy's square layout. */
.sb-body { display: contents; }
#sleeve-back.sb-narrow .sb-card {
  --u: min(calc(var(--cw) / 400), 1px); --t: var(--u);
  height: auto; min-height: var(--ch); max-height: calc(100dvh - var(--cy) - 12px - env(safe-area-inset-bottom, 0px)); padding: 0;
}
.sb-narrow .sb-head { margin: 0 calc(22 * var(--u)); padding-top: calc(12 * var(--u)); padding-bottom: calc(10 * var(--u)); }
.sb-narrow .sb-body { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin-top: calc(10 * var(--u)); padding: 0 calc(22 * var(--u)) calc(22 * var(--u)); }   /* (a gap: text scrolls away below the rule) */
.sb-narrow .sb-close { width: 44px; height: 44px; margin: -6px -12px -6px 0; }
.sb-narrow #sb-title { font-size: calc(40 * var(--t)); line-height: 1.08; margin-top: calc(8 * var(--t)); }
.sb-narrow .sb-subtitle { font-size: calc(19 * var(--t)); margin-top: calc(8 * var(--t)); }
.sb-narrow .sb-cols { grid-template-columns: 1fr; row-gap: calc(28 * var(--t)); margin: calc(26 * var(--t)) 0 calc(26 * var(--t)); }
.sb-narrow .sb-credits { margin-top: 0; grid-template-columns: 1fr; row-gap: calc(14 * var(--t)); }
.sb-narrow .sb-cols:has(.sb-col-method:not([hidden])) + .sb-credits { border-top: 0; padding-top: 0; }   /* the steps' last rule is enough */
.sb-narrow .sb-foot { flex-wrap: wrap; margin-top: calc(24 * var(--t)); }
.sb-narrow .sb-actions button, .sb-narrow .sb-actions a { height: max(44px, calc(44 * var(--t))); }

/* ===== printed back (NOT part of the liner-notes card above: new rules only, all scoped to #sleeve-back.sb-printed or
   new class names). A record whose pocket is printed in 3D (assets-proto/backs/<id>.webp) turns over to the print and
   stays in 3D. The card above is laid exactly over the print, invisible but real: transparent text, borders and
   backgrounds (not opacity: 0), so links and buttons stay clickable, keep their focus rings, and are read as today. ===== */
#sleeve-back.sb-printed .sb-card, #sleeve-back.sb-printed .sb-card * {
  color: transparent; background: transparent; border-color: transparent; text-decoration-color: transparent; box-shadow: none;
}
#sleeve-back.sb-printed .sb-card { cursor: default; }
#sleeve-back.sb-printed .sb-card img { visibility: hidden; }          /* the stack logos are in the print */
#sleeve-back.sb-printed .sb-head .sb-close { visibility: hidden; }     /* not printed; its space is kept */
#sleeve-back.sb-printed .sb-actions .sb-deck { display: none; }        /* not printed (the Deck button is outside the sleeve) */
#sleeve-back.sb-printed .sb-actions a { font-size: calc(var(--addr, 17) * var(--t)); }   /* the address, as printed */
#sleeve-back.sb-printed .sb-actions a .sb-i-out { display: none; }
#sleeve-back.sb-printed .sb-actions a, #sleeve-back.sb-printed .sb-actions button { cursor: pointer; }
#sleeve-back.sb-printed .sb-card :focus-visible { outline-color: #ffb27a; outline-width: 3px; }   /* on the print and the room */
/* the layer follows the 3D pocket: js/sleeve-back.js follow() sets a matrix3d on .sb-card (the nominal 720 square, from
   its top-left corner) so it sits on the print's four corners at any tilt */
#sleeve-back.sb-printed .sb-card { left: 0; top: 0; width: 720px; height: 720px; transform-origin: 0 0; will-change: transform; }
/* placed from <id>.layout.json: the play button and links sit exactly on their printed buttons (inline left/top/width/height) */
#sleeve-back.sb-placed .sb-actions a, #sleeve-back.sb-placed .sb-actions button { position: absolute; box-sizing: border-box; padding: 0; justify-content: center; }
#sleeve-back.sb-placed .sb-card :focus-visible { outline: 4px solid #ffb27a; outline-offset: 3px; }
/* hover (and keyboard focus): the printed button under the pointer brightens a little, and a link shows where it goes
   (Andy, 2026-11-03: a button on the print must look clickable). In the layer, so it tilts with the pocket. */
#sleeve-back.sb-placed .sb-actions a, #sleeve-back.sb-placed .sb-actions button { transition: background-color 0.15s ease; }
#sleeve-back.sb-placed .sb-actions a::after { content: attr(data-addr); position: absolute; left: 50%; bottom: calc(100% + 9px);
  transform: translate(-50%, 3px); padding: 5px 10px; border-radius: 8px; background: rgba(28, 28, 30, 0.92); color: #fff;
  font: 500 13px/16px -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; letter-spacing: -0.08px;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
#sleeve-back.sb-placed .sb-actions a:not([data-addr])::after { display: none; }
#sleeve-back.sb-placed .sb-actions a:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) {
  #sleeve-back.sb-placed .sb-actions a:hover, #sleeve-back.sb-placed .sb-actions button:hover { background-color: rgba(255, 255, 255, 0.18); }
  #sleeve-back.sb-placed .sb-actions a:hover::after { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { #sleeve-back.sb-placed .sb-actions a::after { transition: none; } }

/* the controls outside the sleeve (printed back, and "Printed back" in text mode): calm, kit-like, on the room */
#sleeve-back .sbo-pan, #sleeve-back .sbo-bar { display: none; }
#sleeve-back.sb-printed .sbo-bar, #sleeve-back.sb-text .sbo-bar { display: flex; }
#sleeve-back .sbo-bar { position: fixed; z-index: 2; align-items: center; gap: 8px; flex-direction: column;
  left: calc(var(--rx, 0px) + var(--rw, 0px) + 14px); top: var(--ry, 0px); align-items: flex-start; }
.sbo-btn { display: inline-grid; place-items: center; height: 38px; min-width: 38px; padding: 0 15px; border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px; background: rgba(14, 12, 16, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--ink); font: 500 14px/1 var(--ui-font); cursor: pointer; white-space: nowrap; }
.sbo-btn:hover { background: rgba(14, 12, 16, 0.88); border-color: rgba(255, 255, 255, 0.28); }
.sbo-btn:focus-visible { outline: 2px solid #ffb27a; outline-offset: 2px; }
.sbo-btn[hidden] { display: none; }
.sbo-close { width: 38px; padding: 0; }
.sbo-close svg { width: 14px; height: 14px; }
.sbo-hint { display: none; color: var(--muted); font-size: 12.5px; padding: 0 2px; white-space: nowrap; }
#sleeve-back:not(.sb-gest) .sbo-text, #sleeve-back.sb-gest.sb-text .sbo-close, #sleeve-back.sb-text .sbo-deck, #sleeve-back.sb-text .sbo-hint { display: none; }
/* phones: the same printed back; tap to zoom, drag to pan (js/sleeve-back.js) */
#sleeve-back.sb-gest .sbo-pan { display: block; position: fixed; inset: 0; touch-action: none; }
#sleeve-back.sb-gest.sb-printed .sb-card { touch-action: none; }
#sleeve-back.sb-gest.sb-printed:not(.sb-zoomed) .sb-card { pointer-events: none; }
#sleeve-back.sb-gest.sb-printed .sbo-bar { flex-direction: row; left: 50%; transform: translateX(-50%); align-items: center;
  top: min(calc(var(--ry, 0px) + var(--rh, 0px) + 12px), calc(100dvh - 54px - env(safe-area-inset-bottom, 0px))); }
#sleeve-back.sb-gest.sb-printed:not(.sb-zoomed) .sbo-hint { display: inline; }
#sleeve-back.sb-gest.sb-printed.sb-zoomed .sbo-bar { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); }   /* zoomed: the controls stay at the window's foot */
#sleeve-back.sb-gest.sb-text .sbo-bar { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 12px; transform: none; }
#sleeve-back.sb-gest.sb-text .sbo-pan { display: none; }

/* ask the curator: HIG Native (Liquid Glass, dark). Tokens and glass recipes come from css/mac.css via class="mac" data-theme="dark". */
#ask { position: fixed; left: 50%; bottom: max(64px, calc(env(safe-area-inset-bottom) + 52px)); transform: translateX(-50%); z-index: 13;
  width: min(600px, calc(100vw - 32px)); display: grid; gap: 8px; }
.ask-label { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 12px; color: rgba(255,255,255,0.78); }
.ask-eyebrow { white-space: nowrap; font: 600 13px/18px var(--font-sans); color: rgba(255,255,255,0.78); }
.ask-powered { display: inline-flex; align-items: center; gap: 7px; font: 400 13px/18px var(--font-sans); color: rgba(255,255,255,0.78); white-space: nowrap; }
.ask-powered img { height: 11px; width: auto; display: block; }
#ask .ask-row { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 9px; border-radius: var(--radius-capsule); }
#ask .ask-row input:focus-visible { outline: none; }
#ask .ask-row:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* the Claude badge: the official app icon in a circle, concentric with the capsule's rounded left end (as the send button on the right) */
.ask-badge { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 0.5px rgba(255,255,255,0.18); }
.ask-row input { flex: 1; min-width: 0; border: 0; background: none; color: var(--label-primary); font: 400 17px/22px var(--font-sans); letter-spacing: -0.43px; outline: none; padding: 6px 0; height: 44px; }
.ask-row input::placeholder { color: var(--label-secondary); opacity: 1; transition: opacity 0.45s ease; }
.ask-row input.ph-fade::placeholder { opacity: 0; }
.ask-row kbd { font: 500 12px/16px var(--font-sans); color: var(--mac-label-secondary); border-radius: 6px; padding: 1px 7px; background: var(--mac-fill-secondary); box-shadow: inset 0 0 0 0.5px var(--separator); }
#ask .ask-row button { position: relative; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  transition: opacity 0.2s ease, filter 0.15s ease; }
#ask .ask-row button svg { width: 20px; height: 20px; }
#ask .ask-row button:active:not(:disabled) { filter: brightness(0.85); }
#ask .ask-row button:disabled { opacity: 0.4; cursor: default; }
#ask .ask-row button[aria-busy], #ask.busy .ask-row button:disabled { cursor: progress; }
#ask button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
#ask .ask-answer { padding: 16px 18px; border-radius: var(--radius-mac-popover); max-height: 46vh; overflow: auto;
  font: 400 15px/20px var(--font-sans); letter-spacing: -0.23px; color: var(--label-primary); }
.ask-answer p { margin: 0 0 8px; }
.ask-records { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ask-records button, .ask-chips button { appearance: none; border: 0; cursor: pointer; border-radius: var(--radius-capsule); color: var(--label-primary);
  font: 400 15px/20px var(--font-sans); letter-spacing: -0.23px; min-height: 34px; padding: 6px 14px; }
.ask-records button { font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.08px; min-height: 30px; padding: 5px 12px; }
.ask-records button:active, .ask-chips button:active { background-image: linear-gradient(var(--pressed-overlay), var(--pressed-overlay)); }
.ask-sources { margin: 6px 0 0; padding-left: 18px; color: var(--label-secondary); font: 400 13px/18px var(--font-sans); letter-spacing: -0.08px; }
.ask-answer .ask-mode { margin: 8px 0 0; font: 400 12px/16px var(--font-sans); color: var(--label-secondary); }
/* a conversation: the question being answered, and "New question" to start over */
.ask-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.ask-answer .ask-asked { margin: 0; min-width: 0; font: 600 13px/18px var(--font-sans); letter-spacing: -0.08px; color: var(--label-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ask .ask-new, #ask .ask-src { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; color: var(--accent);
  font: inherit; letter-spacing: inherit; text-decoration: none; border-radius: 4px; }
#ask .ask-new { flex: none; font: 400 13px/18px var(--font-sans); letter-spacing: -0.08px; min-height: 28px; }
#ask .ask-src:hover, #ask .ask-new:hover { text-decoration: underline; }
#ask span.ask-src { color: inherit; cursor: default; text-decoration: none; }
#ask a.ask-src:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* the one next step the answer offers ("Play the film from 0:32", "Open the résumé") */
.ask-answer .ask-act { margin: 10px 0 4px; }
#ask .ask-action { appearance: none; border: 0; cursor: pointer; border-radius: var(--radius-capsule); min-height: 32px; padding: 6px 14px;
  font: 600 13px/18px var(--font-sans); letter-spacing: -0.08px; color: var(--on-accent); background: var(--accent); }
#ask .ask-action:active { filter: brightness(0.85); }
.ask-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#ask .ask-bubble { justify-self: start; padding: 9px 16px; border-radius: 18px; font: 400 15px/20px var(--font-sans); letter-spacing: -0.23px; color: var(--label-primary);
  transition: opacity 0.4s ease; }
#ask .ask-bubble.out { opacity: 0; }
/* small glass: chips, record buttons, and the hint line */
#ask .ask-chips button, #ask .ask-records button, #hint, #hint-desk {
  color: var(--label-primary); background: var(--glass-small-fill);
  -webkit-backdrop-filter: var(--mac-glass-small-backdrop); backdrop-filter: var(--mac-glass-small-backdrop);
  box-shadow: var(--shadow-glass-small), var(--shadow-glass-small-edge), var(--shadow-glass-small-rim); }
/* entrance: a short spring rise and a one-time brightening of the rim (no coloured glow) */
@keyframes ask-rise { from { transform: translate(-50%, 22px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes ask-rim { 0%, 100% { box-shadow: var(--shadow-glass), var(--shadow-glass-edge), var(--shadow-glass-rim), var(--shadow-glass-highlight); }
  40% { box-shadow: var(--shadow-glass), var(--shadow-glass-edge), var(--shadow-glass-rim), var(--shadow-glass-highlight), inset 0 0 0 1.5px rgba(255,255,255,0.55); } }
#ask.greet { animation: ask-rise 0.6s cubic-bezier(.34,1.4,.64,1) both; }
#ask.greet .ask-row { animation: ask-rim 1.6s ease-in-out 0.5s 1; }
@media (prefers-reduced-motion: reduce) {
  #ask.greet, #ask.greet .ask-row { animation: none; }
  .ask-row input::placeholder, #ask .ask-bubble, #ask .ask-row button { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  #ask .ask-row, #ask .ask-answer, #ask .ask-bubble { background: var(--background-elevated-secondary); -webkit-backdrop-filter: none; backdrop-filter: none; }
  #ask .ask-chips button, #ask .ask-records button, #hint, #hint-desk { background: var(--background-elevated-secondary); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 520px) {
  #ask { bottom: max(84px, calc(env(safe-area-inset-bottom) + 72px)); }
  #ask .ask-row { height: 50px; padding: 0 8px; } .ask-badge { width: 34px; height: 34px; }
  .ask-label { padding: 0 8px; }
  .ask-eyebrow, .ask-powered { font-size: 12px; } .ask-powered { gap: 5px; } .ask-powered img { height: 10px; }
  .ask-row kbd { display: none; } #ask .ask-row button { width: 34px; height: 34px; } #ask .ask-row button::after { content: ''; position: absolute; inset: -5px; } .ask-row input { font-size: 17px; }
  .ask-records button, .ask-chips button { min-height: 44px; } .ask-chips button { padding: 6px 14px; }
  #ask .ask-action, #ask .ask-new { min-height: 44px; }
  #ask .ask-src { display: inline-block; min-height: 32px; line-height: 32px; }
}
body:not([data-phase="room"]):not([data-phase="desk"]) #ask { display: none; }
#hint, #hint-desk { font: 400 13px/18px var(--font-sans); letter-spacing: -0.08px; padding: 6px 14px; }
body[data-phase="room"] #hint { bottom: max(14px, env(safe-area-inset-bottom)); }

/* the player's new buttons */
.player-step {
  position: fixed; top: calc(var(--sy) + 0.9em); left: calc(var(--sx) + var(--sw) - 8.8em);
  width: 2.3em; height: 2.3em; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); cursor: pointer; padding: 0; z-index: 2;
}
.player-step:hover { background: rgba(255, 255, 255, 0.2); }
.player-step svg { width: 1.25em; height: 1.25em; }
#player.collapsed:not(.narrow) .player-step { top: calc(var(--sy) + 6.7em); left: calc(var(--sx) + var(--sw) - 3.2em); }
#player.narrow .player-step { top: calc(var(--sy) - 2.7em); left: calc(var(--sx) + var(--sw) - 5.1em); background: rgba(14, 12, 16, 0.7); }
.controls .ctl-slide { width: auto; padding: 0 0.85em; border-radius: 999px; font-size: 0.82em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.deck-follow { display: flex; align-items: center; gap: 0.45em; font-size: 0.82em; color: var(--muted); white-space: nowrap; cursor: pointer; margin-left: auto; }
.deck-follow input { accent-color: var(--accent); width: 1.1em; height: 1.1em; }
.slides li.now img { outline: 2px solid var(--accent); outline-offset: 3px; }