:root { --plum:#302537; --citron:#ddf58b; --paper:#f8f5ef; --lilac:#ece6f0; --muted:#655d68; --rule:#d5ced7; --red:#af351f; --rose:#f8ddd3; --soft:#d6cadf; --player-height:68px; --header-height:64px; --subtitle-height:0px; color-scheme:light; }
* { box-sizing:border-box; }
html { scroll-padding-top:calc(var(--header-height) + 20px); scroll-padding-bottom:calc(var(--player-height) + var(--subtitle-height) + 24px); scrollbar-color:var(--muted) var(--paper); }
body { margin:0; background:var(--paper); color:var(--plum); font:17px/1.5 Arial,Helvetica,sans-serif; }
body.has-player { padding-bottom:calc(var(--player-height) + var(--subtitle-height) + 30px); }
[hidden] { display:none !important; }
body:not(.js) [data-start],body:not(.js) [data-open] { display:none; }
::selection { color:var(--plum); background:var(--citron); }
:focus-visible { outline:2px solid var(--plum); outline-offset:4px; }
.cover :focus-visible,.player :focus-visible { outline-color:var(--citron); }
button,input,select { font:inherit; accent-color:var(--plum); }
button,a,summary,input,select { -webkit-tap-highlight-color:transparent; }
button,summary,select { cursor:pointer; }
button,a,select { touch-action:manipulation; }
button { color:inherit; border:0; background:none; }
a { color:inherit; text-underline-offset:5px; }
a:hover,.underlined:hover { text-decoration-thickness:2px; }
button:disabled { cursor:default; opacity:.45; }
button,summary,select { min-height:44px; }
svg { display:block; }
h1,h2,h3,p,figure { margin:0; }
h1,h2 { font-family:'Bitstream Charter','Charter',Georgia,serif; font-weight:400; line-height:1.08; }
h2 { font-size:clamp(30px,3.5vw,50px); }
h3 { font-size:17px; }
.wrap { width:min(1314px,calc(100% - 96px)); margin-inline:auto; }
.small { font-size:14px; line-height:1.6; color:var(--muted); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:fixed; top:10px; left:10px; padding:14px 20px; background:var(--citron); z-index:100; transform:translateY(-200%); }
.skip:focus { transform:none; }
.prototype-note { padding:9px 24px; display:flex; justify-content:center; gap:24px; font-size:14px; background:var(--lilac); }
.prototype-note span { color:var(--muted); }
.cover { background:var(--plum); color:var(--paper); }
.wordmark { text-decoration:none; font:28px 'Bitstream Charter',Georgia,serif; }
.hero { display:grid; grid-template-columns:1.6fr 1fr; gap:64px 80px; padding-block:80px 48px; align-items:center; }
.hero h1 { font-size:clamp(60px,7.5vw,96px); letter-spacing:-.025em; color:var(--citron); }
.hero h2 { margin-top:35px; font:700 26px/1.4 Arial,sans-serif; }
.intro { max-width:540px; font-size:23px; margin-top:20px; }
.byline { font-size:14px; color:var(--soft); margin:52px 0 30px; }
.hero-actions,.actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 20px; text-decoration:none; background:var(--plum); color:var(--paper); font-weight:700; font-size:15px; min-height:50px; }
.button:hover { background:#48364f; }
.button.light { color:var(--plum); background:var(--citron); }
.button.light:hover { background:#e9ffa6; }
.button span { font-size:23px; font-weight:400; line-height:1; }
.text-action { display:flex; gap:14px; align-items:center; padding:10px 0; }
.text-action svg { width:20px; fill:var(--citron); }
.text-action:hover { text-decoration:underline; }
.cover-chart { width:min(360px,100%); justify-self:end; }
.cover-chart figcaption { margin-bottom:22px; font-size:19px; }
.cover-chart ol { list-style:none; margin:0; padding:0; }
.cover-chart li { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; height:45px; padding:10px 16px; color:var(--plum); background:var(--citron); position:relative; }
.cover-chart li span { font:14px 'Liberation Mono',monospace; }
.cover-chart .late { background:#eab5a6; }
.cover-chart li:nth-child(4)::after { content:''; position:absolute; bottom:-5px; height:2px; background:#f6b49e; left:-14px; right:-14px; }
.cover-deadline { color:#f6b49e; font:14px 'Liberation Mono',monospace; margin:22px 0; text-align:right; }
.cover-chart .small { color:var(--soft); font-size:14px; }
.hero-conclusion { grid-column:1/-1; display:flex; justify-content:space-between; border-top:1px solid #66596d; padding-top:36px; gap:20px; font:clamp(22px,2.6vw,36px)/1.3 'Bitstream Charter',Georgia,serif; }
.hero-conclusion p:last-child { color:var(--citron); }
.case-intro { display:grid; grid-template-columns:1.4fr 1fr; align-items:center; gap:90px; padding-block:105px; }
.case-intro p:not(.case-pull p) { max-width:650px; color:var(--muted); font-size:21px; margin-top:25px; }
.case-intro .actions { margin-top:35px; }
.underlined { text-decoration:underline; text-underline-offset:5px; padding:10px 0; font-size:15px; }
.case-pull { border-left:1px solid var(--rule); padding-left:60px; }
.case-pull p { font:clamp(38px,4vw,60px)/1.13 'Bitstream Charter',Georgia,serif; margin-bottom:25px; }
.case-pull>span { font-size:15px; color:var(--muted); }
.canvas-section { background:var(--lilac); padding-block:65px; }
.canvas-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:45px; }
.canvas-grid>div { border-top:1px solid #b6abbd; padding-top:20px; }
.canvas-grid span { font:48px 'Bitstream Charter',Georgia,serif; }
.canvas-grid h3 { margin-top:15px; }
.canvas-grid p { font-size:16px; margin-top:10px; color:var(--muted); }
.canvas-section .small { margin-top:40px; }
.mini-bar { display:flex; height:48px; margin:30px 0 20px; }
.mini-bar span:first-child { flex:200; background:var(--lilac); }
.mini-bar span:last-child { flex:340; background:var(--citron); }
.home-footer { background:var(--citron); padding:60px 0; }
.home-footer .footer-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:28px; }
.home-footer .footer-actions>a { min-height:44px; display:inline-flex; align-items:center; }
.home-footer .small { margin-top:35px; color:var(--plum); }
.source-page { max-width:850px; padding-block:35px 80px; }
.source-page h1 { font-size:48px; margin:32px 0 20px; }
.source-page h2 { font-size:32px; margin:45px 0 20px; }
.source-page p,.source-page ul { margin-block:20px; }
.source-page table { border-collapse:collapse; width:100%; font-size:15px; }
.source-table { max-width:100%; overflow-x:auto; margin-block:20px; }
.source-table table { min-width:400px; }
.source-page th,.source-page td { padding:14px 8px; border-bottom:1px solid var(--rule); text-align:left; }
.source-page code { overflow-wrap:anywhere; font-size:14px; }
/* Persistent navigation and the compact podcast transport. */
.site-header { position:sticky; top:0; z-index:30; background:var(--paper); border-bottom:1px solid var(--rule); }
.site-nav { display:flex; align-items:center; justify-content:space-between; gap:32px; min-height:var(--header-height); }
.site-nav nav { display:flex; align-items:center; gap:28px; font-size:14px; }
.site-nav nav a { display:flex; align-items:center; min-height:var(--header-height); text-decoration:none; border-bottom:2px solid transparent; }
.site-nav nav a[aria-current] { border-color:var(--plum); font-weight:700; }
.site-nav nav a:hover { border-color:var(--muted); }
.canvas-section .button { margin-top:24px; }
.player { position:fixed; bottom:0; inset-inline:0; padding-bottom:env(safe-area-inset-bottom,0px); color:var(--paper); background:var(--plum); z-index:50; }
.player-inner { position:relative; display:flex; align-items:center; gap:22px; min-height:68px; padding-block:8px; }
.play-button { display:grid; place-items:center; width:44px; height:44px; flex:none; background:var(--citron); color:var(--plum); border-radius:50%; }
.play-button svg { width:21px; height:21px; fill:currentColor; }
.play-button:hover { background:#e9ffa6; }
.now-playing { flex:1; min-width:0; display:flex; flex-direction:column; font-size:13px; }
.now-playing strong { font-weight:400; color:var(--soft); }
.now-playing span { max-width:38ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-time { flex:none; width:11ch; font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.player-guide svg { display:none; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; }
.player-guide { padding:0 2px; font-size:14px; white-space:nowrap; text-decoration:underline; text-underline-offset:5px; }
.speed-label select { padding:0 4px; color:var(--paper); background:var(--plum); border:0; font-size:14px; min-width:56px; }
.subtitle-toggle { font-size:13px; font-weight:700; width:44px; height:44px; border:1px solid #91849a; }
.subtitle-toggle[aria-pressed=true] { background:var(--citron); color:var(--plum); border-color:var(--citron); }
#chapters summary { display:flex; align-items:center; gap:10px; min-height:44px; list-style:none; font-size:14px; font-weight:400; }
#chapters summary::-webkit-details-marker { display:none; }
#chapters svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; }
#chapters[open] summary { color:var(--citron); }
.passage-menu { position:absolute; bottom:calc(100% + 12px); right:0; width:min(380px,calc(100vw - 32px)); padding:22px; color:var(--plum); background:var(--paper); border:1px solid var(--rule); box-shadow:0 12px 32px #30253726; }
.passage-menu label { display:block; margin-bottom:14px; font-size:15px; font-weight:700; }
.passage-menu select { max-width:100%; width:100%; border:1px solid var(--rule); padding:8px; color:var(--plum); background:var(--paper); font-size:14px; }
.passage-menu p,.passage-menu>a { font-size:13px; }
.passage-menu>a { display:inline-flex; align-items:center; min-height:44px; }
.seek-row { display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; margin-top:10px; }
.seek-row input { height:44px; width:100%; cursor:pointer; }
.seek-row output { font-size:13px; font-variant-numeric:tabular-nums; }
.audio-status { position:relative; padding:16px 24px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; color:var(--red); background:var(--rose); }
.subtitles { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--player-height) + 16px); width:calc(100% - 32px); z-index:45; color:#fff; text-align:center; pointer-events:none; }
.subtitles p { margin:0; max-width:none; font:400 clamp(18px,1.6vw,24px)/1.5 Arial,Helvetica,sans-serif; }
.subtitle-line { display:table; white-space:pre; margin-inline:auto; padding:0 8px; background:#302537e8; }
/* The publication text is read from the immutable imported pages. */
.reader-view { --navy:#002855; --ink:#182c40; --muted:#506174; --rule:#cbd3db; display:grid; grid-template-columns:240px minmax(0,1fr); gap:54px; padding-block:36px 64px; color:var(--ink); }
#reader-contents { min-width:0; }
.reader-view .contents { position:sticky; top:calc(var(--header-height) + 24px); max-height:calc(100dvh - var(--header-height) - var(--player-height) - 48px); overflow:auto; padding-right:10px; font-size:13px; line-height:1.5; }
.reader-view .contents summary { color:var(--navy); }
#reader-section { display:none; }
.reader-view .toc ul { padding-left:16px; list-style:none; }
.reader-view .toc>ul { padding-left:0; }
.reader-view .toc li { margin-block:6px; }
.reader-view .toc a { display:block; padding:7px 8px; text-decoration:none; }
.reader-view .toc a[aria-current] { background:var(--citron); color:var(--navy); font-weight:700; }
.reader-view .toc a:hover { text-decoration:underline; }
#reader-content { min-width:0; }
.reader-view .document { min-width:0; font:17px/1.75 Arial,Helvetica,sans-serif; }
.reader-view .document>p,.reader-view .document>ul,.reader-view .document>ol,.reader-view .document>blockquote { max-width:76ch; }
.reader-view .document h1,.reader-view .document h2,.reader-view .document h3 { font-family:Georgia,'Times New Roman',serif; color:var(--navy); font-weight:400; line-height:1.2; overflow-wrap:anywhere; }
.reader-view .document h1 { font-size:clamp(35px,4vw,58px); max-width:22ch; margin-bottom:24px; letter-spacing:-.03em; }
.reader-view .document h2 { font-size:clamp(28px,2.7vw,40px); border-top:1px solid var(--rule); padding-top:16px; margin:56px 0 20px; }
.reader-view .document h3 { font-size:24px; margin:40px 0 16px; }
.reader-view .document h4 { font-size:17px; color:var(--navy); margin:32px 0 12px; }
.reader-view .document p { margin-bottom:20px; }
.reader-view .document a { color:var(--navy); overflow-wrap:anywhere; }
.reader-view .document [id] { scroll-margin-top:calc(var(--header-height) + 24px); }
.reader-view .document li { margin-block:7px; }
.reader-view .edition { display:flex; flex-wrap:wrap; gap:8px 32px; padding-bottom:12px; margin-bottom:24px; border-bottom:1px solid var(--rule); color:var(--muted); font-size:12px; }
.reader-view .table-scroll,.reader-view .canvas-scroll { overflow-x:auto; max-width:100%; margin-block:24px; }
.reader-view table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; line-height:1.5; }
.reader-view th { background:var(--navy); color:var(--paper); font-weight:400; }
.reader-view th,.reader-view td { padding:11px 13px; border:1px solid var(--rule); vertical-align:top; min-width:128px; }
.reader-view tbody tr:nth-child(even) { background:#eef1f3; }
.reader-view .resource-links { display:flex; flex-wrap:wrap; gap:12px 24px; }
.reader-view .resource-links a { min-height:44px; display:flex; align-items:center; }
/* The full imported form stays intact; the lesson adds focus and explanation. */
.cv-page { min-width:760px; font:13px/1.4 Arial,Helvetica,sans-serif; padding:16px; }
.cv-caption { display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; border-bottom:2px solid currentColor; padding-bottom:10px; }
.cv-caption>span { font:24px/1.2 Georgia,serif; flex:1; }
.cv-caption>em { font-size:12px; }
.cv-panel { border:1px solid var(--rule); padding:10px; margin-top:10px; }
.cv-panel h4 { display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; margin:0 0 8px; font-size:15px; }
.cv-panel h4 b { border-bottom:3px solid var(--citron); }
.cv-panel h4 span { font-size:12px; font-weight:400; }
.cv-middle { display:grid; grid-template-columns:1.45fr 1fr; gap:10px; }
.cv-pair,.cv-check-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cv-entry { border-bottom:1px solid var(--rule); padding:6px 0; min-height:32px; }
.cv-tall { min-height:48px; }
.cv-note { font-size:12px; margin:8px 0 0; }
.cv-disposition { padding:8px; background:var(--lilac); font-weight:700; margin:8px 0; }
.cv-check-grid>div { padding:8px; border:1px solid var(--rule); }
.cv-check-grid strong,.cv-check-grid span { display:block; }
.cv-check-grid span { font-size:12px; margin-top:5px; }
.cv-outcome { border-block:2px solid currentColor; padding:8px 0; margin:8px 0; }
.cv-input { font-size:12px; border-collapse:collapse; width:100%; table-layout:fixed; text-align:left; }
.cv-input th,.cv-input td { border:1px solid var(--rule); padding:6px; min-width:0; }
.cv-input th { color:var(--paper); background:var(--plum); font-weight:400; }
.cv-input td:empty { height:35px; }
.canvas-journey { position:relative; height:calc(300svh + 100svh - var(--header-height) - var(--player-height)); }
.canvas-stage { position:sticky; top:var(--header-height); height:calc(100svh - var(--header-height) - var(--player-height) - var(--subtitle-height)); z-index:1; display:flex; flex-direction:column; background:var(--paper); padding-block:12px; }
.canvas-track { position:absolute; inset:0; pointer-events:none; }
.canvas-track>div { height:75svh; }
.canvas-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:12px; border-bottom:1px solid var(--rule); }
.example-switch { display:flex; flex-wrap:wrap; gap:4px; }
.example-switch button { font-size:14px; padding:8px 16px; }
.example-switch button[aria-pressed=true] { color:var(--paper); background:var(--plum); }
#canvas-steps { display:flex; gap:5px; }
#canvas-steps button { font:23px Georgia,serif; min-width:44px; padding:4px 12px; }
#canvas-steps button span { display:block; font-family:Arial,Helvetica,sans-serif; font-size:12px; line-height:1.5; margin-top:2px; }
#canvas-steps button[aria-current] { background:var(--citron); }
.canvas-workspace { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); gap:clamp(32px,6vw,88px); align-items:center; flex:1; min-height:0; padding-block:24px; }
.canvas-preview { min-width:0; }
.canvas-fragment h3 { font-size:16px; font-weight:400; color:var(--muted); margin:0 0 16px; }
.canvas-field { display:block; width:100%; text-align:left; border-top:1px solid var(--rule); padding:16px; background:transparent; }
.canvas-field:last-child { border-bottom:1px solid var(--rule); }
.canvas-field[aria-pressed=true] { background:var(--lilac); }
.canvas-field:hover { background:var(--lilac); }
.canvas-field-label { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.canvas-field-value { display:block; font-size:clamp(18px,1.7vw,24px); line-height:1.35; }
.canvas-coach { display:flex; flex-direction:column; min-width:0; }
.canvas-coach h2 { font-size:clamp(30px,3vw,42px); max-width:15ch; text-wrap:balance; }
.coach-example { font-size:17px; line-height:1.6; margin-top:24px; min-height:9.6em; max-width:38ch; }
.coach-actions { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:16px; }
.coach-actions button { font-size:14px; padding:0; }
.coach-actions button:last-child { font-weight:700; }
.canvas-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; border-top:1px solid var(--rule); flex:none; }
.canvas-footer>a { display:inline-flex; align-items:center; min-height:44px; font-size:13px; }
.canvas-footnote { font-size:12px; }
.canvas-end { padding-block:70px; display:flex; flex-wrap:wrap; gap:24px; align-items:center; }
.canvas-end h2,.canvas-end>p { width:100%; max-width:72ch; }
@media (max-width:1100px) {
  .wrap { width:calc(100% - 64px); }
  .player-inner { gap:16px; }
  .hero { gap:40px; }
  .canvas-workspace { gap:32px; }
}
@media (max-width:1000px) {
  .reader-view { display:block; padding-top:0; }
  #reader-contents { position:sticky; top:var(--header-height); z-index:24; background:var(--paper); border-bottom:1px solid var(--rule); margin-bottom:24px; }
  .reader-view .contents { position:static; padding-right:0; max-height:45dvh; }
  .reader-view .contents summary { display:flex; align-items:center; gap:20px; }
  #reader-section { display:block; min-width:0; flex:1; font-weight:400; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; }
  .reader-view .toc { padding-bottom:16px; }
  .reader-view .document [id] { scroll-margin-top:calc(var(--header-height) + 74px); }
}
@media (max-width:760px) {
  :root { --header-height:58px; }
  .wrap { width:calc(100% - 32px); }
  .site-nav { gap:16px; }
  .site-nav .wordmark { font-size:23px; }
  .site-nav nav { gap:14px; font-size:12px; min-width:0; }
  .site-nav nav a { min-height:58px; }
  .site-nav nav a[data-route=home] { display:none; }
  .hero { display:block; padding-top:40px; }
  .hero h1 { font-size:clamp(46px,12vw,78px); }
  .hero h1 br { display:none; }
  .hero h2 { font-size:23px; margin-top:28px; }
  .intro { font-size:20px; }
  .byline { margin-top:30px; }
  .hero-actions { gap:20px; }
  .hero-actions .button { width:100%; }
  .cover-chart { width:100%; margin-top:40px; }
  .cover-chart li { height:36px; }
  .hero-conclusion { margin-top:36px; padding-top:24px; flex-direction:column; font-size:26px; gap:10px; }
  .case-intro { display:block; padding-block:52px; }
  .case-intro p:not(.case-pull p) { font-size:19px; }
  .case-pull { border-left:0; border-top:1px solid var(--rule); padding:25px 0 0; margin-top:35px; }
  .case-pull p { font-size:40px; }
  .canvas-section { padding-block:40px; }
  .canvas-grid { grid-template-columns:1fr 1fr; gap:28px 20px; margin-top:32px; }
  .canvas-grid h3,.canvas-grid p { font-size:15px; }
  .home-footer { padding-block:40px; }
  .player-inner { gap:4px; justify-content:space-between; min-height:60px; }
  .now-playing { display:none; }
  .player-time { width:5ch; font-size:12px; }
  .player-duration { display:none; }
  .player-guide { display:grid; place-items:center; width:44px; padding:0; flex:none; }
  .player-guide svg { display:block; }
  .player-guide>span { display:none; }
  #chapters summary { justify-content:center; width:44px; }
  #chapters summary>span { display:none; }
  .speed-label select { font-size:13px; min-width:50px; width:50px; padding:0; }
  .passage-menu { right:0; }
  .subtitle-toggle { flex:none; }
  .subtitles { bottom:calc(var(--player-height) + 12px); }
  .subtitles p { font-size:18px; }
  .canvas-stage { padding-block:6px; }
  .canvas-toolbar { display:block; padding-bottom:6px; }
  .example-switch { gap:4px; }
  .example-switch button { flex:1; font-size:13px; padding:6px 10px; }
  #canvas-steps { justify-content:space-between; margin-top:4px; }
  #canvas-steps button { flex:1; padding:2px 8px; font-size:21px; }
  #canvas-steps button span { font:12px/1.4 Arial,Helvetica,sans-serif; }
  .canvas-workspace { display:grid; grid-template-columns:1fr; grid-template-rows:auto auto minmax(64px,1fr) 44px; gap:10px; padding-block:12px 4px; align-content:center; align-items:start; }
  .canvas-preview { grid-row:2; }
  .canvas-fragment h3 { display:none; }
  .canvas-field { padding:8px 12px; }
  .canvas-field-label { font-size:12px; margin-bottom:3px; }
  .canvas-field-value { font-size:16px; line-height:1.3; }
  .canvas-coach,.coach-reading { display:contents; }
  .canvas-coach h2 { grid-row:1; font-size:26px; max-width:none; }
  .coach-example { grid-row:3; font-size:14px; line-height:1.45; min-height:0; max-width:none; margin:0; }
  .coach-actions { grid-row:4; margin:0; width:100%; }
  .canvas-footer { gap:10px; }
  .canvas-footer>a { font-size:12px; }
  .canvas-footnote { font-size:11px; line-height:1.4; max-width:none; }
  .canvas-end { padding-block:44px; }
  .reader-view .document { font-size:16px; line-height:1.75; }
  .reader-view .document h1 { font-size:36px; }
  .reader-view .document h2 { margin-top:40px; }
  .source-page h1 { font-size:38px; }
}
@media (max-width:360px) {
  .site-nav { gap:12px; }
  .site-nav nav { gap:10px; font-size:12px; }
  .site-nav .wordmark { font-size:21px; }
  .case-switch button { padding-inline:10px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}

.passage-menu :focus-visible { outline-color:var(--plum); }
.subtitles :focus-visible { outline-color:var(--citron); }

.coach-actions { flex:none; }

.reader-view .contents summary { min-width:0; }
.reader-view .document { max-width:100%; }

@media (max-width:1000px) {
  .reader-view .contents summary::after { content:""; display:block; flex:none; width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); margin:0 4px 4px; }
  .reader-view .contents[open] summary::after { transform:rotate(225deg); margin-bottom:0; }
}
.reader-view .document { overflow-wrap:anywhere; }
#chapters:not([open]) .passage-menu { display:none; }

/* Short phones keep the section controls and explanation beside captions. */
@media (max-width:760px) and (max-height:720px) {
  body[data-view=use].captions-on .canvas-workspace { grid-template-rows:auto auto minmax(84px,1fr); gap:8px; padding-top:8px; }
  body[data-view=use].captions-on .canvas-coach h2 { font-size:23px; }
  body[data-view=use].captions-on .canvas-field { padding-block:4px; }
  body[data-view=use].captions-on #canvas-steps button span { display:none; }
  body[data-view=use].captions-on .coach-actions { display:none; }

}

@media (max-width:380px) { .subtitles p { font-size:16px; } }