:root{--board:#173b2b;--chalk:#f0ede6;--accent-y:#f0de8c;--accent-r:#e8a29a;--accent-c:#a9c5d8;--stage-w:1280px;--stage-h:720px;--font-hand:"HandChalk","Chalkboard SE","DFKai-SB","標楷體","Microsoft JhengHei","微軟正黑體",sans-serif}@font-face{font-family:HandChalk;src:url(/fonts/ChenYuluoyan-2.0-Thin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block}*{margin:0;padding:0;box-sizing:border-box}body,html{width:100%;min-height:100%;background:#000;font-family:var(--font-hand);-webkit-font-smoothing:antialiased;color:var(--chalk)}body.player-page{overflow:hidden;cursor:default}#stage{position:fixed;left:50%;top:50%;width:var(--stage-w);height:var(--stage-h);transform:translate(-50%,-50%) scale(1);transform-origin:center center;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#16181a 0,#0a0b0c 60%,#060607 100%)}#canvas{left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform}#canvas,.board{position:absolute}.board{background:var(--board);border-radius:22px;box-shadow:inset 0 0 160px rgba(0,0,0,.55),inset 0 0 0 6px rgba(255,255,255,.045),0 24px 60px rgba(0,0,0,.6);overflow:hidden}.board:before{background:radial-gradient(60% 30% at 22% 26%,rgba(240,237,230,.055),transparent 70%),radial-gradient(45% 22% at 74% 62%,rgba(240,237,230,.045),transparent 70%),radial-gradient(70% 26% at 48% 88%,rgba(240,237,230,.035),transparent 72%)}.board:after,.board:before{content:"";position:absolute;inset:0;pointer-events:none}.board:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");background-size:260px 260px;opacity:.16;mix-blend-mode:overlay}.board-label{left:34px;bottom:22px;font-size:30px;color:var(--chalk);opacity:.28;letter-spacing:2px;pointer-events:none}.board-label,.el{position:absolute}.el{opacity:0;transform-origin:center center}.el.shown{opacity:1}.el-text{display:flex;flex-wrap:wrap;align-content:center;white-space:pre-wrap;line-height:1.25;color:var(--chalk);text-shadow:0 0 .6px currentColor,0 0 8px rgba(240,237,230,.1),0 1px 0 rgba(0,0,0,.3);filter:url(#chalkTextRough)}#canvas.cam-moving .el-text{filter:none}.el-text .ch{display:inline-block;opacity:0;will-change:opacity,transform}.el.shown .ch{opacity:var(--o,1)}.el-text .chi{display:inline-block}.el-svg svg{overflow:visible;display:block}.el-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round;filter:url(#chalkRough);opacity:.95}.el-svg[data-draw="1"] path{stroke-dashoffset:var(--dash,0)}.el-svg.shown[data-draw="1"] path{stroke-dashoffset:0}.el-image img{width:100%;height:100%;object-fit:contain;display:block}#logo{right:28px;top:24px;height:56px;opacity:.85;pointer-events:none}#defs,#logo{position:absolute}#defs{width:0;height:0;overflow:hidden}#ui{position:fixed;right:18px;top:16px;z-index:50;display:flex;align-items:stretch;gap:9px;font-family:var(--font-hand)}.ui-btn{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;color:var(--chalk);border:2px solid rgba(240,237,230,.42);border-radius:15px 19px 14px 18px/18px 14px 19px 15px;padding:5px 15px 7px;font-family:inherit;font-size:19px;line-height:1.2;letter-spacing:2px;opacity:.55;cursor:pointer;text-shadow:0 0 .5px currentColor,0 0 7px rgba(240,237,230,.13);transition:opacity .18s ease,color .18s ease,border-color .18s ease}.ui-btn:hover{opacity:.92}.ui-btn:focus-visible{outline:2px dashed rgba(240,237,230,.6);outline-offset:3px}.ui-btn.on{opacity:1;color:var(--accent-c);border-color:rgba(169,197,216,.75);text-shadow:0 0 .5px currentColor,0 0 10px rgba(169,197,216,.35)}#muteBtn{display:flex;align-items:center;justify-content:center;padding:5px 12px;letter-spacing:0}#muteBtn.muted{opacity:1;color:var(--accent-r);border-color:rgba(232,162,154,.7)}.icon{width:21px;height:21px;display:block;overflow:visible}.icon path{fill:none;stroke:var(--chalk);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.icon .slash{stroke:var(--accent-r);stroke-width:2.2;display:none}#muteBtn.muted .icon .wave{display:none}#muteBtn.muted .icon .slash{display:block}#progress{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;gap:18px;padding:16px 34px 18px;opacity:0;pointer-events:none;transition:opacity .25s ease;background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,0));font-family:var(--font-hand);color:var(--chalk)}#progress.visible{opacity:1;pointer-events:auto}#track{position:relative;flex:1 1;height:8px;border:2px solid rgba(240,237,230,.38);border-radius:6px;background:rgba(0,0,0,.42)}#fill{left:0;top:0;bottom:0;width:0;background:var(--chalk);border-radius:5px;box-shadow:0 0 8px rgba(240,237,230,.35);transition:width .3s ease}#fill,#marks{position:absolute}#marks{inset:0}.mark{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;padding:0;border:2px solid rgba(240,237,230,.5);border-radius:50%;background:var(--board);cursor:pointer;transition:transform .15s ease,border-color .18s ease,background .18s ease}.mark:hover{transform:scale(1.25);border-color:var(--chalk)}.mark.on{border-color:var(--accent-c);background:rgba(169,197,216,.7)}#pcount{font-size:20px;letter-spacing:2px;opacity:.8;min-width:74px;text-align:right;white-space:nowrap}.think-mask{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:rgba(6,14,10,.74);color:var(--chalk);font-family:var(--font-hand);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;animation:maskIn .22s ease-out}.think-mask .tm-title{font-size:76px;letter-spacing:6px;text-shadow:0 0 .5px currentColor,0 0 14px rgba(240,237,230,.18)}.think-mask .tm-hint{font-size:30px;letter-spacing:3px;opacity:.75;padding:7px 24px 9px;border:2px solid rgba(240,237,230,.4);border-radius:16px 20px 15px 19px/19px 15px 20px 16px}@keyframes maskIn{0%{opacity:0}to{opacity:1}}.home{max-width:980px;margin:0 auto;padding:72px 28px 96px}.home h1{font-size:64px;letter-spacing:4px;text-shadow:0 0 .6px currentColor,0 0 12px rgba(240,237,230,.12)}.home .home-sub{margin-top:10px;font-size:24px;letter-spacing:2px;opacity:.55}.home ul{list-style:none;margin-top:46px;display:grid;grid-gap:20px;gap:20px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.lesson-card{display:block;padding:26px 28px 30px;color:var(--chalk);text-decoration:none;background:var(--board);border:2px solid rgba(240,237,230,.25);border-radius:18px 24px 16px 22px/22px 16px 24px 18px;box-shadow:inset 0 0 90px rgba(0,0,0,.5),0 14px 34px rgba(0,0,0,.55);transition:transform .18s ease,border-color .18s ease}.lesson-card:hover{transform:translateY(-3px);border-color:rgba(169,197,216,.7)}.lesson-card .t{font-size:34px;letter-spacing:2px}.lesson-card .s{margin-top:8px;font-size:20px;letter-spacing:1px;opacity:.6}.lesson-card .n{margin-top:18px;font-size:18px;letter-spacing:1px;color:var(--accent-c);opacity:.8}