/* shell.css · 总览、目录侧栏、衔接页、结课页的样式
 * Input:  assets/fonts 的漫黑和小赖子集（build.py 按外壳的文字取字）；hand.js 生成的 --paper-img、--ink-mask
 * Output: 与课程页同一套令牌：纸、墨、四色彩铅加紫、两款手写字
 * Pos:    被 index.html 引用；令牌值与精讲课 css/deck.css 相同，衔接页按 1600×900 画板缩放（单位 --u）
 */
@font-face { font-family:"Deck Marker"; src:url(fonts/marker.woff2) format("woff2"); font-display:block; }
@font-face { font-family:"Deck Hand"; src:url(fonts/hand.woff2) format("woff2"); font-display:block; }
:root {
  --paper:#f1e9d6; --ink:#2b2420; --mute:#5b5147; --rule:#b3a487; --graphite:#8f8471;
  --val:#e0a84f; --val-ink:#83540e; --flow:#86b596; --flow-ink:#2b6650;
  --exp:#e39478; --exp-ink:#9b3f27; --arch:#86a6d8; --arch-ink:#2b5085;
  --mark:#f0d46c; --fde:#5a3f8c; --fde-l:#c4b2e3;
  --cc:var(--mark); --cci:var(--ink);
  --marker:"Deck Marker","Deck Hand","Kaiti SC","STKaiti",cursive;
  --hand:"Deck Hand","Kaiti SC","STKaiti",cursive;
  --ease:cubic-bezier(.22,.61,.36,1); --flow-in:cubic-bezier(.2,.75,.35,1);
}
* { box-sizing:border-box; }
html { margin:0; background-color:var(--paper); background-image:var(--paper-img, none); background-size:512px 512px; }
body { margin:0; background:transparent; color:var(--ink); font-family:var(--hand); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0; mix-blend-mode:multiply;
  background:radial-gradient(55% 45% at 16% 20%, rgba(150,118,70,.05), transparent 70%), radial-gradient(45% 55% at 84% 78%, rgba(150,118,70,.06), transparent 70%), radial-gradient(130% 120% at 50% 45%, transparent 62%, rgba(120,92,58,.10) 100%); }
button { font:inherit; color:inherit; background:none; border:0; padding:0; }
a { color:inherit; }
:focus-visible { outline:2px dashed var(--ink); outline-offset:3px; border-radius:6px; }
.ch { display:inline-block; }
.wd { white-space:nowrap; }
h1, h2, h3, h4, p, ol, ul { margin:0; padding:0; font-weight:400; }
ol, ul { list-style:none; }
.mk { font-family:var(--marker); font-weight:400; }
.mask { -webkit-mask-image:var(--ink-mask, none); mask-image:var(--ink-mask, none); -webkit-mask-size:512px 512px; mask-size:512px 512px; }

