:root {
  --bg: #07060d;
  --text: #efeaf8;
  --muted: #a49cb8;
  --faint: #6b6380;
  --line: rgba(196, 181, 253, 0.12);
  --glass: rgba(24, 18, 40, 0.55);
  --glass-2: rgba(40, 30, 66, 0.6);
  --violet: #8b5cf6;
  --lilac: #c4b5fd;
  --orchid: #e879f9;
  --gold: #e9c47e;
  --mood: #a78bfa;
  --lvl: 0;
  --r: 18px;
  --display: 'Cormorant Garamond', 'Times New Roman', serif;
  --caps: 'Cinzel', 'Times New Roman', serif;
  --ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dock-h: 128px;
  color-scheme: dark;
}
body[data-mood='amused'] { --mood: #f0abfc; }
body[data-mood='brooding'] { --mood: #7c6cf0; }
body[data-mood='menacing'] { --mood: #f0508a; }
body[data-mood='solemn'] { --mood: #a5b4cf; }
body[data-mood='delighted'] { --mood: #f5c97a; }
body[data-mood='wistful'] { --mood: #8ecbf5; }
body[data-mood='intense'] { --mood: #ff6fb5; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip; /* not "hidden": that would break the sticky reaction bar */
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--lilac); }
[hidden] { display: none !important; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

#smoke, #embers { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#smoke { z-index: 0; filter: saturate(1.1); }
#embers { z-index: 1; }

.app {
  position: relative; z-index: 2;
  max-width: 580px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 10px) 16px calc(env(safe-area-inset-bottom) + 40px);
}
body[data-view='stage'] .app { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 24px); }

/* ---------- top bar ---------- */
.top { display: flex; justify-content: space-between; align-items: center; height: 52px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--caps); font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--lilac); }
.brand-mark { width: 9px; height: 9px; rotate: 45deg; border: 1.5px solid var(--gold); box-shadow: 0 0 12px rgba(233, 196, 126, .6); }
.top-actions { display: flex; gap: 8px; }
.icon-btn {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line); background: var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background .2s, transform .15s, border-color .2s, color .2s;
}
.icon-btn:hover { background: var(--glass-2); border-color: rgba(196, 181, 253, .25); }
.icon-btn:active { transform: scale(.94); }
.icon-btn:disabled { opacity: .35; pointer-events: none; }
.icon-btn.accent { background: linear-gradient(135deg, var(--violet), #b153e8); border-color: transparent; }
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--orchid); box-shadow: 0 0 10px var(--orchid); }

/* ---------- presence / avatar ---------- */
.presence { display: flex; flex-direction: column; align-items: center; margin: 14px 0 6px; transition: margin .5s; }
.who { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 14px; }
.name { font-family: var(--caps); font-size: 15px; letter-spacing: .18em; color: var(--gold); }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); transition: background .4s; }
body.playing .pulse { background: var(--mood); box-shadow: 0 0 10px var(--mood); animation: blink 1.6s ease-in-out infinite; }
body.thinking .pulse { background: var(--gold); animation: blink .8s ease-in-out infinite; }

body[data-view='stage'] .presence { margin-top: 2px; }
body[data-view='stage'] .who { margin-top: 10px; }

/* ---------- composer ---------- */
.composer { display: flex; flex-direction: column; gap: 22px; margin-top: 18px; animation: rise .5s cubic-bezier(.2, .8, .2, 1); }
.greeting { text-align: center; }
.eyebrow { margin: 0; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
h1 { margin: 8px 0 0; font-family: var(--display); font-weight: 500; font-size: clamp(30px, 8vw, 40px); line-height: 1.08; text-wrap: balance; }
h1 em { color: var(--lilac); }
.label { display: block; font-size: 12.5px; letter-spacing: .04em; color: var(--muted); margin-bottom: 10px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; }
.value { font-size: 13px; color: var(--lilac); font-variant-numeric: tabular-nums; }
.group, .panel { display: flex; flex-direction: column; }
.panel { gap: 12px; animation: rise .35s cubic-bezier(.2, .8, .2, 1); }
.panel .label { margin-bottom: -2px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--glass); border-radius: 999px;
  padding: 8px 14px; font-size: 13.5px; color: var(--muted); white-space: nowrap;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: color .2s, background .2s, border-color .2s, transform .15s;
}
.chip svg { width: 15px; height: 15px; }
.chip:hover { color: var(--text); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed='true'], .chip[aria-checked='true'] {
  color: #f5f0ff; border-color: color-mix(in srgb, var(--violet) 70%, transparent);
  background: linear-gradient(135deg, rgba(139, 92, 246, .35), rgba(232, 121, 249, .18));
}
.chip:disabled { opacity: .35; pointer-events: none; }

.programs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.programs button {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center;
  text-align: left; padding: 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: border-color .25s, background .25s, transform .15s;
}
.programs button svg { grid-row: span 2; width: 22px; height: 22px; color: var(--lilac); }
.programs b { font-weight: 600; font-size: 14.5px; }
.programs small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.programs button:active { transform: scale(.98); }
.programs button[aria-checked='true'] {
  border-color: color-mix(in srgb, var(--violet) 75%, transparent);
  background: linear-gradient(150deg, rgba(139, 92, 246, .3), rgba(30, 20, 50, .55));
  box-shadow: 0 10px 30px rgba(139, 92, 246, .18);
}

.input {
  width: 100%; min-height: 48px; padding: 12px 15px; border-radius: 14px;
  background: rgba(14, 10, 26, .6); border: 1px solid var(--line); color: var(--text); font-size: 16px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .2s;
}
textarea.input { resize: vertical; line-height: 1.45; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.input:focus { outline: none; border-color: rgba(167, 139, 250, .6); }
.input::placeholder { color: var(--faint); }

input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; }
input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--violet) var(--fill, 20%), rgba(196, 181, 253, .15) var(--fill, 20%)); }
input[type='range']::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(196, 181, 253, .15); }
input[type='range']::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--violet); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: #f5f0ff; box-shadow: 0 0 0 5px rgba(139, 92, 246, .35), 0 4px 10px rgba(0, 0, 0, .4); }
input[type='range']::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #f5f0ff; box-shadow: 0 0 0 5px rgba(139, 92, 246, .35); }

.drop {
  display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r); cursor: pointer;
  border: 1.5px dashed rgba(196, 181, 253, .28); background: rgba(14, 10, 26, .45); transition: border-color .2s, background .2s;
}
.drop:hover, .drop.over { border-color: var(--lilac); background: rgba(139, 92, 246, .12); }
.drop svg { width: 26px; height: 26px; color: var(--lilac); }
.drop span { display: flex; flex-direction: column; gap: 3px; }
.drop small { color: var(--muted); font-size: 12.5px; }
.paste summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 2px; }
.paste[open] summary { margin-bottom: 10px; }
.paste .ghost { margin-top: 10px; }
.book-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--glass); }
.book-title { font-family: var(--display); font-size: 22px; line-height: 1.15; color: var(--gold); }

.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(14, 10, 26, .6); border: 1px solid var(--line); }
.segmented button { min-height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 13.5px; transition: all .2s; padding: 0 6px; }
.segmented button[aria-pressed='true'] { background: linear-gradient(135deg, rgba(139, 92, 246, .45), rgba(177, 83, 232, .3)); color: #fff; box-shadow: 0 4px 14px rgba(139, 92, 246, .25); }

.cta {
  position: relative; width: 100%; height: 56px; border: 0; border-radius: 999px; overflow: hidden;
  background: linear-gradient(120deg, #3b1578, #5b21b6 48%, #7e1d8f);
  color: #fff; font-weight: 600; font-size: 16px; letter-spacing: .02em;
  box-shadow: 0 10px 30px rgba(59, 21, 120, .5), 0 0 0 1px rgba(255, 255, 255, .1) inset;
  transition: transform .15s, opacity .2s, box-shadow .3s;
}
.cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .25) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 4.5s ease-in-out infinite; }
.cta:active { transform: scale(.985); }
.cta:disabled { opacity: .55; pointer-events: none; }
.cta span { position: relative; z-index: 1; }
.ghost {
  min-height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass);
  color: var(--lilac); font-size: 14px; font-weight: 500; transition: background .2s;
}
.ghost:hover { background: var(--glass-2); }
.ghost.small { min-height: 34px; font-size: 13px; padding: 0 14px; border-radius: 999px; }
.ghost.danger { color: #fb7185; }
.fine { margin: 0; font-size: 12.5px; color: var(--faint); line-height: 1.5; }
.fine.center { text-align: center; }
code { font-size: 12px; padding: 1px 5px; border-radius: 5px; background: rgba(196, 181, 253, .1); }

/* ---------- stage / prompter ---------- */
.stage { margin-top: 18px; animation: rise .5s cubic-bezier(.2, .8, .2, 1); }
.stage-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.stage-head h2 { margin: 6px 0 0; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 26px; line-height: 1.1; color: var(--lilac); text-wrap: balance; }
.prompter { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; }
.seg {
  position: relative; padding: 12px 14px 14px 18px; border-radius: 16px; cursor: pointer;
  opacity: .42; transition: opacity .5s, background .5s;
}
.seg::before { content: ''; position: absolute; left: 4px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: var(--line); transition: background .5s; }
.seg:hover { opacity: .7; }
.seg.past { opacity: .3; }
.seg.now { opacity: 1; background: linear-gradient(135deg, rgba(40, 28, 70, .55), rgba(20, 14, 36, .35)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.seg.now::before { background: linear-gradient(var(--mood), var(--violet)); box-shadow: 0 0 10px var(--mood); }
.seg-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11.5px; color: var(--muted); min-width: 0; }
.kind { font-family: var(--caps); letter-spacing: .16em; text-transform: uppercase; font-size: 10.5px; color: var(--gold); flex: none; }
.kind.tangent, .kind.answer { color: var(--orchid); }
.kind.reading { color: var(--lilac); }
.seg-meta .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-meta a { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-size: 11.5px; }
.seg-meta a:hover { color: var(--lilac); }
.seg-meta a svg { width: 13px; height: 13px; }
.seg-text { margin: 0; font-family: var(--display); font-size: 19px; line-height: 1.5; color: #e9e3f5; }
.seg.reading-seg .seg-text { font-style: italic; }
.seg.now .seg-text { font-size: 23px; line-height: 1.45; }
.seg.now .w { color: rgba(233, 227, 245, .45); transition: color .25s; }
.seg.now .w.on { color: #fff; text-shadow: 0 0 18px color-mix(in srgb, var(--mood) 40%, transparent); }
.seg.pending .seg-text { color: var(--faint); font-style: italic; }
.seg.pending .seg-text::after { content: ''; display: inline-block; width: 1.4em; animation: dots 1.2s steps(4) infinite; }
.question { display: block; font-family: var(--ui); font-size: 13px; color: var(--muted); margin-bottom: 4px; }

/* ---------- dock ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 18px 16px calc(env(safe-area-inset-bottom) + 14px);
  padding-top: 26px;
  background: linear-gradient(to top, rgba(12, 8, 24, .62) 0%, rgba(12, 8, 24, .42) 60%, rgba(12, 8, 24, 0) 100%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
#viz { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 124px; pointer-events: none; opacity: .38; z-index: 0; }
.reactions, .controls, .askbar { position: relative; width: 100%; max-width: 560px; }
.reactions .chip { background: rgba(26, 19, 44, .9); }
.reactions { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; justify-content: center; }
.reactions::-webkit-scrollbar { display: none; }
@media (max-width: 420px) { .reactions { justify-content: flex-start; } }
.controls { z-index: 1; display: grid; grid-template-columns: 54px repeat(2, 44px) 68px 44px 52px; justify-content: center; align-items: center; gap: 12px; }
.askbar { z-index: 1; }
.icon-btn.speed { width: 52px; border-radius: 999px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--lilac); }
.play {
  position: relative; width: 68px; height: 68px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, #7c3aed, #c026d3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 10px 30px rgba(139, 92, 246, .45), 0 0 calc(10px + var(--lvl) * 8px) rgba(217, 70, 239, .4);
  transition: transform .15s;
}
.play:active { transform: scale(.94); }
.play svg { grid-area: 1 / 1; width: 26px; height: 26px; transition: opacity .2s, transform .2s; }
.play .i-play { translate: 2px 0; }
.play .i-pause, .play .spin { opacity: 0; }
body.playing .play .i-play { opacity: 0; transform: scale(.6); }
body.playing .play .i-pause { opacity: 1; }
body.loading .play svg { opacity: 0 !important; }
.spin { grid-area: 1 / 1; width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: spin .8s linear infinite; }
body.loading .play .spin { opacity: 1; }
.askbar { display: flex; gap: 8px; animation: rise .25s ease; }
.askbar input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(167, 139, 250, .35); background: rgba(20, 14, 36, .85); font-size: 16px; }
.askbar input:focus { outline: none; border-color: var(--lilac); }
#micBtn.listening { color: #fff; background: #db2777; border-color: transparent; animation: blink 1s infinite; }

/* ---------- sheets ---------- */
.scrim { position: fixed; inset: 0; z-index: 20; background: rgba(4, 3, 9, .55); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: fade .25s; }
.sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 21; width: min(600px, 100%);
  max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain;
  translate: -50% 105%; transition: translate .4s cubic-bezier(.2, .8, .2, 1);
  padding: 10px 18px calc(env(safe-area-inset-bottom) + 24px);
  border-radius: 26px 26px 0 0; border: 1px solid var(--line); border-bottom: 0;
  background: linear-gradient(180deg, rgba(28, 20, 48, .97), rgba(12, 9, 22, .98));
  box-shadow: 0 -30px 80px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; gap: 12px;
}
.sheet.open { translate: -50% 0; }
.handle { width: 40px; height: 4px; border-radius: 4px; background: rgba(196, 181, 253, .25); margin: 0 auto 6px; flex: none; }
.sheet-head h3 { margin: 4px 0 4px; font-family: var(--display); font-size: 26px; font-weight: 500; color: var(--lilac); }
.set { border: 1px solid var(--line); border-radius: var(--r); background: rgba(255, 255, 255, .02); padding: 0 14px; }
.set > summary { display: flex; align-items: center; gap: 10px; min-height: 54px; cursor: pointer; list-style: none; font-weight: 500; }
.set > summary::-webkit-details-marker { display: none; }
.set > summary svg { color: var(--lilac); }
.set > summary small { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--muted); }
.set > summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); rotate: 45deg; margin-left: 8px; transition: rotate .25s; }
.set > summary small + ::after { margin-left: 8px; }
.set[open] > summary::after { rotate: 225deg; }
.set[open] { padding-bottom: 16px; }
.set[open] > :not(summary) { margin-top: 12px; }
.set [data-show] > * + * { margin-top: 12px; }
.field { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--muted); }
.toggle { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.toggle input { appearance: none; flex: none; width: 42px; height: 24px; margin: 2px 0 0; border-radius: 999px; background: rgba(196, 181, 253, .15); position: relative; transition: background .2s; cursor: pointer; }
.toggle input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: translate .2s; }
.toggle input:checked { background: var(--violet); }
.toggle input:checked::after { translate: 18px 0; }
.toggle span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.toggle small { color: var(--faint); font-size: 12px; }
.file-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.peek summary { cursor: pointer; font-size: 13px; color: var(--lilac); }
.peek pre { white-space: pre-wrap; font-size: 11.5px; line-height: 1.5; color: var(--muted); background: rgba(0, 0, 0, .3); border: 1px solid var(--line); border-radius: 12px; padding: 12px; max-height: 300px; overflow: auto; }
.voice-search, .find-more { display: flex; gap: 8px; }
.voice-search .input, .find-more .input { flex: 1; }
.voices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.voice, .voice-current .voice { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.voice img, .voice .ph { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #241a3a; }
.voice b { display: block; font-size: 14px; font-weight: 500; }
.voice small { font-size: 11.5px; color: var(--faint); }
.voice .icon-btn { width: 38px; height: 38px; }
.voice.selected { border-color: rgba(167, 139, 250, .6); background: rgba(139, 92, 246, .14); }
.voice-current:empty::before { content: 'No voice chosen yet. Search below.'; font-size: 13px; color: var(--faint); }

.docket { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.docket li { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); transition: opacity .2s; }
.docket li.off { opacity: .45; }
.docket input { appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 7px; border: 1.5px solid rgba(196, 181, 253, .4); cursor: pointer; display: grid; place-items: center; }
.docket input:checked { background: var(--violet); border-color: var(--violet); }
.docket input:checked::after { content: ''; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -1px; }
.docket b { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.docket p { margin: 4px 0 6px; font-size: 13px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.docket .src { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--faint); }
.docket .src a { color: var(--lilac); text-decoration: none; }
.badge { font-size: 10.5px; padding: 2px 7px; border-radius: 6px; background: rgba(196, 181, 253, .1); color: var(--lilac); }
.badge.now { background: rgba(232, 121, 249, .2); color: var(--orchid); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 14px); z-index: 30;
  translate: -50% -20px; opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px;
  background: rgba(28, 20, 48, .94); border: 1px solid var(--line); backdrop-filter: blur(12px);
  font-size: 14px; text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .4); transition: all .3s;
}
.toast.show { translate: -50% 0; opacity: 1; }
.toast.err { border-color: rgba(251, 113, 133, .4); }

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

@keyframes spin { to { rotate: 360deg; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes sheen { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
@keyframes poke { 30% { transform: scale(.88) rotate(-6deg); } 60% { transform: scale(1.06) rotate(4deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =================================================================== v3 additions */


/* ---------- screen transitions ---------- */
.avatar { view-transition-name: avatar; }
.who { view-transition-name: who; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
::view-transition-old(root) { animation-name: vtOut; }
::view-transition-new(root) { animation-name: vtIn; }
::view-transition-group(avatar), ::view-transition-group(who) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px) scale(.99); filter: blur(4px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(12px) scale(.99); filter: blur(4px); } }

/* ---------- transcript: new parts arrive, the current one glows ---------- */
.seg.fresh { animation: segIn .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes segIn { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } }
.seg.now { box-shadow: 0 0 0 1px color-mix(in srgb, var(--mood) 22%, transparent), 0 18px 50px rgba(0, 0, 0, .35); }
.seg.now::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--mood) 14%, transparent), transparent 60%);
  opacity: calc(.6 + var(--lvl) * .6); transition: background 1s;
}

/* ---------- stage head & small buttons ---------- */
.stage-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn.small { width: 34px; height: 34px; }
.icon-btn.small svg { width: 17px; height: 17px; }
.icon-btn.busy svg { animation: blink 1s infinite; }

/* sleep timer */

/* ---------- link reader ---------- */
.link-form { display: flex; gap: 8px; }
.link-form .input { flex: 1; min-width: 0; }

/* ---------- history ---------- */
.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.history li { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 12px 12px 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); animation: segIn .4s cubic-bezier(.2, .8, .2, 1) both; }
.history b { font-family: var(--display); font-size: 19px; font-weight: 500; color: var(--text); line-height: 1.2; }
.history small { display: block; margin-top: 3px; font-size: 12px; color: var(--faint); }
.history .row-actions { display: flex; gap: 6px; }
.history .icon-btn { width: 38px; height: 38px; }
.history .empty { display: block; text-align: center; color: var(--faint); font-size: 13px; padding: 30px 0; border: 0; background: none; animation: none; }

/* ---------- usage ---------- */
.usage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.usage div { padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.usage b { display: block; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--lilac); }
.usage span { font-size: 11.5px; color: var(--muted); }

/* ---------- welcome ---------- */
.welcome { gap: 16px; }
.welcome-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 6px; }
.welcome-hero h3 { margin: 10px 0 0; font-family: var(--display); font-weight: 500; font-size: 30px; color: var(--lilac); }
.welcome-hero p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; max-width: 36ch; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 10px; }
.steps li { counter-increment: step; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 14px 52px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.steps li::before { content: counter(step); position: absolute; left: 14px; top: 13px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: linear-gradient(135deg, var(--violet), #b153e8); }
.welcome .ghost { align-self: center; border: 0; background: none; color: var(--muted); }

/* ---------- cta press ripple ---------- */
.cta .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .35); transform: scale(0); animation: ripple .7s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* program cards: soft lift */
.programs button { transition: border-color .25s, background .25s, transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
@media (hover: hover) { .programs button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .3); } }

/* =================================================================== portrait (static, meme style) */
.avatar {
  position: relative; width: 156px; height: 156px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer; transition: width .5s, height .5s;
}
/* during a session his head sits in the dock, next to the chat button */
.dock-head { position: relative; width: 54px; height: 54px; display: grid; place-items: center; }
body[data-view='stage'] .avatar { width: 54px; height: 54px; }
body[data-view='stage'] .presence { display: none; }
.aura {
  position: absolute; inset: -30%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--mood) 50%, transparent) 0%, transparent 62%);
  opacity: calc(.4 + var(--lvl) * .12); filter: blur(8px); transition: background 1s;
}
.face { position: relative; width: 100%; height: 100%; display: block; --hop: 0; }
.face .frame {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; /* frames swap instantly, like a PNGtuber */
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
  transform: translateY(calc(var(--hop) * -7px)) scale(calc(1 + var(--hop) * .035));
}
.face .frame.on { opacity: 1; }
.face.tint .frame { filter: sepia(.5) saturate(2.4) hue-rotate(-30deg) contrast(1.12) drop-shadow(0 0 16px rgba(255, 40, 30, .8)); }
.face.scheme .frame { filter: drop-shadow(0 0 22px rgba(255, 30, 20, .85)) drop-shadow(0 0 4px rgba(255, 200, 150, .6)); }
.face.boom { animation: boom .55s cubic-bezier(.2, 1.6, .4, 1); }
.face.poke { animation: pokeShake .4s linear; }
@keyframes boom {
  0% { transform: scale(1); }
  12% { transform: scale(1.32) rotate(-3deg); }
  24% { transform: scale(1.18) translate(4px, -3px) rotate(2deg); }
  36% { transform: scale(1.22) translate(-4px, 2px) rotate(-2deg); }
  52% { transform: scale(1.1) translate(3px, 1px); }
  100% { transform: scale(1); }
}
@keyframes pokeShake {
  20% { transform: translate(-5px, 1px) rotate(-4deg); }
  40% { transform: translate(5px, -1px) rotate(3deg); }
  60% { transform: translate(-3px, 0) rotate(-2deg); }
  80% { transform: translate(2px, 0); }
}

/* the whole room reddens while he schemes */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 50% 20%, transparent 35%, rgba(150, 0, 0, .45) 100%);
  mix-blend-mode: screen; transition: opacity .5s;
}
body.scheming::after { opacity: 1; }
body.scheming .aura { background: radial-gradient(circle, rgba(255, 30, 20, .55) 0%, transparent 62%); }

/* welcome screen portrait */
.welcome-mask { width: 112px; height: 112px; }

