/* Superthoughts: the shared frame around distinct listening artworks.
   Artwork carries the color. Interface carries quiet, continuity and space. */
:root{
  --st-night:#080e12;
  --st-ink:#f4eee3;
  --st-muted:#bdc5c5;
  --st-edge:rgba(237,237,220,.20);
  --st-glass:linear-gradient(135deg,rgba(25,35,43,.70),rgba(8,15,22,.62));
  --st-type:"Helvetica Neue",Arial,sans-serif;
  --st-small-radius:3px;
}
body.page-home,body.page-practice,body.page-session,body:has(.room){
  --bg:var(--st-night);--ink:var(--st-ink);--muted:var(--st-muted);--line:var(--st-edge);
  background:var(--st-night);color:var(--st-ink);font-family:var(--st-type);font-synthesis:none;
}
.page-home h1,.page-home h2,.page-home h3,.page-practice h1,.page-practice h2,.page-practice h3,
.page-session h1,.page-session h2,.page-session h3,.room h1{font-family:var(--st-type);font-style:normal;font-weight:300}
.brand,.brand>span,.footer-brand>span{font-family:var(--st-type);font-weight:500;letter-spacing:-.065em}
.page-home .brand,.page-practice .brand,.page-session .brand,.room .brand{gap:10px;color:var(--st-ink);font-size:28px;line-height:1;text-decoration:none}
.brand img{filter:brightness(0) invert(1);opacity:.9}
.brand .brand-dot,.brand .period{color:var(--st-ink)}
.page-home .filters button,.page-practice .filters button{border-radius:var(--st-small-radius);background:transparent;border-color:var(--st-edge);color:var(--st-muted);min-height:44px}
.page-home .filters button[aria-pressed="true"],.page-practice .filters button[aria-pressed="true"]{background:#edf2ef12;color:var(--st-ink);border-color:#e4ece667}
.room .player,.page-session .player-panel{background:var(--st-glass);border:1px solid var(--st-edge);border-radius:0;box-shadow:inset 0 1px 0 #f9f4ec0c;backdrop-filter:blur(18px)}
.room .play,.page-session .play-toggle{background:linear-gradient(145deg,#f5e0bf24,#f5e0bf09);border:1px solid #f4ecdd9c;box-shadow:inset 0 1px 0 #f9f4ec25;animation:none;border-radius:17px;color:var(--st-ink)}
.page-session .play-toggle:hover,.room .play:hover{background:#f5e0bf25;border-color:#fff1dc}
.page-session .session-toolbar{padding:30px 3.3vw;align-items:center}
.page-session .session-toolbar>*{border-radius:3px;font-size:13px;min-height:44px;display:flex;align-items:center;background:#0a131880;border:1px solid var(--st-edge)}
.page-session .session-toolbar .brand{padding:0;border:0;background:transparent;backdrop-filter:none;font-size:28px}
.page-session .session-toolbar .brand img{width:30px;height:30px}
.page-session .player-panel,.page-session.focus-listening .player-panel{bottom:30px;width:min(calc(100% - 6.6vw),950px);padding:24px;max-height:65svh}
.page-session .player-panel-top{margin-bottom:20px}
.page-session .player-panel .eyebrow{font-size:10px;color:var(--st-muted);letter-spacing:.14em}
.page-session .transport-copy strong{font-family:var(--st-type);font-weight:400;letter-spacing:-.025em;font-size:22px}
.page-session .player-type,.page-session .transport-copy span{font-size:14px;color:var(--st-muted)}
.page-session .player-extras,.page-session .offline-options{border-color:var(--st-edge)}
.page-session .ambient-options button{border-radius:3px;background:none;font-size:13px;min-height:44px}
.page-session .field-words{font-family:var(--st-type);font-style:normal;font-weight:300;font-size:clamp(23px,3vw,38px);color:#f4eee3c7;letter-spacing:-.025em}
.page-session .field-top,.page-session .field-index{display:none}
.page-session .player-field::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:#07101847}
.page-session .player-field[data-dim="true"]::before{background:#04070ceb}
.page-session .player-field::before{transition:background 2.4s ease}
.page-session .transcript-dialog{font-family:var(--st-type);border:1px solid var(--st-edge);border-radius:3px;background:#10191f;color:var(--st-ink)}
:where(.page-home,.page-practice,.page-session,.room) :focus-visible{outline:2px solid #eedac2;outline-offset:5px}
@media(max-width:600px){
  .page-home .brand,.page-practice .brand,.room .brand,.page-session .session-toolbar .brand{font-size:23px}
  .page-session .session-toolbar{padding:20px 18px;gap:10px;flex-wrap:wrap}
  .page-session .session-toolbar .brand{margin-right:auto}
  .page-session .session-toolbar>*{font-size:11px;padding:8px 10px}
  .page-session .player-panel,.page-session.focus-listening .player-panel{width:calc(100% - 36px);bottom:18px;padding:20px;max-height:68svh}
  .page-session .player-panel-top{margin-bottom:17px}
  .page-session .transport-copy strong{font-size:20px}
  .page-session .ambient-options{flex-wrap:wrap;gap:8px}
}
@media(prefers-reduced-motion:reduce){.page-session .player-field::before{transition:none}}

.page-session .player-field.motion-resting .tl-live *{animation-play-state:paused}