@font-face{font-family:'Noto Sans Mono CJK SC';src:url('fonts/NotoSansMonoCJKsc-Regular.woff2?v=1.10.74') format('woff2');font-weight:400;font-style:normal;font-display:swap}
body.oy-site.lab-b1{--font:'Noto Sans Mono CJK SC',monospace;--blue:#287a9d;--deep:#276481;--ink:#2e414a;--muted:#526977;--line:#d7e4eb;--ice:#e7f2f8;--orange:#985527;font-family:var(--font);font-synthesis:none;background:#e9f3fb;color:var(--ink)}
.lab-b1 .oy-header{background:#f5faff;border-bottom-color:var(--line)}
.lab-b1 :is(.harmony-heading h1,.work-title h2,.listen-note h3,.experiment-heading h1,.style-summary strong){color:#267a9c;font-weight:400}
.lab-b1 .library-rail{background:#f6faff}
.lab-b1 :is(.harmony-workbench,.desk){background:#fff;box-shadow:none}
.lab-b1 :is(.dictionary-keyboard,.progression-keyboard){background:#f3f8fc;border-radius:11px}
.lab-b1 .library-item[aria-current=true]{background:#d9edf6}.lab-b1 .library-item[aria-current=true] strong{color:#226584}
.lab-b1 .primary{background:#2a789b;color:#fff;font-weight:400}.lab-b1 .text-button{background:#e4f0f7;color:#275f7b}
.lab-b1 .listen-note{background:transparent}
.lab-b1 :is(.note-tokens span,.scale-notes .note-tag){background:#dcf0e4;color:#315a47;font-weight:400}
.lab-b1 :is(.note-tokens .bass-note,.scale-notes .root){background:#f5d8c3;color:#774527}
.lab-b1 :is(.piano,.scale-keyboard){border:1.5px solid #343c3e;background:#fff;gap:0}
.lab-b1 :is(.piano .white,.scale-keyboard .white-key){position:relative;background:#fff;color:#43565e;border:0;border-right:1px solid #465052;border-radius:0;padding-bottom:6px;font-size:10px;box-shadow:none}
.lab-b1 :is(.piano .black,.scale-keyboard .black-key){background:#272d30;border:1px solid #30383a;color:#fff;border-radius:0 0 2px 2px;box-shadow:none}
.lab-b1 :is(.piano .white.active,.piano .white.bass,.scale-keyboard .white-key.active,.scale-keyboard .white-key.root){background:#fff;color:#35494f}
.lab-b1 :is(.piano .black.active,.piano .black.bass,.scale-keyboard .black-key.active,.scale-keyboard .black-key.root){background:#272d30;color:#fff}
.lab-b1 :is(.piano,.scale-keyboard) button:focus-visible{outline:3px solid #287a9d;outline-offset:-3px;z-index:3}
.lab-b1 .piano-caption{color:#4d6875}
.lab-b1 :is(.roll-keyboard,.piano-roll) rect[fill="#27405e"]{fill:#272d30}
.lab-b1 .scale-legend .scale-root,.lab-b1 .classic-key-guide .scale-root{background:#f1ceb0;border:1px solid #394743}
.lab-b1 .scale-legend .scale-note,.lab-b1 .classic-key-guide .scale-note{background:#bde4cf;border:1px solid #394743}
@media(max-width:760px){.lab-b1 .library-rail{background:transparent}.lab-b1 .scale-keyboard{min-width:480px}.lab-b1 .classic-keyboard{min-width:700px}.lab-b1 .oy-header{position:relative}}

/* Shared key dots: static pitch membership at rest, played notes during playback. */
body.lab-b1 :is(.piano,.scale-keyboard) button::after{content:'';position:absolute;bottom:25px;left:50%;width:22px;height:22px;transform:translateX(-50%);border:1.4px solid #394743;border-radius:50%;background:#bde4cf;pointer-events:none;box-shadow:none;opacity:0;transition:opacity 180ms ease-out}
body.lab-b1 :is(.piano,.scale-keyboard) button:is(.black,.black-key)::after{width:16px;height:16px;bottom:22px}
body.lab-b1 :is(.piano,.scale-keyboard) button.active::after{opacity:1}
body.lab-b1 :is(.piano,.scale-keyboard) button:is(.bass,.root)::after{background:#f1ceb0}
body.lab-b1 :is(.piano,.scale-keyboard).is-playing button::after{opacity:0}
body.lab-b1 :is(.piano,.scale-keyboard).is-playing button:is(.sounding,.playing)::after{opacity:1;background:#bde4cf;transition-duration:70ms}
body.lab-b1 :is(.piano,.scale-keyboard).is-playing button.sounding-bass::after{background:#f1ceb0}
body.lab-b1 .piano.is-playing button.sounding-melody::after{background:#f2b8d0}
body.lab-b1 :is(.piano,.scale-keyboard) button:is(.sounding,.playing,:active){filter:none;box-shadow:none;outline:none}
body.lab-b1 :is(.piano,.scale-keyboard) button:focus-visible{outline:3px solid #287a9d;outline-offset:-3px}
body.lab-b1 .scale-keyboard .black-key.active:not(.root){background:#272d30;border-color:#30383a}
body.lab-b1 .classic-keyboard button::after{width:12px;height:12px}
body.lab-b1 .classic-keyboard button.black-key::after{width:9px;height:9px}
@media(max-width:760px){body.lab-b1 .piano button::after{width:20px;height:20px}body.lab-b1 .piano button.black::after{width:15px;height:15px}}
@media(prefers-reduced-motion:reduce){body.lab-b1 :is(.piano,.scale-keyboard) button::after{transition:none}}