/* settings: portrait slots */
.portraits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.portrait-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); text-align: center; }
.portrait-slot .thumb { width: 84px; height: 84px; margin-bottom: 4px; border-radius: 12px; background: repeating-conic-gradient(rgba(255, 255, 255, .04) 0 25%, transparent 0 50%) 0 0 / 14px 14px; }
.portrait-slot .thumb img { width: 100%; height: 100%; object-fit: contain; }
.portrait-slot b { font-size: 13.5px; font-weight: 600; }
.portrait-slot small { font-size: 11.5px; color: var(--faint); min-height: 1.3em; }
.portrait-slot.scheme b { color: #ff7a6b; }
.slot-actions { display: flex; gap: 6px; margin-top: 4px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row .ghost { flex: 1; }
.eye-marker { display: flex; flex-direction: column; gap: 8px; }
.eye-stage { position: relative; align-self: center; cursor: crosshair; border-radius: 12px; overflow: hidden; background: repeating-conic-gradient(rgba(255, 255, 255, .05) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.eye-stage img { display: block; max-width: 100%; max-height: 300px; }
.eye-dot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle, #fff 0 20%, #ff3b2f 45%, transparent 72%); box-shadow: 0 0 14px #ff2a1a; pointer-events: none; }
.portrait-slot .thumb img.borrowed { opacity: .45; filter: grayscale(.4); }
.portrait-slot.angry .thumb img.borrowed { filter: sepia(.6) saturate(3) hue-rotate(-30deg) drop-shadow(0 0 6px rgba(255, 40, 30, .6)); opacity: .6; }

/* voiced-ahead marker: a small dot that lights once the part's audio is ready */
.seg .kind::after {
  content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 8px; vertical-align: 2px;
  background: rgba(196, 181, 253, .18); transition: background .4s, box-shadow .4s;
}
.seg.voiced .kind::after { background: #a78bfa; box-shadow: 0 0 6px rgba(167, 139, 250, .8); }
.seg.past .kind::after { opacity: .4; }

/* the logo is the home button */
button.brand { background: none; border: 0; padding: 6px 4px; margin-left: -4px; cursor: pointer; border-radius: 10px; transition: color .2s, text-shadow .2s; }
button.brand:hover { color: #ede9fe; text-shadow: 0 0 14px rgba(167, 139, 250, .6); }
button.brand:active { transform: scale(.97); }

/* =================================================================== layout v4 */
/* reactions pinned at the top of a session */
.stage .reactions {
  position: sticky; top: calc(env(safe-area-inset-top) + 6px); z-index: 4;
  justify-content: flex-start; max-width: none; margin: 10px -16px 0; padding: 8px 16px;
  background: linear-gradient(to bottom, rgba(10, 7, 20, .78), rgba(10, 7, 20, .55) 70%, rgba(10, 7, 20, 0));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#sleepBtn[aria-pressed='true'] span { font-variant-numeric: tabular-nums; }
.stage-status { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }

/* topics with sub-topics */
.link-btn { background: none; border: 0; padding: 0; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.link-btn:hover { color: var(--lilac); }
.subtopics { display: flex; flex-direction: column; gap: 8px; }
.subtopics:empty { display: none; }
.subrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .025); animation: rise .3s cubic-bezier(.2, .8, .2, 1);
}
.subhead { font-size: 11.5px; letter-spacing: .05em; color: var(--lilac); margin: 0 4px 0 2px; white-space: nowrap; }
.chip.sub { padding: 5px 11px; font-size: 12.5px; }
.stage .reactions { width: auto; gap: 6px; background: linear-gradient(to bottom, rgba(10, 7, 20, .7), rgba(10, 7, 20, 0)); }
.stage .reactions .chip { padding: 6px 11px; font-size: 12.5px; flex: none; }

/* a chunk that continues the paragraph above: no repeated label, tucked closer */
.seg.cont { margin-top: -8px; padding-top: 6px; }
.seg.cont .seg-meta { display: none; }

/* =================================================================== v5: summon, length, shelf, discourse */
/* Summon: dark crimson so it stands out from all the violet */
.cta {
  background: linear-gradient(120deg, #3d0a1f 0%, #6e1230 45%, #8c1a3f 75%, #6b1752 100%);
  color: #ffe9ee;
  box-shadow: 0 10px 34px rgba(150, 20, 50, .42), 0 0 0 1px rgba(255, 130, 150, .18) inset;
}
.cta:hover { box-shadow: 0 12px 40px rgba(170, 25, 60, .5), 0 0 0 1px rgba(255, 140, 160, .26) inset; }

/* Length: a slim pill in the same crimson, directly under Summon */
#lengthGroup { margin-top: -6px; }
#lengthGroup .label-row { padding: 0 4px; }
#length { height: 30px; }
#length::-webkit-slider-runnable-track {
  height: 30px; border-radius: 999px;
  background: linear-gradient(90deg, #3d0a1f, #7a1434 calc(var(--fill, 20%) - 1%), rgba(255, 255, 255, .05) var(--fill, 20%));
  box-shadow: 0 0 0 1px rgba(255, 130, 150, .16) inset, 0 6px 18px rgba(120, 15, 40, .25);
}
#length::-webkit-slider-thumb {
  width: 24px; height: 24px; margin-top: 3px; border-radius: 50%;
  background: #ffe4ea; box-shadow: 0 0 0 4px rgba(140, 26, 63, .55), 0 2px 8px rgba(0, 0, 0, .5);
}
#length::-moz-range-track { height: 30px; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 130, 150, .16) inset; }
#length::-moz-range-progress { height: 30px; border-radius: 999px; background: linear-gradient(90deg, #3d0a1f, #7a1434); }
#length::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #ffe4ea; box-shadow: 0 0 0 4px rgba(140, 26, 63, .55); }

/* The Sharmat's shelf: two rows of covers you swipe through */
.shelf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px; }
.shelf-head .label { margin: 0; color: var(--gold); font-family: var(--caps); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.shelf {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 104px; gap: 14px 12px;
  overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 10px; margin: 0 -2px;
  scrollbar-width: thin; scrollbar-color: rgba(167, 139, 250, .3) transparent;
}
.book { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; text-align: left; scroll-snap-align: start; cursor: pointer; }
.book .cover {
  position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden;
  background: linear-gradient(160deg, #2a1d45, #120c20); box-shadow: 0 8px 18px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.book .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book b { font-size: 12.5px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book small { font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .book:hover .cover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .1) inset; } }
.book.chosen .cover { box-shadow: 0 0 0 2px #b4234f, 0 10px 24px rgba(140, 26, 63, .5); }
.book .spin { position: absolute; inset: 0; margin: auto; opacity: 0; }
.book.loading .cover img { filter: brightness(.35) blur(1px); }
.book.loading .spin { opacity: 1; }

/* Discourse questions */
.questions { display: flex; flex-wrap: wrap; gap: 8px; }
.question-chip {
  border: 1px solid var(--line); background: var(--glass); border-radius: 14px; padding: 9px 13px;
  font-size: 13.5px; line-height: 1.3; color: var(--muted); text-align: left; transition: all .2s;
}
.question-chip:hover { color: var(--text); }
.question-chip[aria-pressed='true'] { color: #fff; border-color: rgba(180, 35, 79, .7); background: linear-gradient(135deg, rgba(110, 18, 48, .55), rgba(60, 20, 70, .45)); }
.question-chip.trending { border-style: dashed; }
.questions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.question-chip { font-size: 12.5px; padding: 9px 11px; }
.question-chip.trending { grid-column: 1 / -1; text-align: center; }
.shelf-head .fine { font-size: 11.5px; text-align: right; }

/* =================================================================== v6: glass summon, compact length, vertical shelf */
.cta {
  background: linear-gradient(120deg, rgba(110, 18, 48, .42), rgba(150, 28, 66, .4) 50%, rgba(110, 24, 88, .42));
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 140, 165, .28);
  box-shadow: 0 8px 28px rgba(120, 15, 45, .28), 0 1px 0 rgba(255, 255, 255, .12) inset;
}
.cta:hover { background: linear-gradient(120deg, rgba(125, 20, 55, .52), rgba(165, 32, 74, .5) 50%, rgba(122, 28, 98, .52)); }

/* Length: one compact row — label, glass slider, value */
.length-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: -8px; padding: 0 4px; }
.length-row .label { margin: 0; }
.length-row .value { min-width: 46px; text-align: right; }
#length { height: 22px; }
#length::-webkit-slider-runnable-track {
  height: 22px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(110, 18, 48, .45), rgba(150, 28, 66, .45) calc(var(--fill, 20%) - 1%), rgba(255, 255, 255, .05) var(--fill, 20%));
  box-shadow: 0 0 0 1px rgba(255, 140, 165, .22) inset;
}
#length::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: 2px; background: #ffe4ea; box-shadow: 0 0 0 3px rgba(150, 28, 66, .5), 0 2px 6px rgba(0, 0, 0, .45); }
#length::-moz-range-track { height: 22px; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 140, 165, .22) inset; }
#length::-moz-range-progress { height: 22px; background: linear-gradient(90deg, rgba(110, 18, 48, .45), rgba(150, 28, 66, .45)); }
#length::-moz-range-thumb { width: 18px; height: 18px; box-shadow: 0 0 0 3px rgba(150, 28, 66, .5); }

/* activities: one swipeable row instead of three wrapped ones */
#activity { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); }
#activity::-webkit-scrollbar { display: none; }
#activity .chip { flex: none; }

/* literature: mode switch with the impressions chip beside it */
.lit-top { display: flex; align-items: center; gap: 8px; }
.lit-top .segmented { flex: 1; }
.lit-top .impressions { flex: none; font-size: 12.5px; padding: 9px 12px; }

/* the shelf scrolls vertically now (no clipped corners), covers dimmed to sit in the scene */
.shelf {
  grid-auto-flow: row; grid-template-rows: none; grid-auto-columns: auto;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  overflow-x: visible; overflow-y: auto; max-height: 480px; scroll-snap-type: y proximity;
  padding: 8px 6px 18px; margin: 0 -6px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
}
.book .cover img { filter: brightness(.74) saturate(.82); opacity: .86; transition: filter .25s, opacity .25s; }
.book:hover .cover img, .book.chosen .cover img { filter: brightness(.95) saturate(1); opacity: 1; }
.lit-top .segmented button { white-space: nowrap; }
.lit-top .impressions svg { width: 14px; height: 14px; }

/* =================================================================== v7 */
/* activities: a tidy grid of real buttons (all visible, easy to click) */
#activity {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px;
  overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none;
}
#activity .chip { justify-content: center; padding: 10px 8px; font-size: 13.5px; cursor: pointer; }

/* length: thinner */
#length { height: 16px; }
#length::-webkit-slider-runnable-track { height: 12px; }
#length::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -2px; box-shadow: 0 0 0 3px rgba(150, 28, 66, .5), 0 2px 6px rgba(0, 0, 0, .45); }
#length::-moz-range-track { height: 12px; }
#length::-moz-range-progress { height: 12px; }
#length::-moz-range-thumb { width: 16px; height: 16px; }
.length-row { margin-top: -10px; }

/* literature: interjection buttons under the mode switch */
.impressions-group { display: flex; flex-direction: column; gap: 8px; }
.impressions-group .label { margin: 0; }

/* =================================================================== topics: rows of topic + sub-topics */
.topic-rows { display: flex; flex-direction: column; gap: 8px; }
.trow {
  display: grid; grid-template-columns: 128px 1fr; gap: 10px; align-items: center;
  padding: 8px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
  transition: border-color .25s, background .25s;
}
.trow.on { border-color: rgba(167, 139, 250, .32); background: linear-gradient(135deg, rgba(139, 92, 246, .13), rgba(30, 20, 50, .25)); }
.tbtn {
  display: flex; flex-direction: column; justify-content: center; gap: 3px; align-self: stretch; min-height: 58px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass);
  text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .15s;
}
.tbtn:active { transform: scale(.98); }
.tbtn b { font-size: 14px; font-weight: 600; color: var(--text); }
.tbtn small { font-size: 11px; line-height: 1.25; color: var(--faint); }
.tbtn[aria-pressed='true'] { border-color: rgba(167, 139, 250, .65); background: linear-gradient(135deg, rgba(139, 92, 246, .38), rgba(177, 83, 232, .2)); }
.tbtn[aria-pressed='true'] small { color: var(--lilac); }
.tsubs { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; }
.tsub {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(14, 10, 26, .5);
  font-size: 12.5px; color: var(--muted); cursor: pointer; transition: all .2s;
}
.tsub:hover { color: var(--text); border-color: rgba(196, 181, 253, .3); }
.trow:not(.on) .tsub { opacity: .62; }
.tsub[aria-pressed='true'] { opacity: 1; color: #fff; border-color: rgba(167, 139, 250, .6); background: rgba(139, 92, 246, .3); }
@media (max-width: 360px) { .trow { grid-template-columns: 1fr; } }

/* =================================================================== personality dials + model picker */
.dial { display: flex; flex-direction: column; gap: 4px; padding: 10px 2px 4px; }
.dial .label-row .label { margin: 0; color: var(--text); font-size: 13.5px; }
.dial .ticks { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; font-size: 10.5px; color: var(--faint); }
.dial .ticks span { text-align: center; transition: color .2s; }
.dial .ticks span:first-child { text-align: left; }
.dial .ticks span:last-child { text-align: right; }
.dial .ticks span.on { color: var(--lilac); }
.dial .fine { margin-top: 2px; }
.model-pick { display: flex; flex-direction: column; gap: 8px; }
.model-pick .label-row .label { margin: 0; }

/* =================================================================== settings: nested sections */
.set.sub { margin-top: 14px; padding: 0 12px; border-radius: 14px; background: rgba(0, 0, 0, .18); border-color: rgba(196, 181, 253, .1); }
.set.sub > summary { min-height: 46px; font-size: 14px; }
.set.sub > summary svg { width: 17px; height: 17px; }
.set.sub[open] { padding-bottom: 14px; }
.privacy { margin: 2px 0 0; font-size: 12px; color: #fff; opacity: .9; letter-spacing: .01em; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.keys dt { font-variant-numeric: tabular-nums; }
.keys dt { padding: 1px 8px; border-radius: 6px; background: rgba(196, 181, 253, .12); color: var(--lilac); font-size: 12px; text-align: center; min-width: 34px; }
.keys dd { margin: 0; color: var(--muted); align-self: center; }

/* =================================================================== settings: accordion, open section stands out */
.set { position: relative; transition: border-color .25s, background .25s, box-shadow .25s; }
.set:not([open]) > summary { color: var(--muted); }
.set:not([open]) > summary:hover { color: var(--text); }
.set[open] {
  border-color: rgba(167, 139, 250, .5);
  background: linear-gradient(160deg, rgba(139, 92, 246, .12), rgba(255, 255, 255, .02) 40%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3), 0 0 0 1px rgba(167, 139, 250, .12), 0 0 24px rgba(139, 92, 246, .12);
}
.set[open] > summary { color: #fff; }
.set[open] > summary svg { color: #c4b5fd; filter: drop-shadow(0 0 6px rgba(167, 139, 250, .6)); }
.set[open]::before {
  content: ''; position: absolute; left: -1px; top: 14px; width: 3px; height: 26px; border-radius: 0 3px 3px 0;
  background: linear-gradient(var(--lilac), var(--violet)); box-shadow: 0 0 10px rgba(167, 139, 250, .7);
}
.set.sub[open] { border-color: rgba(167, 139, 250, .38); background: rgba(139, 92, 246, .08); box-shadow: none; }
.set.sub[open]::before { top: 11px; height: 22px; }
.credits { margin: 0; font-family: var(--display); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--lilac); text-align: center; padding: 6px 4px 2px; }

/* =================================================================== dial info tips + credits */
.dial .label { display: inline-flex; align-items: center; gap: 7px; }
.info {
  position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(196, 181, 253, .35); background: transparent;
  font: italic 600 10px/1 Georgia, serif; color: var(--muted); cursor: help; opacity: .7; transition: opacity .2s, color .2s;
}
.info:hover, .info:focus-visible, .info.show { opacity: 1; color: var(--lilac); }
.info .tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 5; translate: -30% 4px;
  width: max-content; max-width: 230px; padding: 8px 11px; border-radius: 10px;
  background: rgba(24, 17, 40, .97); border: 1px solid rgba(167, 139, 250, .3); box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
  font: 400 12px/1.45 var(--ui); font-style: normal; color: var(--text); text-align: left; white-space: normal;
  opacity: 0; pointer-events: none; transition: opacity .18s, translate .18s;
}
.info:hover .tip, .info:focus-visible .tip, .info.show .tip { opacity: 1; translate: -30% 0; }
.credits { display: flex; flex-direction: column; gap: 9px; padding: 4px 2px 6px; text-align: center; font-family: var(--display); font-style: italic; font-size: 16.5px; line-height: 1.45; color: var(--muted); }
.credits p { margin: 0; }
.credits b { font-weight: 600; color: var(--lilac); }
.credits .sign { margin-top: 6px; font-size: 19px; color: var(--gold); }

/* model picker: ‹ dropdown › */
.model-row { display: grid; grid-template-columns: 38px 1fr 38px; gap: 8px; align-items: center; }
.model-row .icon-btn.small { width: 38px; height: 38px; }
.model-row select { min-width: 0; }

/* =================================================================== brain: model row, actions, animated test */
.model-row { grid-template-columns: 1fr 38px 38px; }
.brain-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.brain-actions .ghost.small { min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; }
.brain-actions .ghost:disabled { opacity: .5; }
.ghost.test { display: inline-flex; align-items: center; gap: 0; transition: background .35s, border-color .35s, color .35s, gap .25s; }
.ghost.test::before { content: ''; width: 0; height: 14px; flex: none; transition: width .25s; }
.ghost.test.testing, .ghost.test.pass, .ghost.test.fail { gap: 8px; }
.ghost.test.testing { opacity: 1 !important; }
.ghost.test.testing::before { width: 14px; border-radius: 50%; border: 2px solid rgba(196, 181, 253, .3); border-top-color: var(--lilac); animation: spin .8s linear infinite; }
.ghost.test.pass { background: rgba(34, 197, 94, .18); border-color: rgba(74, 222, 128, .6); color: #86efac; animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
.ghost.test.pass::before, .ghost.test.fail::before { width: 15px; height: 15px; }
.ghost.test.pass::before {
  background: #4ade80;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ghost.test.fail { background: rgba(244, 63, 94, .15); border-color: rgba(251, 113, 133, .55); color: #fda4af; animation: shake .4s; }
.ghost.test.fail::before {
  background: #fb7185;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes pop { 40% { transform: scale(1.08); } }
@keyframes shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
/* keep all three on one row, even when the test label grows to "Brain works" */
.brain-actions { flex-wrap: nowrap; gap: 6px; }
.brain-actions .ghost.small { min-height: 34px; padding: 0 11px; font-size: 12.5px; white-space: nowrap; }

/* =================================================================== session dock v2 */
/* the shade behind the controls: barely there, so the smoke shows through */
.dock {
  padding-top: 14px;
  background: linear-gradient(to top, rgba(10, 7, 20, .2) 0%, rgba(10, 7, 20, .08) 55%, rgba(10, 7, 20, 0) 100%);
}
/* bottom bar: head · play · volume · speed · gear */
.controls { grid-template-columns: 54px 60px 1fr 50px 44px; gap: 12px; justify-content: stretch; max-width: 560px; }
.play { width: 60px; height: 60px; }
.volume { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 4px; color: var(--muted); }
.volume svg { width: 18px; height: 18px; flex: none; }
.volume input { flex: 1; min-width: 0; height: 20px; }
.volume input::-webkit-slider-runnable-track { height: 4px; }
.volume input::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; box-shadow: 0 0 0 3px rgba(139, 92, 246, .35); }
.volume input::-moz-range-thumb { width: 14px; height: 14px; }
.speed-wrap { position: relative; }
.icon-btn.speed { width: 50px; }
.speed-menu {
  position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 6; display: flex; flex-direction: column; gap: 4px; padding: 6px;
  border-radius: 14px; background: rgba(24, 17, 40, .96); border: 1px solid rgba(167, 139, 250, .3); box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  animation: rise .18s ease;
}
.speed-menu button { min-width: 64px; padding: 8px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: right; }
.speed-menu button:hover { background: var(--surface-2); color: var(--text); }
.speed-menu button[aria-pressed='true'] { background: rgba(139, 92, 246, .3); color: #fff; }
#sessionBtn { position: relative; }
#sessionBtn .dot { top: 6px; right: 7px; background: var(--lilac); box-shadow: 0 0 8px var(--lilac); }

/* top bar: ‹ › 💬 | More · Ramble · No tangents */
.stage .reactions .icon-chip { width: 34px; height: 32px; padding: 0; justify-content: center; flex: none; }
.stage .reactions .icon-chip svg { width: 15px; height: 15px; }
.stage .reactions .icon-chip:disabled { opacity: .35; }
.rx-sep { flex: none; width: 1px; height: 20px; margin: 0 2px; align-self: center; background: var(--line); }

/* session options sheet */
.session-block { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.session-block > .label { margin: 0; color: var(--gold); font-family: var(--caps); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.session-block .dial { padding-top: 6px; }
.cta.rewrite { height: 48px; font-size: 15px; }
/* visualizer: hairlines from the very bottom edge, see-through */
#viz { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 96px; margin: 0; opacity: .5; z-index: 0; pointer-events: none; filter: none; }
/* top bar fits a phone: compact chips, text-only labels on narrow screens */
.stage .reactions { gap: 5px; }
.stage .reactions .icon-chip { width: 32px; }
@media (max-width: 440px) {
  .stage .reactions .chip:not(.icon-chip) { padding: 6px 10px; font-size: 12px; }
  .stage .reactions .chip:not(.icon-chip) svg { display: none; }
}

/* =================================================================== transcript rows + "tell me more" branches */
.seg-row {
  display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 0;
}
.seg-row::-webkit-scrollbar { display: none; }
.cell { position: relative; display: flex; align-items: center; gap: 6px; flex: 0 0 100%; min-width: 0; scroll-snap-align: center; }
.cell > .seg { flex: 1; min-width: 0; }
/* with branches, cards are a little narrower so the next one peeks in from the right */
.seg-row.branched .cell { flex-basis: 88%; }
.cell.branch > .seg { background: linear-gradient(135deg, rgba(232, 121, 249, .07), rgba(20, 14, 36, .25)); border: 1px solid rgba(232, 121, 249, .16); }
.cell.branch > .seg::before { background: linear-gradient(var(--orchid), var(--violet)); }
.cell.branch > .seg.now { border-color: rgba(232, 121, 249, .4); }
.cell[data-depth='2'] > .seg { background: linear-gradient(135deg, rgba(232, 121, 249, .11), rgba(20, 14, 36, .3)); }
.kind.return, .seg.return .kind { color: var(--orchid); }
.seg.return .seg-text { font-size: 16px; font-style: italic; color: var(--muted); }
.seg.now.return .seg-text { font-size: 18px; }

/* ＋ beside a news card */
.more-btn {
  flex: none; position: relative; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; align-self: center;
  border-radius: 50%; border: 1px solid rgba(232, 121, 249, .35); background: rgba(24, 17, 40, .75); color: var(--orchid);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; transition: transform .15s, background .2s, border-color .2s;
}
.more-btn svg { grid-area: 1 / 1; width: 15px; height: 15px; stroke-width: 2.2; transition: opacity .2s; }
.more-btn:hover { background: rgba(232, 121, 249, .16); border-color: rgba(232, 121, 249, .6); }
.more-btn:active { transform: scale(.9); }
.more-btn .spin { grid-area: 1 / 1; width: 16px; height: 16px; border-width: 2px; opacity: 0; border-color: rgba(232, 121, 249, .25); border-top-color: var(--orchid); }
.more-btn.loading svg { opacity: 0; }
.more-btn.loading .spin { opacity: 1; }
/* cards in a branched row line up at the top, not centred against the tallest one */
.seg-row { align-items: flex-start; }
.cell { align-items: flex-start; }
.cell .more-btn { margin-top: 14px; }

/* top bar: pure blur, no dark fade; a clock on the far left */
.stage .reactions { background: transparent; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rx-clock {
  flex: none; align-self: center; margin-right: 4px; white-space: nowrap;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.rx-clock b { color: var(--lilac); font-weight: 600; }
@media (max-width: 440px) { .rx-clock { font-size: 11px; margin-right: 2px; } }

/* =================================================================== dock v3: short volume, speed slider, gear menu */
.controls { grid-template-columns: 54px 60px minmax(64px, 92px) minmax(0, 1fr) 44px; gap: 10px; }
.speed-slider { display: flex; align-items: center; gap: 8px; min-width: 0; }
.speed-slider input { flex: 1; min-width: 0; height: 22px; }
.speed-slider input::-webkit-slider-runnable-track { height: 4px; }
.speed-slider input::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; box-shadow: 0 0 0 3px rgba(139, 92, 246, .35); }
.speed-slider input::-moz-range-thumb { width: 14px; height: 14px; }
.speed-slider output { flex: none; min-width: 3.4em; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--lilac); font-variant-numeric: tabular-nums; }
.speed-slider.wide output { font-size: 14px; }
.speed-slider.wide input { height: 28px; }

.gear-wrap { position: relative; }
#sessionBtn[aria-expanded='true'] { background: rgba(139, 92, 246, .28); border-color: rgba(167, 139, 250, .5); color: #fff; }
.gear-menu {
  position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 8; width: min(290px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 4px; padding: 8px;
  border-radius: 18px; border: 1px solid rgba(167, 139, 250, .28);
  background: rgba(22, 16, 38, .9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  transform-origin: bottom right; animation: gear-pop .18s cubic-bezier(.2, .8, .2, 1);
}
@keyframes gear-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.gm-block { display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 8px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.gm-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.gm-label svg, .gm-item svg { width: 17px; height: 17px; flex: none; color: var(--lilac); }
.gm-label em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gm-sleep { padding: 3px; border-radius: 11px; }
.gm-sleep button { min-height: 30px; font-size: 12.5px; border-radius: 8px; }
.gm-item {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 8px; border: 0; border-radius: 12px;
  background: transparent; color: var(--text); text-align: left; font-size: 14px; cursor: pointer; transition: background .15s;
}
.gm-item:hover { background: rgba(167, 139, 250, .1); }
.gm-item:disabled { opacity: .4; pointer-events: none; }
.gm-item > span { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.gm-item small { font-size: 11.5px; color: var(--muted); }
.gm-item .gm-chev { width: 15px; height: 15px; color: var(--muted); }
.gm-switch { flex: none; position: relative; width: 34px; height: 20px; border-radius: 999px; background: rgba(196, 181, 253, .15); transition: background .2s; }
.gm-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #d8ccf5; transition: translate .2s; }
.gm-item[aria-pressed='true'] .gm-switch { background: var(--violet); }
.gm-item[aria-pressed='true'] .gm-switch::after { translate: 14px 0; background: #fff; }

/* top bar: clock on the left, ‹ › 💬 on the right */
.stage .reactions { align-items: center; }
.stage .reactions #prevBtn { margin-left: auto; }

/* sheet buttons never get squashed (zoomed in, the sheet's column used to shrink them) */
.sheet > .cta { flex: none; height: auto; min-height: 52px; padding: 12px 20px; }
@media (max-width: 440px) {
  .controls { grid-template-columns: 48px 60px 64px minmax(0, 1fr) 42px; gap: 8px; }
  .controls .volume { padding: 0; }
  .controls .volume svg { display: none; }
  .speed-slider { gap: 6px; }
  .speed-slider output { min-width: 2.9em; font-size: 12px; }
}
@media (max-width: 440px) { .dock-head { width: 48px; height: 48px; } }
@media (max-width: 440px) {
  .controls { grid-template-columns: 48px 60px 72px minmax(0, 1fr) 42px; }
  .controls .volume { gap: 4px; }
  .controls .volume svg { display: block; width: 14px; height: 14px; }
}

/* =================================================================== save / bookmark */
#saveBtn[aria-pressed='true'] { color: #fff; background: rgba(139, 92, 246, .32); border-color: rgba(196, 181, 253, .45); }
#saveBtn[aria-pressed='true'] svg, .history .mark[aria-pressed='true'] svg { fill: currentColor; }
#saveBtn svg { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
#saveBtn[aria-pressed='true'] svg { transform: scale(1.08); }
.history .group { display: block; padding: 10px 2px 2px; border: 0; background: none; animation: none; color: var(--gold); font-family: var(--caps); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.history .group:first-child { padding-top: 0; }
.history li.saved { border-color: rgba(196, 181, 253, .28); background: rgba(139, 92, 246, .07); }
.history .mark[aria-pressed='true'] { color: var(--lilac); border-color: rgba(196, 181, 253, .4); }
@media (max-width: 440px) { .history .row-actions { gap: 4px; } .history .icon-btn { width: 34px; height: 34px; } }

/* =================================================================== volume: icon tucked under the slider */
.controls { grid-template-columns: 54px 60px minmax(72px, 108px) minmax(0, 1fr) 44px; }
.controls .volume { position: relative; display: block; padding: 0; }
.controls .volume input { position: relative; z-index: 1; display: block; width: 100%; }
.controls .volume svg { display: block; position: absolute; left: 0; bottom: -11px; width: 13px; height: 13px; opacity: .55; z-index: 0; pointer-events: none; }
@media (max-width: 440px) {
  .controls { grid-template-columns: 48px 60px 80px minmax(0, 1fr) 42px; }
  .controls .volume svg { width: 12px; height: 12px; }
}

/* =================================================================== play: glass, like the rest */
.play {
  background: radial-gradient(120% 120% at 30% 20%, rgba(196, 160, 255, .32), rgba(139, 92, 246, .16) 55%, rgba(110, 40, 180, .14));
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(221, 205, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -10px 20px rgba(80, 30, 140, .18), 0 8px 26px rgba(20, 8, 40, .45), 0 0 calc(6px + var(--lvl) * 16px) rgba(192, 132, 252, calc(.15 + var(--lvl) * .35));
}
.play:hover { background: radial-gradient(120% 120% at 30% 20%, rgba(206, 175, 255, .4), rgba(139, 92, 246, .22) 55%, rgba(110, 40, 180, .18)); }
.play svg { filter: drop-shadow(0 1px 6px rgba(120, 60, 200, .45)); }
.stage .reactions #prevBtn { margin-left: 0; }
.stage .reactions #saveBtn { margin-left: auto; }
.play {
  background: radial-gradient(120% 120% at 30% 18%, rgba(214, 185, 255, .42), rgba(150, 100, 250, .22) 52%, rgba(120, 50, 200, .2));
  border-color: rgba(230, 215, 255, .34);
}
.play {
  background: radial-gradient(130% 130% at 30% 15%, rgba(222, 196, 255, .5), rgba(160, 110, 255, .3) 50%, rgba(125, 60, 215, .26));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -12px 22px rgba(70, 20, 130, .2), 0 8px 26px rgba(20, 8, 40, .4), 0 0 calc(10px + var(--lvl) * 18px) rgba(192, 132, 252, calc(.22 + var(--lvl) * .35));
}
.controls .volume svg { opacity: .75; color: var(--lilac); }

/* =================================================================== speed: tap to cycle, hold for a slider above */
.controls { grid-template-columns: 54px 60px 108px 56px 44px; justify-content: center; gap: 14px; }
@media (max-width: 440px) { .controls { grid-template-columns: 48px 60px 84px 54px 42px; gap: 10px; } }
.icon-btn.speed { width: 56px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--lilac); font-variant-numeric: tabular-nums; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.icon-btn.speed[aria-expanded='true'] { background: rgba(139, 92, 246, .28); border-color: rgba(167, 139, 250, .5); color: #fff; }
.speed-pop {
  position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 8; translate: -50% 0;
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto 1fr; justify-items: center; gap: 8px 6px;
  padding: 12px 12px 14px; border-radius: 18px; border: 1px solid rgba(167, 139, 250, .28);
  background: rgba(22, 16, 38, .88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  transform-origin: bottom center; animation: gear-pop .18s cubic-bezier(.2, .8, .2, 1);
}
.speed-pop output { grid-column: 1 / -1; font-size: 15px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
/* vertical: slide up for faster */
.speed-pop input { writing-mode: vertical-lr; direction: rtl; width: 28px; height: 150px; margin: 0; }
.speed-pop input::-webkit-slider-runnable-track { width: 4px; height: 100%; background: linear-gradient(0deg, var(--violet) var(--fill, 20%), rgba(196, 181, 253, .15) var(--fill, 20%)); }
.speed-pop input::-webkit-slider-thumb { margin-top: 0; margin-left: -9px; }
.speed-pop input::-moz-range-track { width: 4px; height: 100%; }
.speed-pop input::-moz-range-progress { width: 4px; }
.speed-ends { display: flex; flex-direction: column; justify-content: space-between; height: 150px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* sleep timer on: a little moon on the gear instead of a dot */
.moon-badge {
  position: absolute; top: -3px; right: -3px; width: 18px; height: 18px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(30, 20, 52, .95); border: 1px solid rgba(196, 181, 253, .45);
  box-shadow: 0 0 10px rgba(196, 181, 253, .45); animation: gear-pop .25s ease;
}
.moon-badge[hidden] { display: none; }
.moon-badge svg { width: 11px; height: 11px; color: var(--lilac); fill: currentColor; stroke-width: 1.5; }

/* =================================================================== glass pass: play, top buttons, ＋ */
.play {
  background: rgba(255, 255, 255, .035);
  backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border: 1px solid rgba(235, 225, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 26px rgba(10, 4, 24, .25), 0 0 calc(4px + var(--lvl) * 18px) rgba(192, 132, 252, calc(.08 + var(--lvl) * .3));
}
.play:hover { background: rgba(255, 255, 255, .07); }

.stage .reactions .chip { background: rgba(255, 255, 255, .035); border-color: rgba(235, 225, 255, .14); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
.stage .reactions .chip:hover { background: rgba(255, 255, 255, .08); }
.stage .reactions #saveBtn[aria-pressed='true'] { background: rgba(139, 92, 246, .24); border-color: rgba(196, 181, 253, .4); }

/* ＋: bigger, glass, and as faded as the card it belongs to */
.more-btn {
  width: 46px; height: 46px; border: 1px solid rgba(232, 121, 249, .24); background: rgba(255, 255, 255, .03);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  opacity: .42; transition: opacity .5s, transform .15s, background .2s, border-color .2s;
}
.more-btn svg { width: 22px; height: 22px; stroke-width: 1.8; }
.more-btn .spin { width: 22px; height: 22px; }
.cell:has(> .seg.now) .more-btn { opacity: 1; background: linear-gradient(135deg, rgba(40, 28, 70, .4), rgba(20, 14, 36, .2)); border-color: rgba(232, 121, 249, .4); }
.cell:has(> .seg.past) .more-btn { opacity: .3; }
.cell .more-btn:hover, .more-btn.loading { opacity: 1; background: rgba(232, 121, 249, .1); border-color: rgba(232, 121, 249, .55); }
.cell .more-btn { margin-top: 10px; }

/* =================================================================== glass pass 2 */
/* dock buttons: clear glass */
.controls .icon-btn { background: rgba(255, 255, 255, .035); border-color: rgba(235, 225, 255, .16); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
.controls .icon-btn:hover { background: rgba(255, 255, 255, .08); }
.controls .icon-btn[aria-expanded='true'] { background: rgba(139, 92, 246, .22); border-color: rgba(196, 181, 253, .4); }
/* play: barely there, light blur */
.play { background: rgba(255, 255, 255, .015); backdrop-filter: blur(6px) saturate(1.2); -webkit-backdrop-filter: blur(6px) saturate(1.2); border-color: rgba(235, 225, 255, .18); }
.play:hover { background: rgba(255, 255, 255, .05); }

/* speed: a horizontal glass bar above the button */
.speed-pop {
  left: auto; right: -40px; translate: none; transform-origin: bottom right;
  display: grid; grid-template-columns: auto 180px auto; grid-template-rows: auto auto; align-items: center; gap: 4px 10px;
  padding: 10px 14px 12px; border-radius: 16px;
  background: rgba(40, 28, 70, .22); border-color: rgba(235, 225, 255, .16);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.speed-pop output { grid-column: 1 / -1; justify-self: center; font-size: 14px; }
.speed-pop input { writing-mode: horizontal-tb; direction: ltr; width: 180px; height: 26px; }
.speed-pop input::-webkit-slider-runnable-track { width: auto; height: 4px; background: linear-gradient(90deg, var(--violet) var(--fill, 20%), rgba(196, 181, 253, .15) var(--fill, 20%)); }
.speed-pop input::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; margin-left: 0; box-shadow: 0 0 0 4px rgba(139, 92, 246, .3); }
.speed-pop input::-moz-range-track { width: auto; height: 4px; }
.speed-pop input::-moz-range-progress { width: auto; height: 4px; }
.speed-pop input::-moz-range-thumb { width: 16px; height: 16px; }
.speed-end { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 440px) { .speed-pop { grid-template-columns: auto 150px auto; right: -50px; } .speed-pop input { width: 150px; } }

/* ＋: monochrome and barely there */
.more-btn { color: rgba(240, 236, 250, .55); border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .012); opacity: .28; }
.more-btn .spin { border-color: rgba(255, 255, 255, .15); border-top-color: rgba(255, 255, 255, .7); }
.cell:has(> .seg.past) .more-btn { opacity: .18; }
.cell:has(> .seg.now) .more-btn { opacity: .5; background: rgba(255, 255, 255, .02); border-color: rgba(255, 255, 255, .14); }
.cell .more-btn:hover, .more-btn.loading { opacity: .9; color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); }
.cell:has(> .seg.now) .more-btn { opacity: .36; }

/* =================================================================== branched rows: run to the screen edge, fade out, scrollbar */
.seg-row.branched {
  margin-right: calc(-1 * var(--bleed, 0px)); padding-right: 40px; padding-bottom: 10px;
  scroll-snap-type: x proximity; scrollbar-width: auto;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
}
.seg-row.branched::-webkit-scrollbar { display: block; height: 6px; }
.seg-row.branched::-webkit-scrollbar-track { background: rgba(255, 255, 255, .05); border-radius: 6px; }
.seg-row.branched::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 6px; }
/* Firefox has no ::-webkit-scrollbar; give it the standard thin one */
@supports not selector(::-webkit-scrollbar) { .seg-row.branched { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent; } }
.seg-row.branched::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .35); }
.seg-row.branched .cell { flex: 0 0 calc(var(--colw, 100%) * .9); scroll-snap-align: start; }

/* ＋: bigger */
.more-btn { width: 56px; height: 56px; }
.more-btn svg { width: 28px; height: 28px; stroke-width: 1.6; }
.more-btn .spin { width: 26px; height: 26px; }
.cell .more-btn { margin-top: 6px; }

/* top bar: time spent on this session, between chat and prev */
.rx-elapsed { flex: none; align-self: center; min-width: 3.2em; padding: 0 4px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--lilac); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.stage .reactions #prevBtn { margin-left: 0; }

/* =================================================================== centred dialogs: archive and settings */
.sheet.dialog {
  top: 50%; bottom: auto; width: min(600px, calc(100% - 32px)); max-height: min(86dvh, 860px);
  translate: -50% -46%; scale: .97; opacity: 0; visibility: hidden; pointer-events: none;
  transition: translate .32s cubic-bezier(.2, .8, .2, 1), scale .32s cubic-bezier(.2, .8, .2, 1), opacity .22s, visibility 0s .32s;
  padding: 18px 18px 22px; border-radius: 24px; border: 1px solid rgba(196, 181, 253, .18);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.sheet.dialog.open { translate: -50% -50%; scale: 1; opacity: 1; visibility: visible; pointer-events: auto; transition: translate .32s cubic-bezier(.2, .8, .2, 1), scale .32s cubic-bezier(.2, .8, .2, 1), opacity .22s; }
.sheet.dialog .sheet-head { position: relative; padding-right: 48px; }
.dialog-close { position: absolute; top: 0; right: 0; width: 38px; height: 38px; background: rgba(255, 255, 255, .035); border-color: rgba(235, 225, 255, .14); }
.dialog-close svg { width: 16px; height: 16px; }
.dialog-close:hover { background: rgba(255, 255, 255, .09); }

/* archive row: play · save · download   ·   delete */
.history .del { margin-left: 10px; }
.history .del:hover { color: #fca5a5; border-color: rgba(252, 165, 165, .35); }

/* =================================================================== sticky bars: controls, plus the chapter bar when reading */
.stage-bars { position: sticky; top: calc(env(safe-area-inset-top) + 6px); z-index: 4; margin: 10px -16px 0; }
.stage .stage-bars .reactions { position: relative; top: auto; margin: 0; }
.chapter-bar {
  display: flex; align-items: center; gap: 10px; padding: 4px 16px 8px;
  background: transparent; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: rise .3s ease;
}
.chapter-bar[hidden] { display: none; }
.chapter-bar .chip { flex: none; width: 32px; height: 32px; padding: 0; justify-content: center; background: rgba(255, 255, 255, .035); border-color: rgba(235, 225, 255, .14); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
.chapter-bar .chip:hover { background: rgba(255, 255, 255, .08); }
.chapter-bar .chip svg { width: 15px; height: 15px; }
.chapter-bar .chip:disabled { opacity: .3; }
.chapter-now { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.chapter-title {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--caps); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  text-shadow: 0 0 14px rgba(233, 196, 126, .25);
}
.chapter-now small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* =================================================================== his own thoughts sit on the right */
.seg.thought { text-align: right; padding: 12px 18px 14px 14px; }
.seg.thought::before { left: auto; right: 4px; }
.seg.thought .seg-meta { flex-direction: row-reverse; }
.seg.thought .seg-meta a { margin-left: 0; margin-right: auto; }
.seg.thought .question { display: block; }
.seg.thought .kind::after { content: none; }
.seg.thought .kind::before {
  content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 8px; vertical-align: 2px;
  background: rgba(196, 181, 253, .18); transition: background .4s, box-shadow .4s;
}
.seg.thought.voiced .kind::before { background: #a78bfa; box-shadow: 0 0 6px rgba(167, 139, 250, .8); }
.seg.thought.past .kind::before { opacity: .4; }
/* digressions: header and line on the right, but the text reads left-aligned like everything else */
.seg.thought { text-align: left; }
.seg.thought .seg-meta { justify-content: flex-start; }
/* anchored from the left so it snaps to whole pixels like the left-hand line (no soft, thinner edge at 125%/150% scaling) */
.seg.thought::before { right: auto; left: calc(100% - 6px); }

/* =================================================================== states of mind (thoughts.js) */
/* the screen's edges glow in the aside's colour while it plays (scheming has its own red, in body.scheming) */
.thought-glow {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease, background 1.2s ease;
  background: radial-gradient(120% 90% at 50% 20%, transparent 38%, var(--thought-glow, transparent) 100%);
  mix-blend-mode: screen;
}
body.playing[data-thought] .thought-glow { opacity: 1; }
body.playing[data-thought] .aura { background: radial-gradient(circle, color-mix(in srgb, var(--thought) 55%, transparent) 0%, transparent 62%); }
/* the card says which kind of aside it is, in its colour */
.seg.aside .kind { color: var(--thought); }
.seg.aside.now::before { background: linear-gradient(var(--thought), color-mix(in srgb, var(--thought) 45%, var(--violet))); box-shadow: 0 0 10px var(--thought); }
.seg.aside.now { box-shadow: 0 0 0 1px color-mix(in srgb, var(--thought) 26%, transparent), 0 18px 50px rgba(0, 0, 0, .35); }
.seg.aside.now::after { background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--thought) 14%, transparent), transparent 60%); }
.seg.aside.now .w.on { text-shadow: 0 0 18px color-mix(in srgb, var(--thought) 40%, transparent); }
.thought-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.thought-legend li { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--thought) 22%, transparent); background: color-mix(in srgb, var(--thought) 5%, transparent); }
.thought-legend .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--thought); box-shadow: 0 0 10px var(--thought); }
.thought-legend span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.thought-legend b { font-family: var(--caps); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--thought); font-weight: 500; }
.thought-legend small { font-size: 12px; color: var(--muted); }
.thought-legend .icon-btn { width: 34px; height: 34px; flex: none; }
.thought-legend .icon-btn svg { width: 14px; height: 14px; }

/* book recaps: "the story so far", on the book's side, so you can follow along */
.kind.recap { color: #c4b5fd; }
.seg.recap-seg .seg-text { font-size: 17.5px; }
.seg.recap-seg.now .seg-text { font-size: 21px; }
/* softer, slower edge glow to match the gentler smoke */
.thought-glow { transition: opacity 4s ease, background 4s ease; }
body.playing[data-thought] .thought-glow { opacity: .6; }
.aura { transition: background 3s ease; }

/* =================================================================== states of mind: sliders and previews */
.aside-dials { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.aside-dials > .label { color: var(--gold); font-family: var(--caps); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.aside-dials > .fine { margin: 0 0 4px; }
.aside-dial .label-row .label { color: var(--thought); display: inline-flex; align-items: center; gap: 6px; }
.aside-dial input[type='range']::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--thought) var(--fill, 20%), rgba(196, 181, 253, .15) var(--fill, 20%)); }
.aside-dial input[type='range']::-moz-range-progress { background: var(--thought); }
.preview-btn {
  width: 24px; height: 24px; padding: 0; display: inline-grid; place-items: center; flex: none; cursor: pointer;
  border-radius: 50%; border: 1px solid color-mix(in srgb, var(--thought) 45%, transparent);
  background: color-mix(in srgb, var(--thought) 10%, transparent); color: var(--thought); transition: background .2s, transform .15s;
}
.preview-btn:hover { background: color-mix(in srgb, var(--thought) 22%, transparent); }
.preview-btn:active { transform: scale(.9); }
.preview-btn svg { width: 10px; height: 10px; fill: currentColor; translate: 1px 0; }

/* while previewing, the room shows through: menus fade back for a few seconds */
body.previewing[data-thought] .thought-glow { opacity: .6; }
body.previewing[data-thought] .aura { background: radial-gradient(circle, color-mix(in srgb, var(--thought) 55%, transparent) 0%, transparent 62%); }
body.previewing .scrim { opacity: 0; transition: opacity .6s; }
body.previewing .sheet.open { opacity: .08; transition: opacity .6s; }

/* =================================================================== chat moves to the dock; back arrow replaces End */
.controls { grid-template-columns: 44px 54px 60px 100px 56px 44px; gap: 12px; }
@media (max-width: 440px) { .controls { grid-template-columns: 40px 46px 58px 72px 52px 40px; gap: 7px; } .controls .icon-btn { width: 40px; height: 40px; } .icon-btn.speed { width: 52px; } }
.stage .reactions #saveBtn { margin-left: 0; }
.stage .reactions #endSession { margin-left: auto; }

/* Personality: Vibes / States of mind / Face & atmosphere / Voice */
#setStates > summary { font-family: var(--caps); color: var(--gold); letter-spacing: .14em; text-transform: uppercase; font-size: 13px; font-weight: 500; }
#setStates > summary svg { color: var(--gold); }
#setStates .aside-dials { margin-top: 0; padding-top: 0; border-top: 0; }
#setStates .dial[data-dial='moodVolume'] { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }

/* chapter bar v2:  ‹  [3 of 12]   CHAPTER TITLE   [Page 4/9]  ›  */
.chapter-bar { margin-top: 2px; padding-top: 4px; gap: 8px; }
.chapter-pill {
  flex: none; height: 32px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px;
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(235, 225, 255, .14);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
.chapter-pill[hidden] { display: none; }
.chapter-bar .chapter-title { font-size: 17px; letter-spacing: .12em; line-height: 1.2; }
@media (max-width: 440px) {
  .chapter-bar { gap: 6px; }
  .chapter-pill { padding: 0 9px; font-size: 12px; }
  .chapter-bar .chapter-title { font-size: 15px; letter-spacing: .1em; }
}
/* pills: "1 of 3" and "Passage 4/9" on one line; on phones a tiny caps label stacked over the number */
.chapter-pill { gap: 5px; }
.chapter-pill b { font-weight: 500; color: var(--text); }
.chapter-pill .narrow, #chapterCount small { display: none; }
@media (max-width: 440px) {
  .chapter-pill { flex-direction: column; justify-content: center; gap: 0; padding: 0 10px; line-height: 1.05; }
  .chapter-pill small { display: block !important; font-family: var(--caps); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .chapter-pill b { font-size: 12px; }
  .chapter-pill .wide { display: none; }
  .chapter-pill .narrow { display: inline; }
}
/* pills with the old marks: ❡ chapter, § passage. One line on every screen. */
.chapter-pill i { font-style: normal; font-family: var(--display), Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1; color: var(--gold); opacity: .85; translate: 0 -1px; }
@media (max-width: 440px) {
  .chapter-pill { flex-direction: row; gap: 5px; padding: 0 10px; line-height: 1; }
  .chapter-pill i { font-size: 15px; }
}

/* =================================================================== Brain and Voice: live status */
.stack-status { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.set > summary small:has(.api-badge) { margin-left: auto; }
.api-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: nowrap;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(235, 225, 255, .12);
}
.api-badge i { font-style: normal; font-weight: 700; font-size: 11px; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; }
.api-badge.ok i { color: #0b2b1d; background: #6ee7b7; box-shadow: 0 0 8px rgba(110, 231, 183, .6); }
.api-badge.warn i { color: #3a2604; background: #fbbf24; }
.api-badge.bad i { color: #fff; background: #f43f5e; box-shadow: 0 0 8px rgba(244, 63, 94, .5); }
.api-badge.off i { color: var(--muted); border: 1px solid var(--muted); }
.api-badge.checking i { color: var(--lilac); animation: blink 1.2s ease-in-out infinite; }
@media (max-width: 440px) { .stack-status .api-badge { font-size: 10.5px; padding: 2px 6px 2px 7px; } }
/* while a menu is open, only the menu scrolls; and its sections are never squeezed to fit */
html.sheet-open, html.sheet-open body { overflow: hidden; }
.sheet > * { flex-shrink: 0; }

/* sleep timer: a dark veil settles over everything as he drifts off (--drowse 0..1, set by the timer) */
.drowse-veil {
  position: fixed; inset: 0; z-index: 9; pointer-events: none; background: #020105;
  opacity: calc(var(--drowse, 0) * .62); transition: opacity 2s ease;
}
/* inside the LLM API sub-section the row is narrower: let the buttons wrap instead of spilling out */
.brain-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }

/* volume: a button like speed (tap to step, hold for the slider) */
.controls { grid-template-columns: 44px 54px 60px 68px 56px 44px; }
@media (max-width: 440px) { .controls { grid-template-columns: 40px 46px 58px 62px 52px 40px; } }
.icon-btn.vol-btn { width: 68px; display: inline-flex; gap: 4px; justify-content: center; }
.icon-btn.vol-btn svg { width: 13px; height: 13px; flex: none; opacity: .8; }
.icon-btn.vol-btn.muted { color: var(--muted); }
.icon-btn.vol-btn.muted svg { opacity: .35; }
@media (max-width: 440px) { .icon-btn.vol-btn { width: 62px; gap: 3px; font-size: 12px; } .icon-btn.vol-btn svg { width: 11px; height: 11px; } }

/* previous / next moved into the dock, after the gear: eight controls */
.controls { grid-template-columns: 44px 54px 60px 68px 56px 44px 44px 44px; gap: 10px; }
.controls #prevBtn svg, .controls #nextBtn svg { width: 18px; height: 18px; }
.controls #prevBtn:disabled, .controls #nextBtn:disabled { opacity: .35; }
@media (max-width: 440px) {
  .controls { grid-template-columns: 36px 38px 52px 46px 46px 36px 36px 36px; gap: 4px; }
  .controls .icon-btn { width: 36px; height: 36px; }
  .controls .play { width: 52px; height: 52px; }
  .dock-head { width: 38px; height: 38px; }
  .icon-btn.vol-btn { width: 46px; font-size: 11.5px; }
  .icon-btn.vol-btn svg { display: none; }
  .icon-btn.speed { width: 46px; font-size: 11.5px; }
  .controls .icon-btn svg { width: 16px; height: 16px; }
}
/* his head fills its dock slot, whatever size the slot is on this screen */
body[data-view='stage'] .dock-head .avatar { width: 100%; height: 100%; }

/* during a session the Settings button sits in the top bar, styled like its neighbours */
.stage .reactions #settingsBtn { width: 32px; height: 32px; flex: none; padding: 0; background: rgba(255, 255, 255, .035); border: 1px solid rgba(235, 225, 255, .14); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
.stage .reactions #settingsBtn:hover { background: rgba(255, 255, 255, .08); }
.stage .reactions #settingsBtn svg { width: 15px; height: 15px; }
.stage .reactions #settingsBtn .dot { top: 3px; right: 3px; width: 7px; height: 7px; }

/* phones: his head tucks a little under the chat and play buttons, so the corner buttons fit */
@media (max-width: 440px) {
  .controls { grid-template-columns: 36px 24px 52px 44px 44px 36px 36px 36px; gap: 3px; }
  .controls .dock-head { width: 38px; height: 38px; justify-self: center; position: relative; z-index: 0; }
  .controls > :not(.dock-head) { position: relative; z-index: 1; }
  .icon-btn.vol-btn, .icon-btn.speed { width: 44px; }
}
@media (max-width: 370px) {
  .controls { grid-template-columns: 34px 22px 50px 42px 42px 34px 34px 34px; }
  .controls .icon-btn { width: 34px; height: 34px; }
  .controls .play { width: 50px; height: 50px; }
  .icon-btn.vol-btn, .icon-btn.speed { width: 42px; font-size: 11px; }
}

/* phones, final word: no button changes size. Dagoth's slot gives way first (down to nothing: his head
   stays full size, tucked behind chat and play), and the bar may use the screen's side margins. */
@media (max-width: 440px) {
  .dock { padding-left: 6px; padding-right: 6px; }
  .controls { width: 100%; max-width: none; justify-content: center; grid-template-columns: 36px minmax(0, 24px) 52px 44px 44px 36px 36px 36px; gap: 3px; }
}
@media (max-width: 370px) {
  .controls { grid-template-columns: 34px minmax(0, 22px) 50px 42px 42px 34px 34px 34px; gap: 2px; }
}

/* Personality's subsections all wear the gold caps (Vibes, States of mind, Avatar & Atmosphere) */
#setPersonality > details.set.sub > summary { font-family: var(--caps); color: var(--gold); letter-spacing: .14em; text-transform: uppercase; font-size: 13px; font-weight: 500; }
#setPersonality > details.set.sub > summary svg { color: var(--gold); }
#setPersonality > details.set.sub:not([open]) > summary { color: color-mix(in srgb, var(--gold) 75%, var(--muted)); }

/* four providers in one row */
.provider-choice button { padding: 0 4px; font-size: 13px; }
@media (max-width: 440px) { .provider-choice button { font-size: 12px; } }

/* Help → This build */
.build { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 12.5px; }
.build dt { color: var(--muted); }
.build dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#reloadLatest { align-self: flex-start; }
.build-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(196, 181, 253, .16); background: rgba(139, 92, 246, .06); }
.build-card .label { margin: 0; }
.build-card #reloadLatest { margin-top: 2px; }

/* Personality's three subsections, each with its own character:
   Vibes: elegant italic serif in lilac to pink · States of mind: gold caps · Avatar & Atmosphere: embers */
#setPersonality > #setVibes > summary { font-family: var(--display); font-style: italic; font-size: 21px; letter-spacing: .01em; text-transform: none; font-weight: 500; }
#setPersonality > #setVibes > summary .sub-title { background: linear-gradient(100deg, #c4b5fd, #f0abfc 60%, #f9a8d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
#setPersonality > #setVibes > summary svg { color: #e9a8f5; }
#setPersonality > #setFace > summary { font-family: var(--caps); letter-spacing: .14em; text-transform: uppercase; font-size: 13px; font-weight: 500; }
#setPersonality > #setFace > summary .sub-title { background: linear-gradient(100deg, #fb923c, #f87171 55%, #e11d48); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 8px rgba(248, 113, 113, .25)); }
#setPersonality > #setFace > summary svg { color: #fb7a5c; width: 19px; height: 19px; }
/* closed: a little quieter, like the others */
#setPersonality > #setVibes:not([open]) > summary .sub-title, #setPersonality > #setFace:not([open]) > summary .sub-title { opacity: .8; }

/* =================================================================== home: the program, set apart in maroon */
/* everything below "While you're": a deep maroon section, then the chosen program's options in an inset card */
.studio {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  margin: 6px -16px 0; padding: 20px 16px 22px; border-radius: 28px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(160, 30, 70, .22), transparent 70%),
    linear-gradient(180deg, rgba(92, 14, 40, .42) 0%, rgba(62, 10, 30, .34) 45%, rgba(28, 6, 18, .22) 100%);
  border: 1px solid rgba(255, 120, 150, .14); border-bottom-color: rgba(255, 120, 150, .05);
  box-shadow: inset 0 1px 0 rgba(255, 170, 190, .08), 0 -12px 40px rgba(80, 10, 30, .18);
}
.studio-label { margin: 0 2px -4px; color: #f4b3c2; }
.studio .programs button { background: rgba(20, 6, 14, .35); border-color: rgba(255, 140, 165, .14); }
.studio .programs button[aria-checked='true'], .studio .programs button[aria-pressed='true'] { border-color: rgba(255, 150, 175, .5); background: linear-gradient(140deg, rgba(150, 26, 64, .45), rgba(70, 12, 40, .4)); box-shadow: 0 10px 30px rgba(120, 14, 50, .3); }
.studio-panel {
  display: flex; flex-direction: column; gap: 12px; padding: 16px 14px 18px; border-radius: 20px;
  background: rgba(12, 4, 10, .42); border: 1px solid rgba(255, 140, 165, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), inset 0 10px 30px rgba(0, 0, 0, .18);
}
.studio-panel > .panel[hidden] { display: none; }
@media (min-width: 640px) { .studio { margin-inline: -20px; padding-inline: 20px; } }
/* seamless: no card edges, full width, the maroon fades in and out of the purple */
.studio {
  margin-inline: calc(50% - 50vw); padding-inline: max(16px, calc(50vw - 50%)); padding-top: 34px; padding-bottom: 40px;
  border: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(180deg, rgba(70, 10, 32, 0) 0%, rgba(70, 10, 32, .26) 16%, rgba(58, 8, 28, .24) 72%, rgba(58, 8, 28, 0) 100%);
}
@media (min-width: 640px) { .studio { margin-inline: calc(50% - 50vw); padding-inline: max(20px, calc(50vw - 50%)); } }
.studio .programs button { background: rgba(20, 6, 14, .22); border-color: rgba(255, 140, 165, .1); }
.studio .programs button[aria-checked='true'] { background: linear-gradient(140deg, rgba(150, 26, 64, .32), rgba(70, 12, 40, .26)); border-color: rgba(255, 150, 175, .38); box-shadow: 0 8px 24px rgba(120, 14, 50, .2); }
.studio-panel { background: rgba(12, 4, 10, .26); border-color: rgba(255, 140, 165, .08); box-shadow: inset 0 8px 24px rgba(0, 0, 0, .12); }
.studio { background: linear-gradient(180deg, rgba(78, 10, 34, 0) 0%, rgba(78, 10, 34, .36) 18%, rgba(64, 8, 30, .32) 70%, rgba(64, 8, 30, 0) 100%); }
/* the section starts at a fine rose line, with a clean maroon glow for ~100px below it */
.studio { padding-top: 26px; background: linear-gradient(180deg, rgba(118, 18, 50, .5) 0px, rgba(90, 12, 38, .36) 100px, rgba(64, 8, 30, .3) 70%, rgba(64, 8, 30, 0) 100%); }
.studio::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 140, 170, .45) 18%, rgba(255, 185, 200, .75) 50%, rgba(255, 140, 170, .45) 82%, transparent);
  box-shadow: 0 0 12px rgba(255, 110, 150, .35);
}
.studio-label { align-self: center; margin: 0 0 -2px; font-family: var(--caps); color: var(--gold); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; text-shadow: 0 0 14px rgba(233, 196, 126, .25); }
/* the line spans just the content width, centred, fading out at its ends */
.studio::before { left: 50%; right: auto; width: min(620px, calc(100vw - 24px)); translate: -50% 0; }
.studio {
  background:
    radial-gradient(360px 110px at 50% 0, rgba(130, 20, 55, .42), transparent 100%),
    linear-gradient(180deg, rgba(78, 10, 34, 0) 0px, rgba(78, 10, 34, .3) 130px, rgba(64, 8, 30, .3) 70%, rgba(64, 8, 30, 0) 100%);
}
/* deeper, darker wine: it should darken the smoke toward maroon, not tint it pink */
.studio {
  background:
    radial-gradient(360px 110px at 50% 0, rgba(96, 10, 36, .5), transparent 100%),
    linear-gradient(180deg, rgba(34, 4, 16, 0) 0px, rgba(34, 4, 16, .42) 130px, rgba(28, 3, 14, .4) 70%, rgba(28, 3, 14, 0) 100%);
}
/* no wash over the smoke: just the line, and a short maroon glow under it that fades out on every side */
.studio { background: radial-gradient(380px 100px at 50% 0, rgba(110, 14, 42, .45), transparent 100%); }

/* "You're currently": the same treatment as Program, in green. A fine line, a short glow under it, gold label. */
.zone-activity {
  position: relative; gap: 12px; margin-inline: calc(50% - 50vw); padding: 26px max(16px, calc(50vw - 50%)) 6px;
  background: radial-gradient(380px 100px at 50% 0, rgba(16, 110, 82, .38), transparent 100%);
}
.zone-activity::before {
  content: ''; position: absolute; top: 0; left: 50%; width: min(620px, calc(100vw - 24px)); height: 1px; translate: -50% 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(110, 231, 183, .4) 18%, rgba(167, 243, 208, .7) 50%, rgba(110, 231, 183, .4) 82%, transparent);
  box-shadow: 0 0 12px rgba(52, 211, 153, .3);
}
.zone-label { align-self: center; margin: 0 0 -2px; font-family: var(--caps); color: var(--gold); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; text-shadow: 0 0 14px rgba(233, 196, 126, .25); }
/* the chosen activity picks up the green */
.zone-activity .chip[aria-checked='true'], .zone-activity .chip[aria-pressed='true'] { background: linear-gradient(135deg, rgba(16, 120, 88, .5), rgba(12, 80, 70, .4)); border-color: rgba(110, 231, 183, .5); color: #ecfdf5; box-shadow: 0 6px 20px rgba(16, 120, 88, .25); }
/* the glow under each line now reaches ~220px down (still fading out on every side) */
.studio { background: radial-gradient(400px 220px at 50% 0, rgba(110, 14, 42, .42), transparent 100%); }
.zone-activity { background: radial-gradient(400px 220px at 50% 0, rgba(16, 110, 82, .34), transparent 100%); }

/* activities: 3 × 3 on phones (eight + "Other"), 4 × 3 on wider screens (eleven + "Other") */
#activity { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) {
  #activity { grid-template-columns: repeat(3, 1fr); }
  #activity .chip.wide:not([aria-checked='true']) { display: none; }
}
/* the "+" activity: what you're actually doing */
#activity .custom-act { gap: 5px; border-style: dashed; border-color: rgba(167, 243, 208, .3); }
#activity .custom-act[aria-checked='true'] { border-style: solid; }
#activity .custom-act svg { width: 13px; height: 13px; flex: none; stroke-width: 2.2; color: #6ee7b7; }
#activity .custom-act span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#activity .custom-input { padding: 10px 12px; font-size: 13.5px; text-align: center; color: var(--text); background: rgba(16, 80, 64, .3); border: 1px solid rgba(110, 231, 183, .5); outline: none; min-width: 0; width: 100%; }

/* =================================================================== themed type on the home page */
/* You're currently: old-book serif */
#activity .chip { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: .01em; padding: 8px 8px; }
#activity .custom-input { font-family: var(--display); font-size: 17px; font-weight: 600; }
@media (max-width: 440px) { #activity .chip, #activity .custom-input { font-size: 16px; } }

/* Program: engraved names, serif everything else (text boxes keep the plain UI font, to stay easy to type in) */
.studio .programs b { font-family: var(--caps); font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.studio .programs small { font-family: var(--display); font-style: italic; font-size: 15px; line-height: 1.2; }
.studio-panel .label, .studio-panel .label-row .label { font-family: var(--caps); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--gold) 80%, var(--muted)); }
.studio-panel .link-btn { font-family: var(--display); font-size: 15px; font-style: italic; }
.studio .tbtn b { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: .01em; }
.studio .tbtn small { font-family: var(--display); font-style: italic; font-size: 14.5px; }
.studio .tsub { font-family: var(--display); font-size: 16px; font-weight: 600; }
.studio .segmented button { font-family: var(--display); font-size: 16.5px; font-weight: 600; }
.studio .book b { font-family: var(--display); font-size: 15px; }
.studio .book small { font-family: var(--display); font-style: italic; font-size: 12.5px; }
.studio .questions button, .studio #questions > * { font-family: var(--display); font-size: 16.5px; }
.studio-panel .fine { font-family: var(--display); font-style: italic; font-size: 15px; }
.studio-panel .drop b { font-family: var(--display); font-size: 18px; font-weight: 600; }
.studio-panel .drop small { font-family: var(--display); font-style: italic; font-size: 14px; }
.studio-panel details > summary { font-family: var(--display); font-style: italic; font-size: 15px; }

/* =================================================================== each program has its colour */
/* Summon, the Length slider and the Program section all follow the chosen program, and glide between them. */
@property --prog { syntax: '<color>'; inherits: true; initial-value: #96203f; }
@property --prog-hi { syntax: '<color>'; inherits: true; initial-value: #ff8ca5; }
@property --prog-deep { syntax: '<color>'; inherits: true; initial-value: #6e1230; }
body { transition: --prog .6s ease, --prog-hi .6s ease, --prog-deep .6s ease; }
body[data-program='news'] { --prog: #96203f; --prog-hi: #ff8ca5; --prog-deep: #6e1230; } /* crimson */
body[data-program='literature'] { --prog: #a8741e; --prog-hi: #f5c97a; --prog-deep: #6b4510; } /* amber, like old pages */
body[data-program='discourse'] { --prog: #2563a8; --prog-hi: #93c5fd; --prog-deep: #173a6b; } /* sapphire, cool and thoughtful */
body[data-program='talk'] { --prog: #7c3aed; --prog-hi: #c4b5fd; --prog-deep: #4c1d95; } /* violet, conversation */

/* Summon: grander, engraved, in the program's colour */
#begin {
  font-family: var(--caps); font-weight: 600; font-size: 15.5px; letter-spacing: .16em; text-transform: uppercase;
  text-shadow: 0 0 18px color-mix(in srgb, var(--prog-hi) 45%, transparent), 0 1px 0 rgba(0, 0, 0, .35);
  background: linear-gradient(120deg, color-mix(in srgb, var(--prog-deep) 48%, transparent), color-mix(in srgb, var(--prog) 46%, transparent) 50%, color-mix(in srgb, var(--prog-deep) 48%, transparent));
  border: 1px solid color-mix(in srgb, var(--prog-hi) 32%, transparent);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--prog-deep) 34%, transparent), 0 1px 0 rgba(255, 255, 255, .12) inset;
}
#begin:hover { background: linear-gradient(120deg, color-mix(in srgb, var(--prog-deep) 58%, transparent), color-mix(in srgb, var(--prog) 56%, transparent) 50%, color-mix(in srgb, var(--prog-deep) 58%, transparent)); }
@media (max-width: 440px) { #begin { font-size: 14px; letter-spacing: .13em; } }

/* Length slider */
#length::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, color-mix(in srgb, var(--prog-deep) 50%, transparent), color-mix(in srgb, var(--prog) 50%, transparent) calc(var(--fill, 20%) - 1%), rgba(255, 255, 255, .05) var(--fill, 20%));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--prog-hi) 24%, transparent) inset;
}
#length::-webkit-slider-thumb { background: color-mix(in srgb, var(--prog-hi) 25%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--prog) 55%, transparent), 0 2px 6px rgba(0, 0, 0, .45); }
#length::-moz-range-track { box-shadow: 0 0 0 1px color-mix(in srgb, var(--prog-hi) 24%, transparent) inset; }
#length::-moz-range-progress { background: linear-gradient(90deg, color-mix(in srgb, var(--prog-deep) 50%, transparent), color-mix(in srgb, var(--prog) 50%, transparent)); }
#length::-moz-range-thumb { background: color-mix(in srgb, var(--prog-hi) 25%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--prog) 55%, transparent); }

/* the Program section: its line, the glow under it, and the chosen card */
.studio { background: radial-gradient(400px 220px at 50% 0, color-mix(in srgb, var(--prog-deep) 42%, transparent), transparent 100%); }
.studio::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--prog-hi) 45%, transparent) 18%, color-mix(in srgb, var(--prog-hi) 75%, #fff 10%) 50%, color-mix(in srgb, var(--prog-hi) 45%, transparent) 82%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--prog) 40%, transparent);
}
.studio .programs button[aria-checked='true'] {
  background: linear-gradient(140deg, color-mix(in srgb, var(--prog) 34%, transparent), color-mix(in srgb, var(--prog-deep) 28%, transparent));
  border-color: color-mix(in srgb, var(--prog-hi) 42%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--prog-deep) 24%, transparent);
}
.studio .programs button[aria-checked='true'] svg { color: var(--prog-hi); }
.studio .programs button { border-color: color-mix(in srgb, var(--prog-hi) 10%, transparent); }

/* News topics wear the program's colour (crimson) instead of purple */
.studio .trow.on { border-color: color-mix(in srgb, var(--prog-hi) 28%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--prog) 14%, transparent), rgba(30, 10, 22, .22)); }
.studio .tbtn[aria-pressed='true'] { border-color: color-mix(in srgb, var(--prog-hi) 55%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--prog) 42%, transparent), color-mix(in srgb, var(--prog-deep) 30%, transparent)); }
.studio .tbtn[aria-pressed='true'] small { color: color-mix(in srgb, var(--prog-hi) 80%, #fff); }
.studio .tsub:hover { border-color: color-mix(in srgb, var(--prog-hi) 30%, transparent); }
.studio .tsub[aria-pressed='true'] { border-color: color-mix(in srgb, var(--prog-hi) 55%, transparent); background: color-mix(in srgb, var(--prog) 34%, transparent); }

/* "Unselect": a quiet little pill button */
.ghost-pill {
  padding: 3px 11px; border-radius: 999px; cursor: pointer; font-family: var(--display); font-style: italic; font-size: 14.5px;
  color: var(--muted); background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .09);
  transition: color .2s, background .2s, border-color .2s;
}
.ghost-pill:hover { color: var(--text); background: color-mix(in srgb, var(--prog) 14%, transparent); border-color: color-mix(in srgb, var(--prog-hi) 30%, transparent); }
.ghost-pill:active { transform: scale(.96); }
.ghost-pill[hidden] { display: none; }
/* You're currently: Marcellus, inscriptional like Cinzel but sturdier and easier to read at button size */
#activity .chip, #activity .custom-input { font-family: 'Marcellus', var(--display); font-weight: 400; font-size: 15.5px; letter-spacing: .02em; }
@media (max-width: 440px) { #activity .chip, #activity .custom-input { font-size: 14.5px; } }
/* under his face: only when there's something to say ("Thinking…"), never an idle line */
#status:has(#statusText:empty) { display: none; }

/* =================================================================== modern sliders on the home page (Audience) */
/* a slim glowing track in the program's colour, a small luminous handle, quiet step labels */
.studio .dial { gap: 6px; padding: 12px 2px 6px; }
.studio .dial .label-row .value { font-family: var(--display); font-style: italic; font-size: 16px; color: color-mix(in srgb, var(--prog-hi) 85%, #fff); }
.studio .dial input[type='range'] { height: 22px; cursor: pointer; }
.studio .dial input[type='range']::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--prog-deep) 80%, transparent), var(--prog) var(--fill, 20%), rgba(255, 255, 255, .07) var(--fill, 20%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 0 14px color-mix(in srgb, var(--prog) 25%, transparent);
}
.studio .dial input[type='range']::-webkit-slider-thumb {
  width: 16px; height: 16px; margin-top: -5px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff 0 28%, color-mix(in srgb, var(--prog-hi) 70%, #fff) 70%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--prog) 32%, transparent), 0 0 14px color-mix(in srgb, var(--prog-hi) 55%, transparent), 0 2px 6px rgba(0, 0, 0, .5);
  transition: transform .15s ease, box-shadow .2s ease;
}
.studio .dial input[type='range']:hover::-webkit-slider-thumb { transform: scale(1.12); }
.studio .dial input[type='range']:active::-webkit-slider-thumb { transform: scale(1.22); box-shadow: 0 0 0 6px color-mix(in srgb, var(--prog) 30%, transparent), 0 0 20px color-mix(in srgb, var(--prog-hi) 65%, transparent), 0 2px 6px rgba(0, 0, 0, .5); }
.studio .dial input[type='range']::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); }
.studio .dial input[type='range']::-moz-range-progress { height: 6px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--prog-deep) 80%, transparent), var(--prog)); }
.studio .dial input[type='range']::-moz-range-thumb {
  width: 16px; height: 16px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff 0 28%, color-mix(in srgb, var(--prog-hi) 70%, #fff) 70%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--prog) 32%, transparent), 0 0 14px color-mix(in srgb, var(--prog-hi) 55%, transparent);
}
.studio .dial .ticks { font-size: 10.5px; letter-spacing: .04em; color: rgba(255, 255, 255, .28); }
.studio .dial .ticks span.on { color: color-mix(in srgb, var(--prog-hi) 85%, #fff); text-shadow: 0 0 10px color-mix(in srgb, var(--prog-hi) 40%, transparent); }
/* game-style: a thick grooved track with notches at each step, and a tall bar of a handle */
.studio .dial input[type='range'] { height: 26px; }
.studio .dial input[type='range']::-webkit-slider-runnable-track {
  height: 14px; border-radius: 7px;
  background:
    linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .14) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .14) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
    linear-gradient(90deg, color-mix(in srgb, var(--prog-deep) 85%, transparent), var(--prog) var(--fill, 20%), rgba(0, 0, 0, .28) var(--fill, 20%));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 0 14px color-mix(in srgb, var(--prog) 22%, transparent);
}
.studio .dial input[type='range']::-webkit-slider-thumb {
  width: 10px; height: 24px; margin-top: -5px; border-radius: 4px;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--prog-hi) 35%, #e9e4f5));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 12px color-mix(in srgb, var(--prog-hi) 60%, transparent), 0 3px 6px rgba(0, 0, 0, .5);
}
.studio .dial input[type='range']:hover::-webkit-slider-thumb { transform: scaleY(1.06); }
.studio .dial input[type='range']:active::-webkit-slider-thumb { transform: scaleY(1.1); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 18px color-mix(in srgb, var(--prog-hi) 75%, transparent), 0 3px 6px rgba(0, 0, 0, .5); }
.studio .dial input[type='range']::-moz-range-track { height: 14px; border-radius: 7px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.studio .dial input[type='range']::-moz-range-progress { height: 14px; border-radius: 7px; background: linear-gradient(90deg, color-mix(in srgb, var(--prog-deep) 85%, transparent), var(--prog)); }
.studio .dial input[type='range']::-moz-range-thumb { width: 10px; height: 24px; border: 0; border-radius: 4px; background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--prog-hi) 35%, #e9e4f5)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 12px color-mix(in srgb, var(--prog-hi) 60%, transparent); }
/* the handle: a round knob just a touch bigger than the 14px groove, tinted rather than white */
.studio .dial input[type='range']::-webkit-slider-thumb {
  width: 16px; height: 16px; margin-top: -1px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--prog-hi) 70%, #fff) 0 22%, color-mix(in srgb, var(--prog-hi) 75%, var(--prog)) 60%, color-mix(in srgb, var(--prog) 85%, #000) 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 10px color-mix(in srgb, var(--prog-hi) 45%, transparent), 0 2px 5px rgba(0, 0, 0, .5);
}
.studio .dial input[type='range']:hover::-webkit-slider-thumb { transform: scale(1.1); }
.studio .dial input[type='range']:active::-webkit-slider-thumb { transform: scale(1.18); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 16px color-mix(in srgb, var(--prog-hi) 65%, transparent), 0 2px 5px rgba(0, 0, 0, .5); }
.studio .dial input[type='range']::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--prog-hi) 70%, #fff) 0 22%, color-mix(in srgb, var(--prog-hi) 75%, var(--prog)) 60%, color-mix(in srgb, var(--prog) 85%, #000) 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 10px color-mix(in srgb, var(--prog-hi) 45%, transparent);
}

/* Audience: your first question, typed or spoken, right on the home page */
.aud-ask { display: flex; gap: 8px; align-items: center; }
.aud-ask .input { flex: 1; min-width: 0; border-radius: 999px; padding-inline: 18px; }
.aud-ask .icon-btn { flex: none; width: 44px; height: 44px; }
.aud-ask .icon-btn.accent { background: color-mix(in srgb, var(--prog) 40%, transparent); border-color: color-mix(in srgb, var(--prog-hi) 45%, transparent); color: #fff; }
#audMic.listening { background: color-mix(in srgb, var(--prog) 45%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--prog) 30%, transparent); animation: blink 1.2s ease-in-out infinite; }

/* every text box in the Program section: the book serif; placeholders in the italic of "Speak or type…" */
.studio-panel .input, .studio-panel textarea.input {
  font-family: var(--display); font-size: 17.5px; font-weight: 500; letter-spacing: .01em;
  background: rgba(10, 4, 10, .32); border-color: color-mix(in srgb, var(--prog-hi) 16%, transparent);
}
.studio-panel .input::placeholder { font-style: italic; color: color-mix(in srgb, var(--muted) 85%, transparent); }
.studio-panel .input:focus { outline: none; border-color: color-mix(in srgb, var(--prog-hi) 50%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--prog) 18%, transparent); }

/* =================================================================== the options card wears the program's colour too */
.studio-panel {
  background: linear-gradient(160deg, color-mix(in srgb, var(--prog-deep) 26%, rgba(10, 4, 10, .4)), color-mix(in srgb, var(--prog-deep) 12%, rgba(10, 4, 10, .34)));
  border-color: color-mix(in srgb, var(--prog-hi) 18%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--prog-hi) 10%, transparent), inset 0 10px 30px rgba(0, 0, 0, .14);
}
/* and so does everything chosen inside it */
.studio .segmented { border-color: color-mix(in srgb, var(--prog-hi) 14%, transparent); }
.studio .segmented button[aria-pressed='true'] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--prog) 48%, transparent), color-mix(in srgb, var(--prog-deep) 40%, transparent));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--prog) 25%, transparent);
}
.studio .question-chip { border-color: color-mix(in srgb, var(--prog-hi) 14%, transparent); }
.studio .question-chip:hover { border-color: color-mix(in srgb, var(--prog-hi) 35%, transparent); }
.studio .question-chip[aria-pressed='true'] { border-color: color-mix(in srgb, var(--prog-hi) 60%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--prog) 45%, transparent), color-mix(in srgb, var(--prog-deep) 38%, transparent)); }
.studio .book.chosen .cover { box-shadow: 0 0 0 2px var(--prog-hi), 0 10px 24px color-mix(in srgb, var(--prog) 45%, transparent); }
.studio .trow { border-color: color-mix(in srgb, var(--prog-hi) 10%, transparent); }
.studio .tbtn:not([aria-pressed='true']) { border-color: color-mix(in srgb, var(--prog-hi) 10%, transparent); }
.studio .drop { border-color: color-mix(in srgb, var(--prog-hi) 30%, transparent); }
.studio .drop svg { color: var(--prog-hi); }

