.sera-cabinet{--body:#a9d4c1;--body-lo:#87b8a3;--ink:#1d3a30;--ink-dim:#3f6457;--amber:#ffad3b;--focus:#1d3a30;box-sizing:border-box;background:radial-gradient(ellipse at 50% 0, color-mix(in oklab, var(--foreground) 7%, var(--background)), var(--background) 70%);flex:1 0 auto;justify-content:center;padding:2rem 1.5rem;display:flex}.sera{box-sizing:border-box;width:min(100%,52rem);height:max-content;color:var(--ink);background:radial-gradient(ellipse at 20% 0, #ffffff73, transparent 55%), linear-gradient(180deg, var(--body), var(--body-lo));border-radius:18px;align-content:start;gap:1.1rem;margin-block:auto;padding:1rem 1.25rem 1.25rem;font-family:Helvetica Neue,Arial Narrow,Arial,sans-serif;display:grid;position:relative;box-shadow:inset 0 2px #ffffff8c,inset 0 -4px #0000001f,0 0 0 1px #5d8d7a,0 24px 50px #00000073}.sera-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:.75rem 1.5rem;display:flex}.sera-name{letter-spacing:.06em;margin:0;font:800 1.6rem/1 Helvetica Neue,Arial,sans-serif}.sera-name span{color:var(--ink-dim);font-weight:400}.sera-tagline{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.24em;margin:.3rem 0 0;font-size:.65rem}.sera-section{align-content:start;gap:.7rem;min-width:0;margin:0;display:grid}.sera-legend{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.22em;margin:0;font:700 .6rem/1 Arial Narrow,Arial,sans-serif}.sera-group{flex-wrap:wrap;align-items:flex-end;gap:.75rem 1.1rem;display:flex}.sera-body{flex-wrap:wrap;justify-content:space-between;align-items:stretch;gap:1.25rem 1.75rem;display:flex}.sera-chords{background:#00000012;border-radius:10px;flex:30rem;align-content:center;gap:.5rem;padding:.9rem;display:grid;box-shadow:inset 0 1px 3px #0000002e}.sera-chord-row{grid-template-columns:2.6rem repeat(9,minmax(0,1fr));align-items:center;gap:.4rem;display:grid}.sera-row-name{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.14em;font:700 .58rem/1 Arial Narrow,Arial,sans-serif}.sera-chord{height:2.5rem;color:var(--ink);touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none;background:linear-gradient(#fbf7ec,#e5dcc7);border:0;border-radius:6px;place-items:center;padding:0;font:700 .78rem/1 Helvetica Neue,Arial,sans-serif;display:grid;position:relative;box-shadow:0 0 0 1px #6f988a,0 3px #b9ae97,0 4px 6px #00000040,inset 0 1px #fff}.sera-chord[data-quality=minor]{background:linear-gradient(#f3eee2,#d8cfba)}.sera-chord[data-quality=seventh]{background:linear-gradient(#eae4d6,#cbc1ab)}.sera-chord:active{transform:translateY(2px);box-shadow:0 0 0 1px #6f988a,0 1px #b9ae97,0 1px 2px #00000040,inset 0 1px #fff}.sera-led{background:radial-gradient(circle at 35% 30%,#7a5a2a,#4a3412);border-radius:50%;width:.4rem;height:.4rem;display:block;box-shadow:inset 0 1px 1px #0009}.sera-led[data-on]{background:radial-gradient(circle at 35% 30%, #fff1c9, var(--amber) 50%, #b86a0a);box-shadow:0 0 6px 1px #ffad3bbf}.sera-chord .sera-led{position:absolute;top:.3rem;right:.3rem}.sera-plate{flex:0 0 9rem;justify-items:center;gap:.5rem;display:grid}.sera-plate-label{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.22em;font:700 .6rem/1 Arial Narrow,Arial,sans-serif}.sera-plate-surface{touch-action:none;cursor:grab;background:repeating-linear-gradient(90deg,#ffffff14 0 1px,#0000 1px 3px),linear-gradient(100deg,#e9edec,#b9c1bf 40%,#dfe4e3 60%,#a3acaa);border-radius:8px;width:100%;height:14rem;position:relative;box-shadow:0 0 0 3px #5d8d7a,inset 0 1px #fffc,inset 0 -2px 3px #0003,0 4px 8px #00000040}.sera-plate-surface[data-dragging]{cursor:grabbing}.sera-string{pointer-events:none;background:linear-gradient(#00000059,#ffffffb3);border-radius:1px;height:2px;position:absolute;left:.6rem;right:.6rem;translate:0 50%}.sera-string[data-struck]{background:var(--amber);box-shadow:0 0 6px #ffad3bcc}.sera-string-name{color:#4e5a57;font:600 .5rem/1 ui-monospace,SF Mono,Menlo,monospace;position:absolute;bottom:3px;right:0}.sera-finger{pointer-events:none;background:radial-gradient(circle,#ffad3b8c,#ffad3b26 50%,#0000 70%);border-radius:50%;width:2.2rem;height:2.2rem;position:absolute}.sera-plate[data-resting] .sera-finger{opacity:.35}.sera-selector{flex-wrap:wrap;gap:.35rem;display:flex}.sera-key{color:var(--ink);text-transform:uppercase;letter-spacing:.14em;cursor:pointer;background:linear-gradient(#fbf7ec,#e5dcc7);border:0;border-radius:5px;align-items:center;gap:.45rem;padding:.45rem .65rem;font:700 .62rem/1 Arial Narrow,Arial,sans-serif;display:inline-flex;box-shadow:0 0 0 1px #6f988a,0 2px #b9ae97,0 3px 4px #00000038,inset 0 1px #fff}.sera-key[aria-pressed=true]{transform:translateY(2px);box-shadow:0 0 0 1px #6f988a,0 0 #b9ae97,0 1px 1px #00000038,inset 0 1px 2px #00000026}.sera-row{flex-wrap:wrap;align-items:flex-end;gap:1.25rem 2rem;display:flex}.sera-label{color:var(--ink);text-transform:uppercase;letter-spacing:.16em;white-space:nowrap;font:700 .6rem/1 Arial Narrow,Arial,sans-serif}.sera-knob{--knob-size:2.7rem;justify-items:center;gap:.95rem;padding-top:.9rem;display:inline-grid;position:relative}.sera-knob-control{width:var(--knob-size);aspect-ratio:1;touch-action:none;cursor:ns-resize;position:relative}.sera-knob-thumb{pointer-events:none;background:radial-gradient(circle at 32% 28%, #ffffff40, transparent 45%), repeating-conic-gradient(from 0deg, #26302c 0 5deg, #141a17 5deg 10deg);border-radius:50%;position:absolute;inset:13%;box-shadow:0 5px 7px #0006,inset 0 1px #ffffff4d,0 0 0 2px #2d4a3f}.sera-knob-thumb:after{content:"";background:#f6f2e6;border-radius:2px;width:3px;height:32%;position:absolute;top:9%;left:50%;translate:-50%}.sera-knob-control[data-dragging] .sera-knob-thumb{filter:brightness(1.2)}.sera-knob-mark{pointer-events:none;position:absolute;inset:0}.sera-knob-tick{background:var(--ink-dim);width:1px;height:5px;position:absolute;top:-1px;left:50%;translate:-50%}.sera-knob-mark[data-active] .sera-knob-tick{background:var(--ink)}.sera-knob-numeral{font-variant-numeric:tabular-nums;color:var(--ink-dim);rotate:calc(var(--knob-mark-angle) * -1);font-size:.58rem;line-height:1;position:absolute;top:-1.1rem;left:50%;translate:-50%}.sera-chord:focus-visible,.sera-key:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.sera-plate-surface:has(:focus-visible){outline:2px solid var(--focus);outline-offset:2px}.sera-knob-thumb:has(:focus-visible){outline:2px solid var(--focus);outline-offset:2px}@media (prefers-reduced-motion:no-preference){.sera-chord,.sera-key{transition:transform 70ms linear,box-shadow 70ms linear}}@media (width<=47.99rem){.sera-cabinet{padding-inline:.5rem}.sera-chord-row{grid-template-columns:2.2rem repeat(9,minmax(0,1fr));gap:.25rem}.sera-chord{font-size:.66rem}}