/* 手绘部件的画布 */
[data-d] { position:relative; }
.dc { position:absolute; pointer-events:none; mix-blend-mode:multiply; z-index:0; }
.dc.solid { mix-blend-mode:normal; }
[data-d] > :not(.dc) { position:relative; z-index:1; }
@keyframes boil { 0% { translate:0 0; rotate:0deg; } 33% { translate:0 -.04em; rotate:2.4deg; } 66% { translate:0 .02em; rotate:-1.8deg; } 100% { translate:0 0; rotate:0deg; } }
.hov:hover .ch, .hov:focus-visible .ch { animation:boil .42s steps(1, end) calc(var(--i, 0) * 30ms) 1; }
@keyframes rise { from { opacity:0; translate:0 22px; } }
@keyframes sweep { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes fade { from { opacity:0; } }

/* ---------- 总览 ---------- */
#home { overflow-x:clip; position:relative; z-index:1; max-width:1320px; margin:0 auto; padding:58px 64px 64px; }
.hero { display:grid; grid-template-columns:1fr; gap:44px; align-items:start; }
.hero h1 { font-family:var(--marker); font-size:clamp(70px,8.2vw,118px); line-height:1.12; }
.slogan { text-wrap:balance; display:inline-block; margin-top:14px; font-family:var(--marker); font-size:clamp(24px,2.7vw,36px); line-height:1.3; }
.lead { margin-top:22px; max-width:690px; font-size:21px; line-height:1.72; color:var(--mute); }
.pcard { padding:14px 14px 16px; rotate:1.8deg; animation:rise .7s var(--flow-in) .12s backwards; }
.ph { display:block; overflow:hidden; height:244px; }
.ph img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 12%; }
.pcard h2 { margin-top:13px; font-family:var(--marker); font-size:31px; line-height:1.1; }
.pcard p { margin-top:6px; font-size:15.5px; line-height:1.5; color:var(--mute); }
.stairs { display:flex; align-items:flex-end; margin-top:30px; }
.s { flex:1; min-width:0; height:var(--h); padding:15px 18px 12px; text-align:left; cursor:pointer; font-size:19px; line-height:1.3; display:flex; flex-direction:column; transition:translate .2s var(--ease); animation:rise .62s var(--flow-in) calc(var(--i) * 75ms) backwards; }
.s:hover { translate:0 -6px; }
.s[aria-pressed=true] { translate:0 -10px; }
.s > * { display:block; }
.s .cat { font-size:.86em; color:var(--mute); }
.s .n { text-wrap:balance; margin-top:6px; font-family:var(--marker); font-size:1.24em; line-height:1.24; }
.s .dw { margin-top:6px; }
.s .d { display:inline-block; font-family:var(--marker); font-size:2.6em; line-height:1.1; }
.s .d small { font-size:.5em; margin-left:.12em; }
.s .k { margin-top:9px; font-size:.86em; line-height:1.45; word-break:keep-all; overflow-wrap:anywhere; }
.s1 { --h:260px; --i:0; } .s2 { --h:330px; --i:1; }
.detail { margin-top:34px; padding:30px 36px 34px; }
.dh { display:flex; gap:28px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }
.dh h3 { font-family:var(--marker); font-size:42px; line-height:1.15; }
.dh p { margin-top:9px; max-width:760px; font-size:19px; line-height:1.62; color:var(--mute); }
.go { display:inline-block; padding:13px 28px 11px; font-family:var(--marker); font-size:25px; line-height:1.1; text-decoration:none; transition:translate .18s var(--ease); }
.go:hover { translate:0 -3px; }
.parts { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px 34px; margin-top:26px; }
.part { animation:rise .4s var(--flow-in) calc(var(--i) * 45ms) backwards; }
.part h4 { display:inline-block; margin-bottom:9px; font-family:var(--marker); font-size:19px; }
.part li { display:flex; font-size:17px; line-height:1.5; padding:.16em 0; }
.part li b { flex:none; font-weight:400; color:var(--mute); min-width:1.9em; }
.logic { margin-top:30px; font-size:20px; line-height:1.6; }
.logic > span { display:inline-block; margin-right:14px; padding:0 8px; font-family:var(--marker); }

