@font-face{font-family:"Baloo 2";font-style:normal;font-display:swap;font-weight:600;src:url(/assets/baloo-2-latin-600-normal-tIfxVoAe.woff2) format("woff2"),url(/assets/baloo-2-latin-600-normal-B4tNaogw.woff) format("woff")}@font-face{font-family:"Baloo 2";font-style:normal;font-display:swap;font-weight:700;src:url(/assets/baloo-2-latin-700-normal-CqTg7A15.woff2) format("woff2"),url(/assets/baloo-2-latin-700-normal-Ld3Zm3l2.woff) format("woff")}@font-face{font-family:"Baloo 2";font-style:normal;font-display:swap;font-weight:800;src:url(/assets/baloo-2-latin-800-normal-BbF3Etk1.woff2) format("woff2"),url(/assets/baloo-2-latin-800-normal-B8BXfZF7.woff) format("woff")}@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/nunito-latin-600-normal-Br8yIETf.woff2) format("woff2"),url(/assets/nunito-latin-600-normal-Cd0eNu1l.woff) format("woff")}@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:800;src:url(/assets/nunito-latin-800-normal-Dz8SOQK_.woff2) format("woff2"),url(/assets/nunito-latin-800-normal-D-J0wlBY.woff) format("woff")}:root{--milk: #fffdf8;--air: #eaf6fb;--ink: #3f3a60;--ink-soft: #7d7899;--line: #e6e2f2;--sky: #b5e1f1;--sky-d: #7fc0d9;--sky-l: #e4f5fb;--peach: #f8c6be;--peach-d: #e99c97;--peach-l: #ffebe5;--mint: #b7e8d5;--mint-d: #7ccbb0;--mint-l: #e3f7ee;--lav: #c7b3e7;--lav-d: #a089cf;--lav-l: #efe8fa;--butter: #ffe39a;--butter-d: #ebc35a;--butter-l: #fff6d9;--gold: #f6c445;--font-d: "Baloo 2", "Nunito", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;--font-b: "Nunito", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;--r: 28px;--lift: 0 14px 30px -16px rgba(63, 58, 96, .35)}.c-sky{--c: var(--sky);--cd: var(--sky-d);--cl: var(--sky-l)}.c-peach{--c: var(--peach);--cd: var(--peach-d);--cl: var(--peach-l)}.c-mint{--c: var(--mint);--cd: var(--mint-d);--cl: var(--mint-l)}.c-lav{--c: var(--lav);--cd: var(--lav-d);--cl: var(--lav-l)}.c-butter{--c: var(--butter);--cd: var(--butter-d);--cl: var(--butter-l)}.c-white{--c: #fff;--cd: #d9d4ec;--cl: #fff}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{font-family:var(--font-b);font-weight:600;color:var(--ink);background:var(--milk);overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}button:focus-visible{outline:4px solid var(--ink);outline-offset:3px}h1,h2,p{margin:0}.app{height:100vh;height:100dvh;background:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(2px 2px at 78% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 42% 30%,#fff,transparent),radial-gradient(2px 2px at 90% 38%,#fff,transparent),radial-gradient(1.5px 1.5px at 26% 8%,#fff,transparent),radial-gradient(2px 2px at 62% 22%,#fff,transparent),linear-gradient(#cfc3f5,#f6d3e6 52%,#ffe7c6)}.screen{height:100%;max-width:1500px;margin:0 auto;padding:clamp(12px,2vw,26px);padding-top:max(clamp(12px,2vw,26px),env(safe-area-inset-top));display:flex;flex-direction:column;gap:clamp(8px,1.6vh,18px);position:relative}.row{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}.hint{color:var(--ink-soft);font-size:clamp(1rem,2vw,1.3rem);text-align:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:800 clamp(1.1rem,2.2vw,1.45rem) / 1 var(--font-d);padding:.75em 1.4em .65em;border-radius:999px;background:var(--c, var(--butter));box-shadow:0 6px 0 var(--cd, var(--butter-d));transition:transform .08s,box-shadow .08s,opacity .2s}.btn.big{font-size:clamp(1.3rem,2.8vw,1.9rem);padding:.75em 1.6em .65em}.btn:active:not(:disabled){transform:translateY(5px);box-shadow:0 1px 0 var(--cd, var(--butter-d))}.btn:disabled{opacity:.45;cursor:default}.round{width:56px;height:56px;flex:none;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 5px 0 var(--line);transition:transform .08s,box-shadow .08s}.round:active{transform:translateY(4px);box-shadow:0 1px 0 var(--line)}.round.quiet{background:transparent;box-shadow:none;color:var(--ink-soft)}.speak{width:64px;height:64px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--butter);box-shadow:0 6px 0 var(--butter-d);transition:transform .08s,box-shadow .08s}.speak:active{transform:translateY(5px);box-shadow:0 1px 0 var(--butter-d)}.speak.big{width:clamp(120px,20vh,168px);height:clamp(120px,20vh,168px);box-shadow:0 10px 0 var(--butter-d)}.speak.pulse:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:50%;border:5px solid var(--butter);animation:ring 1.8s ease-out infinite}.speak.pulse{position:relative}@keyframes ring{0%{transform:scale(1);opacity:.9}to{transform:scale(1.35);opacity:0}}.top{display:flex;align-items:center;gap:14px;min-height:58px;flex:none}.top-title{font:800 clamp(1.4rem,3.2vw,2.3rem) / 1.1 var(--font-d);padding:0 .25em;background:linear-gradient(transparent 58%,var(--c, var(--butter)) 58%,var(--c, var(--butter)) 92%,transparent 92%)}.top-r{margin-left:auto;display:flex;align-items:center;gap:10px}.pill{display:inline-flex;align-items:center;gap:6px;font:800 1.25rem / 1 var(--font-d);background:#fff;padding:10px 16px 8px;border-radius:999px;box-shadow:0 4px 0 var(--line)}.gold{color:var(--gold)}.dim{color:var(--line)}.stars{display:inline-flex;gap:2px}.dots{display:flex;gap:8px;justify-content:center;flex:none}.dots i{width:28px;height:10px;border-radius:99px;background:var(--line);transition:background .3s,width .3s}.dots i.done{background:var(--mint-d)}.dots i.now{background:var(--ink);width:44px}.monster{flex:none;position:relative;max-width:100%}.monster.fit{width:100%;height:100%;min-width:0;min-height:0;flex:1 1 0}.monster svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 100%;animation:breathe 3.4s ease-in-out infinite}.monster g{transform-box:fill-box;transform-origin:50% 100%}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.012,.985)}}.m-tall .p-antennae{animation:sway 2.6s ease-in-out infinite}.m-thin .p-antenna{animation:sway 2.1s ease-in-out infinite}.m-short .p-sprout{animation:sway 2.4s ease-in-out infinite}.m-strong .p-lift{animation:hold 2.8s ease-in-out infinite}@keyframes sway{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}@keyframes hold{0%,to{transform:translateY(0)}50%{transform:translateY(5px)}}.m-tall.act svg{animation:grow 1.3s cubic-bezier(.3,1.4,.5,1)}.m-short.act svg{animation:hop 1.1s ease-in-out}.m-thin.act svg{animation:squeeze 1.3s ease-in-out}.m-strong.act .p-lift{animation:lift 1.6s ease-in-out}.m-strong.act svg{animation:squat 1.6s ease-in-out}.m-tall.act .p-arms{animation:wave .5s ease-in-out 3;transform-origin:50% 80%}@keyframes grow{0%{transform:scaleY(.36)}60%{transform:scaleY(1.06)}to{transform:scaleY(1)}}@keyframes hop{0%,to{transform:translateY(0) scale(1)}15%,55%{transform:translateY(0) scale(1.14,.78)}35%,75%{transform:translateY(-34%) scale(.94,1.08)}}@keyframes squeeze{0%,to{transform:scaleX(1) rotate(0)}25%{transform:scaleX(.45) rotate(-3deg)}50%{transform:scaleX(.45) rotate(3deg)}75%{transform:scaleX(1.12) rotate(0)}}@keyframes lift{0%,to{transform:translateY(0)}20%,60%{transform:translateY(26px)}40%,80%{transform:translateY(-22px)}}@keyframes squat{0%,to{transform:scaleY(1)}20%,60%{transform:scaleY(.95)}40%,80%{transform:scaleY(1.02)}}@keyframes wave{0%,to{transform:translateY(0)}50%{transform:translateY(-18px)}}.monster.sil svg{animation:none}.monster.sil path{fill:var(--hole, #d9effa)!important}.monster.sil path[stroke]{fill:none!important;stroke:var(--hole, #d9effa)!important}.lineup{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,2vw,28px);padding:0 clamp(36px,5vw,64px) 14px}.lineup:after{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;border-radius:50%;background:radial-gradient(closest-side,rgba(63,58,96,.13),transparent)}.lineup>*{position:relative;z-index:1}.ruler{position:absolute!important;left:0;bottom:14px;z-index:0!important;width:clamp(22px,3vw,34px);height:calc(var(--mh) * 1.04);border-radius:10px;background:repeating-linear-gradient(to top,var(--ink) 0 2px,transparent 2px calc(var(--mh) / 10)) right / 55% 100% no-repeat,repeating-linear-gradient(to top,var(--ink) 0 2px,transparent 2px calc(var(--mh) / 50)) right / 28% 100% no-repeat,var(--butter);box-shadow:0 5px 0 var(--butter-d);opacity:.9}.welcome{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,48px)}.hero{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:3vh 0 5vh}.logo{font:800 clamp(3rem,8vw,7rem) / .86 var(--font-d);letter-spacing:-.02em;transform:rotate(-2deg);transform-origin:center;padding-left:.1em}.logo span{display:block}.logo span+span{padding-left:.6em}.hero-lineup{--mh: min(48vh, 21vw);align-self:center;gap:clamp(6px,1.2vw,28px);padding-right:8px}.join{background:#fff;border-radius:40px;padding:clamp(18px,3vw,32px);box-shadow:var(--lift),0 0 0 6px var(--air);display:flex;flex-direction:column;gap:clamp(8px,1.6vh,16px)}.join h2{font:800 clamp(1.2rem,2.4vw,1.6rem) / 1.1 var(--font-d)}.seats{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(5px,.9vw,10px)}.seat{aspect-ratio:1;max-height:8.2vh;border-radius:18px;background:var(--air);font:800 clamp(1.1rem,2.2vw,1.5rem) / 1 var(--font-d);transition:transform .12s,background .12s}.seat.on{background:var(--ink);color:#fff;transform:scale(1.08)}.teacher-link{position:absolute;right:18px;bottom:12px;font-size:.95rem;color:var(--ink-soft);padding:10px}.orb{flex:none;width:clamp(60px,11vh,92px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:var(--ink);font:800 2rem / 1 var(--font-d);background:radial-gradient(circle at 35% 30%,#fff,var(--c, #d8f1ff) 55%,var(--cd, #b9a8f3) 110%);box-shadow:0 0 0 6px #fff6,0 0 30px 6px #ffffffbf;animation:orb 2.6s ease-in-out infinite}@keyframes orb{50%{transform:scale(1.07,.94);border-radius:46% 54% 50% 50%}}.magic{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:#b9a8ee;touch-action:none}.magic-wrap,.magic-gl,.magic-fx{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.magic-gl{touch-action:none}.magic-fx{pointer-events:none}.magic-top{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(16px,env(safe-area-inset-top)) 20px 0;pointer-events:none}.magic-top>*{pointer-events:auto}.magic-spacer{width:56px;pointer-events:none!important}.magic-hint{position:absolute;left:50%;top:50%;z-index:3;pointer-events:none;transform:translate(-50%,-50%);width:0;height:0}.magic-hint i{position:absolute;border-radius:99px;background:#ffffffe6;box-shadow:0 0 18px #fff}.magic-hint .v{left:150px;top:-110px;width:10px;height:220px;animation:hintv 1.6s ease-in-out infinite}.magic-hint .h{left:-110px;top:190px;width:220px;height:10px;animation:hinth 1.6s ease-in-out infinite}.magic-hint span{position:absolute;left:-150px;top:214px;width:300px;text-align:center;font:800 1.5rem / 1 var(--font-d);color:#fff;text-shadow:0 2px 0 rgba(63,58,96,.3)}@keyframes hintv{50%{transform:scaleY(.4)}}@keyframes hinth{50%{transform:scaleX(.4)}}.magic-fail{position:absolute;inset:40% 10% auto;text-align:center;font-size:1.4rem;color:#fff}.my-bar{position:absolute;left:50%;bottom:2.5%;z-index:5;transform:translate(-50%);width:min(94%,860px);display:flex;flex-direction:column;gap:10px}.swatches{display:flex;justify-content:center;gap:clamp(8px,1.6vw,16px)}.swatch{width:clamp(48px,8vh,64px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;border:5px solid #fff;box-shadow:0 0 18px #fffc}.swatch.on{border-color:var(--ink);transform:scale(1.12)}@media (orientation: portrait){.welcome{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start}.hero{height:auto;padding:1vh 0;gap:2vh}.logo{font-size:clamp(2.6rem,11vw,5rem)}.hero-lineup{--mh: min(20vh, 36vw)}.seat{aspect-ratio:auto;height:5vh;max-height:none}}@media (prefers-reduced-motion: reduce){.monster svg,.monster g,.speak.pulse:after,.orb,.gate{animation:none!important}}.locked{opacity:.6}.btn.small{font-size:clamp(.95rem,1.7vw,1.15rem);padding:.65em 1.1em .55em;box-shadow:0 5px 0 var(--cd, var(--butter-d))}button.pill{transition:transform .08s}button.pill:active{transform:translateY(3px)}.class-badge{align-self:flex-start;white-space:nowrap;font:800 .95rem / 1 var(--font-b);color:var(--ink-soft);background:var(--air);border-radius:99px;padding:8px 14px 7px}mark{background:none;color:inherit;border-radius:12px;padding:0 .16em}mark.w-tall{background:var(--sky)}mark.w-short{background:var(--peach)}mark.w-thin{background:var(--mint)}mark.w-strong{background:var(--lav)}.code-box{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.code-box span{height:clamp(56px,10vh,84px);border-radius:20px;display:grid;place-items:center;font:800 clamp(2rem,5vw,3rem) / 1 var(--font-d);background:var(--air);border:4px dashed var(--sky-d)}.code-box span.on{background:#fff;border-style:solid;border-color:var(--ink)}.code-box.bad span{border-color:var(--peach-d);animation:shake .35s}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}.join-msg{color:var(--ink-soft);font-size:clamp(.95rem,1.8vw,1.15rem);min-height:1.4em}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1vw,10px)}.keypad .seat{aspect-ratio:auto;height:clamp(46px,8vh,66px);max-height:none;display:grid;place-items:center}.keypad .seat:active{background:var(--sky)}.keypad .seat.quiet{background:transparent;color:var(--ink-soft)}.apps{flex:1;min-height:0;width:100%;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,3vw,40px);padding-bottom:14px}.app-card{position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:clamp(14px,2.4vw,28px);border-radius:48px;text-align:center;background:linear-gradient(rgba(255,255,255,.92),var(--cl));box-shadow:0 11px 0 var(--c),0 0 34px #ffffffb3;transition:transform .1s,box-shadow .1s}.app-card:active:not(:disabled){transform:translateY(8px);box-shadow:0 3px 0 var(--c)}.app-card b{font:800 clamp(1.6rem,3.6vw,2.8rem) / 1.05 var(--font-d)}.app-card small{font-size:clamp(1rem,1.9vw,1.35rem);color:var(--ink-soft)}.app-n{position:absolute;left:22px;top:20px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;padding-top:3px;background:#fff;font:800 1.8rem / 1 var(--font-d);box-shadow:0 4px 0 var(--c)}.app-art{flex:1;min-height:0;width:100%;display:grid;place-items:center}.app-art svg{height:100%;max-width:100%}.orb.big{width:min(30vh,22vw);font-size:0}.app-card.locked{opacity:1;background:#ffffff8c;box-shadow:0 11px 0 var(--line)}.app-card.locked .app-art,.app-card.locked b{opacity:.35;filter:grayscale(.6)}.app-lock{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink-soft);box-shadow:0 6px 0 var(--line)}.voice-row{display:flex;gap:10px;flex:none}.vbtn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:84px;height:72px;padding:6px 12px 4px;border-radius:22px;font:800 .95rem / 1 var(--font-d);background:var(--c);box-shadow:0 6px 0 var(--cd);transition:transform .08s,box-shadow .08s,opacity .2s}.vbtn.icon{min-width:72px}.vbtn:active:not(:disabled){transform:translateY(5px);box-shadow:0 1px 0 var(--cd)}.vbtn:disabled{opacity:.4}.say-card{flex:none;display:flex;align-items:center;gap:12px;background:#fffffff2;border-radius:30px;padding:10px 12px 10px 24px;box-shadow:0 7px 0 var(--butter),0 0 26px #ffffffb3}.say-text{flex:1;min-width:0;font:800 clamp(1.5rem,3.4vw,2.5rem) / 1.2 var(--font-d)}.say-text .subj{color:#7a60d6}.say-text .blank{color:var(--ink-soft);letter-spacing:.1em}.maker-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(12px,2vw,26px)}.stage{min-height:0;display:flex;flex-direction:column;gap:12px}.stage-art{flex:1;min-height:0;display:grid;place-items:center;border-radius:44px;background:radial-gradient(ellipse 70% 16% at 50% 96%,rgba(255,255,255,.65),transparent),#ffffff47;animation:stagepop .35s cubic-bezier(.3,1.5,.5,1)}.stage-art svg{height:100%;max-width:100%}@keyframes stagepop{0%{transform:scale(.96,1.03)}}.panel{min-height:0;display:flex;flex-direction:column;gap:12px;background:#fff;border-radius:40px;padding:clamp(12px,1.6vw,20px);box-shadow:var(--lift),0 0 0 6px var(--air)}.tabs{flex:none;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;touch-action:pan-x}.tabs::-webkit-scrollbar{display:none}.tab{flex:1 0 auto;padding:12px 8px 9px;border-radius:18px;font:800 clamp(.9rem,1.5vw,1.15rem) / 1 var(--font-d);color:var(--ink-soft);background:var(--air)}.tab.on{background:var(--ink);color:#fff}.opts{flex:1;min-height:0;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(96px,12vw,138px),1fr));gap:10px;align-content:start;padding:4px}.opts-body{grid-template-columns:repeat(2,1fr)}.opts-color{grid-template-columns:repeat(4,1fr)}.opt{position:relative;aspect-ratio:1;padding:8px 6px 6px;border-radius:24px;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--air);border:4px solid transparent;transition:transform .1s,border-color .1s}.opt svg{flex:1;min-height:0;max-width:100%}.opt span{flex:none;font:800 clamp(.8rem,1.4vw,1rem) / 1.1 var(--font-d)}.opt.wide{aspect-ratio:1.25}.opt.wide span{font-size:clamp(.95rem,1.8vw,1.25rem)}.opt.on{border-color:var(--ink);background:var(--butter-l);transform:scale(1.02)}.opt:active{transform:scale(.96)}.opt-check{position:absolute;right:6px;top:6px;background:var(--ink);color:#fff;border-radius:50%;padding:4px}.swatch-opt{padding:12px}.swatch-opt i{width:100%;height:100%;border-radius:50%;box-shadow:inset -8px -10px #3f3a601a,inset 8px 8px #ffffff59}.shot{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;padding:clamp(14px,3vw,40px);display:flex;align-items:center;justify-content:center;gap:clamp(16px,4vw,56px);background:#3f3a60b8}.shot img{max-height:100%;max-width:55%;border-radius:28px;border:8px solid #fff;box-shadow:var(--lift);animation:stagepop .4s cubic-bezier(.3,1.5,.5,1);-webkit-touch-callout:default;user-select:auto;-webkit-user-select:auto}.shot-side{max-width:420px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;background:#fff;border-radius:40px;padding:clamp(18px,3vw,34px)}.shot-side h2{font:800 clamp(1.8rem,4vw,2.8rem) / 1 var(--font-d)}.shot-side .hint{text-align:left}.magic-title{font:800 clamp(1.3rem,3vw,2rem) / 1 var(--font-d);color:#fff;text-shadow:0 0 14px rgba(122,96,214,.9),0 3px 0 rgba(63,58,96,.3)}.say-card.on-magic .say-text{font-size:clamp(1.7rem,4.4vw,3rem)}.swatches.side{position:absolute;left:max(14px,env(safe-area-inset-left));top:50%;z-index:5;transform:translateY(-50%);flex-direction:column;gap:clamp(6px,1.2vh,12px)}.swatches.side .swatch{width:clamp(40px,6.4vh,56px);border-width:4px}.teacher-monster{position:absolute;left:50%;bottom:16%;height:46%;width:auto;transform-origin:50% 100%;transform:translate(-50%);pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 0 18px rgba(255,255,255,.7))}.teacher-page{height:100%;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:clamp(14px,2.4vw,30px);padding-bottom:60px;font-family:var(--font-b);font-size:1.05rem;line-height:1.6}.teacher-page>*{max-width:1040px;margin-left:auto;margin-right:auto}.teacher-page input,.teacher-page select{font:inherit;color:inherit;padding:10px 14px;border-radius:14px;border:2px solid var(--line);background:#fff;user-select:text;-webkit-user-select:text;min-width:0}.teacher-page input:focus-visible,.teacher-page select:focus-visible{outline:3px solid var(--ink);outline-offset:1px}.t-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}.t-top h1{font:800 clamp(1.3rem,2.6vw,1.9rem) / 1.2 var(--font-d);margin-right:auto}.t-tabs{display:flex;gap:6px;padding:6px;border-radius:99px;background:#fff;box-shadow:0 4px 0 var(--line)}.t-tabs button{padding:9px 20px;border-radius:99px;font-weight:800;color:var(--ink-soft)}.t-tabs button.on{background:var(--ink);color:#fff}.t-back{color:var(--ink-soft);padding:10px;text-decoration:underline}.t-msg{min-height:1.6em;color:#b3475a;font-weight:800;margin-top:8px;margin-bottom:8px}.t-h{font:800 1.3rem / 1.2 var(--font-d);margin-top:22px;margin-bottom:10px}.t-note,.t-empty{color:var(--ink-soft);font-size:.95rem;margin-top:14px}.t-card{background:#fff;border-radius:26px;padding:18px 22px;box-shadow:0 5px 0 var(--line)}.t-card h2{font:800 1.25rem / 1.2 var(--font-d)}.t-login{margin-top:12vh;max-width:420px!important;display:flex;flex-direction:column;gap:12px;background:#fff;border-radius:32px;padding:28px;box-shadow:var(--lift)}.t-login h1{font:800 1.5rem / 1.2 var(--font-d)}.t-login+.t-back{display:block;margin-top:16px;text-align:center}.t-open{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap}.t-open h2{width:100%}.t-open input{flex:1 1 220px}.t-select{display:inline-flex;align-items:center;gap:8px;font-weight:800;white-space:nowrap}.switch{display:inline-flex;align-items:center;gap:10px;font-weight:800;padding:6px 4px;white-space:nowrap}.switch i{position:relative;width:54px;height:32px;border-radius:99px;background:var(--line);transition:background .15s;flex:none}.switch i:after{content:"";position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px #3f3a604d}.switch.on i{background:var(--mint-d)}.switch.on i:after{transform:translate(22px)}.switch:not(.on) span{color:var(--ink-soft)}.t-list{display:flex;flex-direction:column;gap:12px}.t-class{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap}.t-class-id{display:flex;flex-direction:column;min-width:130px}.t-class-id b{font:800 2.2rem / 1 var(--font-d);letter-spacing:.06em}.t-class-id small{color:var(--ink-soft);font-size:.85rem}.t-class-set{flex:1 1 320px;display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center}.t-class-act{display:flex;align-items:center;gap:10px;margin-left:auto}.t-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--air);color:var(--ink);transition:transform .08s,opacity .2s}.t-icon:active:not(:disabled){transform:scale(.92)}.t-icon:disabled{opacity:.35;cursor:default}.t-icon.danger{color:#b3475a;background:var(--peach-l)}.t-icon.rec{color:#d9485f}.t-icon.rec.on{background:#d9485f;color:#fff;animation:beat .8s ease-in-out infinite}@keyframes beat{50%{transform:scale(1.1)}}.t-proj{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;max-width:none!important;display:flex;align-items:center;justify-content:center;gap:5vw;padding:4vw;background:linear-gradient(#cfc3f5,#f6d3e6 52%,#ffe7c6)}.t-proj img{height:min(72vh,46vw);border-radius:36px;padding:18px;background:#fff;box-shadow:var(--lift)}.t-proj-close{position:absolute;right:24px;top:24px}.t-proj-side h2{font:800 clamp(1.6rem,3.4vw,2.6rem) / 1.1 var(--font-d)}.t-proj-code{font:800 clamp(4rem,11vw,9rem) / 1 var(--font-d);letter-spacing:.08em}.t-proj-side ol{font:700 clamp(1.3rem,2.6vw,2rem) / 1.6 var(--font-d);padding-left:1.3em;margin:.3em 0}.t-url{color:var(--ink-soft);word-break:break-all;user-select:text;-webkit-user-select:text}.t-proj-sw{display:flex;flex-direction:column;margin-top:12px}.t-intro{display:flex;flex-direction:column;gap:10px;align-items:flex-start}.t-clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.t-clip{display:flex;flex-direction:column;gap:4px;border:3px solid transparent}.t-clip b{font:800 1.5rem / 1.1 var(--font-d)}.t-clip small{color:var(--ink-soft)}.t-clip.has{border-color:var(--mint-d)}.t-clip.has small{color:#2f8f6f;font-weight:800}.t-clip.live{border-color:#d9485f}.t-clip-act{display:flex;gap:8px;margin-top:8px}.t-samples{display:flex;flex-wrap:wrap;gap:10px 12px;padding-bottom:6px}.t-demo{display:flex;flex-direction:column;gap:14px;margin-top:8px}.t-demo-card{display:flex;align-items:center;gap:24px}.t-demo-card img{height:220px;flex:none}.t-demo-card>div{display:flex;flex-direction:column;gap:10px;align-items:flex-start}@media (orientation: portrait){.apps{grid-template-columns:1fr}.app-card{flex-direction:row;flex-wrap:wrap;justify-content:center}.app-art{flex:1 1 100%;height:22vh}.maker-main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr)}.shot{flex-direction:column}.shot img{max-width:100%;max-height:58%}.t-proj{flex-direction:column}.say-card{flex-wrap:wrap}}@media (prefers-reduced-motion: reduce){.stage-art,.shot img,.t-icon.rec.on{animation:none!important}}