:root {
  color-scheme: light;
  --paper: #f7f4e9;
  --shell: #efeadd;
  --card: #fffdf5;
  --ink: #163128;
  --forest: #10382d;
  --deep: #0d2c24;
  --muted: #466356;
  --line: #b5c3ad;
  --wash: #e5ecd8;
  --lime: #d9ed91;
  --rust: #943b25;
  --serif: "Instrument Serif", Georgia, serif;
  --body: "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--shell); color: var(--ink); font: 500 1rem/1.4 var(--body); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
button, summary { font: inherit; cursor: pointer; }
button { color: inherit; }
button:disabled { cursor: default; opacity: .42; }
:focus-visible { outline: 3px solid #a8512b; outline-offset: 4px; }
h1, h2, h3, p, blockquote { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 500; line-height: .99; letter-spacing: -.053em; }
.topbar, .controlbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem clamp(1rem, 2.5vw, 3rem); }
.topbar { min-height: 62px; }
.masthead { display: inline-flex; gap: .6rem; align-items: center; border: 0; padding: 0; background: none; white-space: nowrap; font: 700 clamp(1.12rem, 2vw, 1.8rem)/1 var(--serif); letter-spacing: -.05em; }
.brand-mark { color: var(--lime); background: var(--forest); border-radius: 4px; padding: .43rem .4rem .45rem; font: 800 .82rem/1 var(--body); letter-spacing: -.11em; }
.brand-mark span { opacity: .72; }
.course, .eyebrow { font-weight: 800; font-size: clamp(.74rem, 1.06vw, 1.05rem); letter-spacing: .13em; }
.course { display: flex; align-items: center; gap: .7rem; color: var(--muted); white-space: nowrap; }
.course span, .eyebrow span { display: inline-block; border-radius: 50%; background: currentColor; width: .44em; height: .44em; vertical-align: .22em; }
.eyebrow span { margin-right: .37em; }
.tools, .nav, .reader-controls { display: flex; align-items: center; gap: .6rem; }
.tool, .button { min-height: 42px; border: 1px solid var(--forest); padding: .48rem .85rem; border-radius: 6px; font-weight: 700; background: var(--forest); color: var(--paper); }
.tool:hover:not(:disabled), .button:hover:not(:disabled) { background: var(--deep); }
.outline { background: transparent; color: var(--forest); }
.outline:hover:not(:disabled) { background: var(--wash); }
.button { min-height: 48px; padding: .57rem .95rem; font-size: clamp(.92rem, 1.3vw, 1.3rem); }
.lime { background: var(--lime); color: var(--deep); border-color: var(--lime); }
.lime:hover:not(:disabled) { background: #edf5c2; }

#deck { flex: 1; display: flex; min-width: 0; margin: 0 clamp(.55rem, 2.25vw, 2.75rem); }
.slide { width: 100%; padding: clamp(1.25rem, 3.5vh, 3.5rem) clamp(1rem, 4vw, 5rem); display: flex; flex-direction: column; justify-content: center; gap: clamp(.8rem, 2.5vh, 2rem); min-width: 0; border: 1px solid #cfcbb7; border-radius: 17px; background: var(--paper); }
.slide.entering { animation: enter .23s ease-out; }
@keyframes enter { from { opacity: .55; } to { opacity: 1; } }
.slide-heading { display: grid; gap: .57rem; }
.slide-heading .eyebrow { color: var(--muted); }
.slide-heading h2 { font-size: clamp(2.45rem, 5.6vw, 7rem); }
.slide-heading.compact h2 { font-size: clamp(2.3rem, 4.8vw, 6rem); }
.lead, .foot-prompt { font-size: clamp(1.05rem, 1.95vw, 2.2rem); }
.lead { color: var(--muted); }
.foot-prompt { border-top: 1px solid var(--line); padding-top: .55em; }

.cover { background: radial-gradient(ellipse at 77% 43%, #245844, var(--deep) 75%); border-color: var(--deep); color: var(--paper); display: grid; grid-template-columns: 1.07fr .93fr; align-items: center; justify-content: normal; gap: 1rem; overflow: hidden; position: relative; }
.cover::before { content: ""; width: 44vw; height: 44vw; position: absolute; top: -25vw; right: -10vw; border-radius: 50%; border: 1px solid #6d8a6e; box-shadow: 0 0 0 34px #ffffff0d, 0 0 0 72px #ffffff0c, 0 0 0 114px #ffffff0b; pointer-events: none; }
.cover-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(.7rem, 2.7vh, 2.35rem); }
.cover .eyebrow { color: var(--lime); }
.cover h1 { font-size: clamp(3.1rem, min(8.9vw, 15.5vh), 10.8rem); }
.cover h1 em { color: var(--lime); font-weight: 400; }
.cover-copy > p:not(.eyebrow) { font-size: clamp(1.05rem, 1.8vw, 2rem); max-width: 33ch; color: #edf1df; }
.cover-copy .opening-question { padding-left: .7em; border-left: 3px solid var(--lime); color: var(--lime); font: italic clamp(1.25rem, 2vw, 2.5rem)/1.18 var(--serif); }
.cover-copy button { display: inline-flex; align-items: center; gap: 1rem; margin-top: .35rem; }
.cover-interaction { display: grid; justify-items: center; padding-bottom: 1.1rem; }
.cover-art { appearance: none; display: block; width: min(96%, 60vh); aspect-ratio: 1.25; position: relative; text-align: left; border: 0; padding: 0; background: transparent; border-radius: 12px; font-size: clamp(.75rem, 1.55vw, 1.58rem); color: var(--deep); }
.cover-art:focus-visible { outline-color: var(--lime); }
.envelope { position: absolute; z-index: 2; inset: 28% 6% 8% 5%; display: flex; flex-direction: column; justify-content: center; gap: .38em; padding: 8%; background: #e0e5c5; transform: rotate(6deg); border: 1px solid #c0cea8; box-shadow: 10px 18px 28px #071b1570; transition: transform .25s ease; }
.envelope-flap { display: block; position: absolute; inset: 0; background: #cad6af; clip-path: polygon(0 0, 100% 0, 50% 40%); transition: transform .35s ease; transform-origin: top center; }
.envelope-label, .cover-letter > span:first-child { position: relative; letter-spacing: .15em; font-weight: 800; font-size: .61em; }
.envelope strong { font: italic 700 2em/.96 var(--serif); }
.envelope i { font-size: .71em; }
.cover-stamp { position: absolute; top: 10%; right: 7%; display: grid; place-items: center; width: 16%; aspect-ratio: 1; background: #bfce92; outline: 2px dashed var(--forest); outline-offset: -5px; font: 700 1em var(--serif); }
.cover-letter { position: absolute; z-index: 1; inset: 21% 20% 9% 12%; background: #f9f6e7; border: 1px solid #d5d9bf; transform: rotate(-7deg); padding: 7%; box-shadow: 10px 14px 25px #071b1552; display: flex; flex-direction: column; gap: .45em; opacity: 0; transition: transform .45s cubic-bezier(.2,.7,.35,1), opacity .18s ease; }
.cover-letter i { font: italic 1.5em/1.02 var(--serif); }
.ink-lines { flex: 1; background: repeating-linear-gradient(transparent 0 19%, #b5c4a8 20% 21%, transparent 23% 26%); opacity: .65; }
.postmark { position: absolute; z-index: 3; top: 12%; right: 3%; width: 22%; aspect-ratio: 1; display: grid; align-content: center; justify-content: center; text-align: center; color: var(--lime); background: var(--forest); border: 2px double var(--lime); outline: 1px solid var(--lime); outline-offset: 4px; border-radius: 50%; transform: rotate(11deg); font: 800 .69em/1.02 var(--body); letter-spacing: .015em; }
.postmark span { font-size: .66em; letter-spacing: .13em; margin-top: .38em; }
.cover-art:hover .envelope { transform: rotate(3deg) translateY(-4px); }
.cover-art[aria-expanded="true"] .envelope-flap { transform: scaleY(-.62); }
.cover-art[aria-expanded="true"] .cover-letter { transform: translateY(-48%) rotate(-10deg); opacity: 1; }
.envelope-instruction { display: block; position: absolute; inset: auto 0 0; color: var(--lime); font-size: clamp(.84rem, 1.12vw, 1.15rem); font-weight: 750; text-align: center; letter-spacing: .025em; }
.envelope-instruction span { margin-left: .35em; }

.film { background: #142a2c; border-color: #142a2c; color: var(--paper); }
.film .eyebrow { color: var(--lime); }
.film .slide-heading h2 { font-size: clamp(2.2rem, 4.65vw, 5.75rem); }
.video-layout { display: grid; grid-template-columns: minmax(0, 2.75fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; }
.film-stage { display: grid; justify-items: center; align-items: center; width: 100%; aspect-ratio: 16/9; max-height: 51vh; min-width: 0; background: #0a191a; border-radius: 10px; overflow: hidden; }
video, .ted-frame { display: block; width: 100%; height: 100%; max-height: 51vh; }
.ted-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.ted-poster { display: grid; justify-items: center; align-content: center; gap: clamp(1rem, 4vh, 3rem); width: 100%; height: 100%; background: radial-gradient(ellipse at 53% 5%, #315651, #0d2022 76%); padding: .9rem; }
.habit-loop { display: flex; align-items: center; justify-content: center; gap: .5em; color: #e6edb0; font: 500 clamp(1rem, 2.4vw, 2.9rem)/1.03 var(--serif); }
.habit-loop span:nth-child(odd) { border: 1px solid #809675; border-radius: 50%; background: #213e39; color: #fff9e8; display: grid; place-items: center; width: 4.35em; aspect-ratio: 1; text-align: center; }
.film-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .58rem; }
.film-actions a { display: inline-flex; align-items: center; text-decoration: none; }
.film-actions a:hover { background: #edf5c2; }
.video-question, .film-prompts { display: flex; flex-direction: column; align-items: flex-start; gap: .6em; }
.viewing-question { font: italic clamp(1.38rem, 2.66vw, 3.25rem)/1.12 var(--serif); letter-spacing: -.035em; }
.film-link, .film .text-button { color: #e4ecbb; font-weight: 700; font-size: clamp(.9rem, 1.1vw, 1.24rem); text-underline-offset: .22em; }
.film .text-button { padding: .2em 0; }
.film .outline { border-color: #8fa795; color: var(--paper); }
.film .outline:hover { background: #27453d; }
.film :focus-visible { outline-color: var(--lime); }
.route { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(1rem, 4vw, 4.5rem); color: #35291a; border-color: #cab279; background: linear-gradient(128deg, #faedc9, #efd69e); }
.route .lead, .route .eyebrow { color: #60451f; }
.reading-instruction { max-width: 33ch; border-top: 2px solid #a77935; margin-top: .55em; padding-top: .65em; font-size: clamp(1rem, 1.5vw, 1.75rem); font-weight: 700; }
.four-steps { position: relative; display: grid; gap: clamp(.28rem, 1.15vh, .8rem); list-style: none; margin: 0; padding: 0; }
.four-steps::before { content: ""; position: absolute; inset: 2em auto 2em clamp(1rem, 1.7vw, 1.95rem); width: 2px; background: #835b27; }
.four-steps li { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(.65rem, 1.3vw, 1.4rem); padding: .25em .25em .25em 0; }
.four-steps span { display: grid; place-items: center; width: clamp(2rem, 3.4vw, 3.9rem); aspect-ratio: 1; color: #fff8e7; background: #705022; border-radius: 50%; box-shadow: 0 0 0 4px #f6e3b7; font-weight: 800; }
.four-steps li > div { background: #fff8e6; padding: .38em .78em .53em; border: 1px solid #baa274; border-radius: 2px 10px 10px 2px; }
.four-steps h3 { font: 700 clamp(1.35rem, 2.6vw, 3.15rem)/1.1 var(--serif); letter-spacing: -.046em; }
.four-steps p { font-size: clamp(.95rem, 1.5vw, 1.72rem); }

.reader, .structure-example { border: 1px solid var(--line); background: var(--card); border-radius: 9px; padding: clamp(.8rem, 2vw, 2.1rem); box-shadow: 0 4px 0 #bac7ad3b; }
.reading { background: #f3e8d3; }
.reading .reader { border-top: 5px solid #b48b47; border-radius: 4px 4px 9px 9px; }
.reading-george { background: #e1ebef; border-color: #b8c8d3; }
.reading-george .slide-heading .eyebrow { color: #435d75; }
.reading-george .reader { border-top-color: #4f6d8b; }
.reader { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .33fr); gap: .6rem 1rem; }
.reader > .reader-meta, .reader > .reader-controls { grid-column: 1 / -1; }
.reader-aside { background: #f2edda; border-left: 3px solid #be9d59; border-radius: 0 6px 6px 0; padding: .65rem .75rem; align-self: start; min-width: 0; }
.reading-george .reader-aside { background: #30475e; color: #fbf6e8; border-left-color: #a8c7db; }
.reading-george .reader-aside .eyebrow { color: #c8dee9; }
.reader-aside > p:not(.eyebrow) { font: 700 clamp(1rem, 1.56vw, 1.68rem)/1.24 var(--serif); margin-top: .38em; }
.reader-aside .term { display: block; margin: .45em 0 0; font-size: clamp(.8rem, 1.1vw, 1.2rem); }
.reader-meta { display: flex; align-items: center; justify-content: space-between; gap: .65rem; color: var(--muted); }
.reader-pager { display: flex; gap: .35rem; }
.reader-pager button { border: 1px solid var(--line); min-width: 38px; min-height: 38px; background: var(--paper); border-radius: 5px; font-weight: 750; }
.reader-pager button[aria-current="true"] { background: var(--forest); color: var(--paper); border-color: var(--forest); }
.letter-text { font: 400 clamp(1.04rem, min(2.03vw, 3.5vh), 2.35rem)/1.34 var(--serif); min-height: 8em; }
.letter-body { max-width: 75ch; }
.letter-part { color: var(--muted); font-style: italic; }
.letter-part:last-child { margin-top: .38em; }
.reader-controls { flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: .65rem; }
.reader-controls .tool { min-height: 38px; }
.term { background: #e9efd9; color: var(--forest); padding: .22em .32em; border-radius: 3px; }
mark { color: var(--ink); background: #e0ee9c; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.compare { background: #22334d; color: #fff8e8; border-color: #22334d; }
.compare .slide-heading .eyebrow { color: #f1cb83; }
.comparison { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; border: 1px solid #9bacbd; color: #20334e; background: var(--card); border-radius: 12px; overflow: hidden; font-size: clamp(.82rem, 1.46vw, 1.6rem); }
.comparison thead th { text-align: left; background: #3a516e; color: #fff8e8; padding: .58em .72em; }
.comparison th:first-child { width: 17%; }
.comparison tbody th, .comparison td { text-align: left; padding: .36em .58em; border-top: 1px solid #aebbc8; vertical-align: middle; }
.comparison tbody th { background: #e5eaf0; }
.comparison td + td { border-left: 1px solid #aebbc8; }
.reveal { border: 1px dashed #8599ab; border-radius: 5px; background: #f5f5ee; color: #20334e; min-height: 39px; padding: .34em .55em; width: 100%; text-align: left; font-weight: 700; }
.reveal:hover { background: #e3ebf0; }
.reveal.revealed { border-color: #8198ad; border-style: solid; background: #e0eaf2; font-weight: 550; }
.evidence-label { display: inline-block; color: #3f5c73; font-size: .73em; font-weight: 800; margin-left: .25em; white-space: nowrap; }

.game, .structure, .write-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 2vw, 2rem); }
.sorting { background: #e1ebe2; border-color: #bccbbe; }
.game { grid-template-columns: .82fr 1.18fr; }
.bins { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.bin { min-height: 220px; padding: .53rem; border: 1px solid #9cac9c; border-bottom-width: 7px; border-radius: 9px 9px 14px 14px; background: #eae4d4; box-shadow: inset 0 2px 8px #394c4030; }
.bin:nth-child(2) { background: #cfded3; }
.bin-target { display: flex; width: 100%; align-items: center; justify-content: space-between; border: 1px dashed #83977a; border-radius: 6px; min-height: 54px; background: var(--card); color: var(--forest); font: 700 clamp(1.05rem, 2.06vw, 2.38rem)/1.05 var(--serif); letter-spacing: -.04em; padding: .35em .45em; text-align: left; }
.bin-target:hover:not(:disabled) { background: var(--lime); border-style: solid; }
.bin-target:disabled { opacity: 1; color: var(--muted); }
.bin ul { list-style: none; padding: 0; margin: .45em 0 0; font-size: clamp(.86rem, 1.37vw, 1.45rem); }
.bin li { position: relative; z-index: 1; background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: .35em .45em; margin-bottom: .38em; }
.game-panel { padding: .7rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px; display: grid; align-content: start; gap: .57em; }
.game-card { background: var(--forest); border-radius: 6px; color: var(--paper); padding: .7em .9em; }
.game-card .eyebrow { color: var(--lime); }
.game-card.is-sorted { background: #3f5f50; }
#card-text { font: 500 clamp(1.4rem, 2.7vw, 3.2rem)/1.09 var(--serif); margin-top: .16em; }
.game-feedback, .choice-feedback { font-size: clamp(1rem, 1.64vw, 1.8rem); min-height: 1.4em; }
.game-feedback[data-state="retry"], .choice-feedback[data-state="retry"] { color: var(--rust); }
.text-button { background: transparent; border: 0; text-decoration: underline; justify-self: start; font-weight: 750; padding: .5em .25em; }

.structure { grid-template-columns: .85fr 1.35fr; }
.structure-slide { background: #faf4e9; border-color: #d5baa9; }
.structure-slide .slide-heading .eyebrow { color: #8b422c; }
.structure-list { display: grid; align-content: start; gap: .40em; }
.structure-list div { display: flex; align-items: center; gap: .7em; padding: .46em .62em; background: #efe4d9; border-radius: 6px; font-size: clamp(.93rem, 1.7vw, 1.85rem); }
.structure-list strong { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; border: 1px solid #ab7560; color: #8b422c; background: #fff9f0; flex: none; }
.structure-example { padding: clamp(.6rem, 1.5vw, 1.6rem); border-color: #cbb2a0; box-shadow: 4px 4px 0 #decabb; }
.structure-example blockquote { position: relative; margin-top: .54em; padding-left: 2em; font: 400 clamp(1.02rem, 1.65vw, 1.85rem)/1.3 var(--serif); }
.margin-letter { position: absolute; left: 0; top: 0; width: 1.55em; height: 1.55em; display: grid; place-items: center; visibility: hidden; border: 1px solid #ab7560; border-radius: 50%; color: #8b422c; font: 800 .82em var(--body); }
.structure-example:has(details[open]) .margin-letter { visibility: visible; }
.structure-example:has(details[open]) .editor-mark { text-decoration: underline wavy #914c37; text-underline-offset: .24em; }
.structure:has(details[open]) .structure-list div:nth-child(-n+2) { background: #efd6c5; }
details { margin-top: .55em; border-top: 1px solid var(--line); padding-top: .45em; font-size: clamp(.95rem, 1.36vw, 1.45rem); }
summary { font-weight: 750; }
details p { margin-top: .28em; }

.revise { background: #ece7f0; border-color: #c5b8cc; }
.revise .slide-heading .eyebrow, .revise .lead { color: #514762; }
.revision-layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(.9rem, 3vw, 3.3rem); }
.draft-line { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .7em; min-height: 10em; color: #fff8f0; background: #41344e; border-radius: 9px; padding: .85em 1.25em; }
.draft-line::after { content: "→"; position: absolute; inset: 50% -.6em auto auto; transform: translateY(-50%); background: #d9cbe6; color: #3a2d48; border-radius: 50%; width: 1.25em; text-align: center; line-height: 1.25; font-size: clamp(1.3rem, 2.7vw, 3rem); }
.draft-line span { font-weight: 800; letter-spacing: .1em; font-size: clamp(.75rem, 1.02vw, 1.1rem); color: #e3d2ed; }
.draft-line p { max-width: 12ch; font: italic clamp(1.4rem, 3.25vw, 3.8rem)/1.07 var(--serif); }
.revision-options { display: flex; flex-direction: column; justify-content: center; gap: .7rem; }
.choices { display: grid; gap: .55rem; }
.choice { display: flex; align-items: center; gap: .6em; padding: .48em .65em; text-align: left; border-radius: 7px; border: 1px solid #b9aac7; background: #fffcfa; font-size: clamp(1rem, 1.75vw, 2rem); }
.choice:hover { background: #f1e8f5; }
.choice > strong { display: grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 4px; background: #e7daed; color: #41344e; flex: none; }
.choice.correct { border-color: #527749; background: #edf3dd; }
.choice.correct > strong { color: var(--paper); background: var(--forest); }
.choice.correct #time-phrase { background: #deed91; }
.choice.correct #action-phrase { background: #d5e5cf; text-decoration: underline; text-underline-offset: .18em; }

.closing { background: radial-gradient(ellipse at 90% 3%, #edf2dc, #d8e6d8 85%); border-color: #b5c8b8; }
.write-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.write-prompts { border: 1px solid var(--line); border-radius: 5px; background: var(--card); padding: .72em 1.25em; border-left: 6px double #9eb69a; box-shadow: 6px 6px 0 #bed0bd; }
.write-salutation { font: italic 500 clamp(1.28rem, 2vw, 2.25rem)/1.08 var(--serif); margin-bottom: .34em; }
.write-prompts p { display: grid; grid-template-columns: .85fr 1.2fr; gap: .5em; font-size: clamp(.96rem, 1.57vw, 1.8rem); padding: .46em .2em; border-bottom: 1px solid var(--line); }
.write-prompts p:last-child { border: 0; }
.write-task { border-radius: 8px; background: var(--deep); color: #fff9eb; padding: .85em 1em; font-size: clamp(1rem, 1.55vw, 1.77rem); }
.write-task h3 { font: 700 1.31em/1.12 var(--serif); margin-bottom: .25em; letter-spacing: -.03em; }
.write-task .button { margin: .55em 0; }
.write-task .outline { border-color: #c6d3ad; color: #fff9eb; }
.write-task .outline:hover { background: #385749; }
.homework { font-size: .84em; }
.homework strong { font-size: .83em; letter-spacing: .06em; margin-right: .4em; }

.controlbar { min-height: 62px; }
.progress { flex: 1; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: center; gap: .25rem; }
.progress button { border: 1px solid transparent; border-radius: 6px; padding: .25em .1em; background: transparent; min-height: 43px; font-size: clamp(.84rem, 1.08vw, 1.16rem); font-weight: 750; white-space: nowrap; }
.progress button .step-number { display: none; }
.progress button:hover { background: #e3dfd0; }
.progress button[aria-current="step"] { color: var(--forest); background: #dbe5c9; border-color: #a4b495; }
.arrow { min-width: 46px; font-size: 1.16rem; line-height: 1; }
.page-number { min-width: 3.8rem; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

dialog { border: 1px solid var(--line); border-radius: 12px; padding: clamp(.8rem, 3vw, 2.3rem); width: min(79rem, 90vw); max-height: 86vh; color: var(--ink); background: var(--card); box-shadow: 0 24px 70px #00241962; }
dialog::backdrop { background: #082b23b8; }
dialog[data-kind="source"] { position: fixed; inset: 5vh 2.4vw 5vh auto; margin: 0; width: min(55rem, 58vw); max-height: 90vh; border-left: 5px solid #758e68; }
dialog[data-kind="source"]::backdrop { background: #082b2358; }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--line); padding-bottom: .65em; margin-bottom: .65em; }
.dialog-header h2 { font-size: clamp(1.65rem, 3.5vw, 4rem); }
.dialog-letter { padding: .38em .65em; margin-bottom: .55em; border-left: 4px solid var(--line); background: var(--paper); font: 400 clamp(1.12rem, 2.15vw, 2.36rem)/1.43 var(--serif); }
.dialog-letter .eyebrow { display: block; font-family: var(--body); color: var(--muted); margin-bottom: .22em; }
.transcript { display: grid; gap: .4em; font-size: clamp(.94rem, 1.4vw, 1.62rem); }
.transcript p { padding: .3em .5em; background: var(--paper); }
.transcript span { display: block; color: var(--muted); }
.contents-list { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.contents-list button { background: var(--paper); text-align: left; border: 1px solid var(--line); border-radius: 6px; padding: .58em; font-size: clamp(.86rem, 1.6vw, 1.7rem); }
.contents-list button:hover, .contents-list button[aria-current="step"] { background: var(--wash); }

@media (min-width: 851px) and (max-height: 800px) {
  .slide { padding-block: 1.15rem; gap: .87rem; }
  .reader { padding-block: .78rem; }
}
@media (max-width: 850px) {
  .course, .progress button .step-name { display: none; }
  .progress button .step-number { display: inline; }
  .controlbar { justify-content: space-between; }
  .letter-text { min-height: 0; }
  .cover-art { width: 100%; }
  dialog[data-kind="source"] { inset: 5vh 3vw; width: 94vw; }
}
@media (max-width: 650px) {
  .slide, .cover { padding: 1.2rem .8rem; }
  .cover { grid-template-columns: 1fr; }
  .cover-art { width: min(80%, 300px); justify-self: center; }
  .video-layout, .game, .structure, .write-layout, .reader, .route, .revision-layout { grid-template-columns: 1fr; }
  .video-question, .film-prompts { gap: .4em; }
  .habit-loop { font-size: clamp(.72rem, 3.8vw, 1.25rem); }
  .draft-line { min-height: 5.2em; }
  .draft-line::after { content: none; }
  .bin { min-height: 108px; }
  .topbar, .controlbar { gap: .35rem; padding: .45rem .65rem; }
  .tools, .nav { gap: .3rem; }
  .tool { padding: .35rem .48rem; }
  .controlbar { flex-wrap: wrap; }
  .progress { gap: .1rem; }
  .progress button { min-width: 0; }
  .arrow { min-width: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .slide.entering { animation: none; }
  .cover-art * { transition: none; }
}