:root{color-scheme:light;--bg:#f5eddb;--panel:#ffffff;--line:#d8ceb6;--text:#1c1c1c;--muted:#57544e;--cyan:#c2410c;--gold:#9a651b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft Yahei",sans-serif}button,input,select{font:inherit}button{cursor:pointer;background:transparent;border:1px solid var(--line);border-radius:6px;color:#384d66;padding:9px 12px;white-space:nowrap}button:hover{background:#f5f2ea;border-color:#385766;color:#fff}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none}.mark{font-size:35px;color:var(--cyan)}.brand strong{font-weight:600;letter-spacing:2px;font-size:16px}.brand strong span{display:block;font-weight:400;letter-spacing:2.5px;font-size:12px;color:#3f4f60;margin-top:5px}.header-note{font-size:15px;color:#3a4e64}.header-note span{color:#414f5d;margin-left:18px}main{padding:22px 26px 0;max-width:2000px;margin:auto}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px}.prompt-area{min-width:240px;flex:1;max-width:470px}.prompt-area>label{display:block;color:#3b4e63;margin-bottom:9px;font-size:13px}.prompt-area>label span{font-size:12px;color:#414f5d;margin-left:10px}.prompt-area>div{display:flex;gap:7px}.prompt-area input{flex:1;min-width:0;padding:10px 12px;background:#f7f4ee;border:1px solid #cdc5b1;border-radius:6px;color:#3f837a;font-size:15px;letter-spacing:.5px}.prompt-area button{color:var(--cyan)}.playback{display:flex;gap:9px;align-items:center;margin-top:23px}.playback .primary{background:var(--cyan);border-color:var(--cyan);color:#f7f5ee;font-weight:600;padding:11px 17px}.playback select{border:0;background:var(--bg);color:#394d66;padding:8px}.cache-label{display:grid;grid-template-columns:18px 1fr;gap:5px 9px;align-items:center;cursor:pointer;margin-top:16px}.cache-label input{accent-color:var(--cyan);width:16px;height:16px;grid-row:1/3}.cache-label span{font-size:13px;color:#437f7d}.cache-label small{font-size:12px;color:#404e5e}.map-shell{border:1px solid #d2cbb8;border-radius:10px;background:radial-gradient(ellipse at 50% 30%,#f6f4ed 0,transparent 75%),#f8f5f0;overflow:hidden;box-shadow:0 22px 60px #0002}.map-top,.map-bottom{display:flex;align-items:center;justify-content:space-between;padding:13px 19px;gap:15px}.map-top{border-bottom:1px solid #f4f1e9}.map-top>span{color:#426080;font-size:13px}.map-top i{display:inline-block;width:6px;height:6px;background:var(--cyan);border-radius:50%;margin-right:8px}.map-top small{color:#3e5060;font-size:11px;margin-left:15px;letter-spacing:1.2px}.view-tools{display:flex;align-items:center;gap:8px}.view-tools button{padding:5px 9px;font-size:12px;border-color:#d0c8b5}.view-tools #zoomLabel{font-size:11px;color:#3d5061;min-width:35px;text-align:center}.map-scroll{width:100%;overflow:auto;scrollbar-color:#c3baa2 #f7f5ef}.map-scroll svg{width:100%;height:auto;display:block;min-width:1050px;user-select:none}svg text{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif}svg .interactive{cursor:pointer;outline:none}svg .interactive:focus-visible{filter:drop-shadow(0 0 5px #fff)}svg .interactive:hover>.node-box{stroke:#30917b;stroke-width:1.6}svg .wire{fill:none;stroke-linecap:round}svg .packet{filter:drop-shadow(0 0 4px currentColor)}svg .pulse-box{animation:shine 1.3s infinite alternate}svg .depth{transition:opacity .3s}body.flat svg .depth{opacity:0}.map-bottom{border-top:1px solid #f4f1e9;flex-wrap:wrap;color:#3b4f63;font-size:12px}.head-picker,.layer-picker{display:flex;align-items:center;gap:7px}.head-picker button,.layer-picker button{font-size:12px;padding:5px 8px;color:#3d4e61}.head-picker button.active{background:#46259d22;border-color:#4b358d;color:#4b259d}.layer-picker button.active{background:#c2410c17;border-color:#3c635e;color:#269c8b}.temperature{display:flex;align-items:center;gap:10px}.temperature input{width:95px;accent-color:var(--gold)}.temperature span{color:var(--gold);min-width:22px}.explanation{display:flex;gap:18px;padding:24px 10px 20px;align-items:flex-start}.explanation-index{border:1px solid #bdb398;background:#c2410c0b;border-radius:7px;min-width:42px;height:42px;display:grid;place-items:center;color:var(--cyan);font-size:20px}.explanation>div:nth-child(2){flex:1;max-width:1000px}.explanation h2{font-size:16px;font-weight:500;margin:0 0 8px;color:#3c7286}.explanation p{font-size:14px;line-height:1.9;color:#3b5063;margin:0}.legend{display:flex;flex-direction:column;gap:9px;margin-left:auto;padding-left:25px;min-width:228px;font-size:12px;color:#3b4f63}.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:8px}.token-dot{background:#9d6925}.weight-dot{background:#4a3b86}.mask-dot{background:repeating-linear-gradient(135deg,#404d5e 0 1px,#f6f3ec 1px 4px)}.generation{display:flex;align-items:center;gap:18px;border-top:1px solid #f4f1e9;border-bottom:1px solid #f4f1e9;padding:15px 10px;min-height:65px}.generation-label{font-size:12px;color:var(--gold);white-space:nowrap}#sentence{display:flex;align-items:center;gap:7px;flex-wrap:wrap}#sentence span{padding:6px 10px;background:#f6f4ed;border-radius:4px;color:#406382;font-size:14px}#sentence span.new{color:var(--gold);background:#9d692512;border:1px solid #886a3a55}#generationNote{margin-left:auto;color:#3e4f60;font-size:12px}footer{display:flex;justify-content:space-between;gap:25px;padding:16px 4px 20px;font-size:11px;color:#3e5060;line-height:1.8}footer a{color:#3c5162;text-decoration:none;white-space:nowrap}#status{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#f4f1e9;color:#279b74;padding:12px 20px;border:1px solid #3e5560;border-radius:8px;display:none;z-index:10}.immersive header .header-note,.immersive footer,.immersive .explanation,.immersive .generation{display:none}.immersive main{max-width:none;padding:12px}.immersive header{height:60px}.immersive .toolbar{margin-bottom:12px}.immersive .map-scroll svg{min-width:100%;max-height:calc(100dvh - 245px)}@keyframes shine{to{filter:drop-shadow(0 0 5px #259d8755)}}@media(min-width:1700px){.map-scroll svg{max-height:760px}.explanation h2{font-size:18px}.explanation p{font-size:16px}}@media(max-width:1100px){header{padding:0 20px}.header-note span{display:none}.toolbar{gap:15px}.cache-label{display:none}.legend{display:none}.prompt-area{max-width:410px}.map-scroll svg{min-width:1050px}.map-top small{display:none}#generationNote{max-width:200px}}@media(max-width:760px){header{padding:0 14px;height:70px}.header-note{display:none}.brand strong{font-size:13px}.brand strong span{font-size:10px}header button{font-size:12px;padding:8px}main{padding:16px 12px 0}.toolbar{flex-wrap:wrap;gap:12px}.prompt-area{max-width:none;flex-basis:100%}.playback{margin-top:0;width:100%;justify-content:space-between}.playback button{font-size:12px}.map-top{padding:11px;gap:8px}.map-top>span{font-size:12px}.view-tools{gap:4px}.view-tools button{font-size:10px;padding:5px 7px}#depth{display:none}.map-bottom{padding:12px;font-size:11px;gap:14px}.head-picker,.layer-picker{gap:5px}.temperature{margin-left:auto}.explanation{padding:20px 0;gap:12px}.explanation h2{font-size:15px}.explanation p{font-size:13px}.explanation-index{min-width:32px;height:32px;font-size:15px}.generation{flex-wrap:wrap;gap:10px;padding:12px 0}#generationNote{max-width:none;margin-left:0;width:100%}footer{display:block;font-size:10px}footer a{display:block;margin-top:7px}.immersive .map-scroll svg{min-width:1050px;max-height:none}}
@media(prefers-reduced-motion:reduce){svg .pulse-box{animation:none}}

.head-card-back{filter:none}#head-transition{isolation:isolate}#head-transition>g{transform-origin:562px 396px}.head-picker{flex-wrap:wrap}.head-picker button.active{box-shadow:0 0 12px #46259d1a}

#block-transition>g{transform-origin:760px 395px}#block-frame{transition:stroke .2s}svg:has(.block-nav:hover) #block-frame,svg:has(.block-nav:focus-visible) #block-frame,.switching-block #block-frame{stroke:#388a81;stroke-dasharray:7 5}.block-nav[aria-disabled="true"]{cursor:default}.block-nav[aria-disabled="false"]:hover rect{stroke:#2d9584;fill:#d3ccba}.switching-block #map .interactive{pointer-events:none}.switching-block .block-nav{opacity:.3}button:disabled{cursor:default;opacity:.4}.layer-picker{flex-wrap:wrap}

/* Match the course's cream paper, ink outlines and yellow brand accents. */
@font-face{font-family:AlimamaShuHeiTi;src:url('/font/AlimamaShuHeiTi-Bold.woff2') format('woff2');font-display:swap}
html{background:#f5eddb}body{background:#f5eddb}header{padding:0 20px;border-bottom:1px solid #d8ceb6;height:72px}.brand strong{font-family:AlimamaShuHeiTi,sans-serif;letter-spacing:.3px;font-size:20px}.brand strong span{font-family:inherit;font-size:12px;letter-spacing:1px;color:#57544e}.mark{color:#c2410c}.header-note{display:none}main{padding:18px 18px 0}
button{color:#1c1c1c;background:#fff;border-color:#d8ceb6}button:hover{background:#fbe6c7;border-color:#c2410c;color:#9a3010}.playback .primary{background:#fac94a;color:#1c1c1c;border:2px solid #1c1c1c;box-shadow:2px 2px 0 #1c1c1c}.playback .primary:hover{background:#f5c033}.prompt-area input{background:#fff;color:#1c1c1c;border-color:#d8ceb6}.map-shell{background:#fffdf8;border:1px solid #d8ceb6;box-shadow:0 6px 20px #1c1c1c08}.map-top,.map-bottom{background:#faf6ee;border-color:#d8ceb6}.map-top>span,.explanation h2{color:#1c1c1c}.map-scroll{scrollbar-color:#b9ac91 #f5eddb}.map-scroll svg{min-width:1050px}.explanation p{color:#57544e;overflow-wrap:anywhere}.head-picker button.active{color:#6d459c;background:#eee5f8;border-color:#7956ae}.layer-picker button.active{color:#9a3010;background:#fbe6c7;border-color:#c2410c}.explanation-index{background:#fac94a;color:#1c1c1c;border-color:#1c1c1c}.temperature input{accent-color:#c2410c}.cache-label input{accent-color:#c2410c}#sentence span{background:#fff;color:#57544e}#sentence span.new{background:#fbe6c7;color:#9a3010}.generation{border-color:#d8ceb6}footer{color:#57544e}footer a{color:#9a3010;white-space:normal}#status{background:#1c1c1c;color:#fff;border-color:#fac94a;max-width:calc(100% - 24px);width:max-content}svg .interactive:focus-visible{filter:drop-shadow(0 0 3px #c2410c)}svg .interactive:hover>.node-box{stroke:#c2410c}.head-card-back{filter:none}
@media(max-width:1100px){.toolbar{flex-wrap:wrap;gap:14px}.prompt-area{flex-basis:100%;max-width:none}.playback{margin-top:0}.cache-label{display:grid;margin-top:0}.map-top{flex-wrap:wrap}.legend{display:none}}
@media(max-width:760px){main{padding:14px 10px 0}header{padding:0 12px}.brand strong{font-size:17px}.playback{gap:5px;flex-wrap:wrap}.playback .primary{padding:10px}.cache-label{display:flex}.cache-label input{margin:0}.cache-label small{margin-left:4px}.map-bottom{gap:12px}.head-picker{gap:4px}.head-picker button{padding:6px}.temperature{margin-left:0}.explanation p{font-size:14px}.map-scroll svg{min-width:1050px}}
:fullscreen{overflow:auto}.immersive .map-scroll svg{min-width:1050px;max-height:none}.immersive .map-scroll{max-height:calc(100dvh - 280px)}

/* The calculation panel is the entire embedded page. */
main,.immersive main{padding:0;max-width:none}.map-shell{border:0;border-radius:0;box-shadow:none}.toolbar{margin:0;padding:12px 16px;border-bottom:1px solid #d8ceb6;gap:12px}.prompt-area{min-width:200px;max-width:400px}.prompt-area>label{margin-bottom:5px}.playback{gap:6px}.cache-label{margin-top:18px}.map-top{flex-wrap:wrap}.view-tools{flex-wrap:wrap}.map-bottom{padding:12px 16px}.immersive .toolbar{margin-bottom:0}.immersive .map-scroll{max-height:none}#head-transition>g{transform-origin:472px 396px}#block-transition>g{transform-origin:670px 395px}
@media(max-width:1100px){.prompt-area{flex-basis:100%;max-width:none}.cache-label{margin-top:0}.playback{margin-top:0}}
@media(max-width:760px){.toolbar{padding:10px}.map-top{padding:10px}.map-bottom{padding:10px}}
/* Fit the complete graph to the wide lesson panel without SVG letterboxing. */
.map-scroll svg,.immersive .map-scroll svg{min-width:0;max-height:none}
@media(max-width:760px){.map-scroll svg,.immersive .map-scroll svg{min-width:1050px}}

/* Keep the unique temperature control with the other input controls. */
.toolbar{flex-wrap:wrap}.toolbar .temperature{font-size:12px;margin-top:18px}
@media(max-width:1100px){.toolbar .temperature{margin-top:0;margin-left:0}}

/* The host page owns vertical scrolling; keep the embedded panel edge flush. */
html,body{overflow-y:hidden}
.map-scroll{overflow-x:auto;overflow-y:hidden}