:root{color-scheme:light;--paper:#f4f0e7;--paper-light:#fbf8f1;--ink:#252b27;--ink-soft:#59615a;--ink-faint:#828980;--sage:#879689;--sage-dark:#627565;--terra:#bf826a;--rule:rgba(51,61,53,.13);font-family:"Noto Sans TC","PingFang TC",sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0;min-width:0;background:var(--paper);color:var(--ink)}button,a{font:inherit}button{color:inherit}a{color:inherit}.app-shell{max-width:1536px;min-height:100vh;margin:0 auto;padding:0 54px}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule)}.wordmark{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;letter-spacing:.15em}.wordmark-mark{width:27px;height:27px;display:grid;place-items:center;border:1px solid var(--sage-dark);border-radius:50%;color:var(--sage-dark);font-family:"Noto Serif TC",serif;font-size:15px}.topbar-note{font-family:"Noto Serif TC",serif;color:var(--ink-faint);font-size:13px;letter-spacing:.05em}.quiet-button,.text-button{border:0;background:transparent;cursor:pointer;color:var(--ink-soft)}.quiet-button{padding:9px 11px;border-radius:7px;font-size:12px;transition:background .2s,color .2s}.quiet-button:hover,.text-button:hover{background:rgba(122,139,124,.12);color:var(--ink)}button:focus-visible,a:focus-visible{outline:2px solid var(--sage-dark);outline-offset:3px}
.home-view{padding-top:61px}.hero-copy{max-width:680px;margin:0 auto 67px;text-align:center}.eyebrow{margin:0 0 15px;color:var(--sage-dark);font-size:10px;font-weight:600;letter-spacing:.22em}.hero-copy h1{margin:0;font-family:"Noto Serif TC",serif;font-size:clamp(36px,5vw,58px);font-weight:500;letter-spacing:.08em;line-height:1.25}.hero-copy h1 em{color:var(--sage-dark);font-style:normal}.hero-description{max-width:480px;margin:18px auto 22px;color:var(--ink-soft);font-size:14px;line-height:1.9;letter-spacing:.025em}.hero-meta{display:flex;justify-content:center;align-items:center;gap:8px;color:var(--ink-faint);font-size:11px;letter-spacing:.08em}.meta-dot{width:5px;height:5px;border-radius:50%;background:var(--terra)}.course-shelf{max-width:1190px;margin:0 auto}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:20px}.section-heading .eyebrow{margin-bottom:5px}.section-heading h2{margin:0;font-family:"Noto Serif TC",serif;font-size:20px;font-weight:600;letter-spacing:.04em}.section-count{padding-bottom:3px;color:var(--ink-faint);font-size:11px;letter-spacing:.12em}.section-count span{padding:0 5px;color:#b6b1a8}.course-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.course-card{position:relative;display:flex;min-height:284px;flex-direction:column;overflow:hidden;padding:15px;border:1px solid var(--rule);border-radius:10px;background:rgba(251,248,241,.67);transition:transform .24s,box-shadow .24s,border-color .24s}.course-card.is-ready{cursor:pointer}.course-card.is-ready:hover{transform:translateY(-4px);border-color:rgba(98,117,101,.35);box-shadow:0 14px 46px rgba(67,60,46,.09)}.course-card.is-planned{opacity:.71}.card-top{display:flex;align-items:center;justify-content:space-between}.card-number{color:#a7a398;font-family:Georgia,serif;font-size:12px;letter-spacing:.12em}.card-status{padding:5px 8px;border-radius:20px;background:#e7ece5;color:var(--sage-dark);font-size:9px;letter-spacing:.06em}.is-planned .card-status{background:#eee9df;color:#8c8679}.card-art{position:relative;display:grid;min-height:126px;place-items:center;margin:8px -2px;color:var(--sage-dark)}.card-art svg{width:142px;max-width:100%;height:116px;overflow:visible}.card-art .card-cup-art{display:block;width:100%;height:126px;max-width:100%;object-fit:contain}.art-paper{fill:#eeeadf;stroke:#788879;stroke-width:1.6;stroke-linejoin:round}.art-back{fill:#a9b4a5;stroke:#788879;stroke-width:1.4;stroke-linejoin:round}.art-line{fill:none;stroke:#9a9c8c;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:3 3}.art-accent{fill:none;stroke:#bd866e;stroke-width:1.7;stroke-linecap:round}.card-title{margin:0 0 4px;font-family:"Noto Serif TC",serif;font-size:16px;font-weight:600;letter-spacing:.035em}.card-subtitle{min-height:34px;margin:0 0 13px;color:var(--ink-faint);font-size:10px;line-height:1.65}.card-bottom{display:flex;align-items:end;justify-content:space-between;gap:8px;margin-top:auto;border-top:1px solid var(--rule);padding-top:10px}.card-skill{color:var(--ink-soft);font-size:9px;line-height:1.45}.card-skill small{display:block;margin-top:4px;color:var(--ink-faint);font-size:9px}.card-arrow{color:var(--sage-dark);font-size:18px}.is-planned .card-arrow{display:none}.home-footer{display:flex;justify-content:space-between;max-width:1190px;margin:47px auto 0;border-top:1px solid var(--rule);padding:15px 0 24px;color:var(--ink-faint);font-size:10px;letter-spacing:.04em}
.lesson-view{padding:27px 0 20px}.lesson-heading{display:flex;align-items:end;justify-content:space-between;max-width:1330px;margin:0 auto 19px}.breadcrumb{display:flex;gap:8px;align-items:center;margin-bottom:8px;color:var(--ink-faint);font-size:11px}.text-button{padding:0;color:var(--ink-faint);font-size:11px}.lesson-title-row{display:flex;align-items:center;gap:12px}.lesson-title-row h1{margin:0;font-family:"Noto Serif TC",serif;font-size:27px;font-weight:600;letter-spacing:.06em}.course-number{color:var(--sage-dark);font-family:Georgia,serif;font-size:12px;letter-spacing:.14em}.lesson-tag{padding:5px 9px;border-left:1px solid var(--rule);color:var(--ink-faint);font-size:10px}.material-chip{display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--rule);border-radius:30px;color:var(--ink-soft);font-size:10px}.material-swatch{width:13px;height:13px;border:1px solid #b8b3a8;border-radius:50%;background:#eee9dc;box-shadow:inset 0 0 0 3px #a9b4a5}.lesson-progress{max-width:1330px;margin:0 auto 16px}.progress-copy{display:flex;justify-content:space-between;margin-bottom:6px;color:var(--ink-faint);font-size:10px;letter-spacing:.04em}.progress-track{height:3px;overflow:hidden;border-radius:3px;background:#e2ddd2}.progress-track>div{height:100%;width:0;border-radius:inherit;background:var(--sage-dark);transition:width .3s}.step-jump{display:flex;gap:7px;padding-top:9px}.step-jump button{display:grid;width:22px;height:22px;place-items:center;padding:0;border:1px solid #d4d0c6;border-radius:50%;background:transparent;color:#97978c;cursor:pointer;font-size:9px;transition:.2s}.step-jump button:hover{border-color:var(--sage-dark);color:var(--sage-dark)}.step-jump button.is-done{border-color:var(--sage);background:var(--sage);color:white}.step-jump button.is-current{border-color:var(--ink);background:var(--ink);color:white;box-shadow:0 0 0 3px rgba(83,101,85,.13)}
.lesson-workspace{display:grid;grid-template-columns:minmax(0,1.56fr) minmax(315px,.74fr);gap:18px;max-width:1330px;margin:0 auto;align-items:stretch}.desk-panel,.instruction-panel{min-width:0;border:1px solid var(--rule);border-radius:11px;background:var(--paper-light);box-shadow:0 4px 20px rgba(66,58,44,.035)}.desk-panel{display:flex;min-height:530px;flex-direction:column;overflow:hidden}.panel-topline{display:flex;height:49px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule);padding:0 16px}.panel-state{display:flex;align-items:center;gap:8px;color:var(--ink-faint);font-size:10px;letter-spacing:.05em}.live-indicator{width:6px;height:6px;border-radius:50%;background:#88a087;box-shadow:0 0 0 3px rgba(136,160,135,.14)}.view-switch{display:inline-flex;padding:3px;border:1px solid var(--rule);border-radius:6px;background:#f5f1e8}.view-switch-button{padding:5px 9px;border:0;border-radius:4px;background:transparent;color:var(--ink-faint);cursor:pointer;font-size:10px}.view-switch-button.is-selected{background:var(--paper-light);color:var(--ink);box-shadow:0 1px 4px rgba(49,55,47,.1)}.visual-stage{position:relative;display:flex;min-height:0;flex:1;align-items:center;justify-content:center;padding:4px 13px 0;background-image:radial-gradient(rgba(125,120,103,.09) .65px,transparent .65px);background-size:17px 17px}.canvas-wrap,.diagram-wrap{position:relative;width:min(100%,690px);min-height:340px;flex:1}.canvas-wrap[hidden],.diagram-wrap[hidden],.opening-storyboard[hidden]{display:none}#fold-canvas{width:100%;height:100%;min-height:340px;display:block;touch-action:none;cursor:grab}#fold-canvas:active{cursor:grabbing}.canvas-caption{position:absolute;right:12px;bottom:6px;color:#9c9a8e;font-size:9px;pointer-events:none}.webgl-fallback{position:absolute;inset:0;display:grid;place-content:center;padding:30px;color:var(--ink-soft);text-align:center;font-size:12px;line-height:1.8}.webgl-fallback[hidden]{display:none}.diagram-wrap{display:grid;place-items:center}#fold-diagram{width:100%;height:min(100%,420px);overflow:visible}.stage-legend{position:absolute;bottom:12px;left:16px;display:flex;gap:13px;color:var(--ink-faint);font-size:9px}.stage-legend span{display:flex;align-items:center;gap:5px}.stage-legend i{width:9px;height:9px;display:inline-block;border:1px solid rgba(47,54,48,.2);border-radius:2px}.legend-front{background:#eee9dd}.legend-back{background:#a9b4a5}.legend-fold{height:0!important;border:0!important;border-top:1px dashed #bd8269!important;border-radius:0!important}.opening-storyboard{width:100%;max-width:670px;padding:18px 8px 25px}.storyboard-label{margin:0 0 12px;color:var(--terra);text-align:center;font-size:10px;letter-spacing:.1em}.storyboard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.story-frame{margin:0;overflow:hidden;border:1px solid var(--rule);border-radius:8px;background:rgba(251,248,241,.88)}.story-visual{position:relative;width:100%;aspect-ratio:240/145;background-image:radial-gradient(rgba(125,120,103,.06) .6px,transparent .6px);background-size:13px 13px}.story-raster{position:absolute;inset:0;display:block;width:100%;height:100%}.story-visual svg{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;overflow:visible}.story-frame figcaption{padding:8px 10px 10px}.story-frame strong{display:block;margin-bottom:3px;font-family:"Noto Serif TC",serif;font-size:11px;font-weight:600}.story-frame span{color:var(--ink-faint);font-size:9px;line-height:1.6}.story-physical-note{margin:12px 0 0;color:var(--ink-faint);text-align:center;font-size:9px}
.playback-bar{display:flex;height:54px;align-items:center;gap:8px;border-top:1px solid var(--rule);padding:0 12px}.icon-control{display:grid;width:30px;height:30px;place-items:center;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer;font-size:11px}.icon-control:hover{background:var(--sage-dark)}.icon-control:disabled{cursor:default;opacity:.42}.play-icon{padding-left:2px}.playback-spacer{flex:1}.speed-button span{display:inline-block;min-width:20px;margin-left:3px;color:var(--sage-dark)}.speed-button[aria-pressed=true]{background:rgba(135,150,137,.15);color:var(--sage-dark)}.timeline{height:3px;background:#ebe6db}.timeline>div{height:100%;width:0;background:var(--terra)}.instruction-panel{display:flex;min-height:530px;flex-direction:column;padding:22px 23px 16px}.instruction-kicker{display:flex;align-items:center;justify-content:space-between;color:var(--sage-dark);font-size:10px;letter-spacing:.08em}.step-counter{color:var(--ink-faint);font-family:Georgia,serif;letter-spacing:.1em}.instruction-panel h2{margin:12px 0 7px;font-family:"Noto Serif TC",serif;font-size:23px;font-weight:600;letter-spacing:.04em;line-height:1.45}.step-purpose{margin:0 0 16px;color:var(--ink-soft);font-size:11px;line-height:1.85}.action-map{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:9px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:12px 0}.map-cell{min-width:0}.map-cell small{display:block;margin-bottom:4px;color:var(--ink-faint);font-size:9px;letter-spacing:.06em}.map-cell strong{display:block;color:var(--ink);font-size:10px;font-weight:500;line-height:1.6}.map-arrow{color:var(--terra);font-size:17px}.step-instruction{margin-top:15px;color:#414941;font-size:12px;line-height:1.9}.layer-callout{margin-top:11px;padding:9px 10px;border-left:2px solid #879889;background:#eff1e9;color:#59665b;font-size:10px;line-height:1.65}.layer-callout:before{content:"拿哪一層  ·  ";color:var(--sage-dark);font-weight:600}.tip-card{display:flex;gap:8px;margin-top:11px;padding:10px;border:1px solid #e9ddd3;border-radius:7px;background:#f7f0e9}.tip-icon{color:var(--terra);font-size:13px}.tip-card p{margin:0;color:#786b60;font-size:10px;line-height:1.7}.completion-checks{margin-top:12px;padding:11px;border-radius:7px;background:#eef1e9}.completion-checks[hidden]{display:none}.completion-checks strong{display:block;margin-bottom:7px;color:var(--sage-dark);font-size:10px}.completion-checks ul{display:grid;gap:5px;margin:0;padding:0;list-style:none;color:var(--ink-soft);font-size:10px}.completion-checks li:before{content:"□";margin-right:7px;color:var(--sage-dark)}.step-navigation{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:15px}.step-navigation .quiet-button,.primary-button{min-height:38px}.nav-prev:disabled{opacity:.38;cursor:default}.primary-button{min-width:116px;border:0;border-radius:6px;background:var(--sage-dark);color:#fff;cursor:pointer;font-size:11px;transition:background .2s,transform .2s}.primary-button:hover{transform:translateY(-1px);background:#4d6552}.primary-button span{margin-left:5px}.keyboard-hint{margin:10px 0 0;color:#9b998e;text-align:center;font-size:9px}.lesson-source{display:flex;justify-content:center;gap:17px;margin:18px auto 0;color:var(--ink-faint);font-size:9px}.lesson-source a{color:var(--sage-dark);text-decoration:none}.lesson-source a:hover{text-decoration:underline}.noscript-note{margin:20px;padding:15px;background:var(--paper-light)}
@media(max-width:1120px){.app-shell{padding:0 32px}.course-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.course-card{min-height:270px}.lesson-workspace{grid-template-columns:minmax(0,1.3fr) minmax(300px,.8fr)}}
@media(max-width:820px){.app-shell{padding:0 20px}.home-view{padding-top:44px}.hero-copy{margin-bottom:49px}.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.course-card:first-child{grid-row:span 2}.course-card:first-child .card-art{min-height:180px}.course-card:first-child .card-art .card-cup-art{height:176px}.lesson-workspace{grid-template-columns:1fr}.desk-panel{min-height:465px}.instruction-panel{min-height:0}.step-navigation{margin-top:18px}}
@media(max-width:560px){.app-shell{padding:0 14px}.topbar{height:62px}.topbar-note{display:none}.home-view{padding-top:38px}.hero-copy{margin-bottom:38px}.hero-copy h1{font-size:38px}.hero-description{max-width:330px;font-size:12px}.section-heading{align-items:center}.section-heading h2{font-size:18px}.section-count{font-size:9px}.course-grid{gap:9px}.course-card{min-height:250px;padding:12px}.course-card:first-child .card-art{min-height:145px}.course-card:first-child .card-art .card-cup-art{height:141px}.card-art{min-height:108px}.card-title{font-size:14px}.card-subtitle{font-size:9px}.home-footer{gap:15px;margin-top:30px;font-size:9px}.lesson-view{padding-top:19px}.lesson-heading{align-items:start}.lesson-title-row{flex-wrap:wrap;gap:8px}.lesson-title-row h1{font-size:23px}.lesson-tag{display:none}.material-chip{margin-top:21px;padding:7px 8px;font-size:9px;white-space:nowrap}.step-jump{gap:5px;justify-content:space-between}.step-jump button{width:23px;height:23px}.desk-panel{min-height:405px}.panel-topline{height:45px;padding:0 9px}.view-switch-button{padding:5px 7px;font-size:9px}.visual-stage{padding:0 4px}.canvas-wrap,.diagram-wrap{min-height:295px}#fold-canvas{min-height:295px}.stage-legend{bottom:9px;left:9px;gap:8px;font-size:8px}.playback-bar{height:49px;gap:3px;padding:0 6px}.playback-bar .quiet-button{padding:8px;font-size:10px}.instruction-panel{padding:18px 17px 14px}.instruction-panel h2{font-size:21px}.lesson-source{flex-wrap:wrap;gap:7px 12px;font-size:8px}.storyboard-grid{gap:7px}.story-frame figcaption{padding:7px}.story-frame strong{font-size:10px}.story-frame span{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
.card-subtitle,.card-skill,.card-skill small{font-size:12px}.step-purpose{font-size:14px}.map-cell strong{font-size:12px}.step-instruction{font-size:16px}.layer-callout,.tip-card p{font-size:13px}.story-frame strong{font-size:12px}.story-frame span{font-size:12px}.story-physical-note{font-size:11px}.lesson-source{font-size:10px}
@media(max-width:560px){.card-subtitle,.card-skill,.card-skill small{font-size:12px}.step-purpose{font-size:14px}.map-cell strong{font-size:12px}.step-instruction{font-size:16px}.layer-callout,.tip-card p{font-size:13px}.story-frame strong,.story-frame span{font-size:12px}.lesson-source{font-size:10px}.course-card:first-child .card-subtitle{font-size:12px}.visual-stage.is-diagram{flex:0 0 auto;min-height:700px;align-items:stretch}.diagram-wrap{width:100%;min-height:680px;flex:none}#fold-diagram{height:680px}.opening-storyboard{align-self:flex-start;padding-top:14px}.storyboard-grid{grid-template-columns:1fr}.story-visual{aspect-ratio:240/145}}
.lesson-tools{display:flex;flex-direction:row;align-items:center;gap:10px}
.paper-picker{display:flex;align-items:center;gap:3px}
.paper-picker-label{padding:0 5px;color:var(--ink-faint);font-size:10px;line-height:1.35;white-space:nowrap}
.paper-picker-label small{color:var(--sage-dark);font-size:9px}
.pattern-choice{display:inline-flex;min-height:30px;align-items:center;gap:4px;padding:3px 6px;border:1px solid var(--rule);border-radius:6px;background:rgba(251,248,241,.65);color:var(--ink-soft);cursor:pointer;font-size:10px;white-space:nowrap}
.pattern-choice:hover{border-color:rgba(98,117,101,.48)}
.pattern-choice.is-selected{border-color:var(--sage-dark);background:#edf0e9;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(98,117,101,.16)}
.pattern-swatch{width:14px;height:14px;flex:none;border:1px solid rgba(55,71,58,.32);border-radius:3px;background-color:#a9b4a5}
@media(max-width:820px){.lesson-heading{display:block}.lesson-tools{align-items:flex-start;flex-wrap:wrap;margin-top:12px}.paper-picker-label{font-size:10px}.pattern-choice{min-height:34px}}
@media(max-width:560px){.lesson-tools{gap:7px}.paper-picker{gap:2px}.paper-picker-label{padding:0 3px;font-size:10px}.paper-picker-label small{font-size:9px}.pattern-choice{min-height:44px;gap:3px;padding:3px 5px;font-size:10px}.pattern-swatch{width:13px;height:13px}}
.lesson-workspace{align-items:stretch}
.desk-panel,.instruction-panel{height:clamp(430px,62vh,560px);min-height:0}
.instruction-panel{overflow-y:auto;overscroll-behavior:contain}
.canvas-wrap{position:relative;height:100%;min-height:0;flex:1}
#fold-canvas{position:absolute;inset:0;width:100%;height:100%;min-height:0}
.mobile-step-banner{display:none}
.icon-control{width:44px;height:44px;flex:none;font-size:14px}
.playback-bar{height:auto;min-height:60px;flex:none}
.playback-bar .quiet-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.timeline{position:relative;height:16px;flex:none}
#timeline-scrubber{position:absolute;inset:-14px 0 auto;width:100%;height:44px;margin:0;appearance:none;background:transparent;cursor:pointer;touch-action:pan-x}
#timeline-scrubber::-webkit-slider-runnable-track{height:3px;background:transparent}
#timeline-scrubber::-webkit-slider-thumb{width:13px;height:13px;margin-top:-5px;appearance:none;border:2px solid var(--paper-light);border-radius:50%;background:var(--terra);box-shadow:0 0 0 1px var(--terra)}
#timeline-scrubber::-moz-range-track{height:3px;background:transparent}
#timeline-scrubber::-moz-range-thumb{width:10px;height:10px;border:2px solid var(--paper-light);border-radius:50%;background:var(--terra);box-shadow:0 0 0 1px var(--terra)}
.timeline:focus-within{outline:2px solid var(--sage-dark);outline-offset:4px}
.anchor-guide{position:relative;z-index:5;align-self:center;width:176px;flex:none;margin:12px 14px 12px 0;padding:8px 9px 9px;border:1px solid rgba(66,75,65,.2);border-radius:8px;background:rgba(251,248,241,.96);box-shadow:0 4px 16px rgba(45,50,43,.12);pointer-events:none}
.anchor-guide[hidden]{display:none}
.anchor-guide p{margin:0 0 3px;color:var(--sage-dark);font-size:11px;font-weight:600;letter-spacing:.04em}
.anchor-guide svg{display:block;width:100%;height:96px;overflow:visible}
.anchor-guide strong{display:block;color:var(--ink);font-size:12px;line-height:1.45}
.visual-stage.is-story{align-items:stretch;overflow:hidden}
.visual-stage.is-story .stage-legend{display:none}
.visual-stage.is-story .opening-storyboard{height:100%;max-height:100%;min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:10px 8px 16px}
.step-navigation{position:sticky;z-index:3;bottom:-16px;margin-right:-23px;margin-left:-23px;padding:12px 23px 0;background:var(--paper-light);box-shadow:0 -6px 10px rgba(49,55,47,.07)}
@media(max-width:820px){
  .desk-panel{height:auto;min-height:465px}
  .instruction-panel{height:auto;min-height:0;overflow:visible}
  .canvas-wrap{height:auto;min-height:0}
  .mobile-step-banner{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin:0 0 9px;padding:9px 11px;border:1px solid var(--rule);border-radius:8px;background:var(--paper-light);scroll-margin-top:8px}
  .mobile-step-banner span{color:var(--sage-dark);font-size:12px}
  .mobile-step-banner strong{overflow:hidden;color:var(--ink);font-family:"Noto Serif TC",serif;font-size:15px;text-overflow:ellipsis;white-space:nowrap}
  .mobile-step-banner span:last-child{color:var(--ink-faint);font-family:Georgia,serif;font-size:11px}
  .step-navigation{position:fixed;z-index:30;right:0;bottom:0;left:0;justify-content:space-between;gap:12px;margin:0;padding:9px 16px calc(9px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);background:rgba(251,248,241,.97);box-shadow:0 -5px 18px rgba(49,55,47,.08);backdrop-filter:blur(10px)}
  .step-navigation .quiet-button,.step-navigation .primary-button{min-width:0;min-height:48px;flex:1;max-width:180px;font-size:14px}
  .step-navigation .primary-button{font-weight:600}
  .app-shell{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .step-jump{justify-content:flex-start;gap:5px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
  .step-jump button{width:44px;height:44px;flex:none;font-size:12px}
  .playback-bar{min-height:62px;gap:4px;padding:0 8px}
  .playback-bar .quiet-button{padding:8px 9px;font-size:12px}
  .desk-panel .visual-stage{min-height:0;flex-direction:column;align-items:stretch;justify-content:flex-start}
  .desk-panel .canvas-wrap{min-height:295px}
  .anchor-guide{display:grid;grid-template-columns:140px 1fr;grid-template-rows:auto 1fr;gap:0 11px;align-self:stretch;width:100%;margin:0 0 9px;padding:7px 9px}
  .anchor-guide p{grid-column:1/-1}
  .anchor-guide svg{grid-column:1;grid-row:2;height:88px}
  .anchor-guide strong{grid-column:2;grid-row:2;font-size:13px}
  .visual-stage.is-story{height:auto;min-height:0;overflow:visible;flex:0 0 auto}
  .visual-stage.is-story .opening-storyboard{height:auto;max-height:none;overflow:visible;flex:none;padding:12px 8px 20px}
  .visual-stage.is-story .stage-legend{display:none}
  #fold-canvas{min-height:0}
}
@media(max-width:370px){
  .app-shell{padding-right:10px;padding-left:10px}
  .playback-bar{gap:2px;padding:0 4px}
  .playback-bar .quiet-button{padding:7px 6px;font-size:11px}
  #reset-view-button{font-size:0}
  #reset-view-button:before{content:"⌖";font-size:18px}
  .anchor-guide{grid-template-columns:132px 1fr;gap:0 8px}
  .anchor-guide svg{height:80px}
  .anchor-guide strong{font-size:12px}
  .step-navigation{padding-right:10px;padding-left:10px}
}
.visual-stage.is-diagram{overflow:hidden}
.diagram-wrap{height:100%;min-height:0;max-height:100%;flex:1;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
#fold-diagram{display:block;width:100%;height:100%;min-width:0;min-height:0;max-height:100%;overflow:hidden;pointer-events:none}
.playback-bar[hidden],.timeline[hidden]{display:none!important}
.playback-bar [hidden]{display:none!important}
.playback-bar.is-reset-only{justify-content:flex-end}
.playback-bar.is-reset-only .playback-spacer{display:none}
@media(max-width:820px){.playback-bar.is-reset-only #reset-view-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}
@media(max-width:560px){
  .visual-stage.is-diagram{overflow:visible}
  .diagram-wrap{height:auto;min-height:680px;max-height:none;flex:none}
  #fold-diagram{height:680px;min-height:0;max-height:none}
}

/* One stable action row for watching, folding, and continuing. */
.lesson-controls{position:fixed;z-index:30;right:0;bottom:0;left:0;padding:10px 20px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);background:rgba(251,248,241,.97);box-shadow:0 -5px 18px rgba(49,55,47,.08);backdrop-filter:blur(10px)}
.lesson-controls-buttons{display:grid;grid-template-columns:110px minmax(180px,320px) 110px;justify-content:center;align-items:center;gap:16px;max-width:760px;margin:auto}
.lesson-controls-buttons button{min-width:0;min-height:52px;font-size:14px;white-space:nowrap}
.lesson-controls-buttons .primary-button{display:flex;align-items:center;justify-content:center;gap:9px;font-weight:600}
.lesson-controls-buttons .primary-button span{margin:0}
.lesson-controls-buttons .primary-button:hover{transform:none}
.lesson-controls .keyboard-hint{margin:6px 0 0}
.app-shell{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
@media(max-width:820px){
  .lesson-controls{padding:9px 14px calc(9px + env(safe-area-inset-bottom))}
  .lesson-controls-buttons{grid-template-columns:76px minmax(0,1fr) 76px;gap:8px;max-width:520px}
  .lesson-controls-buttons button{min-height:52px;padding:8px 4px;font-size:13px}
  .lesson-controls-buttons .primary-button{gap:5px;font-size:14px}
  .lesson-controls .keyboard-hint{display:none}
  .app-shell{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
}
@media(max-width:370px){.lesson-controls{padding-right:8px;padding-left:8px}.lesson-controls-buttons{grid-template-columns:64px minmax(0,1fr) 64px;gap:5px}.lesson-controls-buttons button{font-size:12px}.lesson-controls-buttons .primary-button{font-size:13px}}

.card-art .card-preview{display:block;width:100%;height:150px;pointer-events:none}
.visual-stage:has(.canvas-wrap:not([hidden])){background-image:none}
.canvas-caption,.visual-stage:has(.canvas-wrap:not([hidden])) .stage-legend{background:rgba(251,248,241,.94);color:#58685b;padding:4px 7px;border-radius:3px}
.card-art:has(.card-preview) svg{display:none}
@media(max-width:820px){.course-card:first-child .card-preview{height:176px}}
@media(max-width:560px){.card-art .card-preview{height:108px}.course-card:first-child .card-preview{height:141px}}
@media(prefers-reduced-motion:reduce){.course-card.is-ready:hover{transform:none}.course-card{transition:none}}

@media(max-width:560px){#fold-diagram[data-paper-model="crane"]{height:auto;max-height:none}.diagram-wrap:not([hidden]):has(#fold-diagram[data-paper-model="crane"]){min-height:0}}
/* Crane storyboards keep readable panel captions and scroll within the desk. */
.visual-stage.is-diagram:has(#fold-diagram[data-paper-model="crane"]){overflow:auto;align-items:flex-start}
.diagram-wrap:not([hidden]):has(#fold-diagram[data-paper-model="crane"]){display:block;height:auto;min-height:0;max-height:none;flex:none}
#fold-diagram[data-paper-model="crane"]{height:auto;max-height:none}