*{box-sizing:border-box}html,body{margin:0;font-family:ui-rounded,-apple-system,BlinkMacSystemFont,"Noto Sans TC",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;touch-action:manipulation;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:4px solid #e48c35;outline-offset:4px}button:disabled{opacity:.55;cursor:default}[hidden]{display:none!important}.screen{background:#0e1e27;overflow:hidden;width:100vw;height:100dvh}.screen #stage{position:absolute;inset:0;display:grid;place-items:center;background:#cbe9e7}.screen canvas{width:100%;height:100%;object-fit:contain}.screen #video-shell{position:absolute;inset:0;display:grid;place-items:center;background:#12222c}.screen iframe{width:100%;height:100%;max-width:177.777vh;max-height:56.25vw;border:0}.screen #start{position:absolute;width:132px;height:132px;border-radius:50%;background:#fff8;color:#163d50;box-shadow:0 12px 60px #183b3340;backdrop-filter:blur(8px)}.screen #start svg{width:72px;height:72px}.screen #paused{position:absolute;bottom:25px;left:25px;background:#fff9;border-radius:20px;width:65px;height:65px;fill:#234c59}.screen #progress{position:absolute;bottom:0;left:0;height:4px;background:#f2c66c;transition:width .4s linear}.screen #reaction{position:absolute;inset:0;pointer-events:none}.teacher{background:#f4f1e9;color:#183f49;min-height:100vh}.teacher main{width:min(660px,100%);margin:auto;padding:24px 18px max(35px,env(safe-area-inset-bottom))}.teacher header{display:flex;align-items:center;justify-content:space-between}.teacher header small{letter-spacing:.1em;font-size:12px;font-weight:700;color:#668083}.teacher h1{font-size:30px;margin:5px 0}.teacher h2{font-size:20px;margin:0 0 10px}.teacher p{font-size:14px;line-height:1.65;color:#61787b}.teacher #connection{font-size:12px;background:#dbe8dc;border-radius:16px;padding:7px 12px}.teacher .prototype{font-size:12px;color:#7c7469}.teacher section{margin:18px 0}.teacher .now,.teacher #pairing{padding:22px;background:#fff;border-radius:24px;box-shadow:0 5px 25px #163b4510}.teacher .now small{color:#8a9b94;font-size:12px}.teacher .now h2{margin-top:7px;font-size:24px}.teacher .time{display:flex;gap:8px;align-items:baseline;color:#9aaba6}.teacher .time strong{font-variant-numeric:tabular-nums;color:#174b53;font-size:38px}.teacher .time #remaining{margin-left:auto;font-size:13px}.teacher .track{height:6px;background:#eaf0ec;border-radius:4px;margin:13px 0;overflow:hidden}.teacher .track i{display:block;height:100%;background:#82a48d;width:0}.teacher #media-status{font-size:12px;margin-bottom:0}.teacher-controls{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}.teacher-controls button{min-height:70px;border-radius:19px;background:#e5e9e3;color:#21434b;font-weight:700}.teacher-controls button.primary{background:#1e4d57;color:white}.student-panel{padding-top:14px;border-top:1px solid #d9dfd6}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-title h2{margin:0}.section-title button,.modes button,#exit-student{background:#e5e8df;color:#254d56;padding:12px 15px;border-radius:12px;font-size:13px}.modes{display:flex;gap:8px;margin-bottom:16px}.modes button[aria-pressed=true]{background:#f2c66c;color:#443c26}.student-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.student-buttons button{position:relative;min-height:175px;border-radius:28px;background:#fff;color:#214c5b;box-shadow:0 5px 0 #dddacf;display:grid;place-content:center;justify-items:center;gap:10px;transition:transform .15s}.student-buttons button:active,.student-buttons button.pressed{transform:translateY(5px);box-shadow:none;background:#f8e5a8}.student-buttons svg{width:100px;height:100px}.student-buttons span{font-weight:700;font-size:17px}.teacher details{margin:25px 0;padding:18px;border-radius:18px;background:#e9ece4;font-size:14px}.teacher details summary{font-weight:700;cursor:pointer}.teacher .outline-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #d4ddd3;font-size:13px}.teacher #reset{padding:12px 16px;border-radius:10px;background:#d7dfd5;color:#34565d}.teacher #error{position:fixed;bottom:12px;left:18px;right:18px;background:#733f2a;color:white;border-radius:15px;padding:12px;display:none;font-size:13px}.teacher.student-only main{padding-top:14px}.teacher.student-only main>header,.teacher.student-only main>.prototype,.teacher.student-only .now,.teacher.student-only .teacher-controls,.teacher.student-only #pairing,.teacher.student-only details,.teacher.student-only .student-panel>.section-title,.teacher.student-only .student-panel>p,.teacher.student-only .modes{display:none}.teacher.student-only .student-panel{margin:0;padding:0;border:0}.teacher.student-only .student-buttons{height:calc(100dvh - 90px);grid-template-columns:1fr 1fr}.teacher.student-only .student-buttons button{min-height:35dvh}.teacher.student-only .student-buttons span{display:none}.teacher.student-only .student-buttons svg{width:min(30vw,145px);height:min(30vw,145px)}.teacher.student-only #exit-student{display:block!important;margin:18px auto 0;background:transparent;color:#788f89}.teacher #pair-links a{display:block;font-size:12px;word-break:break-all;margin:12px 0;color:#287384}.teacher.student-only .student-select{display:none}@media(max-width:390px){.teacher main{padding:18px 12px}.student-buttons button{min-height:150px}.student-buttons svg{width:85px;height:85px}.teacher h1{font-size:25px}}

.student-select{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 18px}.student-select label{font-size:12px;color:#6b817e}.student-select select{display:block;font:inherit;width:100%;margin-top:7px;padding:12px;background:#fff;border:1px solid #c9d6cd;border-radius:10px;color:#244f57}

.student-buttons button{overflow:hidden}.tap-wave{position:absolute;inset:4px;border:7px solid #e8bc57;border-radius:24px;pointer-events:none;animation:tap-response .5s ease-out forwards}@keyframes tap-response{0%{opacity:1;transform:scale(.92)}100%{opacity:0;transform:scale(1.08)}}

.screen #reaction{z-index:3}.screen #audio-unlock{position:absolute;z-index:5;right:28px;bottom:30px;width:126px;height:126px;border-radius:50%;background:#fff3dbe8;color:#214f5f;box-shadow:0 8px 35px #10263340}.screen #audio-unlock svg{width:76px;height:76px}.screen #start,.screen #paused{z-index:4}