/* ==========================================================================
   Lingo Bloom · Imitate / Express / Read / Write modules
   Extends the tokens declared in app.css (:root). Never redefines them.
   Each skill owns an accent pair (--skill, --skill-tint) so module chrome
   inherits its identity from the page instead of hard-coding colors.
   ========================================================================== */

.page-review { --skill: #2f7350; --skill-tint: #dff4c8; --skill-soft: rgba(47, 115, 80, .1); }
.page-listen { --skill: #6f5fd0; --skill-tint: #e8e4fd; --skill-soft: rgba(111, 95, 208, .1); }
.page-speak  { --skill: #d0602c; --skill-tint: #ffe3d4; --skill-soft: rgba(208, 96, 44, .1); }
.page-read   { --skill: #71971f; --skill-tint: #eef8d2; --skill-soft: rgba(113, 151, 31, .11); }
.page-write  { --skill: #23788f; --skill-tint: #d9eef4; --skill-soft: rgba(35, 120, 143, .1); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Skill navigation ----------
   Lives in the header, on one line with the brand, Learning Materials and the
   stat pills. Sized to match .stat-pill and .materials-button exactly, so the
   whole bar reads as one row of controls rather than three stacked ideas. */

.skill-nav { display: flex; align-items: center; gap: 6px; }
.skill-tab {
    min-height: 41px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .66);
    backdrop-filter: blur(12px);
    font-size: 13px;
    font-weight: 750;
    letter-spacing: -.2px;
    white-space: nowrap;
    transition: .25s var(--ease);
}
.skill-tab-review { --tab: #2f7350; --tab-tint: #dff4c8; }
.skill-tab-listen { --tab: #6f5fd0; --tab-tint: #e8e4fd; }
.skill-tab-speak  { --tab: #d0602c; --tab-tint: #ffe3d4; }
.skill-tab-read   { --tab: #71971f; --tab-tint: #eef8d2; }
.skill-tab-write  { --tab: #23788f; --tab-tint: #d9eef4; }
.skill-tab-icon { font-size: 15px; line-height: 1; }
.skill-tab:hover { border-color: var(--tab); background: var(--tab-tint); transform: translateY(-1px); }
.skill-tab:focus-visible { outline: 3px solid var(--tab); outline-offset: 2px; }
.skill-tab.is-active { border-color: transparent; background: var(--tab); color: #fff; box-shadow: 0 10px 22px -12px var(--tab); }

/*
 * Shedding order as the bar narrows: the Learning Materials wording goes
 * first, then the skill wording. Below that the header simply wraps, and the
 * stat pills drop to a second line - a wrap is a better outcome than four
 * squeezed labels, so there is no further breakpoint chasing it.
 *
 * Labels are moved out of sight rather than display: none'd. The icon is
 * aria-hidden, so dropping the label from the accessibility tree would leave
 * these links with no name at all - a screen reader would announce four
 * anonymous links and a button called nothing.
 */
@media (max-width: 1580px) {
    .materials-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .materials-button { padding: 0 11px; }
}
@media (max-width: 1430px) {
    .skill-tab-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .skill-tab { padding: 0 12px; }
}

/* ---------- Review queue summary (home page) ---------- */

.queue-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.queue-stat {
    display: grid;
    gap: 1px;
    padding: 15px 17px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: rgba(248, 249, 243, .8);
}
.queue-stat strong { font-family: Georgia, serif; font-size: 33px; line-height: 1.05; }
.queue-stat > span { font-size: 11px; font-weight: 850; }
.queue-stat small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.queue-stat.is-due { border-color: rgba(33, 75, 59, .22); background: var(--mint); }
.queue-stat.is-due strong { color: var(--green); }
.queue-stat.is-new { border-color: rgba(216, 210, 251, .8); background: rgba(216, 210, 251, .32); }
.queue-stat.is-new strong { color: #5a4bb8; }
.queue-note { margin: 0 0 4px; color: var(--muted); font-size: 11px; line-height: 1.7; }

.legend-hint {
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(23, 49, 40, .1);
    color: var(--muted);
    font-size: 9px;
    font-style: normal;
    cursor: help;
}

/* When a card comes back, shown after each answer. */
.next-review {
    margin: 12px 0 0;
    padding: 8px 13px;
    border-radius: 10px;
    background: rgba(199, 244, 93, .26);
    color: #3d5a30;
    font-size: 11px;
    font-weight: 750;
}

/* ---------- Module page shell ---------- */

.module-view {
    max-width: var(--shell);
    margin: 26px auto 70px;
    padding: 0 var(--gutter);
    display: grid;
    gap: 22px;
}
.module-intro { display: grid; gap: 9px; max-width: 720px; }
.module-intro h1 {
    margin: 0;
    font-family: Georgia, "Songti SC", serif;
    font-size: clamp(31px, 3.6vw, 44px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.6px;
}
.module-intro h1 em { color: var(--skill); font-style: italic; }
.module-intro p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
.module-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--skill); font-size: 10px; font-weight: 900; letter-spacing: 1.9px; text-transform: uppercase; }
.module-eyebrow span { width: 25px; height: 1px; background: currentColor; }

.panel {
    position: relative;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: var(--shadow);
    backdrop-filter: blur(22px);
}
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.panel-head h2, .panel-head-title { margin: 6px 0 0; font-size: 20px; letter-spacing: -.6px; }
.panel-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

/* Buttons that inherit the page accent. */
.skill-cta {
    min-height: 48px;
    padding: 0 8px 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    background: var(--skill);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 24px -12px var(--skill);
    transition: .25s var(--ease);
}
.skill-cta i { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 11px; background: rgba(255, 255, 255, .22); font-size: 16px; font-style: normal; }
.skill-cta:hover { transform: translateY(-2px); filter: brightness(.94); }
.skill-cta:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.chip-button {
    min-height: 34px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    font-size: 11px;
    font-weight: 750;
    color: var(--muted);
    cursor: pointer;
    transition: .2s ease;
}
.chip-button:hover { border-color: var(--skill); color: var(--skill); background: var(--skill-tint); }
.chip-button.is-active { border-color: transparent; background: var(--skill); color: #fff; }
.chip-button:disabled {
    border-color: var(--line);
    background: rgba(245, 244, 240, .72);
    color: color-mix(in srgb, var(--muted) 62%, white);
    opacity: .62;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.empty-state { display: grid; gap: 7px; place-items: center; padding: 46px 20px; text-align: center; color: var(--muted); }
.empty-state-icon { font-size: 30px; opacity: .5; }
.empty-state strong { color: var(--ink); font-size: 14px; }
.empty-state p { margin: 0; max-width: 380px; font-size: 12px; line-height: 1.8; }

.module-message { min-height: 17px; margin: 10px 0 0; color: #ae4b33; font-size: 11px; }
.module-message.is-info { color: var(--muted); }

/* ---------- Source input (shared by Listen + Read) ---------- */

.source-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(248, 249, 243, .8); }
.source-tabs button { padding: 7px 14px; border: 0; border-radius: 9px; background: transparent; font-size: 12px; font-weight: 800; color: var(--muted); cursor: pointer; transition: .2s ease; }
.source-tabs button.is-active { background: #fff; color: var(--ink); box-shadow: 0 3px 10px rgba(23, 49, 40, .1); }
.page-listen button:focus-visible,
.page-listen [role="slider"]:focus-visible,
.page-listen select:focus-visible,
.page-listen input:focus-visible,
.page-listen textarea:focus-visible { outline: 3px solid var(--skill-soft); outline-offset: 3px; }
.source-body { margin-top: 16px; }
.source-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 11px; align-items: stretch; }
.source-input {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(248, 249, 243, .8);
    color: var(--ink);
    font-size: 13px;
    outline: 0;
    transition: .2s ease;
}
.source-input:focus { border-color: var(--skill); background: #fff; box-shadow: 0 0 0 3px var(--skill-soft); }
.source-textarea {
    width: 100%;
    min-height: 190px;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(248, 249, 243, .8);
    color: var(--ink);
    font-size: 13px;
    line-height: 1.75;
    resize: vertical;
    outline: 0;
    transition: .2s ease;
}
.source-textarea:focus { border-color: var(--skill); background: #fff; box-shadow: 0 0 0 3px var(--skill-soft); }
.source-hint { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.source-hint kbd { padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font-size: 11px; font-family: inherit; }

.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.upload-file-card {
    min-width: 0;
    min-height: 112px;
    padding: 15px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    align-items: center;
    gap: 5px 12px;
    border: 1px dashed #b7c2ba;
    border-radius: 16px;
    background: rgba(248, 249, 243, .8);
    cursor: pointer;
    transition: .2s var(--ease);
}
.upload-file-card:hover { border-color: var(--skill); background: var(--skill-tint); transform: translateY(-1px); }
.upload-file-icon {
    width: 42px;
    height: 42px;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--skill-soft);
    color: var(--skill);
    font-size: 14px;
    font-weight: 900;
}
.upload-file-card > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.upload-file-card b { font-size: 13px; }
.upload-file-card small { color: var(--muted); font-size: 11px; }
.upload-file-card input { grid-column: 1 / -1; width: 100%; color: var(--muted); font-size: 11px; cursor: pointer; }
.upload-file-card input::file-selector-button {
    margin-right: 9px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}
.upload-title-row { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 11px; align-items: end; }
.upload-title-row label { grid-column: 1 / -1; color: var(--ink); font-size: 11px; font-weight: 800; }
.upload-title-row label span { color: var(--muted); font-weight: 600; }
.upload-status { margin-top: 13px; padding: 13px 15px; display: grid; gap: 9px; border-radius: 14px; background: var(--skill-tint); }
.upload-status-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.upload-status strong { font-size: 12px; }
.upload-status small { color: var(--muted); font-size: 11px; text-align: right; }
.upload-progress { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(23, 49, 40, .1); }
.upload-progress i { width: 0; height: 100%; display: block; border-radius: inherit; background: var(--skill); transition: width .2s ease; }

/* ---------- Loading shimmer ---------- */

.is-loading { position: relative; pointer-events: none; }
.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .62) 50%, transparent 80%);
    background-size: 220% 100%;
    animation: shimmer 1.25s linear infinite;
}
@keyframes shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* ==========================================================================
   IMITATE · Imitation Studio (internal route and class names stay "listen")
   ========================================================================== */

.listen-stage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 22px; align-items: start; scroll-margin-top: 94px; }
.player-column { display: grid; gap: 16px; }

.imitation-overview {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(280px, 1.4fr) repeat(3, minmax(145px, .6fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .68);
    box-shadow: var(--shadow-soft);
}
.imitation-goal, .imitation-stat { border-radius: 15px; background: #fff; }
.imitation-goal { display: grid; gap: 5px; padding: 15px 17px; }
.imitation-goal strong { font-family: Georgia, serif; font-size: 20px; color: var(--green); }
.imitation-goal small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.imitation-goal-bar { display: block; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.imitation-goal-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--skill), var(--lime)); transition: width .45s var(--ease); }
.imitation-stat { display: flex; align-items: center; gap: 11px; padding: 14px; }
.imitation-stat > span { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: var(--skill-tint); color: var(--skill); font-weight: 900; }
.imitation-stat div { display: grid; gap: 2px; }
.imitation-stat strong { font-family: Georgia, serif; font-size: 17px; }
.imitation-stat small { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .35px; }

.player-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    background: #10231b;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.player-frame iframe, .player-frame > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-placeholder { display: grid; place-items: center; gap: 9px; color: rgba(255, 255, 255, .5); text-align: center; }
.player-placeholder span { font-size: 34px; }
.player-placeholder p { margin: 0; max-width: 260px; font-size: 12px; line-height: 1.75; }

/* Transport controls */
.transport {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .66);
    backdrop-filter: blur(12px);
}
.transport-button {
    min-height: 52px;
    display: grid;
    place-items: center;
    gap: 3px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: rgba(248, 249, 243, .82);
    cursor: pointer;
    transition: .2s var(--ease);
}
.transport-button b { font-size: 16px; font-weight: 400; line-height: 1; }
.transport-button small { font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .3px; }
.transport-button:hover:not(:disabled) { border-color: var(--skill); background: var(--skill-tint); transform: translateY(-2px); }
.transport-button:hover:not(:disabled) small { color: var(--skill); }
.transport-button:disabled { opacity: .4; cursor: not-allowed; }
.transport-button.is-primary { background: var(--skill); color: #fff; }
.transport-button.is-primary small { color: rgba(255, 255, 255, .8); }
.transport-button.is-primary:hover:not(:disabled) { background: var(--skill); filter: brightness(.92); }
.transport-button.is-armed { background: var(--orange); color: #fff; animation: armedPulse 1.6s ease-in-out infinite; }
.transport-button.is-armed small { color: rgba(255, 255, 255, .85); }
@keyframes armedPulse { 50% { box-shadow: 0 0 0 7px rgba(255, 148, 102, .22); } }

.loop-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .6); }
.loop-toggle span { font-size: 12px; font-weight: 750; color: var(--muted); }
.switch { position: relative; width: 40px; height: 23px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: #d5ddd7; transition: .2s ease; pointer-events: none; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(23, 49, 40, .2); transition: .2s var(--ease); }
.switch input:checked + i { background: var(--skill); }
.switch input:checked + i::after { transform: translateX(17px); }
.switch input:focus-visible + i { outline: 3px solid var(--skill-soft); outline-offset: 2px; }

/* Cue list */
.cue-column { display: grid; gap: 14px; position: sticky; top: 18px; }
/* Three rows for three children. With only two defined, .cue-tools took the
   1fr row and the cue list spilled into an implicit one, overlapping the
   transcript. */
.cue-panel { padding: 18px; max-height: min(640px, 74vh); display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 13px; }
.cue-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cue-meta strong { font-size: 13px; }
.cue-meta small { color: var(--muted); font-size: 12px; font-weight: 800; }
.cue-list { margin: 0; padding: 0 4px 0 0; list-style: none; overflow-y: auto; scrollbar-width: thin; display: grid; gap: 5px; align-content: start; }
.cue-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 5px;
    align-items: center;
    padding: 3px 7px 3px 2px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    text-align: left;
    transition: .18s ease;
}
.cue-row:hover { border-color: var(--line); background: rgba(248, 249, 243, .85); }
.cue-play { min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 9px; align-items: start; padding: 8px 6px; border: 0; border-radius: 9px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.cue-play:focus-visible { outline: 3px solid var(--skill-soft); outline-offset: 1px; }
.scrubber-track:focus-visible { outline: 3px solid var(--skill-soft); outline-offset: 4px; }
.cue-time { padding-top: 1px; color: var(--muted); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cue-text { font-size: 13px; line-height: 1.65; }
.cue-add { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: 13px; cursor: pointer; opacity: 0; transition: .18s ease; }
.cue-row:hover .cue-add, .cue-row.is-current .cue-add, .cue-add:focus-visible { opacity: 1; }
.cue-add:hover { border-color: var(--skill); background: var(--skill-tint); color: var(--skill); }
.cue-row.is-current { border-color: transparent; background: var(--skill-tint); }
.cue-row.is-current .cue-text { font-weight: 700; }
.cue-row.is-current::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--skill); }
.cue-row.is-playing-cue {
    border-color: color-mix(in srgb, var(--skill) 52%, var(--line));
    background: color-mix(in srgb, var(--skill-tint) 82%, #fff);
    box-shadow: 0 8px 22px -18px color-mix(in srgb, var(--skill) 80%, transparent);
}
.cue-row.is-playing-cue .cue-time { color: var(--skill); }
.cue-row.is-done .cue-time::after { content: " ✓"; color: var(--skill); }
.cue-panel.is-practice-blind .cue-text { color: transparent; text-shadow: 0 0 9px rgba(23, 49, 40, .28); user-select: none; }
.cue-panel.is-practice-blind .cue-row.is-playing-cue {
    border-color: var(--skill);
    box-shadow: inset 0 0 0 1px var(--skill-soft), 0 8px 24px -17px var(--skill);
}
.listen-stage.is-imitation-blind .player-subtitle,
.listen-stage.is-imitation-blind .audio-caption { visibility: hidden; }

/* Imitation loop */
.listen-stage > .shadow-panel { grid-column: 1 / -1; }
.shadow-panel { display: grid; gap: 15px; padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--skill-soft); background: var(--skill-tint); }
.imitation-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.imitation-panel-head h2 { margin: 3px 0 0; font-family: Georgia, serif; font-size: 21px; }
.privacy-chip { padding: 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.shadow-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.shadow-stage { min-width: 0; display: grid; gap: 3px; padding: 11px 12px; border: 0; border-radius: 13px; background: rgba(255, 255, 255, .55); color: inherit; font: inherit; text-align: left; opacity: .65; transition: .25s var(--ease); }
button.shadow-stage { cursor: pointer; }
button.shadow-stage:hover:not(:disabled) { opacity: 1; background: #fff; transform: translateY(-1px); }
button.shadow-stage:focus-visible { outline: 3px solid var(--skill-soft); outline-offset: 3px; opacity: 1; }
button.shadow-stage:disabled { cursor: not-allowed; opacity: .42; transform: none; }
.shadow-stage.is-locked { cursor: default; }
.shadow-stage b { font-size: 12px; }
.shadow-stage small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.shadow-stage.is-active { opacity: 1; background: #fff; box-shadow: 0 8px 20px -10px var(--skill); }
.imitation-prompt { display: grid; gap: 9px; }
.imitation-prompt > p:first-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.shadow-target { margin: 0; min-height: 58px; display: grid; align-items: center; padding: 15px 17px; border-radius: 14px; background: #fff; font-size: 16px; line-height: 1.7; transition: .2s ease; }
.shadow-target.is-blind { color: var(--muted); font-size: 12px; font-style: italic; }
.shadow-target.is-keywords { word-spacing: 5px; color: var(--green); font-weight: 800; }
.scaffold-actions, .compare-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.imitation-main-action { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.imitation-main-action > small { flex: 1 1 260px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.take-review-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.take-review-actions[hidden] { display: none; }
.take-review-actions .chip-button, .take-use-button { min-height: 44px; }
.take-use-button { padding-inline: 17px; }
.record-stop { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 15px; border: 1px solid rgba(190, 59, 39, .35); border-radius: 12px; background: rgba(190, 59, 39, .09); color: #9c3424; font-weight: 850; cursor: pointer; }
.record-stop i { width: 9px; height: 9px; border-radius: 2px; background: currentColor; animation: armedPulse 1.4s ease-in-out infinite; }
.shadow-heard { display: grid; gap: 7px; }
.shadow-heard > span { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .4px; text-transform: uppercase; }
.shadow-heard audio { width: 100%; min-height: 38px; }
.imitation-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.imitation-metrics > div { display: grid; gap: 3px; padding: 11px; border-radius: 12px; background: rgba(255, 255, 255, .78); }
.imitation-metrics strong { min-width: 3.2ch; display: inline-block; font-family: Georgia, serif; font-size: 24px; color: var(--skill); font-variant-numeric: tabular-nums; transform-origin: 50% 72%; }
.imitation-metrics span { color: var(--muted); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .3px; }
.shadow-heard.is-metrics-revealing .imitation-metrics strong.is-counting { animation: imitationMetricSettle .62s var(--ease) both; }
.shadow-heard.is-metrics-revealing .imitation-metrics > div:nth-child(2) strong.is-counting { animation-delay: .055s; }
.shadow-heard.is-metrics-revealing .imitation-metrics > div:nth-child(3) strong.is-counting { animation-delay: .11s; }
.shadow-heard.is-metrics-revealing .imitation-metrics > div:nth-child(4) strong.is-counting { animation-delay: .165s; }
.imitation-metrics strong.is-best-confirmed { animation: imitationBestConfirmed .7s var(--ease) both; }
@keyframes imitationMetricSettle {
    0% { opacity: .25; transform: translateY(7px) scale(.92); text-shadow: 0 0 0 rgba(111, 95, 208, 0); }
    64% { opacity: 1; transform: translateY(-1px) scale(1.055); text-shadow: 0 5px 16px rgba(111, 95, 208, .24); }
    100% { opacity: 1; transform: none; text-shadow: none; }
}
@keyframes imitationBestConfirmed {
    0%, 100% { transform: none; text-shadow: none; }
    48% { color: var(--green); transform: scale(1.08); text-shadow: 0 5px 17px rgba(159, 199, 69, .34); }
}
.score-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.chip-button.is-danger { border-color: rgba(190, 59, 39, .35); color: #9c3424; }

.lesson-complete { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 15px; padding: 22px; overflow: hidden; border: 1px solid rgba(159, 199, 69, .55); border-radius: var(--radius-lg); background: linear-gradient(135deg, #f5ffdc, #fff 62%); box-shadow: var(--shadow); }
.lesson-complete[hidden] { display: none; }
.lesson-complete-bloom { grid-row: 1 / span 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; background: var(--lime); color: var(--green); font-size: 22px; }
.lesson-complete h2 { margin: 3px 0 4px; font-family: Georgia, serif; font-size: 22px; }
.lesson-complete p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.lesson-complete-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* Word-level diff readout */
.diff-line { margin: 0; display: flex; flex-wrap: wrap; gap: 5px 7px; font-size: 15px; line-height: 1.6; }
.diff-word { padding: 1px 4px; border-radius: 5px; }
.diff-word.is-hit { color: #2f7350; }
.diff-word.is-miss { background: rgba(255, 148, 102, .28); color: #94411f; text-decoration: underline wavy rgba(148, 65, 31, .5); text-underline-offset: 3px; }
.diff-word.is-extra { color: var(--muted); text-decoration: line-through; }
.diff-legend { display: flex; flex-wrap: wrap; gap: 13px; margin: 0; color: var(--muted); font-size: 12px; }
.diff-legend span { display: inline-flex; align-items: center; gap: 5px; }
.diff-legend i { width: 9px; height: 9px; border-radius: 3px; }
.diff-score { display: flex; align-items: baseline; gap: 7px; }
.diff-score strong { font-family: Georgia, serif; font-size: 29px; line-height: 1; color: var(--skill); }
.diff-score span { color: var(--muted); font-size: 11px; }

/* ==========================================================================
   SPEAK · Roleplay Studio
   ========================================================================== */

.scenario-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 11px; }
.scenario-card {
    display: grid;
    gap: 6px;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: rgba(255, 255, 255, .66);
    text-align: left;
    cursor: pointer;
    transition: .25s var(--ease);
}
.scenario-card:hover { border-color: var(--skill); background: var(--skill-tint); transform: translateY(-3px); box-shadow: 0 16px 30px -18px var(--skill); }
.scenario-card.is-active { border-color: transparent; background: var(--skill); color: #fff; }
.scenario-card.is-active small, .scenario-card.is-active .scenario-level { color: rgba(255, 255, 255, .8); }
.scenario-icon { font-size: 21px; line-height: 1; }
.scenario-card b { font-size: 14px; letter-spacing: -.3px; }
.scenario-card small { color: var(--muted); font-size: 11px; line-height: 1.6; }
.scenario-level { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .8px; text-transform: uppercase; }

/* ---------- The scene, written out to run elsewhere ---------- */

.lb-swal-wide .swal2-html-container { margin: 14px 0 0; text-align: left; }
.handoff-lede { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.handoff-lede b { color: var(--ink); }
.handoff-text {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.65;
    resize: vertical;
    /* The prompt is long on purpose; scroll it rather than shrink the type. */
    max-height: 46vh;
}
.handoff-text:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(33, 75, 59, .12); }

/* ---------- The shelf of saved scenes ---------- */

.express-practice-shelf { padding: 0; overflow: hidden; }
.express-practice-summary {
    min-height: 82px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    list-style: none;
    cursor: pointer;
    transition: background .2s ease;
}
.express-practice-summary::-webkit-details-marker { display: none; }
.express-practice-summary::marker { content: ""; }
.express-practice-summary:hover { background: rgba(111, 95, 208, .06); }
.express-practice-summary:focus-visible { outline: 3px solid var(--skill); outline-offset: -4px; border-radius: calc(var(--radius-lg) - 2px); }
.express-practice-summary h2 { margin: 5px 0 0; color: var(--ink); font-size: 20px; letter-spacing: -.6px; }
.express-practice-summary .express-practice-chevron {
    flex: 0 0 auto;
    width: 10px;
    height: 7px;
    margin: 8px 3px 0 0;
    border: 0;
    background: var(--skill);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    filter: drop-shadow(0 3px 5px rgba(111, 95, 208, .28));
    transition: transform .24s var(--ease);
}
.express-practice-shelf[open] .express-practice-chevron { transform: rotate(180deg); }
.express-practice-body { padding: 18px 22px 22px; border-top: 1px solid var(--line); animation: expressPracticeReveal .28s var(--ease) both; }
.express-practice-intro { margin: 0 0 17px; color: var(--muted); font-size: 12px; line-height: 1.7; }
@keyframes expressPracticeReveal {
    from { opacity: 0; transform: translateY(-7px); }
    to { opacity: 1; transform: none; }
}

.scene-group { display: grid; gap: 10px; }
.scene-group + .scene-group { margin-top: 22px; }
.scene-group > h3 { margin: 0; font-size: 13px; letter-spacing: -.2px; }
.scene-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 9px; }
.scene-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255, 255, 255, .66);
    transition: .2s var(--ease);
}
.scene-card:hover { border-color: var(--skill); background: var(--skill-tint); }
.scene-card .scene-icon { font-size: 20px; text-align: center; }
.scene-body { display: grid; gap: 2px; min-width: 0; }
.scene-body b { font-size: 13.5px; letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-body small { color: var(--muted); font-size: 11px; }
.scene-actions { display: flex; align-items: center; gap: 6px; }
.scene-delete {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    background: none;
    color: var(--muted);
    font-size: 11px;
    cursor: pointer;
    transition: .16s var(--ease);
}
.scene-delete:hover { border-color: rgba(200, 86, 58, .4); color: #c8563a; background: rgba(200, 86, 58, .08); }

.scene-days { display: grid; gap: 18px; }
.scene-day > h4 {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 0 0 8px;
    font-size: 12px;
    letter-spacing: -.1px;
}
.scene-day > h4 span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .6px; }

.chat-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.retell-refresh-button { gap: 6px; }
.retell-refresh-button[aria-busy="true"] { cursor: wait; }
.retell-refresh-button[aria-busy="true"] .retell-refresh-icon {
    display: inline-block;
    animation: retellRefreshSpin .9s linear infinite;
}
@keyframes retellRefreshSpin { to { transform: rotate(360deg); } }
/* A turn the coach supplied, marked so a read-back is honest about it. */
.chat-who i { margin-left: 6px; color: var(--muted); font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }

/* ---------- Ask for a scene of your own ---------- */

.scenario-custom {
    margin-top: 14px;
    padding: 17px 19px;
    display: grid;
    gap: 11px;
    border: 1px dashed rgba(23, 49, 40, .2);
    border-radius: 19px;
    background: rgba(255, 255, 255, .5);
}
.scenario-custom-head { display: grid; gap: 3px; }
.scenario-custom-head label { font-size: 13px; font-weight: 800; }
.scenario-custom-head small { color: var(--muted); font-size: 11.5px; line-height: 1.65; }
.scenario-custom textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(255, 255, 255, .8);
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.6;
    resize: vertical;
    transition: .2s var(--ease);
}
.scenario-custom textarea:focus { outline: 0; border-color: var(--skill); background: #fff; box-shadow: 0 0 0 3px var(--skill-soft); }
.scenario-custom-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
/* A scene that was written for you should look different from the fixed nine. */
.scenario-card.is-custom { border-style: dashed; border-color: rgba(208, 96, 44, .45); }
.scenario-card.is-custom.is-active { border-style: solid; }

/* ---------- Stuck mid-scene ---------- */

.coach-card {
    position: relative;
    padding: 17px 40px 17px 19px;
    display: grid;
    gap: 10px;
    border: 1px solid var(--skill);
    border-radius: 17px;
    background: var(--skill-tint);
    animation: coachIn .18s var(--ease) both;
}
@keyframes coachIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.coach-close {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .6);
    color: var(--skill);
    font-size: 12px;
    cursor: pointer;
}
.coach-close:hover { background: #fff; }
.coach-kicker { color: var(--skill); font-size: 9px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; }
.coach-card p { margin: 5px 0 0; font-size: 14px; line-height: 1.7; }
.coach-card small { color: var(--muted); font-size: 11px; line-height: 1.6; }
.coach-chunks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
.coach-chunk {
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: .16s var(--ease);
}
.coach-chunk:hover { background: #fff; transform: translateY(-1px); }
.coach-line p { font-size: 16px; font-weight: 600; line-height: 1.65; }
.coach-line-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 3px; }
/* A link, not a button: every press of it is a turn that was not spoken. */
.coach-skip {
    border: 0;
    background: none;
    padding: 0;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.coach-skip:hover { color: var(--ink); }

.chat-stage { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 15px; min-height: 460px; }
.chat-source-intro { display: grid; gap: 10px; }
.chat-scene { display: flex; align-items: flex-start; gap: 13px; padding: 15px 17px; border-radius: 16px; background: var(--skill-tint); }
.chat-scene span { font-size: 20px; line-height: 1.2; }
.chat-scene div { display: grid; gap: 3px; }
.chat-scene b { font-size: 13px; }
.chat-scene p { margin: 0; color: #6b5241; font-size: 12px; line-height: 1.75; }
.retell-memory[hidden] { display: none; }
.retell-memory {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    overflow: hidden;
    padding: 13px 15px;
    border: 1px solid color-mix(in srgb, var(--skill) 23%, var(--line));
    border-radius: 16px;
    background:
        radial-gradient(circle at 93% 13%, rgba(199, 244, 93, .26), transparent 29%),
        linear-gradient(125deg, rgba(111, 95, 208, .09), rgba(255, 255, 255, .88) 56%, rgba(199, 244, 93, .1));
    box-shadow: 0 15px 34px -28px rgba(72, 57, 155, .62);
    animation: retellMemoryArrive .5s var(--ease) both;
}
.retell-memory::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(var(--skill), var(--lime));
}
.retell-memory-mark {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--skill);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 9px 19px -11px var(--skill);
}
.retell-memory-copy { min-width: 0; display: grid; gap: 5px; }
.retell-memory-kicker {
    color: var(--skill);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .095em;
}
.retell-memory-copy > p:not(.sr-only) {
    margin: 0;
    color: var(--muted);
    font-size: 10.5px;
    line-height: 1.55;
}
.retell-memory-words {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}
.retell-memory-words li {
    min-width: 0;
    max-width: 100%;
}
.retell-memory-anchor {
    min-height: 32px;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid rgba(111, 95, 208, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    font-weight: 780;
    line-height: 1.25;
    letter-spacing: .01em;
    text-align: left;
    overflow-wrap: anywhere;
    box-shadow: 0 6px 14px -13px rgba(39, 29, 105, .72);
    cursor: pointer;
    transition: transform .18s var(--ease), border-color .18s ease, background .18s ease, color .18s ease;
}
.retell-memory-anchor::after {
    content: "↘";
    flex: 0 0 auto;
    opacity: .58;
    font-size: 9px;
    transition: transform .18s var(--ease);
}
.retell-memory-anchor:hover {
    border-color: color-mix(in srgb, var(--skill) 54%, var(--line));
    background: color-mix(in srgb, var(--skill-tint) 58%, #fff);
    transform: translateY(-1px);
}
.retell-memory-anchor.is-active {
    border-color: color-mix(in srgb, var(--skill) 78%, #23110a);
    background: color-mix(in srgb, var(--skill) 78%, #2a120c);
    color: #fff;
    box-shadow: 0 9px 18px -13px color-mix(in srgb, var(--skill) 86%, #000);
}
.retell-memory-anchor.is-active::after { transform: rotate(90deg); opacity: .9; }
.retell-memory-anchor:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--skill) 35%, transparent);
    outline-offset: 2px;
}
.retell-memory-clues {
    margin-top: 3px;
    padding: 11px 12px 12px;
    display: grid;
    gap: 7px;
    border: 1px solid color-mix(in srgb, var(--skill) 22%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface, #fff) 90%, var(--skill-tint));
    animation: retellMemoryClueIn .24s var(--ease) both;
}
.retell-memory-clues[hidden] { display: none; }
.retell-memory-clue-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.retell-memory-clue-head h3 { min-width: 0; margin: 0; display: grid; gap: 2px; }
.retell-memory-clue-head h3 span {
    color: var(--muted);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .11em;
}
.retell-memory-clue-head h3 strong {
    color: color-mix(in srgb, var(--skill) 78%, #34160c);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.retell-memory-clue-close {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
    color: var(--ink);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.retell-memory-clue-close:hover { border-color: var(--skill); color: var(--skill); }
.retell-memory-clue-close:focus-visible { outline: 3px solid color-mix(in srgb, var(--skill) 35%, transparent); outline-offset: 2px; }
.retell-memory-clues > p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.55;
}
.retell-memory-clues > p b { color: color-mix(in srgb, var(--skill) 78%, #34160c); letter-spacing: .08em; }
.retell-memory-clue-list {
    max-height: min(230px, 32vh);
    margin: 0;
    padding: 0 3px 0 0;
    display: grid;
    gap: 6px;
    overflow: auto;
    overscroll-behavior: contain;
    list-style: none;
    scrollbar-width: thin;
}
.retell-memory-clue-list li {
    min-width: 0;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    align-items: baseline;
    border: 1px solid color-mix(in srgb, var(--skill) 14%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface, #fff) 94%, transparent);
}
.retell-memory-clue-list li.is-empty {
    display: block;
    color: var(--muted);
    font-size: 10.5px;
    line-height: 1.6;
}
.retell-memory-clue-number {
    color: var(--muted);
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: .035em;
    white-space: nowrap;
}
.retell-memory-clue-line {
    min-width: 0;
    margin: 0;
    padding: 1px 3px;
    border-radius: 6px;
    color: var(--ink);
    font-size: 11.5px;
    font-weight: 690;
    line-height: 1.75;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    cursor: zoom-in;
    user-select: none;
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.retell-memory-clue-line.is-revealed {
    background: color-mix(in srgb, var(--skill-tint) 52%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--skill) 18%, transparent);
    color: color-mix(in srgb, var(--skill) 68%, var(--ink));
    cursor: zoom-out;
}
.retell-memory-clue-line:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--skill) 35%, transparent);
    outline-offset: 2px;
}
.retell-memory-clue-word.is-anchor:not(.is-gap) {
    padding: 1px 3px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--skill-tint) 66%, transparent);
    color: color-mix(in srgb, var(--skill) 78%, #34160c);
    font-weight: 900;
}
.retell-memory-clue-word.is-gap {
    min-width: 2.5em;
    display: inline-block;
    border-bottom: 1px solid color-mix(in srgb, var(--skill) 42%, var(--line));
    color: color-mix(in srgb, var(--skill) 78%, #34160c);
    font-weight: 900;
    letter-spacing: .08em;
    text-align: center;
}
.retell-memory-loading { display: flex; gap: 7px; margin-top: 3px; }
.retell-memory-loading[hidden] { display: none; }
.retell-memory-loading i {
    width: 58px;
    height: 27px;
    border-radius: 999px;
    background: linear-gradient(100deg, rgba(111, 95, 208, .08) 20%, rgba(111, 95, 208, .17) 48%, rgba(111, 95, 208, .08) 76%);
    background-size: 220% 100%;
    animation: retellMemoryPrepare 1.25s ease-in-out infinite;
}
.retell-memory-loading i:nth-child(2) { width: 72px; animation-delay: .1s; }
.retell-memory-loading i:nth-child(3) { width: 50px; animation-delay: .2s; }
.retell-memory-availability {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 10px;
    margin-top: 2px;
    color: var(--muted);
    font-size: 10.5px;
    line-height: 1.5;
}
.retell-memory-availability[hidden] { display: none; }
.retell-memory-retry {
    border: 1px solid color-mix(in srgb, var(--skill) 78%, #23110a);
    border-radius: 999px;
    padding: 5px 9px;
    background: color-mix(in srgb, var(--skill) 78%, #2a120c);
    color: #fff;
    font: inherit;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(35, 17, 10, .28);
    box-shadow: 0 7px 15px -11px color-mix(in srgb, var(--skill) 84%, #000);
    cursor: pointer;
    transition: transform .18s var(--ease), border-color .18s ease, background .18s ease, filter .18s ease;
}
.retell-memory-retry:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(.9); }
.retell-memory-retry:disabled {
    border-color: color-mix(in srgb, var(--skill) 72%, #23110a);
    background: color-mix(in srgb, var(--skill) 84%, #23110a);
    color: #fff;
    opacity: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .32);
    box-shadow: none;
    cursor: wait;
}
.retell-memory-retry:focus-visible { outline: 3px solid color-mix(in srgb, var(--skill) 32%, transparent); outline-offset: 2px; }
@keyframes retellMemoryArrive {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}
@keyframes retellMemoryPrepare {
    to { background-position: -120% 0; }
}
@keyframes retellMemoryClueIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
.retell-lines-dialog {
    width: min(720px, calc(100vw - 32px));
    max-width: none;
    max-height: min(84vh, 780px);
    padding: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--skill) 28%, var(--line));
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface, #fff) 94%, var(--skill-tint));
    color: var(--ink);
    box-shadow: 0 34px 90px -35px rgba(23, 18, 63, .72);
}
.retell-lines-dialog[open] { animation: retellLinesDialogIn .24s var(--ease) both; }
.retell-lines-dialog::backdrop {
    background: rgba(16, 13, 37, .62);
    backdrop-filter: blur(5px);
}
.retell-lines-dialog-card {
    position: relative;
    max-height: min(84vh, 780px);
    padding: 25px;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 10px;
    overflow: hidden;
}
.retell-lines-dialog h2 { margin: 0; padding-right: 42px; font-family: Georgia, serif; font-size: clamp(22px, 4vw, 29px); font-weight: 500; letter-spacing: -.65px; }
.retell-lines-dialog-card > p { margin: 0 38px 4px 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.retell-lines-close {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
    color: var(--ink);
    cursor: pointer;
}
.retell-lines-close:hover { border-color: var(--skill); color: var(--skill); }
.retell-source-lines {
    margin: 4px 0 0;
    padding: 2px 4px 2px 0;
    display: grid;
    gap: 8px;
    overflow: auto;
    overscroll-behavior: contain;
    list-style: none;
    counter-reset: retell-source-line;
    scrollbar-width: thin;
}
.retell-source-lines li {
    counter-increment: retell-source-line;
    min-width: 0;
    padding: 11px 13px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border: 1px solid color-mix(in srgb, var(--skill) 14%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface, #fff) 87%, transparent);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.65;
    overflow-wrap: anywhere;
}
.retell-source-lines li::before {
    content: counter(retell-source-line);
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--skill-tint);
    color: var(--skill);
    font-size: 10px;
    font-weight: 900;
}
.retell-lines-dialog-actions { padding-top: 4px; display: flex; justify-content: flex-end; }
.retell-lines-dialog-actions .skill-cta { min-height: 42px; }
@keyframes retellLinesDialogIn {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: none; }
}
.chat-log { display: grid; gap: 11px; align-content: start; padding: 4px; overflow-y: auto; max-height: 420px; scrollbar-width: thin; }
.chat-turn { display: grid; gap: 5px; max-width: 76%; }
.chat-turn.from-ai { justify-self: start; }
.chat-turn.from-me { justify-self: end; text-align: right; }
.chat-who { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .7px; text-transform: uppercase; }
.chat-bubble { padding: 12px 16px; border-radius: 17px; font-size: 14px; line-height: 1.7; }
.from-ai .chat-bubble { border-bottom-left-radius: 5px; background: #fff; border: 1px solid var(--line); }
.from-me .chat-bubble { border-bottom-right-radius: 5px; background: var(--skill); color: #fff; text-align: left; }
.chat-bubble.is-thinking { display: inline-flex; gap: 4px; padding: 15px 17px; }
.chat-bubble.is-thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: thinkingBounce 1.1s ease-in-out infinite; }
.chat-bubble.is-thinking i:nth-child(2) { animation-delay: .15s; }
.chat-bubble.is-thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes thinkingBounce { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
.chat-turn.is-live-turn .chat-bubble { position: relative; overflow: hidden; }
.chat-turn.is-live-turn .chat-bubble::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .78), transparent); transform: translateX(-100%); animation: liveTranscriptSweep 1.4s linear infinite; }
.chat-turn.from-ai.is-live-turn .chat-bubble::after { background: linear-gradient(90deg, transparent, var(--skill), transparent); opacity: .55; }
.chat-bubble.is-live-transcript { min-width: 72px; }
.chat-turn.is-live-turn .chat-who { opacity: .78; }
@keyframes liveTranscriptSweep { to { transform: translateX(100%); } }
.chat-replay { justify-self: start; border: 0; background: transparent; padding: 0; color: var(--muted); font-size: 10px; font-weight: 750; cursor: pointer; }
.chat-replay:hover { color: var(--skill); }

.chat-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255, 255, 255, .7); }
.chat-aux { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.talk-button { position: relative; width: 58px; height: 58px; border: 0; border-radius: 50%; background: var(--skill); color: #fff; font-size: 21px; cursor: pointer; box-shadow: 0 12px 24px -12px var(--skill); transition: .25s var(--ease); }
.talk-button:hover { transform: scale(1.05); }
.talk-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.talk-button.is-listening { background: var(--orange); }
.talk-button.is-listening::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--orange); opacity: .55; animation: talkRipple 1.5s ease-out infinite; }
.express-record-stop { min-height: 50px; white-space: nowrap; }
.express-record-stop[hidden] { display: none; }
.express-record-stop:disabled { opacity: .55; cursor: wait; }
@keyframes talkRipple { to { transform: scale(1.35); opacity: 0; } }
.talk-status { display: grid; gap: 2px; min-width: 0; }
.talk-status strong { font-size: 13px; }
.talk-status span { color: var(--muted); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.talk-status .realtime-voice-status { width: max-content; max-width: 100%; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 2px; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--skill) 11%, white); color: var(--skill-dark, var(--skill)); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.talk-status .realtime-voice-status[hidden] { display: none; }
.talk-status .realtime-voice-status span { color: inherit; font-size: inherit; line-height: inherit; }
.realtime-voice-status i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent); }
.realtime-voice-status[data-state="connecting"] i,
.realtime-voice-status[data-state="thinking"] i,
.realtime-voice-status[data-state="saving"] i,
.realtime-voice-status[data-state="speaking"] i { animation: realtimeVoicePulse 1.1s ease-in-out infinite; }
.realtime-voice-status[data-state="fallback"],
.realtime-voice-status[data-state="attention"],
.realtime-voice-status[data-state="error"] { background: rgba(244, 146, 63, .13); color: #a8511a; }
.chat-aux .chip-button.is-voice-ready { border-color: color-mix(in srgb, var(--skill) 58%, white); background: color-mix(in srgb, var(--skill) 13%, white); color: var(--skill-dark, var(--skill)); box-shadow: 0 0 0 0 color-mix(in srgb, var(--skill) 24%, transparent); animation: speechFallbackReady 1.4s ease-out infinite; }
@keyframes realtimeVoicePulse { 50% { transform: scale(1.45); opacity: .45; } }
@keyframes speechFallbackReady { 65% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Debrief */
.debrief { display: grid; gap: 20px; }
.debrief-section { display: grid; gap: 11px; }
.debrief-section > h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; letter-spacing: -.3px; }
.debrief-section > h3 span { font-size: 15px; }
.debrief-section > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.upgrade-row { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255, 255, 255, .66); }
.upgrade-side { display: grid; gap: 4px; min-width: 0; }
.upgrade-side span { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .6px; text-transform: uppercase; }
.upgrade-side p { margin: 0; font-size: 13px; line-height: 1.6; }
.upgrade-side.is-yours p { color: var(--muted); }
.upgrade-side.is-native p { font-weight: 650; }
.upgrade-arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--skill-tint); color: var(--skill); font-size: 13px; }
.steal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.steal-card { display: grid; gap: 6px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255, 255, 255, .7); }
.steal-card b { font-size: 14px; }
.steal-card small { color: var(--muted); font-size: 11px; line-height: 1.65; }
.steal-card .chip-button { justify-self: start; margin-top: 3px; }
.avoided-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.avoided-list li { display: grid; gap: 4px; padding: 13px 15px; border-left: 3px solid var(--orange); border-radius: 0 12px 12px 0; background: rgba(255, 148, 102, .1); }
.avoided-list b { font-size: 12px; }
.avoided-list span { color: var(--muted); font-size: 11px; line-height: 1.7; }

/* ---------- EXPRESS · output after imitation ---------- */

.express-view { position: relative; }
.express-back-float {
    position: fixed;
    z-index: 40;
    top: 50%;
    left: max(16px, calc((100vw - var(--shell)) / 2 + var(--gutter) - 154px));
    width: 138px;
    min-height: 48px;
    padding: 7px 11px 7px 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(111, 95, 208, .25);
    border-radius: 15px;
    background: rgba(255, 255, 252, .9);
    color: var(--skill);
    box-shadow: 0 15px 34px rgba(55, 46, 119, .16);
    backdrop-filter: blur(16px);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.25;
    transform: translateY(-50%);
    transition: transform .22s var(--ease), border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.express-back-icon {
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--skill);
    color: #fff;
    font-size: 17px;
    box-shadow: 0 8px 17px -10px var(--skill);
}
.express-back-float:hover {
    border-color: var(--skill);
    background: #fff;
    box-shadow: 0 18px 38px rgba(55, 46, 119, .21);
    transform: translate(2px, calc(-50% - 2px));
}
.express-back-float:focus-visible { outline: 3px solid var(--skill); outline-offset: 4px; }

.express-finish-button {
    position: relative;
    isolation: isolate;
    min-height: 46px;
    padding: 0 8px 0 18px;
    background: linear-gradient(135deg, var(--skill), #5747bd);
    box-shadow: 0 13px 27px -13px var(--skill);
    animation: expressFinishGlow 3.2s ease-in-out infinite;
}
.express-finish-button::after {
    content: "↗";
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .2);
    font-size: 15px;
}
.express-finish-button:hover:not(:disabled) { filter: brightness(1.03); box-shadow: 0 17px 31px -13px var(--skill); }
.express-finish-button:focus-visible { outline: 3px solid var(--skill-soft); outline-offset: 4px; }
.express-finish-button:disabled { animation: none; }
@keyframes expressFinishGlow {
    0%, 68%, 100% { box-shadow: 0 13px 27px -13px var(--skill), 0 0 0 0 rgba(111, 95, 208, 0); }
    80% { box-shadow: 0 15px 30px -12px var(--skill), 0 0 0 6px rgba(111, 95, 208, .11); }
}

.express-bridge {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 15px 18px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, .55);
}
.express-bridge > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1px 9px; min-width: 0; }
.express-bridge > div > span { grid-row: 1 / span 2; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 10px; background: rgba(111, 95, 208, .1); color: var(--skill); font-size: 11px; font-weight: 900; }
.express-bridge > div.is-current > span { background: var(--skill); color: #fff; box-shadow: 0 9px 18px -11px var(--skill); }
.express-bridge b { font-size: 12px; }
.express-bridge small { color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.express-bridge > i { color: var(--muted); font-size: 13px; font-style: normal; }
.express-free-panel { border-style: dashed; background: rgba(255, 255, 255, .52); }
.express-free-panel .scenario-grid { opacity: .94; }

.debrief-lead { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.debrief-lead article { padding: 17px 18px; display: grid; gap: 7px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .72); }
.debrief-lead article:last-child { background: var(--skill-tint); border-color: transparent; }
.debrief-lead span { color: var(--skill); font-size: 9px; font-weight: 900; letter-spacing: 1.15px; }
.debrief-lead p { margin: 0; font-size: 13px; line-height: 1.75; }

.rehearsal-section { padding: 20px; border: 1px solid rgba(111, 95, 208, .2); border-radius: 20px; background: linear-gradient(145deg, rgba(232, 228, 253, .72), rgba(255, 255, 255, .72)); }
.rehearsal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.rehearsal-heading > div:first-child { display: grid; gap: 6px; }
.rehearsal-heading h3 { margin: 0; font-family: Georgia, serif; font-size: 20px; font-weight: 500; letter-spacing: -.45px; }
.rehearsal-voice-status { margin: 0; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .45px; }
.rehearsal-bonus-status {
    width: fit-content;
    margin: 2px 0 0;
    padding: 6px 10px;
    border: 1px solid rgba(111, 95, 208, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    color: color-mix(in srgb, var(--ink) 86%, var(--skill));
    font-size: 10px;
    font-weight: 850;
    line-height: 1.4;
}
.rehearsal-bonus-status.is-awarded {
    border-color: rgba(173, 140, 37, .42);
    background: linear-gradient(110deg, rgba(255, 244, 188, .92), rgba(224, 252, 166, .88));
    color: #705414;
    animation: rehearsalBonusArrive .7s cubic-bezier(.2, .9, .3, 1.16) both;
}
@keyframes rehearsalBonusArrive {
    0% { opacity: 0; transform: translateY(7px) scale(.9); }
    68% { opacity: 1; transform: translateY(-1px) scale(1.04); }
    100% { opacity: 1; transform: none; }
}
.rehearsal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.rehearsal-memory-stage { display: grid; gap: 10px; }
.rehearsal-lines { margin: 0; padding: 0; display: grid; gap: 9px; list-style: none; counter-reset: rehearsal; }
.rehearsal-lines li { position: relative; isolation: isolate; overflow: hidden; counter-increment: rehearsal; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 13px 14px; border: 1px solid rgba(111, 95, 208, .14); border-radius: 14px; background: rgba(255, 255, 255, .82); transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.rehearsal-lines li::before { position: relative; z-index: 1; content: counter(rehearsal); width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: var(--skill-tint); color: var(--skill); font-size: 10px; font-weight: 900; }
.rehearsal-lines li > * { position: relative; z-index: 1; }
.rehearsal-lines li.is-recalling { border-color: rgba(255, 148, 102, .58); background: rgba(255, 251, 247, .94); box-shadow: 0 14px 30px -26px rgba(148, 65, 31, .7); }
.rehearsal-lines li.is-transcript-match { border-color: rgba(35, 132, 95, .48); background: linear-gradient(145deg, rgba(235, 250, 243, .96), rgba(255, 255, 255, .9)); box-shadow: 0 16px 32px -27px rgba(21, 95, 70, .82); }
.rehearsal-lines li.is-transcript-match::before { background: #d9f4e8; color: #155f46; }
.rehearsal-lines li.is-transcript-match.is-recalling { border-color: rgba(255, 148, 102, .58); background: rgba(255, 251, 247, .94); box-shadow: 0 14px 30px -26px rgba(148, 65, 31, .7); }
.rehearsal-lines li.is-transcript-match-celebrating { animation: rehearsalSuccessGlow .9s var(--ease) both; }
.rehearsal-lines li.is-transcript-match-celebrating::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 17% 24%, rgba(255, 191, 71, .78) 0 3px, transparent 4px),
        radial-gradient(circle at 78% 22%, rgba(35, 132, 95, .62) 0 3px, transparent 4px),
        radial-gradient(circle at 87% 76%, rgba(111, 95, 208, .5) 0 2px, transparent 3px),
        linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .12) 34%, rgba(255, 255, 255, .9) 48%, rgba(255, 255, 255, .12) 61%, transparent 70%);
    opacity: 0;
    transform: translateX(-72%);
    animation: rehearsalSuccessSweep .86s var(--ease) both;
}
.rehearsal-line-copy { min-width: 0; display: grid; gap: 8px; }
.rehearsal-line-target { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: 14px; font-weight: 650; line-height: 1.65; overflow-wrap: anywhere; }
.rehearsal-line-hidden { margin: 0; min-height: 26px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 800; line-height: 1.55; }
.rehearsal-line-hidden span { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 148, 102, .16); color: #94411f; }
.rehearsal-line-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.rehearsal-line-play { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.rehearsal-line-play:hover { border-color: var(--skill); color: var(--skill); }
.rehearsal-line-say { min-height: 44px; padding: 0 15px; border: 1px solid rgba(111, 95, 208, .32); border-radius: 12px; background: var(--skill); color: #fff; font-size: 11px; font-weight: 900; white-space: nowrap; cursor: pointer; }
.rehearsal-line-say:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 22px -17px rgba(49, 34, 118, .85); }
.rehearsal-line-say.is-recording { padding-left: 13px; border-color: rgba(148, 65, 31, .34); background: var(--orange); color: #4d2515; }
.rehearsal-line-say.is-recording::before { content: ""; width: 7px; height: 7px; margin-right: 7px; display: inline-block; border-radius: 50%; background: currentColor; animation: rehearsalRecordingPulse 1.15s ease-in-out infinite; }
.rehearsal-line-play:disabled, .rehearsal-line-say:disabled { cursor: not-allowed; opacity: .48; transform: none; box-shadow: none; }
.rehearsal-line-result { display: grid; gap: 6px; padding: 10px 12px; border-left: 3px solid var(--skill); border-radius: 0 12px 12px 0; background: rgba(255, 255, 255, .88); animation: rehearsalLineResultIn .34s var(--ease) both; }
.is-transcript-match .rehearsal-line-result { border-left-color: #23845f; background: rgba(255, 255, 255, .94); }
.rehearsal-line-success { display: flex; align-items: center; gap: 9px; margin-bottom: 2px; color: #155f46; }
.rehearsal-line-success > span:last-child { min-width: 0; display: grid; gap: 1px; }
.rehearsal-line-success-mark { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 50%; background: #d9f4e8; color: #155f46; font-size: 15px; font-weight: 950; }
.rehearsal-line-success strong { font-size: 12px; line-height: 1.35; }
.rehearsal-line-success small { color: #49635a; font-size: 9.5px; font-weight: 750; line-height: 1.45; }
.is-transcript-match-celebrating .rehearsal-line-success-mark { animation: rehearsalSuccessCheck .62s cubic-bezier(.2, .9, .3, 1.25) both; }
.rehearsal-line-result-label { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.rehearsal-line-heard { font-size: 13px; font-weight: 700; }
.rehearsal-line-heard .diff-word.is-extra { background: rgba(190, 59, 39, .12); color: #963a29; text-decoration-color: currentColor; }
.rehearsal-line-summary { margin: 0; color: var(--muted); font-size: 11px; font-weight: 650; line-height: 1.55; }
@keyframes rehearsalLineResultIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rehearsalRecordingPulse { 50% { opacity: .35; transform: scale(.78); } }
@keyframes rehearsalSuccessGlow {
    0%, 100% { box-shadow: 0 16px 32px -27px rgba(21, 95, 70, .82); }
    42% { box-shadow: 0 0 0 4px rgba(55, 181, 132, .14), 0 19px 38px -23px rgba(21, 95, 70, .92); }
}
@keyframes rehearsalSuccessSweep {
    0% { opacity: 0; transform: translateX(-72%); }
    28% { opacity: 1; }
    100% { opacity: 0; transform: translateX(72%); }
}
@keyframes rehearsalSuccessCheck {
    0% { opacity: 0; transform: scale(.45) rotate(-16deg); }
    68% { opacity: 1; transform: scale(1.13) rotate(3deg); }
    100% { opacity: 1; transform: none; }
}
.rehearsal-lines.is-concealed { display: none; }
.rehearsal-hidden-prompt {
    min-height: 78px;
    padding: 17px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    place-content: center;
    align-items: center;
    gap: 10px;
    border: 1px dashed rgba(111, 95, 208, .3);
    border-radius: 14px;
    background: rgba(255, 255, 255, .45);
    color: var(--muted);
}
.rehearsal-hidden-prompt span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--skill-tint); color: var(--skill); font-size: 17px; }
.rehearsal-hidden-prompt p { margin: 0; font-size: 12px; font-weight: 750; line-height: 1.6; }
.rehearsal-recall { display: grid; gap: 13px; padding-top: 4px; }
.rehearsal-recall > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.rehearsal-mic-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 13px; padding: 13px; border: 1px solid rgba(111, 95, 208, .18); border-radius: 17px; background: rgba(255, 255, 255, .68); }
.rehearsal-talk { width: 50px; height: 50px; font-size: 18px; }
.rehearsal-transcript { margin: 0; padding: 14px 16px; border-left: 3px solid var(--skill); border-radius: 0 13px 13px 0; background: #fff; font-size: 13px; line-height: 1.75; }
.rehearsal-transcript::before { content: "You said  "; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.rehearsal-rating { margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 0; }
.rehearsal-rating legend { width: 100%; margin-bottom: 3px; color: var(--muted); font-size: 11px; font-weight: 750; }
.rehearsal-rating button { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 800; cursor: pointer; }
.rehearsal-rating button:hover { border-color: var(--skill); background: var(--skill-tint); }
.rehearsal-rating button.is-selected { border-color: transparent; background: var(--skill); color: #fff; }

@media (max-width: 1860px) and (min-width: 901px) {
    .module-view.express-view { padding-left: clamp(var(--gutter), calc(954px - 50vw), 174px); }
    .express-back-float { left: 18px; }
}

/* The shell widens at 1800px. Keep the full floating label in its own lane
   across that breakpoint instead of letting it overlap the Express panels. */
@media (min-width: 1800px) and (max-width: 1999px) {
    .module-view.express-view { padding-left: clamp(var(--gutter), calc(1032px - 50vw), 174px); }
}

@media (max-width: 900px) {
    .module-view.express-view { padding-left: 74px; padding-right: 17px; }
    .express-back-float {
        left: max(10px, env(safe-area-inset-left));
        width: 48px;
        min-height: 48px;
        padding: 8px;
        justify-content: center;
        border-radius: 15px;
    }
    .express-back-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

@media (max-width: 720px) {
    .express-practice-summary { min-height: 74px; padding: 17px; }
    .express-practice-summary h2 { font-size: 18px; }
    .express-practice-body { padding: 15px 17px 18px; }
    .express-bridge { grid-template-columns: minmax(0, 1fr); }
    .express-bridge > i { transform: rotate(90deg); justify-self: center; }
    .debrief-lead { grid-template-columns: minmax(0, 1fr); }
    .rehearsal-heading { display: grid; }
    .rehearsal-actions { justify-content: flex-start; }
    .rehearsal-section { padding: 15px; }
    .rehearsal-lines li { grid-template-columns: 26px minmax(0, 1fr); }
    .rehearsal-line-actions { grid-column: 2; justify-content: flex-start; }
    .rehearsal-line-say { flex: 1 1 auto; }
    .rehearsal-line-success { align-items: flex-start; }
    .rehearsal-line-success small { max-width: 32ch; }
    .retell-lines-dialog { width: calc(100vw - 22px); max-height: 88vh; border-radius: 19px; }
    .retell-lines-dialog-card { max-height: 88vh; padding: 19px 16px 16px; }
    .retell-lines-dialog-card > p { margin-right: 32px; }
    .retell-lines-close { top: 13px; right: 13px; }
    .retell-source-lines li { padding: 10px; font-size: 12.5px; }
}

/* ==========================================================================
   READ · Article Miner
   ========================================================================== */

.reader-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, 360px); gap: 22px; align-items: start; }
.article-panel { padding: 30px 34px; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 14px; color: var(--muted); font-size: 10px; font-weight: 800; }
.article-meta a { color: var(--skill); text-decoration: underline; text-underline-offset: 2px; }
.article-panel h1 { margin: 0 0 18px; font-family: Georgia, "Songti SC", serif; font-size: 27px; font-weight: 500; line-height: 1.25; letter-spacing: -.9px; }
.article-body { max-height: 68vh; overflow-y: auto; scrollbar-width: thin; padding-right: 8px; font-size: 16px; line-height: 2; }
.article-body p { margin: 0 0 17px; }

.mark {
    padding: 1px 3px;
    border-radius: 5px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: .16s ease;
}
.mark:hover, .mark.is-selected { box-shadow: 0 0 0 2px currentColor inset; }
.mark-collocation { background: rgba(199, 244, 93, .42); border-bottom-color: #7fa62a; }
.mark-pattern { background: rgba(216, 210, 251, .55); border-bottom-color: #6f5fd0; }
.mark-register { background: rgba(255, 148, 102, .28); border-bottom-color: #d0602c; }
.mark-phrasal { background: rgba(157, 220, 236, .42); border-bottom-color: #23788f; }
.mark.mark-hidden { background: transparent; border-bottom-color: transparent; box-shadow: none; cursor: default; }

.legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .6); font-size: 10px; font-weight: 800; color: var(--muted); cursor: pointer; transition: .2s ease; }
.legend-item i { width: 10px; height: 10px; border-radius: 3px; }
.legend-item.is-off { opacity: .38; }
.legend-item:hover { border-color: var(--ink); color: var(--ink); }
.legend-count { color: var(--muted); font-weight: 800; }

.annotation-column { position: sticky; top: 18px; display: grid; gap: 14px; }
.annotation-panel { padding: 22px; min-height: 280px; }
.annotation-kind { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.annotation-panel h3 { margin: 13px 0 0; font-size: 21px; letter-spacing: -.6px; }
.annotation-gloss { margin: 9px 0 0; font-size: 13px; line-height: 1.85; }
.annotation-block { margin-top: 16px; display: grid; gap: 5px; }
.annotation-block > span { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .6px; text-transform: uppercase; }
.annotation-block p { margin: 0; font-size: 12px; line-height: 1.8; }
.annotation-block .is-quote { padding: 10px 13px; border-left: 3px solid var(--skill); border-radius: 0 10px 10px 0; background: var(--skill-tint); font-style: italic; }
.annotation-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.mining-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 9px; }
.mining-stat { display: grid; gap: 2px; padding: 13px; border-radius: 14px; background: rgba(255, 255, 255, .62); border: 1px solid var(--line); text-align: center; }
.mining-stat strong { font-family: Georgia, serif; font-size: 22px; line-height: 1; }
.mining-stat span { color: var(--muted); font-size: 9px; font-weight: 800; }

/* ==========================================================================
   WRITE · Forced Output Drill
   ========================================================================== */

.drill-layout { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 22px; align-items: start; }
.targets-panel { position: sticky; top: 18px; padding: 22px; }
.target-list { display: grid; gap: 9px; margin-top: 15px; }
.target-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .66);
    transition: .22s var(--ease);
}
.target-check { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: transparent; font-size: 12px; transition: .22s var(--ease); }
.target-body { display: grid; gap: 3px; min-width: 0; }
.target-body b { font-size: 13px; }
.target-body small { color: var(--muted); font-size: 11px; line-height: 1.6; }
.target-item.is-used { border-color: var(--skill); background: var(--skill-tint); }
.target-item.is-used .target-check { border-color: var(--skill); background: var(--skill); color: #fff; }
.target-progress { display: flex; align-items: baseline; gap: 7px; margin-top: 16px; }
.target-progress strong { font-family: Georgia, serif; font-size: 26px; line-height: 1; color: var(--skill); }
.target-progress span { color: var(--muted); font-size: 11px; }

.editor-panel { padding: 26px; display: grid; gap: 14px; }
.editor-prompt { display: grid; gap: 6px; padding: 15px 17px; border-radius: 15px; background: var(--skill-tint); }
.editor-prompt span { color: var(--skill); font-size: 9px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.editor-prompt p { margin: 0; font-size: 14px; line-height: 1.75; }
.editor-area {
    width: 100%;
    min-height: 300px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(252, 253, 249, .9);
    color: var(--ink);
    font-family: Georgia, "Songti SC", serif;
    font-size: 16px;
    line-height: 1.95;
    resize: vertical;
    outline: 0;
    transition: .2s ease;
}
.editor-area:focus { border-color: var(--skill); background: #fff; box-shadow: 0 0 0 3px var(--skill-soft); }
.editor-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.editor-counts { display: flex; gap: 16px; color: var(--muted); font-size: 11px; font-weight: 750; }
.editor-counts b { color: var(--ink); font-variant-numeric: tabular-nums; }
.editor-counts .is-short { color: var(--orange); }

.usage-list { display: grid; gap: 10px; }
.usage-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: 15px; border: 1px solid var(--line); background: rgba(255, 255, 255, .66); }
.usage-badge { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; font-size: 14px; }
.usage-row.is-natural .usage-badge { background: var(--mint); color: #2f7350; }
.usage-row.is-forced .usage-badge { background: rgba(255, 148, 102, .25); color: #94411f; }
.usage-row.is-missing .usage-badge { background: #eceeea; color: var(--muted); }
.usage-body { display: grid; gap: 5px; min-width: 0; }
.usage-body b { font-size: 13px; }
.usage-body p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.usage-body q { display: block; padding: 8px 12px; border-radius: 9px; background: rgba(248, 249, 243, .9); font-size: 12px; font-style: italic; line-height: 1.7; }

.rewrite-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.rewrite-side { display: grid; gap: 7px; padding: 16px 18px; border-radius: 15px; border: 1px solid var(--line); }
.rewrite-side.is-yours { background: rgba(248, 249, 243, .8); }
.rewrite-side.is-native { background: var(--skill-tint); border-color: transparent; }
.rewrite-side > span { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .6px; text-transform: uppercase; }
.rewrite-side p { margin: 0; font-family: Georgia, serif; font-size: 14px; line-height: 1.85; }
.rewrite-side ins { background: rgba(199, 244, 93, .5); border-radius: 4px; padding: 0 3px; text-decoration: none; }
.rewrite-side del { color: var(--muted); text-decoration-color: rgba(105, 118, 111, .6); }

/* ==========================================================================
   Capture drawer · shared "add to review"
   ========================================================================== */

.capture-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(21, 40, 32, .35); backdrop-filter: blur(3px); animation: fadeIn .25s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.capture-drawer {
    position: fixed;
    z-index: 41;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(460px, 100vw);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--cream);
    box-shadow: -24px 0 60px rgba(21, 40, 32, .18);
    animation: drawerIn .32s var(--ease) both;
}
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } }
.capture-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 26px 16px; border-bottom: 1px solid var(--line); }
.capture-head h2 { margin: 6px 0 0; font-size: 19px; letter-spacing: -.6px; }
.capture-close { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: #fff; font-size: 13px; cursor: pointer; }
.capture-close:hover { border-color: var(--ink); }
.capture-form { padding: 20px 26px 26px; overflow-y: auto; display: grid; gap: 15px; align-content: start; }
.capture-source { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: rgba(224, 244, 200, .5); }
.capture-source span { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .6px; text-transform: uppercase; }
.capture-source p { margin: 0; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }

.field { display: grid; gap: 7px; }
.field > span { display: flex; align-items: baseline; gap: 7px; color: #53675d; font-size: 11px; font-weight: 850; }
.field > span i { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 600; }
.field textarea, .field input[type="text"] {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.65;
    resize: vertical;
    outline: 0;
    transition: .2s ease;
}
.field textarea:focus, .field input[type="text"]:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(47, 115, 80, .12); }
.capture-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.capture-types label { display: block; }
.capture-types input { position: absolute; opacity: 0; pointer-events: none; }
.capture-types span { display: grid; place-items: center; min-height: 38px; border: 1px solid var(--line); border-radius: 11px; background: #fff; font-size: 11px; font-weight: 750; color: var(--muted); cursor: pointer; transition: .2s ease; }
.capture-types input:checked + span { border-color: transparent; background: var(--green); color: #fff; }
.capture-types input:focus-visible + span { outline: 3px solid rgba(169, 229, 53, .45); outline-offset: 2px; }
.capture-message { min-height: 16px; margin: 0; color: #ae4b33; font-size: 11px; }
.capture-message.is-ok { color: #2f7350; }
.capture-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.capture-submit { margin-top: 0; min-height: 50px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
    .listen-stage, .reader-layout, .drill-layout { grid-template-columns: minmax(0, 1fr); }
    .cue-column, .annotation-column, .targets-panel { position: static; }
    .cue-panel { max-height: 460px; }
    .article-body { max-height: none; }
}

@media (max-width: 900px) {
    .module-view { padding: 0 17px; margin-top: 18px; }
    .rewrite-compare { grid-template-columns: 1fr; }
    .upgrade-row { grid-template-columns: minmax(0, 1fr); gap: 9px; }
    .upgrade-arrow { transform: rotate(90deg); }
}

@media (max-width: 620px) {
    .panel { padding: 20px 17px; border-radius: 25px; }
    .article-panel { padding: 22px 19px; }
    .article-panel h1 { font-size: 22px; }
    .article-body { font-size: 15px; line-height: 1.9; }
    .source-row { grid-template-columns: minmax(0, 1fr); }
    .shadow-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chat-turn { max-width: 90%; }
    .retell-memory { padding: 12px 13px; gap: 10px; }
    .retell-memory-words { gap: 6px; }
    .retell-memory-anchor { padding: 5px 9px; font-size: 11.5px; }
    .retell-memory-clues { padding: 10px; }
    .retell-memory-clue-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .chat-controls { grid-template-columns: auto minmax(0, 1fr); }
    .chat-aux { grid-column: 1 / -1; justify-content: flex-start; }
    .scene-list { grid-template-columns: 1fr; }
    .coach-card { padding: 15px 38px 15px 16px; }
    .editor-panel { padding: 20px 17px; }
    .editor-area { padding: 16px 17px; font-size: 15px; }
    .capture-drawer { width: 100vw; }
    .capture-types { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .skill-tab, .transport-button, .scenario-card, .talk-button, .capture-drawer, .capture-backdrop, .coach-card, .express-back-float, .express-finish-button, .express-practice-chevron, .express-practice-body, .retell-memory-anchor, .retell-memory-anchor::after, .retell-memory-clue-line, .retell-memory-clue-close, .retell-memory-retry, .retell-refresh-button .retell-refresh-icon { transition: none; animation: none; }
    .is-loading::after, .transport-button.is-armed, .talk-button.is-listening::before, .chat-bubble.is-thinking i, .chat-turn.is-live-turn .chat-bubble::after, .realtime-voice-status i, .chat-aux .chip-button.is-voice-ready, .retell-memory, .retell-memory-clues, .retell-memory-loading i { animation: none; }
    .imitation-goal-bar i, .shadow-stage, .shadow-target { transition: none; }
    .imitation-metrics strong { animation: none !important; transition: none !important; }
    .rehearsal-lines li, .rehearsal-lines li::after, .rehearsal-line-result, .rehearsal-line-success-mark, .rehearsal-line-say, .rehearsal-line-say::before, .rehearsal-bonus-status, .retell-lines-dialog[open] { animation: none !important; transition: none !important; }
    .record-stop i { animation: none; }
    .express-back-float:hover { transform: translateY(-50%); }
    .express-finish-button:hover:not(:disabled) { transform: none; }
}

@media (forced-colors: active) {
    .express-practice-summary:focus-visible { outline-color: Highlight; }
    .express-practice-summary .express-practice-chevron { background: ButtonText; filter: none; }
    .express-practice-body { border-top-color: CanvasText; }
    .retell-memory {
        border: 2px solid CanvasText;
        background: Canvas;
        box-shadow: none;
    }
    .retell-memory::after { background: Highlight; }
    .retell-memory-mark {
        border: 1px solid Highlight;
        background: Highlight;
        color: HighlightText;
        box-shadow: none;
    }
    .retell-memory-kicker { color: CanvasText; }
    .retell-memory-anchor {
        border: 2px solid Highlight;
        background: Canvas;
        color: CanvasText;
        box-shadow: none;
    }
    .retell-memory-anchor.is-active { background: Highlight; color: HighlightText; }
    .retell-memory-clues,
    .retell-memory-clue-list li,
    .retell-memory-clue-close {
        border: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
        box-shadow: none;
    }
    .retell-memory-clue-word.is-gap { border-bottom-color: Highlight; color: CanvasText; }
    .retell-memory-loading i {
        border: 1px solid CanvasText;
        background: Canvas;
    }
    .retell-memory-retry {
        border: 2px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }
    .retell-lines-dialog { border: 2px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
    .retell-lines-dialog::backdrop { background: Canvas; opacity: .82; }
    .retell-source-lines li { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
    .retell-source-lines li::before { background: Highlight; color: HighlightText; }
    .rehearsal-bonus-status, .rehearsal-bonus-status.is-awarded { border: 1px solid Highlight; background: Canvas; color: CanvasText; }
    .rehearsal-lines li.is-transcript-match {
        border: 2px solid Highlight;
        background: Canvas;
        box-shadow: none;
    }
    .rehearsal-lines li.is-transcript-match::before,
    .rehearsal-line-success-mark {
        background: Highlight;
        color: HighlightText;
    }
    .rehearsal-lines li.is-transcript-match-celebrating::after { display: none; }
    .is-transcript-match .rehearsal-line-result { border-left-color: Highlight; background: Canvas; }
    .rehearsal-line-success, .rehearsal-line-success small { color: CanvasText; }
}

/* ==========================================================================
   Learning Materials · the header dropdown
   ========================================================================== */

.materials-menu { position: relative; }
.materials-button {
    min-height: 41px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .66);
    backdrop-filter: blur(12px);
    font-size: 13px;
    font-weight: 750;
    color: inherit;
    cursor: pointer;
    transition: .25s var(--ease);
}
.materials-button:hover { border-color: var(--green); transform: translateY(-1px); }
.materials-button[aria-expanded="true"] { border-color: var(--green); background: #fff; }
.materials-icon { font-size: 15px; }
.materials-caret { font-size: 9px; color: var(--muted); transition: transform .25s var(--ease); }
.materials-button[aria-expanded="true"] .materials-caret { transform: rotate(180deg); }

.materials-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 9px);
    left: 0;
    width: 302px;
    padding: 7px;
    display: grid;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 22px 46px -18px rgba(23, 49, 40, .34);
    animation: accountIn .18s var(--ease) both;
}
.materials-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 13px;
    transition: background .18s var(--ease);
}
.materials-item:hover, .materials-item:focus-visible { background: rgba(33, 75, 59, .055); }
.materials-item.is-current { background: var(--mint); }
.materials-item-symbol {
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--mint);
    color: var(--green);
    font-size: 16px;
    font-weight: 700;
}
.materials-item.is-current .materials-item-symbol { background: var(--green); color: #fff; }
.materials-item-text { display: grid; gap: 1px; min-width: 0; }
.materials-item-text strong { font-size: 13.5px; }
.materials-item-text small { color: var(--muted); font-size: 11px; line-height: 1.45; }

@media (max-width: 620px) {
    .skill-nav { gap: 4px; }
    .skill-tab { min-height: 35px; padding: 0 10px; }
    .materials-menu,
    .site-header > .account-menu { position: static; }
    .materials-button {
        width: 35px;
        min-height: 35px;
        padding: 0;
        gap: 0;
        justify-content: center;
    }
    .materials-caret { display: none; }
    .materials-panel {
        top: calc(100% + 1px);
        right: 17px;
        left: 17px;
        width: auto;
        max-height: calc(100dvh - 124px);
        overflow-y: auto;
    }
}

/* ==========================================================================
   Accounts · header menu and the sign-in / sign-up pages
   ========================================================================== */

.account-menu { position: relative; }
.account-pill {
    min-height: 41px;
    padding: 0 14px 0 5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .66);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: .25s var(--ease);
}
.account-pill:hover { border-color: var(--green); transform: translateY(-1px); }
.account-avatar {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
}
.account-name { font-size: 13px; font-weight: 750; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 9px);
    right: 0;
    min-width: 208px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 46px -18px rgba(23, 49, 40, .34);
    animation: accountIn .18s var(--ease) both;
}
@keyframes accountIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.account-head { display: grid; gap: 2px; padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.account-head strong { font-size: 13px; }
.account-head small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.account-sync-button {
    width: 100%;
    min-height: 52px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    border: 0;
    border-radius: 11px;
    padding: 7px 10px;
    color: var(--ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.account-sync-button:hover { background: rgba(47, 115, 80, .09); }
.account-sync-button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.account-sync-button:disabled { cursor: wait; opacity: .82; }
.account-sync-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(47, 115, 80, .22);
    border-radius: 10px;
    color: var(--green);
    background: rgba(47, 115, 80, .08);
    font-size: 17px;
    font-weight: 900;
}
.account-sync-copy { min-width: 0; display: grid; gap: 2px; }
.account-sync-copy strong { font-size: 12px; font-weight: 850; }
.account-sync-copy small {
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.3;
    text-overflow: ellipsis;
}
.account-sync-button[data-sync-state="syncing"] .account-sync-icon { animation: accountSyncSpin .82s linear infinite; }
.account-sync-button[data-sync-state="success"] .account-sync-icon,
.account-sync-button[data-sync-state="success"] small { color: var(--green); }
.account-sync-button[data-sync-state="error"] .account-sync-icon,
.account-sync-button[data-sync-state="error"] small { color: #ae4b33; }
@keyframes accountSyncSpin { to { transform: rotate(360deg); } }
.account-signout {
    width: 100%;
    min-height: 38px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #ae4b33;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    padding: 0 12px;
    cursor: pointer;
}
.account-signout:hover { background: rgba(174, 75, 51, .09); }

@media (prefers-reduced-motion: reduce) {
    .account-sync-button[data-sync-state="syncing"] .account-sync-icon { animation: none; }
}

.auth-view {
    max-width: 1080px;
    margin: 40px auto 80px;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(370px, 440px);
    gap: 54px;
    align-items: center;
}
.auth-intro { display: grid; gap: 14px; }
.auth-intro h1 {
    margin: 0;
    font-family: Georgia, "Songti SC", serif;
    font-size: clamp(34px, 4.4vw, 52px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -2px;
}
.auth-intro h1 em { color: var(--green); font-style: italic; }
.auth-intro p { margin: 0; max-width: 460px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.auth-plants { display: flex; gap: 10px; margin-top: 6px; font-size: 22px; }
.auth-plants span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, .66);
    border: 1px solid var(--line);
}
.auth-panel { display: grid; gap: 4px; }
.auth-panel h2 { margin: 6px 0 16px; font-size: 23px; letter-spacing: -.7px; }
.auth-form { display: grid; gap: 15px; }
.auth-form .field input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    color: var(--ink);
    font-size: 14px;
    outline: 0;
    transition: .2s ease;
}
.auth-form .field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(47, 115, 80, .13); }
.auth-form .primary-cta { margin-top: 6px; }

.auth-remember {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    padding: 2px 0;
    cursor: pointer;
}
.auth-remember input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--green); cursor: pointer; }
.auth-remember span { display: grid; gap: 3px; font-size: 13px; font-weight: 700; }
.auth-remember small { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.6; }
.auth-error {
    margin: 4px 0 12px;
    padding: 11px 14px;
    border-left: 3px solid #c8563a;
    border-radius: 0 11px 11px 0;
    background: rgba(200, 86, 58, .09);
    color: #8f3a24;
    font-size: 12px;
    line-height: 1.65;
}
.auth-alt { margin: 16px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.auth-alt a { color: var(--green); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Listen · resume and recently-studied
   ========================================================================== */

.resume-banner {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 18px;
    border: 1px solid var(--skill-soft);
    border-radius: var(--radius-md);
    background: var(--skill-tint);
}
.resume-banner > div { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.resume-banner strong { font-size: 13px; }
.resume-banner small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resume-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #fff;
    color: var(--skill);
    font-size: 15px;
}

.recent-list { display: grid; gap: 18px; }
.recent-group { display: grid; gap: 9px; }
.recent-group > h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; font-weight: 850; letter-spacing: .35px; text-transform: uppercase; }
.recent-group > h3 span { min-width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--skill-tint); color: var(--skill); font-size: 12px; }
.recent-group > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 10px; }
.recent-item {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255, 255, 255, .7);
    text-align: left;
    cursor: pointer;
    transition: .22s var(--ease);
}
.recent-item:hover { border-color: var(--skill); background: var(--skill-tint); transform: translateY(-2px); }
.recent-title { font-size: 13px; font-weight: 750; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recent-status { width: fit-content; padding: 4px 7px; border-radius: 999px; background: var(--skill-tint); color: var(--skill); font-size: 12px; font-weight: 900; letter-spacing: .3px; text-transform: uppercase; }
.recent-status.is-complete { background: #f1f9d8; color: var(--green); }
.recent-meta { color: var(--muted); font-size: 12px; font-weight: 750; }
.recent-bar { display: block; height: 4px; border-radius: 4px; background: rgba(23, 49, 40, .1); overflow: hidden; }
.recent-bar i { display: block; height: 100%; border-radius: 4px; background: var(--skill); }

/* ==========================================================================
   Wide desktops
   The extra width buys layout columns, never longer lines of prose.
   ========================================================================== */

@media (min-width: 1500px) {
    .listen-stage { grid-template-columns: minmax(0, 1.4fr) minmax(380px, .6fr); gap: 26px; }
    .reader-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 26px; }
    .drill-layout { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 26px; }
    .cue-panel { max-height: min(760px, 78vh); }
    .chat-log { max-height: 540px; }
    .module-intro { max-width: 860px; }
    /* Long measures are hard to read however much room there is. */
    .article-body { max-width: 78ch; }
    .editor-area { max-width: 90ch; }
}

@media (max-width: 1040px) {
    .imitation-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .imitation-goal { grid-column: 1 / -1; }
    .shadow-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .imitation-overview { grid-template-columns: 1fr; }
    .imitation-goal { grid-column: auto; }
    .shadow-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .imitation-panel-head { display: grid; }
    .privacy-chip { justify-self: start; white-space: normal; }
    .imitation-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .take-review-actions { width: 100%; }
    .take-review-actions > * { flex: 1 1 150px; justify-content: center; }
    .lesson-complete { grid-template-columns: 1fr; }
    .lesson-complete-bloom { grid-row: auto; }
    .lesson-complete-actions { grid-column: auto; }
}

@media (min-width: 1800px) {
    :root { --shell: 1720px; }
    .scenario-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
    .steal-grid { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
}

@media (max-width: 900px) {
    .auth-view { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 20px; }
    .auth-intro { text-align: center; justify-items: center; }
    .auth-plants { justify-content: center; }
    .account-name { display: none; }
    .account-pill { padding: 0 5px; }
}

@media (max-width: 620px) {
    .account-pill { min-height: 35px; }
    .account-avatar { width: 25px; height: 25px; }
    .account-panel {
        top: calc(100% + 1px);
        right: 17px;
        width: min(232px, calc(100vw - 34px));
        min-width: 0;
        max-height: calc(100dvh - 124px);
        overflow-y: auto;
    }
}

/* ==========================================================================
   Listen · self-hosted player and study tools
   ========================================================================== */

.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 13px; }
.mode-switch input { position: absolute; opacity: 0; pointer-events: none; }
.mode-switch span {
    display: grid;
    gap: 3px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(248, 249, 243, .8);
    cursor: pointer;
    transition: .2s var(--ease);
}
.mode-switch b { font-size: 13px; }
.mode-switch small { color: var(--muted); font-size: 11px; line-height: 1.55; }
.mode-switch input:checked + span { border-color: transparent; background: var(--skill-tint); box-shadow: inset 0 0 0 1px var(--skill); }
.mode-switch input:focus-visible + span { outline: 3px solid var(--skill-soft); outline-offset: 2px; }

.download-status { display: flex; align-items: center; gap: 13px; margin-top: 12px; padding: 12px 15px; border-radius: 14px; background: var(--skill-tint); }
.download-status div { display: grid; gap: 2px; }
.download-status strong { font-size: 12px; }
.download-status small { color: var(--muted); font-size: 11px; }
.download-spinner {
    width: 18px; height: 18px; flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, .7);
    border-top-color: var(--skill);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.player-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #10231b; }
.player-frame.is-audio { aspect-ratio: 16 / 7; }

.audio-stage { position: absolute; inset: 0; display: grid; align-content: center; gap: 20px; padding: 26px 30px; background: linear-gradient(150deg, #17392d, #0e241c); }
.audio-bars { display: flex; align-items: center; justify-content: center; gap: 3px; height: 74px; }
.audio-bars i {
    width: 4px; height: 16%;
    border-radius: 3px;
    background: var(--lime);
    opacity: .45;
}
.player-frame.is-playing .audio-bars i {
    animation: audioPulse 1.1s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.055s);
}
@keyframes audioPulse { 0%, 100% { height: 14%; opacity: .35; } 50% { height: 92%; opacity: 1; } }
.audio-caption { margin: 0; color: #eaf7d6; font-size: 17px; line-height: 1.65; text-align: center; }

.subtitle-mask {
    position: absolute;
    left: 0; right: 0;
    top: 76%; height: 18%;
    background: #000;
    cursor: grab;
    touch-action: none;
    display: grid;
    place-items: center;
}
.subtitle-mask:active { cursor: grabbing; }
.mask-hint { color: rgba(255, 255, 255, .45); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; pointer-events: none; }
.mask-grip { position: absolute; left: 0; right: 0; height: 12px; cursor: ns-resize; }
.mask-grip[data-grip="top"] { top: -6px; }
.mask-grip[data-grip="bottom"] { bottom: -6px; }
.mask-grip::after { content: ""; position: absolute; left: 50%; top: 50%; width: 42px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); transform: translate(-50%, -50%); }

.scrubber { display: grid; gap: 5px; }
.scrubber-track { position: relative; height: 8px; border-radius: 6px; background: rgba(23, 49, 40, .13); cursor: pointer; overflow: hidden; }
.scrubber-played { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px; background: var(--skill); }
.scrubber-ab { position: absolute; top: 0; bottom: 0; background: rgba(255, 148, 102, .55); }
.scrubber-times { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }

.tool-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255, 255, 255, .6); }
.tool-button {
    min-height: 42px; padding: 0 14px;
    display: grid; place-items: center; gap: 1px;
    border: 1px solid var(--line); border-radius: 12px;
    background: rgba(248, 249, 243, .85);
    cursor: pointer; transition: .2s var(--ease);
}
.tool-button b { font-size: 12px; font-weight: 800; }
.tool-button small { font-size: 11px; color: var(--muted); }
.tool-button:hover:not(:disabled) { border-color: var(--skill); background: var(--skill-tint); }
.tool-button:disabled { opacity: .4; cursor: not-allowed; }
.tool-button.is-armed { background: var(--orange); border-color: transparent; color: #fff; }
.tool-button.is-armed small { color: rgba(255,255,255,.85); }
.tool-button.is-active { background: var(--skill); border-color: transparent; color: #fff; }
.tool-button.is-active small { color: rgba(255,255,255,.8); }
.tool-select { display: grid; gap: 2px; }
.tool-select label { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .4px; text-transform: uppercase; }
.tool-select select {
    min-height: 30px; padding: 0 8px;
    border: 1px solid var(--line); border-radius: 9px;
    background: #fff; color: var(--ink); font-size: 11px; font-weight: 700;
    cursor: pointer;
}
.tool-select select:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Full transcript reading copy ---------- */

.reading-transcript-dialog {
    width: min(920px, calc(100vw - 32px));
    max-width: none;
    height: min(820px, calc(100dvh - 38px));
    max-height: calc(100dvh - 38px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--skill) 28%, var(--line));
    border-radius: 25px;
    background: color-mix(in srgb, var(--surface, #fff) 95%, var(--skill-tint));
    color: var(--ink);
    box-shadow: 0 38px 100px -34px rgba(19, 16, 58, .68);
}
.reading-transcript-dialog[open] { animation: retellLinesDialogIn .24s var(--ease) both; }
.reading-transcript-dialog::backdrop {
    background: rgba(13, 12, 35, .66);
    backdrop-filter: blur(6px);
}
.reading-transcript-shell {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}
.reading-transcript-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--line);
}
.reading-transcript-head > div { min-width: 0; display: grid; gap: 5px; }
.reading-transcript-head h2 {
    margin: 0;
    font-family: Georgia, "Songti SC", serif;
    font-size: clamp(24px, 4vw, 31px);
    font-weight: 500;
    letter-spacing: -.7px;
}
.reading-transcript-head p {
    max-width: 690px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
}
.reading-transcript-close {
    width: 39px;
    height: 39px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
    color: var(--ink);
    cursor: pointer;
}
.reading-transcript-close:hover { border-color: var(--skill); color: var(--skill); }
.reading-transcript-close:focus-visible,
.reading-transcript-editor:focus-visible { outline: 3px solid var(--skill-soft); outline-offset: 2px; }
.reading-transcript-body {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}
.reading-transcript-loading,
.reading-transcript-error {
    grid-row: 1;
    margin: 17px 24px 0;
    padding: 15px 17px;
    border: 1px solid color-mix(in srgb, var(--skill) 18%, var(--line));
    border-radius: 15px;
    background: color-mix(in srgb, var(--skill-tint) 54%, var(--surface, #fff));
}
.reading-transcript-loading {
    display: flex;
    align-items: center;
    gap: 12px;
}
.reading-transcript-loading[hidden],
.reading-transcript-error[hidden],
.reading-transcript-editor-wrap[hidden] { display: none; }
.reading-transcript-loading .download-spinner { flex: 0 0 auto; }
.reading-transcript-loading > div { min-width: 0; display: grid; gap: 3px; }
.reading-transcript-loading strong,
.reading-transcript-error strong { font-size: 13px; }
.reading-transcript-loading small,
.reading-transcript-error p { color: var(--muted); font-size: 11px; line-height: 1.55; }
.reading-transcript-error {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 14px;
    border-color: rgba(200, 86, 58, .28);
    background: rgba(200, 86, 58, .08);
}
.reading-transcript-error strong,
.reading-transcript-error p { grid-column: 1; margin: 0; }
.reading-transcript-error .chip-button { grid-column: 2; grid-row: 1 / span 2; }
.reading-transcript-editor-wrap {
    grid-row: 2;
    min-height: 0;
    margin: 17px 24px 0;
    display: grid;
}
.reading-transcript-editor {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: clamp(18px, 3vw, 28px);
    resize: none;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid color-mix(in srgb, var(--skill) 18%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
    color: var(--ink);
    font: 500 16px/1.9 Georgia, "Songti SC", serif;
    letter-spacing: .006em;
    white-space: pre-wrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.reading-transcript-editor:focus {
    border-color: color-mix(in srgb, var(--skill) 56%, var(--line));
    box-shadow: 0 0 0 3px var(--skill-soft), inset 0 1px 0 rgba(255, 255, 255, .32);
}
.reading-transcript-foot {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 24px 17px;
}
.reading-transcript-save-status { color: var(--muted); font-size: 11px; line-height: 1.5; }
.reading-transcript-save-status[data-state="saved"] { color: var(--green); }
.reading-transcript-save-status[data-state="saving"]::before {
    content: "";
    width: 7px;
    height: 7px;
    display: inline-block;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--skill);
    animation: readingTranscriptSaving .8s ease-in-out infinite alternate;
}
.reading-transcript-save-status[data-state="pending"] { color: color-mix(in srgb, var(--skill) 70%, var(--ink)); }
.reading-transcript-save-status[data-state="error"] { color: #b6472c; }
.reading-transcript-foot .skill-cta { flex: 0 0 auto; min-height: 43px; }
@keyframes readingTranscriptSaving { to { opacity: .3; transform: scale(.68); } }

.cue-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cue-tools-hint { color: var(--muted); font-size: 11px; }
.cue-text .mark { cursor: help; }

.selection-pop {
    position: fixed;
    z-index: 45;
    display: grid;
    gap: 7px;
    padding: 11px 13px;
    border-radius: 14px;
    background: var(--ink);
    color: #fff;
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .55);
    animation: accountIn .14s var(--ease) both;
}
.selection-pop strong { font-size: 12px; font-weight: 700; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selection-actions { display: flex; gap: 6px; }
.selection-actions button {
    min-height: 30px; padding: 0 11px;
    border: 0; border-radius: 9px;
    background: rgba(255, 255, 255, .14);
    color: #fff; font-size: 11px; font-weight: 750;
    cursor: pointer; transition: .18s ease;
}
.selection-actions button:hover { background: var(--lime); color: var(--ink); }
.selection-actions .is-play { background: rgba(199, 244, 93, .22); }

@media (max-width: 620px) {
    .mode-switch { grid-template-columns: 1fr; }
    .upload-grid, .upload-title-row { grid-template-columns: 1fr; }
    .upload-status-copy { display: grid; }
    .upload-status small { text-align: left; }
    .tool-row { gap: 6px; padding: 9px; }
    .tool-select select { min-height: 34px; }
    .reading-transcript-dialog {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
    }
    .reading-transcript-head {
        padding: max(17px, env(safe-area-inset-top))
            max(16px, env(safe-area-inset-right)) 14px
            max(16px, env(safe-area-inset-left));
    }
    .reading-transcript-head p { font-size: 11px; }
    .reading-transcript-loading,
    .reading-transcript-error,
    .reading-transcript-editor-wrap {
        margin-right: max(14px, env(safe-area-inset-right));
        margin-left: max(14px, env(safe-area-inset-left));
    }
    .reading-transcript-error { grid-template-columns: 1fr; }
    .reading-transcript-error .chip-button { grid-column: 1; grid-row: auto; justify-self: start; }
    .reading-transcript-editor { padding: 17px; font-size: 16px; line-height: 1.82; }
    .reading-transcript-foot {
        padding: 11px max(14px, env(safe-area-inset-right))
            max(13px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    }
}

.cue-tools { flex-wrap: wrap; }
.repair-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.repair-status .download-spinner { width: 12px; height: 12px; border-width: 2px; }

/* ---------- Study timer ---------- */

.timer-pill { gap: 6px; cursor: pointer; transition: .2s ease; }
.timer-pill strong { font-variant-numeric: tabular-nums; font-size: 13px; }
.timer-pill small { color: var(--muted); font-size: 11px; font-weight: 800; }
.timer-icon { font-size: 12px; }
.timer-pill:hover { border-color: var(--green); }
.timer-pill.is-paused { background: rgba(255, 244, 229, .9); border-color: rgba(232, 159, 49, .5); }
.timer-pill.is-paused .timer-icon { opacity: .5; }
.timer-pill.is-paused small { color: #b0762a; }

/* ---------- Subtitle overlay ---------- */

.player-subtitle {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 5%;
    margin: 0;
    padding: 9px 15px;
    border-radius: 11px;
    background: rgba(8, 18, 14, .74);
    color: #f2fbe6;
    font-size: clamp(14px, 1.5vw, 19px);
    line-height: 1.5;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    pointer-events: none;
}

/* ---------- Collapsible transcript ---------- */

.cue-meta-right { display: flex; align-items: center; gap: 9px; }
.cue-collapse {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: .2s ease;
}
.cue-collapse:hover { border-color: var(--skill); color: var(--skill); background: var(--skill-tint); }
.cue-panel.is-collapsed { max-height: none; }
.cue-panel.is-collapsed .cue-list,
.cue-panel.is-collapsed .cue-tools { display: none; }

/* Remove-from-list control on an unfinished video.
   Always visible, not hover-revealed: hover does not exist on a touch screen,
   so a hidden control is simply unreachable there. */
.recent-item-wrap { position: relative; }
.recent-item-wrap .recent-item { width: 100%; padding-right: 50px; }
.recent-remove {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
    color: var(--muted);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: .18s ease;
}
.recent-remove:hover,
.recent-remove:focus-visible {
    border-color: rgba(200, 86, 58, .45);
    background: rgba(200, 86, 58, .12);
    color: #b6472c;
    transform: scale(1.06);
}
.recent-remove:focus-visible { outline: 3px solid rgba(200, 86, 58, .3); outline-offset: 2px; }

/* ---------- Desktop sticky header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 35;
    background: rgba(247, 246, 238, .88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck {
    border-bottom-color: var(--line);
    box-shadow: 0 10px 26px -20px rgba(23, 49, 40, .5);
}
@media (max-width: 760px) {
    /* Scroll away on phones while keeping menus anchored to the header. */
    .site-header { position: relative; top: auto; }
}
.timer-pill.is-paused { animation: none; }

/* ==========================================================================
   SweetAlert2, themed to the garden palette
   Vendored under assets/vendor because the CSP is default-src 'self'.
   Its stock look is a generic blue-and-grey that reads as a different product.
   ========================================================================== */

.swal2-container { backdrop-filter: blur(3px); }
.swal2-popup.lb-swal {
    width: min(460px, 92vw);
    padding: 30px 30px 24px;
    border-radius: var(--radius-lg);
    background: var(--cream);
    font-family: inherit;
    box-shadow: 0 30px 80px -28px rgba(21, 40, 32, .55);
}
.lb-swal .swal2-title {
    padding: 0;
    color: var(--ink);
    font-family: Georgia, "Songti SC", serif;
    font-size: 23px;
    font-weight: 500;
    letter-spacing: -.7px;
    line-height: 1.25;
}
.lb-swal .swal2-html-container {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}
.lb-swal .swal2-actions { margin-top: 24px; gap: 10px; }

.lb-swal-confirm,
.lb-swal-cancel {
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: .22s var(--ease);
}
.lb-swal-confirm { color: #fff; background: var(--green); box-shadow: 0 12px 24px -14px var(--green); }
.lb-swal-confirm:hover { background: var(--green-deep); transform: translateY(-1px); }
.lb-swal-confirm.is-danger { background: #b6472c; box-shadow: 0 12px 24px -14px #b6472c; }
.lb-swal-confirm.is-danger:hover { background: #9c3b23; }
.lb-swal-cancel { color: var(--muted); background: transparent; border-color: var(--line); }
.lb-swal-cancel:hover { border-color: var(--ink); color: var(--ink); }

.lb-swal .swal2-input.lb-swal-input,
.lb-swal .swal2-input,
.lb-swal .swal2-textarea.lb-swal-input,
.lb-swal .swal2-textarea {
    height: 48px;
    margin: 18px 0 0;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    box-shadow: none;
}
.lb-swal .swal2-textarea.lb-swal-input,
.lb-swal .swal2-textarea {
    min-height: 132px;
    padding: 13px 15px;
    resize: vertical;
    line-height: 1.55;
}
.lb-swal .swal2-input:focus,
.lb-swal .swal2-textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(47, 115, 80, .14); }
.lb-swal .swal2-validation-message {
    margin: 12px 0 0;
    border-radius: 10px;
    background: rgba(200, 86, 58, .1);
    color: #8f3a24;
    font-size: 12px;
}
.lb-swal .swal2-icon { margin: 4px auto 18px; transform: scale(.82); }
.lb-swal .swal2-icon.swal2-warning { border-color: var(--orange); color: var(--orange); }
.lb-swal .swal2-icon.swal2-question { border-color: var(--green); color: var(--green); }

/* ==========================================================================
   IMITATE · bridge from input practice to spoken output
   Kept self-contained so the prompt can move without changing lesson actions.
   ========================================================================== */

.express-followup {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 17px 18px;
    border: 1px solid rgba(111, 95, 208, .2);
    border-radius: var(--radius-lg);
    background: linear-gradient(120deg, rgba(111, 95, 208, .09), rgba(255, 255, 255, .82));
    box-shadow: 0 16px 34px -28px rgba(49, 34, 118, .65);
}
.express-followup[hidden],
.express-nudge[hidden] { display: none; }
.express-followup-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(111, 95, 208, .12);
    color: var(--skill);
    font-size: 21px;
}
.express-followup h2,
.express-nudge h2 {
    margin: 3px 0 4px;
    font-family: Georgia, serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -.45px;
}
.express-followup p,
.express-nudge p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
}
.express-followup .skill-cta { white-space: nowrap; }

.express-nudge {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid rgba(159, 199, 69, .5);
    border-radius: var(--radius-lg);
    background: linear-gradient(120deg, rgba(199, 244, 93, .2), rgba(255, 255, 255, .86));
}
.express-nudge-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}
.express-nudge .express-action {
    flex: 0 0 auto;
    min-height: 42px;
    border-color: transparent;
    background: var(--green);
    color: #fff;
    box-shadow: 0 12px 23px -17px var(--green);
}
.express-nudge .express-action:hover {
    border-color: transparent;
    background: var(--green-deep);
    color: #fff;
    transform: translateY(-1px);
}
.lesson-complete-actions .express-action {
    border-color: transparent;
    background: var(--green);
    color: #fff;
}
.lesson-complete-actions .express-action:hover {
    border-color: transparent;
    background: var(--green-deep);
    color: #fff;
}
.express-action:disabled { opacity: .55; cursor: wait; transform: none; }

@media (max-width: 680px) {
    .express-followup { grid-template-columns: auto minmax(0, 1fr); }
    .express-followup .skill-cta { grid-column: 1 / -1; width: 100%; }
    .express-nudge { display: grid; gap: 14px; }
    .express-nudge-actions { justify-content: flex-start; }
    .express-nudge .express-action { justify-self: start; }
}

/* ==========================================================================
   IMITATE · blind scaffolds, truthful rewards, and the Express handoff
   ========================================================================== */

@property --voice-energy-orbit {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.voice-energy {
    position: relative;
    display: grid;
    gap: 11px;
    padding: 16px 17px;
    overflow: hidden;
    border: 1px solid rgba(111, 95, 208, .24);
    border-radius: 16px;
    background: linear-gradient(135deg, #192f28, #294b40 64%, #3a6554);
    color: #fff;
    box-shadow: 0 18px 32px -27px rgba(19, 47, 37, .85);
}
.voice-energy > * { position: relative; z-index: 1; }
.voice-energy::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 2px;
    padding: 1px;
    border-radius: 14px;
    pointer-events: none;
    opacity: 0;
    background: conic-gradient(from var(--voice-energy-orbit),
        transparent 0 60%,
        rgba(199, 244, 93, .18) 67%,
        #c7f45d 74%,
        rgba(255, 255, 255, .98) 80%,
        rgba(157, 141, 241, .92) 88%,
        transparent 96%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.voice-energy::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -58px;
    top: -85px;
    border-radius: 50%;
    background: rgba(199, 244, 93, .11);
    pointer-events: none;
}
.voice-energy-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 13px; }
.voice-energy-head > div { display: grid; gap: 3px; }
.voice-energy .section-kicker { color: rgba(231, 249, 213, .72); }
.voice-energy-head strong { font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.voice-energy-badge { padding: 6px 9px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #eaf7d6; font-size: 11px; font-weight: 800; white-space: nowrap; }
.voice-energy-track { position: relative; height: 13px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .18); }
.voice-energy-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8acb56, var(--lime), #fff2a7); box-shadow: 0 0 18px rgba(199, 244, 93, .58); transition: width .85s cubic-bezier(.2, .82, .2, 1); }
.voice-energy-track > span { position: absolute; top: 50%; right: 7px; color: rgba(255, 255, 255, .66); font-size: 9px; transform: translateY(-50%); }
.voice-energy-rules { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.voice-energy-rules span { padding: 9px 10px; border-radius: 11px; background: rgba(255, 255, 255, .075); color: rgba(242, 250, 240, .78); font-size: 10.5px; line-height: 1.5; }
.voice-energy-rules b { display: block; margin-bottom: 2px; color: var(--lime); font-size: 12px; }
.voice-energy > small { color: rgba(235, 246, 231, .58); font-size: 10px; line-height: 1.45; }
.voice-energy.is-charged { animation: voiceEnergyGlow 2.35s var(--ease) both; }
.voice-energy.is-charged::before { animation: voiceEnergyFrameOrbit 2.75s .08s linear both; }
.voice-energy.is-charged .voice-energy-track > span { animation: voiceEnergySpark 1.6s .34s ease both; }
.voice-energy.is-complete-charge { border-color: rgba(199, 244, 93, .74); }
@keyframes voiceEnergyGlow {
    0%, 100% { transform: none; box-shadow: 0 18px 32px -27px rgba(19, 47, 37, .85); }
    26% { transform: translateY(-2px) scale(1.006); box-shadow: 0 17px 37px -20px rgba(199, 244, 93, .72); }
    62% { transform: translateY(-1px); box-shadow: 0 18px 35px -22px rgba(199, 244, 93, .54); }
}
@keyframes voiceEnergySpark {
    0%, 100% { color: rgba(255, 255, 255, .66); transform: translateY(-50%); }
    38% { color: #fff; transform: translateY(-50%) scale(1.8) rotate(24deg); }
    68% { transform: translateY(-50%) scale(.92) rotate(-5deg); }
}
@keyframes voiceEnergyFrameOrbit {
    0% { --voice-energy-orbit: 0deg; opacity: 0; }
    10% { opacity: .95; }
    82% { opacity: .95; }
    100% { --voice-energy-orbit: 720deg; opacity: 0; }
}

.annotation-actions .shadow-next-button {
    position: relative;
    min-width: 138px;
    margin-left: auto;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(120deg, var(--skill), #836ee1 52%, #6f5fd0);
    background-size: 180% 100%;
    animation: nextLineReady 3s ease-in-out infinite;
}
.annotation-actions .shadow-next-button::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 -52%;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
    transform: skewX(-18deg);
    animation: nextLineSheen 2.8s ease-in-out infinite;
}
.annotation-actions .shadow-next-button::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    right: -16px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, .32), rgba(199, 244, 93, .13) 46%, transparent 72%);
    transform: translateY(-50%) scale(.72);
    animation: nextLineBubble 2.4s ease-in-out infinite;
}
.annotation-actions .shadow-next-button i { animation: nextLineArrow 1.75s ease-in-out infinite; }
.annotation-actions .shadow-next-button:hover:not(:disabled) { animation: nextLineHoverJelly .68s cubic-bezier(.18, .88, .32, 1.24) both; }
.annotation-actions .shadow-next-button:hover:not(:disabled) i { animation: nextLineArrowHover .68s var(--ease) both; }
.annotation-actions .shadow-next-button:active:not(:disabled),
.annotation-actions .shadow-next-button.is-learning-pressing:not(:disabled) {
    animation: nextLinePressJelly .72s cubic-bezier(.18, .89, .3, 1.24) both;
}
.annotation-actions .shadow-next-button:disabled { animation: none; }
.annotation-actions .shadow-next-button:disabled::before,
.annotation-actions .shadow-next-button:disabled::after { animation: none; display: none; }
.annotation-actions .shadow-next-button:disabled i { animation: none; }
@keyframes nextLineReady {
    0%, 100% { background-position: 0 50%; box-shadow: 0 8px 22px -16px rgba(111, 95, 208, .48); }
    50% { background-position: 100% 50%; box-shadow: 0 15px 31px -10px rgba(111, 95, 208, .62); }
}
@keyframes nextLineSheen { 0%, 52% { left: -52%; } 78%, 100% { left: 118%; } }
@keyframes nextLineBubble {
    0%, 100% { opacity: .45; transform: translateY(-50%) scale(.72); }
    50% { opacity: .9; transform: translate(-8px, -50%) scale(1.08); }
}
@keyframes nextLineArrow {
    0%, 100% { transform: translateX(0) scale(1); }
    46% { transform: translateX(4px) scale(1.08, .94); }
    68% { transform: translateX(1px) scale(.96, 1.04); }
}
@keyframes nextLineArrowHover {
    0% { transform: translateX(0) scale(1); }
    52% { transform: translateX(7px) scale(1.14, .88); }
    76% { transform: translateX(2px) scale(.94, 1.06); }
    100% { transform: translateX(4px) scale(1); }
}
@keyframes nextLineHoverJelly {
    0% { transform: none; }
    38% { transform: translateY(-2px) scale(1.035, .975); }
    64% { transform: translateY(-1px) scale(.985, 1.025); }
    82% { transform: translateY(-2px) scale(1.01, .995); }
    100% { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(111, 95, 208, .66); }
}
@keyframes nextLinePressJelly {
    0% { transform: none; }
    22% { transform: translateY(2px) scale(1.055, .86); }
    44% { transform: translateY(-2px) scale(.94, 1.12); }
    64% { transform: scale(1.035, .975); }
    82% { transform: scale(.985, 1.02); }
    100% { transform: none; }
}

.listen-stage > .express-checkpoint:not([hidden]) {
    grid-column: 1 / -1;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 20px 21px;
    border-color: rgba(47, 115, 80, .34);
    border-left: 4px solid var(--green);
    background: linear-gradient(125deg, rgba(199, 244, 93, .14), rgba(255, 255, 255, .96) 58%, rgba(216, 210, 251, .28));
    box-shadow: 0 22px 44px -34px rgba(23, 49, 40, .72);
}
.listen-stage > .express-checkpoint[hidden] { display: none; }
.listen-stage > .express-checkpoint .chip-button { min-height: 44px; }
.express-nudge-copy { display: grid; gap: 3px; }
.express-nudge-copy .section-kicker b { color: var(--skill); }
.express-gate-track { display: block; width: min(360px, 100%); height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: rgba(111, 95, 208, .12); }
.express-gate-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--skill), var(--lime)); transition: width .7s var(--ease); }
.express-nudge .express-continue { border-style: dashed; background: rgba(255, 255, 255, .64); }
.express-nudge.is-celebrating { animation: expressArrival .75s var(--ease) both; }
.express-nudge.is-required { border-color: rgba(255, 148, 102, .7); border-left-color: var(--orange); background: linear-gradient(125deg, rgba(255, 148, 102, .16), #fff 58%, rgba(199, 244, 93, .2)); box-shadow: 0 22px 44px -27px rgba(168, 75, 38, .62); }
.express-nudge:focus-visible { outline: 4px solid rgba(111, 95, 208, .2); outline-offset: 4px; }
@keyframes expressArrival { 0% { opacity: 0; transform: translateY(-13px) scale(.985); } 65% { transform: translateY(2px) scale(1.005); } 100% { opacity: 1; transform: none; } }

@media (max-width: 760px) {
    .voice-energy-rules { grid-template-columns: 1fr; }
    .voice-energy-head { align-items: flex-start; flex-direction: column; }
    .listen-stage > .express-checkpoint:not([hidden]) { grid-template-columns: 1fr; }
    .express-nudge-actions { justify-content: flex-start; }
}

@media (max-width: 520px) {
    .annotation-actions .shadow-next-button { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .voice-energy,
    .voice-energy::before,
    .voice-energy-track i,
    .voice-energy-track > span,
    .annotation-actions .shadow-next-button,
    .annotation-actions .shadow-next-button::before,
    .annotation-actions .shadow-next-button::after,
    .annotation-actions .shadow-next-button i,
    .express-nudge,
    .express-gate-track i,
    .reading-transcript-dialog[open],
    .reading-transcript-save-status::before { animation: none !important; transition: none !important; }
}

@media (forced-colors: active) {
    .voice-energy::before,
    .annotation-actions .shadow-next-button::before,
    .annotation-actions .shadow-next-button::after { display: none; }
    .reading-transcript-dialog,
    .reading-transcript-editor,
    .reading-transcript-loading,
    .reading-transcript-error,
    .reading-transcript-close {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
        box-shadow: none;
    }
    .reading-transcript-dialog::backdrop { background: Canvas; opacity: .82; }
}