@import"https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;600;700;800&display=swap";:root{font-family:Noto Sans TC,PingFang TC,Microsoft JhengHei,system-ui,sans-serif;color:#20213b;background:#f7f7ff;font-synthesis:none;--purple:#5948f5;--ink:#20213b;--cyan:#68e9ff;--pink:#ff64b7;--green:#40d58b;--amber:#ffbf47}*{box-sizing:border-box}html,body,#root{margin:0;min-width:320px;min-height:100%;height:100%;overflow:hidden}button,select,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,select:focus-visible,input:focus-visible{outline:4px solid #ffbf47;outline-offset:3px}.screen{height:100dvh;min-height:560px;background:linear-gradient(135deg,#f9f8ff,#edfaff)}.eyebrow{margin:0 0 8px;color:#6759e9;font-size:clamp(14px,1.5vw,19px);font-weight:800;letter-spacing:.08em}.home{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(520px,1.25fr);align-items:center;padding:clamp(28px,5vw,80px);overflow:hidden;position:relative}.home:before,.home:after{content:"";position:absolute;border-radius:50%;filter:blur(2px);opacity:.5}.home:before{width:38vw;height:38vw;background:#d9d4ff;right:-14vw;top:-19vw}.home:after{width:22vw;height:22vw;background:#cbf5ff;left:-10vw;bottom:-10vw}.hero{z-index:2;max-width:780px}.hero h1{margin:0;color:#22233f;font-size:clamp(55px,7vw,104px);line-height:1.05;letter-spacing:-.05em}.subtitle{margin:18px 0 35px;color:#626582;font-size:clamp(19px,2vw,28px);font-weight:600}.home-actions{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;max-width:680px}.home-actions .soft{grid-column:1/-1}.big-button{min-height:78px;border:0;border-radius:24px;padding:18px 28px;background:#fff;color:#363853;box-shadow:0 10px 32px #322b731f;font-weight:800;font-size:clamp(19px,2vw,25px);display:flex;align-items:center;justify-content:center;gap:12px}.big-button svg{width:30px;height:30px}.big-button.primary{background:linear-gradient(135deg,#6857fb,#4d3ae5);color:#fff;box-shadow:0 14px 30px #4c39e452}.big-button.soft{background:#eef8ff;color:#254f76}.big-button.compact{min-height:64px;width:auto}.big-button:disabled{opacity:.45;filter:grayscale(.5);cursor:not-allowed}.music-orb{z-index:2;justify-self:center;width:min(30vw,370px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 25%,#796cff,#3529c9);box-shadow:0 30px 80px #3e29be61;display:grid;place-items:center;position:relative}.music-orb:after{content:"";position:absolute;inset:-22px;border:5px solid rgba(101,236,255,.45);border-radius:43% 57% 49% 51%;animation:float 8s linear infinite}.music-orb span{color:#fff;font-size:min(16vw,180px);font-weight:800;transform:rotate(-8deg);text-shadow:20px 20px 0 rgba(255,99,184,.28)}.music-orb i,.music-orb b{position:absolute;width:38px;height:38px;border-radius:50%;background:#67edff;box-shadow:0 0 30px #67edff}.music-orb i{left:0;top:16%}.music-orb b{right:3%;bottom:12%;background:#ffe66f;box-shadow:0 0 30px #ffe66f}.privacy-chip{position:absolute;z-index:3;right:36px;bottom:24px;margin:0;color:#69708b;font-size:14px;font-weight:700}@keyframes float{to{transform:rotate(360deg)}}.centre-page{display:grid;place-items:center;padding:28px;overflow:auto}.dialog-card{width:min(760px,94vw);background:#fff;border-radius:32px;padding:clamp(28px,5vw,54px);box-shadow:0 26px 80px #28236429;text-align:center}.dialog-card h1{font-size:clamp(32px,4vw,52px);margin:12px 0}.dialog-card>p{font-size:20px;color:#6d7085}.icon-bubble{width:86px;height:86px;margin:auto;border-radius:28px;background:#e9e7ff;color:#5846ed;display:grid;place-items:center}.icon-bubble svg{width:44px;height:44px}.icon-bubble.amber{background:#fff2d7;color:#bd7700}.privacy-lines{display:grid;gap:12px;margin:26px 0;text-align:left}.privacy-lines p{margin:0;padding:14px 18px;border-radius:16px;background:#f5f6ff;font-size:18px;font-weight:650;display:flex;align-items:center;gap:13px}.privacy-lines svg{color:#1da968;flex:none}.safety-note{border-radius:16px;background:#fff6dc;color:#704f0d;padding:15px 18px;font-weight:700}.row-actions{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:26px}.text-button,.back-button{border:0;background:transparent;padding:16px 24px;color:#525675;font-size:18px;font-weight:750}.setup-page{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(520px,1.28fr);grid-template-rows:1fr auto;gap:28px;padding:clamp(24px,4vw,56px);overflow:auto}.setup-copy{align-self:center}.step-pill{display:inline-block;border-radius:999px;background:#e8e5ff;color:#5849de;font-weight:800;padding:8px 16px}.setup-copy h1{font-size:clamp(36px,4.5vw,62px);line-height:1.12;margin:22px 0}.setup-copy ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:12px}.setup-copy li{display:flex;align-items:center;gap:12px;color:#5c6078;font-size:20px;font-weight:700}.setup-copy li svg{color:#5948f5}.camera-card{position:relative;overflow:hidden;border-radius:32px;background:#17182d;min-height:360px;box-shadow:0 22px 60px #1b1d4b40}.camera-card video,.camera-card canvas{position:absolute;width:100%;height:100%;object-fit:cover;inset:0}.mirror{transform:scaleX(-1)}.status{position:absolute;left:50%;bottom:22px;transform:translate(-50%);min-width:280px;border-radius:999px;padding:13px 22px;color:#201d20;font-size:18px;font-weight:850;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 8px 28px #00000038}.status.green{background:#baffd9}.status.amber{background:#ffe7aa}.pulse-dot{width:14px;height:14px;border-radius:50%;background:#dc8b00;box-shadow:0 0 0 7px #dc8b002e;animation:pulse 1.5s infinite}.quality-note{position:absolute;right:16px;top:16px;border-radius:999px;background:#14162bc7;padding:8px 13px;color:#fff;font-size:12px}.setup-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:18px}@keyframes pulse{50%{transform:scale(.72)}}.teacher-standalone{overflow:auto;padding:32px 32px 120px}.teacher-page{width:min(1080px,96vw);margin:auto}.teacher-drawer{position:fixed;z-index:20;right:0;top:0;height:100%;width:min(580px,92vw);background:#f8f8ff;padding:26px;overflow:auto;box-shadow:-20px 0 60px #00000047;animation:slidein .25s ease}.teacher-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:-26px;z-index:2;background:#f8f8fff0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:18px 0}.teacher-head h2{margin:0;font-size:32px}.round-button{width:52px;height:52px;border:0;border-radius:50%;background:#e9e9f6;color:#36364d;display:grid;place-items:center}.teacher-page section,.teacher-drawer section{background:#fff;padding:20px;border-radius:22px;margin:15px 0;box-shadow:0 8px 22px #322d6012}.teacher-page h3,.teacher-drawer h3{margin:0 0 14px;color:#373951}.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.choice-grid.five{grid-template-columns:repeat(5,1fr)}.choice-grid button,.level-grid button,.activity-cards button{min-height:56px;border:2px solid #e7e7f1;border-radius:14px;background:#fafafe;color:#4d5069;font-weight:750;padding:10px}.choice-grid button.selected,.level-grid button.selected,.activity-cards button.selected{border-color:#6251f0;background:#ece9ff;color:#3d2fc0}.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.level-grid button{display:flex;align-items:center;gap:9px;text-align:left}.level-grid b{width:30px;height:30px;border-radius:50%;background:#e4e1ff;display:grid;place-items:center}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:58px;padding:9px 3px;font-weight:750}.toggle-row input{position:absolute;opacity:0}.toggle-row i{width:58px;height:34px;border-radius:999px;background:#c9cada;position:relative;transition:.2s}.toggle-row i:after{content:"";position:absolute;width:26px;height:26px;top:4px;left:4px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #777;transition:.2s}.toggle-row input:checked+i{background:#5c4bed}.toggle-row input:checked+i:after{left:28px}.activity-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.activity-cards button{display:grid;justify-items:center;gap:2px}.activity-cards span{font-size:26px}.activity-cards small{font-size:11px;color:#72758a}.teacher-page select,.teacher-drawer select{width:100%;min-height:56px;border:2px solid #ddddea;border-radius:14px;background:#fff;padding:0 14px;color:#3c3f57}.debug-toggle{opacity:.72}.return-activity{position:fixed;right:32px;bottom:24px}@keyframes slidein{0%{transform:translate(100%)}}.music-player{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.music-player>div:first-child{display:grid;margin-right:auto}.music-player span{font-size:12px;color:#73758c}.music-player strong{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.music-player>button{height:48px;min-width:48px;border:0;border-radius:14px;background:#eceaff;color:#4b3de0;display:flex;align-items:center;justify-content:center;gap:4px}.music-player>button span{color:inherit}.demo-buttons{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.demo-buttons button{min-height:38px;border:0;border-radius:10px;background:#f0f0f8;color:#50526b;font-weight:800}.activity-screen{height:100dvh;min-height:520px;background:#0d0e24;position:relative;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.activity-video,.ambient-bg,.stage-canvas{position:absolute;inset:0;width:100%;height:100%}.activity-video{object-fit:cover;opacity:.5;filter:saturate(.76) brightness(.68)}.ambient-bg{background:radial-gradient(circle at 30% 20%,rgba(70,68,180,.42),transparent 34%),radial-gradient(circle at 78% 70%,rgba(186,46,144,.35),transparent 38%),linear-gradient(135deg,#11122b,#171135);z-index:0}.activity-video{z-index:1}.stage-canvas{z-index:3}.skeleton-layer{z-index:2}.visual-layer.hidden{display:none}.view-silhouette .activity-video,.view-visuals .activity-video{opacity:0}.view-camera .ambient-bg{opacity:.36}.view-silhouette .ambient-bg,.view-visuals .ambient-bg{opacity:1}.activity-controls{position:absolute;z-index:8;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%);display:flex;gap:9px;padding:10px;border-radius:24px;background:#14142bba;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 8px 40px #00000061}.activity-controls button{min-width:96px;height:66px;border:0;border-radius:17px;background:#ffffff1a;color:#fff;display:flex;align-items:center;justify-content:center;gap:7px;font-size:16px;font-weight:750}.activity-controls button.finish{background:#fff;color:#37315d}.mode-badge,.exit-presentation{position:absolute;z-index:8;left:22px;top:max(20px,env(safe-area-inset-top));border:0;border-radius:999px;background:#121328bf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;padding:10px 16px;display:flex;align-items:center;gap:9px;font-weight:700}.live-dot{width:10px;height:10px;border-radius:50%;background:#67f1af;box-shadow:0 0 12px #67f1af}.movement-word{position:absolute;z-index:6;left:50%;top:14%;transform:translate(-50%);font-size:clamp(44px,7vw,86px);color:#fff;font-weight:900;text-shadow:0 5px 35px rgba(94,234,255,.8);display:flex;align-items:center;gap:8px}.movement-word svg{width:60px;height:60px;color:#ffe775}.movement-word.small{font-size:38px}.activity-prompt{position:absolute;z-index:7;top:20px;left:50%;transform:translate(-50%);max-width:510px;border-radius:20px;background:#ffffffeb;padding:12px 18px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 35px #0003}.activity-prompt>span{font-size:32px}.activity-prompt div{display:grid}.activity-prompt small{color:#65687b}.discussion-prompt{position:absolute;z-index:7;top:105px;left:50%;transform:translate(-50%);max-width:70%;background:#fff5c8;color:#493b0d;border-radius:18px;padding:12px 20px;font-size:clamp(17px,2vw,24px);font-weight:800;box-shadow:0 8px 30px #0000003d}.debug-panel{position:absolute;z-index:9;right:18px;top:18px;padding:12px 14px;background:#000000c2;color:#7fffb5;border-radius:12px;font:13px/1.55 ui-monospace,monospace}.pause-overlay{position:absolute;z-index:7;inset:0;background:#090a1cad;display:grid;place-content:center;justify-items:center;color:#fff;font-size:48px;gap:12px}.pause-overlay svg{width:75px;height:75px}.drawer-scrim{position:fixed;z-index:19;inset:0;border:0;background:#0000006b}.touch-hint{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;color:#fff;opacity:.7;pointer-events:none;text-align:center}.touch-hint svg{width:80px;height:80px;color:#73edff}.touch-hint b{font-size:24px}.touch-hint span{margin-top:8px}.presentation .mode-badge,.presentation .activity-controls{display:none}.exit-presentation{left:auto;right:18px;opacity:.48}.exit-presentation svg{width:18px}.presentation .discussion-prompt{top:30px}.help-page{overflow:auto;padding:30px 5vw 60px}.back-button{position:absolute;top:18px;left:18px}.help-page header{text-align:center;margin:40px 0 25px}.help-page h1{font-size:clamp(38px,5vw,62px);margin:0}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;max-width:1300px;margin:auto}.steps article{position:relative;background:#fff;border-radius:24px;padding:26px 18px;box-shadow:0 10px 28px #302e6414;text-align:center}.steps article>b{position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:50%;background:#ece9ff;color:#5544df;display:grid;place-items:center}.steps svg{width:48px;height:48px;color:#5d4bec}.steps h2{font-size:20px}.steps p{color:#696c82;line-height:1.65}.teacher-tip{max-width:950px;margin:24px auto;background:#fff3c9;border-radius:20px;padding:18px 24px}.teacher-tip p{margin:6px 0;color:#61542e}@media(max-width:900px){.home{grid-template-columns:1fr;padding:38px}.music-orb{display:none}.hero{text-align:center;margin:auto}.home-actions{margin:auto}.setup-page{grid-template-columns:1fr 1.4fr;padding:22px}.setup-copy h1{font-size:34px}.choice-grid.five{grid-template-columns:repeat(3,1fr)}.level-grid{grid-template-columns:repeat(2,1fr)}.activity-controls button{min-width:80px}.steps{grid-template-columns:repeat(2,1fr)}}@media(max-height:600px){.home{padding:24px 6vw}.hero h1{font-size:58px}.subtitle{margin:10px 0 20px}.big-button{min-height:62px}.camera-card{min-height:310px}.setup-copy h1{font-size:33px;margin:12px 0}.setup-copy ul{gap:5px;margin-bottom:10px}.activity-controls{bottom:8px}.activity-controls button{height:56px}.activity-prompt{top:10px}.movement-word{top:12%}}@media(orientation:portrait){.home{display:flex;align-items:center}.setup-page{grid-template-columns:1fr;grid-template-rows:auto minmax(380px,1fr) auto}.setup-copy ul{grid-template-columns:repeat(3,1fr)}.steps{grid-template-columns:1fr 1fr}.activity-controls{width:92%;justify-content:center}.activity-controls button{min-width:0;flex:1;flex-direction:column;font-size:13px}.activity-controls svg{width:20px}.choice-grid.five{grid-template-columns:1fr 1fr}}