.oc{--oc-panel:#1a1a1a;--oc-panel-hi:#232226;--oc-body:#141416;--oc-border:#3d3b3e;--oc-text:#f4f4f4;--oc-muted:#8d8c8d;--oc-ring:#93b4ff;--oc-major:#8fb0ff;--oc-minor:#b9a4ff;--oc-seventh:#7fd6c4;color:var(--oc-text);flex-direction:column;gap:16px;min-width:0;display:flex}.oc button{font-family:inherit}.oc-lbl{color:var(--oc-muted);font-size:13px}.oc-hint{color:var(--oc-muted);margin:0;font-size:13px;line-height:1.5}.oc-keys{opacity:.9}.oc-note{opacity:.75;font-size:12px}.oc-readout{flex-wrap:wrap;align-items:baseline;gap:4px 14px;min-height:52px;display:flex}.oc-readout-big{letter-spacing:-.02em;min-width:2ch;font-size:44px;font-weight:300;line-height:1}.oc-readout-sub{color:var(--oc-muted);letter-spacing:.04em;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:15px;display:inline-flex}.oc-readout-state{border:1px solid var(--oc-border);letter-spacing:0;border-radius:999px;padding:2px 10px;font-size:12px}.oc-readout-state--on{border-color:var(--color-primary);background:var(--color-primary);color:#fff}.oc-body{border:1px solid var(--oc-border);background:linear-gradient(180deg, #1b1b1e 0%, var(--oc-body) 100%);border-radius:20px;flex-direction:column;gap:12px;min-width:0;padding:16px;display:flex;box-shadow:inset 0 1px #ffffff0d}.oc-plate-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.oc-sweeps{gap:4px;display:flex}.oc-text-btn{min-height:38px;color:var(--oc-muted);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:0 0;border:0;border-radius:8px;align-items:center;gap:6px;padding:6px 10px;font-size:14px;display:inline-flex}.oc-text-btn:hover{color:var(--oc-text)}.oc-text-btn:active{color:var(--oc-ring)}.oc-text-btn:focus-visible,.oc-pick:focus-visible,.oc-toggle:focus-visible,.oc-chord:focus-visible{outline:2px solid var(--oc-ring);outline-offset:2px}.oc-strip{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer;background:#0e0e10;border:1px solid #4a484c;border-radius:14px;height:150px;display:flex;overflow:hidden;box-shadow:inset 0 2px 10px #0009}.oc-plate{background:linear-gradient(#4b4a50 0%,#2f2e33 55%,#26252a 100%);border-right:1px solid #0e0e10;flex:1 1 0;min-width:0;position:relative;box-shadow:inset 0 1px #ffffff1f}.oc-plate:last-child{border-right:0}.oc-plate:before{content:"";background:linear-gradient(180deg, #c9d8ff 0%, var(--oc-ring) 40%, var(--color-primary) 100%);opacity:0;pointer-events:none;position:absolute;inset:0}.oc-plate--ring:before{animation:.75s ease-out oc-ring}@keyframes oc-ring{0%{opacity:.95}to{opacity:0}}.oc-plate--root:after{content:"";background:var(--color-primary);width:8px;height:8px;box-shadow:0 0 0 1.5px var(--oc-ring);pointer-events:none;border-radius:50%;margin-left:-4px;position:absolute;bottom:12px;left:50%}.oc-chords{overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:#4a484c transparent;padding-bottom:6px;overflow-x:auto}.oc-chords-grid{flex-direction:column;gap:6px;min-width:700px;display:flex}.oc-chord-row{grid-template-columns:60px repeat(12,minmax(48px,1fr));gap:6px;display:grid}.oc-chord-rowname{z-index:1;background:linear-gradient(90deg, var(--oc-body) 80%, transparent);color:var(--oc-muted);align-items:center;padding-right:6px;font-size:13px;display:flex;position:sticky;left:0}.oc-chord{border:1px solid var(--oc-border);background:var(--oc-panel-hi);min-height:56px;color:var(--oc-text);cursor:pointer;touch-action:pan-x;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-bottom-width:3px;border-radius:12px;justify-content:center;align-items:center;padding:10px 2px 4px;display:flex;position:relative;transition:background-color .12s,border-color .12s,transform 80ms!important}.oc-chord--major{border-bottom-color:var(--oc-major)}.oc-chord--minor{border-bottom-color:var(--oc-minor)}.oc-chord--seventh{border-bottom-color:var(--oc-seventh)}.oc-chord:hover{background:#2c2b30}.oc-chord--last{background:#2a292e;border-color:#6f6e73}.oc-chord--on,.oc-chord--on:hover{border-color:var(--oc-ring);background:var(--color-primary);color:#fff;transform:translateY(1px)}.oc-chord-name{font-size:18px;font-weight:500}.oc-chord-key{color:var(--oc-muted);font-family:inherit;font-size:10px;line-height:1;position:absolute;top:4px;left:6px}.oc-chord--on .oc-chord-key{color:#ffffffbf}@media (hover:none){.oc-chord-key{display:none}.oc-chord{padding-top:4px}}.oc-panels{grid-template-columns:minmax(0,1fr);gap:16px;display:grid}@media (min-width:900px){.oc-panels{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}.oc-panel{border:1px solid var(--oc-border);background:var(--oc-panel);border-radius:16px;flex-direction:column;gap:14px;min-width:0;padding:16px;display:flex}.oc-panel-title{color:var(--oc-text);margin:0;font-size:16px;font-weight:500}.oc-picks,.oc-toggles{flex-wrap:wrap;gap:6px;display:flex}.oc-pick,.oc-toggle{border:1px solid var(--oc-border);min-height:38px;color:var(--oc-muted);cursor:pointer;touch-action:manipulation;background:0 0;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:500;transition:background-color .2s,color .2s,border-color .2s!important}.oc-pick:hover,.oc-toggle:hover{color:var(--oc-text);border-color:#5f5e60}.oc-pick--on,.oc-pick--on:hover,.oc-toggle--on,.oc-toggle--on:hover{color:#fff;background:var(--color-primary);border-color:var(--color-primary)}.oc-rhythm-controls{flex-wrap:wrap;align-items:center;gap:12px 18px;display:flex}.oc-beats{gap:8px;margin:0;padding:0;list-style:none;display:flex}.oc-beat{border:1px solid var(--oc-border);border-radius:50%;width:12px;height:12px;transition:background-color .1s,border-color .1s!important}.oc-beat--on{border-color:var(--oc-ring);background:var(--color-primary)}.oc-tempo{flex:240px;align-items:center;gap:12px;min-width:0;display:flex}.oc-tempo-value{font-variant-numeric:tabular-nums;min-width:64px;font-size:14px}.oc-sliders{grid-template-columns:minmax(0,1fr);gap:12px 24px;display:grid}@media (min-width:560px){.oc-sliders{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.oc-slider{flex-direction:column;gap:6px;min-width:0;display:flex}.oc .ft-range{--ft-track:#3d3b3e}@media (max-width:600px){.oc-readout-big{font-size:34px}.oc-body{border-radius:16px;padding:12px}.oc-strip{height:130px}.oc-plate--root:after{width:6px;height:6px;margin-left:-3px;bottom:8px}}@media (prefers-reduced-motion:reduce){.oc-plate--ring:before{animation-duration:.2s}.oc-chord,.oc-beat{transition:none!important}}