@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&display=swap");
/* Hooper Buddy design system - shared by every page. */
:root{
  --bg:#07090d; --bg2:#0b0f16; --panel:#0e131b; --panel2:#131a25; --line:#1d2634;
  --ink:#f2f5fa; --mute:#8395ad; --dim:#5d6b80;
  --hot:#ff5a1f; --hot2:#ffa24d;
  --good:#22d97a; --bad:#ff3b5c; --cool:#2ea8ff; --grape:#9d6bff;
  --mono:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
button:disabled{opacity:.35;cursor:not-allowed}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#1f2937;border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

/* ------------------------------------------------------------ companion */
.companion{display:block;overflow:visible}
.companion.idle .c-body{animation:bob 3.4s ease-in-out infinite;transform-origin:50% 92%}
@keyframes bob{
  0%,100%{transform:translateY(0) scale(1,1)}
  45%{transform:translateY(-6%) scale(.985,1.015)}
  60%{transform:translateY(0) scale(1.03,.97)}
}
.c-eyes{transition:transform .08s}
.c-eyes.blinking{transform:scaleY(.12);transform-origin:50% 48%}
.companion.talking .c-mouth{animation:yap .26s ease-in-out infinite alternate;transform-origin:50% 68%}
@keyframes yap{from{transform:scaleY(.55)}to{transform:scaleY(1.45)}}
.companion.talking .c-body{animation:bob 1.1s ease-in-out infinite}

/* --------------------------------------------------------------- shared */
.mark{font:800 19px/1 var(--mono);letter-spacing:-.6px;display:flex;align-items:center;gap:9px}
.mark i{width:11px;height:11px;border-radius:50%;background:var(--hot);box-shadow:0 0 14px var(--hot);font-style:normal}
.mark span{color:var(--hot)}
.mark .mark-logo{width:30px;height:30px;flex:none;display:block}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:11px;font-weight:700;
  background:var(--panel2);border:1px solid var(--line);transition:.14s;
}
.btn:hover:not(:disabled){background:#1b2534;transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--hot),#ff8a3d);color:#0a0a0a;border-color:transparent}
.btn.primary:hover:not(:disabled){box-shadow:0 8px 28px rgba(255,90,31,.42)}
.btn.ghost{background:transparent}
.btn.wide{width:100%}
.btn.lg{padding:16px 30px;font-size:16px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card h3{font:700 10px/1 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--mute);margin-bottom:14px}

.pill{display:inline-block;padding:5px 11px;border-radius:999px;font:700 10px/1 var(--mono);letter-spacing:1.1px;text-transform:uppercase}
.pill.hot{background:rgba(255,90,31,.14);color:var(--hot);border:1px solid rgba(255,90,31,.32)}
.pill.good{background:rgba(34,217,122,.13);color:var(--good);border:1px solid rgba(34,217,122,.3)}
.pill.cool{background:rgba(46,168,255,.13);color:var(--cool);border:1px solid rgba(46,168,255,.3)}

.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(100px);
  background:var(--panel2);border:1px solid var(--line);border-radius:11px;
  padding:13px 22px;font-weight:600;transition:.3s;z-index:200;box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.err{border-color:var(--bad);color:var(--bad)}

.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:13px;text-align:center}
.stat b{display:block;font:800 23px/1 var(--mono);color:var(--hot);letter-spacing:-.8px}
.stat small{display:block;font:600 9px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--mute);margin-top:6px}

