/* BestYou·AI — karaoke read-aloud chrome. Cream · classy grey · bullion gold · navy. */

/* ── the highlight itself ─────────────────────────────────────────────── */
.kara-s{transition:background-color .28s ease,color .28s ease;border-radius:3px}
/* already read — a faint warm wash left behind */
.kara-on{background:rgba(150,118,42,.11)}
/* speaking now — bullion gold, the karaoke line */
.kara-live{background:linear-gradient(180deg,rgba(216,189,108,.5),rgba(150,118,42,.34));
 color:#20242c;box-shadow:0 0 0 2px rgba(150,118,42,.16)}
:root[data-theme="dark"] .kara-on{background:rgba(217,183,87,.1)}
:root[data-theme="dark"] .kara-live{background:linear-gradient(180deg,rgba(217,183,87,.34),rgba(201,166,72,.2));
 color:#fdf6e6;box-shadow:0 0 0 2px rgba(217,183,87,.16)}
@media(prefers-reduced-motion:reduce){.kara-s{transition:none}}

/* ── the orb player ───────────────────────────────────────────────────────
   HK 2026-08-09: one anchor, the orb, bottom-left. At rest nothing shows but
   the orb. While a voice speaks a slim chip rises above it — who, what,
   progress hairline, stop. The menu opens from the orb: companion first,
   then the section list, then the whole page. */
.karadock{position:fixed;left:20px;bottom:94px;z-index:95;
 font-family:'Inter',-apple-system,system-ui,sans-serif}

.kd-chip{display:none;position:relative;align-items:center;gap:10px;
 min-width:214px;max-width:min(342px,calc(100vw - 40px));
 padding:11px 10px 11px 16px;border-radius:14px;
 background:rgba(239,234,221,.95);border:1px solid var(--rule,#b9ae94);
 backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
 box-shadow:0 8px 30px rgba(40,32,12,.18)}
.karadock.playing .kd-chip,.karadock.loading .kd-chip{display:flex}
:root[data-theme="dark"] .kd-chip{background:rgba(19,33,51,.95);border-color:#2c3d55;
 box-shadow:0 8px 30px rgba(0,0,0,.45)}

/* progress hairline along the top of the chip */
.kd-bar{position:absolute;left:14px;right:14px;top:0;height:2px;border-radius:2px;
 background:rgba(150,118,42,.14);overflow:hidden;pointer-events:none}
.kd-bar i{display:block;height:100%;width:0%;border-radius:2px;
 background:linear-gradient(90deg,#7d5f14,#d8bd6c);transition:width .16s linear}

.kd-stop{flex:none;width:34px;height:34px;border-radius:50%;padding:0;cursor:pointer;
 border:1px solid rgba(150,118,42,.4);background:transparent;
 color:var(--gold-deep,#6f5312);display:grid;place-items:center;
 transition:background .2s ease,border-color .2s ease}
.kd-stop:hover{background:rgba(150,118,42,.12);border-color:var(--gold,#96762a)}
:root[data-theme="dark"] .kd-stop{color:#d9b757;border-color:rgba(217,183,87,.4)}
.karadock.loading .kd-stop{animation:kdblink .85s ease-in-out infinite}
@keyframes kdblink{0%,100%{opacity:.42}50%{opacity:1}}

/* ── the menu ─────────────────────────────────────────────────────────── */
.kd-menu{position:absolute;left:0;bottom:calc(100% + 11px);width:326px;
 max-width:calc(100vw - 40px);border-radius:13px;padding:15px;
 opacity:0;pointer-events:none;transform:translateY(9px) scale(.975);
 transform-origin:bottom left;
 background:rgba(239,234,221,.98);border:1px solid var(--rule,#b9ae94);
 border-top:2px solid var(--gold-deep,#6f5312);
 backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
 box-shadow:0 18px 54px rgba(40,32,12,.24);
 transition:opacity .26s ease,transform .26s cubic-bezier(.2,.8,.3,1)}
.karadock.open .kd-menu{opacity:1;pointer-events:auto;transform:none}
:root[data-theme="dark"] .kd-menu{background:rgba(19,33,51,.98);border-color:#2c3d55;
 border-top-color:#c9a648;box-shadow:0 18px 54px rgba(0,0,0,.55)}

/* the companion row — first in the menu, styled like the old tour row */
.kd-ask{width:100%;text-align:left;padding:11px 13px;margin-bottom:10px;
 border-radius:9px;cursor:pointer;font-family:inherit;
 border:1px solid rgba(150,118,42,.42);
 background:linear-gradient(164deg,rgba(150,118,42,.14),rgba(216,189,108,.1))}
.kd-ask:hover{background:linear-gradient(164deg,rgba(150,118,42,.22),rgba(216,189,108,.16));
 border-color:var(--gold,#96762a)}
.kd-ask b{display:block;font-size:14px;font-weight:680;color:var(--navy-rich,#0a2145)}
.kd-ask span{display:block;font-size:11.5px;color:#6f7480;margin-top:2px}
:root[data-theme="dark"] .kd-ask{border-color:rgba(217,183,87,.4);
 background:linear-gradient(164deg,rgba(217,183,87,.14),rgba(201,166,72,.08))}
:root[data-theme="dark"] .kd-ask b{color:#eaf1fb}
:root[data-theme="dark"] .kd-ask span{color:#8598b2}

.kd-now{flex:1;min-width:0}
.kd-now b{display:block;font-size:11px;font-weight:750;letter-spacing:.13em;
 text-transform:uppercase;color:var(--gold-deep,#6f5312)}
:root[data-theme="dark"] .kd-now b{color:#d9b757}
.kd-now span{display:block;font-size:12.5px;color:#6f7480;margin-top:2px;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme="dark"] .kd-now span{color:#8598b2}

.kd-list{display:grid;gap:3px;max-height:274px;overflow-y:auto;margin-bottom:11px}
.kd-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
 width:100%;text-align:left;padding:9px 11px;border-radius:8px;cursor:pointer;
 border:1px solid transparent;background:transparent;font-family:inherit}
.kd-row:hover{background:rgba(150,118,42,.1);border-color:rgba(150,118,42,.3)}
:root[data-theme="dark"] .kd-row:hover{background:rgba(217,183,87,.11)}
.kd-row b{font-size:13.5px;font-weight:600;color:var(--navy-rich,#0a2145);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-theme="dark"] .kd-row b{color:#eaf1fb}
.kd-row span{font-size:10.5px;font-weight:700;letter-spacing:.08em;flex:none;
 color:var(--gold-deep,#6f5312);opacity:.8}
:root[data-theme="dark"] .kd-row span{color:#d9b757}

.kd-all{width:100%;padding:11px;border-radius:8px;cursor:pointer;font-size:13.5px;
 font-weight:650;font-family:inherit;border:0;
 background:linear-gradient(164deg,#7d5f14,#b8912e 45%,#96762a);color:#f8f2e0}
.kd-all:hover{filter:brightness(1.1)}

@media(max-width:640px){.karadock{left:14px;bottom:86px}
 .kd-menu{width:calc(100vw - 28px)}}

/* the player is screen furniture — never let it print onto a worksheet */
@media print{.karadock,.byorb,.castrip,.spk,.tutor{display:none!important}}

/* ══ THE ENTRANCE CONVERSATION ══════════════════════════════════════════
   A scripted two-hander rather than a narrator. The strip sits low and
   centred like a subtitle, names whoever is speaking, and lights the exact
   word being said. Audio for every line is fetched before the first word, so
   there is no gap between turns — which is what makes two voices sound like
   one room.

   HK 2026-08-08: recast to the canon pair, Laila and Seeker. The original
   was Adam Milankovic and Laila; no real person's clone appears on this site
   any more. Nothing currently builds .castrip — these rules are kept for
   when the entrance is rebuilt, and the speaker classes below are the two
   canon names, so a rebuild cannot reintroduce a retired voice by CSS. */
.castrip{position:fixed;left:50%;bottom:108px;transform:translateX(-50%) translateY(14px);
 width:min(880px,calc(100vw - 48px));z-index:2147483002;
 padding:18px 24px 20px;border-radius:14px;pointer-events:none;
 background:rgba(246,243,235,.52);border:1px solid rgba(185,174,148,.34);
 box-shadow:0 2px 8px rgba(10,33,69,.08),0 18px 48px rgba(10,33,69,.14);
 -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
 opacity:0;visibility:hidden;transition:opacity .35s ease,transform .35s ease,visibility .35s}
.castrip.on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
:root[data-theme="dark"] .castrip{background:rgba(12,22,38,.5);
 border-color:rgba(255,255,255,.11);
 box-shadow:0 2px 8px rgba(0,0,0,.4),0 18px 48px rgba(0,0,0,.4)}
/* who is speaking — a gold rule of a name above the line */
.cs-who{text-shadow:0 1px 2px rgba(255,255,255,.55);font-size:11.5px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
 color:#8a6d24;margin-bottom:9px}
:root[data-theme="dark"] .cs-who{color:#d9b757}
/* the two speakers lean to their own side of the studio */
.castrip.seeker .cs-who{text-align:left}
.castrip.laila .cs-who{text-align:right}
.castrip.laila .cs-line{text-shadow:0 1px 2px rgba(255,255,255,.6);text-align:right}
.cs-line{font-size:19px;line-height:1.58;color:#20242c;letter-spacing:-.004em}
:root[data-theme="dark"] .cs-line{color:#eef3f9}
/* every word is its own span so the shine can land on one */
.cs-w{display:inline-block;transition:color .12s ease,text-shadow .12s ease,transform .12s ease;
 color:inherit;opacity:.42}
.cs-w.said{opacity:.72}
/* the word being spoken — lifted, gold, and genuinely shining */
.cs-w.lit{opacity:1;color:#6f5312;transform:translateY(-1px);
 text-shadow:0 0 1px rgba(246,236,201,.9),0 0 10px rgba(216,189,108,.75),
             0 0 22px rgba(216,189,108,.45),0 1px 0 rgba(255,255,255,.6)}
:root[data-theme="dark"] .cs-w.lit{color:#f6ecc9;
 text-shadow:0 0 2px rgba(246,236,201,.95),0 0 12px rgba(217,183,87,.8),
             0 0 26px rgba(217,183,87,.5)}
@media(max-width:700px){.castrip{bottom:96px;padding:14px 18px 16px}
 .cs-line{font-size:16.5px}}
@media(prefers-reduced-motion:reduce){
 .castrip,.cs-w{transition:opacity .2s ease}
 .cs-w.lit{transform:none}}

/* ── the tour button: the journey, not a single section ─────────────────── */
.kd-tour{width:100%;text-align:left;padding:11px 13px;margin-bottom:10px;
 border-radius:9px;cursor:pointer;font-family:inherit;
 border:1px solid rgba(150,118,42,.42);
 background:linear-gradient(164deg,rgba(150,118,42,.14),rgba(216,189,108,.1))}
.kd-tour:hover{background:linear-gradient(164deg,rgba(150,118,42,.22),rgba(216,189,108,.16));
 border-color:var(--gold,#96762a)}
.kd-tour b{display:block;font-size:14px;font-weight:680;color:var(--navy-rich,#0a2145)}
.kd-tour span{display:block;font-size:11.5px;color:#6f7480;margin-top:2px}
:root[data-theme="dark"] .kd-tour{border-color:rgba(217,183,87,.4);
 background:linear-gradient(164deg,rgba(217,183,87,.14),rgba(201,166,72,.08))}
:root[data-theme="dark"] .kd-tour b{color:#eaf1fb}
:root[data-theme="dark"] .kd-tour span{color:#8598b2}

/* translucency trade-off: the page reads through the strip, so the words carry
   their own contrast rather than relying on an opaque panel behind them. */
:root[data-theme="dark"] .cs-line,
:root[data-theme="dark"] .cs-who{text-shadow:0 1px 3px rgba(0,0,0,.72)}
.cs-w.cs-live{text-shadow:none}

/* ── word cursor ───────────────────────────────────────────────────────────
   The sentence stays lit underneath; the word being spoken carries a brighter
   wash and a real glow, drawn from the same gold the sentence uses so the two
   read as one system rather than two effects. HK 2026-08-05. */
.kara-w{border-radius:3px;padding:0 .06em;margin:0 -.06em;
 transition:background-color .12s linear,color .12s linear,
            text-shadow .12s linear,box-shadow .12s linear}
/* words already spoken in the live sentence — settle back, don't compete */
.kara-w.done{background:rgba(150,118,42,.10)}
/* the word being spoken */
.kara-w.on{background:linear-gradient(180deg,rgba(244,222,150,.95),rgba(216,189,108,.78));
 color:#171a20;font-weight:600;
 text-shadow:0 0 10px rgba(255,229,150,.95),0 0 22px rgba(216,189,108,.6);
 box-shadow:0 0 0 1px rgba(150,118,42,.34),0 0 14px rgba(216,189,108,.55)}

:root[data-theme="dark"] .kara-w.done{background:rgba(217,183,87,.12)}
:root[data-theme="dark"] .kara-w.on{
 background:linear-gradient(180deg,rgba(255,226,140,.5),rgba(217,183,87,.32));
 color:#fffaf0;
 text-shadow:0 0 12px rgba(255,226,140,1),0 0 26px rgba(217,183,87,.75);
 box-shadow:0 0 0 1px rgba(217,183,87,.4),0 0 18px rgba(217,183,87,.5)}

@media(prefers-reduced-motion:reduce){.kara-w{transition:none}}

/* ══ THE SPEAKER BUTTON ═════════════════════════════════════════════════
   voice.js appends a .spk button to each readable section, but nothing ever
   sized it — so the button and its SVG stretched to fill the whole section
   (measured 680×671 on the wall) and rendered as an enormous black speaker
   in the middle of the page. Give it a fixed size and pin it to the corner
   of its section, out of the way of the prose. */
.spk{position:absolute;top:14px;right:14px;z-index:6;
 width:34px;height:34px;flex:none;padding:0;border-radius:50%;cursor:pointer;
 display:inline-grid;place-items:center;overflow:hidden;
 border:1px solid rgba(150,118,42,.4);background:rgba(239,234,221,.82);
 color:var(--gold-deep,#6f5312);opacity:.5;
 -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
 transition:opacity .2s ease,background .2s ease,border-color .2s ease,transform .16s ease}
.spk svg{width:17px;height:17px;display:block;flex:none}
.spk:hover{opacity:1;transform:scale(1.08);border-color:var(--gold,#96762a)}
.spk:focus-visible{outline:2px solid var(--gold,#96762a);outline-offset:2px;opacity:1}
.spk.on{opacity:1;background:rgba(150,118,42,.2);border-color:var(--gold,#96762a)}
:root[data-theme="dark"] .spk{background:rgba(19,33,51,.82);border-color:rgba(217,183,87,.36);
 color:#d9b757}
:root[data-theme="dark"] .spk.on{background:rgba(217,183,87,.2);border-color:#d9b757}
/* the section must be a positioning context or the button escapes to the page */
.has-spk{position:relative}