/* Final layout layer: size to both viewport width and height, preserve readable text. */
.classroom-page .brand {color:inherit;text-decoration:none;flex-shrink:0}
.classroom-page .topbar {height:auto;min-height:76px;gap:16px;padding-block:10px;flex-wrap:wrap}
.classroom-page .toolbar {flex-wrap:wrap;justify-content:flex-end}
.classroom-page main {min-height:0}
.classroom-page .mission {height:auto;min-height:112px;padding-bottom:16px}
.classroom-page .mission>div:first-child {min-width:0}
.classroom-page .mission h2 {font-size:clamp(28px,2.4vw,44px)}
.classroom-page .stage {width:min(1600px,90vw);height:clamp(410px,calc(100svh - 290px),780px)}
.classroom-page .course-navigation {width:90vw;margin:18px auto;gap:12px;flex-wrap:wrap}
.classroom-page .footer {display:none}
.classroom-page .lesson-panel {min-width:0}
body.classroom-page[data-view=lesson] #lesson-panel {grid-template-rows:minmax(0,1fr)}
body.classroom-page[data-view=lesson] #lesson-panel .lesson-copy {overflow:auto;justify-content:safe center}
body.classroom-page[data-view=lesson] #lesson-panel h3 {font-size:clamp(28px,2.2vw,40px);margin-bottom:16px}
body.classroom-page[data-view=lesson] #lesson-body p,
body.classroom-page[data-view=lesson] #lesson-body p:first-child {font-size:clamp(22px,1.55vw,28px);line-height:1.6;margin-bottom:14px}
body.classroom-page[data-view=lesson] #lesson-figure {overflow:auto;max-height:100%}
.classroom-page .clue-notes {flex-wrap:wrap}
.classroom-page .clue-list {flex:1;flex-wrap:wrap}
.classroom-page .craft-layout>* {min-width:0}
.opening-page #journey {padding-bottom:75px}
.opening-page #journey>header {height:auto;min-height:100px;padding-block:16px;gap:12px}
.opening-page #panorama {height:clamp(220px,40svh,510px);min-height:0}
.opening-page .journey-bottom {min-height:0;align-items:center;margin-top:10px}
.opening-page .chapter-copy {flex:1;min-width:0}
.opening-page #era-nav {max-width:45%;flex-shrink:0}
.opening-page .bottom-controls {flex-wrap:wrap}
.opening-page .bottom-controls input {min-width:100px}
.opening-page .credits {position:relative;right:auto;bottom:auto;margin:12px 5vw;text-align:right}
.opening-page .credits[open] {margin-left:auto}
.opening-page .opening-controls {bottom:12px;max-width:calc(100vw - 32px);flex-wrap:wrap}
.opening-page .gate-paper {max-height:calc(100svh - 130px);overflow:auto}
#painting-video-dialog,#bianjing-film-dialog {max-height:calc(100svh - 32px);overflow:auto;margin:auto}
#painting-video-dialog header,#bianjing-film-dialog header {height:auto;min-height:0;padding:0;gap:12px}
#painting-video-dialog footer,#bianjing-film-dialog footer {flex-wrap:wrap;gap:12px}
#painting-video-dialog video,#bianjing-film-dialog video {width:100%;max-height:calc(100svh - 270px);object-fit:contain}
.media-feedback {display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:8px 0;font:14px/1.5 "PingFang SC","Microsoft YaHei",sans-serif}
.media-feedback span {flex:1;min-width:140px}
.media-feedback button {font-size:13px;padding:6px 12px}
@media (max-height:800px) and (min-width:901px) {
 .classroom-page .topbar {min-height:62px;padding-block:6px}
 .classroom-page .toolbar button {padding:8px 10px;font-size:13px}
 .classroom-page .mission {min-height:92px;padding-top:12px;padding-bottom:10px}
 .classroom-page .stage {height:calc(100svh - 242px);min-height:380px}
 body.classroom-page[data-view=lesson] #lesson-panel {padding-top:48px}
 body.classroom-page[data-view=lesson] #lesson-pages {min-height:44px;padding:5px 12px}
 body.classroom-page[data-view=lesson] #lesson-pages button {font-size:15px;padding:5px 9px}
 body.classroom-page[data-view=lesson] #lesson-panel .lesson-copy {padding:14px 22px}
 body.classroom-page[data-view=lesson] #lesson-figure {padding:12px 20px}
 body.classroom-page[data-view=lesson] .specimen-figure img,
 body.classroom-page[data-view=lesson] .specimen-tabs:not([hidden])+.specimen-figure img {height:165px}
 body.classroom-page[data-view=lesson] .specimen-figure figcaption {font-size:15px}
 body.classroom-page[data-view=lesson] .hanging-diagram svg {height:220px}
 body.classroom-page[data-view=lesson] #lesson-panel .artwork-window {height:135px}
 .classroom-page .course-navigation {margin-block:10px}
 .opening-page #journey>header {min-height:80px;padding-block:10px}
 .opening-page #journey header h2 {font-size:28px}
 .opening-page #panorama {height:34svh}
 .opening-page .chapter-copy h3 {font-size:26px}
 .opening-page .chapter-copy p {font-size:17px}
 .opening-page .chapter-copy>span {font-size:21px}
}
@media (max-width:1100px) {
 .classroom-page .brand {font-size:22px}
 .classroom-page .toolbar {gap:4px}
 .classroom-page .toolbar button {padding:7px 9px;font-size:12px}
 .classroom-page .mission {padding-inline:5vw}
 .opening-page #era-nav {gap:6px}
 .opening-page #era-nav button {padding:7px 10px}
}
@media (max-width:900px) {
 .classroom-page .topbar {align-items:flex-start}
 .classroom-page .toolbar {justify-content:flex-start}
 .classroom-page .stage {height:auto;min-height:410px}
 .classroom-page .scene {min-height:410px;height:auto}
 body.classroom-page[data-view=lesson] #lesson-panel {height:auto;min-height:410px;grid-template-columns:1fr;padding-top:0;overflow:visible}
 body.classroom-page[data-view=lesson] #lesson-pages {position:relative;grid-column:1;flex-wrap:wrap}
 body.classroom-page[data-view=lesson] #lesson-figure {display:block;max-height:none}
 body.classroom-page[data-view=lesson] #lesson-panel .lesson-copy {overflow:visible;padding:24px}
 .classroom-page .inspect-object {height:380px}
 .classroom-page .lesson-split,.classroom-page .craft-layout {grid-template-columns:1fr}
 .classroom-page .label-options {gap:16px;flex-wrap:wrap}
 .classroom-page .paper-label {font-size:23px;padding:16px}
 .classroom-page .mission {flex-wrap:wrap}
 .classroom-page .mission-meta {flex-direction:row;align-items:center}
 .opening-page .journey-bottom {display:block}
 .opening-page #era-nav {max-width:none;justify-content:flex-start;margin-top:14px}
 .opening-page .cover-action p {letter-spacing:2px;padding-inline:20px}
}