/* ---------- 播放页 ---------- */
#play { display:none; position:fixed; inset:0; z-index:1; }
body.playing #home { display:none; }
body.playing #play { display:flex; }
#side > :not(.dc) { position:relative; z-index:1; }
#side { position:relative; z-index:3; width:292px; flex:none; display:flex; flex-direction:column; min-height:0; transition:margin-left .22s var(--ease); }
body.noside #side { margin-left:-292px; }
body.noside .card-side { opacity:0; }
.shead { display:flex; align-items:center; justify-content:space-between; padding:13px 12px 8px 18px; }
.logo { font-family:var(--marker); font-size:22px; line-height:1.1; text-decoration:none; }
.logo:hover { color:var(--cci); }
.icon { width:32px; height:32px; cursor:pointer; background:var(--ico-hide) center/24px 24px no-repeat; transition:translate .15s var(--ease); }
.icon:hover { translate:-2px 0; }
.ladder { display:flex; align-items:flex-end; height:56px; padding:0 18px; }
.ladder a { flex:1; display:flex; align-items:flex-end; justify-content:center; height:var(--h); padding-bottom:3px; font-family:var(--marker); font-size:15px; line-height:1.1; text-decoration:none; transition:translate .15s var(--ease); }
.ladder a:hover { translate:0 -3px; }
.ladder a > span { display:inline-block; min-width:1.1em; text-align:center; }
.cname { padding:13px 18px 0; }
.cname b { display:block; font-family:var(--marker); font-weight:400; font-size:24px; line-height:1.2; text-wrap:balance; }
.cname span { display:block; margin-top:4px; font-size:14px; color:var(--mute); }
.find { display:block; margin:13px 18px 0; }
.find input { width:100%; border:0; background:transparent; padding:5px 2px 4px; font:15px/1.3 var(--hand); color:var(--ink); border-radius:0; }
.find input::placeholder { color:var(--graphite); opacity:1; }
.find input:focus { outline:0; }
.found { margin:7px 18px 0; font-size:13.5px; color:var(--mute); }
.found:empty { display:none; }
.tt { align-self:flex-start; margin:15px 18px 7px; padding:0 7px; font-family:var(--marker); font-size:15px; line-height:1.4; }
#toc { position:relative; z-index:1; flex:1; min-height:0; overflow-y:auto; padding:0 8px 12px 10px; scrollbar-width:thin; scrollbar-color:var(--rule) transparent; }
.pt { margin:13px 8px 3px; font-family:var(--marker); font-size:15px; line-height:1.3; color:var(--cci); }
.nd { display:flex; align-items:flex-start; }
.nd.leaf { padding-left:26px; }
.nd > a, .kids a { position:relative; text-decoration:none; background:var(--squig) no-repeat left bottom / 0 7px; transition:background-size .28s var(--ease); }
.nd > a:hover, .kids a:hover { background-size:100% 7px; }
.nd > a { flex:1; min-width:0; padding:6px 6px 7px; font-size:16px; line-height:1.34; }
.nd.cur > a { font-family:var(--marker); color:var(--cci); }
.chev { flex:none; width:26px; height:32px; cursor:pointer; background:var(--ico-chev) center/15px 15px no-repeat; transition:rotate .16s var(--ease); }
.nd.open .chev { rotate:90deg; }
.kids { display:none; margin:0 0 7px 13px; padding:0 0 0 9px; }
.nd.open + .kids { display:block; }
.kids a { display:flex; gap:7px; padding:5px 6px 6px; font-size:14.5px; line-height:1.38; }
.kids a b { flex:none; font-weight:400; color:var(--mute); }
.kids a > span { min-width:0; }
.hl { position:absolute; pointer-events:none; mix-blend-mode:multiply; z-index:-1; animation:sweep .34s var(--ease); }
.sfoot { position:relative; flex:none; display:flex; flex-direction:column; gap:9px; padding:11px 16px 14px; }
.sfoot a { display:block; text-decoration:none; font-size:14.5px; line-height:1.3; }
.sfoot a small { display:block; font-size:12.5px; color:var(--mute); }
.sfoot .pv { padding:1px 4px; }
.sfoot .pv:hover { color:var(--cci); }
.sfoot .nx { padding:8px 11px 7px; font-family:var(--marker); font-size:15.5px; transition:translate .18s var(--ease); }
.sfoot .nx small { font-family:var(--hand); color:var(--ink); }
.sfoot .nx:hover { translate:0 -2px; }
#stage { flex:1; min-width:0; position:relative; container-type:size; }
#fr { position:absolute; inset:0; width:100%; height:100%; border:0; background:var(--paper); }
#show { display:none; position:absolute; left:0; top:50%; z-index:6; translate:0 -50%; width:34px; padding:13px 0; cursor:pointer; font-family:var(--marker); font-size:15px; line-height:1.2; writing-mode:vertical-rl; letter-spacing:.1em; }
#show span { display:inline-block; }
#show { background-color:var(--paper); border-radius:8px; }
body.noside #show { display:block; }

