/* A-style soft instruments. Geometry, notation and sound remain owned by each tool. */
@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-display:swap}
body.oy-site.lab-jelly{--font:'Noto Sans Mono CJK SC',monospace;--ink:#284c63;--deep:#234d68;--blue:#2e6c8e;--muted:#526e81;--line:#d5e5ee;--ice:#e8f4fa;--orange:#98532c;--jelly-mint-top:#e5f8f0;--jelly-mint:#a9dbca;--jelly-blue-top:#e0f2fd;--jelly-blue:#a3cce4;--jelly-peach-top:#fff0e2;--jelly-peach:#edc3a5;--jelly-accent-top:#427493;--jelly-accent:#244f6b;--jelly-empty-top:#f8fcfe;--jelly-empty:#e3edf3;--jelly-shadow:0 9px 22px -12px #466e8633;--jelly-face:linear-gradient(155deg,#fff 35%,#f5fafc);--jelly-mint-face:linear-gradient(145deg,var(--jelly-mint-top),var(--jelly-mint));--jelly-blue-face:linear-gradient(145deg,var(--jelly-blue-top),var(--jelly-blue));--jelly-peach-face:linear-gradient(145deg,var(--jelly-peach-top),var(--jelly-peach));font-family:var(--font);font-synthesis:none;color:var(--ink);background:radial-gradient(ellipse at 85% 4%,#dff1fb,transparent 45%),#edf7fc}
.lab-jelly :is(h1,h2,h3,strong){font-weight:400}
.lab-jelly .oy-header{background:#f6fbfe;border-bottom-color:var(--line)}
.lab-jelly :is(.harmony-heading h1,.theory-heading h1,.experiment-heading h1,.drum-heading h1){color:var(--deep)}
.lab-jelly :is(.harmony-workbench,.theory-surface,.drum-workbench,.desk){background:var(--jelly-face);border:0;border-radius:20px;box-shadow:0 14px 35px -24px #3b657b55}
.lab-jelly .library-rail{background:#f4faff;border-radius:16px}
.lab-jelly :is(.library-item,.drum-entry){border-left-color:transparent;border-radius:10px}
.lab-jelly :is(.library-item[aria-current=true],.drum-entry[aria-pressed=true]){background:var(--jelly-blue-face);color:var(--deep);box-shadow:inset 0 1px 0 #fff9,0 4px 9px -7px #52748a66}
.lab-jelly :is(.primary,.secondary,.secondary-button,.text-button,.small-button,.stop-button,.download-button,.catalog-toggle,.option-row button,.play-modes button,.interval-options button,.fill-options button){border-radius:12px;border:1px solid #c8dde7;background:var(--jelly-face);box-shadow:inset 0 1px 0 #fff,0 4px 7px -6px #51748b80;color:var(--deep);transition:translate .18s cubic-bezier(.2,.8,.25,1.3),box-shadow .18s ease,background-color .18s ease}
.lab-jelly button.primary{background:linear-gradient(145deg,#457fa1,#285b7a);border-color:#376d8c;color:#fff;box-shadow:inset 0 1px 0 #b7d6e466,0 5px 10px -5px #34617b66}
.lab-jelly :is(.secondary,.secondary-button,.text-button,.option-row button,.play-modes button,.interval-options button,.fill-options button)[aria-pressed=true]{background:var(--jelly-blue-face);color:var(--deep);border-color:#79a7bf;box-shadow:inset 0 1px 0 #fff9,0 3px 7px -5px #365c7180}
.lab-jelly :is(.primary,.secondary,.secondary-button,.text-button,.small-button,.stop-button,.option-row button,.play-modes button):active:not(:disabled){translate:0 2px;box-shadow:inset 0 2px 4px #34586f20}
.lab-jelly :is(button,a,input,select,summary):focus-visible{outline:3px solid #337599;outline-offset:3px}
.lab-jelly button:disabled{opacity:.48;box-shadow:none;cursor:default}
.lab-jelly :is(select,input[type=number],input[type=search]){border-radius:10px;border-color:#c5dbe6;background:#f9fcfe;color:var(--ink);box-shadow:inset 0 2px 4px #6b95aa0c}
.lab-jelly input[type=range]{accent-color:#4c91a5}.lab-jelly input[type=checkbox]{accent-color:#427f99}
/* The keyboard keeps exact original key widths and black-key coordinates. */
body.lab-jelly :is(.dictionary-keyboard,.progression-keyboard,.piano-scroll,.keyboard-scroll){background:linear-gradient(145deg,#f4fafc,#e2edf4);border-radius:16px}
body.lab-jelly :is(.piano,.scale-keyboard){background:#cfdfe8;border:1px solid #b7ccd9;border-radius:9px;gap:0;box-shadow:0 6px 10px -7px #35597080;isolation:isolate}
body.oy-site.lab-jelly :is(.piano .white,.scale-keyboard .white-key):is(button,.active){background:linear-gradient(180deg,#fff 0%,#fff 79%,#edf5f9 94%,#d6e5ee);border:1px solid #b6cbd8;border-top-color:#d3e2eb;border-radius:5px 5px 8px 8px;color:#395a70;box-shadow:inset 0 1px 0 #fff,inset 0 -4px 3px #a3c0d52b;transition:translate .14s ease,box-shadow .14s ease}
body.oy-site.lab-jelly :is(.piano .black,.scale-keyboard .black-key):is(button,.active){background:linear-gradient(135deg,#425b6d,#213a4a 60%,#132c3c);border:1px solid #203949;border-radius:4px 4px 6px 6px;color:#fff;box-shadow:inset 0 2px 1px #7d929d80,inset 0 -4px 2px #0c1f2977,0 3px 4px #21384a2b;transition:translate .14s ease,box-shadow .14s ease}
body.lab-jelly :is(.piano,.scale-keyboard) button::after{border:0;background:radial-gradient(circle at 33% 24%,#edfff6,#a8e0ca 60%,#77bfa4);box-shadow:inset 0 1px 2px #fff9,0 2px 3px #294e5826;transition:opacity .16s ease-out}

body.lab-jelly :is(.piano,.scale-keyboard).is-playing button:is(.sounding,.playing)::after{background:radial-gradient(circle at 33% 24%,#edfff6,#a8e0ca 60%,#77bfa4)}
body.lab-jelly :is(.piano,.scale-keyboard) button:is(.bass,.root)::after,body.lab-jelly :is(.piano,.scale-keyboard).is-playing button.sounding-bass::after{background:radial-gradient(circle at 33% 24%,#fff5e8,#f0c5a2 60%,#dbac8a)}
body.lab-jelly .piano.is-playing button.sounding-melody::after{background:radial-gradient(circle at 33% 24%,#fff0f6,#e9b4cd 60%,#d295b3)}
body.lab-jelly :is(.piano,.scale-keyboard) button:is(:active,.sounding,.playing){translate:0 2px}
body.lab-jelly :is(.piano,.scale-keyboard) button:focus-visible{outline-offset:-3px}
/* Music engraving stays crisp; depth belongs to its paper-like surface. */
.lab-jelly :is(.notation-scroll,.score-scroll,.note-staff,.signature-score,.drum-notation,.viz){background:linear-gradient(155deg,#fff 60%,#f0f7fb);border:1px solid #d9e7ef;border-radius:14px;box-shadow:inset 0 2px 3px #fff,0 6px 14px -11px #4d738b66}
.lab-jelly :is(.notation-scroll,.drum-notation){padding-block:10px}
.lab-jelly .note-staff{border-radius:18px;box-shadow:inset 0 1px 0 #fff,0 9px 17px -10px #4e789b40}
.lab-jelly .notation-panel{border-color:#d9e8ef}
.lab-jelly :is(.score-playhead,.roll-playhead,.drum-playhead){stroke:#a56339;stroke-linecap:round}
.lab-jelly .roll-event .key-duration{stroke:#6497a2;stroke-width:.5;rx:3;fill:url(#roll-mint)}
.lab-jelly .roll-event[data-part=bass] .key-duration{fill:url(#roll-peach);stroke:#bf9272}
.lab-jelly .roll-event text{fill:#234d62}
.lab-jelly .roll-event.sounding .key-duration{stroke:#244f6b;stroke-width:1.7}
.lab-jelly .roll-event .pedal-tail{opacity:.5}
.lab-jelly :is(.roll-keyboard,.piano-roll) rect[fill="#27405e"]{fill:url(#roll-black)}
/* Rounded chord pads use mint / peach roles and an explicit selection outline. */
.lab-jelly :is(.chord-cell,.degree-map button,.harmony-strip>button,.harmony-strip>div,.note-tokens span,.note-strip span,.scale-notes .note-tag,.scale-name-row button){background:var(--jelly-mint-face);border:1px solid #b7d8ce;border-radius:12px;box-shadow:inset 0 1px 0 #fff9,0 5px 9px -7px #3a716777;color:#2c564c}
.lab-jelly :is(.chord-cell,.degree-map button){transition:translate .18s cubic-bezier(.2,.8,.2,1.3),box-shadow .18s ease}
.lab-jelly :is(.chord-cell,.degree-map button)[aria-pressed=true],.lab-jelly .chord-cell.is-selected{background:var(--jelly-blue-face);border-color:#86afc3;outline:2px solid #38758d;outline-offset:2px;transform:none}
.lab-jelly .chord-cell.playing{translate:0 2px;box-shadow:inset 0 2px 4px #4e7a8b22}
.lab-jelly .chord-cell.playing:after{background:#a36c41;bottom:4px}
.lab-jelly :is(.note-tokens .bass-note,.note-strip span:first-child,.scale-notes .root){background:var(--jelly-peach-face);border-color:#e4c6ae;color:#79502f}
.lab-jelly .degree-map button[data-quality=minor]{background:linear-gradient(145deg,#fff1f4,#ebcbd5);color:#765465;border-color:#e4c3cd}
.lab-jelly .degree-map button[data-quality=dim]{background:linear-gradient(145deg,#f4efff,#d5cbe9);border-color:#cfc2e1;color:#645374}
.lab-jelly :is(.chord-choices button,.tonic-choices button,.tonality-notes>span){border-radius:12px;background:var(--jelly-mint-face);box-shadow:inset 0 1px 0 #fff9,0 5px 9px -7px #3a716777}.lab-jelly .tonic-choices button:nth-child(2),.lab-jelly .tonality-notes .tonic{background:var(--jelly-peach-face)}.lab-jelly .tonality-notes .changed{background:linear-gradient(145deg,#fff1f4,#ebcbd5)}
.lab-jelly .interval-ruler{border-radius:12px;overflow:hidden;box-shadow:inset 0 2px 4px #62869b15;border-bottom-color:#8dacbd}
.lab-jelly .interval-ruler span.in-range{background:var(--jelly-mint-face)}.lab-jelly .interval-ruler span.endpoint{background:var(--jelly-peach-face)}
.lab-jelly .range-bar{border-radius:8px;border-color:#91b4be;background-image:linear-gradient(#ffffff80,#ffffff00);box-shadow:inset 0 1px 0 #fff9,0 3px 6px -4px #53798a77}
.lab-jelly .circle-key path{stroke:#fff;stroke-width:2;fill:#c0e8db;filter:drop-shadow(0 2px 2px #4f7f8e22)}
.lab-jelly .circle-key.minor path{fill:#f3d4bb}.lab-jelly .circle-key[aria-pressed=true] path{fill:#96cddf;stroke:#42778e;stroke-width:3}.lab-jelly .circle-key.minor[aria-pressed=true] path{fill:#eab995;stroke:#9b714b}
.lab-jelly .circle-key:focus-visible path{stroke:#224b65;stroke-width:4;stroke-dasharray:5 3}
/* Both rhythm tools share the same pad shapes, strengths and playhead color. */
.lab-jelly .sequence-scroll{background:linear-gradient(145deg,#f7fbfe,#ecf5fa);border-radius:14px;padding:14px 8px 16px}
.lab-jelly .sequencer{row-gap:9px}
.lab-jelly .step{height:34px;border-radius:8px;border:1px solid #c9dce7;background:linear-gradient(145deg,var(--jelly-empty-top),var(--jelly-empty));box-shadow:inset 0 2px 2px #fff,0 3px 5px -4px #52778b88;transition:translate .14s cubic-bezier(.2,.8,.25,1.3),box-shadow .14s ease}
.lab-jelly .step.beat{border-left:2px solid #92b6c8}
.lab-jelly .step.on{background:var(--jelly-mint-face);border-color:#8fbfaf}
.lab-jelly .step.accent{background:linear-gradient(145deg,var(--jelly-accent-top),var(--jelly-accent));border-color:#244f6b}
.lab-jelly .step.accent:after{content:'';position:absolute;top:7px;left:calc(50% - 3px);width:6px;height:3px;border-radius:3px;background:#fff}
.lab-jelly .step.playing{outline:2px solid #a56339;outline-offset:1px;box-shadow:inset 0 2px 3px #43677722}
.lab-jelly .step:active{translate:0 2px}
.lab-jelly .step:focus-visible{outline:3px solid #285f86;outline-offset:2px}
.lab-jelly .drum-grid-svg .pad-slot{fill:url(#drum-empty);stroke:#c9dce7;stroke-width:.7}
.lab-jelly .drum-grid-svg .note{fill:url(#drum-mint);stroke:#8fbfaf;stroke-width:.8}
.lab-jelly .drum-grid-svg .note.accent{fill:url(#drum-accent);stroke:#244f6b}
.lab-jelly .drum-grid-svg .note.ghost{fill:url(#drum-empty);stroke:#90b6ac;stroke-dasharray:2 2}
.lab-jelly .drum-grid-svg .note.fill-note{fill:url(#drum-peach);stroke:#c79470}
.lab-jelly .drum-grid-svg .note.accent.fill-note{fill:url(#drum-fill-accent);stroke:#a16943}
.lab-jelly .drum-grid-svg .note.sounding{stroke:#a56339;stroke-width:2}
.lab-jelly .drum-grid-svg .hand-mark{fill:#234d68;font-size:10px}.lab-jelly .drum-grid-svg .hand-mark.on-accent{fill:#fff}
.lab-jelly .drum-grid-svg .pad-glint{stroke:#fff9;stroke-width:1;pointer-events:none}
.lab-jelly :is(.sequence-legend i,.drum-legend i){border-radius:3px;background:var(--jelly-mint-face);border:1px solid #8fbfaf}
.lab-jelly :is(.sequence-legend i.accent,.drum-legend i.accent){background:linear-gradient(145deg,var(--jelly-accent-top),var(--jelly-accent));border-color:#244f6b}
.lab-jelly .drum-legend i.ghost{background:#eaf3f6;border:1px dashed #90b6ac}
.lab-jelly .drum-grid-svg .section-name{font-weight:400}
.lab-jelly .phrase-strip span{border-radius:7px;background:var(--jelly-blue-face)}.lab-jelly .phrase-strip .fill{background:var(--jelly-peach-face)}
.lab-jelly .viz{border:0;box-shadow:var(--jelly-shadow)}
@media(hover:hover){.lab-jelly :is(.primary,.secondary,.step,.chord-cell,.degree-map button):hover:not(:disabled){box-shadow:inset 0 1px 0 #fff9,0 6px 11px -6px #3b6b8455}}
@media(max-width:760px){.lab-jelly :is(.harmony-workbench,.theory-surface,.drum-workbench,.desk){border-radius:16px}.lab-jelly .library-rail{background:transparent}.lab-jelly .sequence-scroll{padding-inline:4px}.lab-jelly .sequencer{row-gap:8px}}
@media(prefers-reduced-motion:reduce){.lab-jelly *,body.lab-jelly :is(.piano,.scale-keyboard) button{transition:none!important;animation:none!important;translate:none!important}}
/* Explicit title face wins over the original per-module heading declarations. */
body.oy-site.lab-jelly :is(h1,h2,h3,.module-heading,.chord-name,.rhythm-heading strong,.section-heading strong){font-family:'Noto Sans Mono CJK SC',monospace;font-weight:400;font-synthesis:none}
.lab-jelly .harmony-score{color:#547589;display:block;margin-inline:auto}
.lab-jelly .harmony-score text{font-family:'Noto Sans Mono CJK SC',monospace;font-weight:400;fill:#315b71}
.lab-jelly .harmony-score .vf-stave>path{stroke:#a6c2d0;stroke-width:.8}
.lab-jelly .harmony-score :is(.vf-clef,.vf-timesignature,.vf-staveconnector){fill:#547589;stroke:#547589}
.lab-jelly .harmony-score .vf-notehead{filter:drop-shadow(0 1px 1px #47786826)}
.lab-jelly [data-score]{border:0;border-radius:16px;background:linear-gradient(155deg,#fff 55%,#edf6fa);box-shadow:inset 0 1px 0 #fff,0 6px 0 -2px #d7e5ec,0 12px 20px -15px #375c7670;padding:16px 12px 20px}
/* Hue identifies the instrument; strength stays within that hue. */
.lab-jelly .step-label[style]{display:flex;align-items:center;gap:6px;color:#34566c}
.lab-jelly .step-label[style]:before{content:'';flex:0 0 7px;height:7px;border-radius:2px;background:var(--drum-bottom)}
.lab-jelly .step.on[style]{background:linear-gradient(145deg,var(--drum-top),var(--drum-bottom));border-color:var(--drum-bottom)}
.lab-jelly .step.accent[style]{background:linear-gradient(145deg,var(--drum-accent),var(--drum-ink));border-color:var(--drum-ink)}
/* Style-rhythm accents keep the drum library's light pads; a dark dash marks strength. */
.lab-jelly .style-sequencer .step.accent[style]{background:linear-gradient(145deg,var(--drum-top),var(--drum-bottom));border-color:var(--drum-accent)}
.lab-jelly .style-sequencer .step.accent:after{background:var(--drum-ink)}
.lab-jelly .drum-grid-svg .note[data-voice]{fill:var(--drum-fill);stroke:#688391;stroke-opacity:.4}
.lab-jelly .drum-grid-svg .note[data-voice].accent{fill:var(--drum-strong);stroke:#365568;stroke-opacity:.5}
.lab-jelly .drum-grid-svg .note[data-voice].ghost{fill:var(--drum-fill);fill-opacity:.45;stroke:#77938f;stroke-dasharray:2 2}
.lab-jelly .drum-grid-svg .note[data-voice].sounding{stroke:#234d68;stroke-width:2;stroke-opacity:1}
.lab-jelly .drum-grid-svg .accent-mark{stroke:#fff;stroke-width:2;stroke-linecap:round}
.lab-jelly :is(.drum-legend,.sequence-legend) i.accent{position:relative}
.lab-jelly :is(.drum-legend,.sequence-legend) i.accent:after{content:'';position:absolute;left:3px;right:3px;top:4px;height:2px;background:#fff;border-radius:1px}
.lab-jelly.style-library-page .sequence-legend i.accent{background:var(--jelly-mint-face);border-color:#357866}
.lab-jelly.style-library-page .sequence-legend i.accent:after{background:#255c4e}

/* Score and roll share the same inset, origin and unscaled timeline coordinates. */
.lab-jelly .notation-section .notation-scroll{padding:14px 12px 20px}
.lab-jelly .notation-section [data-score]{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.lab-jelly .notation-section :is(.harmony-score,.roll-content){margin:0}