/* V7 — 书坊中的一册图书史。展示用宋体，阅读与操作用黑体。 */
:root{--ivory:#f5f2eb;--muted:#c8cbc5;--red:#ac382d;--gold:#ddd3bc;--ink:#252925;--paper:#f1f0e8;--paper-rule:#d0d1c8;--body-face:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;--display-face:"Songti SC","STSong","Noto Serif CJK SC",serif}
body{font-family:var(--body-face);background:#202722;color:var(--ivory)}
h1,h2,h3,.brand,.big-question,.figure-word,.story-large{font-family:var(--display-face)}
button{font-family:var(--body-face);border-color:#d0d5c34d;background:#222d27e8;border-radius:2px;letter-spacing:0}
button:hover{background:#46554a}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline-color:#c66a4f}
a{color:#f0c9b5}p{color:#e7e8e0}
.primary{background:var(--red);border-color:#ca6554;color:#fff9f0;box-shadow:0 4px 12px #120c0826}
.primary:hover{background:#c14636}.topbar{border-color:#e4e4d92b}.brand{font-weight:600;letter-spacing:2px}.brand small{font-family:var(--body-face);font-weight:400;letter-spacing:1.3px;color:#d3d5cb}.seal{background:#a6372b;color:#fff7e8;border:0;padding:5px 7px;font-weight:400}
.toolbar button{font-family:var(--body-face);color:#e4e6df;font-size:12px}.toolbar button:hover{background:#e7e8df1f}.eyebrow{font-family:var(--body-face);font-size:12px;letter-spacing:1.6px;color:#dedccf}
.shade{background:linear-gradient(90deg,#15211de8,#14251d65 53%,#10150a08),linear-gradient(0deg,#111b18d9,transparent 45%,#131b1844)}
body:not([data-scene=intro]) .shade{background:linear-gradient(0deg,#14221aec,transparent 55%,#111e1880)}
.intro{padding-top:8vh}.intro h1{font-size:clamp(52px,5.4vw,90px);font-weight:600;line-height:1.3;letter-spacing:1px;margin:22px 0}.intro p{font-size:19px;letter-spacing:.6px;line-height:1.85;color:#e5e9df}.intro .eyebrow{border-left:3px solid #d86448;padding-left:12px}.intro .intro-note{color:#c4ccc0;font-family:var(--body-face);letter-spacing:.3px}.intro .primary{padding:14px 26px}
.mission h2{font-weight:600;letter-spacing:.3px;font-size:clamp(28px,2.5vw,42px);text-shadow:0 2px 18px #08130b60}.mission p{font-family:var(--body-face);color:#dde2d8}.mission-meta>span{color:#f0eee4}.mission-meta small{color:#ead4c8;border-color:#aa7c67}.lesson-switch{gap:4px}.lesson-switch button{background:#20372bc2;border:1px solid #d9e0d435;color:#dfe5da}.lesson-switch button[aria-pressed=true]{background:#f0f0e8;color:#263b2d;border-color:#f0f0e8}
.course-navigation{border-color:#dfe5da33}.course-navigation button{background:#1a2a20c9;border-color:#dce5d644}.course-navigation span{font-family:var(--body-face);color:#d6ded1;letter-spacing:.5px}.footer{color:#c4cdc0;border-color:#dce4d32b;font-family:var(--body-face)}
/* A spread, not a dashboard: illustration on the left, one reading column. */
.lesson-panel{background:var(--paper);color:var(--ink);border:0;box-shadow:0 12px 36px #0c180f55;padding:20px 30px;gap:5%;grid-template-columns:.85fr 1.25fr;overflow:visible}
.lesson-panel:before{content:"";position:absolute;left:0;top:0;width:4px;height:48px;background:var(--red)}
.lesson-panel.has-stories{padding:58px 30px 10px;grid-template-columns:.8fr 1.3fr;gap:4%}
.lesson-copy{min-width:0;border-left:1px solid var(--paper-rule);padding-left:28px}
.lesson-copy .eyebrow{color:#7c5143;font-size:11px;letter-spacing:1.3px}
.lesson-copy h3,.has-stories .lesson-copy h3{font-size:29px;line-height:1.25;color:#202d25;font-weight:600;letter-spacing:.15px;margin:6px 0 10px}
.lesson-copy p,.has-stories .lesson-copy p{font-size:18px;line-height:1.55;color:#354037;margin:8px 0;letter-spacing:0}
.lesson-copy #lesson-takeaway,.has-stories .lesson-copy #lesson-takeaway{font-size:16px;line-height:1.5;color:#7f3427;border-left:2px solid #b44132;padding-left:12px;margin:10px 0}
.lesson-copy a{color:#516255;font:12px/1.45 var(--body-face);text-decoration-color:#a3aea3;text-underline-offset:3px;margin:5px 0}.lesson-copy button{font-size:15px;padding:9px 18px;margin-top:5px}
#lesson-pages{top:10px;left:30px;right:30px;gap:18px;border-color:#c9cdc1;padding-bottom:7px}
#lesson-pages button{background:transparent;font:14px/1.5 var(--body-face);color:#657064;border:0;border-bottom:2px solid transparent;padding:4px 0;border-radius:0}
#lesson-pages button:hover{color:#9c382d}#lesson-pages button[aria-pressed=true]{color:#952e24;background:transparent;border-bottom-color:#ac382d}
.lesson-figure{color:#263b2d;align-self:center}.lesson-figure svg{filter:drop-shadow(0 12px 10px #33413220);max-height:220px}.lesson-figure svg text{fill:#374b3c;font-family:var(--body-face);font-size:24px}.lesson-figure svg g[stroke]{stroke:#8b8a73}.lesson-figure svg stop:first-child{stop-color:#b6b69e}.lesson-figure svg stop:nth-child(2){stop-color:#f7f5e7}.lesson-figure svg stop:nth-child(3){stop-color:#e3e4d4}.lesson-figure svg stop:last-child{stop-color:#aaa991}
.figure-heading{font:23px/1.4 var(--display-face);letter-spacing:1px;color:#52694f;margin-bottom:18px}.figure-word{font-size:62px;line-height:1.12;letter-spacing:4px;color:#233e2c}.figure-caption{font:11px/1.6 var(--body-face)!important;color:#778072!important;margin:10px 0!important}.figure-arrow{font:17px/1.5 var(--body-face);color:#536548;margin:17px 0}.component-legend{font-family:var(--body-face);font-size:17px;gap:12px;color:#465942;padding:0 10px}.artifact-date{font:86px/1.1 Georgia,serif;letter-spacing:-4px;color:#8e3329}.artifact-date span{font:15px var(--body-face);letter-spacing:0}.lesson-figure h4{font:30px var(--display-face);color:#263d2d;margin:14px 0}.artifact-meta{font:18px/1.7 var(--body-face);color:#50614e}.paper-seams{filter:drop-shadow(3px 12px 8px #24352228);padding:12px 4px}.paper-seams i{font:21px/115px var(--display-face);background:linear-gradient(90deg,#d7d8c5,#f9f8e8 15%,#eeefdf);color:#445340;border-color:#8a9980}.fold-diagram{height:130px;margin:30px 15px}.fold-diagram i{background:#f8f8e7;border-color:#9ca38b}.fold-diagram i:nth-child(even){background:#c0c9ad}.label-illustration span{background:#faf7e8;color:#2e412f;box-shadow:8px 12px 15px #31472f2b}.label-illustration i{background:#a3382b}.shelf-diagram span{background:#e4e7dc;border-bottom:5px solid #849078;color:#3a4934;font:21px var(--display-face)}
.story-large{color:#2c4635;font-size:36px;line-height:1.45;letter-spacing:1px}.story-small{font:18px/1.6 var(--body-face);color:#64705d}.story-letter .story-large,.story-poem .story-large{background:#f0dbd6;color:#77372f;border:0;border-left:3px solid #b76859;padding:24px 20px;margin:10px 20px;box-shadow:6px 9px 15px #35443222;transform:rotate(-2deg)}.story-poem .story-large{font-size:44px;letter-spacing:7px}.story-steps{gap:0;margin:20px 0;border-top:1px solid #a5b19a;border-bottom:1px solid #a5b19a}.story-steps li{background:transparent;color:#384e3c;font:17px/1.5 var(--body-face);box-shadow:none;border-right:1px solid #ccd3c1;padding:14px 8px}.story-steps li:last-child{border-right:0}.story-steps li:before{font:14px Georgia,serif;color:#a33e2e;margin-bottom:10px}.story-sequence li{font-size:24px;min-height:130px}.story-layers .story-steps{border:0;margin:20px;gap:10px}.story-layers li{border:0}.story-layers li:nth-child(1){background:#aebf9f}.story-layers li:nth-child(2){background:#e3e9d7}.story-layers li:nth-child(3){background:#4c6755;color:#f9faf0}
/* The interactive props retain paper / wood material, with neutral paper whites. */
.paper{background:#e8e8d5;border-top-color:#fbfbed;border-bottom-color:#a7ad8e;box-shadow:inset 0 0 22px #5f714222}.leaf{background:linear-gradient(90deg,#89967517,#fffff327 45%,#89967513);border-color:#88947540}.leaf .verse{font-family:var(--display-face);color:#2e3a2c;font-size:24px}.leaf h3,.leaf .number{color:#69715a}.leaf .clue-button{background:#f0efdd;color:#9e392c;border-color:#ac4634;box-shadow:inset 0 0 0 2px #f7f8e7}.leaf .clue-button:hover{background:#fffdf0}.leaf .clue-button[aria-pressed=true]{background:#a53a2c;color:#fff6e7}.clue-note,.note{background:#f1efe0;color:#354332;box-shadow:2px 4px 4px #0003;font-family:var(--body-face)}.clue-notes{border-color:#dce4d03d}.label-option,.paper-label{background:#efeee1;color:#2f412f;border-color:#b3b8a1;box-shadow:4px 8px 8px #0004;font-family:var(--display-face)}.label-option:hover,.paper-label:hover{background:#faf8eb;color:#9a382a}.label-feedback,.feedback{color:#e6d4c2;font-family:var(--body-face)}.target-caption,.object-caption{font-family:var(--body-face);color:#dde4d5;letter-spacing:.5px}.read-tools{font-family:var(--body-face)}.read-tools button{font-family:var(--body-face)}.shelf-slot>span{background:#e1e2cd;color:#2f3e2c;font-family:var(--display-face)}.shelf-slot small{color:#d3dcc6}.model-tools{font-family:var(--body-face);color:#d3dfcc}
.big-question{font-weight:600;letter-spacing:1px}.lesson-lead{color:#e0e8dc;font-family:var(--body-face)}.reveal-note{border-color:#cf7458;color:#f3ded0}.lesson-footnote{color:#b9c9b3;font-family:var(--body-face)}.material-choices button{background:#1f3328b5;border-color:#879d79}.material-choices button[aria-pressed=true],.form-controls button[aria-pressed=true],.craft-steps button[aria-pressed=true]{background:#edf0e1;color:#2d4432;border-color:#edf0e1}.material-choices span{color:#adbea6}.material-choices button[aria-pressed=true] span{color:#65755b}.material-display>p,#craft-instruction{color:#e3eadb}.craft-guide{border-color:#a8bb9b55}.has-model #compare-object span,.has-model #compare-object[data-form=book] span{background:#e8ead8;color:#2c412d;border-color:#9ba987}.has-model #compare-object .target-panel{background:#d8ddc6}.form-controls button{font-family:var(--body-face)}
dialog{background:#f1f0e8;color:#26372b;border:0;box-shadow:0 25px 100px #0009}dialog p,dialog li{color:#3c493d;font-family:var(--body-face)}dialog h3{color:#8d3429;font-family:var(--display-face)}dialog a{color:#506e53}dialog button{background:#e0e5d6;color:#263b2c;border-color:#b5c0ab}dialog button:hover{background:#cbd6bf}.dialog-close{background:transparent;color:#283d2d}.guide-panel{background:#f1f0e8;color:#2d4030;border:0;box-shadow:0 14px 45px #001b1355}.guide-panel p{color:#304733}.guide-panel small{color:#68785e}.guide-panel>button{background:transparent;color:#263b2c;border:0}
@media(min-width:1600px){.intro p{font-size:26px}.intro .intro-note{font-size:15px}.toolbar button{font-size:15px;padding:13px}.lesson-panel{padding:36px 46px}.lesson-panel.has-stories{padding:86px 46px 22px}.lesson-copy{padding-left:42px}.lesson-copy h3,.has-stories .lesson-copy h3{font-size:42px;margin:10px 0 20px}.lesson-copy p,.has-stories .lesson-copy p{font-size:25px;line-height:1.7;margin:16px 0}.lesson-copy #lesson-takeaway,.has-stories .lesson-copy #lesson-takeaway{font-size:23px;line-height:1.55;margin:20px 0}.lesson-copy .eyebrow{font-size:14px}.lesson-copy a{font-size:15px;margin:7px 0}.lesson-copy button{font-size:19px;padding:12px 24px;margin-top:10px}#lesson-pages{top:19px;left:46px;right:46px;gap:30px}#lesson-pages button{font-size:19px;padding:9px 0}.lesson-figure svg{max-height:340px}.figure-word{font-size:96px}.figure-heading{font-size:32px}.figure-caption{font-size:14px!important}.figure-arrow{font-size:23px}.component-legend{font-size:25px;gap:20px}.artifact-date{font-size:132px}.artifact-date span{font-size:20px}.artifact-meta{font-size:25px}.lesson-figure h4{font-size:40px}.paper-seams i{font-size:29px;line-height:190px}.fold-diagram{height:210px}.fold-diagram i{width:65px}.story-large{font-size:50px}.story-poem .story-large{font-size:64px}.story-letter .story-large,.story-poem .story-large{padding:34px 25px}.story-small{font-size:24px}.story-steps li{font-size:24px;padding:22px 10px}.story-steps li:before{font-size:17px}.story-sequence li{font-size:30px}.leaf .verse{font-size:28px}}
@media(max-width:800px){.lesson-panel,.lesson-panel.has-stories{padding:20px}.lesson-copy{padding-left:0;border:0}#lesson-pages{gap:12px}.intro h1{font-size:44px}.intro p{font-size:18px}.toolbar button{font-size:10px}}
/* Chapter marks are secondary to the teacher's navigation controls. */
.course-navigation{position:relative}.chapter-track{position:absolute;top:-2px;left:0;right:0;display:flex;gap:8px;height:3px;pointer-events:none}.chapter-track span{height:3px;flex:1;background:#c4d0b826;border-radius:0}.chapter-track span[data-state=past]{background:#c3d0b480}.chapter-track span[data-state=current]{background:#db7b5c}.scene{animation:none}
body[data-paused=true] *,body[data-paused=true] *::before,body[data-paused=true] *::after{animation-play-state:paused!important;transition:none!important}
@media(min-width:801px) and (max-width:1599px){.lesson-panel.has-stories{padding-top:54px;padding-bottom:12px}.has-stories .lesson-copy h3{font-size:28px;margin:4px 0 8px}.has-stories .lesson-copy p{line-height:1.5;margin:6px 0}.has-stories .lesson-copy #lesson-takeaway{margin:8px 0}.has-stories .lesson-copy button{margin-top:3px;padding:8px 18px}}
/* The documentary page has two source lines; reserve their height at 720p. */
@media(min-width:801px) and (max-width:1599px){body[data-scene=craft] .has-stories .lesson-copy p{margin:5px 0}body[data-scene=craft] .has-stories .lesson-copy #lesson-takeaway{margin:6px 0}body[data-scene=craft] .has-stories .lesson-copy a{margin:3px 0}}
/* Pausing a lesson preserves a readable projection. */
body[data-paused=true] .stage{filter:none}
.closed-scroll{border-top-color:#efeee1;border-bottom-color:#696c55;background:repeating-linear-gradient(0deg,#737b6210 0 1px,transparent 1px 4px),linear-gradient(0deg,#888b72,#dbddca 25%,#eeefde 50%,#d1d4bf 80%,#777b60);box-shadow:inset 0 8px 12px #fffef140,inset 0 -8px 12px #24302055,0 9px 0 -4px #202719}
.has-model .ribbon,.has-model .wrapper,.has-model .open-control{background:#ac382d;border-color:#c96b58;color:#fff9ee}