:root{--serif:'Times New Roman',Times,'Liberation Serif',serif;--sans:'Times New Roman',Times,'Liberation Serif',serif;--text-font:'Times New Roman',Times,'Liberation Serif','Songti SC','Noto Serif TC',serif;font-family:var(--text-font);--muted:#c1baa4}body,button,input,select,textarea,.scene-meaning-text,.quiz-options button small,.course-char-gloss,.course-phrase-choice small,.course-sentence-group small{font-family:var(--text-font)}body{font-size:20px}p{font-size:20px;line-height:1.7}.course-card p,.course-catalogue-note,.course-char-gloss,.course-phrase-choice small,.course-stage-heading p:not(.eyebrow){color:#d4c9b1}.site-header{gap:18px;justify-content:space-between}.site-header .brand small,.site-header nav{display:none!important}.site-header .language-control{margin-left:auto}.site-header .brand{font-family:var(--serif);font-size:28px;white-space:nowrap}.site-header .collection-button{width:46px;min-width:46px;min-height:46px;padding:9px;display:grid;place-items:center}.collection-button>svg{width:22px;height:25px;fill:none;stroke:var(--gold);stroke-width:1.3}.collection-button [hidden]{display:none!important}.site-footer .brand{font-family:var(--serif)}.site-footer .brand small{display:none}.hero [hidden]{display:none!important}.hero-body{align-items:center;grid-template-columns:minmax(300px,.85fr) minmax(0,1.3fr);padding-top:105px;padding-bottom:135px;gap:7vw;min-height:100svh}.hero-copy{padding:0}.hero-copy h1{font-size:clamp(44px,5.2vw,78px);line-height:1.06;letter-spacing:-1.5px;margin:0}.hero-copy h1 em{font-weight:400}.hero{height:auto;min-height:100svh;max-height:none}.cinema-viewer{align-self:center}.cinema-viewer .drawing-stage{height:clamp(300px,49svh,510px)}#hero-definition{padding:0;margin:0 auto 12px;width:auto;justify-content:center;background:none;gap:15px}#hero-definition .scene-character{display:none}#hero-definition .scene-meaning-text{font-size:25px;font-weight:400}#hero-definition .round-button{width:40px;min-width:40px;min-height:40px;height:40px}.story-controls{margin-top:10px}.story-controls input{height:20px}.playback-row{justify-content:center;gap:22px;margin-top:12px}.playback-row .icon-text{display:grid;place-items:center;width:46px;min-width:46px;min-height:46px;padding:8px;border:1px solid var(--gold-line);border-radius:50%}.playback-actions{gap:22px}.playback-actions svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5}.hero-bottom{position:absolute;bottom:30px;left:0;right:0;justify-content:center;padding:0 24px}.story-picker{gap:30px;max-width:100%;justify-content:center;flex-wrap:nowrap}.story-picker button{min-height:48px;padding:6px 12px;min-width:48px;opacity:.5;border-bottom:1px solid transparent}.story-picker button.active{opacity:1;border-bottom-color:var(--gold)}.story-picker button>span:first-child{font-size:32px}.story-picker button>span:last-child:not(:first-child){display:none}
@media(max-width:1000px){.hero-body{gap:30px;min-height:100svh;grid-template-columns:1fr 1.2fr}.hero-copy h1{font-size:clamp(40px,5.7vw,64px)}.hero .hero-bottom{position:absolute;bottom:26px;padding:0 24px}.hero .cinema-viewer .drawing-stage{height:42svh;min-height:290px}}
@media(max-width:760px){.site-header,.course-page .course-header{padding:18px 20px;flex-wrap:nowrap;gap:14px;min-height:80px}.site-header .brand{font-size:24px}.site-header .brand-seal{display:block!important;width:29px;height:37px;font-size:26px}.site-header .language-control select{width:128px;min-width:128px;padding-left:12px;font-size:18px}.site-header .collection-button>svg{width:20px}.site-header .collection-button{min-width:42px;width:42px;padding:7px}.hero .hero-body{display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:111px 24px 120px;gap:18px;min-height:100svh}.hero .hero-copy h1{font-size:clamp(40px,9vw,58px);line-height:1.08;letter-spacing:-1px;max-width:540px;margin:0 auto}.hero .cinema-viewer{width:100%;align-self:stretch}.hero .cinema-viewer .drawing-stage{height:265px;min-height:265px}.hero #hero-definition{margin-bottom:0}.hero #hero-definition .scene-meaning-text{font-size:23px}.hero .story-controls{margin-top:0}.hero .hero-bottom{bottom:20px}.hero .story-picker{gap:13px}.hero .story-picker button{min-width:42px;padding:4px 9px}.hero .story-picker button>span:first-child{font-size:28px}.hero .playback-row{margin-top:8px}.course-page .course-header nav{display:none!important}}
@media(max-width:380px){.site-header,.course-page .course-header{gap:10px;padding-inline:15px}.site-header .brand-seal{display:none!important}.site-header .brand{font-size:23px}.site-header .language-control select{width:120px;min-width:120px;padding-right:29px}.hero .hero-body{padding:101px 21px 100px;gap:10px}.hero .hero-copy h1{font-size:39px}.hero .cinema-viewer .drawing-stage{height:230px;min-height:230px}.hero .story-picker{gap:10px}}
.hero .cinema-viewer{display:flex;flex-direction:column}.hero .drawing-stage{order:1}.hero #hero-definition{order:2;border:0;width:auto;margin:8px auto 4px;justify-content:center}.hero #hero-definition .scene-audio{display:none}.hero .story-controls{order:3;width:100%}.hero-copy h1{font-size:clamp(44px,4.6vw,70px)}
@media(min-width:1001px){.hero-body{grid-template-columns:minmax(390px,1fr) minmax(0,1.25fr);gap:5vw}}
@media(max-width:650px){.library-intro{display:block}.library-intro .library-seal{display:none}}

/* A scene's controls must fit the scene, including translated labels. */
.landscape-scene{container-type:inline-size;min-width:0}
.picture-lesson-controls,.scene-bottom,.forest-controls{min-width:0;max-width:100%}
.picture-choices,.choice-pills,.tree-counts,.component-choices{min-width:0;max-width:100%}
.picture-choices button,.choice-pills button,.tree-counts button,.component-choices button{
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.5;
}
.picture-choices button>span,.choice-pills button>span,.tree-counts button>span{flex-shrink:0}
.component-chip[lang=en]{font-family:var(--text-font)}
.practice>*{min-width:0}
.quiz-options,.quiz-options button{min-width:0}
.quiz-options button small{overflow-wrap:anywhere}

@media(max-width:1100px){
  .character-row{display:flex;flex-direction:column;min-width:0}
  .character-row>.landscape-scene{width:100%}
  .character-row>.row-copy{border-left:0;border-top:1px solid var(--gold-line);min-width:0}
}

@container (max-width:640px){
  .picture-choices,.point-experiment .choice-pills,.tree-counts,.component-choices{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .picture-choices>button:last-child:nth-child(odd),.component-choices>button:last-child:nth-child(odd){grid-column:1 / -1}
  .picture-choices button,.choice-pills button,.tree-counts button,.component-choices button{padding:11px 10px;min-height:52px}
}

@media(max-width:760px){
  .practice{grid-template-columns:minmax(0,1fr)}
  .theme-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
  .theme-shortcuts button{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
}