/* text boxes with a mic: the mic sits beside the box */
.mic-field { display: flex; gap: 8px; align-items: center; }
.mic-field .input { flex: 1; min-width: 0; }
.mic-field .icon-btn { flex: none; width: 42px; height: 42px; }
.mic-field .icon-btn svg { width: 17px; height: 17px; }
.mic-field .icon-btn.listening, .aud-ask .icon-btn.listening { color: #fff; background: color-mix(in srgb, var(--prog) 45%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--prog) 30%, transparent); animation: blink 1.2s ease-in-out infinite; }
.studio .mic-field .icon-btn, .aud-ask .icon-btn { background: rgba(10, 4, 10, .32); border-color: color-mix(in srgb, var(--prog-hi) 18%, transparent); color: color-mix(in srgb, var(--prog-hi) 80%, #fff); }

/* home: the time, above the date, in the engraved capitals */
.home-time {
  margin: 0 0 2px; display: flex; align-items: baseline; gap: 8px;
  font-family: var(--caps); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}
.home-time .hm {
  font-size: clamp(40px, 11vw, 52px); letter-spacing: .04em;
  background: linear-gradient(180deg, #f6ecd6 0%, var(--gold) 55%, #b98d45 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(233, 196, 126, .22));
}
.home-time .ampm { font-size: 14px; letter-spacing: .22em; color: color-mix(in srgb, var(--gold) 75%, var(--muted)); }
.home-time { justify-content: center; }

/* =================================================================== gold handles on every slider */
:root { --knob: radial-gradient(circle at 36% 32%, #fff6dc 0 14%, #f1d08c 42%, #c99a4c 78%, #8a6428 100%); }
input[type='range']::-webkit-slider-thumb { background: var(--knob); box-shadow: 0 0 0 1px rgba(60, 40, 10, .5), 0 0 10px rgba(233, 196, 126, .35), 0 2px 6px rgba(0, 0, 0, .45); }
input[type='range']::-moz-range-thumb { background: var(--knob); box-shadow: 0 0 0 1px rgba(60, 40, 10, .5), 0 0 10px rgba(233, 196, 126, .35); }
#length::-webkit-slider-thumb { background: var(--knob); box-shadow: 0 0 0 1px rgba(60, 40, 10, .5), 0 0 0 3px color-mix(in srgb, var(--prog) 40%, transparent), 0 0 10px rgba(233, 196, 126, .35), 0 2px 6px rgba(0, 0, 0, .45); }
#length::-moz-range-thumb { background: var(--knob); }
.studio .dial input[type='range']::-webkit-slider-thumb { background: var(--knob); box-shadow: 0 0 0 1px rgba(60, 40, 10, .55), 0 0 10px rgba(233, 196, 126, .4), 0 2px 5px rgba(0, 0, 0, .5); }
.studio .dial input[type='range']:active::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(60, 40, 10, .55), 0 0 16px rgba(233, 196, 126, .6), 0 2px 5px rgba(0, 0, 0, .5); }
.studio .dial input[type='range']::-moz-range-thumb { background: var(--knob); }
.controls input[type='range']::-webkit-slider-thumb, .speed-pop input::-webkit-slider-thumb { background: var(--knob); }
/* the time now matches the date line: same font and spaced capitals, just larger */
.home-time { gap: 7px; font-family: var(--ui); font-weight: 500; margin-bottom: 4px; }
.home-time .hm { font-size: 22px; letter-spacing: .14em; background: none; color: color-mix(in srgb, var(--text) 82%, var(--muted)); filter: none; -webkit-background-clip: border-box; background-clip: border-box; }
.home-time .ampm { font-size: 11.5px; letter-spacing: .2em; color: var(--muted); }

/* =================================================================== darker handles, and a warm glow where the fill meets the handle */
:root { --knob: radial-gradient(circle at 50% 42%, #3a352e 0 34%, #2a2621 50%, #5c4a2a 72%, #c99a4c 88%, #e9c47e 100%); }
/* the generic sliders (Settings, pop-ups): violet fill that warms to gold just before the handle */
input[type='range']::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--violet) 0, var(--violet) max(0%, calc(var(--fill, 20%) - 14%)), color-mix(in srgb, var(--violet) 55%, #e9c47e) var(--fill, 20%), rgba(196, 181, 253, .15) var(--fill, 20%));
}
/* the home page's program-coloured sliders */
.studio .dial input[type='range']::-webkit-slider-runnable-track {
  background:
    linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .14) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .14) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
    linear-gradient(90deg, color-mix(in srgb, var(--prog-deep) 85%, transparent), var(--prog) max(0%, calc(var(--fill, 20%) - 14%)), color-mix(in srgb, var(--prog) 60%, #e9c47e) var(--fill, 20%), rgba(0, 0, 0, .28) var(--fill, 20%));
}
#length::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, color-mix(in srgb, var(--prog-deep) 50%, transparent), color-mix(in srgb, var(--prog) 50%, transparent) max(0%, calc(var(--fill, 20%) - 14%)), color-mix(in srgb, var(--prog) 45%, rgba(233, 196, 126, .55)) calc(var(--fill, 20%) - 1%), rgba(255, 255, 255, .05) var(--fill, 20%));
}
/* centred on the digits themselves: AM/PM hangs off to the right without pushing them over */
.home-time { position: relative; display: flex; justify-content: center; align-items: center; width: max-content; margin-inline: auto; font-weight: 400; }
.home-time .hm { display: inline-flex; align-items: center; gap: 9px; font-weight: 400; }
.home-time .sep { width: 5px; height: 5px; rotate: 45deg; background: var(--gold); opacity: .75; box-shadow: 0 0 6px rgba(233, 196, 126, .5); flex: none; }
.home-time .ampm { position: absolute; left: 100%; bottom: 3px; margin-left: 8px; }
/* lighter: brushed silver with a fine gold rim */
:root { --knob: radial-gradient(circle at 36% 30%, #f4f3f0 0 12%, #cfccc6 36%, #9b968e 64%, #7a746b 80%, #c99a4c 90%, #e9c47e 100%); }
/* antique bronze, like his mask: a warm highlight, bronze body, a touch of green patina at the edge */
:root { --knob: radial-gradient(circle at 36% 30%, #f1d9a0 0 10%, #c99a55 32%, #946a34 58%, #6a5a32 78%, #4f6040 92%, #3c4a30 100%); }

/* handles: a little of the slider's own colour, a little silver, a little gold. No bright highlight. */
input[type='range'] {
  --knob-tint: var(--violet);
  --knob: radial-gradient(circle at 42% 38%,
    color-mix(in srgb, var(--knob-tint) 35%, #b9b8c2) 0 30%,
    color-mix(in srgb, var(--knob-tint) 45%, #8f8d98) 58%,
    color-mix(in srgb, var(--knob-tint) 40%, #b08a4e) 84%,
    color-mix(in srgb, var(--knob-tint) 25%, #c9a35c) 100%);
}
.studio input[type='range'], #length { --knob-tint: var(--prog); }
input[type='range']::-webkit-slider-thumb { background: var(--knob); box-shadow: 0 0 0 1px rgba(20, 12, 30, .55), 0 0 8px color-mix(in srgb, var(--knob-tint) 40%, transparent), 0 2px 5px rgba(0, 0, 0, .45); }
input[type='range']::-moz-range-thumb { background: var(--knob); box-shadow: 0 0 0 1px rgba(20, 12, 30, .55), 0 0 8px color-mix(in srgb, var(--knob-tint) 40%, transparent); }
#length::-webkit-slider-thumb { background: var(--knob); box-shadow: 0 0 0 1px rgba(20, 12, 30, .55), 0 0 0 3px color-mix(in srgb, var(--prog) 35%, transparent), 0 2px 5px rgba(0, 0, 0, .45); }
#length::-moz-range-thumb { background: var(--knob); }
.studio .dial input[type='range']::-webkit-slider-thumb { background: var(--knob); box-shadow: 0 0 0 1px rgba(20, 12, 30, .55), 0 0 8px color-mix(in srgb, var(--knob-tint) 40%, transparent), 0 2px 5px rgba(0, 0, 0, .5); }
.studio .dial input[type='range']:active::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(20, 12, 30, .55), 0 0 14px color-mix(in srgb, var(--knob-tint) 60%, transparent), 0 2px 5px rgba(0, 0, 0, .5); }
.studio .dial input[type='range']::-moz-range-thumb { background: var(--knob); }
.controls input[type='range']::-webkit-slider-thumb, .speed-pop input::-webkit-slider-thumb { background: var(--knob); }

/* =================================================================== one slider style everywhere */
/* thick grooved track with notches at each step, a fill that warms toward the handle, a blended handle.
   Colour: violet by default; the program's colour on the home page; a mood's own colour on its slider. */
.dial, .speed-pop { --tint: var(--violet); --tint-deep: color-mix(in srgb, var(--violet) 55%, #1a0b2e); }
.studio .dial { --tint: var(--prog); --tint-deep: var(--prog-deep); }
.aside-dial { --tint: var(--thought); --tint-deep: color-mix(in srgb, var(--thought) 45%, #10091c); }
.dial.dial input[type='range'], .gm-range.gm-range input[type='range'], .speed-pop.speed-pop input[type='range'] { --knob-tint: var(--tint); height: 26px; cursor: pointer; }
.dial.dial input[type='range']::-webkit-slider-runnable-track, .gm-range.gm-range input[type='range']::-webkit-slider-runnable-track, .speed-pop.speed-pop input[type='range']::-webkit-slider-runnable-track {
  width: auto; height: 14px; border-radius: 7px;
  background:
    var(--notch, linear-gradient(transparent, transparent)),
    linear-gradient(90deg, color-mix(in srgb, var(--tint-deep) 85%, transparent), var(--tint) max(0%, calc(var(--fill, 20%) - 14%)), color-mix(in srgb, var(--tint) 60%, #e9c47e) var(--fill, 20%), rgba(0, 0, 0, .28) var(--fill, 20%));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 0 12px color-mix(in srgb, var(--tint) 18%, transparent);
}
.dial.dial input[type='range']::-webkit-slider-thumb, .gm-range.gm-range input[type='range']::-webkit-slider-thumb, .speed-pop.speed-pop input[type='range']::-webkit-slider-thumb {
  width: 16px; height: 16px; margin-top: -1px; margin-left: 0; border-radius: 50%; background: var(--knob);
  box-shadow: 0 0 0 1px rgba(20, 12, 30, .55), 0 0 8px color-mix(in srgb, var(--tint) 40%, transparent), 0 2px 5px rgba(0, 0, 0, .45);
  transition: transform .15s ease, box-shadow .2s ease;
}
.dial.dial input[type='range']:hover::-webkit-slider-thumb, .gm-range.gm-range input[type='range']:hover::-webkit-slider-thumb, .speed-pop.speed-pop input[type='range']:hover::-webkit-slider-thumb { transform: scale(1.1); }
.dial.dial input[type='range']:active::-webkit-slider-thumb, .gm-range.gm-range input[type='range']:active::-webkit-slider-thumb, .speed-pop.speed-pop input[type='range']:active::-webkit-slider-thumb { transform: scale(1.18); box-shadow: 0 0 0 1px rgba(20, 12, 30, .55), 0 0 14px color-mix(in srgb, var(--tint) 60%, transparent), 0 2px 5px rgba(0, 0, 0, .5); }
.dial.dial input[type='range']::-moz-range-track, .gm-range.gm-range input[type='range']::-moz-range-track, .speed-pop.speed-pop input[type='range']::-moz-range-track { height: 14px; border-radius: 7px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.dial.dial input[type='range']::-moz-range-progress, .gm-range.gm-range input[type='range']::-moz-range-progress, .speed-pop.speed-pop input[type='range']::-moz-range-progress { height: 14px; border-radius: 7px; background: linear-gradient(90deg, color-mix(in srgb, var(--tint-deep) 85%, transparent), var(--tint)); }
.dial.dial input[type='range']::-moz-range-thumb, .gm-range.gm-range input[type='range']::-moz-range-thumb, .speed-pop.speed-pop input[type='range']::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--knob); box-shadow: 0 0 0 1px rgba(20, 12, 30, .55), 0 0 8px color-mix(in srgb, var(--tint) 40%, transparent); }
/* the step labels and value, as on the home page */
.dial .ticks { letter-spacing: .04em; }
.dial .ticks span.on { color: color-mix(in srgb, var(--tint, var(--lilac)) 70%, #fff); }
.aside-dial .ticks span.on { color: color-mix(in srgb, var(--thought) 80%, #fff); }
#volPop { left: 50%; right: auto; translate: -50% 0; transform-origin: bottom center; }
/* Audience takes sapphire; Discourse becomes forest jade (a yellower green than "You're currently") */
body[data-program='talk'] { --prog: #2563a8; --prog-hi: #93c5fd; --prog-deep: #173a6b; }
body[data-program='discourse'] { --prog: #3b8a3e; --prog-hi: #a7e3a0; --prog-deep: #1d4d22; }

/* phones: the chat button sits on top of his face (they share one slot), freeing a column in the dock */
@media (max-width: 440px) {
  .controls { grid-template-columns: 54px 52px 44px 44px 36px 36px 36px; gap: 5px; }
  .controls .dock-head { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; width: 46px; height: 46px; margin: -10px -2px 0 0; z-index: 0; }
  .controls #askBtn { grid-column: 1; grid-row: 1; justify-self: start; align-self: end; width: 34px; height: 34px; margin: 0 0 -6px -2px; z-index: 2; }
}
@media (max-width: 370px) {
  .controls { grid-template-columns: 50px 50px 42px 42px 34px 34px 34px; gap: 4px; }
}

/* time spent: a small pill hanging off the play button's lower right; it takes no room of its own */
.play .rx-elapsed {
  position: absolute; right: -10px; bottom: -6px; z-index: 3; min-width: 0; padding: 2px 7px; pointer-events: none;
  font-family: var(--ui); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--lilac); font-variant-numeric: tabular-nums;
  border-radius: 999px; background: rgba(18, 12, 32, .82); border: 1px solid rgba(196, 181, 253, .22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
#viz { height: 120px; } /* 1.25x taller: the bars scale with it */
/* further right, and just the numbers: no pill behind them */
.play .rx-elapsed { right: -26px; bottom: -4px; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 0 8px rgba(0, 0, 0, .6); }
.play .rx-elapsed { right: -21px; }

/* =================================================================== the page's scrollbar: slim and quiet */
html { scrollbar-width: thin; scrollbar-color: rgba(196, 181, 253, .28) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(196, 181, 253, .22); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(196, 181, 253, .45); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* scrollers inside menus keep the same look */
.sheet { scrollbar-width: thin; scrollbar-color: rgba(196, 181, 253, .25) transparent; }

/* jump to where he is now (or to the bottom) */
.jump-btn {
  position: fixed; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 112px); z-index: 6;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: 999px; cursor: pointer;
  font-family: var(--ui); font-size: 12px; font-weight: 500; color: var(--lilac);
  background: rgba(24, 16, 42, .55); border: 1px solid rgba(196, 181, 253, .22);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  animation: rise .25s ease; transition: background .2s, border-color .2s;
}
.jump-btn:hover { background: rgba(60, 40, 100, .6); border-color: rgba(196, 181, 253, .45); color: #fff; }
.jump-btn[hidden] { display: none; }
.jump-btn svg { width: 15px; height: 15px; transition: rotate .2s; }
.jump-btn[data-dir='down'] svg { rotate: 90deg; }
.jump-btn[data-dir='up'] svg { rotate: -90deg; }
/* top bar centre: the book or episode, in the chapter bar's gold capitals */
.stage .reactions .rx-title {
  flex: 1; min-width: 0; text-align: center; padding: 0 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--caps); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  text-shadow: 0 0 14px rgba(233, 196, 126, .22);
}
.stage .reactions #endSession { margin-left: 0; }
@media (max-width: 440px) { .stage .reactions .rx-title { font-size: 11px; letter-spacing: .1em; padding: 0 4px; } }

/* jump button: icon only, round, monochrome glass */
.jump-btn {
  width: 46px; height: 46px; padding: 0; justify-content: center; gap: 0; color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 22px rgba(0, 0, 0, .35);
}
.jump-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
.jump-btn svg { width: 20px; height: 20px; stroke-width: 2; }

/* the sideways scrollbar under tangent cards: thicker, frosted glass */
.seg-row.branched::-webkit-scrollbar { height: 12px; }
.seg-row.branched::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); margin: 0 12px; }
.seg-row.branched::-webkit-scrollbar-thumb {
  border-radius: 12px; border: 2px solid transparent; background-clip: padding-box;
  background-color: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.seg-row.branched::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .32); }
@supports not selector(::-webkit-scrollbar) { .seg-row.branched { scrollbar-width: auto; scrollbar-color: rgba(255, 255, 255, .28) rgba(255, 255, 255, .04); } }
.seg-row.branched { padding-bottom: 14px; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; } /* no little arrow buttons at the ends */
.seg-row.branched { scrollbar-color: auto; scrollbar-width: auto; } /* opt out of the page-wide setting, so the glass styling above applies */
.jump-btn[data-dir] svg { rotate: none; } /* each direction has its own icon now */
/* top / back-to-him / bottom, stacked on the right above the dock */
.jump-stack { position: fixed; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 112px); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.jump-stack .jump-btn { position: static; pointer-events: auto; }
.jump-btn.small { width: 36px; height: 36px; }
.jump-btn.small svg { width: 17px; height: 17px; }
/* ⤒ at the top of the screen (its height is set from the sticky bars), ⤓ and ◉ at the bottom */
.jump-stack #jumpTop { position: fixed; right: 14px; }

/* =================================================================== the jump buttons, animated */
.jump-btn {
  transition: right .45s cubic-bezier(.22, .8, .2, 1), transform .45s cubic-bezier(.22, .8, .2, 1), opacity .3s ease,
    background .35s ease, border-color .35s ease, box-shadow .45s ease, color .3s ease;
}
/* page top / bottom: tucked against the screen's edge */
.jump-stack .jump-btn, .jump-stack #jumpTop { right: 6px; }
.jump-stack { right: 0; align-items: flex-end; }
.jump-stack #jumpEnd { position: relative; }
/* back to him: glides inward, with a violet ring, so it reads differently at a glance */
.jump-btn[data-mode='now'] {
  transform: translateX(-12px);
  border-color: rgba(196, 181, 253, .5); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 4px rgba(139, 92, 246, .18), 0 0 18px rgba(167, 139, 250, .35), 0 8px 22px rgba(0, 0, 0, .35);
}
/* shown / hidden by fading and shrinking, never popping */
.jump-btn.gone { opacity: 0; transform: scale(.7); pointer-events: none; }
.jump-btn[data-mode='now'].gone { transform: translateX(-12px) scale(.7); }
/* the icon swap: out, change, back in */
.jump-btn.swap svg { animation: jump-swap .3s cubic-bezier(.4, 0, .2, 1); }
@keyframes jump-swap {
  0% { opacity: 1; transform: scale(1); }
  45% { opacity: 0; transform: scale(.45); }
  55% { opacity: 0; transform: scale(.45); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .jump-btn { transition: opacity .2s; } .jump-btn.swap svg { animation: none; } }
/* back to him = lock on: gold */
.jump-btn[data-mode='now'] {
  color: var(--gold); border-color: rgba(233, 196, 126, .55);
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, .14), 0 0 0 4px rgba(233, 196, 126, .14), 0 0 18px rgba(233, 196, 126, .3), 0 8px 22px rgba(0, 0, 0, .35);
}
.jump-btn[data-mode='now']:hover { color: #fbe3b0; border-color: rgba(233, 196, 126, .8); background: rgba(233, 196, 126, .1); }
.jump-btn[data-mode='now'] svg { filter: drop-shadow(0 0 6px rgba(233, 196, 126, .45)); }
.jump-stack #jumpEnd { bottom: auto; top: auto; } /* drop the old 112px offset: it sits at the stack's foot, just above the dock */

/* =================================================================== Settings: the Sharmat's chambers */
/* a darker, richer room: obsidian with a warm glow from above and a fine gold-tinted edge */
#settingsSheet {
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(233, 196, 126, .07), transparent 70%),
    linear-gradient(180deg, rgba(22, 15, 30, .97), rgba(10, 7, 14, .985));
  border-color: rgba(233, 196, 126, .2);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(233, 196, 126, .12);
}
#settingsSheet .sheet-head { text-align: center; padding-inline: 48px; }
#settingsSheet .sheet-head h3 {
  font-family: var(--caps); font-weight: 600; font-size: 21px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  text-shadow: 0 0 22px rgba(233, 196, 126, .25); margin-top: 6px;
}
#settingsSheet .sheet-head .fine { font-family: var(--display); font-style: italic; font-size: 15px; }
@media (max-width: 440px) { #settingsSheet .sheet-head h3 { font-size: 17px; letter-spacing: .1em; } #settingsSheet .sheet-head { padding-inline: 40px; } }

/* each section, its own colour */
#setPersonality { --sec: #f472b6; }
#setBrain { --sec: #60a5fa; }
#setUI { --sec: #34d399; }
#setData { --sec: #f59e0b; }
#setHelp { --sec: #a78bfa; }
#setCredits { --sec: #e9c47e; }
#settingsSheet > .set { border-color: color-mix(in srgb, var(--sec) 16%, transparent); background: color-mix(in srgb, var(--sec) 3%, rgba(255, 255, 255, .015)); }
#settingsSheet > .set > summary svg { color: var(--sec); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sec) 45%, transparent)); }
#settingsSheet > .set:not([open]) > summary:hover { color: color-mix(in srgb, var(--sec) 50%, #fff); }
#settingsSheet > .set[open] {
  border-color: color-mix(in srgb, var(--sec) 42%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sec) 9%, transparent), color-mix(in srgb, var(--sec) 3%, transparent) 220px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--sec) 10%, transparent);
}
#settingsSheet > .set[open]::before { background: var(--sec); box-shadow: 0 0 12px var(--sec); }
#settingsSheet > .set[open] > summary svg { color: var(--sec); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--sec) 70%, transparent)); }

/* the chevron always follows the section's name; extras (status badges, summaries) go to the far right */
.set > summary::after { order: 1; }
.set > summary > small, .set > summary > .stack-status { order: 2; margin-left: auto; }

/* looping icons, each in character */
#setPersonality > summary svg { animation: icon-beat 2.4s ease-in-out infinite; }
#setBrain > summary svg { width: 25px; height: 25px; animation: icon-speak 2.6s ease-in-out infinite; transform-origin: 30% 50%; }
@keyframes icon-speak { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.1, 1.05); } 20% { transform: scale(.98); } 30% { transform: scale(1.06, 1.03); } }
#setUI > summary svg { animation: icon-blink 4.5s ease-in-out infinite; transform-origin: 50% 50%; }
#setData > summary svg { animation: icon-sway 3.6s ease-in-out infinite; transform-origin: 50% 15%; }
#setHelp > summary svg { animation: icon-bob 2.8s ease-in-out infinite; }
#setCredits > summary svg { animation: icon-turn 12s linear infinite; }
@keyframes icon-beat { 0%, 60%, 100% { transform: scale(1); } 10% { transform: scale(1.18); } 20% { transform: scale(1); } 30% { transform: scale(1.12); } }
@keyframes icon-twinkle { 0%, 100% { transform: rotate(0) scale(1); opacity: 1; } 50% { transform: rotate(18deg) scale(1.12); opacity: .75; } }
@keyframes icon-blink { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
@keyframes icon-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@keyframes icon-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes icon-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #settingsSheet > .set > summary svg { animation: none; } }
/* section names stay on one line (badges wrap instead); nested sections take their parent's colour */
#settingsSheet .set > summary { white-space: nowrap; }
#settingsSheet .set > summary > .stack-status, #settingsSheet .set > summary > small { white-space: normal; min-width: 0; }
#settingsSheet .set .set[open] { border-color: color-mix(in srgb, var(--sec) 32%, transparent); background: color-mix(in srgb, var(--sec) 5%, transparent); box-shadow: none; }
#settingsSheet .set .set[open]::before { background: var(--sec); box-shadow: 0 0 8px var(--sec); }
#settingsSheet .set .set > summary svg { color: color-mix(in srgb, var(--sec) 70%, #fff); }

/* Voice API: proxy and model side by side; earlier voices as small chips */
.field-pair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.field-pair .input { min-width: 0; width: 100%; text-overflow: ellipsis; }
#voiceSearch { margin-top: 8px; }
.voice-recent { display: flex; align-items: center; gap: 8px; min-width: 0; }
.voice-recent > .fine { flex: none; margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.voice-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 2px 0; }
.voice-chips::-webkit-scrollbar { display: none; }
.voice-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 150px; padding: 3px 10px 3px 3px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
  opacity: .75; transition: opacity .2s, border-color .2s, color .2s;
}
.voice-chip:hover, .voice-chip:focus-visible { opacity: 1; color: var(--text); border-color: color-mix(in srgb, var(--sec, #a78bfa) 50%, transparent); }
.voice-chip img, .voice-chip .ph { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #241a3a; flex: none; }
.voice-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#settingsSheet .voice.selected { border-color: color-mix(in srgb, var(--sec) 55%, transparent); background: color-mix(in srgb, var(--sec) 12%, transparent); }

/* Vibes: a sunset down the list, rose through coral to amber, instead of the usual violet */
#setVibes .dial { --tint: #e0607e; --tint-deep: color-mix(in srgb, var(--tint) 45%, #1a0910); }
#setVibes .dial:nth-of-type(2) { --tint: #e66a6f; }
#setVibes .dial:nth-of-type(3) { --tint: #eb7562; }
#setVibes .dial:nth-of-type(4) { --tint: #ee8158; }
#setVibes .dial:nth-of-type(5) { --tint: #ee8e4f; }
#setVibes .dial:nth-of-type(6) { --tint: #ec9b48; }
#setVibes .dial:nth-of-type(7) { --tint: #e8a844; }
#setVibes .dial:nth-of-type(n+8) { --tint: #e3b443; }
#setVibes .dial .label-row .value { color: color-mix(in srgb, var(--tint) 75%, #fff); }
#setPersonality > #setVibes > summary .sub-title { background: linear-gradient(100deg, #f49ab0, #f59a7a 55%, #f2c46d); -webkit-background-clip: text; background-clip: text; color: transparent; }
#setPersonality > #setVibes > summary svg { color: #f08a8a; }
#setPersonality > #setVibes[open]::before { background: linear-gradient(#e0607e, #e8a844); box-shadow: 0 0 10px rgba(232, 120, 100, .6); }

/* =================================================================== Toggles, game style like the sliders */
/* a grooved track that fills with the section's colour (warming toward gold), and a metal knob tinted to match */
.toggle { --tog: var(--sec, var(--violet)); align-items: center; }
.toggle input {
  width: 46px; height: 26px; margin: 0; border-radius: 13px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .22));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: background .3s, box-shadow .3s;
}
.toggle input::after {
  top: 4px; left: 4px; width: 18px; height: 18px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), transparent 45%),
    conic-gradient(from 210deg,
      color-mix(in srgb, var(--tog) 20%, #a9a8b2) 0 30%,
      color-mix(in srgb, var(--tog) 25%, #7d7b86) 58%,
      color-mix(in srgb, var(--tog) 20%, #9c7b45) 84%,
      color-mix(in srgb, var(--tog) 20%, #a9a8b2) 100%);
  box-shadow: 0 0 0 1px rgba(20, 12, 30, .55), 0 2px 4px rgba(0, 0, 0, .5);
  transition: translate .28s cubic-bezier(.3, 1.4, .5, 1), background .3s, box-shadow .3s;
}
.toggle input:checked {
  background: linear-gradient(90deg, color-mix(in srgb, var(--tog) 45%, #12091a), var(--tog) 70%, color-mix(in srgb, var(--tog) 65%, #e9c47e));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 12px color-mix(in srgb, var(--tog) 35%, transparent);
}
.toggle input:checked::after {
  translate: 20px 0;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), transparent 45%),
    conic-gradient(from 210deg,
      color-mix(in srgb, var(--tog) 30%, #d6d4de) 0 30%,
      color-mix(in srgb, var(--tog) 35%, #a3a1ac) 58%,
      color-mix(in srgb, var(--tog) 25%, #c9a35c) 84%,
      color-mix(in srgb, var(--tog) 30%, #d6d4de) 100%);
  box-shadow: 0 0 0 1px rgba(20, 12, 30, .55), 0 0 8px color-mix(in srgb, var(--tog) 55%, transparent), 0 2px 4px rgba(0, 0, 0, .45);
}
.toggle input:active::after { width: 22px; }
.toggle input:checked:active::after { translate: 16px 0; }
.toggle input:focus-visible { outline: 2px solid color-mix(in srgb, var(--tog) 70%, #fff); outline-offset: 2px; }
.toggle b { font-weight: 500; transition: color .3s; }
.toggle:has(input:checked) b { color: color-mix(in srgb, var(--tog) 30%, #fff); }
/* in the subsections, a shade of their own: News sources sky, Avatar & Atmosphere ember */
#setNews { --sec: #38bdf8; }
#setFace { --sec: #fb923c; }
@media (prefers-reduced-motion: reduce) { .toggle input::after { transition: none; } }
/* settings choice buttons wear their section's colour too */
#settingsSheet .segmented button[aria-pressed='true'] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sec) 48%, transparent), color-mix(in srgb, var(--sec) 26%, transparent));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--sec) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.voice .icon-btn.playing { color: #fff; border-color: color-mix(in srgb, var(--sec, var(--violet)) 60%, transparent); background: color-mix(in srgb, var(--sec, var(--violet)) 22%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--sec, var(--violet)) 35%, transparent); }

/* News sources: the three source switches on the left, the RSS list standing tall beside them */
.news-sources { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 14px; align-items: stretch; }
.news-toggles { display: flex; flex-direction: column; gap: 12px; justify-content: space-between; }
.rss-field { min-height: 0; }
.rss-field > span small { display: block; font-size: 11px; color: var(--faint); }
.rss-field textarea { flex: 1; min-height: 150px; resize: none; font-size: 12px; line-height: 1.6; padding: 10px 12px; overflow: auto; white-space: pre; }
@media (max-width: 340px) { .news-sources { grid-template-columns: 1fr; } }
.news-sources { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.news-toggles .toggle { gap: 10px; }
.news-toggles .toggle span { min-width: 0; overflow-wrap: anywhere; }
.news-toggles .toggle b { font-size: 13.5px; line-height: 1.25; }
.news-toggles .toggle small { font-size: 11.5px; line-height: 1.35; }
.news-toggles .toggle input { width: 40px; height: 23px; }
.news-toggles .toggle input::after { width: 15px; height: 15px; }
.news-toggles .toggle input:checked::after { translate: 17px 0; }
.news-toggles .toggle input:checked:active::after { translate: 13px 0; }
.news-toggles .toggle input:active::after { width: 19px; }
/* on a phone the descriptions crowd the column; the names say enough */
@media (max-width: 520px) { .news-toggles .toggle small { display: none; } .news-toggles { justify-content: space-around; } .rss-field textarea { min-height: 130px; } }
/* the switches set the height; the RSS box stretches to fill it rather than pushing them apart */
.news-sources { grid-template-rows: minmax(0, auto); }
.rss-field { position: relative; }
.rss-field textarea { min-height: 96px; height: 100%; }
.news-toggles { justify-content: center; gap: 14px; }
@media (max-width: 520px) { .news-toggles { gap: 16px; justify-content: center; } .rss-field textarea { min-height: 96px; } }

/* UI/UX: the smoke slider with its freeze switch beside it */
.smoke-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.smoke-row .toggle { max-width: 150px; }
.smoke-row .toggle b { font-size: 13.5px; line-height: 1.25; }
.smoke-row .toggle small { font-size: 11.5px; }
#setUI .dial { --tint: var(--sec); --tint-deep: color-mix(in srgb, var(--sec) 45%, #08140f); }
@media (max-width: 400px) { .smoke-row { gap: 10px; } .smoke-row .toggle { max-width: 118px; } }
.smoke-row .toggle { flex-direction: column; align-items: center; gap: 6px; text-align: center; max-width: 120px; }
.smoke-row .toggle span { align-items: center; }
#setUI .dial .label-row .value { color: color-mix(in srgb, var(--sec) 70%, #fff); }
@media (max-width: 400px) { .smoke-row .toggle { max-width: 96px; } }

/* options that explain themselves: the hint floats above the whole row (hover on desktop, a moment after a tap on phones) */
.segmented.hinted { position: relative; overflow: visible; }
.segmented.hinted button { position: static; }
.segmented.hinted button::after {
  content: attr(data-hint); position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 3;
  padding: 9px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; text-align: left; color: var(--text); font-weight: 400;
  background: rgba(14, 10, 22, .96); border: 1px solid color-mix(in srgb, var(--sec, var(--violet)) 35%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); backdrop-filter: blur(10px);
  opacity: 0; translate: 0 4px; pointer-events: none; transition: opacity .18s, translate .18s;
}
@media (hover: hover) { .segmented.hinted button:hover::after { opacity: 1; translate: 0 0; transition-delay: .35s; } }
.segmented.hinted button.hint-show::after { opacity: 1; translate: 0 0; }
#setUI .segmented button { font-size: 13px; padding: 0 4px; line-height: 1.15; }

/* negative: the canvas sits just behind the dock (outside its layer) and inverts what's there */
#viz.negative { position: fixed; z-index: 4; opacity: .9; mix-blend-mode: difference; }
.dock[hidden] + #viz { display: none; }

/* UI/UX: section headings (Display, Audio visualizer) above their own labelled rows */
.set-heading {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 2px; font-family: var(--caps); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--sec, var(--gold)) 70%, #fff);
}
.set-heading::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--sec, var(--gold)) 40%, transparent), transparent); }
#setUI > summary + .set-heading { margin-top: 6px; }
#setUI .label { font-size: 12px; color: var(--muted); }
/* style on the left, density on the right */
.viz-shape { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; align-items: end; }
.viz-shape > div:first-child { display: flex; flex-direction: column; gap: 7px; }
.viz-shape .dial { padding-top: 0; }
.viz-shape { margin-top: 12px; }
@media (max-width: 480px) { .viz-shape { grid-template-columns: minmax(0, 1fr); gap: 12px; } .viz-shape .segmented { max-width: 220px; } }

/* =================================================================== The archive (history), dressed like the Sharmat's chambers */
#historySheet {
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(233, 196, 126, .07), transparent 70%),
    linear-gradient(180deg, rgba(22, 15, 30, .97), rgba(10, 7, 14, .985));
  border-color: rgba(233, 196, 126, .2);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(233, 196, 126, .12);
}
#historySheet .sheet-head { text-align: center; padding-inline: 48px; }
#historySheet .sheet-emblem {
  display: block; width: 30px; height: 30px; margin: 2px auto 4px; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.5;
  filter: drop-shadow(0 0 10px rgba(233, 196, 126, .45)); animation: emblem-float 4.5s ease-in-out infinite;
}
@keyframes emblem-float { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -3px; rotate: 3deg; } }
#historySheet .sheet-head h3 {
  font-family: var(--caps); font-weight: 600; font-size: 21px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  text-shadow: 0 0 22px rgba(233, 196, 126, .25); margin-top: 0;
}
#historySheet .sheet-head .fine { font-family: var(--display); font-style: italic; font-size: 15px; }
@media (max-width: 440px) { #historySheet .sheet-head h3 { font-size: 18px; } #historySheet .sheet-head { padding-inline: 40px; } }

/* group headings: gold caps, a count, and a fading rule */
.history .archive-group { display: flex; flex-direction: row; justify-content: flex-start; text-align: left; border: 0; background: none; animation: none; border-radius: 0; text-transform: uppercase; align-items: center; gap: 10px; padding: 14px 2px 2px; color: var(--gold); font-family: var(--caps); font-size: 12px; font-weight: 600; letter-spacing: .18em; }
.history .archive-group::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(233, 196, 126, .35), transparent); order: 3; }
.history .archive-group i { order: 2; font-style: normal; font-family: var(--sans, inherit); font-size: 11px; letter-spacing: 0; padding: 1px 7px; border-radius: 999px; background: rgba(233, 196, 126, .12); color: color-mix(in srgb, var(--gold) 80%, #fff); }
.history .archive-group:first-child { padding-top: 2px; }

/* each session wears its program's colour: an icon, a soft wash, and an accent on the left */
.history li.entry {
  position: relative; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px 12px 12px 14px; overflow: hidden;
  border-color: color-mix(in srgb, var(--pc) 16%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--pc) 7%, transparent), rgba(255, 255, 255, .015) 55%);
  transition: border-color .2s, background .2s, transform .2s;
}
.history li.entry::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pc); opacity: .55; transition: opacity .2s, box-shadow .2s; }
.history li.entry:hover { border-color: color-mix(in srgb, var(--pc) 38%, transparent); background: linear-gradient(100deg, color-mix(in srgb, var(--pc) 12%, transparent), rgba(255, 255, 255, .02) 60%); }
.history li.entry:hover::before { opacity: 1; box-shadow: 0 0 10px var(--pc); }
.history .glyph { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--pc); background: color-mix(in srgb, var(--pc) 12%, rgba(0, 0, 0, .25)); border: 1px solid color-mix(in srgb, var(--pc) 22%, transparent); }
.history .glyph svg { width: 20px; height: 20px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pc) 45%, transparent)); }
.history .entry-info { min-width: 0; }
.history .entry-info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history .entry-info small { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.history .prog { color: var(--pc); font-weight: 600; letter-spacing: .02em; }
/* saved: a gold edge and a filled gold bookmark */
.history li.entry.saved { border-color: rgba(233, 196, 126, .3); box-shadow: inset 0 0 0 1px rgba(233, 196, 126, .06), 0 6px 22px rgba(0, 0, 0, .25); }
.history .mark[aria-pressed='true'] { color: var(--gold); border-color: rgba(233, 196, 126, .45); background: rgba(233, 196, 126, .1); }
/* replay: the one action that matters most, a glowing disc in the program's colour */
.history .icon-btn.replay { color: #fff; border-color: transparent; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc) 75%, #fff), color-mix(in srgb, var(--pc) 70%, #000) 90%); box-shadow: 0 0 14px color-mix(in srgb, var(--pc) 40%, transparent); }
.history .icon-btn.replay svg { fill: currentColor; translate: 1px 0; }
.history .icon-btn.replay:hover { transform: scale(1.06); box-shadow: 0 0 20px color-mix(in srgb, var(--pc) 60%, transparent); }
.history .row-actions .icon-btn:not(.replay) { background: rgba(255, 255, 255, .03); }
@media (max-width: 440px) {
  .history li.entry { grid-template-columns: auto minmax(0, 1fr); padding: 12px; }
  .history .glyph { width: 36px; height: 36px; }
  .history .row-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { #historySheet .sheet-emblem { animation: none; } }
@media (max-width: 440px) { .history li.entry .row-actions { grid-column: 2; justify-content: flex-start; margin-top: -2px; } }

/* archive: frosted glass rather than a solid panel */
#historySheet {
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(233, 196, 126, .08), transparent 70%),
    linear-gradient(180deg, rgba(26, 18, 36, .4), rgba(12, 8, 18, .48));
  backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3);
  border-color: rgba(233, 196, 126, .22);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .02);
}
#historySheet .history li.entry { background: linear-gradient(100deg, color-mix(in srgb, var(--pc) 8%, rgba(255, 255, 255, .03)), rgba(255, 255, 255, .025) 55%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* replay: quiet, just tinted with the program's colour */
.history .icon-btn.replay {
  color: color-mix(in srgb, var(--pc) 85%, #fff); border-color: color-mix(in srgb, var(--pc) 30%, transparent);
  background: color-mix(in srgb, var(--pc) 12%, rgba(255, 255, 255, .02)); box-shadow: none;
}
.history .icon-btn.replay:hover { transform: none; background: color-mix(in srgb, var(--pc) 20%, rgba(255, 255, 255, .03)); border-color: color-mix(in srgb, var(--pc) 50%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--pc) 20%, transparent); }

/* visualizer style: a two-column grid of the shape's controls (style choice, then sliders) */
.viz-style { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 18px; align-items: end; margin-bottom: 10px; }
.viz-style[hidden] { display: none; }
.viz-style .viz-kind { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 7px; }
.viz-style .viz-kind .segmented { max-width: 260px; }
.viz-style .dial { padding-top: 6px; }
@media (max-width: 480px) { .viz-style { grid-template-columns: minmax(0, 1fr); } }
/* the reset sits at the end of the heading's rule */
.set-heading .ghost-pill { order: 1; font-family: var(--sans, inherit); font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: none; padding: 3px 10px; color: var(--muted); }
.set-heading .ghost-pill:hover { color: color-mix(in srgb, var(--sec, var(--gold)) 70%, #fff); border-color: color-mix(in srgb, var(--sec, var(--gold)) 45%, transparent); }
#settingsSheet .set-heading .ghost-pill { font-family: Inter, system-ui, sans-serif; font-style: normal; text-transform: none; letter-spacing: .02em; font-size: 11.5px; }
#settingsSheet .set-heading .ghost-pill { background: rgba(255, 255, 255, .03); border-color: color-mix(in srgb, var(--sec) 28%, transparent); color: color-mix(in srgb, var(--sec) 55%, var(--muted)); }
#settingsSheet .set-heading .ghost-pill:hover { background: color-mix(in srgb, var(--sec) 12%, transparent); border-color: color-mix(in srgb, var(--sec) 50%, transparent); color: color-mix(in srgb, var(--sec) 70%, #fff); }

/* =================================================================== Side chat ("A word aside") */
/* frosted glass in the session's colour; a docked panel on the left on wide screens, an overlay on phones */
.side-chat {
  position: fixed; z-index: 21; display: flex; flex-direction: column; min-height: 0;
  background:
    radial-gradient(140% 30% at 0% 0%, color-mix(in srgb, var(--prog, #8b5cf6) 16%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(24, 16, 34, .5), rgba(10, 7, 16, .62));
  backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3);
  animation: side-in .32s cubic-bezier(.2, .8, .2, 1);
}
.side-chat[hidden] { display: none; }
@keyframes side-in { from { opacity: 0; translate: 0 14px; } }
.side-head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 12px 16px; border-bottom: 1px solid rgba(233, 196, 126, .12); }
.side-emblem { width: 22px; height: 22px; flex: none; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.6; filter: drop-shadow(0 0 8px rgba(233, 196, 126, .4)); }
.side-title { flex: 1; min-width: 0; }
.side-title h3 { margin: 0; font-family: var(--caps); font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.side-title p { margin: 1px 0 0; font-family: var(--display); font-style: italic; font-size: 13.5px; color: var(--faint); }
.side-head .icon-btn { width: 36px; height: 36px; flex: none; background: rgba(255, 255, 255, .03); }
#sideVoice[aria-pressed='true'] { color: var(--gold); border-color: rgba(233, 196, 126, .4); background: rgba(233, 196, 126, .08); }
#sideVoice[aria-pressed='false'] { opacity: .55; }

.side-log { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; scrollbar-width: thin; }
.side-log .msg { position: relative; max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; animation: rise .3s cubic-bezier(.2, .8, .2, 1); }
.side-log .msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.side-log .msg.you { align-self: flex-end; border-bottom-right-radius: 5px; color: var(--text); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08); }
/* his words: the display serif, a glass card edged in the session's colour */
.side-log .msg.him {
  align-self: flex-start; border-bottom-left-radius: 5px; padding-right: 46px;
  font-family: var(--display); font-size: 17px; line-height: 1.45; color: #f3ead9;
  background: linear-gradient(120deg, color-mix(in srgb, var(--prog, #8b5cf6) 14%, rgba(255, 255, 255, .03)), rgba(255, 255, 255, .03));
  border: 1px solid color-mix(in srgb, var(--prog-hi, #c4b5fd) 22%, transparent);
}
.side-log .msg.him.speaking { border-color: color-mix(in srgb, var(--prog-hi, #c4b5fd) 55%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--prog, #8b5cf6) 30%, transparent); }
.side-log .msg.failed { font-family: inherit; font-size: 13px; color: #fca5a5; border-color: rgba(252, 165, 165, .3); background: rgba(252, 165, 165, .06); padding-right: 14px; }
.msg-play {
  position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  color: color-mix(in srgb, var(--prog-hi, #c4b5fd) 85%, #fff); background: color-mix(in srgb, var(--prog, #8b5cf6) 18%, transparent); border: 1px solid color-mix(in srgb, var(--prog-hi, #c4b5fd) 25%, transparent);
}
.msg-play svg { width: 13px; height: 13px; fill: currentColor; }
.msg-play .spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
/* thinking: three soft dots */
.side-log .msg.pending { padding: 14px 18px; }
.side-log .msg .dots { display: inline-flex; gap: 5px; }
.side-log .msg .dots::before, .side-log .msg .dots::after, .side-log .msg .dots { --d: currentColor; }
.side-log .msg.pending .dots { width: 34px; height: 8px; background: radial-gradient(circle, var(--gold) 3px, transparent 3.5px) 0 50% / 12px 8px repeat-x; animation: side-think 1.2s ease-in-out infinite; opacity: .8; }
@keyframes side-think { 50% { opacity: .3; } }
.side-empty { margin: auto 0; text-align: center; padding: 10px 6px; }
.side-empty p { margin: 0 auto 14px; max-width: 280px; font-family: var(--display); font-style: italic; font-size: 16px; line-height: 1.45; color: var(--muted); }
.side-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.side-chip { padding: 7px 12px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; color: var(--text); background: rgba(255, 255, 255, .04); border: 1px solid color-mix(in srgb, var(--prog-hi, #c4b5fd) 22%, transparent); transition: background .2s, border-color .2s; }
.side-chip:hover { background: color-mix(in srgb, var(--prog, #8b5cf6) 16%, transparent); border-color: color-mix(in srgb, var(--prog-hi, #c4b5fd) 45%, transparent); }

.side-ask { display: flex; gap: 8px; padding: 10px 12px calc(env(safe-area-inset-bottom) + 12px); border-top: 1px solid rgba(255, 255, 255, .06); }
.side-ask textarea { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--prog-hi, #c4b5fd) 28%, transparent); background: rgba(10, 7, 18, .55); color: var(--text); font-size: 16px; }
.side-ask textarea:focus { outline: none; border-color: color-mix(in srgb, var(--prog-hi, #c4b5fd) 60%, transparent); }
.side-ask .icon-btn { width: 46px; height: 46px; flex: none; }
#askBtn.on { color: var(--gold); border-color: rgba(233, 196, 126, .45); background: rgba(233, 196, 126, .1); }

/* phones and narrow windows: the whole screen, like a menu */
@media (max-width: 979px) {
  .side-chat { inset: 0; padding-top: env(safe-area-inset-top); }
}
/* wide screens: docked on the left, and the session moves over to make room */
@media (min-width: 980px) and (max-width: 1259px) { /* the backup: a docked panel when the side gap is too narrow */
  .side-chat { left: 0; top: 0; bottom: 0; width: 360px; z-index: 6; border-right: 1px solid rgba(233, 196, 126, .16); box-shadow: 20px 0 60px rgba(0, 0, 0, .35); animation-name: side-dock; }
  @keyframes side-dock { from { opacity: 0; translate: -24px 0; } }
  body.side-open .app { margin-left: calc(360px + max(16px, (100vw - 360px - 580px) / 2)); }
  body.side-open .dock, body.side-open #viz.negative { left: 360px; }
  .app, .dock { transition: margin-left .32s cubic-bezier(.2, .8, .2, 1), left .32s cubic-bezier(.2, .8, .2, 1); }
}
@media (prefers-reduced-motion: reduce) { .side-chat { animation: none; } }

/* widescreens: no panel at all. The chat simply floats in the empty space left of the session,
   centred in that gap; nothing moves aside. (The docked panel above is the fallback for narrower windows.) */
@media (min-width: 1260px) {
  .side-chat {
    --gap: calc((100vw - 580px) / 2); /* the empty space beside the centred session */
    --cw: min(420px, calc(var(--gap) - 72px));
    left: calc((var(--gap) - var(--cw)) / 2); width: var(--cw);
    top: 72px; bottom: 20px; z-index: 6;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none;
    animation: side-float .4s cubic-bezier(.2, .8, .2, 1);
  }
  @keyframes side-float { from { opacity: 0; translate: 0 10px; } }
  .side-head { border-bottom: 0; padding: 0 0 6px; }
  .side-head .icon-btn { width: 32px; height: 32px; background: transparent; border-color: transparent; opacity: .6; transition: opacity .2s, border-color .2s; }
  .side-head .icon-btn:hover, #sideVoice[aria-pressed='true'] { opacity: 1; }
  #sideVoice[aria-pressed='true'] { background: transparent; border-color: transparent; }
  .side-title p { display: none; }
  /* the thread fades out at the top as it scrolls, instead of stopping at an edge */
  .side-log { padding: 18px 2px 10px; mask-image: linear-gradient(to bottom, transparent 0, #000 36px, #000 calc(100% - 10px), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px, #000 calc(100% - 10px), transparent 100%); scrollbar-width: none; }
  .side-log::-webkit-scrollbar { display: none; }
  /* his messages and yours keep their own glass, since there's no panel behind them now */
  .side-log .msg.you { background: rgba(255, 255, 255, .06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .side-log .msg.him { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: linear-gradient(120deg, color-mix(in srgb, var(--prog, #8b5cf6) 16%, rgba(14, 10, 22, .45)), rgba(14, 10, 22, .4)); }
  .side-ask { border-top: 0; padding: 8px 0 0; }
  .side-ask textarea { background: rgba(14, 10, 22, .45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .side-empty p { color: var(--faint); }
  .side-chip { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}

/* the feed's notes (a poke, a notification): small and centred, between the messages */
.side-log .note { align-self: center; max-width: 92%; text-align: center; animation: rise .3s cubic-bezier(.2, .8, .2, 1); }
.side-log .note span {
  display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; line-height: 1.4; color: var(--faint);
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.side-log .note.err span { color: #fca5a5; border-color: rgba(252, 165, 165, .22); background: rgba(252, 165, 165, .05); }
/* his remarks on notifications: lighter than a real answer */
.side-log .msg.him.remark { font-size: 15.5px; font-style: italic; }
/* something new in the feed while it's closed */
#askBtn { position: relative; }
#askBtn.unread::after {
  content: ''; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: blink 1.6s ease-in-out infinite;
}

/* side chat cards, styled like the session's own: caps label, serif text, a thin accent bar; the current one lit */
.side-log .msg, .side-log .msg.him, .side-log .msg.you {
  max-width: 100%; align-self: stretch; padding: 10px 14px 12px 18px; border-radius: 16px; border: 0;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  font-family: inherit; font-size: inherit; font-style: normal; color: inherit; opacity: .55; transition: opacity .5s, background .5s;
}
.side-log .msg::before { content: ''; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--line); transition: background .5s, box-shadow .5s; }
.side-log .msg:hover { opacity: .8; }
.side-log .msg .seg-meta { margin-bottom: 4px; }
.side-log .msg .live { font-size: 11px; color: var(--muted); }
.side-log .msg .live::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--prog-hi, var(--mood)); box-shadow: 0 0 6px var(--prog-hi, var(--mood)); vertical-align: 1px; animation: blink 1.4s ease-in-out infinite; }
.side-log .msg .seg-text { margin: 0; font-family: var(--display); font-size: 17px; line-height: 1.5; color: #e9e3f5; white-space: pre-wrap; overflow-wrap: anywhere; }
.side-log .msg .seg-text.thinking { color: var(--faint); font-style: italic; }
.side-log .msg .seg-text.thinking::after { content: ''; display: inline-block; width: 1.4em; animation: dots 1.2s steps(4) infinite; }
/* yours: the question, quieter, in the sans like "You asked" in the main feed */
.side-log .msg.you { opacity: .7; }
.side-log .msg.you .kind { color: var(--muted); }
.side-log .msg.you .seg-text { font-family: inherit; font-size: 14.5px; font-style: italic; color: var(--text); }
.side-log .msg.remark .seg-text { font-style: italic; }
.side-log .msg.remark .kind, .side-log .msg.poke .kind { color: var(--orchid); }
.side-log .msg.failed .seg-text { font-family: inherit; font-size: 13px; color: #fca5a5; }
/* the one he's on: lit glass, a glowing bar in the session's colour */
.side-log .msg.now {
  opacity: 1;
  background: linear-gradient(135deg, color-mix(in srgb, var(--prog, #7c3aed) 22%, rgba(30, 20, 50, .5)), rgba(20, 14, 36, .35));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--prog-hi, #c4b5fd) 18%, transparent), 0 14px 40px rgba(0, 0, 0, .3);
}
.side-log .msg.now::before { background: linear-gradient(var(--prog-hi, var(--mood)), var(--prog, var(--violet))); box-shadow: 0 0 10px var(--prog-hi, var(--mood)); }
.side-log .msg.now .seg-text { color: #fff; }
/* like a messaging app: the thread sits at the bottom, by the input, and grows upward
   (an auto top margin, rather than flex-end, so it still scrolls once it's taller than the panel) */
.side-log > :first-child { margin-top: auto; }
.side-log .side-empty { margin: auto 0 0; padding-bottom: 4px; }

/* "—— Words Aside ——": the thread's first line, centred between two fading gold rules; it scrolls away with the oldest messages */
.side-head { display: none; }
.side-log .side-title-row { display: flex; align-items: center; gap: 12px; padding: 6px 4px 10px; animation: none; }
.side-log .side-title-row::before, .side-log .side-title-row::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(233, 196, 126, .45)); }
.side-log .side-title-row::after { background: linear-gradient(90deg, rgba(233, 196, 126, .45), transparent); }
.side-log .side-title-row span { font-family: var(--caps); font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 16px rgba(233, 196, 126, .3); white-space: nowrap; }
.side-log .side-empty { margin: 0; }
/* the voice toggle sits in the input row, between the mic and send */
.side-ask #sideVoice { width: 46px; height: 46px; flex: none; background: rgba(255, 255, 255, .03); }
.side-ask #sideVoice[aria-pressed='true'] { color: var(--gold); border-color: rgba(233, 196, 126, .4); background: rgba(233, 196, 126, .08); opacity: 1; }
.side-ask #sideVoice[aria-pressed='false'] { opacity: .5; }
/* close: phones only, where the chat covers the screen */
.side-close { display: none; }
@media (max-width: 979px) {
  .side-close { display: grid; position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: 12px; z-index: 2; width: 38px; height: 38px; background: rgba(14, 10, 22, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .side-log { padding-top: 56px; }
}
@media (max-width: 400px) { .side-ask { gap: 6px; } .side-ask .icon-btn, .side-ask #sideVoice { width: 42px; height: 42px; } }
.side-log .msg.playable { cursor: pointer; }
/* a card that leads into the session (e.g. a deeper dive is ready) */
.side-log .msg.scribes .kind { color: var(--gold); }
.side-log .msg .link-hint { margin-left: auto; font-size: 11px; color: color-mix(in srgb, var(--prog-hi, var(--gold)) 75%, #fff); opacity: .8; }
.side-log .msg .link-hint::after { content: ' ↪'; }
/* words light up as he says them, like the session's current card */
.side-log .msg .karaoke .w { color: rgba(233, 227, 245, .45); transition: color .25s; }
.side-log .msg .karaoke .w.on { color: #fff; text-shadow: 0 0 18px color-mix(in srgb, var(--prog-hi, var(--mood)) 40%, transparent); }
.side-log .msg .live.waiting::before { animation: none; opacity: .5; box-shadow: none; }


/* each card's own progress bar: bottom right, set in from the corners, a tenth of the card's width
   (mirroring its label at the top left). Empty until it plays, filling as he says it, full once said. */
.seg, .side-log .msg { padding-bottom: 18px; }
.card-bar { position: absolute; right: 16px; bottom: 8px; width: 10%; min-width: 28px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(215, 210, 230, .16); pointer-events: none; }
.card-bar b { display: block; height: 100%; width: 0; border-radius: inherit; background: rgba(255, 255, 255, .85); }
.seg.past .card-bar b, .side-log .msg.said .card-bar b { width: 100%; background: rgba(255, 255, 255, .45); }
.saying .card-bar { background: rgba(215, 210, 230, .28); }
.saying .card-bar b { width: calc(var(--said, 0) * 100%); background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .6); }
body.no-card-bars .card-bar { display: none; }
/* softer, like the "Words Aside" rules: 1px, set further in from the corner, fading out at both ends */
.seg, .side-log .msg { padding-bottom: 22px; }
.card-bar {
  right: 26px; bottom: 12px; height: 1px; border-radius: 0; background: rgba(215, 210, 230, .22);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.card-bar b { border-radius: 0; }
.saying .card-bar { background: rgba(215, 210, 230, .3); }
.saying .card-bar b { box-shadow: none; }
/* a little longer; brightest on the card that plays next, quietest on the one being said */
.card-bar { width: 15%; min-width: 40px; }
.up-next .card-bar { background: rgba(235, 230, 245, .75); }
.saying .card-bar { background: rgba(215, 210, 230, .12); }
.saying .card-bar b { background: rgba(255, 255, 255, .45); }
/* smoother: the ends fade in along an eased curve (no sudden thickening), and the fill scales on the GPU
   (sub-pixel, no stepping) instead of changing width */
.card-bar {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .08) 6%, rgba(0, 0, 0, .25) 13%, rgba(0, 0, 0, .5) 21%, rgba(0, 0, 0, .78) 30%, #000 40%, #000 60%, rgba(0, 0, 0, .78) 70%, rgba(0, 0, 0, .5) 79%, rgba(0, 0, 0, .25) 87%, rgba(0, 0, 0, .08) 94%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .08) 6%, rgba(0, 0, 0, .25) 13%, rgba(0, 0, 0, .5) 21%, rgba(0, 0, 0, .78) 30%, #000 40%, #000 60%, rgba(0, 0, 0, .78) 70%, rgba(0, 0, 0, .5) 79%, rgba(0, 0, 0, .25) 87%, rgba(0, 0, 0, .08) 94%, rgba(0, 0, 0, 0) 100%);
}
.card-bar b { width: 100%; transform: scaleX(0); transform-origin: left center; will-change: transform; }
.seg.past .card-bar b, .side-log .msg.said .card-bar b { transform: scaleX(1); }
.saying .card-bar b { width: 100%; transform: scaleX(var(--said, 0)); }
/* only where it means something: the card being said and the one up next. Everything else, hidden */
.card-bar { opacity: 0; transition: opacity .4s ease; }
.saying .card-bar, .up-next .card-bar { opacity: 1; }

/* your cards in the side chat: on the right, like the session's digression cards. The line on the right edge,
   the label top right, the text still reading left-aligned */
.side-log .msg.you { align-self: flex-end; max-width: 86%; padding: 10px 18px 14px 14px; text-align: left; }
.side-log .msg.you::before { left: calc(100% - 6px); right: auto; }
.side-log .msg.you .seg-meta { flex-direction: row-reverse; justify-content: flex-start; }

/* =================================================================== right-click menu: a small pane of frosted glass */
.ctx-menu {
  position: fixed; z-index: 40; min-width: 210px; padding: 6px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(30, 22, 44, .62), rgba(14, 10, 22, .7));
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(233, 196, 126, .18); box-shadow: 0 18px 50px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
  animation: ctx-in .14s cubic-bezier(.2, .8, .2, 1); transform-origin: top left;
}
.ctx-menu.closing { opacity: 0; transition: opacity .12s; }
@keyframes ctx-in { from { opacity: 0; scale: .96; } }
.ctx-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; cursor: pointer;
  background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left;
}
.ctx-menu button svg { width: 16px; height: 16px; flex: none; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.6; }
.ctx-menu button small { margin-left: auto; padding-left: 12px; font-size: 11px; color: var(--faint); }
.ctx-menu button:hover, .ctx-menu button:focus-visible { outline: none; background: rgba(233, 196, 126, .1); }
.ctx-menu hr { margin: 4px 8px; border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(233, 196, 126, .25), transparent); }

/* the quote waiting above the input, and the quote on your card once asked */
.side-quote { position: relative; margin: 0 0 6px; padding: 8px 36px 8px 12px; border-radius: 12px; border-left: 2px solid var(--gold); background: rgba(14, 10, 22, .5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: rise .25s ease; }
.side-quote[hidden] { display: none; }
.side-quote .quote-label { display: block; font-family: var(--caps); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.side-quote p { margin: 3px 0 0; font-family: var(--display); font-style: italic; font-size: 14.5px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-quote .quote-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--faint); cursor: pointer; }
.side-quote .quote-x:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.side-quote .quote-x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 979px) { .side-quote { margin: 0 12px 6px; } }
.side-log .msg-quote {
  margin: 2px 0 6px; padding: 2px 0 2px 10px; border-left: 2px solid rgba(233, 196, 126, .45);
  font-family: var(--display); font-style: italic; font-size: 13.5px; line-height: 1.4; color: var(--faint);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* your words in the side chat: plain weight, not bold */
.side-log .msg.you .seg-text { font-weight: 400; }
/* notes about you sit on your side (right); the rest on his (left) */
.side-log .note { align-self: flex-start; text-align: left; }
.side-log .note.mine { align-self: flex-end; text-align: right; }
.side-log .msg.you .seg-text { color: rgba(233, 227, 245, .72); }

/* send: clear glass like the play button, accented in his current mood's colour (it shifts as his mood does) */
.side-ask .side-send {
  color: color-mix(in srgb, var(--mood) 85%, #fff);
  background: rgba(255, 255, 255, .015); backdrop-filter: blur(6px) saturate(1.2); -webkit-backdrop-filter: blur(6px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--mood) 45%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 12px color-mix(in srgb, var(--mood) 22%, transparent);
  transition: color .6s, border-color .6s, box-shadow .6s, background .2s;
}
.side-ask .side-send:hover { background: color-mix(in srgb, var(--mood) 10%, rgba(255, 255, 255, .03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 18px color-mix(in srgb, var(--mood) 35%, transparent); }
.side-ask .side-send svg { stroke: currentColor; }
/* quotes: a gold line on both sides */
.side-quote { border-right: 2px solid var(--gold); }
.side-log .msg-quote { border-right: 2px solid rgba(233, 196, 126, .45); padding-right: 10px; }

/* the rest of the input row in the same clear glass as send (and play/pause) */
.side-ask textarea, .side-ask #sideMic, .side-ask #sideVoice {
  background: rgba(255, 255, 255, .015); backdrop-filter: blur(6px) saturate(1.2); -webkit-backdrop-filter: blur(6px) saturate(1.2);
  border: 1px solid rgba(235, 225, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.side-ask textarea:focus { border-color: color-mix(in srgb, var(--mood) 45%, transparent); background: rgba(255, 255, 255, .03); }
.side-ask #sideMic:hover, .side-ask #sideVoice:hover { background: rgba(255, 255, 255, .05); }
.side-ask #sideVoice[aria-pressed='true'] { color: var(--gold); border-color: rgba(233, 196, 126, .35); background: rgba(233, 196, 126, .04); }

/* the ask box: grows with longer questions (up to ~5 lines, then scrolls), buttons stay on its bottom line */
.side-ask { align-items: flex-end; }
.side-ask textarea {
  flex: 1; min-width: 0; height: 46px; min-height: 46px; max-height: 132px; padding: 12px 16px; resize: none; overflow-y: auto;
  border-radius: 23px; color: var(--text); font: inherit; font-size: 16px; line-height: 1.35; scrollbar-width: thin;
  transition: border-radius .2s, border-color .2s, background .2s;
}
.side-ask textarea.tall { border-radius: 18px; }
.side-ask textarea:focus { outline: none; }
.side-ask textarea::placeholder { color: var(--faint); }
/* send, a step brighter than its neighbours */
.side-ask .side-send {
  color: color-mix(in srgb, var(--mood) 70%, #fff);
  background: color-mix(in srgb, var(--mood) 12%, rgba(255, 255, 255, .03));
  border-color: color-mix(in srgb, var(--mood) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 16px color-mix(in srgb, var(--mood) 34%, transparent);
}
.side-ask .side-send:hover { background: color-mix(in srgb, var(--mood) 20%, rgba(255, 255, 255, .04)); }
/* a long question: the box across the whole width, the buttons on a row beneath it (voice left; mic and send right) */
.side-ask.long { flex-wrap: wrap; row-gap: 8px; }
.side-ask.long textarea { order: -1; flex: 1 1 100%; max-height: 150px; }
.side-ask.long #sideMic { margin-left: auto; }
/* the bar's soft ends are optional (UI/UX → Soft ends): plain by default */
.card-bar { -webkit-mask-image: none; mask-image: none; }
body.card-bar-fade .card-bar {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .08) 6%, rgba(0, 0, 0, .25) 13%, rgba(0, 0, 0, .5) 21%, rgba(0, 0, 0, .78) 30%, #000 40%, #000 60%, rgba(0, 0, 0, .78) 70%, rgba(0, 0, 0, .5) 79%, rgba(0, 0, 0, .25) 87%, rgba(0, 0, 0, .08) 94%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .08) 6%, rgba(0, 0, 0, .25) 13%, rgba(0, 0, 0, .5) 21%, rgba(0, 0, 0, .78) 30%, #000 40%, #000 60%, rgba(0, 0, 0, .78) 70%, rgba(0, 0, 0, .5) 79%, rgba(0, 0, 0, .25) 87%, rgba(0, 0, 0, .08) 94%, rgba(0, 0, 0, 0) 100%);
}
/* a setting that belongs to the one above it: indented under it */
.toggle.sub-toggle { margin-left: 30px; }
.toggle.sub-toggle[hidden] { display: none; }
.toggle.sub-toggle b { font-size: 13px; }

/* under the title: a short brief on what this is (the book, the story he's on) */
.stage-brief {
  margin: 6px 0 0; max-width: 46ch; font-family: var(--display); font-style: italic; font-size: 15.5px; line-height: 1.4; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stage-brief[hidden] { display: none; }
/* his speaking state now lives in Words Aside, just above the input on the left */
.side-status { display: flex; align-items: center; gap: 7px; margin: 0 0 6px 4px; font-size: 12px; color: var(--muted); }
@media (max-width: 979px) { .side-status { margin: 0 16px 6px; } }


/* quick questions above the input: one row of small glass chips, quiet while he's thinking or speaking here */
.side-quick { display: flex; gap: 6px; margin: 0 0 8px; overflow-x: auto; scrollbar-width: none; transition: opacity .3s; }
.side-quick::-webkit-scrollbar { display: none; }
.side-quick .side-chip { flex: none; padding: 5px 11px; font-size: 12.5px; background: rgba(255, 255, 255, .015); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-color: rgba(235, 225, 255, .14); color: var(--muted); }
.side-quick .side-chip:hover:not(:disabled) { color: var(--text); border-color: color-mix(in srgb, var(--mood) 45%, transparent); background: color-mix(in srgb, var(--mood) 8%, transparent); }
.side-quick.quiet { opacity: .3; }
.side-quick .side-chip:disabled { cursor: default; }
@media (max-width: 979px) { .side-quick { margin: 0 12px 8px; } }
.side-quick { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; }

/* "Continue from…": picking a word on a card */
.picking { cursor: text; outline: 1px dashed rgba(233, 196, 126, .35); outline-offset: 2px; }
.picking .pw { color: rgba(233, 227, 245, .4); transition: color .12s; cursor: pointer; }
.picking .pw.pick-on { color: #fff; }
.picking .pw.pick-here { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(233, 196, 126, .6); text-underline-offset: 4px; }
/* its bar shows where it would start */
.picking .card-bar { opacity: 1; background: rgba(215, 210, 230, .25); }
.picking .card-bar b { transform: scaleX(var(--pick, 0)); background: var(--gold); }
body.no-card-bars .picking .card-bar { display: block; }
/* paused only while he speaks in Words Aside: the mood's glow stays, mixing with his gold */
body.side-hold[data-thought] .thought-glow { opacity: .6; }
body.side-hold[data-thought] .aura { background: radial-gradient(circle, color-mix(in srgb, var(--thought) 55%, transparent) 0%, transparent 62%); }
.side-quick .ramble-chip { display: inline-flex; align-items: center; gap: 5px; color: color-mix(in srgb, var(--orchid) 75%, var(--muted)); }
.side-quick .ramble-chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* phones (and anything the full row wouldn't fit within ~95% of): his face and the chat button share the first slot.
   The full eight-across row needs ~516px, so this starts below 545px rather than only on the narrowest phones,
   keeping the controls clear of rounded screen corners. The chat button stays a proper size and overlaps his face more. */
@media (max-width: 545px) {
  .controls { grid-template-columns: 60px 56px 48px 48px 40px 40px 40px; gap: 7px; }
  .controls .icon-btn { width: 40px; height: 40px; }
  .controls .play { width: 56px; height: 56px; }
  .icon-btn.vol-btn, .icon-btn.speed { width: 48px; font-size: 12px; }
  .icon-btn.vol-btn svg { display: none; }
  .controls > :not(.dock-head) { position: relative; z-index: 1; }
  .controls .dock-head { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; width: 48px; height: 48px; margin: -10px -2px 0 0; position: relative; z-index: 0; }
  .controls #askBtn { grid-column: 1; grid-row: 1; justify-self: start; align-self: end; width: 40px; height: 40px; margin: 0 0 -8px -4px; z-index: 2; }
}
@media (max-width: 440px) {
  .controls { grid-template-columns: 56px 52px 44px 44px 36px 36px 36px; gap: 5px; }
  .controls .icon-btn { width: 36px; height: 36px; }
  .controls .play { width: 52px; height: 52px; }
  .icon-btn.vol-btn, .icon-btn.speed { width: 44px; font-size: 11.5px; }
  .controls .dock-head { width: 46px; height: 46px; }
  .controls #askBtn { width: 40px; height: 40px; margin: 0 0 -8px -6px; }
}
@media (max-width: 370px) {
  .controls { grid-template-columns: 54px 50px 42px 42px 34px 34px 34px; gap: 4px; }
  .controls .icon-btn { width: 34px; height: 34px; }
  .controls #askBtn { width: 38px; height: 38px; }
}

/* phones: close sits in the input row, first, before the voice toggle; everything a size up for thumbs */
@media (max-width: 979px) {
  .side-close { position: static; display: grid; width: 50px; height: 50px; flex: none; background: rgba(255, 255, 255, .015); border: 1px solid rgba(235, 225, 255, .2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .side-close svg { width: 20px; height: 20px; }
  .side-log { padding-top: 16px; }
  .side-ask { gap: 7px; padding: 10px 12px calc(env(safe-area-inset-bottom) + 14px); }
  .side-ask .icon-btn, .side-ask #sideVoice { width: 50px; height: 50px; }
  .side-ask .icon-btn svg { width: 20px; height: 20px; }
  .side-ask textarea { min-height: 50px; height: 50px; padding: 14px 16px; border-radius: 25px; }
  .side-quick .side-chip { padding: 8px 14px; font-size: 14px; }
}
@media (max-width: 400px) {
  .side-ask { gap: 5px; padding-left: 8px; padding-right: 8px; }
  .side-ask .icon-btn, .side-ask #sideVoice, .side-close { width: 46px; height: 46px; }
  .side-ask textarea { min-height: 46px; height: 46px; padding: 12px 14px; }
}
@media (min-width: 980px) { .side-ask .side-close { display: none; } }
@media (max-width: 400px) { .side-ask textarea { white-space: nowrap; overflow-x: hidden; } .side-ask textarea:focus, .side-ask textarea.tall { white-space: normal; } }

/* speed and volume pop-ups: clear frosted glass, each in its own colour (volume teal, speed amber) */
#volPop { --tint: #2dd4bf; }
#speedPop { --tint: #f59e0b; }
#volPop, #speedPop {
  --tint-deep: color-mix(in srgb, var(--tint) 45%, #0b0716);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 6%, rgba(255, 255, 255, .03)), rgba(255, 255, 255, .01));
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--tint) 28%, rgba(235, 225, 255, .1));
  box-shadow: 0 14px 40px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 22px color-mix(in srgb, var(--tint) 10%, transparent);
}
#volPop output, #speedPop output { color: color-mix(in srgb, var(--tint) 45%, #fff); }
#volPop .speed-end, #speedPop .speed-end { color: color-mix(in srgb, var(--tint) 35%, var(--faint)); }
/* the buttons that open them carry a hint of the same colour */
#volBtn { color: color-mix(in srgb, #2dd4bf 55%, var(--lilac)); }
#speedBtn { color: color-mix(in srgb, #f59e0b 55%, var(--lilac)); }
#volBtn[aria-expanded='true'] { border-color: rgba(45, 212, 191, .45); background: rgba(45, 212, 191, .08); }
#speedBtn[aria-expanded='true'] { border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .08); }
/* closing: the reverse of its entrance */
.side-chat.closing { animation: side-out .26s cubic-bezier(.4, 0, 1, 1) forwards; pointer-events: none; }
@keyframes side-out { to { opacity: 0; translate: 0 14px; } }
@media (min-width: 980px) and (max-width: 1259px) { .side-chat.closing { animation-name: side-out-dock; } @keyframes side-out-dock { to { opacity: 0; translate: -24px 0; } } }
@media (min-width: 1260px) { .side-chat.closing { animation-name: side-out-float; } @keyframes side-out-float { to { opacity: 0; translate: 0 10px; } } }
@media (prefers-reduced-motion: reduce) { .side-chat.closing { animation: none; } }
/* a small name in the top-left corner of each pop-up, and the glass a touch clearer */
#volPop, #speedPop { position: absolute; background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 4%, rgba(255, 255, 255, .015)), rgba(255, 255, 255, .005)); }
#volPop::before, #speedPop::before {
  position: absolute; top: 9px; left: 14px; font-family: var(--caps); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--tint) 55%, var(--faint)); pointer-events: none;
}
#volPop::before { content: 'Volume'; }
#speedPop::before { content: 'Speed'; }
/* archive cards: clearer glass, the program's colour only a whisper */
#historySheet .history li.entry {
  background: linear-gradient(100deg, color-mix(in srgb, var(--pc) 4%, rgba(255, 255, 255, .012)), rgba(255, 255, 255, .008) 55%);
  border-color: color-mix(in srgb, var(--pc) 13%, rgba(255, 255, 255, .05));
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
#historySheet .history li.entry:hover { background: linear-gradient(100deg, color-mix(in srgb, var(--pc) 8%, rgba(255, 255, 255, .02)), rgba(255, 255, 255, .012) 60%); }
#historySheet .history .glyph { background: color-mix(in srgb, var(--pc) 7%, rgba(0, 0, 0, .1)); }
#historySheet .history .row-actions .icon-btn:not(.replay) { background: rgba(255, 255, 255, .015); }
/* the quick actions scroll sideways: a hairline scrollbar, barely there until you hover the row */
.side-quick { scrollbar-width: thin; scrollbar-color: transparent transparent; padding-bottom: 6px; transition: opacity .3s, scrollbar-color .3s; }
.side-quick:hover { scrollbar-color: rgba(235, 225, 255, .22) transparent; }
.side-quick::-webkit-scrollbar { display: block; height: 3px; }
.side-quick::-webkit-scrollbar-track { background: transparent; }
.side-quick::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.side-quick:hover::-webkit-scrollbar-thumb { background: rgba(235, 225, 255, .22); }
.side-quick::-webkit-scrollbar-button { display: none; }
/* the fade on the right only while there's more to see */
.side-quick.at-end { -webkit-mask-image: none; mask-image: none; }
/* computers: the quick actions appear when the pointer comes near Words Aside (or there's a question being typed) */
@media (hover: hover) and (pointer: fine) {
  .side-quick { opacity: 0; translate: 0 4px; pointer-events: none; transition: opacity .3s, translate .3s; }
  .side-chat.near .side-quick, .side-chat:has(#sideInput:not(:placeholder-shown)) .side-quick { opacity: 1; translate: 0 0; pointer-events: auto; }
  .side-chat.near .side-quick.quiet, .side-chat:has(#sideInput:not(:placeholder-shown)) .side-quick.quiet { opacity: .3; }
}

/* phones: a bigger chat button (near the play button's size) over the lower left of his face; his head
   slides a touch right, into the gap before the play button */
@media (max-width: 545px) {
  .controls { grid-template-columns: 64px 56px 48px 48px 40px 40px 40px; gap: 6px; }
  .controls #askBtn { width: 50px; height: 50px; margin: 0 0 -10px -8px; }
  .controls #askBtn svg { width: 22px; height: 22px; }
  .controls .dock-head { margin: -12px -10px 0 0; }
}
@media (max-width: 440px) {
  .controls { grid-template-columns: 60px 52px 44px 44px 36px 36px 36px; gap: 4px; }
  .controls #askBtn { width: 48px; height: 48px; margin: 0 0 -10px -8px; }
  .controls #askBtn svg { width: 21px; height: 21px; }
  .controls .dock-head { margin: -12px -11px 0 0; }
}
@media (max-width: 370px) {
  .controls { grid-template-columns: 56px 50px 42px 42px 34px 34px 34px; gap: 3px; }
  .controls #askBtn { width: 44px; height: 44px; }
}
@media (max-width: 545px) { .controls .dock-head { margin-right: -5px; } }
@media (max-width: 440px) { .controls .dock-head { margin-right: -4px; } }
@media (max-width: 370px) { .controls .dock-head { margin-right: -3px; } }
.side-log .msg .seg-text.thinking { color: rgba(233, 227, 245, .62); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.side-log .msg.pending { opacity: .9; }
/* the mood sounds slider, compact, in the gear menu */
.gm-dial .dial { padding: 2px 2px 0; --tint: #e9c47e; --tint-deep: color-mix(in srgb, #e9c47e 40%, #1a0f05); }
.gm-dial .dial .label-row .label { font-size: 13px; }
.gm-dial .dial .label-row .value { font-size: 12px; color: var(--muted); }
.gm-dial .dial .ticks { font-size: 10px; }
.gm-dial .dial .tip { right: 0; left: auto; }
/* the sleep timer as a slider: moonlit blue-violet, the minutes beside it */
.gm-range { --tint: #8b9cf6; --tint-deep: color-mix(in srgb, #8b9cf6 40%, #0b0716); display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.gm-range input[type='range'] { flex: 1; min-width: 0; }
.gm-range output { flex: none; min-width: 3.6em; text-align: right; font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--tint) 55%, #fff); font-variant-numeric: tabular-nums; }

/* =================================================================== gear menu: clear frosted glass, like the speed and volume pop-ups */
.gear-menu {
  padding: 10px; gap: 6px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01));
  backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid rgba(235, 225, 255, .14);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .09);
}
/* each section its own soft pane of glass instead of a ruled line */
.gear-menu .gm-block {
  padding: 10px 12px 12px; border: 1px solid rgba(255, 255, 255, .05); border-radius: 14px; margin: 0;
  background: rgba(255, 255, 255, .025);
}
.gear-menu .gm-label { font-size: 12px; letter-spacing: .02em; color: var(--muted); }
.gear-menu .gm-label em { color: color-mix(in srgb, #8b9cf6 60%, #fff); }
.gear-menu .gm-block:has(#sleepRange) .gm-label svg { color: #a5b4fc; }
.gear-menu .gm-dial .dial .label-row .label { font-size: 12px; color: var(--muted); }
/* the rows: quiet until hovered, an icon tile on the left */
.gear-menu .gm-item { padding: 9px 10px; border-radius: 14px; gap: 12px; font-size: 14px; }
.gear-menu .gm-item:hover { background: rgba(255, 255, 255, .06); }
.gear-menu .gm-item > svg:first-child {
  width: 32px; height: 32px; padding: 7px; border-radius: 10px; flex: none;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06);
}
#skipTangents > svg:first-child { color: var(--orchid); }
#personalityBtn > svg:first-child { color: #f472b6; }
.gear-menu .gm-item small { color: var(--faint); }
/* the switch, like the settings toggles */
.gear-menu .gm-switch { width: 38px; height: 22px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.gear-menu .gm-switch::after { top: 4px; left: 4px; background: linear-gradient(180deg, #d9d6e2, #9e9aab); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); transition: translate .28s cubic-bezier(.3, 1.4, .5, 1); }
.gear-menu .gm-item[aria-pressed='true'] .gm-switch { background: linear-gradient(90deg, color-mix(in srgb, var(--orchid) 40%, #12091a), var(--orchid)); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3), 0 0 10px color-mix(in srgb, var(--orchid) 35%, transparent); }
.gear-menu .gm-item[aria-pressed='true'] .gm-switch::after { translate: 16px 0; background: linear-gradient(180deg, #fff, #e6dcf5); }
#sessionBtn[aria-expanded='true'] { background: rgba(255, 255, 255, .08); border-color: rgba(235, 225, 255, .3); }

/* =================================================================== notifications: a larger glass panel, top left, above Words Aside */
.toast {
  left: 16px; right: auto; top: calc(env(safe-area-inset-top) + 16px); translate: 0 -14px;
  width: min(380px, calc(100vw - 32px)); max-width: none; padding: 14px 18px 14px 20px; border-radius: 10px;
  text-align: left; font-size: 15px; line-height: 1.45; color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid rgba(235, 225, 255, .16);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .09);
}
/* a thin gold bar down its left edge, like the cards */
.toast::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 0 2px 2px 0; background: var(--gold); box-shadow: 0 0 8px rgba(233, 196, 126, .6); }
.toast.show { translate: 0 0; opacity: 1; }
.toast.err { border-color: rgba(251, 113, 133, .35); }
.toast.err::before { background: #fb7185; box-shadow: 0 0 8px rgba(251, 113, 133, .6); }
/* lined up with Words Aside: over its panel (docked) or its column (floating) */
@media (min-width: 980px) and (max-width: 1259px) { .toast { left: 16px; width: 328px; } }
@media (min-width: 1260px) {
  .toast { --gap: calc((100vw - 580px) / 2); --cw: min(420px, calc(var(--gap) - 72px)); left: calc((var(--gap) - var(--cw)) / 2); width: var(--cw); top: 18px; }
}
.meta-date { white-space: nowrap; }
/* what you're doing, on the right of the status line, above the send button */
.side-status .side-activity { margin-left: auto; padding-right: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

/* the activity by the send button: a small gold diamond after it, and a glass picker above */
.side-status { position: relative; }
.side-status .side-activity {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 3px 6px 3px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); transition: color .2s, background .2s;
}
.side-status .side-activity:hover, .side-status .side-activity[aria-expanded='true'] { color: var(--text); background: rgba(255, 255, 255, .05); }
.act-diamond { width: 6px; height: 6px; rotate: 45deg; border: 1.2px solid var(--gold); box-shadow: 0 0 8px rgba(233, 196, 126, .55); flex: none; transition: background .2s; }
.side-activity[aria-expanded='true'] .act-diamond { background: var(--gold); }
.act-pop {
  position: relative; margin: 0 0 8px; padding: 12px; border-radius: 14px; animation: rise .2s ease;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid rgba(235, 225, 255, .14); box-shadow: 0 14px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.act-pop[hidden] { display: none; }
.act-pop .act-title { display: block; margin-bottom: 8px; font-family: var(--caps); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, #4ade80 60%, var(--gold)); }
.act-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.act-chip {
  padding: 6px 12px; border-radius: 999px; cursor: pointer; font-family: var(--display); font-size: 15px; color: var(--muted);
  background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .08); transition: color .2s, border-color .2s, background .2s;
}
.act-chip:hover { color: var(--text); border-color: rgba(74, 222, 128, .35); }
.act-chip[aria-checked='true'] { color: #fff; border-color: rgba(74, 222, 128, .55); background: rgba(74, 222, 128, .12); box-shadow: 0 0 12px rgba(74, 222, 128, .18); }
.act-input {
  width: 100%; margin-top: 8px; padding: 8px 12px; border-radius: 10px; font: inherit; font-size: 14px; color: var(--text);
  background: rgba(255, 255, 255, .02); border: 1px dashed rgba(235, 225, 255, .18);
}
.act-input:focus { outline: none; border-style: solid; border-color: rgba(74, 222, 128, .45); }
.act-input.on { border-style: solid; border-color: rgba(74, 222, 128, .45); }
@media (max-width: 979px) { .act-pop { margin: 0 12px 8px; } }
/* computers: the activity, like the quick actions, shows only when the pointer is near Words Aside (or its picker is open) */
@media (hover: hover) and (pointer: fine) {
  .side-status .side-activity { opacity: 0; pointer-events: none; transition: opacity .3s, color .2s, background .2s; }
  .side-chat.near .side-status .side-activity, .side-status .side-activity[aria-expanded='true'] { opacity: 1; pointer-events: auto; }
}

/* Words Aside's own scrollbar: a short white line on its left, centred, ends faded; the native one hidden */
.side-log { scrollbar-width: none; }
.side-log::-webkit-scrollbar { display: none; }
.side-scroll {
  position: absolute; left: -14px; top: 50%; translate: 0 -50%; width: 10px; height: min(34%, 260px); z-index: 2; cursor: pointer;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  opacity: .45; transition: opacity .3s;
}
.side-scroll::before { content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .14); }
.side-scroll i { position: absolute; left: 3px; top: 0; width: 3px; border-radius: 3px; background: rgba(255, 255, 255, .85); box-shadow: 0 0 6px rgba(255, 255, 255, .4); }
.side-scroll.none { display: none; }
.side-chat:hover .side-scroll, .side-scroll.active, .side-scroll.dragging { opacity: .9; }
@media (max-width: 1259px) { .side-scroll { left: 2px; } }

/* Words Aside scrollbar, game-style: a fine etched rail with notches, and a gilded gem of a thumb */
.side-scroll { width: 14px; opacity: 0; transition: opacity .35s; }
.side-scroll::before {
  left: 6px; width: 1px;
  background:
    repeating-linear-gradient(transparent 0 11px, rgba(233, 196, 126, .45) 11px 12px) 0 0 / 5px 100% no-repeat,
    linear-gradient(rgba(233, 196, 126, .1), rgba(255, 255, 255, .22) 50%, rgba(233, 196, 126, .1));
  box-shadow: 0 0 4px rgba(233, 196, 126, .15);
}
/* the notches: tiny ticks either side of the rail */
.side-scroll::after {
  content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 5px; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 23px, rgba(233, 196, 126, .35) 23px 24px);
}
.side-scroll i {
  left: 4px; width: 5px; border-radius: 3px;
  background: linear-gradient(180deg, #f6e6c0, #e9c47e 30%, #b98d45 70%, #f2dca8);
  box-shadow: 0 0 0 1px rgba(20, 12, 30, .6), 0 0 10px rgba(233, 196, 126, .55);
  transition: box-shadow .2s;
}
/* little diamond tips at each end of the thumb */
.side-scroll i::before, .side-scroll i::after {
  content: ''; position: absolute; left: 50%; width: 5px; height: 5px; translate: -50% 0; rotate: 45deg;
  background: #f6e6c0; box-shadow: 0 0 6px rgba(233, 196, 126, .8);
}
.side-scroll i::before { top: -4px; }
.side-scroll i::after { bottom: -4px; }
.side-scroll.dragging i, .side-scroll:hover i { box-shadow: 0 0 0 1px rgba(20, 12, 30, .6), 0 0 16px rgba(233, 196, 126, .85); }
/* hidden until you're near Words Aside (or scrolling it) */
.side-chat.near .side-scroll, .side-scroll.active, .side-scroll.dragging { opacity: 1; }
.side-chat:hover .side-scroll { opacity: 1; }
@media (hover: none) { .side-chat:hover .side-scroll { opacity: 0; } .side-scroll.active, .side-scroll.dragging { opacity: 1; } }
/* the thumb, simpler: a thin bright line whose ends taper away smoothly */
.side-scroll i {
  left: 5px; width: 3px; border-radius: 0;
  background: linear-gradient(180deg, transparent, rgba(246, 230, 192, .55) 22%, #f6e6c0 50%, rgba(246, 230, 192, .55) 78%, transparent);
  box-shadow: none; filter: drop-shadow(0 0 4px rgba(233, 196, 126, .55));
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(50% 50% at 50% 50%, #000 40%, transparent 100%);
}
.side-scroll i::before, .side-scroll i::after { content: none; }
.side-scroll.dragging i, .side-scroll:hover i { box-shadow: none; filter: drop-shadow(0 0 7px rgba(233, 196, 126, .85)); }
/* archive: the program icon tile and the replay button, clearer glass */
#historySheet .history .glyph { background: color-mix(in srgb, var(--pc) 4%, rgba(255, 255, 255, .01)); border-color: color-mix(in srgb, var(--pc) 14%, transparent); }
#historySheet .history .glyph svg { opacity: .8; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--pc) 30%, transparent)); }
#historySheet .history .icon-btn.replay { background: color-mix(in srgb, var(--pc) 5%, rgba(255, 255, 255, .01)); border-color: color-mix(in srgb, var(--pc) 22%, transparent); color: color-mix(in srgb, var(--pc) 75%, #fff); }
#historySheet .history .icon-btn.replay:hover { background: color-mix(in srgb, var(--pc) 14%, rgba(255, 255, 255, .02)); border-color: color-mix(in srgb, var(--pc) 45%, transparent); }
.gm-item b { font-weight: 500; }
#extrasBtn > svg:first-child { color: #7dd3fc; }

/* a reading's header: "Title, Author", the shelf it's from, then a short paragraph about the book */
#sessionTitle .title-author { font-style: italic; font-weight: 400; color: color-mix(in srgb, var(--lilac) 60%, var(--muted)); font-size: .78em; }
.stage-shelf { margin: 4px 0 0; font-family: var(--caps); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--gold) 70%, var(--muted)); }
.stage-shelf[hidden] { display: none; }
.stage-brief.about { max-width: 58ch; margin-top: 8px; font-size: 15px; line-height: 1.5; -webkit-line-clamp: 6; }

/* a briefing's overview, above "Now:": its topics in gold caps, then what's ahead */
.stage-digest { margin: 8px 0 2px; max-width: 58ch; }
.stage-digest[hidden] { display: none; }
.digest-topics { margin: 0; font-family: var(--caps); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--gold) 70%, var(--muted)); }
.digest-text { margin: 5px 0 0; font-family: var(--display); font-style: italic; font-size: 15px; line-height: 1.5; color: var(--muted); }
.digest-text[hidden] { display: none; }

/* the topic line with the card count and download on the same row, on the right */
.stage-head > div:first-child { flex: 1; min-width: 0; }
.topic-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; min-height: 34px; }
.topic-row .stage-shelf { flex: 1; min-width: 0; margin: 0; }
.topic-row .stage-actions { margin-left: auto; }
.card-count { display: inline-flex; align-items: baseline; gap: 5px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.card-count i { font-style: normal; font-family: var(--display), Georgia, serif; font-size: 17px; line-height: 1; color: var(--gold); opacity: .85; }
.card-count b { font-weight: 500; color: var(--text); }
/* download: clear glass */
#downloadBtn {
  width: 34px; height: 34px; color: var(--muted);
  background: rgba(255, 255, 255, .02); border: 1px solid rgba(235, 225, 255, .16);
  backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); transition: color .2s, background .2s, border-color .2s;
}
#downloadBtn:hover { color: var(--text); background: rgba(255, 255, 255, .06); border-color: rgba(233, 196, 126, .4); }
#downloadBtn svg { width: 16px; height: 16px; }
/* the docket, beside download, the same clear glass */
#docketBtn {
  width: 34px; height: 34px; color: var(--muted);
  background: rgba(255, 255, 255, .02); border: 1px solid rgba(235, 225, 255, .16);
  backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); transition: color .2s, background .2s, border-color .2s;
}
#docketBtn:hover { color: var(--text); background: rgba(255, 255, 255, .06); border-color: rgba(233, 196, 126, .4); }
#docketBtn svg { width: 16px; height: 16px; }
#docketBtn[hidden] { display: none; }
/* the heading with the card count, download and docket on its right */
.title-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.title-row h2 { flex: 1; min-width: 0; margin: 0; }
.title-row .stage-actions { margin-left: auto; align-self: center; }
.topic-row { min-height: 0; }
.topic-row:has(.stage-shelf:empty) { display: none; }

/* account: a simple button by the archive, and a small glass card under it */
.account-wrap { position: relative; }
.account-pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 12; width: 260px; padding: 14px; border-radius: 14px; animation: rise .18s ease;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid rgba(235, 225, 255, .14); box-shadow: 0 16px 44px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.account-pop[hidden] { display: none; }
.acc-head { display: flex; align-items: center; gap: 10px; }
.acc-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); background: rgba(233, 196, 126, .08); border: 1px solid rgba(233, 196, 126, .3); }
.acc-avatar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.acc-head b { display: block; font-family: var(--display); font-size: 17px; font-weight: 500; }
.acc-head small { font-size: 11.5px; color: var(--faint); }
.account-pop p { margin: 10px 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.acc-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.acc-item:hover { background: rgba(255, 255, 255, .06); border-color: rgba(233, 196, 126, .3); }
.acc-item svg { width: 15px; height: 15px; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.6; }
/* the top bar's buttons (settings, account, archive): clear glass */
.top-actions > .icon-btn, .top-actions .account-wrap > .icon-btn {
  background: rgba(255, 255, 255, .02); border: 1px solid rgba(235, 225, 255, .14);
  backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); transition: color .2s, background .2s, border-color .2s;
}
.top-actions > .icon-btn:hover, .top-actions .account-wrap > .icon-btn:hover, .top-actions .icon-btn[aria-expanded='true'] {
  background: rgba(255, 255, 255, .06); border-color: rgba(233, 196, 126, .4);
}
.news-bar #chapterCount i { font-size: 14px; translate: 0 0; }

/* gear menu: darker glass */
.gear-menu {
  background: linear-gradient(180deg, rgba(16, 11, 26, .72), rgba(10, 7, 16, .8));
  border-color: rgba(235, 225, 255, .12);
}
.gear-menu .gm-block { background: rgba(255, 255, 255, .03); }
/* its switches: slim pill tracks, a bright knob that glides, the track lit in the row's own colour when on */
#skipTangents { --sw: #e879f9; }
#extrasBtn { --sw: #7dd3fc; }
.gear-menu .gm-switch {
  width: 40px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background .25s, box-shadow .25s;
}
.gear-menu .gm-switch::after {
  top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(235, 230, 245, .7); box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  transition: translate .3s cubic-bezier(.3, 1.3, .5, 1), background .25s, width .2s;
}
.gear-menu .gm-item:active .gm-switch::after { width: 20px; }
.gear-menu .gm-item[aria-pressed='true'] .gm-switch {
  background: color-mix(in srgb, var(--sw, var(--orchid)) 30%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sw, var(--orchid)) 60%, transparent), 0 0 12px color-mix(in srgb, var(--sw, var(--orchid)) 28%, transparent);
}
.gear-menu .gm-item[aria-pressed='true'] .gm-switch::after { translate: 18px 0; background: #fff; box-shadow: 0 0 8px color-mix(in srgb, var(--sw, var(--orchid)) 80%, transparent), 0 1px 3px rgba(0, 0, 0, .4); }
.gear-menu .gm-item[aria-pressed='true']:active .gm-switch::after { translate: 14px 0; }
/* deep-dive rows: grab to drag sideways on a computer */
@media (hover: hover) and (pointer: fine) { #prompter .seg-row.branched { cursor: grab; } #prompter .seg-row.branched.dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; } }
#prompter .seg-row.branched.dragging { scroll-snap-type: none; }
/* computers: no snapping on the deep-dive rows, so they glide to a centred card, and the wheel and drags stay where you leave them */
@media (hover: hover) and (pointer: fine) { #prompter .seg-row.branched { scroll-snap-type: none; } }

/* deep-dive rows: their own scrollbar beneath, like Words Aside's (the browser's one hidden) */
#prompter .seg-row.branched { scrollbar-width: none; }
#prompter .seg-row.branched::-webkit-scrollbar { display: none; }
.row-bar {
  position: relative; width: min(46%, 280px); height: 14px; margin: -4px auto 8px; cursor: pointer;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  opacity: .55; transition: opacity .3s;
}
.row-bar.none { display: none; }
.row-bar::before {
  content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 1px;
  background:
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(233, 196, 126, .45) 11px 12px) 0 0 / 100% 5px no-repeat,
    linear-gradient(90deg, rgba(233, 196, 126, .1), rgba(255, 255, 255, .22) 50%, rgba(233, 196, 126, .1));
  box-shadow: 0 0 4px rgba(233, 196, 126, .15);
}
.row-bar::after { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 5px; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 23px, rgba(233, 196, 126, .35) 23px 24px); }
.row-bar i {
  position: absolute; left: 0; top: 5px; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(246, 230, 192, .55) 22%, #f6e6c0 50%, rgba(246, 230, 192, .55) 78%, transparent);
  filter: drop-shadow(0 0 4px rgba(233, 196, 126, .55));
}
.seg-row.branched:hover + .row-bar, .row-bar:hover, .row-bar.dragging { opacity: 1; }
.row-bar:hover i, .row-bar.dragging i { filter: drop-shadow(0 0 7px rgba(233, 196, 126, .85)); }
/* the deep-dive scrollbar: as wide as the transcript, and a warmer, quieter position line */
.row-bar { width: 100%; margin: -4px 0 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.row-bar i {
  background: linear-gradient(90deg, transparent, rgba(220, 180, 110, .45) 22%, rgba(233, 196, 126, .85) 50%, rgba(220, 180, 110, .45) 78%, transparent);
  filter: drop-shadow(0 0 3px rgba(233, 196, 126, .4));
}
.row-bar:hover i, .row-bar.dragging i { filter: drop-shadow(0 0 6px rgba(233, 196, 126, .65)); }
/* while a deep-dive row glides (wheel, drag): no blur behind its cards, and a steady layer, so it stays smooth */
#prompter .seg-row.branched { will-change: scroll-position; }
#prompter .seg-row.gliding .seg, #prompter .seg-row.dragging .seg { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#prompter .seg-row.gliding .seg.now, #prompter .seg-row.dragging .seg.now { background: linear-gradient(135deg, rgba(40, 28, 70, .8), rgba(20, 14, 36, .65)); }

/* =================================================================== the page's scrollbar, like Words Aside's */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
.page-scroll {
  position: fixed; right: 4px; top: 50%; translate: 0 -50%; z-index: 7; width: 14px; height: min(56vh, 520px); cursor: pointer;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  opacity: .4; transition: opacity .4s;
}
.page-scroll.none { display: none; }
.page-scroll::before {
  content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px;
  background:
    repeating-linear-gradient(transparent 0 11px, rgba(233, 196, 126, .45) 11px 12px) 0 0 / 5px 100% no-repeat,
    linear-gradient(rgba(233, 196, 126, .1), rgba(255, 255, 255, .22) 50%, rgba(233, 196, 126, .1));
}
.page-scroll::after { content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 5px; pointer-events: none; background: repeating-linear-gradient(transparent 0 23px, rgba(233, 196, 126, .35) 23px 24px); }
.page-scroll i {
  position: absolute; left: 5px; top: 0; width: 3px;
  background: linear-gradient(180deg, transparent, rgba(220, 180, 110, .45) 22%, rgba(233, 196, 126, .85) 50%, rgba(220, 180, 110, .45) 78%, transparent);
  filter: drop-shadow(0 0 3px rgba(233, 196, 126, .4));
}
.page-scroll:hover, .page-scroll.active, .page-scroll.dragging { opacity: 1; }
.page-scroll:hover i, .page-scroll.dragging i { filter: drop-shadow(0 0 6px rgba(233, 196, 126, .7)); }
@media (hover: none) { .page-scroll { opacity: 0; } .page-scroll.active, .page-scroll.dragging { opacity: 1; } }
/* the page scrollbar: the full height of the screen, in silver */
.page-scroll {
  top: 0; translate: none; height: 100vh; height: 100dvh;
  -webkit-mask-image: linear-gradient(transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(transparent, #000 4%, #000 96%, transparent);
}
.page-scroll::before {
  background:
    repeating-linear-gradient(transparent 0 11px, rgba(210, 214, 226, .4) 11px 12px) 0 0 / 5px 100% no-repeat,
    linear-gradient(rgba(200, 205, 220, .12), rgba(235, 238, 245, .28) 50%, rgba(200, 205, 220, .12));
}
.page-scroll::after { background: repeating-linear-gradient(transparent 0 23px, rgba(210, 214, 226, .32) 23px 24px); }
.page-scroll i {
  background: linear-gradient(180deg, transparent, rgba(200, 206, 222, .45) 22%, rgba(236, 239, 247, .9) 50%, rgba(200, 206, 222, .45) 78%, transparent);
  filter: drop-shadow(0 0 3px rgba(220, 226, 240, .4));
}
.page-scroll:hover i, .page-scroll.dragging i { filter: drop-shadow(0 0 6px rgba(225, 230, 245, .7)); }
/* hugging the edge: the rail ~3px from the screen's right side */
.page-scroll { right: 0; }
.page-scroll::before { left: 10px; }
.page-scroll::after { left: 8px; }
.page-scroll i { left: 9px; }

/* the page scrollbar's line: a softer silver */
.page-scroll i { background: linear-gradient(180deg, transparent, rgba(190, 196, 212, .35) 22%, rgba(215, 220, 232, .65) 50%, rgba(190, 196, 212, .35) 78%, transparent); filter: drop-shadow(0 0 3px rgba(210, 216, 232, .3)); }

/* the same silver scrollbar on menus and lists (the browser's own hidden there) */
.silver-scrolled { scrollbar-width: none; }
.silver-scrolled::-webkit-scrollbar { display: none; }
.ui-scroll {
  position: fixed; z-index: 30; width: 14px; cursor: pointer; opacity: .4; transition: opacity .4s;
  -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent);
}
.ui-scroll.none { display: none; }
.ui-scroll::before {
  content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px;
  background:
    repeating-linear-gradient(transparent 0 11px, rgba(210, 214, 226, .4) 11px 12px) 0 0 / 5px 100% no-repeat,
    linear-gradient(rgba(200, 205, 220, .12), rgba(235, 238, 245, .28) 50%, rgba(200, 205, 220, .12));
}
.ui-scroll::after { content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 5px; pointer-events: none; background: repeating-linear-gradient(transparent 0 23px, rgba(210, 214, 226, .3) 23px 24px); }
.ui-scroll i { position: absolute; left: 5px; top: 0; width: 3px; background: linear-gradient(180deg, transparent, rgba(190, 196, 212, .35) 22%, rgba(215, 220, 232, .65) 50%, rgba(190, 196, 212, .35) 78%, transparent); filter: drop-shadow(0 0 3px rgba(210, 216, 232, .3)); }
.ui-scroll.active, .ui-scroll.dragging { opacity: 1; }
@media (hover: none) { .ui-scroll { opacity: 0; } .ui-scroll.active, .ui-scroll.dragging { opacity: 1; } }

/* =================================================================== Article images: a card beside each story */
#prompter .seg-row .cell.media-cell { flex: 0 0 min(300px, 62%); align-self: stretch; }
.media-card {
  position: relative; margin: 0; width: 100%; height: 100%; min-height: 120px; overflow: hidden; border-radius: 16px; cursor: pointer;
  background: rgba(255, 255, 255, .02); border: 1px solid rgba(235, 225, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: border-color .2s, transform .2s;
}
.media-card:hover { border-color: rgba(233, 196, 126, .4); }
.media-card.loading { display: grid; place-items: center; cursor: default; font-size: 12px; font-style: italic; color: var(--faint); background: linear-gradient(100deg, rgba(255, 255, 255, .02) 30%, rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, .02) 70%) 0 0 / 200% 100%; animation: media-shimmer 1.6s linear infinite; }
@keyframes media-shimmer { to { background-position: -200% 0; } }
.media-card.image img { display: block; width: 100%; height: 100%; min-height: 120px; max-height: 220px; object-fit: cover; filter: saturate(.92) brightness(.9); }
.media-card.image figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 18px 12px 9px;
  background: linear-gradient(transparent, rgba(8, 5, 14, .82)); font-size: 11px; color: rgba(235, 230, 245, .85);
}
.media-site { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .02em; }
.media-open { flex: none; color: var(--gold); opacity: .8; }
.media-card.quote { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px 16px 12px 20px; }
.media-card.quote::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--gold); opacity: .6; border-radius: 0 2px 2px 0; }
.media-mark { position: absolute; top: -6px; right: 12px; font-family: var(--display); font-size: 64px; line-height: 1; color: rgba(233, 196, 126, .18); }
.media-card blockquote { margin: 0; font-family: var(--display); font-style: italic; font-size: 15.5px; line-height: 1.45; color: rgba(233, 227, 245, .85); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.media-card.quote figcaption { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--faint); }
/* the ask box: his serif, a touch smaller (Cormorant at 17px reads smaller than the sans at 16, and stays at 16+ so phones don't zoom in) */
.side-ask textarea { font-family: var(--display); font-size: 17px; letter-spacing: .01em; height: 42px; min-height: 42px; padding: 10px 16px; line-height: 1.3; }
.side-ask textarea::placeholder { font-style: italic; }
@media (max-width: 979px) { .side-ask textarea { height: 46px; min-height: 46px; padding: 12px 16px; } }
/* the picture: as tall as its row (the card beside it), as wide as its shape asks (within limits), and half see-through */
#prompter .seg-row .cell.media-cell:has(.media-card.image) { flex: 0 0 auto; }
.media-card.image { width: auto; height: 100%; min-height: 0; display: flex; }
.media-card.image img { height: 100%; width: auto; min-width: 200px; max-width: min(520px, 70vw); min-height: 0; max-height: none; object-fit: cover; opacity: .5; transition: opacity .3s; }
.media-card.image:hover img { opacity: .8; }
/* (the picture is laid over its cell, so only the story card sets the row's height) */
#prompter .seg-row .cell.media-cell:has(.media-card.image) { flex: 0 0 auto; width: 260px; position: relative; }
.media-card.image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.media-card.image img { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; max-width: none; object-fit: cover; }
/* (the pictures' opacity is set from the script: half while their story plays, faint otherwise, fading between) */
.media-card.image img { opacity: 0; transition: opacity .9s ease; }
.media-card.image:hover img { opacity: .8 !important; transition-duration: .3s; }
/* the top bar's centre changes topic with a soft fade */
#rxTitle.swap { animation: rx-swap .6s ease; }
@keyframes rx-swap { from { opacity: 0; translate: 0 3px; } }

/* =================================================================== the account window, dressed like the archive */
#accountSheet {
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(233, 196, 126, .08), transparent 70%),
    linear-gradient(180deg, rgba(26, 18, 36, .4), rgba(12, 8, 18, .48));
  backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3);
  border-color: rgba(233, 196, 126, .22);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  max-width: 440px;
}
#accountSheet .sheet-head { text-align: center; padding-inline: 48px; }
#accountSheet .sheet-emblem {
  display: block; width: 30px; height: 30px; margin: 2px auto 4px; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.5;
  filter: drop-shadow(0 0 10px rgba(233, 196, 126, .45)); animation: emblem-float 4.5s ease-in-out infinite;
}
#accountSheet .sheet-head h3 { font-family: var(--caps); font-weight: 600; font-size: 21px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 22px rgba(233, 196, 126, .25); margin-top: 0; }
#accountSheet .sheet-head .fine { font-family: var(--display); font-style: italic; font-size: 15px; }
.acct-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.acct-form .input { background: rgba(255, 255, 255, .025); border: 1px solid rgba(235, 225, 255, .14); backdrop-filter: blur(6px); }
.acct-form .input:focus { border-color: rgba(233, 196, 126, .45); outline: none; }
.acct-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.acct-btn {
  height: 44px; border-radius: 12px; cursor: pointer; font-family: var(--caps); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text); background: rgba(255, 255, 255, .03); border: 1px solid rgba(235, 225, 255, .16); transition: background .2s, border-color .2s;
}
.acct-btn:hover { background: rgba(255, 255, 255, .07); }
.acct-btn.primary { color: #1a1206; border-color: transparent; background: linear-gradient(180deg, #f2d9a0, #d4a95a); box-shadow: 0 6px 20px rgba(233, 196, 126, .25); }
.acct-btn.primary:hover { filter: brightness(1.06); }
.acct-note { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); }
.acct-note p { margin: 0 0 8px; font-family: var(--display); font-size: 15px; line-height: 1.5; color: var(--muted); }
.acct-note b { font-weight: 600; color: var(--gold); }
.acct-note .acct-soon { font-family: inherit; font-size: 12.5px; color: var(--faint); }
.acct-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; padding: 7px 11px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13px; color: var(--text); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); }
.acct-link:hover { border-color: rgba(233, 196, 126, .35); }
.acct-link svg { width: 15px; height: 15px; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.6; }
/* log in: clear gold-tinted glass rather than a solid gold bar */
.acct-btn.primary {
  color: var(--gold); background: linear-gradient(180deg, rgba(233, 196, 126, .16), rgba(233, 196, 126, .06));
  border: 1px solid rgba(233, 196, 126, .45); backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 16px rgba(233, 196, 126, .14);
}
.acct-btn.primary:hover { filter: none; background: linear-gradient(180deg, rgba(233, 196, 126, .24), rgba(233, 196, 126, .1)); border-color: rgba(233, 196, 126, .65); }
.acct-link[hidden] { display: none; } .acct-note p:last-of-type { margin-bottom: 0; }
.nwah { color: #e06a6a; text-shadow: 0 0 10px rgba(224, 106, 106, .35); }
.forgot { color: #8fb8f0; }
body.acct-open .scrim { background: rgba(4, 3, 9, .18); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

/* =================================================================== Media catchup */
/* jade, the colour Discourse had (Discourse now lives inside the Audience) */
body[data-program='media'] { --prog: #3b8a3e; --prog-hi: #a7e3a0; --prog-deep: #1d4d22; }
#programs [data-program='media'] svg { color: #a7e3a0; }
/* posters on the screen shelf */
.screen-shelf .poster { position: relative; background: linear-gradient(160deg, rgba(167, 227, 160, .1), rgba(20, 14, 36, .6)); }
.screen-shelf .poster img { object-fit: cover; }
.screen-shelf .poster.none img { display: none; }
.screen-shelf .poster.none::after { content: '🎞'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; opacity: .4; }
.poster-kind {
  position: absolute; left: 6px; top: 6px; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #e9f7e6; background: rgba(8, 5, 14, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.screen-tile.chosen .cover { box-shadow: 0 0 0 2px var(--prog-hi), 0 8px 24px rgba(0, 0, 0, .4); }
/* the chosen one, and its season */
.screen-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 4px 0 2px; }
.screen-pick:empty { display: none; }
.screen-pick .screen-title { font-family: var(--display); font-size: 21px; font-weight: 500; color: var(--prog-hi); }
.screen-pick small { color: var(--faint); font-size: 12.5px; }
.screen-pick select { flex: 1 1 100%; }
#audMode { margin-bottom: 4px; }
/* a title card, where there's no poster to be had */
.poster-title { display: none; }
.screen-shelf .poster.none::after { content: none; }
.screen-shelf .poster.none { background: radial-gradient(120% 80% at 50% 0%, rgba(167, 227, 160, .14), transparent 60%), linear-gradient(170deg, #1d1530, #0c0812); border: 1px solid rgba(233, 196, 126, .18); }
.screen-shelf .poster.none .poster-title {
  display: grid; place-items: center; position: absolute; inset: 0; padding: 18px 10px 10px; text-align: center;
  font-family: var(--caps); font-size: 13px; font-weight: 600; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; color: var(--gold);
  text-shadow: 0 0 14px rgba(233, 196, 126, .35);
}

/* =================================================================== media shelves: one row each, scrolling sideways */
.screen-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 104px; gap: 12px; overflow-x: auto; overflow-y: hidden;
  padding: 6px 2px 8px; margin: 0 -2px 2px; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.screen-row::-webkit-scrollbar { display: none; }
.screen-row .poster { position: relative; background: linear-gradient(160deg, rgba(167, 227, 160, .1), rgba(20, 14, 36, .6)); }
.screen-row .poster.none { background: radial-gradient(120% 80% at 50% 0%, rgba(167, 227, 160, .14), transparent 60%), linear-gradient(170deg, #1d1530, #0c0812); border: 1px solid rgba(233, 196, 126, .18); }
.screen-row .poster.none img { display: none; }
.screen-row .poster.none .poster-title {
  display: grid; place-items: center; position: absolute; inset: 0; padding: 10px; text-align: center;
  font-family: var(--caps); font-size: 13px; font-weight: 600; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; color: var(--gold);
  text-shadow: 0 0 14px rgba(233, 196, 126, .35);
}
.panel[data-for='media'] .shelf-head { margin-top: 10px; }
.panel[data-for='media'] .shelf-head:first-child { margin-top: 0; }

/* the horizontal silver scrollbar */
.h-scroll {
  position: relative; height: 14px; margin: -2px 0 4px; cursor: pointer; opacity: .45; transition: opacity .4s;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.h-scroll.none { display: none; }
.h-scroll::before {
  content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 1px;
  background:
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(210, 214, 226, .4) 11px 12px) 0 0 / 100% 5px no-repeat,
    linear-gradient(90deg, rgba(200, 205, 220, .12), rgba(235, 238, 245, .28) 50%, rgba(200, 205, 220, .12));
}
.h-scroll::after { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 5px; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 23px, rgba(210, 214, 226, .3) 23px 24px); }
.h-scroll i { position: absolute; left: 0; top: 5px; height: 3px; background: linear-gradient(90deg, transparent, rgba(190, 196, 212, .35) 22%, rgba(215, 220, 232, .65) 50%, rgba(190, 196, 212, .35) 78%, transparent); filter: drop-shadow(0 0 3px rgba(210, 216, 232, .3)); }
.screen-row:hover + .h-scroll, .h-scroll:hover, .h-scroll.active, .h-scroll.dragging { opacity: 1; }

/* the chosen title, its season and the focus box: at the top of the panel now */
.panel[data-for='media'] > .screen-pick { margin: 0 0 8px; }
.panel[data-for='media'] > #mediaFocus { margin-bottom: 4px; }
.panel[data-for='media'] > .screen-pick + #mediaFocus + .shelf-head { margin-top: 14px; }
.screen-row .poster-kind {
  position: absolute; left: 6px; top: 6px; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #ffe4f1; background: rgba(8, 5, 14, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* cover art (books, films, series, games): see-through rather than darkened; full on hover or when chosen */
.book .cover img { filter: none; opacity: .55; transition: opacity .3s; }
.book:hover .cover img, .book.chosen .cover img { filter: none; opacity: 1; }
.book .cover { background: rgba(255, 255, 255, .03); box-shadow: 0 0 0 1px rgba(255, 255, 255, .07) inset; }
.screen-row .poster:not(.none) { background: rgba(255, 255, 255, .03); }

.screen-pick .screen-by { flex: 1 1 100%; margin-top: -2px; font-family: var(--display); font-style: italic; font-size: 15px; color: var(--muted); }

#mediaRemarkGroup[hidden] { display: none; }
.panel[data-for='media'] > #mediaMode { margin-bottom: 8px; }
/* the chosen title: name and maker on the left, the season on the right, all on one band */
.screen-pick { flex-wrap: nowrap; align-items: center; gap: 12px; min-height: 52px; }
.screen-pick .screen-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.screen-pick .screen-line { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.screen-pick .screen-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.screen-pick small { flex: none; }
.screen-pick .screen-by { margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-pick select { flex: 0 0 auto; width: 132px; height: 40px; }
/* the title wins the space: the small type/year gives way first */
.screen-pick .screen-title { flex: 0 1 auto; }
.screen-pick small { flex: 0 10 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .screen-pick select { width: 108px; } .screen-pick .screen-title { font-size: 19px; } }
/* the season button, clear glass, opening the glass menu */
.season-btn {
  flex: none; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 14px; border-radius: 12px; cursor: pointer;
  font-family: var(--display); font-size: 16px; color: var(--text);
  background: rgba(255, 255, 255, .025); border: 1px solid rgba(235, 225, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); transition: background .2s, border-color .2s;
}
.season-btn:hover { background: rgba(255, 255, 255, .06); border-color: color-mix(in srgb, var(--prog-hi) 45%, transparent); }
.season-btn svg { width: 13px; height: 13px; rotate: 90deg; color: var(--prog-hi); fill: none; stroke: currentColor; stroke-width: 2; }
/* the glass menu: a long list scrolls, and the chosen item is marked */
.ctx-menu { max-height: min(60vh, 420px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(210, 214, 226, .25) transparent; }
.ctx-menu button.on { background: rgba(233, 196, 126, .1); color: var(--gold); }
.ctx-menu button.on small { color: color-mix(in srgb, var(--gold) 70%, var(--faint)); }

/* the chosen title sits at the top, above Walkthrough / Discuss; its season and episode side by side on the right */
.panel[data-for='media'] > .screen-pick { margin: 0 0 10px; }
.screen-pickers { flex: none; display: flex; gap: 6px; }
@media (max-width: 480px) { .screen-pick { flex-wrap: wrap; } .screen-pickers { flex: 1 1 100%; } .screen-pickers .season-btn { flex: 1; justify-content: space-between; } }

/* =================================================================== Literature, laid out like Media catchup */
.panel[data-for='literature'] > .screen-pick { margin: 0 0 10px; }
.panel[data-for='literature'] > #litMode { margin-bottom: 8px; }
.panel[data-for='literature'] .shelf-head { margin-top: 10px; }
.screen-pick .screen-empty { font-family: var(--display); font-style: italic; font-size: 16px; color: var(--faint); }
.chapter-btn { max-width: 220px; }
.chapter-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lit-row .book .cover { aspect-ratio: 2 / 3; }

/* news topics: a box of their own that scrolls (silver scrollbar), not the whole page's length */
#topics {
  max-height: 340px; overflow-y: auto; overscroll-behavior: contain; padding-right: 14px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent); mask-image: linear-gradient(#000 calc(100% - 26px), transparent);
}
.ui-scroll.in-page { z-index: 3; }

/* news: two switches above the topics */
.news-switches { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.news-switches .toggle { --tog: var(--prog-hi); padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .02); border: 1px solid rgba(255, 255, 255, .06); }
.news-switches .toggle b { font-family: var(--caps); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.news-switches .toggle small { font-size: 11.5px; line-height: 1.35; }
@media (max-width: 480px) { .news-switches { grid-template-columns: 1fr; } }

/* program icons: their own drawings in a tinted glass tile, each in its program's colour; they come alive on hover and while chosen */
#programs [data-program='news'] { --pc: #ff8ca5; }
#programs [data-program='literature'] { --pc: #f5c97a; }
#programs [data-program='talk'] { --pc: #c4b5fd; }
#programs [data-program='media'] { --pc: #a7e3a0; }
.programs .pi-tile {
  grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  color: var(--pc); background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--pc) 20%, transparent), color-mix(in srgb, var(--pc) 5%, transparent) 70%);
  border: 1px solid color-mix(in srgb, var(--pc) 18%, transparent);
  transition: background .35s, border-color .35s, box-shadow .35s, transform .35s cubic-bezier(.2, .8, .2, 1);
}
#programs button .pi-tile svg.pi { grid-row: auto; width: 26px; height: 26px; color: var(--pc); opacity: .72; overflow: visible; transition: opacity .35s, filter .35s; }
#programs button[aria-checked='true'] .pi-tile {
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--pc) 34%, transparent), color-mix(in srgb, var(--pc) 9%, transparent) 72%);
  border-color: color-mix(in srgb, var(--pc) 40%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--pc) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: pi-pop .55s cubic-bezier(.3, 1.6, .5, 1);
}
#programs button[aria-checked='true'] .pi-tile svg.pi { opacity: 1; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--pc) 55%, transparent)); }
@media (hover: hover) { #programs button:hover .pi-tile svg.pi { opacity: 1; } #programs button:hover .pi-tile { transform: rotate(-4deg) scale(1.06); } }
@keyframes pi-pop { 0% { transform: scale(.82); } 100% { transform: scale(1); } }
.pi .seal, .pi .spark, .pi .star { fill: currentColor; stroke: none; }
.pi .parch { fill: color-mix(in srgb, currentColor 9%, transparent); transform-box: view-box; transform-origin: 12px 5px; }
.pi .roll { fill: color-mix(in srgb, currentColor 14%, #1a0c16); }
.pi .seal { transform-box: fill-box; transform-origin: center; }
.pi .ln, .pi .rune { stroke-dasharray: 1; }
.pi .rune { stroke-width: 1.5; }
.pi .spark { opacity: 0; }
.pi .face { fill: color-mix(in srgb, currentColor 12%, transparent); }
.pi .head { transform-box: view-box; transform-origin: 9px 20px; }
.pi .yap { stroke-width: 1.9; }
.pi .orb { fill: color-mix(in srgb, currentColor 8%, transparent); }
.pi .mist { transform-box: view-box; transform-origin: 12px 10.5px; opacity: .85; }
.pi .glint { opacity: .55; }

/* what each does (on hover, and looping gently while it's the chosen program) */
#programs button[aria-checked='true'] .pi-news .parch { animation: pi-unroll 5s cubic-bezier(.4, 0, .2, 1) infinite; }
#programs button[aria-checked='true'] .pi-news .roll-b { animation: pi-roll 5s cubic-bezier(.4, 0, .2, 1) infinite; }
#programs button[aria-checked='true'] .pi-news .ln { animation: pi-write 5s ease-in-out infinite; }
#programs button[aria-checked='true'] .pi-news .seal { animation: pi-seal 5s ease-out infinite; }
#programs button[aria-checked='true'] .pi-book .rune { animation: pi-rune 4.5s ease-in-out infinite; }
#programs button[aria-checked='true'] .pi-book .spark { animation: pi-spark 4.5s ease-out infinite; }
#programs button[aria-checked='true'] .pi-talk .yap { animation: pi-yap .9s ease-out infinite; }
#programs button[aria-checked='true'] .pi-talk .head { animation: pi-nod 1.8s ease-in-out infinite; }
#programs button[aria-checked='true'] .pi-media .mist { animation: pi-swirl 6s linear infinite; }
#programs button[aria-checked='true'] .pi-media .glint { animation: pi-glint 3.2s ease-in-out infinite; }
#programs button[aria-checked='true'] .pi-media .star { animation: pi-twinkle 2.2s ease-in-out infinite; }
@media (hover: hover) {
  #programs button:hover .pi-news .parch { animation: pi-unroll 2.8s cubic-bezier(.4, 0, .2, 1) infinite; }
  #programs button:hover .pi-news .roll-b { animation: pi-roll 2.8s cubic-bezier(.4, 0, .2, 1) infinite; }
  #programs button:hover .pi-news .ln { animation: pi-write 2.8s ease-in-out infinite; }
  #programs button:hover .pi-news .seal { animation: pi-seal 2.8s ease-out infinite; }
  #programs button:hover .pi-book .rune { animation: pi-rune 2.4s ease-in-out infinite; }
  #programs button:hover .pi-book .spark { animation: pi-spark 2.4s ease-out infinite; }
  #programs button:hover .pi-talk .yap { animation: pi-yap .6s ease-out infinite; }
  #programs button:hover .pi-talk .head { animation: pi-nod 1.2s ease-in-out infinite; }
  #programs button:hover .pi-media .mist { animation: pi-swirl 2.6s linear infinite; }
  #programs button:hover .pi-media .glint { animation: pi-glint 1.6s ease-in-out infinite; }
  #programs button:hover .pi-media .star { animation: pi-twinkle 1.1s ease-in-out infinite; }
}
#programs .pi-news .l2 { animation-delay: .12s; } #programs .pi-news .l3 { animation-delay: .24s; }
#programs .pi-book .s2 { animation-delay: .35s; } #programs .pi-book .s3 { animation-delay: .7s; }
#programs .pi-talk .y2 { animation-delay: .1s; } #programs .pi-talk .y3 { animation-delay: .2s; }
@keyframes pi-unroll { 0%, 6% { transform: scaleY(1); } 18% { transform: scaleY(.08); } 30% { transform: scaleY(.08); } 50%, 100% { transform: scaleY(1); } }
@keyframes pi-roll { 0%, 6% { transform: translateY(0); } 18% { transform: translateY(-11px); } 30% { transform: translateY(-11px); } 50%, 100% { transform: translateY(0); } }
@keyframes pi-write { 0%, 8% { stroke-dashoffset: 0; } 14%, 50% { stroke-dashoffset: 1; } 68%, 100% { stroke-dashoffset: 0; } }
@keyframes pi-seal { 0%, 8% { opacity: 1; transform: scale(1); } 14%, 68% { opacity: 0; transform: scale(1.9); } 74% { opacity: 1; transform: scale(.85); } 80%, 100% { opacity: 1; transform: scale(1); } }
@keyframes pi-rune { 0%, 6% { stroke-dashoffset: 0; filter: none; } 16% { stroke-dashoffset: 1; } 46% { stroke-dashoffset: 0; filter: drop-shadow(0 0 0 currentColor); } 58% { filter: drop-shadow(0 0 3px currentColor); } 80%, 100% { stroke-dashoffset: 0; filter: none; } }
@keyframes pi-spark { 0%, 44% { opacity: 0; transform: translateY(0); } 54% { opacity: 1; } 84%, 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes pi-yap { 0% { opacity: 0; transform: translateX(-2px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(1.6px); } }
@keyframes pi-nod { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 50% { transform: rotate(1.5deg); } 75% { transform: rotate(-2deg); } }
@keyframes pi-swirl { to { transform: rotate(360deg); } }
@keyframes pi-glint { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes pi-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #programs .pi *, #programs .pi-tile { animation: none !important; } }

/* news switches sit under the topics now, four of them; the time span is a glass dropdown on the topics line */
.news-switches { margin: 14px 0 0; }
.topic-tools { display: inline-flex; align-items: center; gap: 8px; }
.news-when { padding: 3px 9px 3px 12px; min-height: 0; border-radius: 999px; font-family: var(--display); font-style: italic; font-size: 14.5px; line-height: 1.35; gap: 6px; }
.news-when svg { width: 13px; height: 13px; rotate: 90deg; }
/* the three-way switch: grim (left) · all (middle) · good (right) */
.mood-tog { cursor: pointer; }
.mood-tog .tri {
  position: relative; flex: none; display: grid; grid-template-columns: repeat(3, 1fr); width: 58px; height: 26px; padding: 0; border: 0; border-radius: 13px; cursor: pointer;
  background: linear-gradient(180deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .22));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: background .3s, box-shadow .3s;
}
.mood-tog .tri i { position: relative; z-index: 1; }
.mood-tog .tri i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.mood-tog .tri s {
  position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .6), transparent 45%), conic-gradient(from 210deg, #a9a8b2 0 30%, #7d7b86 58%, #9c7b45 84%, #a9a8b2 100%);
  box-shadow: 0 0 0 1px rgba(20, 12, 30, .55), 0 2px 4px rgba(0, 0, 0, .5);
  transition: translate .3s cubic-bezier(.3, 1.4, .5, 1), background .3s, box-shadow .3s;
}
.mood-tog[data-mood='all'] .tri s { translate: 16px 0; }
.mood-tog[data-mood='good'] .tri s { translate: 32px 0; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .8), transparent 45%), conic-gradient(from 210deg, #f6dc8e 0 30%, #c99a3c 58%, #fff0c2 84%, #f6dc8e 100%); }
.mood-tog[data-mood='good'] .tri { background: linear-gradient(90deg, rgba(40, 30, 10, .5), #b88a2c 60%, #f0cd7a); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3), 0 0 12px rgba(240, 200, 110, .35); }
.mood-tog[data-mood='grim'] .tri s { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .35), transparent 45%), conic-gradient(from 210deg, #6d4048 0 30%, #3a1f26 58%, #8a3a3a 84%, #6d4048 100%); }
.mood-tog[data-mood='grim'] .tri { background: linear-gradient(90deg, #7a1424, rgba(40, 6, 12, .7) 70%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .55), 0 0 12px rgba(160, 20, 40, .35); }
.mood-tog[data-mood='good'] b { color: #f5d98e; }
.mood-tog[data-mood='grim'] b { color: #e88a8a; }

/* cover art, quieter: see-through and half faded to grey, with a sheet of glass over it (even when chosen). The media
   posters stay the quietest; the book covers lift a little more on hover and when chosen */
.book .cover::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(150deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 38%, transparent 55%, rgba(10, 6, 20, .28));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.book .cover .poster-kind, .book .cover .spin { z-index: 2; }
.book .cover img { transition: opacity .35s, filter .35s; }
/* media catchup */
.screen-tile .cover img { opacity: .32; filter: grayscale(.72) brightness(.88); }
.screen-tile:hover .cover img { opacity: .55; filter: grayscale(.35) brightness(.95); }
.screen-tile.chosen .cover img { opacity: .62; filter: grayscale(.25); }
.screen-tile .cover { box-shadow: 0 6px 14px rgba(0, 0, 0, .28); }
.studio .screen-tile.chosen .cover, .screen-tile.chosen .cover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--prog-hi) 55%, transparent), 0 0 16px color-mix(in srgb, var(--prog-hi) 16%, transparent), 0 6px 16px rgba(0, 0, 0, .3); }
@media (hover: hover) { .screen-tile:hover .cover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, .35); } }
/* literature */
.lit-row .book .cover img { opacity: .46; filter: grayscale(.45) brightness(.92); }
.lit-row .book:hover .cover img { opacity: .74; filter: grayscale(.15); }
.lit-row .book.chosen .cover img { opacity: .8; filter: grayscale(.1); }
.lit-row .book .cover { box-shadow: 0 7px 16px rgba(0, 0, 0, .34); }
.studio .lit-row .book.chosen .cover { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--prog-hi) 65%, transparent), 0 0 18px color-mix(in srgb, var(--prog-hi) 20%, transparent), 0 8px 18px rgba(0, 0, 0, .35); }
.book.loading .cover img { opacity: .3; filter: brightness(.5) blur(1px); }
/* the chosen media poster stands out a little more than the rest (still behind its glass) */
.screen-tile.chosen .cover img { opacity: .82; filter: grayscale(.08); }
.studio .screen-tile.chosen .cover, .screen-tile.chosen .cover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--prog-hi) 70%, transparent), 0 0 20px color-mix(in srgb, var(--prog-hi) 24%, transparent), 0 10px 22px rgba(0, 0, 0, .4); }
/* a book whose cover won't load: its title card fits the narrower book tile */
.lit-row .poster.none .poster-title { padding: 6px; font-size: 10px; letter-spacing: .04em; overflow-wrap: break-word; z-index: 2; }

/* the Junk shelf's books from Tamriel: no cover in this world, so a title card with a bit of ash and Dwemer bronze */
.lit-row .poster.none.tamrielic { background: radial-gradient(120% 80% at 50% 0%, rgba(214, 140, 64, .16), transparent 60%), linear-gradient(170deg, #2a1810, #0e0806); border-color: rgba(214, 160, 90, .22); }
.lit-row .poster.none.tamrielic .poster-title { color: #e8b27a; }

/* weebshit: the anime / manga tag on a poster, a small glass plate rather than a pill */
.screen-row .poster-kind {
  left: 6px; top: 6px; padding: 2px 7px 2px 8px; border-radius: 5px;
  font-family: var(--caps); font-size: 9px; font-weight: 500; letter-spacing: .16em;
  color: rgba(255, 238, 246, .88);
  background: linear-gradient(150deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 60%), rgba(14, 8, 22, .38);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 8px rgba(0, 0, 0, .25);
  backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2);
}

/* Brain & Voice's three subsections, each with its own character, in the section's cool blues (as Personality's are warm):
   Voice API: italic serif in sea-glass · LLM API: electric caps, glowing faintly · News sources: pale silver caps */
#setBrain > details.set.sub > summary { font-weight: 500; }
#setBrain > #setVoice > summary { font-family: var(--display); font-style: italic; font-size: 21px; letter-spacing: .01em; }
#setBrain > #setVoice > summary .sub-title { background: linear-gradient(100deg, #5eead4, #38bdf8 55%, #a5b4fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
#setBrain > #setVoice > summary svg { color: #5cd6e6; }
#setBrain > #setLLM > summary { font-family: var(--caps); letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
#setBrain > #setLLM > summary .sub-title { background: linear-gradient(100deg, #93c5fd, #818cf8 55%, #c084fc); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 8px rgba(129, 140, 248, .3)); }
#setBrain > #setLLM > summary svg { color: #8ea2fb; }
#setBrain > #setNews > summary { font-family: var(--caps); letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
#setBrain > #setNews > summary .sub-title { background: linear-gradient(100deg, #e0f2fe, #bae6fd 50%, #94a3b8); -webkit-background-clip: text; background-clip: text; color: transparent; }
#setBrain > #setNews > summary svg { color: #b4d8f0; }
/* closed: a little quieter */
#setBrain > details.set.sub:not([open]) > summary .sub-title { opacity: .8; }
/* (their status badges keep the plain UI font) */
#setBrain > details.set.sub > summary > small { font-family: var(--ui); font-style: normal; font-size: 12px; letter-spacing: 0; text-transform: none; }

/* settings: dropdowns in glass (a button that opens the glass menu, like the chapter picker on the home page) */
select.glass-hidden { display: none !important; }
.glass-select {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; min-height: 46px; padding: 0 14px 0 16px;
  border-radius: 14px; cursor: pointer; text-align: left; font-size: 14.5px; color: var(--text);
  background: linear-gradient(150deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 55%), rgba(10, 8, 20, .35);
  border: 1px solid rgba(235, 225, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.glass-select > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glass-select svg { flex: none; width: 13px; height: 13px; rotate: 90deg; color: var(--sec, var(--lilac)); fill: none; stroke: currentColor; stroke-width: 2; transition: rotate .2s; }
.glass-select:hover { border-color: color-mix(in srgb, var(--sec, var(--lilac)) 45%, transparent); background: linear-gradient(150deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 55%), rgba(10, 8, 20, .35); }
.glass-select:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--sec, var(--lilac)) 50%, transparent); }
.glass-select:disabled { opacity: .5; cursor: default; }
/* the glass menu's group names (a select's optgroups) */
.ctx-menu .ctx-heading { padding: 9px 12px 4px; font-family: var(--caps); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.ctx-menu .ctx-heading:first-child { padding-top: 4px; }

/* =================================================================== settings: choice buttons, modernised
   a frosted track, and one glass thumb in the section's colour that slides to the chosen option (done in CSS from
   which button is pressed, so it follows however the choice is set) */
#settingsSheet .segmented {
  --n: 3; --i: -1; position: relative; isolation: isolate; gap: 4px; padding: 4px; border-radius: 15px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .32), rgba(0, 0, 0, .18)), rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .04);
}
#settingsSheet .segmented::before {
  content: ''; position: absolute; z-index: -1; top: 4px; bottom: 4px;
  width: calc((100% - 8px - (var(--n) - 1) * 4px) / var(--n));
  left: calc(4px + var(--i) * ((100% - 8px - (var(--n) - 1) * 4px) / var(--n) + 4px));
  border-radius: 11px; opacity: 1;
  background: linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04) 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--sec, var(--violet)) 46%, transparent), color-mix(in srgb, var(--sec, var(--violet)) 22%, transparent));
  border: 1px solid color-mix(in srgb, var(--sec, var(--violet)) 45%, rgba(255, 255, 255, .18));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--sec, var(--violet)) 26%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: left .38s cubic-bezier(.3, 1.25, .5, 1), opacity .2s;
}
#settingsSheet .segmented:not(:has(> button[aria-pressed='true']))::before { opacity: 0; }
#settingsSheet .segmented button {
  min-height: 38px; border-radius: 11px; background: transparent; box-shadow: none; color: var(--muted); font-weight: 450; letter-spacing: .01em;
  transition: color .25s, text-shadow .25s;
}
#settingsSheet .segmented button:hover { color: var(--text); }
#settingsSheet .segmented button[aria-pressed='true'] { background: transparent; box-shadow: none; color: #fff; font-weight: 550; text-shadow: 0 0 12px color-mix(in srgb, var(--sec, var(--violet)) 55%, transparent); }
#settingsSheet .segmented button:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sec, var(--violet)) 60%, transparent); }
@media (prefers-reduced-motion: reduce) { #settingsSheet .segmented::before { transition: opacity .2s; } }
#settingsSheet .segmented:has(> button:nth-child(2):last-child) { --n: 2; }
#settingsSheet .segmented:has(> button:nth-child(3):last-child) { --n: 3; }
#settingsSheet .segmented:has(> button:nth-child(4):last-child) { --n: 4; }
#settingsSheet .segmented:has(> button:nth-child(5):last-child) { --n: 5; }
#settingsSheet .segmented:has(> button:nth-child(6):last-child) { --n: 6; }
#settingsSheet .segmented:has(> button:nth-child(1)[aria-pressed='true']) { --i: 0; }
#settingsSheet .segmented:has(> button:nth-child(2)[aria-pressed='true']) { --i: 1; }
#settingsSheet .segmented:has(> button:nth-child(3)[aria-pressed='true']) { --i: 2; }
#settingsSheet .segmented:has(> button:nth-child(4)[aria-pressed='true']) { --i: 3; }
#settingsSheet .segmented:has(> button:nth-child(5)[aria-pressed='true']) { --i: 4; }
#settingsSheet .segmented:has(> button:nth-child(6)[aria-pressed='true']) { --i: 5; }

/* Fish: the model on the left (a little wider), the proxy on the right, its note in an (i) beside the heading */
.field-pair.model-first { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.field-head { display: inline-flex; align-items: center; gap: 7px; }
.info.tip-left .tip { left: auto; right: -10px; translate: 0 4px; max-width: 250px; }
.info.tip-left:hover .tip, .info.tip-left:focus-visible .tip, .info.tip-left.show .tip { translate: 0 0; }
.info .tip code { font-size: 11px; padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); }

/* LLM API: the model's place in the list ("3 of 12") beside the arrows, in a little glass pill */
#settingsSheet .model-row { grid-template-columns: minmax(0, 1fr) auto 38px 38px; }
.model-count {
  min-width: 0; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted);
  background: linear-gradient(150deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .08);
}
.model-count:empty { display: none; }
/* its actions: the list's (refresh, check) on the left, the test on the right */
#settingsSheet .brain-actions { justify-content: flex-start; }
#settingsSheet .brain-actions .test { margin-left: auto; }
/* an (i) note with a link in it: it stays open while you move onto it, so the link can be clicked */
.info .tip a { color: var(--lilac); pointer-events: auto; }
.info:hover .tip, .info.show .tip { pointer-events: auto; }
.info .tip::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }

/* the model menu: a model's state on the right (green check, amber dot, red cross), its name tinted to match */
.ctx-menu .ctx-mark { display: grid; place-items: center; width: 18px; height: 18px; margin-left: 8px; flex: none; border-radius: 50%; font-style: normal; }
.ctx-menu button small + .ctx-mark { margin-left: 6px; }
.ctx-menu button:not(:has(small)) .ctx-mark { margin-left: auto; }
.ctx-menu .ctx-mark svg { width: 12px; height: 12px; stroke-width: 2.6; color: currentColor; }
.ctx-menu .ctx-mark b { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ctx-menu button.tone-ok .ctx-mark { color: #4ade80; background: rgba(74, 222, 128, .14); box-shadow: 0 0 10px rgba(74, 222, 128, .25); }
.ctx-menu button.tone-warn .ctx-mark { color: #fbbf24; background: rgba(251, 191, 36, .12); }
.ctx-menu button.tone-bad .ctx-mark { color: #f87171; background: rgba(248, 113, 113, .12); }
.ctx-menu button.tone-ok:not(.on) > span { color: #c6f6d5; }
.ctx-menu button.tone-warn > span, .ctx-menu button.tone-bad > span { color: var(--muted); }
.ctx-menu button.tone-warn small { color: rgba(251, 191, 36, .75); }
.ctx-menu button.tone-bad small { color: rgba(248, 113, 113, .7); }
.ctx-menu .ctx-heading.tone-ok { color: rgba(74, 222, 128, .8); }
.ctx-menu .ctx-heading.tone-bad { color: rgba(248, 113, 113, .7); }
/* an action at the top of a menu ("Check which work right now") */
.ctx-menu button.action { color: var(--lilac); }
.ctx-menu button.action svg { color: var(--lilac); }

/* a glass dropdown whose choice has been checked: tinted to match, with its mark beside the chevron */
.glass-select .ctx-mark { display: grid; place-items: center; width: 20px; height: 20px; margin-left: auto; flex: none; border-radius: 50%; font-style: normal; }
.glass-select .ctx-mark:empty { display: none; }
.glass-select .ctx-mark svg { width: 12px; height: 12px; rotate: none; stroke-width: 2.6; color: currentColor; }
.glass-select .ctx-mark b { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.glass-select > span { margin-right: auto; }
.glass-select.tone-ok { border-color: rgba(74, 222, 128, .38); background: linear-gradient(150deg, rgba(74, 222, 128, .12), rgba(74, 222, 128, .03) 60%), rgba(10, 8, 20, .35); }
.glass-select.tone-ok > span { color: #d1fadf; }
.glass-select.tone-ok .ctx-mark { color: #4ade80; background: rgba(74, 222, 128, .16); box-shadow: 0 0 10px rgba(74, 222, 128, .3); }
.glass-select.tone-warn { border-color: rgba(251, 191, 36, .35); background: linear-gradient(150deg, rgba(251, 191, 36, .1), rgba(251, 191, 36, .02) 60%), rgba(10, 8, 20, .35); }
.glass-select.tone-warn .ctx-mark { color: #fbbf24; background: rgba(251, 191, 36, .14); }
.glass-select.tone-bad { border-color: rgba(248, 113, 113, .38); background: linear-gradient(150deg, rgba(248, 113, 113, .1), rgba(248, 113, 113, .02) 60%), rgba(10, 8, 20, .35); }
.glass-select.tone-bad .ctx-mark { color: #f87171; background: rgba(248, 113, 113, .14); }
/* LLM API: the list's state ("5 models. Press Check availability…") on the Model line, at the right, above the arrows */
.model-head { align-items: baseline; gap: 12px; }
.model-head #modelHint { margin: 0 0 0 auto; text-align: right; min-width: 0; }

/* Voice API: the browser voice, plainly marked as the bad idea it is */
#settingsSheet .voice-choice button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.15; }
.voice-choice .not-rec { font-family: var(--caps); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #f87171; opacity: .85; }
.voice-choice button[aria-pressed='true'] .not-rec { color: #fecaca; opacity: 1; text-shadow: 0 0 8px rgba(248, 113, 113, .6); }
.not-rec-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(248, 113, 113, .4); background: linear-gradient(150deg, rgba(248, 113, 113, .14), rgba(127, 29, 29, .12)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.not-rec-card b { font-family: var(--caps); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #fca5a5; }
.not-rec-card b::before { content: '⚠ '; }
.not-rec-card p { margin: 0; font-size: 13px; line-height: 1.5; color: #fde2e2; }
/* the thumb turns red when it's on the browser voice */
#settingsSheet .voice-choice:has(> button[data-v='browser'][aria-pressed='true'])::before { --sec: #ef4444; }

/* =================================================================== buttons: frosted glass, lit by their section's colour
   (the old ones were flat purple everywhere) */
.ghost {
  --acc: var(--sec, var(--prog-hi, var(--gold)));
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: #ece7f5; font-weight: 500; letter-spacing: .01em;
  background: linear-gradient(150deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 60%), rgba(12, 9, 22, .35);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 8px rgba(0, 0, 0, .18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .12s;
}
.ghost svg { width: 15px; height: 15px; flex: none; color: var(--acc); opacity: .9; transition: rotate .4s; }
.ghost:hover { color: #fff; border-color: color-mix(in srgb, var(--acc) 50%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--acc) 16%, transparent), rgba(255, 255, 255, .03) 65%), rgba(12, 9, 22, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 16px color-mix(in srgb, var(--acc) 18%, transparent); }
.ghost:active { transform: scale(.97); }
.ghost:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 55%, transparent); }
.ghost:disabled { opacity: .5; cursor: default; transform: none; }
#refreshModels:hover svg { rotate: 200deg; }
/* the main one (Test the brain): its section's colour already */
.ghost.test:not(.pass):not(.fail) { color: color-mix(in srgb, var(--acc) 55%, #fff); border-color: color-mix(in srgb, var(--acc) 35%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--acc) 18%, transparent), color-mix(in srgb, var(--acc) 5%, transparent) 65%), rgba(12, 9, 22, .35); }
.ghost.test.testing::before { border-color: color-mix(in srgb, var(--acc) 30%, transparent); border-top-color: var(--acc); }
/* the dangerous one stays red */
.ghost.danger { color: #fda4af; --acc: #f43f5e; }
/* usage numbers: their section's colour, not the old purple */
#settingsSheet .usage b { color: color-mix(in srgb, var(--sec, var(--gold)) 75%, #fff); }
#settingsSheet .usage div { background: linear-gradient(150deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01) 60%), rgba(0, 0, 0, .22); border-color: rgba(255, 255, 255, .08); }

/* =================================================================== Voice API: the voice search, live, in glass */
.voice-search { position: relative; display: block; }
.voice-find { position: relative; }
.voice-find .input { width: 100%; padding-left: 42px; padding-right: 40px; }
.voice-find .find-icon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--sec, var(--lilac)); opacity: .85; pointer-events: none; }
.voice-find .find-spin { position: absolute; right: 14px; top: 50%; margin-top: -8px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--sec, var(--lilac)) 25%, transparent); border-top-color: var(--sec, var(--lilac)); animation: spin .8s linear infinite; }
.voice-find .find-spin[hidden] { display: none; }
/* the results: a frosted dropdown under the field, like the glass menus */
.voices.voice-pop {
  position: absolute; z-index: 8; left: 0; right: 0; top: calc(100% + 6px); max-height: min(380px, 55vh); padding: 6px; gap: 4px;
  border-radius: 16px; background: linear-gradient(180deg, rgba(30, 22, 44, .78), rgba(14, 10, 22, .86));
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 44px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  animation: pop-in .16s ease-out;
}
.voices.voice-pop[hidden] { display: none; }
.voices.voice-pop > .fine { padding: 10px 12px; margin: 0; list-style: none; }
.voices.voice-pop .voice { border-color: transparent; background: transparent; padding: 6px 8px; border-radius: 12px; transition: background .15s; }
.voices.voice-pop .voice:hover { background: rgba(255, 255, 255, .05); }
.voices.voice-pop .voice.selected { background: color-mix(in srgb, var(--sec, var(--violet)) 12%, transparent); }
@keyframes pop-in { from { opacity: 0; translate: 0 -4px; } }
/* each voice row: cover, name, copy, sample, use */
#settingsSheet .voice, #settingsSheet .voice-current .voice { grid-template-columns: 44px minmax(0, 1fr) auto auto auto; }
.voice b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice .copy-voice { width: 32px; height: 32px; opacity: .7; }
.voice .copy-voice svg { width: 15px; height: 15px; }
.voice .copy-voice:hover { opacity: 1; }
.voice .copy-voice.done { opacity: 1; color: #4ade80; border-color: rgba(74, 222, 128, .5); }
.voice-find .find-icon { z-index: 1; }

/* Voice: the search and the current voice on the left; the ones he had before, a small glass list beside them */
.voice-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 210px); gap: 10px; align-items: stretch; }
.voice-layout:has(> .voice-recent[hidden]) { grid-template-columns: minmax(0, 1fr); }
.voice-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.voice-layout .voice-recent {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 0; padding: 8px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015) 60%), rgba(10, 8, 20, .3);
  border: 1px solid rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  position: relative;
}
.voice-layout .voice-recent[hidden] { display: none; }
.voice-layout .voice-recent > .fine { padding: 2px 6px 0; font-family: var(--caps); font-size: 10px; letter-spacing: .16em; color: var(--faint); }
/* (it takes the height of the left column and scrolls within it) */
.voice-layout .voice-chips { flex: 1 1 0; min-height: 0; flex-direction: column; gap: 3px; overflow-x: hidden; overflow-y: auto; padding: 0; scrollbar-width: thin; scrollbar-color: rgba(210, 214, 226, .2) transparent; -webkit-mask-image: linear-gradient(#000 calc(100% - 14px), transparent); mask-image: linear-gradient(#000 calc(100% - 14px), transparent); }
.voice-layout .voice-chip { width: 100%; justify-content: flex-start; padding: 5px 8px 5px 5px; border-radius: 10px; border-color: transparent; background: transparent; opacity: .85; font-size: 12.5px; flex: none; }
.voice-layout .voice-chip:hover, .voice-layout .voice-chip:focus-visible { background: rgba(255, 255, 255, .06); border-color: color-mix(in srgb, var(--sec, #a78bfa) 35%, transparent); opacity: 1; }
.voice-layout .voice-chip img, .voice-layout .voice-chip .ph { width: 26px; height: 26px; border-radius: 8px; }
@media (max-width: 560px) { .voice-layout { grid-template-columns: minmax(0, 1fr); } .voice-layout .voice-chips { max-height: 150px; flex: none; } }
.voice-main > #voiceSearch, .voice-main > #voiceCurrent { margin: 0; }

/* =================================================================== voice search results: a floating glass panel */
.voices.voice-pop {
  position: fixed; z-index: 45; top: auto; left: 0; right: auto; margin: 0; padding: 6px; gap: 3px; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025) 45%, rgba(255, 255, 255, .015)), rgba(18, 13, 30, .72);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4);
  scrollbar-width: none; animation: pop-in .18s ease-out;
}
.voices.voice-pop::-webkit-scrollbar { display: none; }
.voices.voice-pop.up { animation-name: pop-in-up; }
@keyframes pop-in-up { from { opacity: 0; translate: 0 4px; } }
.voices.voice-pop .voice { border: 1px solid transparent; background: transparent; padding: 6px 8px; border-radius: 12px; }
.voices.voice-pop .voice:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .06); }
.voices.voice-pop .voice.selected { background: color-mix(in srgb, #60a5fa 14%, transparent); border-color: color-mix(in srgb, #60a5fa 35%, transparent); }
.voices.voice-pop .voice small { color: rgba(226, 222, 240, .55); }
.voices.voice-pop > .fine { padding: 12px 14px; color: rgba(226, 222, 240, .7); }
/* (the settings' accent doesn't reach it out here) */
.voices.voice-pop { --sec: #60a5fa; }

/* Other voices: the silver scrollbar instead of the browser's */
.voice-layout .voice-chips { scrollbar-width: none; padding-right: 12px; }
.voice-layout .voice-chips::-webkit-scrollbar { display: none; }

/* API keys: an eye to see what was pasted */
.secret { position: relative; display: block; }
.secret > .input { width: 100%; padding-right: 46px; }
.secret-eye {
  position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border-radius: 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; transition: color .2s, background .2s;
}
.secret-eye svg { width: 18px; height: 18px; }
.secret-eye:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.secret-eye.on { color: var(--sec, var(--lilac)); }
.secret > input[type='text'] { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; letter-spacing: .02em; }
/* (its rows, now outside the settings: cover, name, copy, sample, use, on one line) */
.voices.voice-pop .voice { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; }
.voices.voice-pop .voice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voices.voice-pop .voice .icon-btn { width: 36px; height: 36px; }
.voices.voice-pop .voice .ghost.small { min-height: 32px; padding: 0 14px; }

/* =================================================================== Voice: search, and other voices below it, on the left;
   the current voice, larger, on the right */
.voice-layout { grid-template-columns: minmax(0, 1fr) minmax(170px, 230px); }
.voice-layout:has(.voice-current:empty) { grid-template-columns: minmax(0, 1fr); }
.voice-main { min-height: 0; }
.voice-layout .voice-recent { flex: 1 1 auto; min-height: 0; padding: 8px 8px 8px 6px; }
.voice-layout .voice-chips { list-style: none; margin: 0; padding: 0 0 0 14px; max-height: 196px; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
/* a row: cover, name, sample, use */
.voice.compact { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 4px 6px; border: 1px solid transparent; border-radius: 11px; background: transparent; }
.voice.compact:hover { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .06); }
.voice.compact img, .voice.compact .ph { width: 34px; height: 34px; border-radius: 9px; }
.voice.compact b { font-size: 13.5px; }
.voice.compact small:empty { display: none; }
.voice.compact .icon-btn { width: 32px; height: 32px; }
.voice.compact .icon-btn svg { width: 15px; height: 15px; }
.voice.compact .ghost.small { min-height: 30px; padding: 0 12px; font-size: 12.5px; }
.icon-btn.busy svg { animation: blink 1s infinite; }
/* the current voice: a card, its portrait large */
#settingsSheet .voice-current .voice.current {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px 12px; text-align: center;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--sec, #60a5fa) 45%, transparent);
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--sec, #60a5fa) 20%, transparent), transparent 70%), linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01)), rgba(10, 8, 20, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 30px rgba(0, 0, 0, .25);
}
.voice-current .voice.current img, .voice-current .voice.current .ph { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .1); }
.voice-current .voice.current > div { min-width: 0; max-width: 100%; }
.voice-current .voice.current b { font-size: 18px; font-weight: 600; white-space: normal; line-height: 1.2; }
.voice-current .voice.current small { font-family: var(--caps); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--sec, #60a5fa) 70%, #fff); }
.voice-current .voice.current .icon-btn { width: 36px; height: 36px; }
.voice-current .voice.current > span:empty { display: none; }
/* (the copy and play buttons side by side under the name) */
.voice-current .voice.current { flex-wrap: wrap; }
.voice-current .voice.current > img, .voice-current .voice.current > .ph, .voice-current .voice.current > div { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; }
.voice-current .voice.current > img { flex: none; }
@media (max-width: 560px) { .voice-layout { grid-template-columns: minmax(0, 1fr); } .voice-layout .voice-current { order: -1; } }
/* (as a grid: portrait, then name, then copy and play side by side) */
#settingsSheet .voice-current .voice.current { display: grid; grid-template-columns: auto auto; justify-content: center; justify-items: center; align-content: center; column-gap: 8px; row-gap: 10px; }
.voice-current .voice.current > img, .voice-current .voice.current > .ph, .voice-current .voice.current > div { grid-column: 1 / -1; }
/* (more room for the names in Other voices) */
.voice-layout { grid-template-columns: minmax(0, 1fr) minmax(150px, 190px); }
.voice-current .voice.current img, .voice-current .voice.current .ph { width: 84px; height: 84px; border-radius: 20px; }
.voice-current .voice.current b { font-size: 17px; }
.voice-layout .voice-chips { padding-left: 12px; }
.voice.compact { grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 6px; padding: 3px 4px; }
.voice.compact img, .voice.compact .ph { width: 32px; height: 32px; border-radius: 8px; }
.voice.compact .icon-btn { width: 28px; height: 28px; }
.voice.compact .icon-btn svg { width: 13px; height: 13px; }
.voice.compact .ghost.small { min-height: 28px; padding: 0 10px; font-size: 12px; }
/* API keys: the eye sits beside the field, a small glass button of its own */
.secret { display: flex; align-items: stretch; gap: 8px; }
.secret > .input { flex: 1; min-width: 0; padding-right: 16px; }
.secret-eye {
  position: static; translate: none; flex: none; width: 46px; height: auto; min-height: 44px; border-radius: 14px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 60%), rgba(12, 9, 22, .35);
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.secret-eye:hover { border-color: color-mix(in srgb, var(--sec, var(--lilac)) 50%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--sec, var(--lilac)) 14%, transparent), rgba(255, 255, 255, .02) 60%), rgba(12, 9, 22, .35); }
.secret-eye.on { border-color: color-mix(in srgb, var(--sec, var(--lilac)) 45%, transparent); }

/* the current voice: compact again: its name, "current" and the buttons on the left, the portrait on the right */
#settingsSheet .voice-current .voice.current {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: auto auto; justify-content: stretch; justify-items: start; align-items: center; align-content: center;
  column-gap: 8px; row-gap: 10px; padding: 14px; text-align: left;
}
.voice-current .voice.current > div { grid-column: 1 / 4; grid-row: 1; align-items: flex-start; flex: none; display: flex; flex-direction: column; gap: 2px; }
.voice-current .voice.current > img, .voice-current .voice.current > .ph { grid-column: 4; grid-row: 1 / 3; width: 64px; height: 64px; border-radius: 16px; justify-self: end; }
.voice-current .voice.current > .copy-voice { grid-column: 1; grid-row: 2; }
.voice-current .voice.current > .icon-btn:not(.copy-voice) { grid-column: 2; grid-row: 2; }
.voice-current .voice.current b { font-size: 16px; }
.voice-current .voice.current .icon-btn { width: 32px; height: 32px; }
.voice-current .voice.current .icon-btn svg { width: 14px; height: 14px; }
/* other voices: copy too, and a little more room between them */
.voice-layout .voice-chips { gap: 6px; }
.voice.compact { grid-template-columns: 32px minmax(0, 1fr) auto auto auto; gap: 6px; padding: 5px 6px; }
.voice.compact .copy-voice { width: 28px; height: 28px; }
.voice.compact .copy-voice svg { width: 13px; height: 13px; }
/* (the current voice card is only as tall as it needs to be, at the top) */
.voice-layout > .voice-current { align-self: start; }
#settingsSheet .voice-current .voice.current { height: auto; }
.voice-layout { grid-template-columns: minmax(0, 1fr) minmax(190px, 240px); }
/* the search and the current voice side by side; other voices the full width beneath them */
.voice-layout { grid-template-columns: minmax(0, 1fr) minmax(230px, 300px); grid-template-areas: 'search current' 'others others'; row-gap: 10px; }
.voice-layout > .voice-main { display: contents; }
.voice-layout #voiceSearch { grid-area: search; align-self: center; }
.voice-layout > .voice-current { grid-area: current; align-self: stretch; }
.voice-layout .voice-recent { grid-area: others; }
#settingsSheet .voice-current .voice.current { height: 100%; padding: 10px 12px; row-gap: 6px; }
.voice-layout:has(.voice-current:empty) { grid-template-areas: 'search search' 'others others'; }
@media (max-width: 560px) { .voice-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'current' 'search' 'others'; } }
.voice-layout { grid-template-columns: minmax(0, 1.15fr) minmax(220px, 1fr); }

/* Voice: search with other voices beneath it on the left; the current voice card beside both, a little larger */
.voice-layout { grid-template-columns: minmax(0, 1.3fr) minmax(210px, 1fr); grid-template-areas: 'search current' 'others current'; }
.voice-layout > .voice-current { align-self: stretch; }
#settingsSheet .voice-current .voice.current { height: 100%; padding: 16px; row-gap: 12px; align-content: center; }
.voice-current .voice.current > img, .voice-current .voice.current > .ph { width: 84px; height: 84px; border-radius: 20px; }
.voice-current .voice.current b { font-size: 18px; }
.voice-current .voice.current .icon-btn { width: 36px; height: 36px; }
.voice-layout:has(.voice-current:empty) { grid-template-areas: 'search search' 'others others'; }
@media (max-width: 560px) { .voice-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'current' 'search' 'others'; } }
/* other voices: smaller names; a long one glides so it can be read in full */
.voice.compact b { font-size: 12.5px; font-weight: 500; }
.voice.compact > div { min-width: 0; overflow: hidden; }
.voice.compact b.marquee { text-overflow: clip; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6px, #000 calc(100% - 10px), transparent); mask-image: linear-gradient(90deg, transparent, #000 6px, #000 calc(100% - 10px), transparent); }
.voice.compact b.marquee > span { display: inline-block; padding-left: 4px; animation: name-glide var(--glide, 6s) ease-in-out infinite; }
@keyframes name-glide { 0%, 18% { transform: translateX(0); } 50%, 68% { transform: translateX(var(--shift)); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .voice.compact b.marquee > span { animation: none; } .voice.compact b.marquee { text-overflow: ellipsis; } }
/* other voices: two and a half rows in view (rows are 44px with 6px between), the rest a scroll away; the current voice
   card follows that height */
.voice-layout .voice-chips { flex: none; max-height: 122px; }
/* the current voice: name, "current" and portrait at the top; copy and play at the bottom */
#settingsSheet .voice-current .voice.current { grid-template-rows: auto 1fr; align-content: stretch; align-items: start; }
.voice-current .voice.current > div, .voice-current .voice.current > img, .voice-current .voice.current > .ph { align-self: start; }
.voice-current .voice.current > .icon-btn { align-self: end; }

/* =================================================================== News sources, touched up */
#setNews .src-head { margin: 4px 0 -2px; font-family: var(--caps); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.src-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.src-card.toggle {
  align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(150deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015) 60%), rgba(10, 8, 20, .3);
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color .25s, background .25s;
}
.src-card.toggle:has(input:checked) { border-color: color-mix(in srgb, var(--sec, #38bdf8) 40%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--sec, #38bdf8) 12%, transparent), rgba(255, 255, 255, .015) 60%), rgba(10, 8, 20, .3); }
.src-card.toggle:hover { border-color: color-mix(in srgb, var(--sec, #38bdf8) 30%, transparent); }
.src-card.toggle input { margin-top: 1px; }
.src-card.toggle span { min-width: 0; }
.src-card.toggle b { font-size: 14px; }
.src-card.toggle small { font-size: 12px; line-height: 1.4; }
.src-state { display: block; margin-top: 6px; font-style: normal; font-size: 11.5px; line-height: 1.4; }
.src-state:empty { display: none; }
.src-state[data-tone='ok'] { color: #86efac; }
.src-state[data-tone='ok']::before { content: '● '; color: #4ade80; }
.src-state[data-tone='warn'] { color: #fcd34d; }
.src-state[data-tone='warn']::before { content: '● '; color: #fbbf24; }
.src-state[data-tone='bad'] { color: #fca5a5; }
.src-state[data-tone='bad']::before { content: '● '; color: #f87171; }
#setNews .rss-field { display: flex; flex-direction: column; gap: 6px; }
#setNews .rss-field textarea { min-height: 88px; height: auto; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; }
.src-extras { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.src-extra { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .07); }
.src-extra .find-more .input { min-height: 40px; }
.src-extra .find-more .ghost, .src-extra .find-more .icon-btn { min-height: 40px; }
.src-forget { align-self: flex-start; }
@media (max-width: 560px) { .src-grid, .src-extras { grid-template-columns: minmax(0, 1fr); } }
#setNews .rss-field { margin-bottom: 6px; }

/* News sources: the packs, and the fine-tuning row (edition, never from) */
.src-tune { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px; align-items: end; }
.src-tune .field { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 560px) { .src-tune { grid-template-columns: minmax(0, 1fr); } }

/* =================================================================== the current voice: who it is, what it's like */
#settingsSheet .voice-current .voice.current { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: auto 1fr; row-gap: 10px; }
.voice-current .voice.current > img, .voice-current .voice.current > .ph { grid-row: 1; align-self: start; width: 72px; height: 72px; border-radius: 18px; }
.voice-current .voice.current > div { gap: 4px; }
.voice-current .voice.current > .icon-btn { grid-row: 2; }
.voice-current .voice.current > .voice-now { grid-column: 3 / -1; grid-row: 2; justify-self: end; align-self: end; font-family: var(--caps); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--sec, #60a5fa) 70%, #fff); opacity: .8; }
/* whose voice it is */
.voice-kin { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-style: italic; font-size: 14.5px; line-height: 1.2; }
.voice-kin.true { color: var(--gold); text-shadow: 0 0 12px rgba(233, 196, 126, .3); }
.voice-kin.impostor { color: #e7a3b4; }
.voice-kin .info { width: 15px; height: 15px; font-size: 9.5px; flex: none; }
.voice-kin .info .tip { font-family: var(--ui); font-style: normal; }
/* what its maker says about it */
.voice-about { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--faint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.voice-about:empty { display: none; }
/* (the name beside a smaller portrait; who it is and what it's like across the card beneath; buttons and "current" last) */
#settingsSheet .voice-current .voice.current { grid-template-rows: auto auto auto 1fr; row-gap: 8px; }
.voice-current .voice.current > div { grid-column: 1 / 4; grid-row: 1; align-self: center; }
.voice-current .voice.current > img, .voice-current .voice.current > .ph { grid-column: 4; grid-row: 1; width: 56px; height: 56px; border-radius: 15px; }
.voice-current .voice.current > .voice-kin { grid-column: 1 / -1; grid-row: 2; }
.voice-current .voice.current > .voice-about { grid-column: 1 / -1; grid-row: 3; }
.voice-current .voice.current > .icon-btn, .voice-current .voice.current > .voice-now { grid-row: 4; }
.voice-current .voice.current b { line-height: 1.15; }
.voice-current .voice.current > .copy-voice, .voice-current .voice.current > .icon-btn:not(.copy-voice) { grid-row: 4; align-self: end; }

/* "You're currently": a ripple from the button you chose, passing through the others (and only inside them) */
#activity .chip { position: relative; overflow: hidden; isolation: isolate; }
.act-ripple {
  position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 54%, rgba(110, 231, 183, .0) 58%, rgba(110, 231, 183, .42) 66%, rgba(167, 243, 208, .18) 70%, transparent 74%);
  transform: scale(.02); opacity: 1;
  animation: act-ripple 1.05s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes act-ripple { 70% { opacity: .9; } to { transform: scale(1); opacity: 0; } }
/* (above the button's own glass layer, blended in as light; a touch brighter and slower) */
.act-ripple {
  z-index: 1; mix-blend-mode: screen;
  background: radial-gradient(circle, transparent 52%, rgba(110, 231, 183, .55) 62%, rgba(167, 243, 208, .3) 67%, transparent 73%);
  animation: act-ripple 1.3s cubic-bezier(.3, .5, .3, 1) forwards;
}
.act-ripple { animation: act-ripple 1.6s cubic-bezier(.35, .05, .55, 1) forwards; }

/* the current voice: who it is, right under the name, beside the portrait; what it's like beneath both */
.voice-current .voice.current > div { grid-column: 1 / 4; grid-row: 1; align-self: end; }
.voice-current .voice.current > .voice-kin { grid-column: 1 / 4; grid-row: 2; align-self: start; margin-top: -4px; }
.voice-current .voice.current > img, .voice-current .voice.current > .ph { grid-column: 4; grid-row: 1 / 3; align-self: center; }
.voice-current .voice.current > .voice-about { grid-column: 1 / -1; grid-row: 3; }
/* (the description: its full text in a glass popup on hover) */
.voice-about { position: relative; cursor: help; outline: none; }
.voice-about-pop {
  position: absolute; z-index: 20; left: -6px; right: -6px; top: calc(100% + 8px); display: block; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 50%), rgba(18, 13, 30, .82);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  opacity: 0; translate: 0 -4px; pointer-events: none; transition: opacity .18s, translate .18s;
  -webkit-line-clamp: unset; white-space: normal;
}
.voice-about-pop p { margin: 0; font-family: var(--display); font-style: italic; font-size: 15px; line-height: 1.45; color: var(--text); }
.voice-about-pop small { display: block; margin-top: 8px; font-size: 11px; color: var(--faint); }
.voice-about:hover .voice-about-pop, .voice-about:focus .voice-about-pop, .voice-about.open .voice-about-pop { opacity: 1; translate: 0 0; }
/* (the clamp lives on the text, not the popup inside it) */
.voice-current .voice-about { overflow: visible; display: block; }
.voice-current .voice-about { -webkit-line-clamp: unset; }

/* the current voice: who it is, right under the name, beside the portrait; what it's like beneath both */
.voice-current .voice.current > div:not(.voice-about) { grid-column: 1 / 4; grid-row: 1; align-self: end; }
.voice-current .voice.current > .voice-kin { grid-column: 1 / 4; grid-row: 2; align-self: start; margin-top: -4px; }
.voice-current .voice.current > img, .voice-current .voice.current > .ph { grid-column: 4; grid-row: 1 / 3; align-self: center; }
.voice-current .voice.current > .voice-about { grid-column: 1 / -1; grid-row: 3; }
/* (the description: two lines, and its full text in a glass popup on hover, focus or tap) */
.voice-about { position: relative; display: block; overflow: visible; cursor: help; outline: none; margin: 2px 0 0; }
.voice-about:empty { display: none; }
.voice-about-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.4; color: var(--faint); transition: color .2s; }
.voice-about:hover .voice-about-text, .voice-about:focus .voice-about-text { color: var(--muted); }
.voice-about-pop {
  position: absolute; z-index: 20; left: -8px; right: -8px; top: calc(100% + 8px); padding: 12px 14px; border-radius: 14px; text-align: left;
  background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 50%), rgba(18, 13, 30, .84);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  opacity: 0; translate: 0 -4px; pointer-events: none; transition: opacity .18s, translate .18s;
}
.voice-about-pop p { margin: 0; font-family: var(--display); font-style: italic; font-size: 15px; line-height: 1.45; color: var(--text); }
.voice-about-pop small { display: block; margin-top: 8px; font-size: 11px; color: var(--faint); }
.voice-about:hover .voice-about-pop, .voice-about:focus .voice-about-pop, .voice-about.open .voice-about-pop { opacity: 1; translate: 0 0; }
.voice-current .voice.current > .voice-about { display: block; flex: none; align-self: start; align-items: initial; }
.voice-current .voice-kin { font-size: 13.5px; line-height: 1.25; }

/* =================================================================== "You're currently": the ripple, as light through glass
   (replaces the earlier green band) */
.act-ripple {
  position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle,
    transparent 44%,
    rgba(200, 255, 236, .025) 52%,
    rgba(225, 255, 245, .09) 58%,
    rgba(255, 255, 255, .16) 61.5%,
    rgba(200, 255, 236, .07) 65%,
    transparent 72%);
  filter: blur(1.5px);
  transform: scale(.04); opacity: 0;
  animation: act-ripple 2.4s linear forwards;
}
@keyframes act-ripple {
  0% { transform: scale(.04); opacity: 0; }
  10% { opacity: 1; }
  65% { opacity: .75; }
  100% { transform: scale(1); opacity: 0; }
}
/* each button's glass catching the light as the wave passes: its edge brightens, its surface lifts a little */
#activity .chip.glint { animation: act-glint 1.1s cubic-bezier(.3, .6, .35, 1) var(--glint-delay, 0ms) both; }
@keyframes act-glint {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0), inset 0 0 0 1px rgba(200, 255, 236, 0), 0 0 0 rgba(167, 243, 208, 0); }
  35% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(200, 255, 236, .22), 0 0 18px rgba(167, 243, 208, .12); }
}
#activity .chip.glint::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 55%, transparent);
  opacity: 0; animation: act-glint-sheen 1.1s ease-out var(--glint-delay, 0ms) both;
}
@keyframes act-glint-sheen { 35% { opacity: 1; } 100% { opacity: 0; } }

/* the ripple in the section's own green (the chosen button's glass), as light */
.act-ripple {
  background: radial-gradient(circle,
    transparent 44%,
    rgba(52, 211, 153, .03) 52%,
    rgba(110, 231, 183, .11) 58%,
    rgba(167, 243, 208, .2) 61.5%,
    rgba(52, 211, 153, .08) 65%,
    transparent 72%);
}
@keyframes act-glint {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(209, 250, 229, 0), inset 0 0 0 1px rgba(110, 231, 183, 0), 0 0 0 rgba(52, 211, 153, 0); }
  35% { box-shadow: inset 0 1px 0 rgba(209, 250, 229, .22), inset 0 0 0 1px rgba(110, 231, 183, .3), 0 0 18px rgba(52, 211, 153, .16); }
}
#activity .chip.glint::after { background: linear-gradient(160deg, rgba(167, 243, 208, .12), rgba(110, 231, 183, .03) 55%, transparent); }

/* the chosen button: pressed like glass, tipping toward your touch, then springing back as a sheen crosses it */
#activity { perspective: 600px; }
#activity .chip.pressed { animation: act-press .62s cubic-bezier(.3, 1.4, .45, 1) both; transform-origin: 50% 50%; }
@keyframes act-press {
  0% { transform: rotateX(0) rotateY(0) scale(1); }
  22% { transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(.94); }
  100% { transform: rotateX(0) rotateY(0) scale(1); }
}
#activity .chip.pressed::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 1;
  background: linear-gradient(105deg, transparent 30%, rgba(236, 253, 245, .26) 47%, rgba(167, 243, 208, .12) 53%, transparent 66%) no-repeat;
  background-size: 260% 100%; background-position: 120% 0;
  animation: act-press-sheen .75s ease-out .08s both;
}
@keyframes act-press-sheen { from { background-position: 120% 0; opacity: 1; } to { background-position: -40% 0; opacity: .3; } }
@media (prefers-reduced-motion: reduce) { #activity .chip.pressed, #activity .chip.pressed::after { animation: none; } }
#activity .chip.glint { animation-duration: .45s; } #activity .chip.glint::after { animation-duration: .45s; }

/* =================================================================== the ripple, as water (replaces the single ring) */
.act-ripple {
  position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: normal; filter: blur(.6px);
  /* from the inside out: calm, a faint dark trough, the bright crest, a soft afterglow, calm */
  background: radial-gradient(circle,
    transparent 70%,
    rgba(2, 18, 14, calc(.16 * var(--strength, 1))) 81%,
    rgba(52, 211, 153, calc(.10 * var(--strength, 1))) 86%,
    rgba(190, 255, 228, calc(.42 * var(--strength, 1))) 89.5%,
    rgba(110, 231, 183, calc(.16 * var(--strength, 1))) 92.5%,
    transparent 97%);
  transform: scale(.02); opacity: 0;
  animation-name: act-ripple; animation-timing-function: cubic-bezier(.33, 1, .68, 1); animation-fill-mode: both;
}
@keyframes act-ripple {
  0% { transform: scale(.02); opacity: 0; }
  6% { opacity: 1; }
  55% { opacity: .85; }
  100% { transform: scale(1); opacity: 0; }
}
/* sparks: tiny points of light, twinkling as the crest passes */
.act-spark {
  position: absolute; z-index: 2; width: 7px; height: 7px; margin: -3.5px; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 1px, rgba(167, 243, 208, .7) 1.5px, transparent 3.5px),
    linear-gradient(90deg, transparent 2.5px, rgba(209, 250, 229, .55) 3px 4px, transparent 4.5px) center / 100% 1px no-repeat,
    linear-gradient(transparent 2.5px, rgba(209, 250, 229, .55) 3px 4px, transparent 4.5px) center / 1px 100% no-repeat;
  filter: drop-shadow(0 0 3px rgba(110, 231, 183, .8));
  animation: act-spark .62s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes act-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(0) rotate(0deg); }
  30% { opacity: 1; transform: translate(calc(var(--dx) * .4), calc(var(--dy) * .4)) scale(var(--s)) rotate(35deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2) rotate(90deg); }
}
/* each button catching the light as the first crest reaches it: quick, then easing off */
#activity .chip.glint { animation: act-glint .55s cubic-bezier(.2, .7, .3, 1) var(--glint-delay, 0ms) both; }
#activity .chip.glint::after { animation: act-glint-sheen .55s ease-out var(--glint-delay, 0ms) both; }
@media (prefers-reduced-motion: reduce) { .act-spark, .act-ripple { display: none; } }
/* (crests strong enough to see through the buttons' glass) */
.act-ripple {
  filter: blur(.4px);
  background: radial-gradient(circle,
    transparent 72%,
    rgba(2, 20, 16, calc(.28 * var(--strength, 1))) 82%,
    rgba(52, 211, 153, calc(.22 * var(--strength, 1))) 86.5%,
    rgba(209, 250, 229, calc(.7 * var(--strength, 1))) 89.5%,
    rgba(110, 231, 183, calc(.3 * var(--strength, 1))) 92.5%,
    transparent 96.5%);
}
/* (measured to the ring's edge, not its box's corner, which put the crest outside the circle) */
.act-ripple {
  background: radial-gradient(circle closest-side,
    transparent 72%,
    rgba(2, 20, 16, calc(.22 * var(--strength, 1))) 82%,
    rgba(52, 211, 153, calc(.18 * var(--strength, 1))) 86.5%,
    rgba(209, 250, 229, calc(.5 * var(--strength, 1))) 89.5%,
    rgba(110, 231, 183, calc(.22 * var(--strength, 1))) 92.5%,
    transparent 96.5%);
}
/* the chosen button's own ripple, from where you touched it: brighter, in its lit glass */
.act-ripple.own {
  z-index: 2; mix-blend-mode: screen;
  background: radial-gradient(circle closest-side,
    rgba(209, 250, 229, calc(.08 * var(--strength, 1))) 0%,
    transparent 55%,
    rgba(52, 211, 153, calc(.2 * var(--strength, 1))) 78%,
    rgba(236, 253, 245, calc(.55 * var(--strength, 1))) 86%,
    rgba(110, 231, 183, calc(.25 * var(--strength, 1))) 91%,
    transparent 97%);
}

/* ripple performance: no filters on the big rings or sparks (repainted every frame), each button paints its own effects
   only, and the moving parts get their own layers */
#activity .chip { contain: layout paint; }
.act-ripple, .act-spark { will-change: transform, opacity; }
.act-ripple:not(.own) { filter: none; }
.act-spark { filter: none; }

/* =================================================================== the outward wave, cheaply: three crests drawn as a
   gradient inside each button, their radii animated (no big scaled circles, no extra layers) */
@property --w1 { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --w2 { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --w3 { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --a1 { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --a2 { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --a3 { syntax: '<number>'; inherits: false; initial-value: 0; }
.act-wave {
  position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle at var(--rx) var(--ry), transparent calc(var(--w1) - 18px), rgba(2, 20, 16, calc(.14 * var(--a1))) calc(var(--w1) - 9px), rgba(52, 211, 153, calc(.12 * var(--a1))) calc(var(--w1) - 4px), rgba(209, 250, 229, calc(.32 * var(--a1))) var(--w1), rgba(110, 231, 183, calc(.13 * var(--a1))) calc(var(--w1) + 5px), transparent calc(var(--w1) + 11px)),
    radial-gradient(circle at var(--rx) var(--ry), transparent calc(var(--w2) - 14px), rgba(2, 20, 16, calc(.08 * var(--a2))) calc(var(--w2) - 7px), rgba(209, 250, 229, calc(.18 * var(--a2))) var(--w2), rgba(110, 231, 183, calc(.07 * var(--a2))) calc(var(--w2) + 4px), transparent calc(var(--w2) + 9px)),
    radial-gradient(circle at var(--rx) var(--ry), transparent calc(var(--w3) - 12px), rgba(209, 250, 229, calc(.09 * var(--a3))) var(--w3), transparent calc(var(--w3) + 8px));
  animation:
    act-wave-1 var(--wave-ms, 1300ms) cubic-bezier(.33, 1, .68, 1) both,
    act-wave-2 var(--wave-ms, 1300ms) cubic-bezier(.33, 1, .68, 1) 120ms both,
    act-wave-3 var(--wave-ms, 1300ms) cubic-bezier(.33, 1, .68, 1) 250ms both;
}
@keyframes act-wave-1 { 0% { --w1: 0px; --a1: 0; } 6% { --a1: 1; } 55% { --a1: .85; } 100% { --w1: var(--reach); --a1: 0; } }
@keyframes act-wave-2 { 0% { --w2: 0px; --a2: 0; } 6% { --a2: 1; } 55% { --a2: .85; } 100% { --w2: var(--reach); --a2: 0; } }
@keyframes act-wave-3 { 0% { --w3: 0px; --a3: 0; } 6% { --a3: 1; } 55% { --a3: .85; } 100% { --w3: var(--reach); --a3: 0; } }
.act-ripple.own { will-change: auto; }
@media (prefers-reduced-motion: reduce) { .act-wave { display: none; } }
/* the outward wave, softer: each crest a wide, smooth swell of light rather than a thin ring */
.act-wave {
  background:
    radial-gradient(circle at var(--rx) var(--ry),
      transparent calc(var(--w1) - 46px),
      rgba(52, 211, 153, calc(.035 * var(--a1))) calc(var(--w1) - 30px),
      rgba(110, 231, 183, calc(.09 * var(--a1))) calc(var(--w1) - 14px),
      rgba(209, 250, 229, calc(.15 * var(--a1))) var(--w1),
      rgba(110, 231, 183, calc(.07 * var(--a1))) calc(var(--w1) + 12px),
      transparent calc(var(--w1) + 28px)),
    radial-gradient(circle at var(--rx) var(--ry),
      transparent calc(var(--w2) - 38px),
      rgba(110, 231, 183, calc(.05 * var(--a2))) calc(var(--w2) - 16px),
      rgba(209, 250, 229, calc(.08 * var(--a2))) var(--w2),
      transparent calc(var(--w2) + 22px)),
    radial-gradient(circle at var(--rx) var(--ry),
      transparent calc(var(--w3) - 30px),
      rgba(209, 250, 229, calc(.04 * var(--a3))) var(--w3),
      transparent calc(var(--w3) + 18px));
}
/* (slower: the later crests follow further behind, and the glints and sparks linger to match) */
.act-wave { animation-delay: 0ms, 240ms, 500ms; }
#activity .chip.glint, #activity .chip.glint::after { animation-duration: 1.1s; }
.act-spark { animation-duration: 1.2s; }
.act-wave { animation-delay: 0ms, 170ms, 360ms; }
#activity .chip.glint, #activity .chip.glint::after { animation-duration: .8s; }
.act-spark { animation-duration: .86s; }
.act-wave { animation-delay: 0ms, 240ms, 500ms; }
#activity .chip.glint, #activity .chip.glint::after { animation-duration: 1.1s; }
.act-spark { animation-duration: 1.2s; }
/* home: the way back up to Summon */
.jump-btn.home-top { position: fixed; top: 84px; bottom: auto; right: 6px; z-index: 5; } /* the gold arrow, near the top, as in the chat */
.composer[hidden] .home-top, body.in-session .home-top { display: none; }
.zone-activity { scroll-margin-top: 8px; }
/* Audience: "How he teaches", centred between two fading lines */
.label.teach-head { display: flex; align-items: center; gap: 12px; width: 100%; justify-content: center; text-align: center; margin: 6px 0 2px; }
.label.teach-head::before, .label.teach-head::after { content: ''; flex: 1; height: 1px; max-width: 160px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--prog-hi, var(--gold)) 45%, transparent)); }
.label.teach-head::after { background: linear-gradient(90deg, color-mix(in srgb, var(--prog-hi, var(--gold)) 45%, transparent), transparent); }
/* two related switches side by side (card progress bars, and their soft ends) */
.toggle-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.toggle-pair .sub-toggle { margin: 0; padding: 0; border: 0; }
@media (max-width: 480px) { .toggle-pair { grid-template-columns: minmax(0, 1fr); } }
/* the smoke's look, with "Freeze the smoke" beside it */
.smoke-look-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: end; }
.smoke-look-row .toggle { padding-bottom: 8px; }
@media (max-width: 480px) { .smoke-look-row { grid-template-columns: minmax(0, 1fr); } }
.smoke-row { grid-template-columns: minmax(0, 1fr); } /* (the slider alone now; the freeze switch sits by the smoke's look) */

/* the browser voice: you have to be sure */
.not-rec-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.not-rec-confirm[hidden] { display: none; }
.shame-btn { --acc: #ef4444; color: #fecaca; border-color: rgba(248, 113, 113, .5); background: linear-gradient(150deg, rgba(248, 113, 113, .22), rgba(127, 29, 29, .18) 65%), rgba(12, 9, 22, .35); font-weight: 600; }
.shame-btn:hover { color: #fff; border-color: rgba(248, 113, 113, .8); }
.not-rec-confirm .ghost.small { font-size: 12.5px; color: var(--muted); }
#settingsSheet .voice-choice.confirming > button[data-v='browser'] { animation: shame-pulse 1.4s ease-in-out infinite; }
@keyframes shame-pulse { 50% { text-shadow: 0 0 14px rgba(248, 113, 113, .8); } }

/* the browser voice's "be sure" switch, in red */
.shame-toggle { --tog: #ef4444; margin-top: 4px; }
.shame-toggle b { color: #fecaca; }
/* (room between the smoke's look and the progress-bar switches) */
.smoke-look-row { margin-bottom: 14px; }
/* (the "be sure" switch is a switch, not a second warning heading) */
.not-rec-card .shame-toggle b { font-family: var(--ui); font-size: 14px; letter-spacing: 0; text-transform: none; color: #fecaca; }
.not-rec-card .shame-toggle b::before { content: none; }
/* UI/UX: the audio visualizer section set apart from the display options above it */
#setUI .set-heading.viz-heading { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
/* the current voice's "impostor" line: green (it's allowed, after all) */
.voice-kin.impostor { color: #86efac; }
/* home: a tiny sticker on the right of his face when someone else voices him */
.presence { position: relative; }
.voiced-by {
  position: absolute; top: 62%; left: calc(50% + 70px); rotate: -6deg; white-space: nowrap; pointer-events: auto; cursor: default;
  padding: 3px 9px; border-radius: 7px; font-family: var(--caps); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #d1fae5; background: linear-gradient(150deg, rgba(110, 231, 183, .2), rgba(16, 120, 88, .14)), rgba(10, 8, 20, .45);
  border: 1px solid rgba(110, 231, 183, .35); box-shadow: 0 4px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: sticker-in .45s cubic-bezier(.3, 1.5, .5, 1);
}
.voiced-by[hidden] { display: none; }
@keyframes sticker-in { from { opacity: 0; scale: .6; rotate: -14deg; } }
/* (portrait, "voiced by", the name: stacked, tilted the other way, a little lower) */
.voiced-by { top: 70%; rotate: 6deg; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 9px 7px; border-radius: 10px; text-align: center; }
.voiced-by img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.voiced-by small { font-size: 8px; letter-spacing: .18em; opacity: .75; }
.voiced-by b { font-family: var(--display); font-style: italic; font-size: 13px; letter-spacing: .02em; text-transform: none; font-weight: 600; }
@keyframes sticker-in { from { opacity: 0; scale: .6; rotate: 14deg; } }
/* (no card behind it all: just the portrait and the two words, each on its own small glass; a bit further right, smaller) */
.voiced-by { left: calc(50% + 92px); padding: 0; gap: 4px; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.voiced-by small, .voiced-by b {
  padding: 2px 7px; border-radius: 6px; line-height: 1.25;
  background: linear-gradient(150deg, rgba(110, 231, 183, .18), rgba(16, 120, 88, .12)), rgba(10, 8, 20, .5);
  border: 1px solid rgba(110, 231, 183, .3); box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.voiced-by small { font-size: 7px; letter-spacing: .18em; opacity: 1; color: #a7f3d0; }
.voiced-by b { font-size: 11px; }
.voiced-by img { width: 30px; height: 30px; border: 1px solid rgba(110, 231, 183, .35); }
.voiced-by { top: 56%; left: calc(50% + 84px); }
.voiced-by { top: 60%; left: calc(50% + 104px); }
.voiced-by small, .voiced-by b { border: 0; border-radius: 3px; background: rgba(60, 58, 70, .72); color: #e6e4ee; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
/* (portrait on the left, "voiced by" and the name beside it, left-aligned) */
.voiced-by { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 6px; row-gap: 3px; align-items: center; justify-items: start; text-align: left; }
.voiced-by img { grid-row: 1 / 3; border-color: rgba(255, 255, 255, .55); }
.voiced-by small { align-self: end; }
.voiced-by b { align-self: start; }
.voiced-by { top: calc(60% + 34px); } /* (where the words sat when the portrait was above them) */
.voiced-by img { border-color: rgba(255, 255, 255, .22); }
.voiced-by img { width: 38px; height: 38px; border-radius: 9px; } .voiced-by { top: calc(60% + 30px); } /* (bigger portrait; the words stay where they were) */

/* choosing a cover: one soft wave of light through the others (the activity ripple, pared down) */
@property --cw { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ca { syntax: '<number>'; inherits: false; initial-value: 0; }
.book .cover { isolation: isolate; }
.cover-wave {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--rx) var(--ry),
    transparent calc(var(--cw) - 40px),
    rgba(255, 255, 255, calc(.05 * var(--ca))) calc(var(--cw) - 16px),
    rgba(255, 255, 255, calc(.12 * var(--ca))) var(--cw),
    rgba(255, 255, 255, calc(.04 * var(--ca))) calc(var(--cw) + 14px),
    transparent calc(var(--cw) + 28px));
  animation: cover-wave 1.5s cubic-bezier(.33, 1, .68, 1) both;
}
@keyframes cover-wave { 0% { --cw: 0px; --ca: 0; } 8% { --ca: 1; } 55% { --ca: .8; } 100% { --cw: var(--reach); --ca: 0; } }
@media (prefers-reduced-motion: reduce) { .cover-wave { display: none; } }
.cover-wave {
  animation: cover-wave 2s cubic-bezier(.3, .55, .45, 1) both;
  background: radial-gradient(circle at var(--rx) var(--ry),
    transparent calc(var(--cw) - 44px),
    rgba(255, 255, 255, calc(.06 * var(--ca))) calc(var(--cw) - 18px),
    rgba(255, 255, 255, calc(.16 * var(--ca))) var(--cw),
    rgba(255, 255, 255, calc(.05 * var(--ca))) calc(var(--cw) + 14px),
    transparent calc(var(--cw) + 30px));
}
.cover-wave {
  mix-blend-mode: screen;
  background: radial-gradient(circle at var(--rx) var(--ry),
    transparent calc(var(--cw) - 50px),
    rgba(255, 255, 255, calc(.08 * var(--ca))) calc(var(--cw) - 22px),
    rgba(255, 255, 255, calc(.26 * var(--ca))) var(--cw),
    rgba(255, 255, 255, calc(.07 * var(--ca))) calc(var(--cw) + 16px),
    transparent calc(var(--cw) + 34px));
}
.cover-wave { animation: cover-wave 2.4s cubic-bezier(.45, 0, .25, 1) both; } /* (eases in, sweeps out, eases to a stop) */
.cover-wave { animation-timing-function: cubic-bezier(.35, .25, .85, .75); } /* (already moving at the start, then quickening) */
/* (it carries much further, fading steadily as it goes) */
@keyframes cover-wave { 0% { --cw: 0px; --ca: 0; } 6% { --ca: 1; } 35% { --ca: .6; } 65% { --ca: .28; } 100% { --cw: var(--reach); --ca: 0; } }
.cover-wave { animation-duration: 3.2s; }

/* =================================================================== the chosen cover: no coloured border; a little white
   smoke rising behind it instead, from beneath its name (its own wisps, nothing like the room's smoke) */
.book.chosen .cover, .studio .book.chosen .cover, .screen-tile.chosen .cover, .studio .screen-tile.chosen .cover, .studio .lit-row .book.chosen .cover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4); transform: translateY(-2px);
}
.book { position: relative; isolation: isolate; }
.book.chosen::before, .book.chosen::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: -18%; right: -18%; bottom: -6px; height: 125%;
  background:
    radial-gradient(28% 18% at 50% 92%, rgba(255, 255, 255, .34), transparent 70%),
    radial-gradient(22% 16% at 36% 70%, rgba(255, 255, 255, .22), transparent 72%),
    radial-gradient(24% 15% at 62% 50%, rgba(255, 255, 255, .18), transparent 72%),
    radial-gradient(20% 14% at 44% 28%, rgba(255, 255, 255, .12), transparent 72%),
    radial-gradient(18% 12% at 58% 10%, rgba(255, 255, 255, .07), transparent 72%);
  filter: blur(9px);
  opacity: 0;
  animation: chosen-smoke 5.5s ease-in-out infinite;
}
.book.chosen::after {
  left: -10%; right: -26%;
  background:
    radial-gradient(24% 16% at 54% 90%, rgba(255, 255, 255, .26), transparent 70%),
    radial-gradient(20% 14% at 66% 64%, rgba(255, 255, 255, .17), transparent 72%),
    radial-gradient(22% 14% at 40% 42%, rgba(255, 255, 255, .13), transparent 72%),
    radial-gradient(18% 12% at 56% 18%, rgba(255, 255, 255, .07), transparent 72%);
  animation-duration: 7s; animation-delay: -2.6s;
}
@keyframes chosen-smoke {
  0% { opacity: 0; transform: translate(0, 18%) scale(.9, .85) skewX(0deg); }
  18% { opacity: 1; }
  50% { transform: translate(-4%, -2%) scale(1, 1) skewX(-4deg); }
  80% { opacity: .75; }
  100% { opacity: 0; transform: translate(5%, -16%) scale(1.08, 1.12) skewX(3deg); }
}
@media (prefers-reduced-motion: reduce) { .book.chosen::before, .book.chosen::after { animation: none; opacity: .6; } }
.book.chosen::before { left: -32%; right: -32%; } .book.chosen::after { left: -24%; right: -40%; } /* (wide enough to curl out past the cover's sides) */
.book.chosen .cover, .book.chosen .cover img { border-radius: 0; } /* (the chosen one: square corners, like a real book or box)*/

/* the chosen cover's fire and smoke: a canvas behind it (the CSS haze before it is gone) */
.book.chosen::before, .book.chosen::after { content: none; }
.chosen-fire { position: absolute; left: 50%; bottom: 0; translate: -50% 0; z-index: -1; pointer-events: none; }
/* (the fire's canvas sits on the panel, beneath the shelves' covers) */
.panel { position: relative; }
.chosen-fire { left: 0; bottom: auto; translate: none; z-index: 0; }
.screen-row, .lit-row { position: relative; z-index: 1; }
/* (behind everything in the panel: the covers, labels and fields stay on top of the smoke) */
.panel { isolation: isolate; }
.chosen-fire { z-index: -1; }
.screen-row, .lit-row { z-index: auto; }
.chosen-fire { -webkit-mask-image: radial-gradient(ellipse 50% 52% at 50% 56%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 50% 52% at 50% 56%, #000 45%, transparent 100%); } /* (no hard edges) */
.chosen-fire { -webkit-mask-image: radial-gradient(ellipse 50% 92% at 50% 100%, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 50% 92% at 50% 100%, #000 52%, transparent 100%); } /* (the fire at the bottom fully seen; the smoke fades out up and to the sides) */
/* the chosen cover: its corners square off smoothly, and its art shows in full (no fade, no grey, no glass over it) */
.book .cover, .book .cover img { transition: border-radius .45s cubic-bezier(.3, .7, .3, 1), opacity .35s, filter .35s, transform .35s, box-shadow .35s; }
.book .cover::before { transition: opacity .35s; }
.book.chosen .cover img, .lit-row .book.chosen .cover img, .screen-tile.chosen .cover img { opacity: 1; filter: none; }
.book.chosen .cover::before { opacity: 0; }
.chosen-fire { z-index: 3; } /* (the embers drift in front of the covers) */
/* (the sparks' canvas covers the whole panel now: no mask, top-left, above the covers) */
.chosen-fire { left: 0; top: 0; bottom: auto; -webkit-mask-image: none; mask-image: none; z-index: 3; }
/* card progress bars: half as long again; their soft ends fade over a shorter stretch, so the bar's start and end show */
.card-bar { width: 22.5%; min-width: 60px; }
body.card-bar-fade .card-bar {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .45) 6%, rgba(0, 0, 0, .82) 13%, #000 20%, #000 80%, rgba(0, 0, 0, .82) 87%, rgba(0, 0, 0, .45) 94%, rgba(0, 0, 0, .1) 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .45) 6%, rgba(0, 0, 0, .82) 13%, #000 20%, #000 80%, rgba(0, 0, 0, .82) 87%, rgba(0, 0, 0, .45) 94%, rgba(0, 0, 0, .1) 100%);
}