/* =========================================================================
 * Junior Sadhaks Storytime Theater (v1.3.2)  (assets/css/kids-theater.css; with kids.css)
 * The library, the 16:9 player (film, host, choice, workshop, end), badges, the theater's motion classes (kth-*:
 * transform / opacity only, all still under reduced motion) and the printable certificate.
 * v1.3.8: the proscenium (velvet curtains #78122B / #3A0815, a carved gold arch, brass footlights with warm glows), the
 * starry backdrop, the caption pill (#FCFBF7 on rgba(22,19,31,.9) glass, words lit as they come), the layered hosts'
 * idle life (khost-*), the Satya / Dharma / Shanti cards and the host-led workshop.
 * v1.5.0: the 3D diorama canvas (.kth-gl) over the 2D stage, the dock under the stage (subtitles, story buttons, Replay,
 * discovery buttons), the host as a layer over either stage, the relic cards, and the breakpoints described below.
 * v1.5.0: no subtitles or narration controls: the dock is the reading card (.kth-dock / .kth-read*: one paragraph at a
 * time, the crossroads' choice buttons, Back and a pulsing Continue), the host stands to one side of the stage, the
 * playback bar is gone (Back, progress and Continue live in the card). Under 768 px: stage 55dvh, card 35dvh; from
 * 1100 px: the card beside the stage. Nothing in the card ever overlaps the stage.
 * v1.6.0: hosts and intros removed. The host layer (.kth-host*), the hosts' idle life (khost-*), the workshop's host
 * badge (.kth-work__host / __lead) and the cards' "With <host>" line (.kth-card__host) are gone; the story buttons'
 * row is .kth-actions (was .kth-host__actions). The stage guides the workshop.
 * ========================================================================= */

