:root{--ink: #3d3832;--paper: #f1ede4;--paper-hi: #fbf7ee;--tray: #d8d0c2;--bg: #ebe6dc;--muted: #6f695d;--soft: #958d7d;--coral: #e2725d;--coral-hi: #f39a86;--mint: #6aa797;--mint-bg: #dcebe0;--mustard: #eebd59;--cream: #efe5c9}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#35312b;font-family:Nunito,-apple-system,BlinkMacSystemFont,PingFang TC,Noto Sans TC,Microsoft JhengHei,sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid var(--mint);outline-offset:3px}button:disabled{cursor:default}[hidden]{display:none!important}code,pre{font-family:ui-monospace,SF Mono,Menlo,monospace}.page{max-width:1180px;margin:36px auto 48px;padding:0 22px}.top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:40px;font-size:14px;color:#787367}.brand b{font-size:22px;font-weight:800;color:#35312b;letter-spacing:1px}.brand-sub{font-weight:700}.brand-logo{width:40px;height:40px;vertical-align:middle;margin:-6px 6px -4px -4px}.brand-home{display:inline-block;border-radius:12px;transition:transform .2s cubic-bezier(.3,1.4,.5,1)}.brand-home:hover{transform:rotate(-8deg) scale(1.06)}.brand span{margin:0 8px;color:#b3ab9b}.bookbtn{background:#f4efe4;border:1.5px solid var(--ink);border-radius:12px;padding:9px 14px;box-shadow:0 2px 0 var(--ink);font-weight:800;font-size:13px;transition:transform .12s,box-shadow .12s}.top-actions{display:flex;gap:8px;align-items:center;flex:none}.bookbtn{white-space:nowrap}.brand{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding:8px 0 8px 6px;margin:-8px 0 -8px -6px}.bookbtn .count{font-size:10px;background:#e3dccd;border-radius:999px;padding:1px 6px;margin-left:3px}.settings{position:relative}.gearbtn{width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:#f4efe4;border:1.5px solid var(--ink);border-radius:12px;box-shadow:0 2px 0 var(--ink);transition:transform .12s,box-shadow .12s}.gearbtn:active{transform:translateY(2px);box-shadow:0 0 0 var(--ink)}.gear{width:24px;height:24px;transition:transform .45s cubic-bezier(.3,1.4,.5,1)}.gearbtn:hover .gear{transform:rotate(25deg)}.gearbtn[aria-expanded=true]{background:#f8e3ad}.gearbtn[aria-expanded=true] .gear{transform:rotate(90deg)}.settings-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:20;width:214px;background:var(--paper-hi);border:1.5px solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--ink),0 12px 24px #4a3d2a22;padding:12px 14px 10px;animation:drop .24s cubic-bezier(.3,1.3,.5,1)}.settings-panel:before{content:"";position:absolute;right:12px;top:-7px;width:11px;height:11px;background:var(--paper-hi);border-left:1.5px solid var(--ink);border-top:1.5px solid var(--ink);transform:rotate(45deg)}.set-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;font-weight:800;color:var(--ink);padding:6px 0}.set-row+.set-row{border-top:1.3px dashed #d3cab8}.switch{width:44px;height:24px;padding:0;border:1.5px solid var(--ink);border-radius:999px;background:#e3dccd;position:relative;box-shadow:inset 0 2px #00000012;transition:background .2s}.switch i{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--paper-hi);border:1.3px solid var(--ink);box-shadow:0 1.5px 0 var(--ink);transition:transform .22s cubic-bezier(.3,1.4,.5,1)}.switch[aria-checked=true]{background:#7fd0a8}.switch[aria-checked=true] i{transform:translate(19px)}.lang{position:relative}.lang-btn{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--ink);background:var(--mustard);border:1.5px solid var(--ink);border-radius:999px;box-shadow:0 2px 0 var(--ink);padding:4px 10px 4px 13px;transition:transform .12s,box-shadow .12s}.lang-btn:after{content:"";width:6px;height:6px;border:solid var(--ink);border-width:0 1.8px 1.8px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}.lang-btn[aria-expanded=true]:after{transform:translateY(1px) rotate(-135deg)}.lang-btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--ink)}.lang-list{position:absolute;right:0;top:calc(100% + 8px);z-index:2;min-width:100%;display:flex;flex-direction:column;background:var(--paper-hi);border:1.5px solid var(--ink);border-radius:12px;box-shadow:0 3px 0 var(--ink),0 10px 18px #4a3d2a22;overflow:hidden;animation:drop .2s cubic-bezier(.3,1.3,.5,1)}.lang-list[hidden]{display:none}.lang-list button{border:0;background:none;text-align:left;font-size:12px;font-weight:800;color:var(--muted);padding:6px 13px;white-space:nowrap}.lang-list button+button{border-top:1.3px dashed #d3cab8}.lang-list button:hover,.lang-list button:focus-visible{background:#f4efe4;outline:none}.lang-list button[aria-selected=true]{background:var(--mustard);color:var(--ink)}.top-actions{position:relative}.settings{position:static}.gearbtn{width:44px;height:44px}.settings-panel{width:min(290px,calc(100vw - 24px));padding:14px 16px 12px}#settings-panel:before{right:62px}.nav-panel{display:grid;width:min(240px,calc(100vw - 24px));padding:6px 16px}.nav-panel[hidden]{display:none}.nav-panel .bookbtn{display:flex;align-items:center;width:100%;text-align:left;color:var(--ink);font-size:15px;padding:12px 0;background:none;border:0;border-radius:0;box-shadow:none}a.bookbtn{text-decoration:none}.nav-panel .bookbtn:active{transform:none;opacity:.6}.nav-panel .bookbtn:not([hidden])~.bookbtn{border-top:1.3px dashed #d3cab8}.nav-panel .bookbtn .count{font-size:12px;margin-left:auto;padding:2px 8px}.navico{width:26px;height:26px}.btnico{width:20px;height:20px;margin-right:8px}.shelf-head{display:flex;grid-column:1 / -1;align-items:center;justify-content:space-between;padding:0 0 6px 2px;border-bottom:1.3px dashed #d3cab8}.shelf-head b{font-size:16px}.shelf-x{width:36px;height:36px;padding:0;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper-hi);box-shadow:0 2px 0 var(--ink);font-size:16px;font-weight:800}.shelf-x:active{transform:translateY(2px);box-shadow:none}.set-note{margin:4px 0 0;font-size:10px;color:var(--soft);font-weight:700;text-align:right}.bookbtn:active{transform:translateY(2px);box-shadow:0 0 0 var(--ink)}.shelf{background:var(--paper);border:1.5px solid var(--ink);border-radius:18px;padding:16px 16px 10px;margin-bottom:16px;box-shadow:0 3px 0 var(--ink);display:grid;grid-template-columns:repeat(2,1fr);gap:4px 18px;animation:drop .28s cubic-bezier(.3,1.3,.5,1)}.shelf .lesson.epilogue{grid-column:1 / -1;margin-top:8px;border-top:1.5px dashed #d8cfbf;padding-top:10px}.shelf .lesson.epilogue .num svg{width:18px;height:18px}@keyframes drop{0%{transform:translateY(-8px);opacity:0}}.week{grid-column:1 / -1;font-size:10px;letter-spacing:1.6px;color:var(--soft);font-weight:800;margin:8px 2px 2px;display:flex;gap:8px}.week span{letter-spacing:0;color:var(--muted)}.lesson{display:flex;align-items:center;gap:10px;text-align:left;background:none;border:1.3px solid transparent;border-radius:12px;padding:7px 9px;font-size:13px;font-weight:700;color:#8a8374}.lesson .num{font-size:10px;border:1.3px solid #b3ab9b;border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex:none}.lesson .name{flex:1;display:flex;flex-direction:column;line-height:1.4}.lesson .name small{font-size:10px;font-weight:600;color:#a39b8b}.lesson i{font-style:normal;font-size:10px;color:#a39b8b}.lesson.current{background:var(--paper-hi);border-color:var(--ink);color:var(--ink)}.lesson.current .num{border-color:var(--ink);background:var(--coral)}.lesson.current i{color:var(--ink);font-weight:800}.lesson:not(.current):hover{background:#e8e2d6}.heading{padding:24px 26px 0;position:relative;z-index:1}.label{font-size:10px;letter-spacing:1.8px;color:var(--soft);margin-bottom:10px;font-weight:800}h1{font-size:23px;line-height:1.45;margin:0 0 4px;font-weight:800}.sub{font-size:13px;color:#5f5a50;margin:0;line-height:1.8;font-weight:700}.intro{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.intro>div:only-child{grid-column:1 / -1}.intro>div{background:#f6f2ea;border:1.3px solid #d8cfbf;border-radius:12px;padding:8px 11px}.intro b{font-size:12px;font-weight:800}.intro b small{font-size:10px;color:var(--muted);font-weight:700;margin-left:4px}.intro .knobs{display:flex;flex-wrap:wrap;gap:4px;margin:5px 0 4px}.intro .knobs span{font-size:10.5px;background:#ebe4d6;border-radius:999px;padding:1px 7px;font-weight:700}.intro .knobs i{font-style:normal;font-weight:800;margin-right:2px}.intro p{font-size:11px;line-height:1.7;color:#5f5a50;margin:0}.predict{margin:16px 26px 0;padding:12px 14px;border:1.5px dashed #b9b09f;border-radius:14px;background:#f6f2ea;position:relative;z-index:1}.predict-q{display:flex;align-items:baseline;gap:10px;font-size:13px;line-height:1.7}.bubble{flex:none;background:var(--mustard);border:1.3px solid var(--ink);border-radius:999px 999px 999px 4px;padding:1px 9px;font-size:10px;font-weight:800}.predict-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.opt{background:var(--paper-hi);border:1.3px solid var(--ink);border-radius:999px;padding:6px 13px;font-size:12px;font-weight:700;box-shadow:0 2px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .2s}.opt:not(:disabled):active{transform:translateY(2px);box-shadow:0 0 0 var(--ink)}.opt:not(:disabled):hover{background:#fff}.opt[data-result=correct]{background:#cfe8dc}.opt[data-result=wrong]{background:#f6d5cc;animation:shake .35s}.opt:disabled:not([data-result=correct]){opacity:.5}@keyframes shake{25%{transform:translate(-3px)}75%{transform:translate(3px)}}.predict-fb{font-size:12px;line-height:1.8;margin:8px 2px 0;color:#5f5a50;font-weight:700}.stage{position:relative;aspect-ratio:16 / 10;margin-top:-6px}#canvas-host{position:absolute;top:0;right:0;bottom:0;left:0}#canvas-host canvas{width:100%!important;height:100%!important;display:block;touch-action:none;cursor:grab}#canvas-host canvas:active{cursor:grabbing}.labels{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:1}.tag{position:absolute;left:0;top:0;font-size:11px;font-weight:800;color:#5d5a4f;white-space:nowrap;transition:opacity .25s}.tag.coral,.tag.mustard,.tag.teal{background:var(--paper-hi);border:1.3px solid var(--ink);border-radius:999px;padding:2px 9px;color:var(--ink);box-shadow:0 2px 0 var(--ink)}.tag.coral{background:#fbd3c4}.tag.mustard{background:#f8e3ad}.tag.teal{background:#cfe8dc}.tag.axis-x,.tag.axis-y,.tag.axis-z{width:24px;height:24px;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:50%;color:#fff;font-size:12px;box-shadow:0 2px 0 var(--ink)}.tag.axis-x{background:#e2735a}.tag.axis-y{background:#6fae6a}.tag.axis-z{background:#6f9fd8}.tag.deg{background:#fbf7eecc;border-radius:6px;padding:0 5px;font-size:10.5px;color:var(--ink)}.preview{position:absolute;right:22px;top:8px;width:168px;background:var(--paper-hi);border:1.5px solid var(--ink);border-radius:12px;padding:8px 9px 7px;transform:rotate(3deg);box-shadow:0 3px 0 var(--ink);z-index:2}.preview small{font-size:10px;color:var(--muted);font-weight:800}#preview-host{margin:5px 0 4px;border:1.3px solid var(--ink);border-radius:7px;overflow:hidden;aspect-ratio:5 / 3;background:var(--mint-bg);position:relative}#preview-host canvas{width:100%!important;height:100%!important;display:block}.preview.off #preview-host:after{content:"?";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#9cb8a6}.preview b{font-size:11px;display:block;text-align:center;font-weight:800}.resources{position:absolute;right:22px;top:8px;background:var(--paper-hi);border:1.5px solid var(--ink);border-radius:12px;padding:9px 13px;transform:rotate(2.5deg);box-shadow:0 3px 0 var(--ink);font-size:12px;font-weight:700;line-height:1.7;z-index:2}.resources small{display:block;font-size:10px;color:var(--muted);font-weight:800;margin-bottom:2px}.resources b{display:inline-block;min-width:18px;font-weight:800}.resources .mesh-count b{color:#c4533f}.resources .tree{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.55;white-space:pre}.resources .tree em{font-style:normal;color:var(--muted);font-size:10px}.resources .tree mark{background:none;color:#b8842e;font-weight:800}.resources .lights{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.75;white-space:nowrap}.resources .lights i{font-style:normal;color:#b9b1a1;margin-right:3px}.resources .lights i.on{color:#4f9a7f}.resources .lights i.ax{margin-right:5px}.viewbtn{position:absolute;left:22px;bottom:6px;background:var(--paper-hi);border:1.3px solid var(--ink);border-radius:999px;padding:4px 11px;font-size:11px;font-weight:800;box-shadow:0 2px 0 var(--ink)}.viewbtn:active{transform:translateY(2px);box-shadow:none}.hint{position:absolute;left:100px;bottom:10px;font-size:10px;color:var(--soft);font-weight:700;pointer-events:none}.fallback-note{position:absolute;top:20px;right:20px;bottom:20px;left:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:1.5px dashed #b9b09f;border-radius:16px;font-size:13px;color:var(--muted);padding:20px}.stage.fallback .preview,.stage.fallback .viewbtn,.stage.fallback .hint{display:none}.controls{display:flex;justify-content:space-between;align-items:flex-end;padding:6px 24px 18px;gap:10px}.actions{display:flex;gap:10px;flex-wrap:wrap}.key{background:var(--coral);color:#2e2620;border:1.5px solid var(--ink);box-shadow:0 3px 0 var(--ink),inset 0 2px 0 var(--coral-hi);border-radius:999px;padding:10px 18px;font-size:12px;font-weight:800;transition:transform .12s,box-shadow .12s,background .2s}.key:not(:disabled):active{transform:translateY(3px);box-shadow:0 0 0 var(--ink),inset 0 2px 0 var(--coral-hi)}.key.secondary{background:var(--cream);box-shadow:0 3px 0 var(--ink),inset 0 2px #fbf5e4}.key.secondary:not(:disabled):active{box-shadow:0 0 0 var(--ink),inset 0 2px #fbf5e4}.key.small{padding:7px 13px}.key:disabled{opacity:.4}.key.secondary[aria-pressed=true]{background:#f8d48a}.key.toggle{background:var(--cream);box-shadow:0 3px 0 var(--ink),inset 0 2px #fbf5e4;display:inline-flex;align-items:center;gap:6px}.key.toggle small{font-weight:700;color:var(--muted)}.key.toggle .led{width:9px;height:9px;border-radius:50%;border:1.2px solid var(--ink);background:#d6cfc1;transition:background .2s}.key.toggle[aria-pressed=true] .led{background:#7fd0a8;box-shadow:0 0 0 3px #7fd0a844}.key.toggle[aria-pressed=false]{background:#e3dccd;transform:translateY(2px);box-shadow:0 1px 0 var(--ink);color:#6f695d}.status{font-size:11px;line-height:1.8;text-align:right;color:#4d483f;font-weight:700}.status code{font-size:11px;background:#e8e2d6;border-radius:8px;padding:4px 8px}.distance{display:flex;align-items:center;gap:10px;margin:-4px 24px 22px;font-size:11px;color:#5f5a50;font-weight:800}input[type=range]{flex:1;accent-color:var(--mint);min-width:0}.outliner{list-style:none;margin:4px 0 0;padding:0;font:700 11px/1.7 ui-monospace,Menlo,monospace}.outliner li{padding-left:calc(var(--d) * 12px);white-space:nowrap}.outliner i{font-style:normal;color:var(--muted);margin-right:4px;font-size:9px}.outliner span{color:var(--muted)}.glb-link{display:inline-block;margin-top:6px;font-size:11px;font-weight:800;color:var(--ink)}.shot{display:block;margin-top:6px;border:1.3px solid var(--ink);border-radius:8px;overflow:hidden;width:150px;max-width:100%}.shot img{display:block;width:100%;height:auto}.shot.clear{background:repeating-conic-gradient(#e6e0d4 0,#e6e0d4 25%,#fbf7ee 0,#fbf7ee 50%) 0 0 / 12px 12px}.tap-note{align-self:center;font-size:11px;font-weight:800;color:var(--muted)}.ease-chart{display:block;margin:4px auto 0}.xyz{display:grid;gap:6px;margin:-4px 24px 22px}.axis-row{display:grid;grid-template-columns:22px 44px 1fr 44px;align-items:center;gap:8px;font-size:11px;color:#5f5a50;font-weight:800}.axis-row b{width:22px;height:22px;display:grid;place-items:center;border:1.3px solid var(--ink);border-radius:50%;background:var(--axis);color:#fff;font-size:11px;box-shadow:0 2px 0 var(--ink)}.axis-row input{accent-color:var(--axis)}.axis-row output{text-align:right;font-family:ui-monospace,SF Mono,Menlo,monospace;color:var(--ink)}.lab-controls{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:12px;padding:6px 22px 22px}.group{background:#ebe6dc;border-radius:14px;padding:11px 12px 8px}.group-title{font-size:12px;font-weight:800;margin-bottom:9px;display:flex;align-items:center;gap:6px}.chip{font-size:10px;border:1.2px solid var(--ink);border-radius:6px;padding:0 6px;background:var(--paper-hi)}.row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}.swatch{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ink);background:var(--c);box-shadow:0 2px 0 var(--ink),inset 0 2px #fff5;transition:transform .12s}.swatch[aria-pressed=true]{outline:2.5px solid var(--ink);outline-offset:2px}.row.tints{margin:0 0 0 4px;align-items:center;flex-wrap:nowrap}.tints .swatch{width:26px;height:26px}.swatch:active{transform:translateY(2px);box-shadow:none}.range{display:flex;flex-direction:column;font-size:11px;font-weight:700;color:#5f5a50;margin-bottom:4px}.range span{display:flex;justify-content:space-between}.range output{font-weight:800;color:var(--ink)}.range input{width:100%}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:13px 0 0}.step{border:1.5px solid transparent;background:#ece7dd;border-radius:14px;padding:12px 12px 14px;text-align:left;font-size:12px;line-height:1.9;font-weight:600;position:relative;transition:background .2s,transform .12s}.step:hover{background:#f1ece3}.step.active{border-color:var(--ink);background:#f4f0e8}.step.seen:after{content:"✓";position:absolute;top:10px;right:12px;font-size:11px;font-weight:800;color:var(--mint)}.stepnum{border:1.3px solid var(--ink);display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;border-radius:50%;font-size:10px;font-weight:800;margin-bottom:6px;background:var(--paper-hi);flex:none}.step.seen .stepnum{background:#cfe8dc}.step p{margin:0}.step em{font-style:normal;font-weight:800}.mini{width:20px;height:22px;display:inline-block;vertical-align:middle;margin:-3px 2px 0}.tinycam{width:24px;height:20px;vertical-align:middle;margin:-2px 3px 0}.explain{font-size:12px;margin:19px 1px 0;line-height:1.9;font-weight:700}.explain b{font-weight:800}.deeper{font-size:11px;line-height:1.8;color:var(--muted);margin:8px 1px 0}.deeper code{background:#e3dccd;border-radius:5px;padding:1px 5px;font-size:10.5px}.code{margin:14px 0 0;background:#36322c;color:#efe7d6;border-radius:14px;padding:14px 16px;font-size:11.5px;line-height:1.7;overflow-x:auto;box-shadow:0 3px #1f1c18}.code .c{color:#a9a08c}.code mark{background:none;color:#f8c46c}.foot{text-align:center;font-size:11px;color:#9a9384;margin-top:32px}.quiz{padding:18px 26px 26px}.quiz-top{display:flex;justify-content:space-between;align-items:center}.dots{display:flex;gap:4px}.dots i{width:8px;height:8px;border:1.3px solid var(--ink);border-radius:50%;background:var(--paper)}.dots i.active{background:var(--coral)}.quiz h2{font-size:18px;line-height:1.6;margin:14px 0}.answers{display:grid;gap:9px}.opt.big{display:flex;align-items:center;gap:10px;text-align:left;border-radius:14px;padding:11px 14px;font-size:13px}.letter{width:22px;height:22px;border:1.3px solid var(--ink);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:none;background:var(--cream)}#quiz-next{margin-top:10px}.complete{text-align:center;padding:18px 0 6px}.complete p{font-size:13px;line-height:1.9;max-width:440px;margin:0 auto 18px;color:#5f5a50;font-weight:700}.complete .actions{justify-content:center}.stamp{width:92px;height:92px;margin:0 auto 6px;border-radius:50%;border:2px solid var(--ink);background:#cfe8dc;box-shadow:0 4px 0 var(--ink),inset 0 0 0 6px var(--paper-hi),inset 0 0 0 7.5px var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:30px;font-weight:800;transform:rotate(-8deg);animation:stamp .5s cubic-bezier(.3,1.5,.5,1)}.stamp small{font-size:8px;letter-spacing:1.4px}@keyframes stamp{0%{transform:rotate(-8deg) scale(1.6);opacity:0}}.toast{position:fixed;left:50%;top:24px;transform:translate(-50%,-20px);background:var(--paper-hi);border:1.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);border-radius:999px;padding:9px 16px;font-size:12px;font-weight:800;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:10;max-width:calc(100% - 32px)}.toast.show{opacity:1;transform:translate(-50%)}.toast{display:flex;align-items:center;gap:8px}.toast img{width:40px;height:40px;margin:-12px -2px -12px -8px}.toast.sticky.show{pointer-events:auto;padding-right:8px}.toast-x{flex:none;width:22px;height:22px;margin-left:4px;border-radius:50%;border:1.3px solid var(--ink);background:var(--paper);font:inherit;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;color:var(--ink)}.toast-x:hover{background:#f8e3ad}:root{--pw: min(530px, calc((100vw - 150px)/2) );--ph: clamp(560px, calc(100vh - 210px) , 740px)}.cover-view{display:flex;flex-direction:column;align-items:center;overflow-x:clip;padding-bottom:8px}.closed-book{position:relative;width:calc(var(--pw) + 27px);height:calc(var(--ph) + 27px);perspective:2400px;transition:transform .5s cubic-bezier(.5,0,.3,1);filter:drop-shadow(0 18px 22px #4a3d2a2e)}.closed-book:before{content:"";position:absolute;top:6px;right:-9px;bottom:-9px;left:6px;border:1.5px solid var(--ink);border-radius:6px 16px 16px 6px;background:repeating-linear-gradient(90deg,#f8f1e1 0,#f8f1e1 3px,#eadfc6 3px,#eadfc6 4px),#f8f1e1}.title-page{position:absolute;top:0;right:0;bottom:0;left:0;border:1.5px solid var(--ink);border-radius:4px 16px 16px 4px;background:linear-gradient(90deg,#e6d9bd,#f8f1e1 18%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}.title-page small{font-size:11px;letter-spacing:2.4px;color:var(--soft);font-weight:800}.title-page b{font-size:28px}.title-page span{font-size:12px;color:var(--muted);font-weight:700}.dedication p{max-width:400px;margin:0;padding:0 24px;font-size:15px;font-weight:600;line-height:1.9;letter-spacing:.5px;color:var(--muted)}.cover{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left center;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.45,.05,.35,1) .42s}.cover-face,.cover-inside{position:absolute;top:0;right:0;bottom:0;left:0;border:1.5px solid var(--ink);border-radius:6px 16px 16px 6px;backface-visibility:hidden}.cover-face{background:radial-gradient(circle at 30% 20%,#e9b65b,#d69a3c 70%);box-shadow:inset 18px 0 #c08a35,inset 19.5px 0 0 var(--ink),inset 0 2px #f6cf7f;display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 30px 36px 48px;color:#2e2620}.cover-face:after{content:"";position:absolute;top:14px;right:14px;bottom:14px;left:32px;border:1.3px dashed #8a5f22;border-radius:4px 12px 12px 4px;opacity:.55;pointer-events:none}.cover-inside{transform:rotateY(180deg);border-radius:16px 6px 6px 16px;background:radial-gradient(#ead7a4 1.5px,transparent 2px) 0 0 / 16px 16px,#f8efd4;box-shadow:inset 0 0 0 10px #d69a3c,inset 0 0 0 11.5px var(--ink)}.cover-kicker{font-size:11px;letter-spacing:2.6px;font-weight:800;color:#6e4a17}.cover-title{font-size:clamp(38px,9vw,58px);line-height:1.12;margin:18px 0 12px;font-weight:800;letter-spacing:3px;color:#2e2620;text-shadow:0 3px 0 #f3c873}.cover-sub{margin:0;font-size:14px;font-weight:800;background:var(--paper-hi);border:1.3px solid var(--ink);border-radius:999px;padding:4px 14px;box-shadow:0 2px 0 var(--ink)}.cover-art{position:relative;flex:1;width:100%;min-height:0}.cover-title-pre{display:block;font-size:.42em;letter-spacing:6px;margin-bottom:6px;text-shadow:0 2px 0 #f3c873}.cover-art canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.cover-actions{text-align:center;margin-top:28px;transition:opacity .25s}.cover-actions .key{font-size:14px;padding:12px 26px}#resume{font-size:12px;color:var(--muted);font-weight:700;margin:12px 0 0}.cover-view.opening .closed-book{transform:translate(calc((var(--pw) + 27px) / 2))}.cover-view.opening .cover{transform:rotateY(-180deg);animation:none}.under-page{position:absolute;top:0;right:0;bottom:0;left:0;border:1.5px solid var(--ink);border-radius:4px 16px 16px 4px;background:linear-gradient(90deg,#e6d9bd,#f8f1e1 18%)}.title-leaf{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left center;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.45,.05,.35,1)}.title-page{backface-visibility:hidden}.title-back{position:absolute;top:0;right:0;bottom:0;left:0;border:1.5px solid var(--ink);border-radius:16px 4px 4px 16px;background:linear-gradient(270deg,#e6d9bd,#f8f1e1 18%);transform:rotateY(180deg);backface-visibility:hidden}.cover{z-index:1;touch-action:none;cursor:grab;animation:peekLift 4.2s ease-in-out 1.4s infinite}.cover-view.title-turn .title-leaf{z-index:2;transform:rotateY(-180deg)}.cover-view.skip-title .title-leaf{visibility:hidden}.cover-view.dragging .cover{transition:none;animation:none;cursor:grabbing}@keyframes peekLift{0%,70%,to{transform:rotateY(0)}78%{transform:rotateY(-20deg)}86%{transform:rotateY(-6deg)}92%{transform:rotateY(-11deg)}}.resume-tag:not([hidden]){display:flex;flex-direction:column;align-items:flex-start;position:absolute;z-index:4;right:-12px;top:56px;background:#f8e3ad;border:1.5px solid var(--ink);border-radius:4px 4px 4px 12px;padding:6px 12px 7px;font-size:13px;font-weight:800;box-shadow:0 3px 0 var(--ink);transform:rotate(5deg);transition:opacity .2s,transform .15s}.resume-tag:hover{transform:rotate(2deg) translateY(-2px)}.resume-tag small{font-size:10px;color:#6e4a17}.cover-view.dragging .resume-tag,.cover-view.opening .resume-tag{opacity:0;pointer-events:none}.cover-view.opening .cover-actions{opacity:0}.book{position:relative;width:calc(var(--pw) * 2 + 27px);margin:0 auto;background:#d69a3c;border:1.5px solid var(--ink);border-radius:18px;padding:12px;box-shadow:0 4px 0 var(--ink),0 18px 30px #4a3d2a26}.book.appear{animation:bookIn .3s ease-out}@keyframes bookIn{0%{opacity:.4}}.spread{position:relative;height:var(--ph);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:100%;perspective:2600px;border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;background:linear-gradient(90deg,#f8f1e1 0,#f8f1e1 calc(50% - 46px),#e6d9bd 50%,#f8f1e1 calc(50% + 46px),#f8f1e1)}.spread:after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1.5px;background:#b9a985}.leaf{position:relative;padding:24px 34px 14px;display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d3c5a5 transparent}.leaf.left{padding-right:46px}.leaf.right{padding-left:46px}.single-only{display:none}.running{font-size:10px;letter-spacing:1.6px;color:var(--soft);font-weight:800;margin-bottom:16px;flex:none}.running.right{text-align:right}.leaf>*{flex:none}.leaf .heading{padding:0}.leaf .predict{margin:18px 0 0}.leaf .stage{margin:0 -10px}.leaf.right .stage{aspect-ratio:auto;flex:1 1 auto;min-height:260px}.status code{white-space:nowrap}.leaf .preview,.leaf .resources{right:0}.leaf .viewbtn{left:6px}.leaf .hint{left:84px}.leaf .controls{padding:10px 0 0}.leaf .distance,.leaf .xyz{margin:14px 0 0}.leaf .lab-controls{grid-template-columns:1fr 1fr;padding:10px 0 0;gap:10px}.leaf .lab-controls .group:last-child{grid-column:1 / -1}.leaf .quiz{padding:4px 0 0}.leaf.left .steps{grid-template-columns:1fr;gap:7px;margin-top:18px}.leaf.left .step{display:flex;gap:10px;align-items:flex-start;padding:10px 34px 10px 12px;background:#f1e9d6}.leaf.left .step.active{background:var(--paper-hi)}.leaf.left .step br{display:none}.leaf.left .step .stepnum{margin:2px 0 0}.code-box{margin-top:12px}.code-box summary{cursor:pointer;font-size:12px;font-weight:800;color:var(--muted);list-style:none;display:inline-flex;gap:6px;align-items:center;border:1.3px solid var(--ink);border-radius:999px;padding:4px 12px;background:var(--paper-hi);box-shadow:0 2px 0 var(--ink)}.code-box summary:before{content:"‹/›";font-family:ui-monospace,monospace}.code-box[open] summary{margin-bottom:4px}.folio{margin-top:auto;padding-top:18px;display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;color:var(--soft);flex:none}.corner{background:none;border:0;font-size:12px;font-weight:800;color:var(--muted);padding:6px 2px}.corner:not(:disabled):hover{color:var(--ink)}.corner:disabled{opacity:.3}.corner.next{position:relative;padding-right:30px}.corner.next:after{content:"";position:absolute;right:-14px;bottom:-12px;width:32px;height:32px;background:linear-gradient(135deg,#f8f1e1 50%,#e2d4b4 50%);border-left:1.3px solid #b9a985;border-top:1.3px solid #b9a985;box-shadow:-2px -2px 4px #4a3d2a18;transition:width .2s,height .2s}.corner.next:not(:disabled):hover:after{width:42px;height:42px}.corner.next:disabled:after{display:none}.recap h3{font-size:14px;margin:24px 0 10px}.recap .summary{margin:0;padding:12px 14px;border-left:3px solid var(--tab, var(--coral));background:var(--paper-hi);border-radius:0 12px 12px 0;font-size:13px;font-weight:600;line-height:1.8}.recap ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}.recap li{display:flex;align-items:center;gap:12px;background:#f1e9d6;border-radius:12px;padding:10px 12px;font-size:12px;opacity:.6}.recap li.got{opacity:1;background:var(--paper-hi);border:1.3px solid var(--ink);box-shadow:0 2px 0 var(--ink)}.recap li b{display:block;font-weight:800}.recap li small{color:var(--muted);font-weight:700}.recap li i{margin-left:auto;font-style:normal;font-weight:800;color:var(--mint)}.recap-icon svg{width:30px!important;height:30px!important;margin:0!important}.part-img{width:54px;height:54px;flex:none;border-radius:12px;background:#e9efe2;display:flex;align-items:center;justify-content:center;overflow:hidden}.part-img img{width:62px;height:62px}.recap li:not(.got) .part-img img{filter:brightness(0) opacity(.16)}.recap li:not(.got){opacity:.85}.badge{position:relative;width:150px;height:150px;margin:30px auto 22px;border-radius:50%;border:2px solid var(--ink);background:#cfe8dc;box-shadow:0 4px 0 var(--ink),inset 0 0 0 6px var(--paper-hi),inset 0 0 0 7.5px var(--ink)}.badge-3d{position:absolute;left:50%;top:50%;width:230px;height:230px;transform:translate(-50%,-54%);display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;pointer-events:none}.badge-3d canvas{width:100%!important;height:100%!important;display:block}.badge-name{position:absolute;left:50%;bottom:-14px;z-index:2;transform:translate(-50%) rotate(-3deg);white-space:nowrap;background:var(--mustard);border:1.5px solid var(--ink);border-radius:8px;padding:3px 14px;font-size:13px;font-weight:800;box-shadow:0 2px 0 var(--ink)}.complete .kicker{display:block;margin-top:12px;font-size:10px;letter-spacing:1.8px;color:var(--soft);font-weight:800}.complete h2{margin:6px 0 10px}.complete.fresh:not(.done) .badge-name,.complete.fresh:not(.done) .kicker,.complete.fresh:not(.done) h2,.complete.fresh:not(.done) p,.complete.fresh:not(.done) .actions{opacity:0}.complete.fresh .badge-name,.complete.fresh .kicker,.complete.fresh h2,.complete.fresh p,.complete.fresh .actions{transition:opacity .35s .1s}.complete.fresh.done .badge-name{animation:ribbonIn .45s cubic-bezier(.3,1.5,.5,1)}@keyframes ribbonIn{0%{transform:translate(-50%) rotate(-3deg) scale(1.7);opacity:0}}.epi{display:grid;gap:12px;margin-top:16px;align-content:start}.epi-card{background:var(--paper-hi);border:1.4px solid var(--ink);border-radius:16px;box-shadow:0 3px 0 var(--ink);padding:14px 18px 12px;font-size:13px;line-height:1.85;font-weight:600;color:#4d483f}.epi-card h3{display:flex;align-items:center;gap:2px;font-size:15px;margin:0 0 6px;color:var(--ink)}.epi-card h3 .mini{margin:0 6px 0 0}.epi-card h3 small{margin-left:auto;font-size:11px;color:var(--muted);font-weight:800}.epi-card p{margin:0 0 6px}.epi-big{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:1px}.epi-note{font-size:12px;color:var(--muted)}.epi-list,.epi-habits,.epi-steps{list-style:none;padding:0;margin:4px 0 6px;display:grid;gap:8px}.epi-list li,.epi-habits li{display:flex;gap:8px;align-items:flex-start}.epi-list li>.mini,.epi-habits li>.mini{flex:none;margin:3px 0 0}.epi-list b,.epi-habits b{color:var(--ink);margin-right:6px}.epi-habits{gap:7px}.epi-habits li{background:#f3eee4;border-radius:12px;padding:7px 10px}.epi-habits small{color:var(--muted);font-size:11px;font-weight:700}.epi-habits span{display:block;font-size:12.5px;line-height:1.7}.epi-part{border-top:6px solid var(--part)}.epi-num{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:6px;border:1.3px solid var(--ink);border-radius:50%;background:var(--part);font-size:12px}.epi-lessons{display:flex;flex-wrap:wrap;gap:6px}.epi-lessons span{font-size:11px;font-weight:800;border:1.2px solid var(--ink);border-radius:99px;padding:0 9px;background:#fff}.epi-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}.epi-two>div{background:#f3eee4;border-radius:12px;padding:8px 10px}.epi-two b{display:flex;align-items:center;color:var(--ink);font-size:13px}.epi-two b .mini{margin:0 4px 0 0}.epi-two ul{margin:4px 0 0;padding-left:18px;font-size:12.5px;line-height:1.7}.epi-steps{counter-reset:s}.epi-steps li{display:flex;align-items:center;gap:4px;font-weight:800;color:var(--ink)}.epi-steps li:before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;flex:none;width:18px;height:18px;margin-right:4px;border:1.3px solid var(--ink);border-radius:50%;font-size:10px;background:var(--paper-hi)}.epi-actions{margin-top:10px!important}.epi-actions .key .mini{margin:-3px 6px 0 0}.epi-end{margin-top:10px!important;font-weight:800;color:var(--ink)}.epi-end .mini{margin-right:6px}.epi-grid{list-style:none;padding:0;margin:10px 0;display:grid;grid-template-columns:1fr;gap:8px}.epi-grid li{display:flex;gap:10px;align-items:center;background:#f3eee4;border-radius:12px;padding:7px 10px}.epi-grid li:not(.got){opacity:.55}.epi-grid img,.epi-slot{flex:none;width:52px;height:52px;border-radius:50%;background:#cfe5dc;border:1.3px solid var(--ink)}.epi-slot{display:grid;place-items:center;background:#ebe4d6;border-style:dashed;font-weight:800;color:var(--muted)}.epi-grid b{font-size:13.5px;color:var(--ink)}.epi-grid small{letter-spacing:0;margin-left:6px;font-size:11px;color:var(--muted);font-weight:700}.epi-grid p{font-size:12.5px;line-height:1.6;margin:1px 0 0}.coming-note{font-size:13px;line-height:1.9;font-weight:700;color:#4d483f;margin-top:18px}.coming-note p{margin:0 0 10px}.coming-note .coming-week{font-size:10px;letter-spacing:1.6px;color:var(--soft);font-weight:800}.coming{flex:1 1 auto;display:flex;align-items:center;justify-content:center}.coming-card{text-align:center;padding:10px 0 20px}.coming-card b{display:block;font-size:18px;margin:4px 0 6px}.coming-card p{font-size:12px;color:var(--muted);font-weight:700;margin:0 0 16px}.badge.ghost{background:transparent;border:2px dashed #b9ad97;box-shadow:none;display:flex;align-items:center;justify-content:center}.badge.ghost .badge-num{font-size:40px;font-weight:800;color:#c9bea9}.badge.ghost .badge-name{background:var(--paper-hi);border-style:dashed;box-shadow:none;color:var(--muted)}.book-tabs.swap .tab{animation:tabIn .35s cubic-bezier(.3,1.4,.5,1) backwards}.book-tabs.swap .tab:nth-child(2){animation-delay:.05s}.book-tabs.swap .tab:nth-child(3){animation-delay:.1s}.book-tabs.swap .tab:nth-child(4){animation-delay:.15s}@keyframes tabIn{0%{opacity:0;translate:0 10px}}.lesson .slot{width:32px;height:32px;flex:none;border-radius:50%;border:1.3px dashed #c3b9a6;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}.lesson .slot.got{border:1.5px solid var(--ink);background:#cfe8dc;box-shadow:0 2px 0 var(--ink);overflow:visible}.lesson .slot img{width:44px;height:44px;margin-top:-8px}.book-tabs{position:absolute;right:-44px;top:46px;display:flex;flex-direction:column;gap:6px}.tab{width:44px;padding:10px 0 10px 8px;background:var(--tab);border:1.5px solid var(--ink);border-left:0;border-radius:0 12px 12px 0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#2e2620;position:relative;transform:translate(-8px);transition:transform .2s cubic-bezier(.3,1.4,.5,1);box-shadow:2px 2px 0 var(--ink)}.tab .tab-name{writing-mode:vertical-rl;letter-spacing:3px}.tab .stepnum{margin:0;width:18px;height:18px}.tab:hover{transform:translate(-3px)}.tab.active{transform:translate(0);box-shadow:3px 3px 0 var(--ink)}.tab .check{display:none;font-style:normal;position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;background:var(--mint);color:#fff;border:1.3px solid var(--ink);font-size:9px;align-items:center;justify-content:center}.tab.done .check{display:inline-flex}.flipper{position:absolute;top:0;bottom:0;width:50%;display:none;pointer-events:none;z-index:6;border-radius:4px;background:linear-gradient(90deg,#efe4cb,#f8f1e1 30%,#fbf7ee);box-shadow:0 0 0 1.3px #b9a985}.flipper.fwd{display:block;left:50%;transform-origin:left center;animation:flipFwd .66s cubic-bezier(.45,.05,.35,1) forwards}.flipper.back{display:block;left:0;transform-origin:right center;animation:flipBack .66s cubic-bezier(.45,.05,.35,1) forwards}@keyframes flipFwd{0%{transform:rotateY(0);opacity:0}12%{opacity:1}50%{filter:brightness(.88)}to{transform:rotateY(-180deg);opacity:1}}@keyframes flipBack{0%{transform:rotateY(0);opacity:0}12%{opacity:1}50%{filter:brightness(.88)}to{transform:rotateY(180deg);opacity:1}}.flipper.held{animation:none}.edge{position:absolute;top:0;bottom:0;width:30px;z-index:4;cursor:grab;touch-action:none}.edge[data-drag="-1"]{left:0}.edge[data-drag="1"]{right:12px}.spread .corner:not(:disabled){cursor:grab}body.pulling,body.pulling *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}.peel{position:absolute;bottom:0;z-index:5;width:30px;height:30px;cursor:grab;touch-action:none;transition:width .3s cubic-bezier(.3,1.4,.5,1),height .3s cubic-bezier(.3,1.4,.5,1),box-shadow .3s,opacity .15s}.peel[data-drag="1"]{right:0;border-radius:0 0 8px;background:linear-gradient(135deg,#fbf7ee 0,#f1e6cc 48%,#b9a985 50%,#e2d4b4 51%);box-shadow:-2px -2px 4px #4a3d2a18}.peel[data-drag="-1"]{left:0;border-radius:0 0 0 8px;background:linear-gradient(225deg,#fbf7ee 0,#f1e6cc 48%,#b9a985 50%,#e2d4b4 51%);box-shadow:2px -2px 4px #4a3d2a18}.spread:has(.leaf.right .corner.next:not(:disabled):hover,.edge[data-drag="1"]:hover,.peel[data-drag="1"]:hover) .peel[data-drag="1"]{width:64px;height:64px;box-shadow:-6px -6px 14px #4a3d2a2e}.spread:has(.leaf.left .corner[data-nav="-1"]:not(:disabled):hover,.edge[data-drag="-1"]:hover,.peel[data-drag="-1"]:hover) .peel[data-drag="-1"]{width:64px;height:64px;box-shadow:6px -6px 14px #4a3d2a2e}.spread:has(.flipper.fwd,.flipper.back) .peel{opacity:0}.corner.next:after{display:none}.leaf.left .folio .corner[data-nav="-1"]{padding-left:46px;margin-left:-12px}.leaf.right .folio .corner.next{padding-right:46px}.cover-view.at-title .title-leaf{z-index:2;cursor:grab;touch-action:none;animation:peekLift 4.2s ease-in-out 1s infinite}body.pulling .cover-view .title-leaf{animation:none}.cover-view.instant *{transition:none!important}.cover-view.back-turn .title-leaf{z-index:2}.cover-view.shutting .cover{transition-delay:0s}.cover-view.shutting .closed-book{transition-delay:.6s}.cover-view.at-title .cover{cursor:pointer}.shut-tag{position:absolute;z-index:3;left:-50%;bottom:44px;translate:-50% 0;background:var(--paper-hi);border:1.5px solid var(--ink);border-radius:999px;padding:8px 18px 8px 14px;font-size:14px;font-weight:800;box-shadow:0 3px 0 var(--ink);opacity:0;pointer-events:none;transition:opacity .25s}.shut-tag:hover{background:#fff}.shut-tag:active{box-shadow:none;transform:translateY(3px)}.cover-view.at-title .shut-tag{opacity:1;pointer-events:auto}.spread.turning .leaf>*{animation:swap .66s}@keyframes swap{0%,to{opacity:1}35%,60%{opacity:0}}@media(max-width:760px){.brand-sub{display:none}}@media(max-width:960px){:root{--pw: min( calc(100vw - 52px) , 460px);--ph: clamp(500px, calc(100svh - 200px) , 720px)}.book{width:calc(var(--pw) + 27px);margin-top:46px;padding:12px 12px 12px 14px;border-radius:8px 18px 18px 8px;box-shadow:5px 5px 0 -1px #f8f1e1,5px 5px 0 .5px var(--ink),0 4px 0 var(--ink),0 18px 30px #4a3d2a26}.spread{grid-template-columns:1fr;background:linear-gradient(90deg,#e6d9bd,#f8f1e1 7%);border-radius:4px 10px 10px 4px}.spread:after{display:none}.spread[data-side=left] .leaf.right,.spread[data-side=right] .leaf.left{display:none}.leaf.left,.leaf.right{padding:20px 22px 12px 26px}.single-only{display:inline-block}.leaf.left .folio .corner:first-child,.leaf.right .folio .corner.next{min-width:64px}.book-tabs{flex-direction:row;right:18px;left:22px;top:-44px}.tab{width:auto;flex:1;flex-direction:row;justify-content:center;padding:8px 6px 10px;border:1.5px solid var(--ink);border-bottom:0;border-radius:12px 12px 0 0;transform:translateY(8px);box-shadow:2px -1px 0 var(--ink)}.tab .tab-name{writing-mode:horizontal-tb;letter-spacing:0}.tab:hover{transform:translateY(3px)}.tab.active{transform:translateY(0);box-shadow:2px -2px 0 var(--ink)}.flipper.fwd,.flipper.back{left:0;width:100%}.cover-view.opening .closed-book{transform:none}.closed-book{margin-top:46px}}@media(max-width:560px){.page{padding:0 12px;margin:18px auto 28px}.brand-sub{display:none}.brand b{font-size:18px;letter-spacing:0}.top{margin-bottom:24px;gap:8px}.top-actions{gap:6px}.bookbtn{padding:8px 10px}.book{padding:8px 8px 8px 10px}.book-tabs{left:12px;right:12px}.tab{font-size:11px;padding:7px 3px 9px;gap:4px}.leaf.left,.leaf.right{padding:18px 16px 10px 20px}h1{font-size:20px}.stage,.leaf.right .stage{aspect-ratio:auto;flex:none;min-height:0;display:flex;flex-direction:column;padding-top:4px}#canvas-host{position:relative;inset:auto;aspect-ratio:1 / .82}.preview,.resources{position:relative;top:auto;right:auto!important;align-self:flex-end;margin:0 6px 0 0;transform:rotate(2deg)}.preview{width:160px;order:-1}.resources{order:-1}.hint{display:none}.controls{flex-wrap:wrap}.status{margin-left:auto}.leaf .lab-controls{grid-template-columns:1fr}.key{padding:10px 13px}.shelf{grid-template-columns:1fr}.cover-face{padding:40px 22px 28px 40px}.brand{display:flex;align-items:center;white-space:normal}.brand b{line-height:1.3}.brand-logo{flex:none}.set-row{font-size:15px;padding:9px 0}.set-world b{font-size:15px}.set-world small{font-size:12px}.lang-btn{font-size:15px;padding:6px 13px 6px 16px}.lang-list button{font-size:15px;padding:9px 16px}.set-note{font-size:12px}.shelf{scroll-margin-top:12px}.lesson{font-size:15px}.lesson .name small,.lesson i{font-size:12px}.week,.label,.running{font-size:11px}h1{font-size:22px}.sub{font-size:15px}.intro{grid-template-columns:1fr}.intro b{font-size:14px}.intro .knobs span{font-size:12.5px}.intro p{font-size:13.5px}.predict-q{font-size:15px}.bubble{font-size:12px;padding:2px 10px}.opt{font-size:15px;padding:8px 15px}.opt.big{font-size:15px}.predict-fb{font-size:14px}.step{font-size:15px;line-height:1.85}.stepnum{width:22px;height:22px;font-size:12px}.explain{font-size:15px}.deeper{font-size:13.5px}.deeper code,.code{font-size:12.5px}.code-box summary{font-size:13px}.range,.axis-row,.distance{font-size:13px}.group-title{font-size:14px}.status,.status code{font-size:12px}.quiz h2{font-size:20px}.complete p,.coming-note{font-size:15px}.recap li,.key{font-size:14px}.tab{font-size:13px}.toast{font-size:14px}}.peek-hint,.resume-tag,.stage-lock,.steps-hint,.next-name,.noteflip{display:none}@media(max-width:960px){body:has(.cover-view:not([hidden])) .foot{display:none}.keys-note{display:none}.cover-view{position:relative;height:calc(100svh - 82px);min-height:440px;overflow:hidden;margin:0 -12px;padding:12px 14px 0;justify-content:flex-start}.closed-book,.cover-view.opening .closed-book{width:100%;height:calc((100svh - 82px)*1.5);max-width:620px;min-height:660px;margin-top:0;flex:none;perspective:1500px;perspective-origin:50% 0;transform:none}.closed-book:before{top:6px;right:-6px;bottom:-9px;left:5px}.title-page{justify-content:flex-start;padding-top:40%}.cover{transition:transform .7s cubic-bezier(.45,.05,.35,1)}.under-page,.title-page{border-radius:4px 16px 16px 4px}.cover-face{padding:52px 22px 30px 40px}.cover-title{font-size:54px;margin-top:22px}.cover-art{flex:none;height:38%}.cover-view.opening .cover{transform:rotateY(-178deg);transition-delay:0s;animation:none}.cover-actions{display:none}.peek-hint{display:flex;position:absolute;left:0;right:0;bottom:22px;z-index:4;justify-content:center;pointer-events:none;transition:opacity .2s}.peek-hint b{display:inline-flex;align-items:center;gap:6px;background:var(--paper-hi);border:1.5px solid var(--ink);border-radius:999px;padding:8px 14px 8px 18px;font-size:14px;box-shadow:0 3px 0 var(--ink)}.peek-arrow{display:inline-block;font-weight:800;animation:nudgeX 1.3s ease-in-out infinite}@keyframes nudgeX{50%{transform:translate(4px)}}.cover-view.dragging .peek-hint,.cover-view.opening .peek-hint{opacity:0}.shut-tag{left:14px;bottom:auto;top:calc(100svh - 158px);translate:none}.resume-tag:not([hidden]){right:-6px;top:44px}.page:has(.book:not([hidden])){margin-bottom:0}.foot{display:none}.book{width:auto;max-width:720px;margin:66px auto 0;padding:10px 10px 0 14px;border-bottom:0;border-radius:8px 16px 0 0;background:#d69a3c;box-shadow:4px 0 0 -1px #f8f1e1,4px 0 0 .5px var(--ink),0 -2px 24px #4a3d2a1c}.book-tabs{top:-40px}.spread{height:auto;display:flex;flex-direction:column;overflow:visible;perspective:none;padding:18px 16px 40px 20px;min-height:calc(100svh - 40px);border-bottom:0;border-radius:4px 10px 0 0;background:linear-gradient(90deg,#e6d9bd,#f8f1e1 18px)}.leaf,.leaf.left,.leaf.right,#notes,.spread[data-side] .leaf.left,.spread[data-side] .leaf.right{display:contents}#running-r,.leaf.left .folio{display:none}.running{order:1;margin-bottom:12px}.heading{order:2}.predict{order:3}.stage{order:4}.steps-hint{order:5;display:block;font-size:12px;font-weight:800;color:var(--muted);margin:22px 0 0}.steps{order:6}.explain{order:7}#controls{order:8}.deeper{order:9}.code-box{order:10}.recap,.coming-note,#epi-l{order:11}#epi-r{order:12}.epi-card{font-size:14px}.epi-two{grid-template-columns:1fr}.coming{order:12;padding-top:20px}.quiz{order:12}.leaf.right .folio{order:13;padding-top:30px}.predict.nudge{animation:shake .4s}.stage,.leaf.right .stage{position:sticky;top:0;z-index:5;display:block;flex:none;height:40svh;min-height:230px;aspect-ratio:auto;margin:14px -16px 0 -20px;padding:0;background:#f8f1e1;border-bottom:1.5px dashed #d3c5a5;box-shadow:0 10px 12px -12px #4a3d2a66}#canvas-host{position:absolute;top:0;right:0;bottom:0;left:0;aspect-ratio:auto}.preview,.resources{position:absolute;top:8px;right:10px!important;margin:0}.preview{width:112px;padding:6px 7px 5px}.preview small{font-size:9px}.preview b{font-size:10px}.viewbtn,.leaf .viewbtn{left:10px;bottom:8px}.stage-lock{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#f8f1e1c4;backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px);text-align:center}.stage-lock b{background:var(--mustard);border:1.5px solid var(--ink);border-radius:999px;padding:5px 16px;font-size:14px;box-shadow:0 3px 0 var(--ink)}.stage-lock span{font-size:12px;font-weight:800;color:var(--muted)}.stage-lock i{font-style:normal}.stage-lock .rt{display:none}.leaf.left .steps{gap:4svh;margin-top:12px;padding-bottom:2svh;background:linear-gradient(#c9bb9b,#c9bb9b) 21px 0 / 1.5px 100% no-repeat}.leaf.left .step{background:#f1e9d6;transition:background .25s,box-shadow .25s,transform .25s}.leaf.left .step.active{border-color:var(--ink);box-shadow:0 3px 0 var(--ink);transform:translateY(-2px)}.book.locked .step{opacity:.5}#controls:before{content:"自己動手玩玩看";display:block;font-size:12px;font-weight:800;color:var(--muted);margin:22px 0 2px}#controls:empty:before{display:none}.next-name{display:inline}.leaf.right .folio .corner.next{background:var(--paper-hi);border:1.5px solid var(--ink);border-radius:12px;padding:10px 44px 10px 14px;color:var(--ink);box-shadow:0 3px 0 var(--ink);overflow:hidden}.leaf.right .folio .corner.next:after{display:block;right:-2px;bottom:-2px}.leaf.right .folio .corner.next:disabled{display:none}.edge,.peel{display:none}.spread .corner:not(:disabled){cursor:pointer}.noteflip.held{display:block}.noteflip{position:fixed;z-index:30;pointer-events:none;transform-origin:left center;border:1.3px solid #b9a985;border-radius:4px 10px 10px 4px;background:linear-gradient(90deg,#efe4cb,#f8f1e1 20%,#fbf7ee)}.noteflip.up{display:block;animation:flipUp .62s cubic-bezier(.45,.05,.35,1) forwards}.noteflip.down{display:block;animation:flipDown .62s cubic-bezier(.45,.05,.35,1) forwards}@keyframes flipUp{0%{transform:perspective(1400px) rotateY(0);opacity:0}12%{opacity:1}50%{filter:brightness(.9)}to{transform:perspective(1400px) rotateY(-178deg);opacity:1}}@keyframes flipDown{0%{transform:perspective(1400px) rotateY(-178deg)}50%{filter:brightness(.9)}80%{opacity:1}to{transform:perspective(1400px) rotateY(0);opacity:0}}}@media(max-width:560px){.steps-hint,#controls:before,.stage-lock span{font-size:14px}.stage-lock b,.peek-hint b{font-size:16px}}@media(max-width:960px)and (orientation:landscape)and (max-height:520px){.page{margin-top:max(10px,env(safe-area-inset-top));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.top{margin-bottom:10px}.brand b{font-size:18px;letter-spacing:0}.brand-sub{display:none}.cover-view{margin:0;padding:12px 0 0}.closed-book,.cover-view.opening .closed-book{max-width:none}.book{max-width:none;margin-top:52px}.spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;column-gap:22px;align-content:start;padding:14px 16px 40px 20px;overflow:clip}.spread>*,.leaf>*,#notes>*{grid-column:2}.stage,.leaf.right .stage{grid-column:1;grid-row:1 / span 40;align-self:start;top:8px;height:calc(100svh - 16px);min-height:0;margin:0 0 calc(16px - 100svh);border:1.5px dashed #d3c5a5;border-radius:12px;box-shadow:none}.running{margin-bottom:8px}.steps-hint,.leaf.left .steps{margin-top:14px}.leaf.left .steps{gap:3svh}.stage-lock .up{display:none}.stage-lock .rt{display:inline}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}.set-world{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;width:100%;margin:0 0 6px;padding:7px 10px 7px 7px;text-align:left;background:#dcebe0;border:1.5px solid var(--ink);border-radius:12px;box-shadow:0 2px 0 var(--ink);transition:transform .12s,box-shadow .12s}.set-world:active{transform:translateY(2px);box-shadow:0 0 0 var(--ink)}.set-world b{display:block;font-size:13px}.set-world small{display:block;font-size:10px;font-weight:700;color:var(--muted)}.set-world i{font-style:normal;font-weight:800}.set-world-img{width:40px;height:40px;border-radius:50%;border:1.3px dashed #a7b9a6;background:#eef4ea;display:flex;align-items:center;justify-content:center;overflow:visible}.set-world-img.got{border:1.5px solid var(--ink);background:#cfe8dc}.set-world-img img{width:52px;height:52px;margin-top:-8px}.page:has(.world-view:not([hidden])) :is(#open,#close-book,.navmenu,.foot){display:none}.set-link{display:flex;align-items:center;width:100%;padding:9px 0;margin-top:4px;background:none;border:0;text-align:left;font-size:12px;font-weight:800;color:var(--ink)}.set-link span{flex:1}.set-link i{font-style:normal}.set-link:active{opacity:.6}.set-link+.set-row,.set-link+.set-link{border-top:1.3px dashed #d3cab8}.set-link+.set-link{margin-top:0}.set-row>span{display:inline-flex;align-items:center}.page:has(.info-view:not([hidden])) .foot{display:none}.info-view{animation:tabIn .35s ease-out;max-width:980px;margin:0 auto}.info-intro{margin:0 0 18px;font-size:14px;line-height:1.8;font-weight:700;color:#4d483f}.howto{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.howto-card{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;background:var(--paper-hi);border:1.5px solid var(--ink);border-radius:18px;box-shadow:0 3px 0 var(--ink);padding:14px 18px 14px 12px}.howto-art{width:150px;height:94px;background:#f1e9d6;border-radius:12px}.howto-card b{display:flex;align-items:center;gap:8px;font-size:15px;margin-bottom:4px}.howto-card .stepnum{margin:0}.howto-card p{margin:0;font-size:13px;line-height:1.75;font-weight:600;color:#4d483f}.about{display:grid;gap:16px}.about-card{background:var(--paper-hi);border:1.5px solid var(--ink);border-radius:22px;box-shadow:0 4px 0 var(--ink);padding:26px 32px 18px}.about-author{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:start}.about-img{display:block;width:150px;aspect-ratio:1;background:#f1e9d6;border:1.5px solid var(--ink);border-radius:50%;overflow:hidden}.about-img img{display:block;width:100%;height:100%;object-fit:contain;scale:var(--zoom, 1);translate:var(--dx, 0) var(--dy, 0);mix-blend-mode:multiply}.about-img.pixel img{image-rendering:pixelated}.about-card small{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--soft)}.about-card h2{margin:2px 0 12px;font-size:24px;line-height:1.4}.about-card h3{margin:0 0 10px;font-size:18px;line-height:1.5}.about-card p{margin:0 0 10px;font-size:14px;line-height:1.9;font-weight:600;color:#4d483f}.about-card a{color:inherit;font-weight:800;text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:3px}.about-quotes{list-style:none;margin:4px 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px}.about-quotes li{background:#f8e3ad;border:1.3px solid var(--ink);border-radius:999px 999px 999px 6px;padding:5px 14px;font-size:13px;font-weight:800;box-shadow:0 2px 0 var(--ink)}.about-who{list-style:none;margin:4px 0 14px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}.about-who li{display:flex;flex-direction:column;gap:10px;background:#fbf3e1;border:1.3px solid var(--ink);border-radius:12px;padding:10px 14px 11px;font-size:13px;line-height:1.7;font-weight:600;color:#4d483f;box-shadow:0 2px 0 var(--ink)}.who-art{display:block;width:100%;height:86px;background:#f1e9d6;border-radius:9px}.about-who b{display:block;margin-bottom:2px;font-size:14px;font-weight:800;color:var(--ink)}.about-who b:before{content:"";display:inline-block;width:9px;height:9px;margin:0 7px 1px 0;border:1.3px solid var(--ink);border-radius:50%;background:var(--dot)}.about-who li:nth-child(4n+1){--dot: #ec8a6f}.about-who li:nth-child(4n+2){--dot: #8cc5b6}.about-who li:nth-child(4n+3){--dot: #eebd59}.about-who li:nth-child(4n+4){--dot: #a9a6d9}.about-sub{margin:-6px 0 12px!important;font-size:15px!important;font-weight:800!important;color:var(--ink)!important}.about-card h3 .mini{margin:-3px 6px 0 0}.about-quotes li .mini{margin:-3px 4px 0 -4px}.about-card a.about-more{display:inline-block;margin:6px 0 10px;color:#2e2620;text-decoration:none}.about-end .mini{margin-right:6px}.about-end{text-align:center;font-size:15px;font-weight:800;margin:6px 0 0}@media(max-width:760px){.howto{grid-template-columns:1fr}}@media(max-width:560px){.set-link{font-size:15px}.howto-card{grid-template-columns:1fr;padding:12px 14px 16px}.howto-art{width:100%;height:auto;aspect-ratio:160 / 100;max-height:150px}.howto-card b{font-size:17px}.howto-card p,.info-intro{font-size:15px}.about-card{padding:22px 20px 12px}.about-author{grid-template-columns:1fr;justify-items:center;gap:16px}.about-author>div{justify-self:stretch}.about-card h2{font-size:21px}.about-card p{font-size:15px}.about-quotes li{font-size:14px}.about-who{grid-template-columns:1fr}.about-who li{font-size:14px}}.world-view{animation:tabIn .35s ease-out}.world-bar{display:flex;align-items:center;gap:16px;margin-bottom:16px}.world-title small{display:block;font-size:10px;font-weight:800;letter-spacing:2px;color:var(--soft)}.world-title h1{margin:0;font-size:24px}.world-main{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}.world-stage{position:relative;height:min(68vh,620px);min-height:380px;border-radius:22px;background:radial-gradient(ellipse at 50% 40%,#f6f1e6,#e4ddcf 75%);border:1.5px solid var(--ink);box-shadow:0 4px 0 var(--ink);overflow:hidden}.world-stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.world-stage canvas:active{cursor:grabbing}.world-tags{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.world-stage .bark{position:absolute;left:0;top:0;z-index:1;pointer-events:none;font-size:11px;font-weight:800;background:#fbf7ee;border:1.5px solid var(--ink);border-radius:999px 999px 999px 4px;padding:1px 7px;box-shadow:0 2px 0 var(--ink);opacity:0;transition:opacity .15s}.world-stage .bark.on{opacity:1}.world-tag{position:absolute;left:0;top:0;width:26px;height:26px;padding:0;border-radius:50%;background:var(--paper-hi);border:1.5px solid var(--ink);box-shadow:0 2px 0 var(--ink);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;pointer-events:auto}.world-tag.ghost{background:#fbf7eecc;border-style:dashed;box-shadow:none;color:var(--soft)}.world-stage .viewbtn{position:absolute;left:auto;right:14px;bottom:14px}.world-stage .hint{position:absolute;left:16px;bottom:16px}.world-side{max-height:min(68vh,620px);overflow-y:auto;padding:2px 4px 6px 0}.world-intro{margin:0 0 12px;font-size:13px;line-height:1.7;color:#4a453d}.world-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}.world-list button{width:100%;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;text-align:left;background:transparent;border:1.3px dashed #c3b9a6;border-radius:12px;padding:6px 10px 6px 6px;color:var(--muted)}.world-list button.got{background:var(--paper-hi);border:1.5px solid var(--ink);box-shadow:0 2px 0 var(--ink);color:inherit}.world-list button:hover{background:#f4efe4}.world-list b{display:block;font-size:13px;color:#35312b}.world-list small{display:block;font-size:10px;font-weight:700}.world-list i{font-style:normal;font-size:10px;font-weight:800;white-space:nowrap}.world-list .got i{color:var(--mint)}.world-list .slot{width:32px;height:32px;border-radius:50%;border:1.3px dashed #c3b9a6;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}.world-list .slot.got{border:1.5px solid var(--ink);background:#cfe8dc}.world-list .slot img{width:44px;height:44px;margin-top:-8px}.world-save{margin-top:16px;padding-top:14px;border-top:1.3px dashed #c3b9a6}.world-save h2{margin:0 0 4px;font-size:14px}.save-note{margin:0 0 10px;font-size:11px;line-height:1.7;color:var(--muted)}.save-row{display:flex;gap:6px}.save-row input{flex:1;min-width:0;font:800 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.04em;color:#35312b;background:var(--paper-hi);border:1.5px solid var(--ink);border-radius:12px;padding:9px 10px}.save-row input[readonly]{background:#f4efe4}.save-row input::placeholder{font-family:inherit;font-weight:700;letter-spacing:0;color:var(--soft)}.save-when,.save-msg{margin:6px 0 12px;font-size:10px;font-weight:700;color:var(--soft);min-height:1em}.save-when.warn,.save-msg{color:var(--coral)}.save-msg.ok{color:var(--mint)}.save-msg{margin-bottom:0}@media(max-width:960px){.world-main{grid-template-columns:1fr}.world-stage{height:auto;aspect-ratio:1 / .9;max-height:62svh;min-height:300px}.world-side{max-height:none;overflow:visible}.world-stage .hint{display:none}}@media(max-width:560px){.world-bar{gap:10px}.world-title h1{font-size:20px}.world-stage{border-radius:18px}}.quiz-fig{margin:0 0 14px;padding:14px 12px 12px;border:1.3px dashed #cfc5b3;border-radius:14px;background:#fbf7ee}.quiz-fig.solved{border-style:solid;border-color:var(--ink);animation:fig-in .45s ease both}.fig-row{display:flex;gap:8px;justify-content:center;align-items:center}.fig-item{position:relative;flex:1 1 0;min-width:0;max-width:140px}.fig-item.wide{max-width:230px}.fig-item img{display:block;width:100%;height:auto;background:#f1e9d6;border-radius:12px}.fig-badges{position:absolute;top:-7px;right:-6px;display:flex;gap:2px}.fig-badges i{width:24px;height:24px;display:grid;place-items:center;background:var(--paper-hi);border:1.3px solid var(--ink);border-radius:50%;box-shadow:0 2px 0 var(--ink)}.fig-badges svg{width:17px;height:17px;margin:0}.fig-arrow{flex:none}.fig-arrow svg{display:block;width:18px;height:18px}@keyframes fig-in{0%{opacity:0;transform:translateY(6px)}}@media(prefers-reduced-motion:reduce){.quiz-fig.solved{animation:none}}
