:root{--bg: #f6f4ef;--panel: #ffffff;--text: #1f1d1a;--muted: #6e6861;--line: #ddd8cf;--accent: #2f6fd6;--danger: #e0453a;--ok: #2b7a3d;--color-teacher: #4a8af0;--color-student: #f08a3c;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}button:disabled{cursor:default}.app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}.topbar{display:flex;align-items:center;gap:16px;padding:10px 24px;border-bottom:1px solid var(--line);background:var(--panel)}.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.logo{font-weight:700;letter-spacing:.02em;color:inherit;text-decoration:none}main{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:12px 24px 16px}.nav-button,.mic-toggle,.ptt,.pedal{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;font-size:13px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text)}.nav-button:hover,.nav-button.primary-outline{border-color:var(--accent);color:var(--accent)}.nav-button.primary-outline.done{background:var(--accent);color:#fff}.nav-button.danger{border-color:#f0b8b3;color:var(--danger)}.nav-button.danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}.icon-button{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text)}.icon-button:hover:not(:disabled),.icon-button.active{border-color:var(--accent);color:var(--accent)}.icon-button:disabled{opacity:.4}button.primary{padding:12px 24px;font-size:16px;border:none;border-radius:10px;background:var(--accent);color:#fff}button.primary:disabled{opacity:.6}button.link{border:none;background:none;padding:4px 0;color:var(--accent)}.segmented{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.segmented button{padding:6px 12px;border:none;background:#fbfaf7}.segmented button.on{background:var(--accent);color:#fff}.segmented.wide{display:grid;grid-template-columns:repeat(3,1fr)}.segmented.wide.two{grid-template-columns:repeat(2,1fr)}.check{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:14px;white-space:nowrap}kbd{display:inline-block;min-width:1.6em;padding:0 5px;text-align:center;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:var(--panel);font-family:inherit;font-size:12px}.muted{color:var(--muted)}.small{font-size:13px}.error{color:#c0392b}.warning{color:#b9770e}.tip{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--muted);text-align:left}.tip svg{flex-shrink:0}.center-card{align-self:center;margin:auto;max-width:440px;width:100%;padding:32px;background:var(--panel);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;gap:16px;text-align:center}.center-card h1{margin:0;font-size:22px}.center-card p{margin:0;line-height:1.5}.card-icon{align-self:center;color:var(--accent)}.field{display:flex;flex-direction:column;gap:6px;text-align:left;font-size:14px}.field input{padding:10px 12px;font:inherit;border:1px solid var(--line);border-radius:8px}.progress{height:4px;border-radius:999px;background:#ebe7e0;overflow:hidden}.progress div{height:100%;width:40%;border-radius:999px;background:var(--accent);animation:slide 1.2s ease-in-out infinite}@keyframes slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}.room-bar{flex:0 0 auto;max-width:1200px;width:100%;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:14px}.badge{padding:4px 10px;border-radius:999px;color:#fff;font-size:13px;white-space:nowrap}.peer{display:flex;align-items:center;gap:8px}.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.room-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.voice-quick{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mic-toggle{color:var(--muted)}.mic-toggle.on{color:var(--ok);border-color:#b8d3b9;background:#f1f8f1}.mic-toggle.off{color:var(--danger);border-color:#f0b8b3;background:#fdf1f0}.mic-toggle.live{color:#fff;border-color:var(--danger);background:var(--danger)}.ptt{-webkit-user-select:none;user-select:none;touch-action:none}.ptt.on{background:var(--danger);border-color:var(--danger);color:#fff}.invite{flex:0 0 auto;max-width:1200px;width:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 20px;background:#eef4fd;border:1px solid #c9dbf7;border-radius:12px}.invite-url{margin-top:4px;font-size:13px;color:var(--muted);word-break:break-all;font-family:ui-monospace,monospace}.invite .primary{padding:10px 18px;font-size:14px;white-space:nowrap}.instrument{flex:1;min-height:0;max-width:1200px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:10px}.controls{flex:0 0 auto;display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:10px 20px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.controls.compact{gap:12px;padding:8px 12px;justify-content:space-between}.control-group{display:flex;align-items:center;gap:12px}.toggles{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:14px}.knob{display:flex;flex-direction:column;align-items:center;width:84px;-webkit-user-select:none;user-select:none}.knob-dial{width:56px;height:56px;touch-action:none;cursor:ns-resize;border-radius:50%}.knob-dial:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.knob-dial svg{width:100%;height:100%}.knob-track,.knob-fill{fill:none;stroke-width:8;stroke-linecap:round}.knob-track{stroke:var(--line)}.knob-fill{stroke:var(--accent)}.knob-cap{fill:#fbfaf7;stroke:var(--line);stroke-width:2}.knob-pointer{stroke:var(--text);stroke-width:4;stroke-linecap:round}.knob-value{font-size:13px;font-variant-numeric:tabular-nums}.knob-label{font-size:12px;color:var(--muted)}.stepper{display:flex;align-items:center;gap:4px}.stepper-value{display:flex;flex-direction:column;align-items:center;min-width:88px;line-height:1.2}.stepper-value>span:first-child{font-size:14px}.stepper-label{font-size:12px;color:var(--muted)}.pedal{height:38px;padding:0 18px;background:#fbfaf7;-webkit-user-select:none;user-select:none;touch-action:none;font-size:14px}.pedal.on{background:var(--accent);border-color:var(--accent);color:#fff}.piano{position:relative;flex:0 0 auto;height:clamp(130px,28vh,240px);touch-action:none;-webkit-user-select:none;user-select:none;background:#222;border-radius:8px;overflow:hidden;box-shadow:0 6px 20px #00000026}.instrument.staff-hidden .piano{flex:1;height:auto;max-height:420px}.key{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.key.white{height:100%;background:#fffdf8;border:1px solid #bbb;border-top:none;border-radius:0 0 6px 6px;z-index:1;padding-bottom:8px}.key.black{height:62%;background:#1b1a19;z-index:2;border-radius:0 0 4px 4px;padding-bottom:6px;box-shadow:inset 0 -4px #000}.key.pressed{box-shadow:inset 0 3px 8px #00000040}.key.disabled{opacity:.35}.key-note{font-size:12px;color:#5f5952}.key-note sub{font-size:9px}.key.white.pressed .key-note,.key.pressed .key-label{color:#fff}.key-label{margin-top:4px;font-size:12px;font-weight:600;text-transform:uppercase;color:#7a736a}.key.black .key-label{color:#a09a93}.piano-edge{position:absolute;top:8px;z-index:3;display:flex;align-items:center;gap:2px;padding:4px 8px;border:none;border-radius:999px;color:#fff;font-size:12px;font-weight:600;box-shadow:0 2px 8px #0000004d}.piano-edge.left{left:8px}.piano-edge.right{right:8px}.piano-edge sub{font-size:9px}.staff-panel{flex:1 1 0;min-height:0;display:flex;flex-direction:column;padding:10px 20px 6px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.staff-panel.collapsed{flex:0 0 auto;margin-bottom:auto;padding:8px 20px}.staff-toolbar{display:flex;align-items:center;gap:16px;font-size:14px}.staff-toolbar .hide{margin-left:auto}.staff-canvas{flex:1;min-height:0;width:100%;overflow:hidden}.staff-canvas svg{display:block}.staff-names{min-height:22px;display:flex;gap:12px;justify-content:center;font-weight:600}.staff-names sub{font-size:10px}.drawer-layer{position:fixed;inset:0;z-index:40;pointer-events:none}.drawer-layer.open{pointer-events:auto}.drawer-backdrop{position:absolute;inset:0;background:#14120f73;opacity:0;transition:opacity .3s ease}.drawer-layer.open .drawer-backdrop{opacity:1}.drawer{position:absolute;top:0;right:0;height:100%;width:min(380px,100%);display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line);box-shadow:-12px 0 32px #00000026;transform:translate(100%);transition:transform .3s ease}.drawer-layer.open .drawer{transform:translate(0)}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--line)}.drawer-head h2{margin:0;font-size:18px}.drawer-body{flex:1;overflow-y:auto;padding:20px 24px}.drawer-section{margin-bottom:28px}.drawer-section h3{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.drawer-section-body{display:flex;flex-direction:column;gap:16px}.drawer-field{display:flex;flex-direction:column;gap:6px}.drawer-field input[type=range]{width:100%;accent-color:var(--accent)}.field-row{display:flex;justify-content:space-between}.toggle-label{font-size:14px}.hint-text{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--muted)}.toggle{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;cursor:pointer}.toggle.disabled{opacity:.45;cursor:default}.switch{position:relative;flex-shrink:0;width:44px;height:24px;margin-top:2px;border:none;border-radius:999px;background:#d6d1c8;transition:background .2s}.switch span{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:left .2s}.switch.on{background:var(--accent)}.switch.on span{left:22px}.select{height:38px;width:100%;padding:0 10px;font:inherit;font-size:14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.meter{height:6px;border-radius:999px;background:#ebe7e0;overflow:hidden}.meter div{height:100%;width:0;border-radius:999px;background:#3faa5a;transition:width 75ms}.status-list{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:14px}.status-list dt{color:var(--muted)}.status-list dd{margin:0;text-align:right}.keys-list{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;margin:0;font-size:13px;align-items:baseline}.keys-list dt{white-space:nowrap}.keys-list dd{margin:0;color:var(--muted);line-height:1.4}.video-panel{position:fixed;right:24px;top:110px;z-index:30;width:320px;aspect-ratio:16 / 9;background:#111;border-radius:12px;overflow:hidden;box-shadow:0 8px 28px #0000004d;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}.video-panel.collapsed{width:128px}.video-remote,.video-remote video{position:absolute;inset:0;width:100%;height:100%}.video-remote video{object-fit:cover}.video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#999;font-size:13px}.video-name{position:absolute;left:8px;bottom:6px;padding:2px 8px;border-radius:6px;background:#00000080;color:#fff;font-size:12px}.video-panel.collapsed .video-name{display:none}.video-self{position:absolute;right:8px;bottom:8px;width:30%;aspect-ratio:16 / 9;border-radius:6px;overflow:hidden;border:1px solid rgb(255 255 255 / .4);background:#000}.video-self video{width:100%;height:100%;object-fit:cover}video.mirror{transform:scaleX(-1)}.video-tools{position:absolute;right:6px;top:6px;display:flex;gap:4px;opacity:0;transition:opacity .2s}.video-panel:hover .video-tools,.video-panel.collapsed .video-tools{opacity:1}.video-tools .icon-button{width:28px;height:28px;border:none;background:#0000008c;color:#fff}@media(max-width:1000px){.topbar{padding:8px 16px}main{padding:10px 16px 12px}.controls{gap:16px}}@media(max-width:700px){.topbar{padding:8px 12px;gap:8px}main{padding:8px 10px 10px;gap:8px}.btn-text{display:none}.nav-button,.mic-toggle{padding:0 9px}.room-bar{gap:8px;font-size:13px}.staff-panel{padding:6px 10px 4px}.staff-toolbar{font-size:13px}.staff-names{min-height:18px;font-size:13px}.piano{height:clamp(150px,32vh,260px);border-radius:6px}.key.white{padding-bottom:6px}.key-note{font-size:11px}.invite{padding:12px 14px}.video-panel{right:10px;top:150px}}@media(max-height:480px){.topbar{padding:4px 12px}main{padding:6px 10px 8px;gap:6px}.btn-text{display:none}.room-bar{font-size:12px;gap:8px}.badge{padding:2px 8px;font-size:12px}.staff-panel{padding:4px 12px}.staff-toolbar{font-size:12px}.staff-names{display:none}.controls.compact{padding:4px 10px}.controls.compact .pedal,.controls.compact .icon-button{height:30px}.piano{height:38vh}.invite{display:none}.video-panel{top:90px;right:10px}}