/* ---------------------------------------------------------------- hero & library */
.kth-hero { position: relative; isolation: isolate; min-height: clamp(460px, 64vh, 760px); display: flex; align-items: flex-end; color: #FFFFFF; overflow: hidden; }
.kth-hero__art { position: absolute; inset: 0; z-index: -2; }
.kth-hero__art .kart { width: 100%; height: 100%; }
.kth-hero__inner { padding-block: clamp(110px, 14vh, 160px) clamp(32px, 5vw, 56px); }
.kth-hero .kids-eyebrow, .kth-hero .kids-eyebrow span { color: #FCD98A; }

.kth-lib { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 2.4vw, 28px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); counter-reset: none; }
.kth-card { display: flex; flex-direction: column; border-radius: var(--k-radius); overflow: hidden; background: var(--k-surface); border: 1px solid var(--k-line); box-shadow: var(--k-shadow); scroll-margin-top: 96px; }
.kth-card__play { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #1C1A47; cursor: pointer; overflow: hidden; }
.kth-card__thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(.2, .7, .2, 1); }
.kth-card__num { position: absolute; left: 14px; top: 12px; min-width: 40px; height: 40px; padding: 0 10px; display: grid; place-items: center; border-radius: 999px; background: rgba(13, 11, 9, 0.62); color: #FCD98A; font: 700 1.05rem var(--k-sans); }
.kth-card__go { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #F2B54C, #D9930F); color: #2B1A14; font-size: 1.6rem; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6), 0 0 0 6px rgba(255, 243, 196, 0.35); transition: transform 300ms ease; }
.kth-card__done { position: absolute; right: 12px; top: 12px; padding: 6px 12px; border-radius: 999px; background: #FFF3C4; color: #8A4B0B; font: 700 .85rem var(--k-sans); }
.kth-card__play:focus-visible { outline: 4px solid #F2B54C; outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) { .kth-card__play:hover .kth-card__thumb { transform: scale(1.04); } .kth-card__play:hover .kth-card__go { transform: scale(1.08); } }
.kth-card__body { display: grid; gap: 6px; padding: 18px 20px 22px; }
.kth-card__value { margin: 0; font: 700 .8rem var(--k-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--k-gold-ink); }
.kth-card__title { margin: 0; font-family: var(--k-serif); font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); line-height: 1.15; }
.kth-card__syn { margin: 0; color: var(--k-muted); line-height: 1.55; font-size: .97rem; }
.kth-card__ref { margin: 4px 0 0; font-size: .82rem; color: var(--k-muted); line-height: 1.45; }
.kth-card__ref span { font-weight: 700; color: var(--k-ink); }

/* ---------------------------------------------------------------- the workshop intro (#workshop) */
.kth-workshop { scroll-margin-top: 96px; }
.kth-mudras { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2vw, 24px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.kth-mudra-card { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: var(--k-radius); background: var(--k-surface); border: 1px solid var(--k-line); box-shadow: var(--k-shadow); }
.kth-mudra-card__art { width: min(100%, 180px); aspect-ratio: 440 / 480; justify-self: center; padding: 10px; border-radius: 22px; background: radial-gradient(circle at 50% 40%, #FFF8EA, #F1DFC0); }
.kth-mudra-card__art .kth-mudra { width: 100%; height: 100%; display: block; }
.kth-mudra-card__name { margin: 6px 0 0; font-family: var(--k-serif); font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); line-height: 1.2; }
.kth-mudra-card__sub { margin: 0; font-size: .9rem; font-style: italic; color: var(--k-muted); }
.kth-mudra-card__how { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--k-muted); }

/* ---------------------------------------------------------------- badges */
.kth-badge-grid { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.kth-badge { display: grid; justify-items: center; gap: 4px; padding: 18px 10px; border-radius: 22px; border: 1.5px dashed var(--k-line); background: var(--k-surface); text-align: center; opacity: .55; filter: grayscale(.9); transition: opacity .4s, filter .4s, transform .4s; }
.kth-badge.is-on { opacity: 1; filter: none; border-style: solid; border-color: #F2B54C; box-shadow: 0 0 0 4px rgba(242, 181, 76, .18), var(--k-shadow); }
.kth-badge__icon { font-size: 2.2rem; line-height: 1; }
.kth-badge__name { font: 700 1rem var(--k-sans); }
.kth-badge__sub { font-size: .8rem; color: var(--k-muted); }
.kth-cert__row { display: flex; flex-wrap: wrap; gap: 12px; }
.kth-about p { max-width: 70ch; line-height: 1.65; }

/* ---------------------------------------------------------------- the player
 * v1.5.0 layout: [bar] [stage: proscenium + screen] [reading card], or from 1100 px [bar] / [stage | reading card].
 * The words live in the card, never over the screen, so they can't cover a relic or a prop.
 *   < 768 px:  full screen, one column, the stage = the top 55dvh (55vh fallback), the reading card the lower 35dvh
 *              (it scrolls inside itself), the bar in the remaining 10dvh; 16 px padding, 48 px buttons.
 *   768–1099:  a proscenium with padded side curtains, the card under the stage (at most 44vh).
 *   ≥ 1100:    the card beside the stage (340–460 px), full height; the screen (canvas) capped at 1400 px wide.
 */
.kth-player { border: 0; padding: 0; margin: auto; width: min(2800px, 96vw); max-width: none; height: min(980px, 96vh); max-height: none; border-radius: 32px; background: transparent; color: var(--k-ink); overflow: visible; }
@media (min-width: 2200px) and (min-height: 1400px) { .kth-player { height: min(1760px, 92vh); } }
.kth-player::backdrop { background: rgba(8, 6, 14, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kth-player__frame { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); background: #0B0910; color: #FFF7EE; border-radius: inherit; overflow: hidden; border: 1px solid rgba(242, 181, 76, .35); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .8); font-family: var(--k-sans); }
.kth-player__frame:fullscreen { border-radius: 0; border: 0; }
.kth-player__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 14px 10px 22px; background: linear-gradient(90deg, #78122B, #4C0519); border-bottom: 2px solid #D97706; }
.kth-player .kth-player__title { margin: 0 !important; font-family: var(--k-serif); font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem) !important; color: #FEF3C7 !important; flex: 1 1 12rem; min-width: 0; }
.kth-player__tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kth-player .kbtn--tool { color: #FFF7EE; border-color: rgba(253, 230, 138, .45); background: rgba(255, 255, 255, .06); }
/* the player is always a dark theater, in the light theme too */
.kth-player .kbtn--round:not(.kbtn--gold), .kth-player .kbtn--close { color: #FFF7EE; background: rgba(255, 255, 255, .08); border-color: rgba(252, 217, 138, .35); }
.kth-player .kbtn--tool[aria-pressed="true"] { color: #2A120A; background: linear-gradient(135deg, #FFE7A3, #F2B54C); border-color: transparent; }
.kth-player .kbtn--tool[aria-pressed="false"] { opacity: .8; }
/* kids.css floats the storybook's close button below 900 px; in the theater's bar it stays in the row */
.kth-player .kbtn--close { position: static; }
.kth-vol { display: inline-flex; align-items: center; min-height: 56px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(253, 230, 138, .35); background: rgba(255, 255, 255, .05); }
.kth-vol input { width: clamp(84px, 9vw, 150px); min-height: 44px; accent-color: #F2B54C; cursor: pointer; background: transparent; }
.kth-vol input:disabled { opacity: .45; cursor: not-allowed; }
.kth-vol input:focus-visible { outline: 3px solid #FCD34D; outline-offset: 2px; border-radius: 6px; }

/* the stage: a theater proscenium around the screen (16:9 from 768 px) */
.kth-stage { min-height: 0; display: grid; place-items: center; padding: clamp(4px, 1vw, 14px); container-type: size;
  background: radial-gradient(1200px 500px at 50% 112%, rgba(255, 170, 80, .16), transparent 70%), radial-gradient(900px 500px at 50% -10%, rgba(120, 18, 43, .35), transparent 70%), #0B0910; }
.kth-proscenium { position: relative; width: min(100%, calc((96vh - 380px) * 1.66)); max-width: 1560px; padding: clamp(14px, 4.2%, 70px) clamp(16px, 5.4%, 92px) clamp(16px, 3.4%, 56px); isolation: isolate; }
/* the proscenium is about 1.73 times as wide as it is tall: it fills the stage's height or width, whichever runs out first;
   1560 px keeps the screen (and the WebGL canvas) at most 1400 px wide */
@supports (width: 1cqh) { .kth-proscenium { width: min(100cqw, 100cqh * 1.7, 1560px); } }
.kth-screen { position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0B1030; box-shadow: 0 0 0 2px rgba(110, 71, 16, .9), 0 0 0 5px rgba(232, 184, 74, .55), 0 30px 80px -24px rgba(0, 0, 0, .9); container-type: inline-size; }
.kth-sky { position: absolute; inset: 0; background:
    radial-gradient(1.4px 1.4px at 12% 18%, #FFF6DA 60%, transparent 62%), radial-gradient(1.8px 1.8px at 28% 42%, #FFF6DA 60%, transparent 62%), radial-gradient(1.2px 1.2px at 46% 12%, #FFF6DA 60%, transparent 62%),
    radial-gradient(2px 2px at 64% 30%, #FFE7A3 60%, transparent 62%), radial-gradient(1.3px 1.3px at 78% 16%, #FFF6DA 60%, transparent 62%), radial-gradient(1.6px 1.6px at 88% 48%, #FFF6DA 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 36% 70%, #FFF6DA 60%, transparent 62%), radial-gradient(1.5px 1.5px at 58% 62%, #FFF6DA 60%, transparent 62%), radial-gradient(1.2px 1.2px at 8% 64%, #FFF6DA 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 94% 76%, #FFF6DA 60%, transparent 62%), radial-gradient(1.1px 1.1px at 22% 88%, #FFF6DA 60%, transparent 62%), radial-gradient(1.3px 1.3px at 70% 86%, #FFF6DA 60%, transparent 62%),
    radial-gradient(60% 50% at 70% 30%, rgba(123, 94, 167, .35), transparent 70%), radial-gradient(50% 45% at 25% 70%, rgba(46, 140, 140, .18), transparent 70%),
    linear-gradient(180deg, #070A22 0%, #141842 55%, #2B1F4A 100%); }
.kth-film, .kth-video { position: absolute; inset: 0; z-index: 1; }
.kth-video { width: 100%; height: 100%; background: #000; object-fit: contain; }
.kth-shot { position: absolute; inset: 0; will-change: transform, opacity; backface-visibility: hidden; }
.kth-shot .kart { width: 100%; height: 100%; display: block; }
/* the 3D diorama: fades in over the 2D stage after its first frame; vertical swipes stay with the page (touch-action) */
.kth-gl { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s ease; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
.kth-gl[hidden] { display: none; }
.kth-screen[data-stage="3d"] .kth-gl { opacity: 1; }
.kth-screen[data-stage="3d"] .kth-film { visibility: hidden; }
/* the 2D stage's awakening: soft beams of golden light */
.kth-shafts { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 2.4s ease; mix-blend-mode: screen;
  background: linear-gradient(104deg, transparent 18%, rgba(255, 214, 140, .26) 23%, transparent 29%), linear-gradient(97deg, transparent 37%, rgba(255, 214, 140, .2) 43%, transparent 50%), linear-gradient(110deg, transparent 56%, rgba(255, 214, 140, .18) 61%, transparent 67%),
    radial-gradient(60% 50% at 40% 0, rgba(255, 220, 150, .3), transparent 70%); }
.kth-screen[data-stage="2d"][data-phase="awakening"] .kth-shafts { opacity: 1; }
.kth-footglow { position: absolute; inset: auto 0 0; height: 34%; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(22% 70% at 14% 108%, rgba(255, 196, 120, .30), transparent 70%), radial-gradient(22% 70% at 38% 108%, rgba(255, 196, 120, .26), transparent 70%),
    radial-gradient(22% 70% at 62% 108%, rgba(255, 196, 120, .26), transparent 70%), radial-gradient(22% 70% at 86% 108%, rgba(255, 196, 120, .30), transparent 70%); }
.kth-screen[data-stage="3d"] .kth-footglow { opacity: .45; }
.kth-voice { display: none; }

/* velvet curtains, the valance, the carved gold arch and the brass footlights */
.kth-curtain { position: absolute; top: 2%; bottom: 3%; width: calc(5.4% + 3.2%); z-index: 2; pointer-events: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
  background: linear-gradient(180deg, rgba(58, 8, 21, .55), transparent 22%, transparent 70%, rgba(58, 8, 21, .6)),
    repeating-linear-gradient(90deg, #3A0815 0, #5C0D22 7%, #78122B 13%, #A41E40 17%, #78122B 22%, #4A0A1B 28%, #3A0815 33.3%); }
.kth-curtain--l { left: 0; clip-path: polygon(0 0, 100% 0, 100% 46%, 62% 72%, 44% 100%, 0 100%); border-radius: 0 0 0 10px; }
.kth-curtain--r { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 56% 100%, 38% 72%, 0 46%); border-radius: 0 0 10px 0; }
.kth-curtain::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6%; background: linear-gradient(180deg, #FFF1BF, #E8B84A 30%, #8A5A12 70%, #E8B84A); opacity: .75; }
.kth-curtain--l::after { right: 0; }
.kth-curtain--r::after { left: 0; }
.kth-valance { position: absolute; z-index: 3; left: 3%; right: 3%; top: calc(clamp(14px, 4.2%, 70px) * .55); height: clamp(14px, 4.6%, 64px); pointer-events: none;
  background: radial-gradient(60% 120% at 50% 0, #A41E40 0 52%, #78122B 53% 70%, transparent 71%) 0 0 / calc(100% / 9) 100% repeat-x;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); }
.kth-valance::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18%; background: linear-gradient(180deg, #FFF1BF, #E8B84A 50%, #8A5A12); }
.kth-arch { position: absolute; z-index: 3; left: 0; right: 0; top: 0; width: 100%; height: calc(clamp(14px, 4.2%, 70px) * 1.05); pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.kth-footlights { position: absolute; z-index: 3; left: 12%; right: 12%; bottom: calc(clamp(16px, 3.4%, 56px) * .2); height: calc(clamp(16px, 3.4%, 56px) * .6); display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.kth-footlights i { position: relative; display: block; width: 4.2%; height: 70%; border-radius: 50% 50% 6px 6px / 70% 70% 6px 6px; background: linear-gradient(180deg, #FFF1BF, #C99A3A 40%, #6E4710); box-shadow: 0 0 0 1px rgba(110, 71, 16, .8); }
.kth-footlights i::before { content: ""; position: absolute; left: 50%; bottom: 55%; width: 380%; aspect-ratio: 1.6; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 140, .55), rgba(255, 170, 80, .15) 60%, transparent); }

/* v1.5.0 the reading card (.kth-dock): the act's eyebrow and the discovery icons, the progress, one paragraph at a time
   (it scrolls inside itself), then Back · the count · Continue. It sits under the stage (beside it from 1100 px) and never
   over it, so the words never cover a character or a prop. */
.kth-dock { min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px clamp(14px, 2vw, 26px) 12px; background: linear-gradient(180deg, #17111C, #0E0B12); border-top: 1px solid rgba(242, 181, 76, .28); overflow: hidden; max-height: min(44vh, 440px); }
.kth-read__top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.kth-read__act { margin: 0; min-width: 0; font: 700 .78rem/1.3 var(--k-sans); letter-spacing: .12em; text-transform: uppercase; color: #F6C66B; }
.kth-dock[data-act="2"] .kth-read__act { color: #9FD8D2; } .kth-dock[data-act="3"] .kth-read__act { color: #FFE7A3; }
.kth-progress { flex: none; }
.kth-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; }
.kth-step { flex: 1 1 0; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.kth-step--a2 { background: rgba(79, 195, 185, .22); } .kth-step--a3, .kth-step--work, .kth-step--end { background: rgba(242, 181, 76, .26); }
.kth-step.is-done { background: #D97706; }
.kth-step.is-now { background: #FCD98A; box-shadow: 0 0 8px rgba(252, 217, 138, .8); }
.kth-read { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; outline: none; padding: 2px 2px 4px; scrollbar-width: thin; scrollbar-color: rgba(242, 181, 76, .4) transparent; }
.kth-read__who { margin: 0 0 2px; font: 700 .75rem var(--k-sans); letter-spacing: .1em; text-transform: uppercase; color: #FCD98A; }
.kth-read__who[hidden], .kth-read__title[hidden], .kth-read__choices[hidden] { display: none; }
.kth-player .kth-read__title { margin: 0 0 .35em !important; font-family: var(--k-serif); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.75rem) !important; line-height: 1.15; color: #FFF7EE !important; }
.kth-read__text { color: #FCFBF7; font: 500 clamp(1.02rem, .95rem + .3vw, 1.2rem)/1.62 var(--k-sans); }
.kth-read__text p { margin: 0 0 .6em; max-width: 62ch; text-wrap: pretty; }
.kth-read__text p:last-child { margin-bottom: 0; }
.kth-read__chose { font: 700 .8rem var(--k-sans); letter-spacing: .08em; text-transform: uppercase; color: #F2B54C; }
.kth-read__chose.kth-v-dharma { color: #4FC3B9; } .kth-read__chose.kth-v-shanti { color: #C9B8FA; }
.kth-read__moral { padding: .55em .8em; border-radius: 12px; background: rgba(242, 181, 76, .1); border-left: 4px solid #F2B54C; font-style: italic; color: #FFF3D6; }
.kth-read__hint { color: #CFC5B4; font-size: .9em; }
.kth-read__mudra { font: 700 1.05em var(--k-serif); color: #FCD98A; }
.kth-end__saved { margin: .4em 0 0; min-height: 1.4em; color: #FCD98A; font-weight: 600; }
/* the crossroads: three choice buttons, mirroring the relics on the stage (Satya gold, Dharma teal, Shanti lavender) */
.kth-read__choices { display: grid; gap: 8px; margin-top: 10px; }
.kth-opt { --v: #F2B54C; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 14px 8px 10px; border-radius: 16px;
  border: 2px solid rgba(252, 217, 138, .55); border-color: color-mix(in srgb, var(--v) 60%, transparent);
  background: rgba(22, 19, 31, .8); background: linear-gradient(90deg, color-mix(in srgb, var(--v) 22%, rgba(22, 19, 31, .9)), rgba(22, 19, 31, .85)); color: #FFF7EE; font: 600 1rem var(--k-sans); text-align: left; cursor: pointer; transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; }
.kth-opt--satya { --v: #F2B54C; } .kth-opt--dharma { --v: #4FC3B9; } .kth-opt--shanti { --v: #B9A2F5; }
.kth-opt__relic { font-size: 1.6rem; line-height: 1; width: 1.6em; text-align: center; }
.kth-opt__body { display: grid; gap: 2px; min-width: 0; }
.kth-opt__l { font-weight: 800; line-height: 1.2; }
.kth-opt__en { font-size: .8rem; font-weight: 600; color: #E7E1D3; line-height: 1.25; }
.kth-opt.is-picked { background: linear-gradient(90deg, var(--v), color-mix(in srgb, var(--v) 70%, #FFF3C4)); border-color: #FFF3C4; color: #1C1208; box-shadow: 0 0 0 4px color-mix(in srgb, var(--v) 30%, transparent), 0 0 24px color-mix(in srgb, var(--v) 45%, transparent); }
.kth-opt.is-picked .kth-opt__en { color: #2B1A0C; }
.kth-opt:focus-visible { outline: 3px solid #FFF3C4; outline-offset: 3px; }
.kth-opt.is-hover { border-color: var(--v); transform: translateY(-1px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v) 30%, transparent), 0 0 18px color-mix(in srgb, var(--v) 40%, transparent); }
@media (hover: hover) and (pointer: fine) { .kth-opt:hover { border-color: var(--v); transform: translateY(-1px); } }
/* Back · count · Continue (a soft golden pulse, still under reduced motion) */
.kth-read__nav { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(242, 181, 76, .14); }
.kth-read__nav .kth-count { flex: 1 1 auto; margin: 0; min-width: 0; text-align: center; font: 600 .82rem var(--k-sans); color: #CFC5B4; font-variant-numeric: tabular-nums; }
.kth-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.kth-actions:empty { display: none; }
.kth-player .kth-ghost { color: #FFF7EE; border-color: rgba(252, 217, 138, .55); background: rgba(255, 255, 255, .05); }
.kth-back { min-height: 48px; padding-inline: .95em; }
.kth-back:disabled { opacity: .35; cursor: default; }
.kth-pause[hidden] { display: none; }
.kth-pause { min-height: 48px; }
.kth-continue { min-height: 52px; padding-inline: 1.3em; font-weight: 800; animation: kth-pulse 2.4s ease-in-out infinite; }
.kth-continue[hidden] { display: none; }
.kth-continue:disabled { animation: none; opacity: .6; cursor: default; filter: saturate(.6); }
@keyframes kth-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(252, 217, 138, .55), 0 8px 22px -12px rgba(0, 0, 0, .8); transform: scale(1); } 50% { box-shadow: 0 0 0 9px rgba(252, 217, 138, 0), 0 0 26px rgba(242, 181, 76, .55); transform: scale(1.03); } }
.kth-dock[data-step="end"] .kth-read__nav .kth-count { display: none; }
/* the discovery icons (the diorama's tap targets for the keyboard): 44 px round icon buttons, their words as names */
.kth-explore { display: flex; flex-wrap: nowrap; gap: 6px; }
.kth-explore[hidden], .kth-node[hidden] { display: none; }
.kth-node { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 0; border-radius: 50%; }
.kth-node > span[aria-hidden] { font-size: 1.2rem; }
.kth-node > span:not([aria-hidden]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.kth-node[aria-pressed="true"] { color: #2A120A; background: linear-gradient(135deg, #FFE7A3, #F2B54C); border-color: transparent; }
.kth-voice-note { margin: 0; padding: 6px 0 0; font-size: .85rem; }

/* the workshop, guided by the stage (the golden lotus and the mudra card) */
.kth-work { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 3cqw; padding: 2cqw 4cqw 2.4cqw; overflow-y: auto;
  background: radial-gradient(60% 70% at 28% 45%, rgba(76, 56, 120, .78), transparent 70%), radial-gradient(40% 50% at 80% 30%, rgba(120, 18, 43, .4), transparent 70%), rgba(9, 8, 20, .7); }
.kth-work__lotus { position: relative; aspect-ratio: 1; max-height: 100%; margin-bottom: 4cqw; }
.kth-work__lotus canvas { width: 100%; height: 100%; display: block; }
.kth-work__cue { position: absolute; left: 0; right: 0; top: 3%; margin: 0; text-align: center; font: 700 clamp(1.1rem, 3cqw, 2.4rem) var(--k-serif); color: #FCD98A; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); transition: color .6s ease; }
.kth-work__cue[data-phase="hold"] { color: #FFF3C4; } .kth-work__cue[data-phase="out"] { color: #B9E3F5; }
.kth-work__time { position: absolute; right: 4%; top: 4%; margin: 0; font: 700 clamp(1rem, 2.2cqw, 1.8rem) var(--k-sans); font-variant-numeric: tabular-nums; color: #FFF7EE; opacity: .8; }
.kth-work__mudra { display: grid; gap: .8cqw; justify-items: center; text-align: center; }
.kth-work__hand { width: min(100%, 20cqw); aspect-ratio: 440 / 480; padding: 1cqw; border-radius: 28px; background: radial-gradient(circle at 50% 40%, #FFF8EA, #F1DFC0); box-shadow: 0 0 0 3px rgba(242, 181, 76, .45), 0 18px 40px -18px rgba(0, 0, 0, .8); }
.kth-work__hand .kth-mudra { width: 100%; height: 100%; display: block; }
.kth-work__name { margin: 0; font: 700 clamp(1rem, 2.1cqw, 1.8rem) var(--k-serif); color: #FCD98A; }
.kth-work__sub { margin: 0; font: 600 clamp(.8rem, 1.4cqw, 1.1rem) var(--k-sans); color: #E7E1D3; font-style: italic; }
.kth-work__how { margin: 0; font: 500 clamp(.85rem, 1.5cqw, 1.25rem)/1.5 var(--k-sans); color: #FFF7EE; max-width: 34em; }

.kth-end { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: .6cqw; padding: 4cqw; text-align: center; overflow-y: auto; background: radial-gradient(70% 70% at 50% 40%, rgba(120, 18, 43, .94), rgba(11, 9, 16, .94)); color: #FFF7EE; }
.kth-end__badge { width: clamp(90px, 16cqw, 220px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF3C4, #F2B54C 55%, #B9771C); box-shadow: 0 0 0 8px rgba(255, 243, 196, .25), 0 0 80px rgba(242, 181, 76, .6); font-size: clamp(2.6rem, 8cqw, 6rem); animation: kstar-pop 700ms cubic-bezier(.2, 1.4, .4, 1) both; }
.kth-end__title { margin: 0 !important; font-family: var(--k-serif); font-size: clamp(1.5rem, 3.6cqw, 3rem) !important; color: #FEF3C7; }
.kth-end__moral { margin: 0; max-width: 40em; font: 500 clamp(1rem, 1.9cqw, 1.5rem)/1.5 var(--k-sans); }
.kth-end__saved { margin: 0; min-height: 1.4em; color: #FCD98A; font-weight: 600; }
.kth-end__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: .6cqw 0 0; }

/* from 1100 px wide (and tall enough): the reading card beside the stage, full height, so the stage keeps its width */
@media (min-width: 1100px) and (min-height: 600px) {
  .kth-player__frame { grid-template-columns: minmax(0, 1fr) clamp(340px, 29vw, 460px); grid-template-rows: auto minmax(0, 1fr); }
  .kth-player__bar { grid-column: 1 / -1; }
  .kth-stage { grid-column: 1; grid-row: 2; }
  .kth-dock { grid-column: 2; grid-row: 2; max-height: none; border-top: 0; border-left: 1px solid rgba(242, 181, 76, .28); padding: 18px 22px 16px; gap: 12px; }
  .kth-read { padding-top: 6px; }
  .kth-read__text { font-size: 1.14rem; }
  .kth-read__nav { flex-wrap: wrap; }
  .kth-read__nav .kth-continue { order: 3; flex: 1 1 100%; }
  .kth-read__nav .kth-actions { order: 4; flex: 1 1 100%; }
}

/* below 768 px: the player fills the screen; the stage is the top 55dvh, the reading card the lower 35dvh */
@media (max-width: 767.98px) {
  .kth-player { width: 100vw; height: 100vh; height: 100dvh; max-width: 100vw; max-height: 100vh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .kth-player__frame { border-radius: 0; border: 0; grid-template-rows: auto 55vh minmax(35vh, 1fr); grid-template-rows: auto 55dvh minmax(35dvh, 1fr); }
  .kth-player__bar { flex-wrap: nowrap; gap: 6px; padding: 4px 8px 4px 16px; padding-top: calc(4px + env(safe-area-inset-top)); max-height: 10vh; max-height: 10dvh; min-height: 0; }
  .kth-player .kth-player__title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.05rem !important; }
  .kth-player__tools { flex-wrap: nowrap; gap: 6px; }
  .kth-player .kbtn--tool { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 1.15rem; }
  .kth-player__tools .kbtn--tool span:last-child { display: none; }
  .kth-player .kbtn--close { position: static; width: 44px; min-width: 44px; height: 44px; min-height: 44px; font-size: 1.15rem; }
  .kth-vol { min-height: 44px; padding: 0 8px; } .kth-vol input { width: 72px; }
  .kth-stage { height: 55vh; height: 55dvh; max-height: 55vh; max-height: 55dvh; padding: 0; place-items: stretch; container-type: normal; }
  .kth-proscenium { width: 100%; height: 100%; max-width: none; padding: 14px 28px 12px; display: flex; }
  .kth-screen { aspect-ratio: auto; height: 100%; border-radius: 8px; }
  .kth-curtain { width: 28px; } .kth-curtain::after { width: 3px; }
  .kth-valance { top: 6px; height: 12px; } .kth-arch { height: 18px; }
  .kth-footlights { bottom: 2px; height: 9px; }
  .kth-work { gap: 10px; padding: 10px 12px; align-items: start; }
  .kth-work__lotus { margin: 0; }
  .kth-work__hand { width: 64%; }
  .kth-work__name { font-size: 1rem; }
  .kth-end { gap: 6px; padding: 12px; }
  .kth-end__badge { width: 76px; font-size: 2.4rem; }
  /* at least the lower 35dvh (it also takes the few pixels the compact bar leaves), scrolling inside itself */
  .kth-dock { height: auto; min-height: 35vh; min-height: 35dvh; max-height: none; padding: 6px 16px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); gap: 5px; }
  .kth-read__top { min-height: 34px; gap: 6px; }
  .kth-read__act { font-size: .66rem; letter-spacing: .06em; }
  .kth-explore { gap: 4px; }
  .kth-node { width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
  .kth-node > span[aria-hidden] { font-size: .98rem; }
  .kth-player .kth-read__title { font-size: 1.15rem !important; margin-bottom: .25em !important; }
  .kth-read__text { font-size: 1rem; line-height: 1.55; }
  .kth-read__choices { gap: 6px; margin-top: 6px; }
  .kth-opt { min-height: 48px; padding: 6px 10px 6px 8px; font-size: .95rem; gap: 8px; }
  .kth-opt__relic { font-size: 1.35rem; }
  .kth-opt__en, .kth-read__hint { display: none; }
  .kth-dock[data-step="choice"] .kth-read__who, .kth-dock[data-step="choice"] .kth-read__nav .kth-count { display: none; }
  .kth-read__nav { flex-wrap: nowrap; gap: 8px; padding-top: 6px; }
  .kth-read__nav .kth-count { font-size: .75rem; }
  .kth-back { min-height: 48px; padding-inline: .7em; }
  .kth-continue { min-height: 48px; padding-inline: 1em; font-size: .98rem; }
  .kth-dock[data-step="apply"] .kth-read__nav, .kth-dock[data-step="end"] .kth-read__nav { flex-wrap: wrap; }
  .kth-dock[data-step="apply"] .kth-read__nav .kth-count, .kth-dock[data-step="end"] .kth-read__nav .kth-count { display: none; }
  .kth-dock[data-step="apply"] .kth-actions .kbtn, .kth-dock[data-step="end"] .kth-actions .kbtn { min-height: 48px; font-size: .9rem; padding-inline: .9em; }
}
/* below 640 px: one column, 16 px padding, the volume and full-screen tools give way to the music switch */
@media (max-width: 639.98px) {
  .kth-proscenium { padding: 12px 14px 10px; }
  .kth-curtain { width: 14px; }
  .kth-vol, .kth-player [data-p-full] { display: none; }
  .kth-work { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}


/* ---------------------------------------------------------------- motion (transform / opacity only) */
@keyframes kth-talk { from { transform: translateY(0) rotate(-.6deg); } to { transform: translateY(-4px) rotate(.6deg); } }
@keyframes kth-wave { from { transform: translateX(0); } to { transform: translateX(-160px); } }
@keyframes kth-rock { from { transform: rotate(-2deg) translateY(0); } to { transform: rotate(2deg) translateY(-8px); } }
@keyframes kth-rock-hard { 0% { transform: rotate(-6deg) translateY(4px); } 50% { transform: rotate(5deg) translateY(-16px); } 100% { transform: rotate(-6deg) translateY(4px); } }
@keyframes kth-rain { from { transform: translate(0, -60px); } to { transform: translate(-20px, 60px); } }
@keyframes kth-flash { 0%, 86%, 100% { opacity: 0; } 88% { opacity: .85; } 90% { opacity: .1; } 92% { opacity: .7; } }
@keyframes kth-soot { from { transform: rotate(-3deg) scale(1); } to { transform: rotate(3deg) scale(1.05); } }
@keyframes kth-soot-wild { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(30px, -20px) rotate(12deg) scale(1.12); } 100% { transform: translate(-20px, 10px) rotate(-8deg); } }
@keyframes kth-soot-fade { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(.6) translateY(-40px); } }
@keyframes kth-dawn { from { opacity: .4; transform: scale(.85); } to { opacity: 1; transform: scale(1.12); } }
@keyframes kth-drop { 0% { transform: translateY(-40px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(380px); opacity: 0; } }
@keyframes kth-jolt { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-18px) rotate(-3deg); } 40% { transform: translateX(10px) rotate(2deg); } 60% { transform: translateX(-6px); } }
@keyframes kth-bump { from { transform: translateX(80px); } to { transform: translateX(0); } }
@keyframes kth-leaf { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(-120px, 420px) rotate(320deg); } }
@keyframes kth-run { 0% { transform: translate(-500px, 0); } 100% { transform: translate(500px, 0); } }
@keyframes kth-scent { from { transform: translateY(0); opacity: .2; } 50% { opacity: .85; } to { transform: translateY(-60px); opacity: 0; } }
@keyframes kth-rays { to { transform: rotate(360deg); } }
@keyframes kth-heat { from { transform: translateY(0); opacity: .3; } to { transform: translateY(-10px); opacity: .7; } }
.kth-wave { animation: kth-wave 6s linear infinite; }
.kth-rock { animation: kth-rock 3.6s ease-in-out infinite alternate; }
.kth-rock--hard { animation: kth-rock-hard 2.2s ease-in-out infinite; }
.kth-rain { animation: kth-rain .5s linear infinite; }
.kth-flash { animation: kth-flash 4.5s linear infinite; }
.kth-soot { animation: kth-soot 4s ease-in-out infinite alternate; }
.kth-soot--wild { animation: kth-soot-wild 2.6s ease-in-out infinite alternate; }
.kth-soot--fade { animation: kth-soot-fade 7s ease-in forwards; }
.kth-dawn { animation: kth-dawn 6s ease-out forwards; transform-box: fill-box; transform-origin: center; }
.kth-drop { animation: kth-drop 3.2s ease-in infinite; }
.kth-jolt { animation: kth-jolt .9s ease-out 2; }
.kth-bump { animation: kth-bump 1.2s ease-out both; }
.kth-leaf { animation: kth-leaf 5s linear infinite; }
.kth-run { animation: kth-run 6s linear infinite; }
.kth-scent { animation: kth-scent 3.8s ease-in-out infinite; }
.kth-rays { animation: kth-rays 40s linear infinite; }
.kth-heat { animation: kth-heat 2.4s ease-in-out infinite alternate; }
.kart-paused .kth-wave, .kart-paused [class*="kth-"] { animation-play-state: paused !important; }
.kart-still [class*="kth-"] { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  [class*="kth-"]:not(.kth-player):not(.kth-shot) { animation: none !important; }
  .kth-end__badge { animation: none !important; }
  .kth-card__thumb, .kth-card__go, .kth-opt, .kth-w, .kth-work__cue, .kth-gl, .kth-shafts { transition: none !important; }
}

/* ---------------------------------------------------------------- the printable certificate (this device) */
.kth-print { display: none; }
@media print {
  html.kth-printing body > *:not(.kth-print) { display: none !important; }
  html.kth-printing .kth-print { display: block; }
  .kth-print__page { position: relative; box-sizing: border-box; width: 100%; min-height: 7in; padding: .6in .8in; border: 4pt double #D97706; text-align: center; font-family: Georgia, serif; color: #2B1A14; }
  .kth-print__org { font: 600 10pt Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #881337; }
  .kth-print h1 { font-size: 34pt; margin: .1in 0; color: #78122B; }
  .kth-print__name { font-size: 38pt; font-weight: 700; color: #B45309; margin: .12in 0; border-bottom: 1pt solid #D97706; display: inline-block; padding: 0 .3in; }
  .kth-print__list { font: 700 13pt Arial, sans-serif; color: #881337; }
  .kth-print__date { font: 10pt Arial, sans-serif; color: #78716C; }
  .kth-print__seal { position: absolute; right: .5in; bottom: .4in; width: 1.3in; }
  @page { size: landscape; margin: .4in; }
}