.pianoroll-embed,.pianoroll-embed .pr-app{--pr-radius: 10px;--pr-bg: #f8fafc;--pr-panel: rgba(241, 245, 249, 0.96);--pr-header: rgba(248, 250, 252, 0.98);--pr-border: rgba(148, 163, 184, 0.42);--pr-text: #0f172a;--pr-muted: #64748b;--pr-canvas-bg: #f8fafc;--pr-ruler-bg: rgba(241, 245, 249, 0.96);--pr-ruler-label: #334155;--pr-grid-sub: rgba(148, 163, 184, 0.22);--pr-grid-beat: rgba(100, 116, 139, 0.28);--pr-grid-bar: rgba(100, 116, 139, 0.42);--sandbox-surface: var(--pr-bg);--sandbox-canvas-bg: var(--pr-canvas-bg);--sandbox-ruler-bg: var(--pr-ruler-bg);--sandbox-border: var(--pr-border);--sandbox-text: var(--pr-text);--sandbox-muted: var(--pr-muted);--sandbox-ruler-label: var(--pr-ruler-label);--sandbox-grid-sub: var(--pr-grid-sub);--sandbox-grid-beat: var(--pr-grid-beat);--sandbox-grid-bar: var(--pr-grid-bar);--pr-accent: color-mix(in srgb, var(--sandbox-accent) 65%, transparent);--pr-accent-fill: color-mix(in srgb, var(--sandbox-accent) 35%, transparent);--pr-focus-ring: color-mix(in srgb, var(--sandbox-accent) 45%, transparent);--pr-control-bg: color-mix(in srgb, var(--pr-bg) 82%, var(--pr-panel));--pr-input-bg: var(--pr-control-bg);--pr-control-border: var(--pr-border);--pr-control-text: var(--pr-text);--pr-text-strong: var(--sandbox-surface)}.pianoroll-mount{width:100%;height:520px;min-height:260px;display:flex;flex-direction:column;gap:0;position:relative;overflow:visible}.pianoroll-mount .pr-app.pr-app--canvas{flex:1 1 auto;min-height:0;position:relative;border-radius:0;overflow:hidden;background:var(--pr-canvas-bg);border:1px solid var(--pr-border);border-top:0;z-index:1}.pr-app.pr-app--canvas>canvas.pianoroll-canvas{display:block;width:100%;height:100%}.pr-selection-elements{position:absolute;inset:0;z-index:4;pointer-events:none;margin:0 !important}.pianoroll-performer-tooltip{position:absolute;max-width:min(360px,100% - 24px);min-width:260px;transform:translate(-12px, calc(-100% - 14px));pointer-events:auto;border:1px solid color-mix(in srgb, var(--sandbox-accent) 32%, var(--pr-border));border-radius:14px;background:linear-gradient(180deg, color-mix(in srgb, var(--sandbox-surface) 94%, white 6%), color-mix(in srgb, var(--sandbox-surface) 98%, black 2%));box-shadow:0 16px 34px rgba(0,0,0,.22),0 2px 0 rgba(255,255,255,.06) inset;padding:10px 12px 12px}.pianoroll-performer-tooltip::after{content:"";position:absolute;left:18px;bottom:-8px;width:16px;height:16px;transform:rotate(45deg);background:inherit;border-right:1px solid color-mix(in srgb, var(--sandbox-accent) 32%, var(--pr-border));border-bottom:1px solid color-mix(in srgb, var(--sandbox-accent) 32%, var(--pr-border))}.pianoroll-performer-tooltip__meta{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.pianoroll-performer-tooltip__title{font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--pr-text)}.pianoroll-performer-tooltip__sub{font-size:.72rem;color:var(--pr-muted)}.track-circular-pianoroll .pianoroll-toolbar-wrapper{margin-top:0}.track-circular-pianoroll__mount{height:auto;min-height:520px}.track-circular-pianoroll__surface{display:block;overflow:auto}.track-circular-pianoroll__host{min-height:100%;padding:16px}.pianoroll-toolbar-wrapper{position:relative;width:100%;z-index:110;order:0;margin-top:8px;background:var(--pr-header);border:1px solid var(--pr-border);border-bottom:0}.pianoroll-embed{display:flex;flex-direction:column;gap:0;align-items:stretch;justify-content:flex-start}.pianoroll-mount{order:1}.pianoroll-toolbar-wrapper>.pr-canvas-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:6px 12px;margin-top:0;border-radius:0;border:0;min-height:44px;height:auto;line-height:normal;background:rgba(0,0,0,0);box-shadow:none;color:var(--pr-text);overflow:visible}.pr-canvas-toolbar .btn,.pr-canvas-toolbar .form-control,.pr-canvas-toolbar .form-select,.pr-canvas-toolbar .ts-pill-input{height:32px;min-height:32px;font-size:.85rem;border-radius:6px;border:1px solid var(--pr-border);background:color-mix(in srgb, var(--pr-bg) 86%, var(--pr-panel));color:var(--pr-text);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pr-border) 45%, transparent);transition:border-color 120ms ease,transform 120ms ease}.pr-canvas-toolbar .btn.btn-outline-secondary,.pr-canvas-toolbar .btn.btn-outline-primary{color:var(--pr-text);border-color:var(--pr-border);background:color-mix(in srgb, var(--pr-bg) 86%, var(--pr-panel))}.pr-canvas-toolbar .btn.btn-outline-secondary:hover,.pr-canvas-toolbar .btn.btn-outline-primary:hover{color:var(--pr-text);border-color:color-mix(in srgb, var(--sandbox-accent) 70%, var(--pr-border));background:color-mix(in srgb, var(--pr-bg) 78%, var(--pr-panel))}.pr-canvas-toolbar .btn.btn-outline-secondary:focus-visible,.pr-canvas-toolbar .btn.btn-outline-primary:focus-visible,.pr-canvas-toolbar .form-control:focus,.pr-canvas-toolbar .form-select:focus,.pr-canvas-toolbar .ts-pill-input:focus{border-color:color-mix(in srgb, var(--sandbox-accent) 65%, transparent);box-shadow:0 0 0 .16rem color-mix(in srgb, var(--sandbox-accent) 26%, transparent);outline:none}.pr-bars{display:flex;align-items:center;gap:8px;color:var(--pr-muted)}.pr-bars-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em}.pr-bars-input{width:80px;height:32px;border-radius:8px;background:var(--pr-input-bg);border:1px solid var(--pr-border);color:var(--pr-text)}.pr-canvas-toolbar .pr-division{display:flex;align-items:center;gap:8px;flex:0 0 auto}.pr-canvas-toolbar .pr-division-label{font-size:11px;color:var(--pr-muted)}.pr-canvas-toolbar .btn{padding:0 12px}.pr-canvas-toolbar .btn:hover{border-color:color-mix(in srgb, var(--sandbox-accent) 70%, transparent);transform:translateY(-1px)}.pr-canvas-toolbar .btn.active,.pr-canvas-toolbar .btn-outline-secondary.active{color:var(--pr-text);background:color-mix(in srgb, var(--sandbox-accent) 18%, var(--pr-bg));border-color:color-mix(in srgb, var(--sandbox-accent) 55%, transparent)}.ts-pill{border:none;height:auto}.ts-pill-input{flex:0 0 auto;width:68px;padding:0 6px;text-align:center;background:color-mix(in srgb, var(--pr-bg) 80%, var(--pr-panel))}.pr-canvas-toolbar .key-select-input{width:120px;border:none;background:color-mix(in srgb, var(--pr-bg) 80%, var(--pr-panel));color:var(--pr-text);padding-left:8px}.pr-canvas-toolbar .pianoroll-global-controls,.pr-canvas-toolbar .pianoroll-track-controls{flex:1 1 auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start}.pianoroll-global-controls{gap:12px}.pianoroll-embed .pr-canvas-toolbar .dropdown-menu{position:absolute;top:100%;left:0;margin-top:4px;z-index:150;min-width:200px;max-height:300px;overflow:auto;box-shadow:0 10px 25px color-mix(in srgb, var(--sandbox-text) 25%, transparent)}.pr-canvas-toolbar .form-check-input{border-color:var(--pr-border);background-color:color-mix(in srgb, var(--pr-bg) 80%, var(--pr-panel))}.pr-canvas-toolbar .form-check-input:checked{background-color:var(--sandbox-accent);border-color:var(--sandbox-accent)}.pr-canvas-toolbar .form-check-label{color:var(--pr-muted)}@media(max-width: 900px){.pr-canvas-toolbar .pianoroll-global-controls,.pr-canvas-toolbar .pianoroll-track-controls{flex:1 1 100%}}@media(max-width: 768px){.pr-canvas-toolbar{padding:0 8px;gap:8px}.pr-canvas-toolbar .btn,.pr-canvas-toolbar .form-control,.pr-canvas-toolbar .form-select,.pr-canvas-toolbar .ts-pill-input{height:28px;font-size:.75rem}.pr-canvas-toolbar .key-select-input{width:100px}.ts-pill-input{width:54px}}.pianoroll-embed .pr-canvas-toolbar .btn-group .btn{padding:4px 10px;font-size:12px;border-radius:6px;background:var(--pr-control-bg);border:1px solid var(--pr-control-border);color:var(--pr-control-text)}.pianoroll-embed .pr-canvas-toolbar .btn-group .btn.active{background:var(--pr-accent-fill);border-color:var(--pr-accent);color:var(--pr-text-strong, #ffffff)}.pianoroll-embed .pr-canvas-toolbar .pr-division{font-size:11px}.pianoroll-embed .pr-canvas-toolbar .pr-division-select{height:26px;padding:0 10px;border-radius:6px;background:var(--pr-control-bg);border:1px solid var(--pr-control-border);color:var(--pr-control-text);outline:none;cursor:pointer}.pianoroll-embed .pr-canvas-toolbar .pr-division-select:focus{box-shadow:0 0 0 2px var(--pr-focus-ring, color-mix(in srgb, var(--sandbox-accent, #2563eb) 45%, transparent))}:root[data-bs-theme=light] .pianoroll-embed,:root[data-bs-theme=light] .pianoroll-embed .pr-app{--pr-bg: #f8fafc;--pr-panel: rgba(241, 245, 249, 0.96);--pr-header: rgba(248, 250, 252, 0.98);--pr-border: rgba(148, 163, 184, 0.42);--pr-text: #0f172a;--pr-muted: #64748b;--pr-canvas-bg: #f8fafc;--pr-ruler-bg: rgba(241, 245, 249, 0.96);--pr-ruler-label: #334155;--pr-grid-sub: rgba(148, 163, 184, 0.22);--pr-grid-beat: rgba(100, 116, 139, 0.28);--pr-grid-bar: rgba(100, 116, 139, 0.42)}:root[data-bs-theme=dark] .pianoroll-embed,:root[data-bs-theme=dark] .pianoroll-embed .pr-app{--pr-bg: #0f172a;--pr-panel: rgba(30, 41, 59, 0.96);--pr-header: rgba(15, 23, 42, 0.98);--pr-border: rgba(148, 163, 184, 0.28);--pr-text: #e2e8f0;--pr-muted: #94a3b8;--pr-canvas-bg: #0f172a;--pr-ruler-bg: rgba(30, 41, 59, 0.96);--pr-ruler-label: #cbd5e1;--pr-grid-sub: rgba(148, 163, 184, 0.14);--pr-grid-beat: rgba(148, 163, 184, 0.22);--pr-grid-bar: rgba(148, 163, 184, 0.34)}