.bar{height:6px;background:#141c28;border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--hot),var(--hot2));width:0;transition:width .4s}


/* ============================================================ theming
   Night is the base (:root above). Day flips the tokens. data-theme is set
   by /js/theme.js before first paint, so the switch is instant on every page. */
:root[data-theme="day"]{
  --bg:#ffffff; --bg2:#f7f8fb; --panel:#ffffff; --panel2:#f3f5f9; --line:#e4e8ef;
  --ink:#0f1522; --mute:#1f2937; --dim:#4b5565;
  --hot:#ff5a1f; --hot2:#ff8a3d;
  --good:#12b366; --bad:#e6284d; --cool:#1b8ae6; --grape:#7d4dff;
}
:root[data-theme="day"] body{background:radial-gradient(1200px 600px at 10% -10%,rgba(255,90,31,.12),transparent 60%),radial-gradient(900px 500px at 100% 0,rgba(27,138,230,.10),transparent 55%),radial-gradient(700px 400px at 50% 100%,rgba(125,77,255,.08),transparent 60%),var(--bg) fixed}
:root[data-theme="day"] ::-webkit-scrollbar-thumb{background:#d5dbe5}
:root[data-theme="day"] .card,:root[data-theme="day"] .stat,:root[data-theme="day"] .tile,:root[data-theme="day"] .sitem,:root[data-theme="day"] .pick button,:root[data-theme="day"] .sheet,:root[data-theme="day"] .dock,:root[data-theme="day"] .talkbar,:root[data-theme="day"] .feat,:root[data-theme="day"] .price{box-shadow:0 1px 2px rgba(15,21,34,.04),0 10px 28px rgba(15,21,34,.07)}
:root[data-theme="day"] .rail{background:var(--panel);border-right:1px solid var(--line)}
:root[data-theme="day"] .stage{background:#0b0f16}
:root[data-theme="day"] .msg{background:rgba(255,255,255,.94);color:#0f1522;border-color:rgba(15,21,34,.08)}
:root[data-theme="day"] .msg.coach{background:rgba(255,241,234,.96)}
:root[data-theme="day"] .hud .tile{background:rgba(255,255,255,.92);color:#0f1522}
:root[data-theme="day"] .msg .who,:root[data-theme="day"] .tline .t,:root[data-theme="day"] #dockCount,:root[data-theme="day"] .dock footer,:root[data-theme="day"] .stat small,:root[data-theme="day"] .tile small,:root[data-theme="day"] .roster small,:root[data-theme="day"] .sitem small,:root[data-theme="day"] .lab small,:root[data-theme="day"] .legal .upd,:root[data-theme="day"] .hero-s .fine,:root[data-theme="day"] footer.site{color:#374151!important}
:root[data-theme="day"] input,:root[data-theme="day"] select,:root[data-theme="day"] textarea{background:#fff;color:#0f1522;border:1px solid #cbd2dc}
:root[data-theme="day"] nav.top{background:rgba(255,255,255,.84)}
:root[data-theme="day"] .price li{border-bottom-color:var(--line)}

/* colour, both themes: every surface carries a brand accent */
.card,.feat,.price,.stat,.sitem{position:relative;overflow:hidden}
.card::before,.feat::before,.stat::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--hot),var(--hot2),var(--cool),var(--grape));opacity:.9}
.card:nth-of-type(2n)::before,.feat:nth-child(2n)::before{background:linear-gradient(90deg,var(--cool),var(--grape),var(--hot))}
.card:nth-of-type(3n)::before,.feat:nth-child(3n)::before{background:linear-gradient(90deg,var(--good),var(--cool),var(--hot2))}
.stat b,.tile b,.price .amt,.score{background:linear-gradient(120deg,var(--hot),var(--hot2));-webkit-background-clip:text;background-clip:text;color:transparent}
h1,h2,.vhead h1{letter-spacing:-.6px}
.card,.sitem,.pick button,.stat,.feat,.roster div{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover,.sitem:hover,.pick button:hover,.stat:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(255,90,31,.14);border-color:rgba(255,90,31,.4)}
.btn{transition:transform .12s ease,box-shadow .18s ease,filter .18s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.primary{background:linear-gradient(135deg,var(--hot),var(--hot2));color:#fff;box-shadow:0 8px 22px rgba(255,90,31,.32)}
.btn.primary:hover{box-shadow:0 12px 30px rgba(255,90,31,.42)}
.rail button.on{background:rgba(255,90,31,.14);box-shadow:inset 0 0 0 1px rgba(255,90,31,.35)}
.rail button[data-view="dashboard"].on{background:rgba(255,90,31,.14)}
.rail button[data-view="train"].on{background:rgba(18,179,102,.16);box-shadow:inset 0 0 0 1px rgba(18,179,102,.4)}
.rail button[data-view="sessions"].on{background:rgba(27,138,230,.16);box-shadow:inset 0 0 0 1px rgba(27,138,230,.4)}
.rail button[data-view="brain"].on{background:rgba(125,77,255,.16);box-shadow:inset 0 0 0 1px rgba(125,77,255,.4)}
.price.best::before{color:#fff}
.rail .logo{width:44px;height:44px;border-radius:12px;background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center;transition:transform .2s;cursor:pointer}
.rail .logo:hover{transform:rotate(-8deg) scale(1.08)}

/* day / night switch */
.theme-sw{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font:800 11px/1 var(--mono);letter-spacing:.4px;color:var(--mute);cursor:pointer;transition:.18s}
.theme-sw:hover{border-color:var(--hot);color:var(--ink)}
.theme-sw i{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#ffbe6b,#ff5a1f);box-shadow:0 0 10px rgba(255,90,31,.5);font-style:normal;transition:.25s}
:root[data-theme="day"] .theme-sw i{background:linear-gradient(135deg,#7d4dff,#1b8ae6);box-shadow:0 0 10px rgba(27,138,230,.5)}
.rail .theme-sw{padding:8px;border-radius:12px;margin-bottom:6px}
.rail .theme-sw span{display:none}

:root[data-theme="day"] .hero{background:linear-gradient(135deg,#fff7f2,#f3f7ff 60%,#f6f2ff);border-color:rgba(255,90,31,.25)}
:root[data-theme="day"] .hero h2,:root[data-theme="day"] .hero p{color:var(--ink)}
:root[data-theme="day"] .gate h2,:root[data-theme="day"] .gate p{color:#f2f5fa}

/* brain view follows the theme */
:root[data-theme="day"] .brainwrap{background:radial-gradient(circle at 50% 45%,#ffffff,#eef2f8)}
.legend div{color:var(--ink)!important;font-weight:800}
.legend{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.nodecard{background:var(--panel)!important;border:1px solid var(--line)!important;color:var(--ink)!important;box-shadow:0 12px 30px rgba(15,21,34,.14)}
.nodecard b{color:var(--ink)!important}
.nodecard small{color:var(--mute)!important}
.brainwrap canvas{cursor:pointer}

/* rail tabs: smooth, reactive */
.rail button{transition:transform .16s cubic-bezier(.2,.9,.3,1.3),background .18s,color .18s,box-shadow .18s;border-radius:14px}
.rail button:hover{transform:translateY(-2px) scale(1.08);background:rgba(255,90,31,.10)}
.rail button:active{transform:scale(.94)}
.rail button.on{transform:scale(1.06)}
.rail button.on::before{transition:height .2s,top .2s}
.rail button:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
:root[data-theme="day"] .rail button:hover{background:rgba(255,90,31,.10);color:var(--ink)}
.view{animation:viewin .28s ease}
@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* rail tooltips: solid, big, readable in both themes */
.rail .tip{background:var(--ink)!important;color:var(--bg)!important;border:0!important;font:800 13px/1 var(--mono)!important;padding:9px 13px!important;border-radius:10px!important;box-shadow:0 8px 24px rgba(0,0,0,.25);transform:translateX(-6px);letter-spacing:.2px}
.rail button:hover .tip{opacity:1;transform:translateX(0)}
.rail .theme-sw .tip{display:inline-block!important}

/* talk bar can be dismissed and brought back */
.talkbar{transition:transform .28s cubic-bezier(.2,.9,.3,1.2),opacity .2s}
.talkbar.hidden{transform:translateY(120%);opacity:0;pointer-events:none}
.talkbar .close{flex:none;width:30px;height:30px;border-radius:50%;background:var(--panel2);color:var(--mute);font:900 14px/1 var(--mono);display:grid;place-items:center;transition:.16s}
.talkbar .close:hover{background:var(--bad);color:#fff}
.talk-reopen{position:fixed;left:50%;bottom:18px;transform:translate(-50%,0);z-index:80;display:none;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 30px rgba(15,21,34,.18);font:800 12px/1 var(--mono);color:var(--ink);transition:.16s}
.talk-reopen.on{display:flex}
.talk-reopen:hover{transform:translate(-50%,-3px);border-color:var(--hot)}

/* secondary buttons, bars and talk bar readable in day mode */
:root[data-theme="day"] .btn:not(.primary){background:#fff;color:var(--ink);border:1px solid #cbd2dc}
:root[data-theme="day"] .btn:not(.primary):hover:not(:disabled){background:#fff3ec;border-color:var(--hot);color:var(--hot)}
:root[data-theme="day"] .bar{background:#e4e8ef}
:root[data-theme="day"] .talkbar{background:#fff;border:1px solid var(--line)}
:root[data-theme="day"] .talkbar input{color:var(--ink)}
:root[data-theme="day"] .talkbar input::placeholder{color:#4b5565}
:root[data-theme="day"] .talkbar .mic{color:var(--ink)}

/* ============================================================ 3D companion
   .c3d carries --size, --aura, --aura2. State classes drive the aura so the
   player always knows: idle / listening / thinking / talking. */
.c3d{position:relative;width:var(--size);height:var(--size);display:grid;place-items:center;isolation:isolate}
.c3d-img{position:relative;z-index:2;width:86%;height:86%;object-fit:contain;filter:drop-shadow(0 calc(var(--size)*.06) calc(var(--size)*.12) rgba(15,21,34,.35));transform-origin:50% 90%;animation:c3d-idle 3.6s ease-in-out infinite}
.c3d-aura{position:absolute;inset:0;border-radius:50%;z-index:0;background:radial-gradient(circle,var(--aura) 0%,var(--aura2) 38%,transparent 72%);opacity:.55;filter:blur(calc(var(--size)*.06));animation:c3d-breathe 3.6s ease-in-out infinite}
.c3d-ring{position:absolute;inset:4%;border-radius:50%;z-index:1;opacity:0;transition:opacity .3s}
.c3d-dots{position:absolute;inset:0;z-index:3;opacity:0;transition:opacity .3s;animation:c3d-spin 2.4s linear infinite}
.c3d-dots i{position:absolute;left:50%;top:0;width:calc(var(--size)*.07);height:calc(var(--size)*.07);margin-left:calc(var(--size)*-.035);border-radius:50%;background:#fff;box-shadow:0 0 12px var(--aura)}
.c3d-dots i:nth-child(2){transform:rotate(120deg);transform-origin:50% calc(var(--size)*.5)}
.c3d-dots i:nth-child(3){transform:rotate(240deg);transform-origin:50% calc(var(--size)*.5)}
@keyframes c3d-idle{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3%) rotate(1deg)}}
@keyframes c3d-breathe{0%,100%{transform:scale(.92);opacity:.45}50%{transform:scale(1.02);opacity:.6}}
@keyframes c3d-spin{to{transform:rotate(360deg)}}
@keyframes c3d-pulse{0%,100%{transform:scale(.95);opacity:.75}50%{transform:scale(1.18);opacity:1}}
@keyframes c3d-bob{0%,100%{transform:translateY(0) scale(1)}25%{transform:translateY(-4%) scale(1.03,.98)}50%{transform:translateY(0) scale(.98,1.03)}75%{transform:translateY(-2%) scale(1.02,.99)}}
@keyframes c3d-listen{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.25);opacity:0}}
/* listening: green ring rippling outward */
.c3d.state-listening .c3d-aura{background:radial-gradient(circle,#12b366 0%,#22d97a 34%,transparent 70%);animation:c3d-breathe 1.4s ease-in-out infinite}
.c3d.state-listening .c3d-ring{opacity:1;border:3px solid #22d97a;animation:c3d-listen 1.2s ease-out infinite}
.c3d.state-listening .c3d-img{animation:c3d-idle 1.8s ease-in-out infinite}
/* thinking: dashed ring turning, dots orbiting */
.c3d.state-thinking .c3d-aura{background:radial-gradient(circle,#7d4dff 0%,#1b8ae6 40%,transparent 72%);animation:c3d-breathe 2s ease-in-out infinite}
.c3d.state-thinking .c3d-ring{opacity:1;border:3px dashed #c1a6ff;animation:c3d-spin 3s linear infinite}
.c3d.state-thinking .c3d-dots{opacity:1}
.c3d.state-thinking .c3d-img{animation:none;transform:rotate(-6deg) translateY(2%)}
/* talking: aura pulses to the voice, character bobs */
.c3d.state-talking .c3d-aura{opacity:.9;animation:c3d-pulse .55s ease-in-out infinite}
.c3d.state-talking .c3d-ring{opacity:1;border:2px solid rgba(255,255,255,.55);animation:c3d-pulse .55s ease-in-out infinite reverse}
.c3d.state-talking .c3d-img{animation:c3d-bob .5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.c3d *{animation-duration:6s!important}}
.c3d-legend{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px;font:800 10px/1 var(--mono);letter-spacing:.4px;color:var(--mute);text-transform:uppercase}
.c3d-legend span{display:inline-flex;align-items:center;gap:5px}
.c3d-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.c3d-legend .l-idle{background:var(--hot);opacity:.6}.c3d-legend .l-listen{background:#22d97a}.c3d-legend .l-think{background:#7d4dff}.c3d-legend .l-talk{background:var(--hot);box-shadow:0 0 8px var(--hot)}

/* ============================================================ SoulTown radio */
.radio{position:fixed;left:18px;bottom:18px;width:300px;z-index:90;--accent:var(--hot);background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 60px rgba(15,21,34,.22);overflow:hidden;transition:transform .28s cubic-bezier(.2,.9,.3,1.2)}
.radio.min .radio-body{display:none}
.radio-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;text-align:left}
.radio-art{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.radio-dot{width:10px;height:10px;border-radius:50%;background:var(--dim);flex:none}
.radio.live .radio-dot{background:var(--accent);box-shadow:0 0 12px var(--accent);animation:c3d-breathe 1.2s ease-in-out infinite}
.radio-meta{min-width:0;flex:1}
.radio-meta b{display:block;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio-meta small{display:block;font:700 11px/1.3 var(--mono);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio-body{padding:0 12px 12px;border-top:1px solid var(--line)}
.radio-ctl{display:flex;align-items:center;gap:8px;padding:12px 0 8px}
/* Transport buttons, used by the corner player and by the music tab.
   --accent is only declared on .radio, so on the music tab the old gradient
   referenced an undefined variable: the whole background declaration was thrown
   away, which left a white glyph sitting on a white card in the day theme.
   The fill is brand tokens now and the glyph is --ink, dark in day, light in
   night, so these read on any surface in either theme. */
.rbtn{position:relative;width:38px;height:38px;border-radius:50%;
  background:rgba(255,90,31,.12);border:1px solid rgba(255,90,31,.34);color:var(--ink);
  font-size:15px;display:grid;place-items:center;transition:.16s}
.rbtn:hover{transform:scale(1.08);border-color:var(--hot);background:rgba(255,90,31,.2)}
.rbtn:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.rbtn svg{display:block}
/* play is the one button that is always the next thing to press, in both
   players: .big is the corner player's play button. The glyph is --on-hot, not
   white: white measured 3.1 to 1 at the --hot end of the gradient and 2.0 to 1
   at the --hot2 end, so the play arrow was the palest thing on the most pressed
   button in the app. */
.rbtn.primary,.rbtn.primary:hover,.radio .rbtn.big,.radio .rbtn.big:hover{background:linear-gradient(135deg,var(--hot),var(--hot2));border-color:transparent;color:var(--on-hot)}
.rbtn.primary,.radio .rbtn.big{box-shadow:0 8px 20px rgba(255,90,31,.34)}
/* shuffle and repeat while they are on: filled, with a ring so it reads at a glance */
.rbtn.on,.rbtn.on:hover{background:var(--hot);border-color:var(--hot);color:var(--on-hot)}
.rbtn.on{box-shadow:0 0 0 3px rgba(255,90,31,.24)}
.radio-ctl input[type=range]{flex:1;accent-color:var(--accent)}
.radio-mode{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.radio-mode button{padding:8px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);font:800 10.5px/1.3 var(--mono);color:var(--mute);transition:.16s}
.radio-mode button.on{background:rgba(255,90,31,.12);border-color:var(--accent);color:var(--ink)}
.radio-foot{display:block;margin-top:9px;font:700 10px/1 var(--mono);color:var(--dim);letter-spacing:.4px}
@media(max-width:900px){.radio{width:240px}}

/* ============================================================ vault */
.rec{position:absolute;right:12px;top:12px;z-index:6;display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font:900 11px/1 var(--mono);letter-spacing:1px}
.rec i{width:9px;height:9px;border-radius:50%;background:#ff3b5c;box-shadow:0 0 10px #ff3b5c;animation:c3d-breathe 1s ease-in-out infinite}
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.clip{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.clip:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(255,90,31,.14);border-color:var(--hot)}
.clip .thumb{aspect-ratio:16/9;background:#0b0f16 center/cover;position:relative}
.clip .thumb span{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.7);color:#fff;font:800 11px/1 var(--mono);padding:4px 7px;border-radius:6px}
.clip b{display:block;padding:10px 12px 2px;font-size:13.5px;color:var(--ink)}
.clip small{display:block;padding:0 12px 12px;font:700 11px/1.4 var(--mono);color:var(--mute)}
.sw-row{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700}
.vault-h{font-size:13px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.cloudmeter{margin-top:14px;padding:14px;border-radius:14px;background:var(--panel2);border:1px solid var(--line)}
.cm-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;margin-bottom:8px}
.cm-row.small{font-size:12px;color:var(--mute);margin:8px 0 0}
.clip .thumb em{position:absolute;left:8px;top:8px;background:var(--cool);color:#fff;font:900 9px/1 var(--mono);letter-spacing:1px;padding:4px 7px;border-radius:6px;font-style:normal}

/* ============================================================ mobile: no horizontal scroll */
html,body{max-width:100%;overflow-x:clip}
img,video,svg,canvas{max-width:100%}
.wrap{max-width:100%;box-sizing:border-box}
@media(max-width:700px){
  nav.top .wrap{gap:10px;padding-left:14px;padding-right:14px}
  nav.top .links{gap:10px}
  nav.top .links a:not(.btn),nav.top .links .theme-sw span{display:none}
  .hero-s{padding:44px 0 40px}
  .hero-s .balls{height:auto;flex-wrap:wrap;gap:6px;justify-content:center;perspective:none}
  .hero-s .balls>div{width:56px!important;margin:0!important;animation:none!important;transform:none!important}
  .hero-s .balls>div img,.hero-s .balls>div svg{width:56px;height:56px}
  .hero-s h1{font-size:30px;letter-spacing:-1px}
  section.band{padding:40px 0}
  .prices,.feats,.uses,.voices,.paths,.roster,.music-row,.why{grid-template-columns:1fr!important}
  .cmp-wrap{margin:0 -6px}
  .cmp{min-width:520px;font-size:12.5px}
  .cmp th,.cmp td{padding:10px 8px}
  .demo-shot{transform:none;padding:18px}
  .vsl-frame{transform:none}
  .tilt{transform:none!important}
  .orb{display:none}
  footer.site .wrap{flex-direction:column;align-items:flex-start}
  footer.site .links{margin-left:0;flex-wrap:wrap}
  .legal .tabs button{flex:1}
}
/* app on small screens */
@media(max-width:900px){
  .train-grid{grid-template-columns:1fr}
  .shell{grid-template-columns:56px 1fr}
  .rail{padding:10px 6px}
  .rail .logo{width:36px;height:36px}
  .radio{width:calc(100vw - 36px);left:18px;bottom:78px}
  .dock{width:calc(100vw - 36px);right:18px}
  .talkbar{width:calc(100vw - 36px);left:18px;transform:none}
  .talkbar.hidden{transform:translateY(120%)}
  .hero{grid-template-columns:1fr;text-align:center}
  .hero>div:first-child{margin:0 auto}
  .dash-grid,.grid-stats{grid-template-columns:1fr 1fr}
}

/* elements in the HUD, pop and feed */
.pop{display:flex;align-items:center;gap:8px}
.pop svg{filter:drop-shadow(0 0 12px currentColor)}
.tile.el b{font-size:15px;display:inline-flex;align-items:center;gap:6px;-webkit-text-fill-color:currentColor;background:none}
.msg .el{flex:none;display:inline-flex;align-items:center;margin-top:1px}
.chip svg{vertical-align:-2px;margin-right:2px}

/* ============================================================ companion room */
.room{position:relative;display:grid;grid-template-columns:1fr 320px;gap:16px;min-height:calc(100vh - 60px);border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.room-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 30% 30%,var(--aura,#ff5a1f) 0%,transparent 45%),radial-gradient(circle at 70% 70%,#1b8ae6 0%,transparent 45%),radial-gradient(circle at 50% 100%,#7d4dff 0%,transparent 50%),var(--bg2);opacity:.55;animation:roomdrift 18s ease-in-out infinite alternate;filter:blur(30px);transform:scale(1.2)}
@keyframes roomdrift{from{transform:scale(1.2) translate(0,0) rotate(0)}to{transform:scale(1.3) translate(4%,-3%) rotate(6deg)}}
.room-stage{position:relative;z-index:1;display:grid;place-items:center;padding:30px}
.room-face{text-align:center}
.room-face h2{font-size:30px;font-weight:900;margin-top:10px}
.room-face p{color:var(--mute);max-width:44ch;margin:8px auto 0;line-height:1.6}
.room-screen{width:100%;max-width:820px;background:#0b0f16;border-radius:18px;padding:14px;box-shadow:0 30px 80px rgba(0,0,0,.4);border:6px solid var(--panel)}
.room-screen video{width:100%;border-radius:10px;background:#000;display:block}
.room-bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.room-meta{color:#c9d6ff;font:700 12px/1.5 var(--mono);margin-top:8px}
.room-side{position:relative;z-index:1;background:var(--panel);border-left:1px solid var(--line);padding:18px;overflow:auto}
.room-side .sub{color:var(--mute);font-size:13px;line-height:1.55}
.room-clips{display:grid;gap:8px;margin-top:12px}
.room-clips button{text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;transition:.16s}
.room-clips button:hover{border-color:var(--hot);transform:translateX(4px)}
.room-clips .th{width:64px;height:40px;border-radius:8px;background:#0b0f16 center/cover}
.room-clips b{display:block;font-size:13px;color:var(--ink)}
.room-clips small{font:700 11px/1.4 var(--mono);color:var(--mute)}
.room.watching .room-face{display:none}
@media(max-width:900px){.room{grid-template-columns:1fr}.room-side{border-left:0;border-top:1px solid var(--line)}}

/* ============================================================ journal */
.jgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.jgrid{grid-template-columns:1fr}}
#jText{width:100%;border-radius:12px;border:1px solid var(--line);padding:12px;font:inherit;background:var(--bg);color:var(--ink);resize:vertical}
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.bgrid label{display:grid;gap:4px;font:800 10px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--mute)}
.bgrid input{padding:9px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:600 14px var(--sans)}
.days{display:flex;flex-wrap:wrap;gap:6px}
.days span{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font:800 11px/1 var(--mono);background:var(--panel2);border:1px solid var(--line);color:var(--mute)}
.days span.t{background:rgba(255,90,31,.16);border-color:var(--hot);color:var(--ink)}
.jlist{display:grid;gap:10px;max-height:70vh;overflow:auto}
.jentry{padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);position:relative}
.jentry .k{font:900 9px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;padding:4px 7px;border-radius:999px;display:inline-block;margin-bottom:6px}
.jentry .k.note{background:rgba(255,90,31,.14);color:var(--hot)}.jentry .k.talk{background:rgba(125,77,255,.14);color:var(--grape)}.jentry .k.session{background:rgba(18,179,102,.14);color:var(--good)}.jentry .k.body{background:rgba(27,138,230,.14);color:var(--cool)}
.jentry p{font-size:13.5px;line-height:1.55;color:var(--ink)}
.jentry .you{font-size:12.5px;color:var(--mute);margin-bottom:4px}
.jentry small{display:block;font:700 10px/1 var(--mono);color:var(--dim);margin-top:8px}
.jentry .x{position:absolute;right:10px;top:10px;color:var(--dim);font-weight:900}
.jentry .x:hover{color:var(--bad)}

/* ============================================================ music tab */

/* Three tokens for the two players, the music tab and the corner radio.
   --hot-ink is orange used as a FOREGROUND. --hot is the same #ff5a1f in both
   themes, and on the day theme's white card and near white rows that measures
   2.3 to 3.1 to 1 as small text or as a glyph, so day gets a deeper burnt
   orange and night keeps --hot, which already measures about 5 to 6 to 1 there.
   --bad-ink is the same story for the red on "Delete playlist", 3.6 to 1 in day.
   --on-hot is what sits ON a solid orange fill. It is fixed in both themes
   because the fill is fixed in both themes. */
.mgrid,.radio{--hot-ink:var(--hot);--bad-ink:var(--bad);--on-hot:#0a0a0a}
:root[data-theme="day"] .mgrid,:root[data-theme="day"] .radio{--hot-ink:#a83200;--bad-ink:#b3102f}

.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mgrid .wide{grid-column:1/-1}
@media(max-width:900px){.mgrid{grid-template-columns:1fr}}
/* A phone leaves these cards about 255px. A grid or flex child sits at its
   content width unless it is told it may shrink, and .card clips what spills,
   so without min-width 0 the track title and the + button get cut off at the
   card edge at 375px instead of fitting. */
.np{display:flex;gap:14px;align-items:center}
.np>div{min-width:0}
.np b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np img{width:88px;height:88px;border-radius:14px;object-fit:cover;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.np b{display:block;font-size:18px;color:var(--ink)}
.np small{display:block;color:var(--mute);font:700 12px/1.4 var(--mono)}
/* the artist carries the line, everything after it is context */
.np small .who{color:var(--ink);font-weight:800}
.np small .none{color:var(--mute)}
.seek{display:flex;align-items:center;gap:10px;margin-top:8px}
.seek input{flex:1;accent-color:var(--hot)}
.seek span{font:800 11px/1 var(--mono);color:var(--mute);min-width:70px;text-align:right}
.mctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
/* shuffle and repeat again in words, because a lit icon alone is a guess */
.mmodes{margin-top:11px;font:800 10.5px/1.5 var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--mute)}
.mmodes b{color:var(--hot-ink)}
.mode-row{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.tracks{display:grid;gap:6px;max-height:420px;overflow:auto}
.track{display:grid;grid-template-columns:44px 1fr auto auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);text-align:left;transition:.14s}
.track:hover{border-color:var(--hot)}
.track.on{border-color:var(--hot);background:rgba(255,90,31,.12);box-shadow:inset 3px 0 0 var(--hot)}
.track img{width:44px;height:44px;border-radius:8px;object-fit:cover}
.track .ph{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;background:rgba(255,90,31,.12);color:var(--hot-ink);font-size:17px}
.track>div{min-width:0}
.track b{display:block;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track small{display:block;font:700 11px/1.3 var(--mono);color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the artist is the point of the line, the genre and the bpm sit behind it */
.track small .who{color:var(--ink);font-weight:800}
.track small .none{color:var(--mute);font-style:italic}
.track .add{font-weight:900;color:var(--hot-ink);padding:6px 10px;border-radius:8px;border:1px solid rgba(255,90,31,.34);background:rgba(255,90,31,.1);transition:.14s}
.track .add:hover{border-color:var(--hot);background:rgba(255,90,31,.22)}
.track .flag{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;white-space:nowrap;
  background:rgba(255,90,31,.16);border:1px solid rgba(255,90,31,.42);color:var(--hot-ink);
  font:900 9px/1 var(--mono);letter-spacing:.7px;text-transform:uppercase}
.track .flag i{width:5px;height:5px;border-radius:50%;background:var(--hot);font-style:normal;animation:c3d-breathe 1.2s ease-in-out infinite}

/* ------------------------------------------------------------- the roster */
.artists{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:12px}
.artist{display:block;text-align:center;padding:16px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);transition:.16s}
.artist:hover{border-color:var(--hot);transform:translateY(-2px)}
.artist img{width:76px;height:76px;border-radius:50%;object-fit:cover;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.artist .ph{width:76px;height:76px;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:rgba(255,90,31,.14);color:var(--hot-ink);font:900 24px/1 var(--mono)}
.artist b{display:block;margin-top:10px;font-size:14px;color:var(--ink)}
.artist .lane{display:block;margin-top:4px;font:800 9.5px/1.4 var(--mono);letter-spacing:.6px;text-transform:uppercase;color:var(--hot-ink)}
.artist .tag{display:block;margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--mute)}
.artist .songs{display:block;margin-top:10px;font:800 9.5px/1 var(--mono);letter-spacing:.7px;text-transform:uppercase;color:var(--mute)}

/* ----------------------------------------------------------- playlists
   Each saved playlist is a drawer: the head opens it, the body holds the
   actions and one row per track, so nothing needs a second screen. */
.pls{display:grid;gap:8px}
.pl{border:1px solid var(--line);border-radius:12px;background:var(--panel2);overflow:hidden;transition:.16s}
.pl.open{border-color:rgba(255,90,31,.45)}
.pl-head{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;text-align:left;transition:.14s}
.pl-head:hover{background:rgba(255,90,31,.08)}
.pl-head .caret{flex:none;font-style:normal;font-size:10px;color:var(--hot-ink);transition:transform .2s}
.pl.open .pl-head .caret{transform:rotate(90deg)}
.pl-head b{flex:1;min-width:0;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-head small{flex:none;font:800 9.5px/1 var(--mono);letter-spacing:.7px;text-transform:uppercase;color:var(--mute)}
.pl-body{padding:0 12px 12px;border-top:1px solid var(--line)}
.pl-acts{display:flex;gap:6px;flex-wrap:wrap;padding:11px 0 9px}
.pl-acts button{padding:7px 11px;border-radius:9px;font:800 10.5px/1 var(--mono);letter-spacing:.4px;
  border:1px solid rgba(255,90,31,.34);background:rgba(255,90,31,.1);color:var(--ink);transition:.14s}
.pl-acts button:hover{border-color:var(--hot);background:rgba(255,90,31,.22)}
.pl-acts button.danger{border-color:rgba(255,59,92,.4);background:rgba(255,59,92,.1);color:var(--bad-ink)}
.pl-acts button.danger:hover{border-color:var(--bad);background:rgba(255,59,92,.22)}
.pl-track{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center}
.pl-track+.pl-track{margin-top:4px}
.pl-track .go{display:flex;align-items:center;gap:9px;min-width:0;padding:7px 9px;border-radius:9px;border:1px solid transparent;text-align:left;transition:.14s}
.pl-track .go:hover{border-color:var(--hot);background:rgba(255,90,31,.1)}
.pl-track .go i{flex:none;font-style:normal;font-size:10px;color:var(--hot-ink)}
.pl-track .go .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-track .go .t b{font-size:13px;color:var(--ink)}
.pl-track .go .t em{font-style:normal;font:700 11px/1 var(--mono);color:var(--mute)}
.pl-track.on .go{border-color:var(--hot);background:rgba(255,90,31,.14)}
.pl-track .x{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;
  border:1px solid var(--line);color:var(--mute);font:900 11px/1 var(--mono);transition:.14s}
.pl-track .x:hover{border-color:var(--bad);color:var(--bad);background:rgba(255,59,92,.12)}
.pl-empty{padding:9px 0 2px;font:700 12px/1.5 var(--mono);color:var(--mute)}

/* ======================================================= SoulTown radio, small
   Collapsed it is a 54px button, the size of a chat bubble, so it stops
   competing with the app. Tapping it opens the player: transport, like, save to
   a playlist, volume, and what the companion does while music is on. */
.radio{width:302px;transition:width .24s cubic-bezier(.2,.9,.3,1.2),border-radius .24s,box-shadow .24s}
.radio.min{width:54px;height:54px;border-radius:50%;box-shadow:0 10px 26px rgba(15,21,34,.26)}
.radio.min .radio-body{display:none}
.radio.min .radio-meta{display:none}
/* The collapsed bubble keeps a real close button: an x badge on the corner of
   the circle. It is always on screen, never hover only, because a player you
   cannot obviously close is a player that feels stuck to the page. The badge
   sits outside the round bubble, so .radio.min drops the overflow clip it
   inherits from .radio: with the clip on, the badge was painted nowhere and
   could not be clicked at all. Dismissing is remembered, so it does not come
   back on the next visit. Settings has "Open player" to bring it back. */
.radio.min{overflow:visible}
.radio.min .radio-x{
  display:grid;position:absolute;top:-7px;right:-7px;z-index:4;
  width:22px;height:22px;border-radius:50%;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  font:900 10px/1 var(--mono);box-shadow:0 3px 10px rgba(15,21,34,.3);
  opacity:1;transform:none;transition:background .16s,color .16s,border-color .16s,transform .16s;
}
.radio.min .radio-x:hover,.radio.min .radio-x:focus-visible{background:var(--bad);border-color:var(--bad);color:#fff;transform:scale(1.1)}
.radio.min .radio-head{width:54px;height:54px;padding:0;justify-content:center;gap:0}
.radio.min .radio-art{position:absolute;inset:0;width:54px;height:54px;border-radius:50%;box-shadow:none}
.radio.min .radio-note{display:grid}
.radio.min .radio-dot{position:absolute;right:2px;bottom:2px;top:auto;width:12px;height:12px;border:2px solid var(--panel)}
.radio.min:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(255,90,31,.3)}

/* the note sits under the art, so a track with no art still reads as music */
.radio-note{display:none;place-items:center;width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent,var(--hot)),var(--hot2));color:var(--on-hot);font-size:22px;line-height:1}
.radio.live.min .radio-note,.radio.live.min .radio-art{animation:c3d-breathe 2.4s ease-in-out infinite}
.radio-head{position:relative}
.radio-x{margin-left:auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  color:var(--dim);font:900 12px/1 var(--mono);flex:none;transition:.16s}
.radio-x:hover{background:var(--bad);color:#fff}

/* transport: one row, big target on play */
.radio .radio-ctl{justify-content:space-between;gap:6px}
.radio .rbtn{width:40px;height:40px;font-size:14px}
.radio .rbtn.big{width:50px;height:50px;font-size:18px}
.radio-save{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:9px}
.rsave{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 10px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel2);font:800 11.5px/1 var(--mono);color:var(--mute);transition:.16s}
.rsave i{font-style:normal;font-size:14px;display:grid;place-items:center}
.rsave svg{display:block}
.rsave:hover{border-color:var(--hot);color:var(--ink)}
.rsave.on{border-color:var(--hot);background:rgba(255,90,31,.12);color:var(--hot-ink)}
.radio-vol{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.radio-vol span{font:800 10px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--mute)}
.radio-vol input{flex:1;accent-color:var(--accent,var(--hot))}

/* the reopen affordance, once it has been closed entirely */
.radio.gone{display:none}
@media(max-width:900px){
  .radio{width:calc(100vw - 36px)}
  .radio.min{width:54px;height:54px}
}

/* The player is bottom left, which is where the rail lives. Clear it, and move
   out of the way again when the rail is expanded, so it never covers Settings
   or Sign out. */
.radio{left:94px}
:root[data-rail="open"] .radio{left:232px}
@media(max-width:900px){
  .radio,:root[data-rail="open"] .radio{left:72px}
  .radio.min{left:72px}
}

/* The mark is square. Say so, so a stretched flex row can never distort it. */
.rail .logo{flex:none;width:44px;height:44px;align-self:center}
.rail .logo img{width:44px;height:44px;object-fit:contain;display:block}

/* ------------------------------------------- talk bar: gone means gone
   Dismissing the companion used to swap the bar for a pill in the same spot,
   which read as the same thing shrinking rather than as closed. Now it clears
   out entirely and comes back from a round button in the corner, matching the
   radio button on the other side. */
.talkbar.hidden{transform:translateY(160%);opacity:0;pointer-events:none;visibility:hidden}
.talk-reopen{
  left:auto;right:18px;bottom:18px;transform:none;
  width:56px;height:56px;padding:0;border-radius:50%;justify-content:center;gap:0;
  overflow:hidden;box-shadow:0 12px 30px rgba(15,21,34,.22);
}
.talk-reopen.on{display:flex}
.talk-reopen:hover{transform:translateY(-2px);border-color:var(--hot);box-shadow:0 16px 34px rgba(255,90,31,.3)}
.talk-reopen span#reopenBall{width:38px!important;flex:none}
.talk-reopen .rl{display:none}
@media(max-width:900px){.talk-reopen{right:18px;bottom:78px}}

/* ===================================== rail: one colour per section
   Read only by the left rail (the rules live in the rail block of app.css).
   Each section owns a hue, and each hue has two steps: the base is the resting
   colour of the section heading and of every tab label and icon under it, and
   the "up" step is where hover and the active tab go, so a change of state is
   the same colour arriving rather than a different colour appearing.
   Night and day carry separate values on purpose. The night rail is near
   black, so its colours are bright; the day rail is white, so its colours are
   deep. Every value here was measured against the surface it actually sits on,
   including the tinted hover and active rows, and clears 4.5:1 in both themes.
   The anchor pair is for Home and the utility buttons, which sit outside the
   sections and stay on the brand orange. */
:root{
  --rail-training:#ff9a52;  --rail-training-up:#ffbc8c;
  --rail-body:#4ee08e;      --rail-body-up:#8bf0b7;
  --rail-companion:#b08cff; --rail-companion-up:#ccb2ff;
  --rail-people:#57bcff;    --rail-people-up:#96d6ff;
  --rail-sound:#ff85bd;     --rail-sound-up:#ffb0d4;
  --rail-anchor:#ff5a1f;
}
:root[data-theme="day"]{
  --rail-training:#b4420c;  --rail-training-up:#8d3208;
  --rail-body:#0a7046;      --rail-body-up:#065636;
  --rail-companion:#6639cc; --rail-companion-up:#522aab;
  --rail-people:#0c66b4;    --rail-people-up:#095090;
  --rail-sound:#b22568;     --rail-sound-up:#921a54;
  --rail-anchor:#ad3e0c;
}

/* ------------------------------------------- live transcript, only when live
   It used to sit over the app permanently showing nothing. It now appears on
   the first word of a turn and puts itself away once the conversation goes
   quiet. Kept in the DOM so the history survives, just out of the way. */
.dock{opacity:0;pointer-events:none;transform:translateY(130%);transition:transform .3s cubic-bezier(.2,.9,.3,1.2),opacity .22s}
.dock.live{opacity:1;pointer-events:auto;transform:none}
.dock.live.min{transform:translateY(calc(100% - 44px))}
.dock .tline .txt{display:block;white-space:pre-wrap}