/* ---------- 衔接页与结课页：1600×900 画板 ---------- */
#bridge { position:absolute; inset:0; z-index:5; display:none; overflow:auto; outline:0; background-color:var(--paper); background-image:var(--paper-img, none); background-size:512px 512px; scrollbar-width:thin; scrollbar-color:var(--rule) transparent; }
body.bridging #bridge { display:block; }
.br { overflow-x:clip; --u:min(calc(100cqw / 1600), calc(100cqh / 900)); position:relative; min-height:100%; padding:calc(36 * var(--u)) calc(92 * var(--u)) calc(30 * var(--u)); font-size:calc(24 * var(--u)); line-height:1.5; display:flex; flex-direction:column; justify-content:center; }
.kk { align-self:flex-start; padding:0 .4em; font-size:.92em; color:var(--mute); animation:fade .5s var(--ease) backwards; }
.br h1 { margin-top:.2em; font-family:var(--marker); font-size:2.5em; line-height:1.2; text-wrap:balance; animation:rise .6s var(--flow-in) .06s backwards; }
.steps { display:flex; align-items:flex-end; gap:calc(74 * var(--u)); margin-top:calc(26 * var(--u)); }
.st { flex:1; min-width:0; padding:1.1em 1.25em 1.15em; animation:rise .6s var(--flow-in) calc(var(--i) * 130ms + 180ms) backwards; }
.st h2 { display:inline-block; padding:0 .35em; font-size:.86em; color:var(--mute); }
.st h3 { display:inline-block; margin-top:.28em; font-family:var(--marker); font-size:1.42em; line-height:1.22; }
.st p { margin-top:.46em; line-height:1.52; }
.st.a { min-height:calc(310 * var(--u)); }
.st.b { min-height:calc(346 * var(--u)); }
.st.c { min-height:calc(382 * var(--u)); }
.start { display:inline-block; margin-top:.65em; padding:.42em .9em .34em; font-family:var(--marker); font-size:1.06em; line-height:1.1; text-decoration:none; transition:translate .18s var(--ease); }
.start:hover { translate:0 -3px; }
.steps > .dc { animation:sweep .7s var(--ease) .75s backwards; }
.joins { margin-top:calc(24 * var(--u)); animation:fade .6s var(--ease) .9s backwards; }
.joins h2 { margin-bottom:.3em; font-family:var(--marker); font-size:1em; }
.join { display:grid; grid-template-columns:1fr calc(62 * var(--u)) 1fr; align-items:center; gap:calc(14 * var(--u)); font-size:.92em; }
.join a { padding:.34em .2em .38em; line-height:1.35; text-decoration:none; background:var(--squig) no-repeat left 92% / 0 7px; transition:background-size .28s var(--ease); }
.join a:hover { background-size:100% 7px; }
.tips { margin-top:calc(14 * var(--u)); font-size:.78em; color:var(--mute); }
.tips a { color:var(--ink); text-underline-offset:.2em; }
.done { display:flex; align-items:flex-end; margin-top:calc(40 * var(--u)); }
.done li { flex:1; min-width:0; height:calc(var(--h) * var(--u)); padding:1em .95em; animation:rise .6s var(--flow-in) calc(var(--i) * 110ms + 180ms) backwards; }
.done a { display:block; text-decoration:none; }
.done b { text-wrap:balance; display:block; font-family:var(--marker); font-weight:400; font-size:1.2em; line-height:1.24; }
.done a > span { display:block; margin-top:.45em; line-height:1.45; }
.fin { margin-top:calc(36 * var(--u)); }
.fin a { display:inline-block; padding:.42em .9em .34em; font-family:var(--marker); font-size:1.06em; line-height:1.1; text-decoration:none; }

/* 窄的舞台（手机，或宽屏里目录占掉一块）：竖排，字号不再跟画板缩 */
@container (max-width:780px) {
  .br { --u:.7px; padding:26px 18px 88px; justify-content:flex-start; }
  .br h1 { font-size:2.05em; }
  .steps { display:block; margin-top:20px; }
  .st { min-height:0 !important; margin-bottom:38px; }
  .st:last-child { margin-bottom:0; }
  .joins { margin-top:26px; }
  .join { grid-template-columns:1fr; gap:0; padding:7px 0 6px; }
  .join i { display:none; }
  .join a { padding:2px 2px; }
  .join a:last-of-type::before { content:"→ "; color:var(--mute); }
  .done { display:block; }
  .done li { height:auto; margin-bottom:8px; }
}
@media (max-width:860px) {
  #home { padding:26px 22px 44px; }
  .hero { grid-template-columns:1fr; gap:22px; }
  .hero h1 { font-size:58px; }
  .lead { font-size:17px; }
  .pcard { display:grid; grid-template-columns:112px 1fr; gap:0 14px; align-items:center; rotate:.8deg; padding:10px; }
  .ph { height:112px; }
  .pcard h2 { margin-top:0; font-size:26px; }
  .pcard p { margin-top:3px; font-size:14px; }
  .stairs { display:block; margin-top:24px; }
  .s { width:calc(100% - var(--p)); margin-left:var(--p); height:auto; padding:11px 13px; display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:10px; font-size:17px; }
  .s .cat { grid-column:1; } .s .n { grid-column:1; margin-top:2px; } .s .dw { grid-column:2; grid-row:1 / 3; margin:0; } .s .d { font-size:2.1em; }
  .s .k { display:none; }
  .s:hover, .s[aria-pressed=true] { translate:0 0; }
  .s1 { --p:0px; } .s2 { --p:9px; } .s3 { --p:18px; } .s4 { --p:27px; } .s5 { --p:36px; }
  .detail { padding:22px 18px 26px; margin-top:22px; }
  .dh h3 { font-size:30px; } .dh p { font-size:16.5px; }
  .go { width:100%; text-align:center; }
  .logic { font-size:17px; }
  #side { position:absolute; inset:0 auto 0 0; z-index:20; width:min(320px,86vw); margin-left:-110%; }
  body.drawer #side { margin-left:0; box-shadow:0 0 0 100vw rgba(70,52,28,.32); }
  body.noside #side { margin-left:-110%; }
  #show, body.noside #show { display:block; left:10px; top:auto; bottom:76px; translate:none; width:auto; padding:8px 14px; writing-mode:horizontal-tb; letter-spacing:0; font-size:16px; }
  body.bridging #show { bottom:14px; }
  body.drawer #show { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; }
}