.classroom{--paper:var(--color-paper);--surface:var(--color-surface);--mist:var(--color-mist);--navy:var(--color-navy);--navy-soft:var(--color-navy-soft);--ink:var(--color-ink);--ink-soft:var(--color-ink-soft);--ink-faint:var(--color-ink-faint);--line:var(--color-line);--line-strong:var(--color-line-strong);--mint:var(--color-mint);--cyan:var(--color-cyan);--accent-ink:var(--color-accent-ink);--live:var(--color-danger);--live-ink:var(--color-danger-ink);--btn:var(--color-btn);--btn-ink:var(--color-btn-ink);--shadow:0 10px 30px #0a0f1e1f;--display:var(--font-display);--wrap:1480px}#cr-hero{height:calc(100svh - var(--cr-top,70px));background:var(--paper);border-bottom:1px solid var(--line);min-height:560px;position:relative;overflow:hidden}#cr-hero canvas{touch-action:pan-y;-webkit-tap-highlight-color:transparent;cursor:pointer;display:block;position:absolute;inset:0}#cr-touchHint{display:none}@media (pointer:coarse){#cr-touchHint{z-index:5;background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);box-shadow:var(--shadow);white-space:nowrap;border-radius:999px;padding:7px 14px;font-size:13px;transition:opacity .5s;display:block;position:absolute;top:18px;left:50%;transform:translate(-50%)}#cr-touchHint.gone{opacity:0;pointer-events:none}}#cr-loading{z-index:2;color:var(--ink-faint);text-align:center;font-size:14px;position:absolute;top:55%;left:50%;transform:translate(-50%,-50%)}#cr-loading .bar{background:var(--line);border-radius:4px;width:180px;height:4px;margin:10px auto 0;overflow:hidden}#cr-loading .bar i{background:linear-gradient(90deg, var(--mint), var(--cyan));width:0;height:100%;transition:width .2s;display:block}#cr-fallback{padding:0 max(24px, calc((100% - var(--wrap)) / 2)) 0 calc(max(24px, calc((100% - var(--wrap)) / 2)) + 340px);flex-direction:column;justify-content:center;display:flex;position:absolute;inset:0}#cr-fallback h1{font:700 clamp(30px, 4vw, 52px) / 1.2 var(--display);background:linear-gradient(100deg, var(--color-mint), var(--color-cyan) 55%, var(--color-indigo));color:#0000;-webkit-background-clip:text;background-clip:text}#cr-fallback p{color:var(--ink-soft);margin-top:16px;font-size:18px;line-height:1.6}#cr-fallback small{color:var(--ink-faint);margin-top:12px;font-size:13px;display:block}#cr-guide{left:max(24px, calc((100% - var(--wrap)) / 2));z-index:5;background:color-mix(in srgb, var(--surface) 92%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--line);width:300px;box-shadow:var(--shadow);border-radius:16px;padding:22px 18px 16px;transition:opacity .4s,transform .4s;position:absolute;top:50%;transform:translateY(-50%)}#cr-guide h2{font:700 12px var(--font-sans);letter-spacing:.02em;color:var(--ink-faint);margin:2px 6px 8px}#cr-hero.focused #cr-guide{opacity:0;pointer-events:none;transform:translate(-30px,-50%)}#cr-guideList li{border-radius:10px;align-items:center;list-style:none;transition:background .15s;display:flex}#cr-guideList li:hover,#cr-guideList li.hot,#cr-guideList li.active{background:var(--mist)}#cr-guideList button:focus-visible,#cr-guideList a:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:8px}#cr-guideList button{cursor:pointer;text-align:left;color:var(--ink);background:0 0;border:0;flex:1;align-items:center;gap:10px;padding:10px 8px;display:flex}#cr-guideList button i{border-radius:3px;flex:none;width:10px;height:10px}#cr-guideList button b{font:700 16px var(--display);color:var(--navy)}#cr-guideList button span{color:var(--ink-faint);font-size:13px}#cr-guideList button em{font:700 10px var(--font-mono);color:var(--live-ink);background:var(--live);letter-spacing:.06em;border-radius:4px;padding:2px 6px;font-style:normal}#cr-guideList a{color:var(--ink-faint);border-radius:8px;margin-right:4px;padding:8px 10px;font-size:15px;text-decoration:none}#cr-guideList a:hover{color:var(--navy);background:var(--surface)}#cr-guide .how{border-top:1px dashed var(--line);color:var(--ink-faint);margin:12px 6px 0;padding-top:12px;font-size:12px}#cr-guide .how kbd{font:600 11px var(--font-sans);border:1px solid var(--line-strong);background:var(--surface);border-bottom-width:2px;border-radius:5px;padding:1px 6px}#cr-liveBar{z-index:6;background:var(--surface);border:1px solid color-mix(in srgb, var(--live) 40%, transparent);box-shadow:var(--shadow);white-space:nowrap;color:var(--ink);border-radius:999px;align-items:center;gap:14px;padding:10px 12px 10px 18px;font-size:14px;display:flex;position:absolute;top:18px;left:50%;transform:translate(-50%)}#cr-liveBar b{color:var(--live);font:700 12px var(--font-mono);letter-spacing:.08em;align-items:center;gap:6px;display:flex}#cr-liveBar b:before{content:"";background:var(--live);border-radius:50%;width:8px;height:8px;animation:1.4s infinite cr-blink}#cr-liveBar a{background:var(--live);color:var(--live-ink);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;text-decoration:none}@keyframes cr-blink{50%{opacity:.25}}#cr-ui{right:max(20px, calc((100% - var(--wrap)) / 2));z-index:6;gap:8px;display:flex;position:absolute;bottom:22px}.classroom .chip{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);cursor:pointer;white-space:nowrap;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;box-shadow:0 2px 8px #0000000d}.classroom .chip:hover{color:var(--ink);border-color:var(--navy-soft)}#cr-eggBtn b{color:var(--accent-ink)}#cr-bgmBtn.on{color:var(--accent-ink);border-color:color-mix(in srgb, var(--mint) 45%, transparent)}#cr-bgmBtn.on:after{content:"";background:linear-gradient(currentColor,currentColor) 0 100%/2px 60% no-repeat,linear-gradient(currentColor,currentColor) 4px 100%/2px 100% no-repeat,linear-gradient(currentColor,currentColor) 8px 100%/2px 40% no-repeat;width:10px;height:8px;margin-left:6px;animation:.9s infinite alternate cr-eq;display:inline-block}@keyframes cr-eq{to{opacity:.45}}#cr-eggBtn.bump{animation:.5s cr-bump}@keyframes cr-bump{30%{transform:scale(1.2)}}#cr-eggList{right:max(20px, calc((100% - var(--wrap)) / 2));background:var(--surface);border:1px solid var(--line);width:240px;box-shadow:var(--shadow);z-index:7;border-radius:14px;padding:14px 16px;display:none;position:absolute;bottom:70px}#cr-eggList.open{display:block}#cr-eggList h4{color:var(--navy);margin-bottom:8px;font-size:14px;font-weight:700}#cr-eggList li{border-top:1px dashed var(--line);color:var(--ink-faint);padding:5px 0;font-size:13px;list-style:none}#cr-eggList li.on{color:var(--ink);font-weight:700}#cr-eggList li.on:before{content:"✓ ";color:var(--mint)}#cr-eggList small{color:var(--ink-faint);margin-top:8px;font-size:11px;line-height:1.5;display:block}#cr-scrollCue{z-index:5;color:var(--ink-faint);font-size:13px;text-decoration:none;transition:opacity .4s;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}#cr-scrollCue span{animation:1.8s infinite cr-nudge;display:inline-block}@keyframes cr-nudge{50%{transform:translateY(4px)}}#cr-hero.focused #cr-scrollCue{opacity:0}#cr-tip{pointer-events:none;background:var(--surface);color:var(--navy);border:1px solid var(--line);box-shadow:var(--shadow);opacity:0;z-index:45;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:700;transition:opacity .15s;position:fixed;transform:translate(14px,14px)}#cr-toast{opacity:0;z-index:45;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);text-align:center;pointer-events:none;border-radius:12px;max-width:90vw;padding:12px 20px;transition:all .35s;position:fixed;top:140px;left:50%;transform:translate(-50%,-16px)}#cr-toast.show{opacity:1;transform:translate(-50%)}#cr-toast b{font-size:15px;display:block}#cr-toast span{color:var(--accent-ink);margin-top:3px;font-size:12px;font-weight:700;display:block}#cr-panel{right:max(24px, calc((100% - var(--wrap)) / 2));visibility:hidden;background:var(--surface);border:1px solid var(--line);z-index:8;border-radius:16px;width:min(380px,100% - 48px);padding:26px 24px;transition:transform .55s cubic-bezier(.2,.8,.2,1),visibility .55s;position:absolute;top:50%;transform:translate(calc(100% + 40px),-50%);box-shadow:0 20px 50px #0a0f1e29}#cr-panel.open{visibility:visible;transform:translateY(-50%)}#cr-panel .tag{color:var(--ink-soft);align-items:center;gap:6px;font-size:12px;font-weight:700;display:inline-flex}#cr-panel .tag em{font-style:normal}#cr-panel .tag i{border-radius:2px;width:8px;height:8px}#cr-panel h2{font:700 28px var(--display);color:var(--navy);margin:10px 0 8px}#cr-panel p{color:var(--ink-soft);font-size:15px;line-height:1.65}#cr-panel ul{margin-top:12px}#cr-panel li{border-top:1px solid var(--line);color:var(--ink);padding:8px 0;font-size:14px;list-style:none}#cr-panel li small{color:var(--ink-faint);margin-left:6px}#cr-panel .go{text-align:center;background:var(--btn);color:var(--btn-ink);border-radius:10px;margin-top:18px;padding:13px;font-weight:700;text-decoration:none;display:block}#cr-panel .back{border:1px solid var(--line-strong);width:100%;font:600 14px var(--font-sans);color:var(--ink-soft);cursor:pointer;background:0 0;border-radius:10px;margin-top:8px;padding:11px;display:block}#cr-stamp{opacity:0;pointer-events:none;z-index:50;background:#0a0f1e8c;flex-direction:column;justify-content:center;align-items:center;gap:26px;transition:opacity .4s;display:flex;position:fixed;inset:0}#cr-stamp.show{opacity:1;pointer-events:auto}#cr-stamp .mark{color:#d93a2f;opacity:0;background:#fffaf0;border:10px solid #d93a2f;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:250px;height:250px;display:flex;transform:rotate(-14deg)scale(3);box-shadow:inset 0 0 0 6px #fffaf0,inset 0 0 0 10px #d93a2f}#cr-stamp .mark b{text-align:center;font-size:46px;font-weight:900;line-height:1.15}#cr-stamp .mark small{margin-top:8px;font-size:14px;font-weight:700}#cr-stamp.show .mark{animation:.45s cubic-bezier(.3,1.6,.5,1) .1s forwards cr-stampIn}@keyframes cr-stampIn{to{opacity:1;transform:rotate(-14deg)scale(1)}}#cr-stamp p{color:#fff;text-align:center;font-size:16px;line-height:1.6}#cr-stamp button{color:#1f2933;cursor:pointer;background:#fff;border:none;border-radius:10px;padding:11px 26px;font-size:14px;font-weight:700}@media (max-width:760px){#cr-guide{border-radius:14px;width:auto;padding:8px;inset:auto 12px 62px;transform:none}#cr-guide h2,#cr-guide .how{display:none}#cr-guideList{scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:4px;display:flex;overflow-x:auto}#cr-guideList::-webkit-scrollbar{display:none}#cr-guideList li{flex:none}#cr-guideList a{display:none}#cr-guideList button{padding:8px 10px}#cr-guideList button span{display:none}#cr-guideList button b{font-size:14px}#cr-hero.focused #cr-guide{opacity:0;pointer-events:none;transform:none}#cr-panel{visibility:hidden;width:auto;inset:auto 14px 14px;transform:translateY(130%)}#cr-panel.open{visibility:visible;transform:translateY(0)}#cr-ui{bottom:12px;right:12px}.classroom .chip{padding:6px 10px;font-size:12px}#cr-eggList{bottom:56px;right:12px}#cr-scrollCue{display:none}#cr-liveBar{font-size:13px;top:58px}#cr-fallback{justify-content:center;padding:0 24px 120px}}@media (prefers-reduced-motion:reduce){#cr-scrollCue span,#cr-liveBar b:before,#cr-bgmBtn.on:after{animation:none}}#cr-guide{transform-origin:0}#cr-hero[data-state=loading] #cr-guide{opacity:.35;transform:translateY(-50%)scale(.78)}#cr-hero[data-state=ready] #cr-guide{transition:transform 1.6s cubic-bezier(.2,.8,.2,1),opacity 1s}#cr-hero[data-state=ready] #cr-guideList li{animation:.7s cubic-bezier(.2,.8,.2,1) both cr-rise}#cr-guideList li:nth-child(2){animation-delay:80ms}#cr-guideList li:nth-child(3){animation-delay:.16s}#cr-guideList li:nth-child(4){animation-delay:.24s}#cr-guideList li:nth-child(5){animation-delay:.32s}#cr-guideList li:nth-child(6){animation-delay:.4s}@keyframes cr-rise{0%{opacity:0;transform:translateY(8px)}}#cr-hero[data-state=ready] #cr-ui{animation:.6s cubic-bezier(.2,.8,.2,1) .9s both cr-rise}#cr-hero[data-state=ready] #cr-scrollCue{animation:.6s 1.4s both cr-fadein}@keyframes cr-fadein{0%{opacity:0}}#cr-fade{z-index:20;background:var(--paper);opacity:0;pointer-events:none;transition:opacity .5s .1s;position:absolute;inset:0}#cr-hero.leaving #cr-fade{opacity:1}#cr-hero.leaving #cr-guide,#cr-hero.leaving #cr-ui,#cr-hero.leaving #cr-scrollCue{opacity:0;transition:opacity .3s}#cr-jukebox{z-index:48;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;background:#0a0f1e73;place-items:center;padding:16px;transition:opacity .3s,visibility .3s;display:grid;position:fixed;inset:0}#cr-jukebox.open{opacity:1;visibility:visible}#cr-jukebox .jb-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;grid-template-columns:220px minmax(0,1fr);align-items:center;gap:8px;width:min(640px,100%);max-height:calc(100dvh - 32px);padding:22px 26px 22px 14px;transition:transform .45s cubic-bezier(.2,.9,.25,1.15);display:grid;position:relative;overflow:auto;transform:translateY(18px)scale(.96);box-shadow:0 30px 70px #0a0f1e4d}#cr-jukebox.open .jb-card{transform:none}#cr-jukebox .jb-art{place-items:center;display:grid}#cr-jukebox .jb-art img{object-fit:contain;filter:drop-shadow(0 14px 18px #3c28142e);width:100%;height:auto;max-height:340px}#cr-jukebox.playing .jb-art img{animation:2.4s ease-in-out infinite cr-sway}@keyframes cr-sway{50%{transform:translateY(-3px)rotate(-.6deg)}}#cr-jukebox .jb-eyebrow{font:700 12px var(--font-sans);color:var(--accent-ink)}#cr-jukebox h3{font:700 24px var(--display);color:var(--navy);margin-top:4px}#cr-jukebox .jb-now{flex-direction:column;gap:2px;margin-top:10px;display:flex}#cr-jukebox .jb-now span{color:var(--ink-faint);font-size:12px}#cr-jukebox .jb-now b{color:var(--ink);font-size:15px}#cr-jukebox .jb-ctrl{align-items:center;gap:8px;margin-top:12px;display:flex}#cr-jukebox .jb-ctrl button{border:1px solid var(--line-strong);background:var(--surface);width:40px;height:40px;color:var(--ink-soft);cursor:pointer;border-radius:50%;place-items:center;font-size:14px;display:grid}#cr-jukebox .jb-ctrl button:hover{color:var(--ink);border-color:var(--navy-soft)}#cr-jukebox .jb-ctrl .play{background:var(--btn);width:48px;height:48px;color:var(--btn-ink);border-color:#0000;font-size:15px}#cr-jbList{border-top:1px solid var(--line);max-height:240px;margin-top:14px;list-style:none;overflow-y:auto}#cr-jbList li{border-bottom:1px solid var(--line)}#cr-jbList button{text-align:left;cursor:pointer;width:100%;color:var(--ink);background:0 0;border:0;border-radius:8px;align-items:center;gap:12px;padding:9px 6px;display:flex}#cr-jbList button:hover{background:var(--mist)}#cr-jbList .no{font:600 11px var(--font-mono);color:var(--ink-faint);width:18px}#cr-jbList .tt{flex-direction:column;flex:1;min-width:0;display:flex}#cr-jbList .tt b{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}#cr-jbList .tt small{color:var(--ink-faint);font-size:12px}#cr-jbList button.on .tt b,#cr-jbList button.on .no{color:var(--accent-ink)}#cr-jbList .eq{opacity:0;width:12px;height:10px}#cr-jukebox.playing #cr-jbList button.on .eq{opacity:1;color:var(--accent-ink);background:linear-gradient(currentColor,currentColor) 0 100%/2px 60% no-repeat,linear-gradient(currentColor,currentColor) 5px 100%/2px 100% no-repeat,linear-gradient(currentColor,currentColor) 10px 100%/2px 40% no-repeat;animation:.9s infinite alternate cr-eq}#cr-jukebox .jb-credit{color:var(--ink-faint);margin-top:10px;font-size:11px}#cr-jbClose{width:34px;height:34px;color:var(--ink-faint);cursor:pointer;background:0 0;border:0;border-radius:50%;font-size:15px;position:absolute;top:12px;right:12px}#cr-jbClose:hover{background:var(--mist);color:var(--ink)}#cr-jukebox button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}@media (max-width:760px){#cr-hero[data-state=loading] #cr-guide{transform-origin:bottom;transform:scale(.9)}#cr-guide{transform-origin:bottom}#cr-toast{top:auto;bottom:150px;transform:translate(-50%,16px)}#cr-toast.show{transform:translate(-50%)}#cr-jukebox{align-items:end;padding:0}#cr-jukebox .jb-card{border-radius:22px 22px 0 0;grid-template-columns:1fr;max-height:88dvh;padding:18px 18px 22px;transform:translateY(100%)}#cr-jukebox .jb-art img{max-height:150px}}@media (prefers-reduced-motion:reduce){#cr-hero[data-state] #cr-guide,#cr-jukebox .jb-card{transition:none}#cr-hero[data-state=ready] #cr-guideList li,#cr-hero[data-state=ready] #cr-ui,#cr-jukebox.playing .jb-art img{animation:none}}#cr-hero[data-state=ready].focused #cr-guide,#cr-hero[data-state=ready].leaving #cr-guide{transition-duration:.4s}#cr-jukebox .jb-vol{min-width:0;max-width:150px;color:var(--ink-faint);flex:1;align-items:center;gap:6px;margin-left:6px;font-size:14px;display:flex}#cr-jbVol{appearance:none;cursor:pointer;background:linear-gradient(var(--mint), var(--mint)) 0 / var(--fill,40%) 100% no-repeat, var(--line-strong);border-radius:6px;flex:1;min-width:60px;height:6px}#cr-jbVol::-webkit-slider-thumb{-webkit-appearance:none;background:var(--surface);border:2px solid var(--mint);border-radius:50%;width:16px;height:16px;box-shadow:0 1px 4px #00000026}#cr-jbVol::-moz-range-thumb{background:var(--surface);border:2px solid var(--mint);border-radius:50%;width:14px;height:14px}#cr-jbVol:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}