.piano-toggle.svelte-160wc1b{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;color:#6b7280;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}.piano-toggle.svelte-160wc1b:hover{border-color:#ff5100;color:#ff5100}.piano-toggle.active.svelte-160wc1b{border-color:#ff5100;color:#ff5100;background:#ff51000f}.dark .piano-toggle.svelte-160wc1b{background:#1a1a1a;border-color:#333;color:#888}.dark .piano-toggle.svelte-160wc1b:hover{border-color:#ff8c00;color:#ff8c00}.dark .piano-toggle.active.svelte-160wc1b{border-color:#ff8c00;color:#ff8c00;background:#ff8c0014}@media (max-width: 640px){.exercise-top-bar{position:relative;padding-right:52px}.piano-toggle.svelte-160wc1b{position:absolute;top:0;right:0;padding:6px 10px;gap:0}.piano-toggle-label.svelte-160wc1b{display:none}}.float-piano.svelte-16o58ui{position:fixed;z-index:91000;border-radius:14px;overflow:visible;box-shadow:0 12px 48px #00000059;transition:box-shadow .2s ease;touch-action:none;overscroll-behavior:contain}.float-piano.svelte-16o58ui:hover{box-shadow:0 16px 56px #0006}.float-piano.resizing.svelte-16o58ui,.float-piano.resizing.svelte-16o58ui :where(.svelte-16o58ui){transition:none!important}.title-bar.svelte-16o58ui{display:flex;align-items:center;padding:7px 12px;background:linear-gradient(to right,#6366f1,#8b5cf6);cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;gap:8px;border-radius:14px 14px 0 0}.dark .title-bar.svelte-16o58ui{background:linear-gradient(135deg,#3730a3,#4c1d95)}.title-bar.svelte-16o58ui:active{cursor:grabbing}.title-text.svelte-16o58ui{flex:1;font-size:.8rem;font-weight:600;color:#ffffffe6;letter-spacing:.04em}.title-controls.svelte-16o58ui{display:flex;align-items:center;gap:4px}.title-btn.svelte-16o58ui{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:none;border-radius:5px;background:#fff3;color:#fffc;font-size:.75rem;cursor:pointer;transition:all .1s}.title-btn.svelte-16o58ui:hover{background:#ffffff4d;color:#fff}.close-btn.svelte-16o58ui:hover{background:#dc2626;color:#fff}.piano-body.svelte-16o58ui{background:#f0f0f0;border-radius:0 0 14px 14px;overflow:hidden;padding:8px;touch-action:none}.dark .piano-body.svelte-16o58ui{background:#0f0f0f}.resize-handle.svelte-16o58ui{position:absolute;bottom:0;right:0;width:20px;height:20px;cursor:nwse-resize;display:flex;align-items:center;justify-content:center;color:#0003;touch-action:none;z-index:10}.resize-handle.svelte-16o58ui:hover{color:#0006}.dark .resize-handle.svelte-16o58ui{color:#ffffff40}.dark .resize-handle.svelte-16o58ui:hover{color:#ffffff80}.resize-handle.svelte-16o58ui svg:where(.svelte-16o58ui){width:10px;height:10px}.minimized.svelte-16o58ui{border-radius:10px}.minimized.svelte-16o58ui .title-bar:where(.svelte-16o58ui){border-radius:10px}