/* Course Studio screen player. A 16:9 stage that scales with the window (like a Storyline course),
   switching to a stacked layout on phones. Colours meet WCAG 2.2 AA; brand colours arrive as --brand,
   --accent (text-safe) and --accent-soft from the theme. */
:root {
  --ink: #17212b;
  --muted: #4a5866;
  --line: #d9dfe5;
  --frame: #e8ecf0;
  --card: #ffffff;
  --brand: #0b6e6e;
  --accent: #0b6e6e;
  --accent-ink: #ffffff;
  --accent-soft: #e3f1f0;
  --good: #1d6b2f;
  --good-soft: #e6f3e9;
  --bad: #9b2c1f;
  --bad-soft: #fbecea;
  --shadow: 0 10px 40px rgba(16, 28, 40, .14);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--ink); background: var(--frame); -webkit-text-size-adjust: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #f2a900; outline-offset: 2px; }

/* ---------- App frame ---------- */
.cs-app { display: grid; grid-template-rows: auto 1fr auto; height: 100vh; height: 100dvh; }
.cs-top { display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: #fff; border-bottom: 3px solid var(--brand); min-height: 52px; }
.cs-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cs-brand .logo { height: 30px; width: auto; display: block; }
.cs-course { font-weight: 700; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-where { color: var(--muted); font-size: .88rem; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-tools { display: flex; gap: 2px; }
.cs-tool { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink); border-radius: 50%; padding: 0; cursor: pointer; transition: background .2s, color .2s; }
.cs-tool svg { width: 21px; height: 21px; }
.cs-tool[hidden] { display: none; }
.cs-tool:hover { background: var(--accent-soft); color: var(--accent); }
.cs-tool[aria-pressed="false"] { color: var(--muted); opacity: .5; }

/* The stage and, under it, a strip for captions (kept even when empty so the stage never jumps) */
.cs-viewport { --stage-w: min(100%, calc((100dvh - 52px - 64px - 36px - 58px) * 16 / 9)); position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-content: center; gap: 10px; padding: 18px; min-height: 0; overflow: hidden; }
.cs-stage {
  position: relative; container-type: size; aspect-ratio: 16 / 9;
  width: var(--stage-w); max-width: 1400px;
  background: var(--card); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; outline: none;
}
.cs-captions { width: var(--stage-w); max-width: 1400px; min-height: 48px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 18px; border-radius: 10px; background: #17212b; color: #fff; font-size: clamp(14px, 1.1vw, 19px); line-height: 1.4; }
.cs-captions[hidden] { display: flex; visibility: hidden; }
.cs-captions:empty::before { content: "\00a0"; }
.cs-captions:empty { background: transparent; }
/* Short screens: fewer, bigger elements */
.scr-steps .steps .step { padding: 4cqh 2cqw; font-size: 1em; }
.scr-steps .step .num { width: 2.6em; height: 2.6em; font-size: 1.05em; }
.big-text .pane p { font-size: 1.35em; line-height: 1.35; font-weight: 600; }
.cs-bottom { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: #fff; border-top: 1px solid var(--line); min-height: 64px; }
.cs-nav { border-radius: 10px; padding: 11px 22px; font-weight: 700; cursor: pointer; border: 2px solid var(--accent); }
.cs-back { background: #fff; color: var(--accent); }
.cs-next { background: var(--accent); color: var(--accent-ink); }
.cs-nav:disabled { opacity: .4; cursor: not-allowed; }
.cs-next.cs-pulse:not(:disabled) { animation: pulse 1.6s ease 2; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(0,0,0,.08); } }
.cs-progress { flex: 1; height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.cs-progress-bar { height: 100%; width: 0; background: var(--brand); transition: width .4s ease; }
.cs-count { color: var(--muted); font-size: .85rem; white-space: nowrap; }

/* Menu */
.cs-menu { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); background: #fff; box-shadow: -10px 0 40px rgba(0,0,0,.18); padding: 20px; z-index: 30; overflow-y: auto; }
.cs-menu h2 { margin: 0 0 12px; font-size: 1.15rem; }
.cs-menu ol { list-style: none; padding: 0; margin: 0; }
.nav-item { display: flex; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; padding: 10px 12px; cursor: pointer; color: var(--ink); font-size: .95rem; text-decoration: none; }
.nav-item:hover:not(:disabled) { background: var(--accent-soft); }
.nav-item.current { background: var(--accent-soft); font-weight: 700; }
.nav-item.locked { color: var(--muted); cursor: not-allowed; }
.nav-item.done .nav-icon { color: var(--good); font-weight: 700; }
.nav-icon { width: 1.2em; flex: none; text-align: center; }
.nav-ref { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
a.nav-item { color: var(--accent); font-weight: 600; }

/* ---------- Screens (all sizes in container units so the stage scales as one) ---------- */
.scr { position: absolute; inset: 0; display: grid; font-size: clamp(14px, 1.75cqw, 26px); line-height: 1.45; animation: enter .45s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(1.2cqh); } to { opacity: 1; transform: none; } }
.scr h1 { font-size: 2.6em; line-height: 1.08; margin: 0 0 .35em; letter-spacing: -.01em; }
.scr h2 { font-size: 1.85em; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.005em; }
.scr p { margin: 0 0 .7em; }
.scr ul { margin: 0 0 .7em; padding-left: 1.1em; }
.scr li { margin: .25em 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .62em; font-weight: 800; color: var(--accent); margin: 0 0 .6em; }
.pane { padding: 5cqh 4.5cqw; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.pic { position: relative; overflow: hidden; background: #cfd6dc; min-height: 0; }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.anim > * { animation: enter .5s ease both; }
.anim > *:nth-child(2) { animation-delay: .12s; } .anim > *:nth-child(3) { animation-delay: .24s; }
.anim > *:nth-child(4) { animation-delay: .36s; } .anim > *:nth-child(5) { animation-delay: .48s; }
.anim > *:nth-child(6) { animation-delay: .6s; } .anim > *:nth-child(7) { animation-delay: .72s; }

/* Cover and lesson intro */
.scr-cover { color: #fff; }
.scr-cover .pic { position: absolute; inset: 0; }
.scr-cover .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,16,22,.92) 0%, rgba(8,16,22,.72) 42%, rgba(8,16,22,.08) 78%); }
.scr-cover .pane { position: relative; max-width: 62%; justify-content: center; }
.scr-cover .eyebrow { color: #9fe0b0; }
.scr-cover .meta { opacity: .9; font-size: .9em; }
.start-btn { align-self: flex-start; margin-top: 1em; background: var(--brand); color: #fff; border: 0; border-radius: .5em; padding: .7em 1.6em; font-size: 1em; font-weight: 800; cursor: pointer; }
.start-btn:hover { filter: brightness(1.08); }
.scr-intro { grid-template-columns: 1fr 1.05fr; }
.scr-intro .pane { background: var(--accent-soft); }
.scr-intro .big-num { font-size: 4.5em; font-weight: 900; color: var(--brand); line-height: 1; margin-bottom: .1em; }
.scr-intro .pic { clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); }
.outcomes li::marker { color: var(--brand); }

/* Picture and text */
.scr-split { grid-template-columns: 1.15fr 1fr; }
.scr-split.flip { grid-template-columns: 1fr 1.15fr; }
.scr-split.flip .pic { order: -1; }
.scr-text { place-items: center; }
.scr-text .pane { max-width: 78%; }
.icon-badge { width: 3.4em; height: 3.4em; border-radius: 50%; background: var(--accent-soft); color: var(--brand); display: grid; place-items: center; margin-bottom: .8em; }
.icon-badge svg { width: 55%; height: 55%; }

/* Steps diagram */
.scr-steps { grid-template-rows: auto auto; align-content: center; padding: 5cqh 4.5cqw; }
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2.4cqw; align-items: stretch; margin-top: 2cqh; }
.step { position: relative; background: #fff; border: 2px solid var(--line); border-radius: 1cqw; padding: 2.4cqh 1.6cqw; font-size: .88em; }
.step::after { content: ""; position: absolute; right: -2.2cqw; top: 50%; width: 2cqw; height: 3px; background: var(--brand); }
.step:last-child::after { display: none; }
/* Alternatives (this or that) show "or" between them instead of an arrow line. */
.step:has(+ .step.alt)::after { display: none; }
.step.alt::before { content: "or"; position: absolute; left: -1.2cqw; top: 50%; transform: translate(-50%, -50%); background: #fff; color: var(--muted); font-weight: 800; font-size: .85em; padding: .1em .2em; }
@media (max-width: 760px) { .step.alt::before { position: static; display: block; transform: none; margin: -6px 0 6px; background: none; } }
.step .num { width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; margin-bottom: .6em; }
.step h3 { margin: 0 0 .35em; font-size: 1.08em; }
.step p { margin: 0; color: var(--muted); }
.step.stop { border-color: var(--bad); background: var(--bad-soft); }
.step.stop .num { background: var(--bad); }
.step.go { border-color: var(--good); background: var(--good-soft); }
.step.go .num { background: var(--good); }

/* Click-to-explore cards */
.scr-cards { grid-template-columns: 1fr 1.05fr; }
.scr-cards .pane { justify-content: center; }
.scr-cards .card { flex-direction: column; align-items: flex-start; gap: .8em; padding: 4cqh 1.6cqw; min-height: 24cqh; font-size: 1em; }
.scr-cards .card .ico { width: 2.4em; height: 2.4em; }
.scr-cards .card .tick { position: absolute; top: 1.4cqh; right: 1.2cqw; }
.scr-cards .card { position: relative; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2cqw; margin-top: .4em; }
.card { display: flex; align-items: center; gap: .6em; text-align: left; background: #fff; border: 2px solid var(--line); border-radius: .8cqw; padding: 1.6cqh 1.2cqw; cursor: pointer; color: var(--ink); font-weight: 650; font-size: .9em; transition: border-color .2s, background .2s; }
.card:hover { border-color: var(--accent); }
.card[aria-pressed="true"] { border-color: var(--brand); background: var(--accent-soft); }
.card .ico { width: 2em; height: 2em; flex: none; color: var(--brand); }
.card .tick { margin-left: auto; color: var(--good); font-weight: 900; }
.detail { background: var(--accent-soft); padding: 5cqh 4cqw; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
.detail .hint { color: var(--muted); }
.detail-ico { width: 30cqh; height: 30cqh; align-self: center; color: var(--brand); opacity: .14; margin-bottom: 1em; }
.detail-ico .ico, .detail-ico svg { width: 100%; height: 100%; }
.detail:has(.detail-ico) .hint { text-align: center; }
.detail.has-pic { position: relative; padding: 0; justify-content: flex-end; }
.detail-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail.has-pic .hint { position: relative; margin: 0; padding: 1em 1.4em; background: rgba(10,16,22,.75); color: #fff; }
.detail h3 { font-size: 1.35em; margin: 0 0 .5em; }
.card-detail-img { width: 100%; height: 30cqh; object-fit: cover; border-radius: .8cqw; margin-bottom: 1em; }

/* Scenario */
.scr-scenario { grid-template-columns: 1fr 1fr; }
.story { background: #fff; }
.story .who { align-self: flex-start; display: inline-block; background: var(--brand); color: #fff; font-weight: 800; padding: .2em .7em; border-radius: 99px; font-size: .75em; margin-bottom: .7em; }
.story .lesson-line { margin-top: .5em; padding: .8em 1em; border-left: .3em solid var(--brand); background: var(--accent-soft); border-radius: 0 .5em .5em 0; font-weight: 600; }

/* Decision, question */
.scr-decision { place-items: center; }
.scr-decision .pic { position: absolute; inset: 0; }
.scr-decision .shade { position: absolute; inset: 0; background: rgba(10, 18, 24, .55); }
.panel { position: relative; background: #fff; border-radius: 1.2cqw; box-shadow: var(--shadow); padding: 4cqh 3.5cqw; width: min(76%, 980px); max-height: 92%; overflow-y: auto; }
.choices { display: grid; gap: .55em; margin: .6em 0; }
.choice { text-align: left; background: #fff; border: 2px solid var(--line); border-radius: .6em; padding: .65em .9em; cursor: pointer; color: var(--ink); font-size: .95em; }
.choice:hover:not(:disabled) { border-color: var(--accent); }
.choice.right, .opt.right { border-color: var(--good); background: var(--good-soft); }
.choice.wrong, .opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.feedback { margin-top: .6em; padding: .7em .9em; border-radius: .6em; font-size: .92em; }
.feedback:empty { display: none; }
.feedback.good { background: var(--good-soft); color: var(--good); }
.feedback.bad { background: var(--bad-soft); color: var(--bad); }
.scr-question { place-items: center; background: linear-gradient(135deg, var(--accent-soft), #fff 60%); }
.scr-question fieldset { border: 0; padding: 0; margin: 0; }
.scr-question legend { font-size: 1.3em; font-weight: 750; margin-bottom: .6em; padding: 0; line-height: 1.3; }
.opt { display: flex; gap: .7em; align-items: flex-start; border: 2px solid var(--line); border-radius: .6em; padding: .65em .9em; margin: .45em 0; background: #fff; cursor: pointer; }
.opt:hover { border-color: var(--accent); }
.opt input { margin-top: .3em; width: 1.05em; height: 1.05em; accent-color: var(--accent); flex: none; }
.opt label { cursor: pointer; flex: 1; }
.cs-submit { margin-top: .5em; background: var(--accent); color: #fff; border: 0; border-radius: .5em; padding: .6em 1.3em; font-weight: 750; cursor: pointer; }
.qmsg { font-weight: 650; margin: .6em 0 0; }
.qmsg:empty { display: none; }

/* Summary and results */
.scr-summary { grid-template-rows: auto 1fr; padding: 5cqh 5cqw; background: linear-gradient(180deg, var(--accent-soft), #fff 45%); }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqh 3cqw; align-content: start; margin-top: 1cqh; }
.key { display: flex; gap: .7em; align-items: flex-start; background: #fff; border-radius: .8cqw; padding: 1.6cqh 1.4cqw; box-shadow: 0 2px 10px rgba(0,0,0,.05); font-size: .92em; }
.key .ico { width: 2em; height: 2em; flex: none; color: var(--brand); }
.scr-results { place-items: center; text-align: center; }
.scr-results .start-btn { align-self: center; }
.scr-results a, .scr-cover a { color: var(--accent); font-weight: 600; }
.scr-summary { align-content: center; }
.scr-summary.has-pic { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; align-content: stretch; padding: 0; background: #fff; }
.scr-summary.has-pic .pane { padding: 5cqh 4cqw; background: linear-gradient(180deg, var(--accent-soft), #fff 60%); }
.scr-summary.has-pic .keys { grid-template-columns: 1fr; gap: 1.4cqh; }
.ring { width: 22cqh; height: 22cqh; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1em; font-size: 2.2em; font-weight: 900; color: var(--brand); background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--line) 0); position: relative; }
.ring::before { content: ""; position: absolute; inset: 1.4cqh; background: #fff; border-radius: 50%; }
.ring span { position: relative; }

/* Hazard and risk style screens: terms side by side, then a row of small pictures */
.scr-gallery { place-items: center; background: linear-gradient(180deg, var(--accent-soft), #fff 55%); }
.scr-gallery .pane { width: 100%; max-width: 94%; }
.terms { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; margin: .2em 0 1.1em; }
.term { background: #fff; border-radius: .8cqw; padding: 1.8cqh 1.6cqw; border-left: .35em solid var(--brand); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.term:nth-child(2) { border-left-color: #c2410c; }
.term dt { font-family: var(--font); font-weight: 800; font-size: 1.15em; margin-bottom: .15em; }
.term dd { margin: 0; color: var(--muted); }
.gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2cqw; }
.tile { margin: 0; background: #fff; border-radius: .8cqw; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.tile img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.tile figcaption { padding: .5em .6em; font-weight: 700; font-size: .78em; text-align: center; }
.after-gallery { margin-top: 1em; font-weight: 600; }

.placeholder-voice { position: absolute; top: 1.4cqh; right: 1.4cqw; z-index: 6; background: rgba(255,255,255,.9); color: var(--muted); border-radius: 99px; padding: .2em .7em; font-size: clamp(10px, .9cqw, 14px); }

/* ---------- Polish ---------- */
.scr h1, .scr h2, .step h3, .big-num, .stat .v, .ring, .ending h3, .cs-course { font-family: var(--font); }
.scr h1, .scr h2 { font-weight: 800; letter-spacing: -.015em; }

/* Slow movement on photographs */
.pic img { animation: drift 26s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes drift { from { transform: scale(1.03); } to { transform: scale(1.12) translate(-1.5%, -1%); } }

/* Points that build as the narrator reaches them */
.cue { opacity: 0; transform: translateY(1cqh); transition: opacity .55s ease, transform .55s ease; }
.cue.on { opacity: 1; transform: none; }
.anim > .cue { animation: none; }

/* Big number callouts */
.stat { display: flex; align-items: baseline; gap: .5em; margin: .1em 0 .7em; }
.stat .v { font-weight: 800; font-size: 3.3em; line-height: 1; color: var(--brand); letter-spacing: -.02em; }
.stat .l { color: var(--muted); font-size: .9em; max-width: 16em; line-height: 1.3; }

/* Lesson intro: soft brand shapes */
.scr-intro .pane { position: relative; overflow: hidden; }
.scr-intro .pane::before, .scr-intro .pane::after { content: ""; position: absolute; border-radius: 50%; background: var(--brand); pointer-events: none; }
.scr-intro .pane::before { width: 70cqh; height: 70cqh; right: -28cqh; bottom: -34cqh; opacity: .07; }
.scr-intro .pane::after { width: 26cqh; height: 26cqh; right: 6cqh; top: -10cqh; opacity: .05; }
.scr-intro .pane > * { position: relative; }

/* Answer feedback with a little life */
.feedback.good::before { content: "\2713"; display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; margin-right: .5em; border-radius: 50%; background: var(--good); color: #fff; font-weight: 900; animation: pop .35s ease; }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.opt.wrong, .choice.wrong { animation: shake .38s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.cs-toast { position: fixed; top: 70px; left: 50%; transform: translate(-50%, -20px); opacity: 0; background: var(--brand); color: #fff; padding: 10px 18px; border-radius: 99px; font-weight: 700; box-shadow: var(--shadow); z-index: 40; transition: opacity .3s, transform .3s; pointer-events: none; }
.cs-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Steerable story */
.scr-branch { grid-template-columns: 1.05fr 1fr; }
.scr-branch .pic img { transition: opacity .4s ease; }
.branch-pane { background: #fff; justify-content: center; }
.branch-pane .who { align-self: flex-start; background: var(--brand); color: #fff; font-weight: 800; padding: .2em .8em; border-radius: 99px; font-size: .72em; margin-bottom: .6em; }
.branch-text { animation: enter .45s ease both; }
.branch-choices { display: grid; gap: .55em; margin-top: .8em; }
.branch-choice { display: flex; align-items: center; gap: .6em; text-align: left; background: #fff; border: 2px solid var(--brand); color: var(--ink); border-radius: .6em; padding: .7em .9em; cursor: pointer; font-weight: 650; font-size: .95em; transition: background .2s, transform .15s; }
.branch-choice::before { content: "\203A"; font-size: 1.5em; line-height: .6; color: var(--brand); font-weight: 900; }
.branch-choice:hover { background: var(--accent-soft); transform: translateX(4px); }
.trail { margin-top: 1em; display: flex; flex-wrap: wrap; gap: .4em; font-size: .7em; color: var(--muted); }
.trail span { background: var(--frame); border-radius: 99px; padding: .2em .7em; }
.ending { border-radius: .8em; padding: 1em 1.1em; margin-top: .4em; animation: enter .45s ease both; }
.ending.good { background: var(--good-soft); border: 2px solid var(--good); }
.ending.bad { background: var(--bad-soft); border: 2px solid var(--bad); }
.ending h3 { margin: 0 0 .35em; font-size: 1.15em; }
.ending.good h3 { color: var(--good); } .ending.bad h3 { color: var(--bad); }
.ending .lesson-line { font-weight: 650; margin: .4em 0 0; }
.ending-actions { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .9em; }
.ending-actions button { border: 2px solid var(--accent); background: #fff; color: var(--accent); border-radius: .5em; padding: .45em 1em; font-weight: 700; cursor: pointer; }
.ending-actions button.primary-action { background: var(--accent); color: #fff; }
.went-wrong { margin: 0 0 .4em; font-size: .92em; }

@media (prefers-reduced-motion: reduce) { .pic img { animation: none; } .cue { transition: none; } .opt.wrong, .choice.wrong, .feedback.good::before { animation: none; } }

/* Brand header with a light background */
body.branded .cs-top { border-bottom-color: var(--brand); }

/* ---------- Phones: stack everything, natural scrolling ---------- */
@media (max-width: 760px) {
  .cs-app { height: auto; min-height: 100dvh; }
  .cs-top { gap: 8px; padding: 8px 10px; }
  .cs-brand { flex: 1; }
  .cs-brand .logo { height: 24px; }
  .cs-tools { gap: 4px; }
  .cs-tool { padding: 5px 8px; font-size: .78rem; }
  #cs-replay { display: none; }
  .cs-bottom { gap: 8px; padding: 8px 10px; }
  .cs-count { display: none; }
  .cs-where, .cs-course { display: none; }
  .cs-viewport { padding: 0; place-items: stretch; overflow: visible; }
  .cs-stage { aspect-ratio: auto; width: 100%; min-height: calc(100dvh - 52px - 64px); border-radius: 0; box-shadow: none; container-type: inline-size; }
  .scr { position: relative; inset: auto; display: block; font-size: 16px; animation: none; }
  .scr h1 { font-size: 1.8em; } .scr h2 { font-size: 1.4em; }
  .pic { position: relative; height: 220px; }
  .scr-cover .pic, .scr-decision .pic { position: absolute; height: auto; }
  .scr-cover { min-height: calc(100dvh - 116px); display: flex; }
  .scr-cover .pane { max-width: none; }
  .scr-intro .pic { clip-path: none; }
  .scr-branch .pic { height: 200px; }
  .stat .v { font-size: 2.4em; }
  .pane { padding: 20px 18px; }
  .steps { grid-auto-flow: row; gap: 12px; }
  .step { padding: 14px; } .step::after { display: none; }
  .cards { grid-template-columns: 1fr; gap: 8px; } .card { padding: 12px; }
  .detail { padding: 18px; }
  .scr-steps, .scr-summary { padding: 20px 18px; }
  .keys { grid-template-columns: 1fr; gap: 10px; } .key { padding: 12px; }
  .scr-decision, .scr-question { display: flex; min-height: calc(100dvh - 116px); align-items: center; justify-content: center; padding: 16px; }
  .panel { width: 100%; padding: 18px; }
  .cs-viewport { display: block; }
  .cs-captions { position: sticky; bottom: 0; width: 100%; border-radius: 0; font-size: 15px; z-index: 5; }
  .cs-captions[hidden] { display: none; }
  .terms { grid-template-columns: 1fr; gap: 10px; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .scr-summary.has-pic { display: block; }
  .detail-ico { width: 120px; height: 120px; }
  .cs-tool { width: 36px; height: 36px; }
  .ring { width: 160px; height: 160px; } .ring::before { inset: 12px; }
  .cs-nav { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) { .scr, .anim > * { animation: none !important; } .cs-progress-bar { transition: none; } }

/* Quick reference page */
.quickref { background: #f4f6f8; }
.qr-top { display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: #fff; border-bottom: 3px solid var(--brand); }
.qr-top .logo { height: 32px; }
.qr-top h1 { margin: 0; font-size: 1.25rem; }
.qr { max-width: 860px; margin: 24px auto 48px; padding: 0 16px; }
.qr .block { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; margin: 0 0 14px; line-height: 1.55; }
.qr h2 { font-size: 1.1rem; margin: 0 0 8px; color: var(--accent); }
.qr-print button { background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 10px 18px; font-weight: 700; cursor: pointer; }
@media print { .qr-print { display: none; } .qr .block { break-inside: avoid; } body { background: #fff; } }

/* ==========================================================================
   Studio finish (11 Oct 2026). Matches lilybeth.studio: one typeface (Figtree), a calm dark frame around
   the stage, captions under the screen in the same frame, hairline panels, pill buttons and no decorative
   circles. Client colours still arrive as --brand, --accent and --accent-soft.
   ========================================================================== */
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-display: swap; src: url("fonts/figtree-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url("fonts/figtree-latin-700-normal.woff2") format("woff2"); }
:root {
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --frame: #0e1512; --frame-ink: #f1eee6; --frame-muted: rgba(241, 238, 230, .62); --frame-line: rgba(241, 238, 230, .1);
  --paper: #faf8f4; --line: #e7e2d8; --ink: #18211c; --muted: #56615a;
  --brand-light: color-mix(in srgb, var(--brand) 45%, #ffffff);
  --shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
body { background: var(--frame); font-family: var(--font); }
.scr h1, .scr h2, .step h3, .big-num, .stat .v, .ring, .ending h3, .cs-course, .term dt { font-family: var(--font); }
.scr h1 { font-size: 2.25em; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.scr h2 { font-size: 1.55em; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.scr { line-height: 1.5; }
.eyebrow { font-size: .58em; font-weight: 700; letter-spacing: .16em; color: var(--accent); }

/* Frame: top bar, bottom bar and captions sit in the dark frame */
.cs-top { background: transparent; border-bottom: 1px solid var(--frame-line); color: var(--frame-ink); }
body.branded .cs-top { border-bottom-color: var(--frame-line); }
.cs-course { font-weight: 600; letter-spacing: -.01em; }
.cs-where { color: var(--frame-muted); }
.cs-tool { color: var(--frame-ink); }
.cs-tool:hover { background: rgba(241, 238, 230, .1); color: #fff; }
.cs-tool[aria-pressed="false"] { color: var(--frame-muted); }
.cs-brand .logo { background: #fff; padding: 4px 8px; border-radius: 8px; height: 32px; }
.cs-stage { border-radius: 14px; box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, .06); }
.cs-captions { background: rgba(241, 238, 230, .07); color: var(--frame-ink); border-radius: 12px; font-weight: 500; letter-spacing: .005em; }
.cs-bottom { background: transparent; border-top: 1px solid var(--frame-line); }
.cs-nav { border-radius: 999px; padding: 10px 24px; font-weight: 600; border-width: 1px; }
.cs-back { background: transparent; color: var(--frame-ink); border-color: rgba(241, 238, 230, .3); }
.cs-back:hover:not(:disabled) { background: rgba(241, 238, 230, .08); }
.cs-next { background: var(--frame-ink); color: var(--frame); border-color: var(--frame-ink); }
.cs-next:hover:not(:disabled) { background: #fff; }
.cs-progress { height: 4px; background: rgba(241, 238, 230, .12); }
.cs-progress-bar { background: var(--brand-light); }
.cs-count { color: var(--frame-muted); font-variant-numeric: tabular-nums; }
.cs-menu { background: var(--paper); border-radius: 16px 0 0 16px; }
.nav-item { border-radius: 10px; }

/* Screens: paper backgrounds, hairline panels, no blobs */
.cs-stage { background: var(--paper); }
.scr-intro .pane { background: var(--paper); }
.scr-intro .pane::before, .scr-intro .pane::after { display: none; }
.scr-intro .pic { clip-path: none; }
.scr-intro .big-num { font-weight: 700; letter-spacing: -.04em; }
.scr-cover .shade { background: linear-gradient(90deg, rgba(10, 16, 13, .9) 0%, rgba(10, 16, 13, .66) 45%, rgba(10, 16, 13, .05) 80%); }
.scr-cover .eyebrow { color: var(--brand-light); }
.start-btn, .cs-submit { border-radius: 999px; font-weight: 600; padding: .7em 1.7em; }
.scr-cover .start-btn { background: #fff; color: var(--ink); }
.scr-cover .start-btn:hover { filter: none; background: var(--paper); }
.icon-badge { background: transparent; border: 1px solid var(--line); }
.step { background: #fff; border: 1px solid var(--line); border-radius: 1.2cqw; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
.step::after { height: 1.5px; background: var(--line); }
.step .num { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); font-weight: 700; }
.step.stop .num { background: transparent; color: var(--bad); border-color: var(--bad); }
.step.go .num { background: transparent; color: var(--good); border-color: var(--good); }
.step.stop, .step.go { border-width: 1px; }
.card { border: 1px solid var(--line); border-radius: 1cqw; font-weight: 600; }
.card[aria-pressed="true"] { border-color: var(--brand); background: #fff; box-shadow: inset 0 0 0 1px var(--brand); }
.detail { background: #fff; border-left: 1px solid var(--line); }
.story { background: var(--paper); }
.story .who, .branch-pane .who { background: transparent; color: var(--brand); border: 1px solid var(--brand); font-weight: 600; }
.story .lesson-line { border-left-width: 2px; background: #fff; }
.panel { border-radius: 16px; }
.choice, .opt { border: 1px solid var(--line); border-radius: .7em; }
.choice.right, .opt.right, .choice.wrong, .opt.wrong { border-width: 1px; }
.scr-question { background: var(--paper); }
.scr-question legend { font-weight: 650; letter-spacing: -.01em; }
.scr-summary { background: var(--paper); }
.scr-summary.has-pic .pane { background: var(--paper); }
.key { border: 1px solid var(--line); box-shadow: none; border-radius: 1cqw; }
.scr-gallery { background: var(--paper); }
.term { border: 1px solid var(--line); border-top: 2px solid var(--brand); border-left: 1px solid var(--line); box-shadow: none; border-radius: 1cqw; }
.term:nth-child(2) { border-left-color: var(--line); border-top-color: #c2410c; }
.term dt { font-weight: 700; letter-spacing: -.01em; }
.tile { box-shadow: none; border: 1px solid var(--line); border-radius: 1cqw; }
.tile figcaption { font-weight: 600; }
.branch-choice { border: 1px solid var(--line); font-weight: 600; }
.branch-choice:hover { border-color: var(--brand); background: #fff; }
.ending.good, .ending.bad { border-width: 1px; }
.ring { font-weight: 700; }
.cs-toast { border-radius: 999px; font-weight: 600; }
.placeholder-voice { background: rgba(255, 255, 255, .85); }

/* Phones: the stage fills the screen, so captions and bars stay dark around it */
@media (max-width: 760px) {
  .cs-stage { border-radius: 0; box-shadow: none; }
  .cs-captions { background: #17201b; border-radius: 0; }
}

/* Narrated points: every point is visible faintly from the start, then comes up as the narrator reaches it,
   so a screen never looks half-built. */
.cue { opacity: .28; transform: none; filter: saturate(.4); transition: opacity .6s ease, filter .6s ease; }
.cue.on { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) { .cue { transition: none; } }

/* Review fixes (SCF comments W012 to W014, 11 Oct 2026).
   W012: in a short window the stage grew taller than its row and covered the captions. The stage is now sized from the
   space actually left after the captions strip, using the viewport as a size container, so both always fit.
   W013: text had a 14px floor, so on a small stage it overflowed and the heading was cut off at the top. Text now scales
   with the stage like a video, and panes that still overflow scroll from the top instead of clipping it.
   W014: the "or" between two alternatives was wider than the gap. The gap is wider and the word smaller. */
@media (min-width: 761px) {
  .cs-viewport { container-type: size; --stage-w: min(100cqw, calc((100cqh - 58px - 10px) * 16 / 9)); }
  .cs-stage { width: var(--stage-w); }
  .cs-captions { width: min(100cqw, max(var(--stage-w), 760px)); max-width: 1400px; }
  .scr { font-size: clamp(9px, 1.75cqw, 26px); }
  .pane, .detail { justify-content: safe center; }
  .scr-steps, .scr-summary { align-content: safe center; overflow-y: auto; }
  .steps { gap: 3.4cqw; }
  .step::after { right: -3.1cqw; width: 2.8cqw; }
  .step.alt::before { left: -1.7cqw; font-size: .72em; background: transparent; padding: 0; }
  /* Rows of five or more steps: tighter cards, never a sideways scroll */
  .scr-steps { overflow-x: hidden; }
  .steps { grid-auto-columns: minmax(0, 1fr); }
  .steps:has(> .step:nth-child(5)) { gap: 2.6cqw; }
  .steps:has(> .step:nth-child(5)) .step { padding: 2cqh 1.1cqw; font-size: .8em; }
  .steps:has(> .step:nth-child(5)) .step::after { right: -2.4cqw; width: 2.2cqw; }
  .steps:has(> .step:nth-child(5)) .step.alt::before { left: -1.3cqw; }
}