.fenrir-piano{margin:28px 0;padding:20px;border:1px solid var(--realm-accent,#ae85e5);background:linear-gradient(125deg,#171820,#090a10);border-radius:12px;color:#eee8fa}.piano-heading,.piano-tools{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap}.piano-heading h3{font-size:24px;margin:10px 0}.piano-help,.piano-status{font:12px/1.6 ui-monospace,monospace;color:#d0c8dd}.fenrir-piano button{min-height:40px;background:#24212d;color:inherit;border:1px solid #82778f;padding:8px 12px;border-radius:4px}.fenrir-piano button[aria-pressed=true]{border-color:var(--realm-accent,#cba5ff);box-shadow:inset 0 0 0 1px var(--realm-accent,#cba5ff)}.piano-scroll{max-height:340px;overflow:auto;margin:18px 0;border:1px solid #ffffff26;overscroll-behavior:contain}.piano-grid{display:flex;min-width:640px;height:980px}.piano-labels{width:40px;flex:none;background:#25242c}.piano-labels span{display:block;height:20px;text-align:center;font:10px/20px monospace;color:#ddd}.piano-surface{flex:1;position:relative;isolation:isolate;background:repeating-linear-gradient(to right,transparent 0,transparent calc(6.25% - 1px),#8b7e9e55 calc(6.25% - 1px),#8b7e9e55 6.25%),repeating-linear-gradient(to bottom,#111219 0,#111219 19px,#756a832e 19px,#756a832e 20px)}.fenrir-piano .piano-note{position:absolute;min-height:0;height:20px;padding:0 3px;text-align:left;overflow:hidden;border-radius:3px;background:var(--realm-accent,#ab7adc);color:#fff;font:10px/18px monospace;z-index:2;opacity:calc(.55 + var(--velocity)*.45);touch-action:manipulation}.piano-note.is-current{outline:2px solid white}.piano-surface[data-playing=true]:after{content:'';position:absolute;left:var(--playhead);width:6.25%;top:0;bottom:0;background:#ffffff0d;pointer-events:none}.piano-inspector{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.piano-inspector label{display:grid;gap:6px;font:12px monospace}.piano-inspector input,.piano-inspector select{width:100%;min-width:0;box-sizing:border-box;min-height:40px;background:#17151e;color:inherit;border:1px solid #80728e;padding:6px;accent-color:var(--realm-accent,#bd91ed)}.fenrir-piano :focus-visible{outline:2px solid #fff;outline-offset:2px}.fenrir-piano button:disabled{opacity:.4}@media(max-width:650px){.fenrir-piano{padding:12px}.piano-inspector{grid-template-columns:repeat(2,minmax(0,1fr))}.piano-scroll{max-height:280px}}@media(prefers-reduced-motion:reduce){.piano-surface:after{display:none}}