/* JamMixLab's brighter classroom identity. Layout and music colors stay intact. */
:root{--jam-coral:#e8526c;--jam-sun:#dba524;--jam-green:#249c7b;--jam-violet:#8056bf;--jam-blue:#537cca;--ink:#34415e}
body{background:#f7f8fd}
.brand-ja{color:var(--jam-coral)}.brand-mix{color:var(--jam-sun)}.brand-lab{color:var(--jam-green)}
.brand .brand-tagline,.room-brand .brand-tagline{color:#738099}
.brand-mark{filter:drop-shadow(0 3px 0 #dcd8ed66)}
.brand-mark>rect{fill:#fff9ed;stroke:#e6dac5;stroke-width:1.2}
.icon-svg [opacity="0.2"]{opacity:.32}
.instrument[viewBox="0 0 32 32"]{stroke-width:2.05}
.instrument [fill-opacity=".15"],.instrument [fill-opacity=".16"]{fill-opacity:.26}
.icon-svg [fill-opacity=".12"]{fill-opacity:.22}

/* Color stays attached to a purpose, rather than to extra controls. */
.app-header{background:linear-gradient(105deg,#fff 60%,#f8f3ff);border-bottom-color:#e5e0f1}
.app-header:before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#e8526c 0 33%,#edbc43 33% 66%,#27a78b 66%)}
.project-heading .project-name{color:#455071;font-weight:700}
.header-actions .sound-settings-button{background:#ede5fb;border-color:#d1bfe9;color:#7851b4;box-shadow:0 2px 0 #e0d4ee}
.header-actions .file-button{background:#edf2ff;border-color:#cbd8ef;color:#5c76b1;box-shadow:0 2px 0 #dfe7f4}
.header-actions svg{width:22px;height:22px}
.file-menu{border-color:#d9c9e9}.file-menu button{color:#6b587f}.file-menu svg{color:#9470b9}
.app-header .group-badge{background:#e8f6f0;border-color:#badbce;color:#2c806a}
body.is-playground .app-header .group-badge.is-guest{background:#f1eafb;border-color:#d8c5ec;color:#7955a3}
.transport-bar{background:#fff;border-bottom:1px solid #dddfee}
.transport-bar .play-button{background:#249d80;border-color:#208e73;box-shadow:0 3px 0 #197f68;color:white}
.transport-bar .play-button:hover:not(:disabled){background:#188e72}
.transport-bar .stop-button{background:#fff0f3;border-color:#eed3dd;color:#bd5c79;box-shadow:0 2px 0 #f1e0e5}
.transport-bar .musical-position,.transport-bar .clock-position{background:#f2f4fc;border-color:#d9deef}
.transport-bar .musical-position>strong,.transport-bar .clock-position>strong{color:#475779}
.transport-bar .counter-caption{color:#7885a1}
.transport-bar .tempo-control>button{background:#fff4d4;border-color:#e8cf88;color:#987025;box-shadow:0 2px 0 #f1e6bf}
.transport-bar .key-control>button{background:#eaf1ff;border-color:#c6d7f3;color:#5279b1;box-shadow:0 2px 0 #e0e8f6}
.transport-bar .progression-control>button{background:#f2eafa;border-color:#d7c5e9;color:#8463a6;box-shadow:0 2px 0 #e9dff2}
.transport-bar #loopBtn:not(.active){background:#eaf7f3;border-color:#c5e1d9;color:#479d87}
.transport-bar #metronomeBtn:not(.active){background:#f1eafb;border-color:#dbcaef;color:#8765b4}
.transport-bar #loopBtn.active,.transport-bar #metronomeBtn.active{background:#d7f1e8;border-color:#70bca2;color:#237d63;box-shadow:0 0 0 2px #a3d6c447}
.transport-bar .edit-tools .icon-button{background:#f5f1fc;border-color:#dfd5ed;color:#846ca9}
.transport-bar .icon-button:disabled{opacity:.36}

/* A small graphic signature for the library, and stronger instrument tiles. */
.library{background:linear-gradient(165deg,#fbf9ff,#fff 42%);border-right-color:#e5dff0}
.library-heading{gap:9px}.library-heading h1{font-weight:750;color:#635181}
.library-emblem{display:grid;place-items:center;width:31px;height:31px;flex:0 0 31px;border-radius:11px;background:#e9dff7;color:#8a59bc;box-shadow:0 2px 0 #d7c8e9;transform:rotate(-5deg)}
.library-emblem svg{width:22px;height:22px}
.library-collapsed .library-emblem{display:none}
.library-toggle{background:#ebe4f6;color:#8662b1;border-color:#dcd0ec}
.sound-count{background:#efe9f8;color:#88729f}
.genre-trigger{background:color-mix(in srgb,var(--genre-color) 10%,white);border-color:color-mix(in srgb,var(--genre-color) 40%,white);color:#5e5d78}
.genre-badge{background:color-mix(in srgb,var(--genre-color) 17%,white);border:1px solid color-mix(in srgb,var(--genre-color) 29%,white);border-radius:12px}
.category-selector{background:color-mix(in srgb,var(--category-color) 10%,white);border-color:color-mix(in srgb,var(--category-color) 42%,white)}
#categorySelect.category-trigger{color:#5d5875;font-weight:700}
.selected-category-icon{background:color-mix(in srgb,var(--category-color) 17%,white);border:1px solid color-mix(in srgb,var(--category-color) 30%,white);border-radius:10px}
.selected-category-icon .instrument-picture{width:26px;height:26px}
.category-option-icon{width:32px;height:32px;flex-basis:32px;border-radius:10px;background:color-mix(in srgb,var(--color) 14%,white)}
.category-option{min-height:45px;color:#5d6280}
.search{background:#f4f1fb;border-color:#e6dff1;color:#9b82b9}
.search input::placeholder{color:#8e85a2}
.loop-card{border-color:color-mix(in srgb,var(--clip-color) 28%,white);border-left:3px solid color-mix(in srgb,var(--clip-color) 78%,white);background:linear-gradient(115deg,color-mix(in srgb,var(--clip-color) 5%,white),white 75%);box-shadow:0 2px 0 color-mix(in srgb,var(--clip-color) 9%,#f2f2f9);border-radius:15px}
.loop-card:hover{border-color:color-mix(in srgb,var(--clip-color) 65%,white);box-shadow:0 3px 9px color-mix(in srgb,var(--clip-color) 15%,transparent)}
.sample-symbol{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border-radius:9px;background:color-mix(in srgb,var(--clip-color) 14%,white);color:color-mix(in srgb,var(--clip-color) 85%,#44506b)}
.sample-symbol .instrument-picture,.sample-symbol svg{width:21px;height:21px}
.sample-name{font-size:12px;font-weight:700;color:#4d526f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sample-preview,.sample-add{background:color-mix(in srgb,var(--clip-color) 17%,white);border:1px solid color-mix(in srgb,var(--clip-color) 27%,white);color:color-mix(in srgb,var(--clip-color) 85%,#43516c)}
.sample-meta .sample-style{color:#7e7890}
.sample-wave .waveform{filter:saturate(1.12)}

/* Keep the arrangement useful, with color in its tools and small symbols. */
.arrangement-heading{background:#fcfbff;border-bottom-color:#e4def0}
.arrangement-meta{color:#8a6eae}.arrangement-meta>span:first-child{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#ece4f7}
.clip-view-toggle{background:#eee7fa;border-color:#d4c3e8;color:#805cae}
.extend-button{background:#e8f4ef;border-color:#c6dfd3;color:#4a967d}
.zoom-tools .icon-button{background:#eef1fb;color:#7a83ad}
button.track-icon{background:color-mix(in srgb,var(--track-color) 14%,white);border:1px solid color-mix(in srgb,var(--track-color) 27%,white)}
button.track-icon:hover:not(:disabled){background:color-mix(in srgb,var(--track-color) 22%,white)}
.track-title input{color:#4e546f;font-weight:650}
.clip-title{background:color-mix(in srgb,var(--clip-color) 14%,white)}
.clip-instrument{color:color-mix(in srgb,var(--clip-color) 85%,#3b4b65)}
.new-track-hint{color:#9381b3}.new-track-hint .icon-svg{border-color:#c7b9df;color:#9b81bf;background:#f6f0fc}

/* The welcome illustration reuses the application's existing vector family. */
.project-room{background:radial-gradient(circle at 100% 0,#fff2d8 0,transparent 34%),radial-gradient(circle at 0 60%,#f4edff 0,transparent 40%),#fffdfc;border-color:#e0d4ed;box-shadow:0 18px 80px #6c4a9a2b}
.project-room::backdrop{background:#e4e0f3c7;backdrop-filter:blur(7px)}
.project-room .room-brand{margin-bottom:9px}
.welcome-art{display:block;width:100%;height:80px;object-fit:contain;pointer-events:none;margin:0 0 12px}
.entry-landing .playground-entry{margin:0 0 22px}
.entry-landing .playground-entry>button{background:linear-gradient(105deg,#e0f6ec,#eafaf4);border:1.5px solid #9cd1bb;box-shadow:0 4px 0 #cce9dc;color:#237e61;min-height:85px;font-size:16px}
.entry-landing .playground-entry>button>span:first-child{background:#2ba483;color:#fff;box-shadow:0 3px 0 #20896d;border-radius:16px;transform:rotate(-5deg)}
.entry-landing .playground-entry small{color:#508873;font-size:11px}
.student-entry-actions>button{border-width:1.5px;background:#eee5fa;border-color:#d1bfe9;color:#7350a3;font-weight:700;box-shadow:0 2px 0 #e8dcf2}
.student-entry-actions>button>span:first-child{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#ded0f1;color:#8257b4;flex-shrink:0}
.student-entry-actions>button:last-child{background:#fff6dd;border-color:#ecda9d;color:#987a39;box-shadow:0 2px 0 #f3e8c7}
.student-entry-actions>button:last-child>span:first-child{background:#f4e3a8;color:#ae8835}
.entry-divider{color:#81768e}.entry-divider:before,.entry-divider:after{background:#dfd5e9}
.entry-secondary{border-top:0;margin-top:17px;padding-top:0;gap:10px}
.entry-secondary>button{flex:1;background:#edf2fc;border:1px solid #d5dff0;border-radius:12px;color:#637fad;padding:10px 7px;font-size:10px}
.entry-secondary>button:last-child{background:#fff0f3;border-color:#eed3df;color:#ac6a87}
.project-room .room-tabs{background:#eee8f7}.project-room .room-tabs button{color:#857393}
.project-room .room-tabs button[aria-selected=true]{color:#7850aa;box-shadow:0 2px 0 #d9c9e9}
.project-room input:not([type=checkbox]),.project-room select{border-color:#d5c6e6}
.project-room .room-primary{background:#8860be;box-shadow:0 3px 0 #704c9f}

/* Soundbanks get colorful badges; the active radio remains the saved choice. */
.sound-bank-settings{background:#fdfbff;border-color:#dacee9}
.sound-bank-settings>header{background:#fdfbff}.sound-settings h2{color:#685184}
.sound-settings header>span{color:#8a55bb;background:#e9ddf7;box-shadow:0 2px 0 #d8c7ec}
.sound-profile{--bank-color:#618cbd}
.sound-profile:nth-of-type(2){--bank-color:#6d9e83}.sound-profile:nth-of-type(3){--bank-color:#d69452}.sound-profile:nth-of-type(4){--bank-color:#9470bd}.sound-profile:nth-of-type(5){--bank-color:#c26b8c}.sound-profile:nth-of-type(6){--bank-color:#528f9f}
.sound-profile-choice>.sound-bank-symbol{display:grid;place-items:center;width:31px;height:34px;flex:0 0 31px;border-radius:10px;background:color-mix(in srgb,var(--bank-color) 16%,white);color:var(--bank-color)}
.sound-bank-symbol svg{width:23px;height:23px}
.sound-bank-settings .sound-profile{border-color:color-mix(in srgb,var(--bank-color) 32%,white);background:linear-gradient(110deg,color-mix(in srgb,var(--bank-color) 5%,white),#fff 70%)}
.sound-bank-settings .sound-profile:has(input:checked){border-color:#a980cc;background:#f0e7fb;box-shadow:0 0 0 1px #c8afe3}
.sound-profile strong{color:#5e526f}.sound-profile small{color:#7c7189}
.sound-profile-play{border-color:color-mix(in srgb,var(--bank-color) 32%,white);background:color-mix(in srgb,var(--bank-color) 15%,white);color:var(--bank-color);box-shadow:0 2px 0 color-mix(in srgb,var(--bank-color) 14%,white)}
.sound-profile-play[aria-pressed=true]{background:#2a9a7b;border-color:#248468;color:white;box-shadow:0 2px 0 #21765e}
.sound-profile-play.is-loading:after{border-color:#ffffff66;border-top-color:white}

@media(max-width:760px){
 .library-emblem{width:27px;height:27px;flex-basis:27px;border-radius:9px}.library-emblem svg{width:20px;height:20px}
 .library-heading h1{font-size:15px}.sample-symbol{width:22px;height:22px;flex-basis:22px;border-radius:7px}.sample-symbol .instrument-picture,.sample-symbol svg{width:18px;height:18px}
 .sample-name{font-size:11px}.loop-card-head{gap:5px}
}
@media(max-width:520px){
 .welcome-art{height:62px;margin-bottom:10px}.entry-landing .playground-entry{margin-bottom:18px}
 .entry-landing .playground-entry>button{min-height:78px;font-size:14px;padding:14px 17px}
 .sound-profile-choice{position:relative;padding-left:0}.sound-profile-choice>span:not(.sound-bank-symbol){flex-basis:calc(100% - 30px)}
 .sound-profile-choice>.sound-bank-symbol{display:none}.sound-profile-choice em{margin-left:27px}
 .entry-secondary{gap:7px}.entry-secondary>button{font-size:9px;padding:10px 4px;gap:5px}
}
@media(prefers-reduced-motion:reduce){.brand-mark,.library-emblem,.entry-landing .playground-entry>button>span:first-child{transform:none}}

/* Edition 0.2 — the note and drum workspaces share the same bright identity. */
dialog.note-editor{border-color:#d3c3e6;background:#fdfbff;box-shadow:0 20px 85px #65517f38}
.note-editor::backdrop{background:#34314e77;backdrop-filter:blur(6px)}
.note-editor-heading{padding-top:22px;padding-bottom:17px;background:linear-gradient(110deg,color-mix(in srgb,var(--editor-color) 10%,white),#faf6ff 75%);border-bottom:1px solid #e6dcee;gap:12px}
.note-editor-heading:before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#e9859a,#e8c55f 34%,#7fc6b1 67%,#a889cd);pointer-events:none}
.note-heading-copy{min-width:0;flex:1}.note-heading-copy h2{font-size:22px;color:#635078;letter-spacing:-.55px}
.note-heading-copy p{max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8a769a;font-size:11px}
.note-editor-symbol{width:54px;height:54px;border:1px solid color-mix(in srgb,var(--editor-color) 35%,white);border-radius:17px;background:color-mix(in srgb,var(--editor-color) 18%,white);color:color-mix(in srgb,var(--editor-color) 80%,#53516e);box-shadow:0 3px 0 color-mix(in srgb,var(--editor-color) 15%,white);transform:rotate(-4deg)}
.note-editor-symbol .instrument-picture{width:36px;height:36px}
.note-drag-grip{color:#a48dbf}
.note-editor-art{display:block;width:112px;height:44px;flex:0 0 112px;pointer-events:none}
.note-editor-art svg{display:block;width:100%;height:100%}.note-editor-art .drum-editor-art{display:none}
.is-drums .note-editor-art .melody-editor-art{display:none}.is-drums .note-editor-art .drum-editor-art{display:block}
.note-editor-heading .note-zoom{margin-left:0}
.note-editor-heading>.icon-button,.note-zoom>.icon-button{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border:1px solid #d8cae9;border-radius:13px;background:#eee6f9;color:#8b63b6}
.note-editor-heading>[data-close]{background:#fff0f3;color:#be7891;border-color:#edd5df}
.note-editor-heading>.icon-button svg,.note-zoom>.icon-button svg{width:22px;height:22px}

.note-editor-tools{padding-top:15px;padding-bottom:15px;gap:8px;background:#fff}
.note-editor-tools .note-tool,.note-editor-tools>.icon-button{height:42px;min-width:42px;width:42px;border:1px solid #dbd1e9;border-radius:13px;background:#f0eafa;color:#8565ac;box-shadow:0 2px 0 #e8def1}
.note-editor-tools .note-tool svg{width:23px;height:23px}
.note-play-controls{gap:7px}
.note-play-controls>button{width:42px;min-width:42px;height:42px}
.note-play-controls>button svg{width:22px;height:22px}
.note-play-controls>.note-listen{background:#289d7f;color:white;border-color:#21886d;box-shadow:0 3px 0 #1e7f66}
.note-play-controls>.note-listen.is-playing{background:#188269;box-shadow:0 0 0 3px #b2ddcc}
.note-play-controls>.note-stop{background:#fce9ef;color:#bd6885;border-color:#e9c6d5;box-shadow:0 2px 0 #f1dce4}
.note-editor-tools #noteAddMode{color:#8662b7;background:#f0e6fb;border-color:#d7c4eb}
.note-editor-tools #noteAddMode[aria-pressed=true]{background:#8d69bd;border-color:#7954a8;color:#fff;box-shadow:0 3px 0 #715298}
.note-editor-tools #noteEraseMode{background:#fff0f3;border-color:#edcfdb;color:#c16c8c}
.note-editor-tools #noteEraseMode[aria-pressed=true]{background:#c9718f;border-color:#b45e7c;color:white;box-shadow:0 3px 0 #a85672}
.note-editor-tools #noteSelectMode{background:#eaf0fc;border-color:#c9d9f0;color:#688ec5}
.note-editor-tools #noteSelectMode[aria-pressed=true]{background:#7394c7;border-color:#6080b6;color:white;box-shadow:0 3px 0 #5676a6}
.note-editor-tools #noteCopy{background:#eaf2fc;border-color:#cfdef1;color:#7799c5}
.note-editor-tools #notePaste{background:#fff4da;border-color:#ead8a0;color:#b08b3b}
.note-editor-tools #notePaste[aria-pressed=true]{background:#d5ab55;color:white;border-color:#c09643;box-shadow:0 3px 0 #ad883f}
.note-editor-tools #noteUndo{color:#997bad;background:#f4edf9;border-color:#dfd3ea}
.note-tool-divider{background:#d7cbdf;height:31px;margin:0 3px}
.note-quantize{background:#e5f3ee;border-color:#bddbcc;padding:3px;box-shadow:0 2px 0 #e0eee8}
.note-quantize #noteQuantize{color:#428e76;background:transparent;border:0;box-shadow:none;min-width:108px;height:38px}
.note-quantize select{height:36px;border-color:#cbded5;color:#60917e;border-radius:10px;background:#fff;font-weight:700}
.note-editor .note-root>button{background:#eaf1ff;border-color:#c5d6f0;color:#6485b8;box-shadow:0 2px 0 #e2eaf7}
.note-editor .note-root>button[aria-expanded=true]{background:#dce9fc;border-color:#a4bee6}
.note-editor .note-scale{background:#fff5db;border-color:#e8d59b;color:#a98b4c;box-shadow:0 2px 0 #f3e8c8}
.note-editor .note-scale>select{color:#94783f;font-weight:750}
.drum-view{background:#e7f5f0;border-color:#b3d9c9;color:#4d987e;box-shadow:0 2px 0 #dceee6}
.drum-view-symbol{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:8px;background:#cde8dc;color:#4e967c}
.drum-view-symbol svg{width:23px;height:23px}
.drum-view select{color:#4b8b74;min-width:145px;font-size:11px}

.note-editor .note-scroll{border-color:#cfc4e2;box-shadow:0 2px 0 #e9e1f1;scrollbar-color:#c3afd9 #f6f2fa}
.note-editor .note-measures{background:#f0eafa;border-bottom-color:#cab9df}
.note-editor .note-measure-corner{background:#eae2f5;color:#8b70a6;font-weight:700}
.note-editor .note-measures>.note-measure{border-left-color:#c6b8dc}
.note-editor .note-measures>.note-measure>strong{color:#8a70a6}
.note-editor .note-measures>.note-measure>span{border-color:color-mix(in srgb,var(--pitch-color) 32%,white);background:color-mix(in srgb,var(--pitch-color) 20%,white)}
.note-editor .note-row{background-image:linear-gradient(to right,#b2bed9 2px,transparent 2px),linear-gradient(to right,#dce3f0 1px,transparent 1px),linear-gradient(to right,#edf0f8 1px,transparent 1px)}
.note-editor .note-event{border:1.5px solid color-mix(in srgb,var(--pitch-color) 72%,#69708b);background:color-mix(in srgb,var(--pitch-color) 64%,white);box-shadow:inset 0 2px 0 #ffffff88,0 2px 0 #48527a0d}
.note-editor .note-event.selected{outline:2px solid #8561b4;outline-offset:1px;box-shadow:0 0 0 3px white,0 3px 8px #7760902c}
.note-editor .note-marquee{border-color:#976bbf;background:#ac89d325;box-shadow:inset 0 0 0 1px #fff6}
.note-editor:not(.is-drums) .note-pitch-dot{box-shadow:0 0 0 2px white,0 0 0 3px #e8e2f0}
.note-editor .note-cursor{background:#bc729a;box-shadow:0 0 0 1px #fff9}
.note-editor .note-zoom-panel{border-color:#d7c8e6;background:#fcf9ff;box-shadow:0 10px 35px #6d507f2e}
.note-zoom-panel input{accent-color:#a082c2}
.note-zoom-panel>button{background:#eee4f7;color:#8a69ad}

.note-editor.is-drums .note-key{gap:8px;padding:0 8px;background:color-mix(in srgb,var(--pitch-color) 7%,white);border-bottom-color:color-mix(in srgb,var(--pitch-color) 20%,#e4e7ef);color:#68748e;font-weight:700}
.note-editor.is-drums .note-key>svg{--drum-symbol-size:clamp(18px,calc(var(--note-row) - 6px),31px);width:var(--drum-symbol-size);height:var(--drum-symbol-size);flex:0 0 var(--drum-symbol-size);padding:3px;border:1px solid color-mix(in srgb,var(--pitch-color) 28%,white);border-radius:9px;background:color-mix(in srgb,var(--pitch-color) 15%,white);color:color-mix(in srgb,var(--pitch-color) 88%,#5a637a)}
.drum-symbol[viewBox="0 0 24 24"]{stroke-width:1.9}
.drum-symbol [opacity="0.2"]{opacity:.32}
.note-editor.is-drums .note-row{background-color:color-mix(in srgb,var(--pitch-color) 3%,white)}
.note-editor.is-drums .note-event{border-color:color-mix(in srgb,var(--pitch-color) 72%,#63718b);background:color-mix(in srgb,var(--pitch-color) 70%,white);border-radius:8px;box-shadow:inset 0 2px 0 #ffffffaa,0 2px 0 #55627d0b}
.note-editor.is-drums .note-event>.note-shine{width:44%;height:3px;background:#ffffffb3;border-radius:3px}
.note-editor.is-drums .note-event.selected{box-shadow:0 0 0 3px white,0 3px 8px #7760902c}
.note-editor .note-event.is-sounding{box-shadow:inset 0 2px 0 #ffffff45,0 0 7px 2px color-mix(in srgb,var(--pitch-color) 32%,transparent)}
.note-editor .note-event.selected.is-sounding{box-shadow:0 0 0 3px white,0 0 8px 2px color-mix(in srgb,var(--pitch-color) 32%,transparent)}
.note-editor .note-editor-footer{border-top:1px solid #e6ddef;background:linear-gradient(110deg,#fcf8ff,#fff);padding-top:16px;padding-bottom:17px}
.note-selection #noteSelected{padding:7px 10px;background:#f0e8f8;border-radius:10px;color:#8d70a7;min-width:0}
.note-editor .note-clear{background:#e9e0f4;color:#9879b5}
.note-selection #noteDelete{background:#fce9f0;color:#c26d8f;border:1px solid #eccbd9;box-shadow:0 2px 0 #f3dde6}
.note-finish>button:first-child{background:#eee7f8;color:#8c6eaa;border:1px solid #dcd0ec}
.note-finish>.note-done{background:#2c9c7e;border:1px solid #278b70;box-shadow:0 3px 0 #237d65;color:white}
.note-finish button{height:42px}.note-finish svg{width:21px;height:21px}
.note-context-menu{border-color:#d7c8e5;background:#fffaff;box-shadow:0 12px 35px #69517e2e}
.note-context-menu>button{color:#8b70a7}.note-context-menu>button svg{width:20px;height:20px}
.note-context-menu>.note-menu-delete{color:#bd6a89;border-top-color:#eedce7}

@media(max-width:780px){
 .note-editor-heading{padding:17px 16px 14px;gap:10px}.note-heading-copy h2{font-size:19px}
 .note-editor-art{width:80px;flex-basis:80px}.note-editor-tools{padding:12px 16px}
}
@media(max-width:540px){
 .note-editor-art{display:none}.note-editor-symbol{width:42px;height:42px;flex:0 0 42px;border-radius:13px}.note-editor-symbol .instrument-picture{width:30px;height:30px}
 .note-editor-heading{gap:8px}.note-heading-copy h2{font-size:17px}.note-heading-copy p{font-size:9px;max-width:145px}
 .note-editor-heading>.icon-button,.note-zoom>.icon-button{width:34px;height:36px;flex-basis:34px;border-radius:11px}
 .note-editor-tools{gap:6px}.note-tool-divider{margin:0 1px}.note-editor .note-root{flex-basis:99px;width:99px}
 .note-quantize #noteQuantize{min-width:85px;gap:4px}.note-quantize #noteQuantize>span{font-size:11px}.note-quantize #noteQuantize .icon-svg{width:18px;height:18px}.note-quantize select{width:49px;min-width:49px;padding:0 4px}
 .note-editor .note-scale{min-width:126px}.note-editor .note-editor-footer{padding:12px 16px;gap:10px}
 .note-editor .note-scroll{min-height:140px}.note-finish button{height:40px}
}
@media(max-height:560px){
 dialog.note-editor{overflow-y:auto;overscroll-behavior:contain}
 .note-editor .note-scroll{flex:0 0 180px;height:180px;min-height:140px}
 .note-editor .note-editor-footer{position:sticky;bottom:0;z-index:6;flex-shrink:0}
}
@media(prefers-reduced-motion:reduce){.note-editor-symbol{transform:none}}

/* Edition 0.2: one account, a shared visual language for joining and creating. */
.project-room{scrollbar-color:#c7b5dc #f6f1fc;scrollbar-width:thin}
.project-room .room-close{display:grid;place-items:center;width:35px;height:35px;border:1px solid #ead2df;border-radius:12px;background:#fff0f5;color:#b67995}
.project-room .room-entry{grid-template-columns:1fr 1fr;padding:5px;background:#eae4f4;border:1px solid #dcd0eb;border-radius:17px}
.project-room .room-tabs>button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px}
.project-room .room-tabs>button .icon-svg{width:21px;height:21px}
.project-room .room-tabs>button[aria-selected=true]{background:white;border-radius:12px;color:#7a50a8;box-shadow:0 2px 0 #d2bee6}
.entry-secondary>button:only-child{background:#edf2fc;border-color:#d5dff0;color:#637fad;flex:0 1 100%;font-size:11px}
.room-entry-back{color:#8869a5;gap:7px;font-weight:700}.room-entry-back svg{padding:5px;width:25px;height:25px;border-radius:9px;background:#eee5f7}
.auth-card{--auth-color:#9271bb;position:relative;padding:19px 20px 6px;border:1.5px solid #ded0ec;border-radius:21px;background:linear-gradient(125deg,#f8f2ff,#fff 64%);box-shadow:0 3px 0 #eee4f6;margin:0 0 15px}
.group-auth-card{--auth-color:#4eaa91;border-color:#c3e1d6;background:linear-gradient(125deg,#ecf9f3,#fff 65%);box-shadow:0 3px 0 #e0f1e9}
.room-form-heading{display:flex;align-items:center;gap:12px;margin:0 0 20px;min-width:0}
.room-form-heading>span:first-child{display:grid;place-items:center;width:43px;height:43px;flex:0 0 43px;border:1px solid color-mix(in srgb,var(--auth-color,#8d6db3) 30%,white);border-radius:14px;background:color-mix(in srgb,var(--auth-color,#8d6db3) 18%,white);color:var(--auth-color,#8d6db3);box-shadow:0 2px 0 color-mix(in srgb,var(--auth-color,#8d6db3) 24%,white);transform:rotate(-4deg)}
.room-form-heading .icon-svg{width:27px;height:27px}.room-form-heading h2{font-size:20px;line-height:1.25;margin:0;color:#655077;font-weight:750;letter-spacing:-.35px}
.room-form-heading p{font-size:12px;color:#90809f;margin:5px 0 0;overflow-wrap:anywhere}
.auth-card .room-tabs{margin-bottom:20px;background:color-mix(in srgb,var(--auth-color) 12%,white);border:1px solid color-mix(in srgb,var(--auth-color) 23%,white);padding:4px;border-radius:14px}
.auth-card .room-tabs button{font-size:12px;padding:10px 8px}
.project-room .auth-card input:not([type=radio]),.project-room .auth-card select{min-height:47px;background:#ffffffed;border-color:color-mix(in srgb,var(--auth-color) 34%,white);border-radius:13px;color:#57516d;font-size:14px}
.project-room .auth-card input:focus,.project-room .auth-card select:focus{border-color:var(--auth-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--auth-color) 15%,transparent)}
.project-room .auth-card label:not(.room-checkbox){color:#7a6b89;font-size:12px;gap:8px;margin-bottom:19px}
.project-room .room-primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:47px;border:1px solid #7954a7;background:#8d63ba;border-radius:14px;font-weight:750}
.project-room .room-primary .icon-svg{width:22px;height:22px}
.group-auth-card .room-primary{background:#309d80;border-color:#2c8e74;box-shadow:0 3px 0 #26765f}
.project-room .account-role-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0;margin:0 0 21px;padding:0;border:0}
.account-role-choice legend{font-size:12px;font-weight:700;color:#7a6b89;padding:0;margin-bottom:9px}
.project-room .account-role-choice label{--role-color:#8b65b8;display:grid;grid-template-columns:30px 1fr;align-items:center;gap:7px!important;position:relative;margin:0!important;padding:13px 9px;border:1.5px solid #e0d4ee;border-radius:15px;background:white;cursor:pointer;min-height:58px;font-size:12px!important;color:#8c7d9b;box-sizing:border-box}
.project-room .account-role-choice label:last-child{--role-color:#d29443}
.account-role-choice input{position:absolute;opacity:0;width:1px;height:1px}
.account-role-choice .role-symbol{display:grid;place-items:center;width:30px;height:32px;border-radius:10px;background:color-mix(in srgb,var(--role-color) 15%,white);color:var(--role-color)}
.role-symbol svg{width:23px;height:23px}
.project-room .account-role-choice label:has(input:checked){background:color-mix(in srgb,var(--role-color) 11%,white);border-color:var(--role-color);box-shadow:0 2px 0 color-mix(in srgb,var(--role-color) 25%,white);color:color-mix(in srgb,var(--role-color) 80%,#4e485f)}
.account-role-choice label:has(input:focus-visible){outline:3px solid #c8b5e4;outline-offset:3px}
.project-room .photo-upload{background:#fff8e8;border:1px dashed #d9bd7a;padding:12px;border-radius:14px}
.photo-upload-heading{display:flex;align-items:center;gap:8px;color:#9c8147}.photo-upload-heading svg{width:20px;height:20px}.photo-upload-heading small{margin-left:auto}
.project-room .photo-upload input[type=file]{min-height:34px;border:0!important;background:#fffdf8;font-size:10px;padding:5px}
.project-room input[type=file]::file-selector-button{border:1px solid #e2cc99;border-radius:8px;background:#f8edcd;color:#987a3f;font:inherit;font-weight:700;padding:7px 9px;margin-right:9px}
.group-auth-card .room-members{gap:8px}.group-auth-card .room-members input{font-size:12px!important;padding:12px 9px!important}
.project-room .group-choices{gap:10px}.project-room .group-choices button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:45px;font-size:12px;border:1px solid #c9d9ee;background:#ecf3ff;color:#6988b5;box-shadow:0 2px 0 #dce6f4}
.project-room .group-choices button:last-child{background:#e6f6ee;border-color:#b5ddcc;color:#3d9678;box-shadow:0 2px 0 #d6ece1}.group-choices .icon-svg{width:21px;height:21px}
#accountGroupForm{--auth-color:#5ba58e;padding:18px;background:linear-gradient(125deg,#effaf4,#fff);border-color:#c5e2d5;border-radius:19px;box-shadow:0 3px 0 #e0f0e8}
#accountGroupForm .room-form-heading{margin-bottom:17px}#accountGroupForm .room-form-heading h2{font-size:18px}
.project-room .join-methods{margin-bottom:18px}.project-room .join-methods button{min-height:39px;font-size:11px}
.project-room #joinInvitationCode{font-size:28px;letter-spacing:.3em;padding:12px 15px;text-align:center;color:#6b50a0;font-variant-numeric:tabular-nums;border-color:#bfb0df;background:#faf7ff}
.project-room #joinInvitationCode::placeholder{color:#cec4df}
#accountGroupSubmit{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#309d80;border:1px solid #2b8a71;color:white;min-height:43px;box-shadow:0 2px 0 #277c64}
#accountGroupSubmit svg{width:21px;height:21px}
.group-photo-row{flex-wrap:wrap;border:1px solid #e1d3ed;background:#f7f1fc;border-radius:16px;padding:12px;margin:14px 0}
.group-photo-row>strong{color:#705a8c;overflow-wrap:anywhere;flex:1;min-width:90px}
.group-photo-row>button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:37px;padding:7px 10px;border:1px solid #d8c7e9;border-radius:11px;background:#eee3f7;color:#8c64b0;font:inherit;font-size:11px;font-weight:700}
.group-photo-row>button .icon-svg{width:18px;height:18px}
.group-photo-row>#inviteGroupMembers{background:#fff1d5;border-color:#e6d09d;color:#ae883b}
.group-invite-card{--auth-color:#a984cd;border:1.5px solid #c9b4df;border-radius:20px;padding:19px;background:linear-gradient(130deg,#f2eafb,#fff9ed);box-shadow:0 3px 0 #e7d9f2;margin:0 0 20px}
.group-invite-card .room-form-heading{margin-bottom:14px}.group-invite-card .room-form-heading h2{font-size:18px}
.group-invite-card .room-form-heading>div{flex:1;min-width:0}
.group-invite-card .room-form-heading>.icon-button{width:31px;height:33px;flex:0 0 31px;padding:5px;background:#fbf5ff;color:#9d81b5;border:1px solid #e0d2eb;border-radius:10px}
.group-invite-content{display:flex;align-items:center;gap:17px}.group-invite-qr{flex:0 0 145px;padding:7px;border:1px solid #d6c5e8;background:white;border-radius:15px;box-shadow:0 3px 0 #e5d9f1;line-height:0;box-sizing:border-box}
.group-invite-qr svg{width:100%;height:auto;display:block}
.group-invite-details{flex:1;min-width:0;color:#8e7d9d}.group-invite-details>span{font-size:10px;font-weight:650}.group-invite-details>strong{display:block;font-size:31px;letter-spacing:.1em;line-height:1.5;color:#7e53a4;font-variant-numeric:tabular-nums}.group-invite-details>small{font-size:10px}
.group-invite-details button{display:flex;align-items:center;gap:6px;margin-top:12px;padding:9px;border:1px solid #d5c1e8;background:#f9f3ff;color:#8b67ab;border-radius:11px;font:inherit;font-size:10px;font-weight:700;line-height:1.4;text-align:left}
.group-invite-details button svg{width:18px;height:18px;flex:0 0 18px}
.invite-renew{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:37px;margin-top:14px;border:1px solid #ddcda6;border-radius:11px;background:#fff7df;color:#ae8d4e;font:inherit;font-size:11px;font-weight:700}.invite-renew svg{width:18px;height:18px}
.invitation-notice{display:flex;align-items:center;gap:10px;padding:13px;background:#fff4d7;border:1px solid #ecd699;border-radius:15px;color:#9b7c3e;margin-bottom:17px}.invitation-notice>.icon-svg{flex:0 0 28px;width:28px;height:28px}.invitation-notice p{font-size:12px;line-height:1.5;margin:0}
.incoming-group-invite{text-align:center;padding:22px 18px;background:#eef9f2;border:1px solid #b6dfc9;border-radius:20px;margin-bottom:20px}
.incoming-invite-symbol{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;background:#d6efe1;border:1px solid #b4dac5;border-radius:18px;color:#4ba17f;transform:rotate(-4deg)}.incoming-invite-symbol svg{width:34px;height:34px}
.incoming-group-invite h2{font-size:18px;color:#66876f;margin:14px 0 7px}.incoming-group-invite>strong{display:block;color:#3e926e;font-size:23px;margin-bottom:20px;overflow-wrap:anywhere}
.incoming-group-invite .project-confirm-actions{justify-content:center}.incoming-group-invite .room-primary{min-height:43px;box-shadow:0 2px 0 #267a5d;background:#329e7c;border-color:#2a8a6b;color:white;padding:8px 14px}
.project-room .profile-settings{border:1px solid #ded0ec;background:#f8f1fd;box-shadow:0 3px 0 #ece0f4}
.project-room .group-people .person{padding:7px 10px;background:#f0eaf8;border:1px solid #ddd0eb;border-radius:13px;color:#837098;font-size:11px}
@media(max-width:540px){
 .auth-card{padding:17px 14px 3px;border-radius:18px}.room-form-heading{gap:10px}.room-form-heading h2{font-size:18px}.room-form-heading>span:first-child{width:36px;height:38px;flex-basis:36px;border-radius:12px}.room-form-heading .icon-svg{width:24px;height:24px}
 .project-room .room-entry button{font-size:12px!important}.project-room .room-entry button .icon-svg{width:19px;height:19px}
 .project-room .account-role-choice{gap:7px}.project-room .account-role-choice label{grid-template-columns:1fr;justify-items:center;gap:8px!important;font-size:11px!important;padding:10px 5px}
 .group-invite-card{padding:15px}.group-invite-content{gap:12px;flex-wrap:wrap;justify-content:center}.group-invite-qr{flex-basis:145px}.group-invite-details{flex:1 0 130px;text-align:center}.group-invite-details button{margin:10px auto 0}
 .project-room .group-choices button{font-size:11px}.group-choices .icon-svg{width:19px;height:19px}
}
@media(prefers-reduced-motion:reduce){.room-form-heading>span:first-child,.incoming-invite-symbol{transform:none}}
/* Keep the full account form reachable without an oversized logo above it. */
.project-room:has(#entryLanding[hidden]) .room-brand{margin-bottom:13px;gap:9px}
.project-room:has(#entryLanding[hidden]) .room-brand .brand-mark{width:57px;height:57px}
.project-room:has(#entryLanding[hidden]) .room-brand .brand-type{font-size:35px}
.project-room:has(#entryLanding[hidden]) .room-entry-back{min-height:29px;margin-bottom:8px}
.project-room:has(#entryLanding[hidden]) .room-entry{margin-bottom:15px}
.project-room .auth-card label:not(.room-checkbox){margin-bottom:14px;gap:6px}
.auth-card .room-form-heading{margin-bottom:14px}.auth-card .room-form-heading>span:first-child{width:36px;height:36px;flex-basis:36px;border-radius:12px}.auth-card .room-form-heading h2{font-size:18px}.auth-card .room-form-heading .icon-svg{width:24px;height:24px}
.auth-card .room-tabs{margin-bottom:15px}.auth-card .room-tabs>button{min-height:39px;padding:8px}
.project-room .account-role-choice{margin-bottom:15px}.project-room .account-role-choice label{min-height:52px;padding:10px 8px}
.project-room .photo-upload{padding:10px}.project-room .auth-card input:not([type=radio]):not([type=file]){min-height:43px;padding:11px 12px}
.project-room .auth-card .room-primary{min-height:44px;padding:11px 15px;font-size:14px;margin:4px 0 10px}
.project-room .room-feedback:has(#roomMessage:empty):has(#roomRetry[hidden]):has(#roomBusy[hidden]){display:none}
@media(max-width:540px){
 .project-room:has(#entryLanding[hidden]) .room-brand .brand-type{font-size:26px}.project-room:has(#entryLanding[hidden]) .room-brand .brand-mark{width:43px;height:43px}
 .project-room .account-role-choice label{grid-template-columns:26px 1fr;gap:5px!important;min-height:49px;padding:8px 6px;justify-items:start}.account-role-choice .role-symbol{width:26px;height:28px}.role-symbol svg{width:20px;height:20px}
}
@media(min-width:541px){
 .project-room .auth-card .photo-upload{flex-direction:row;align-items:center;gap:10px;padding:8px 10px;min-height:48px;box-sizing:border-box}
 .photo-upload-heading{flex:1;min-width:0;flex-wrap:wrap;gap:4px;font-size:11px}.photo-upload-heading small{margin-left:0;flex-basis:100%;padding-left:24px;font-size:9px}
 .project-room .photo-upload input[type=file]{width:54%;font-size:9px;min-height:32px;margin:0}
}
@media(max-height:760px){
 .project-room:has(#entryLanding[hidden]){padding-top:21px;padding-bottom:18px}
 .project-room:has(#entryLanding[hidden]) .room-brand{margin-bottom:10px}.project-room:has(#entryLanding[hidden]) .room-entry-back{min-height:27px;margin-bottom:6px}
 .project-room .auth-card{padding-top:14px}.auth-card .room-form-heading{margin-bottom:11px}.auth-card .room-tabs{margin-bottom:12px}
 .project-room .account-role-choice{margin-bottom:12px}.account-role-choice legend{margin-bottom:6px}
 .project-room .auth-card label:not(.room-checkbox){margin-bottom:12px}.project-room .auth-card .room-primary{margin-bottom:7px}
}
/* The equalizer face now wears headphones, including before JavaScript opens the lab. */
.logo-headphones>rect{fill:#c5b1df;stroke:#9a7fbb;stroke-width:1.2}
.startup-card{padding:24px;max-width:100%;box-sizing:border-box}
.startup-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;margin-bottom:26px}
.startup-brand .brand-mark{width:108px;height:108px;filter:drop-shadow(0 5px 0 #d8cde65c)}
.startup-brand .brand-type{font-size:42px}.startup-brand .brand-tagline{font-size:.404em}
.startup-card>p{font-size:13px;color:#8b7d9b;margin-top:16px}
@media(max-width:540px){.startup-brand .brand-mark{width:92px;height:92px}.startup-brand .brand-type{font-size:34px}}
/* Equal-sized musical bars: no tall central stretch; only a gentle shared pulse. */
.brand-mark{overflow:visible}
.logo-headphones{transform-box:view-box;transform-origin:28px 27px;animation:jam-headphones-sway 4.8s ease-in-out infinite}
.logo-mouth{transform-box:fill-box;transform-origin:center;animation:jam-smile-breathe 4.8s ease-in-out infinite}
@keyframes jam-headphones-sway{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-.3px) rotate(.6deg)}}
@keyframes jam-smile-breathe{0%,100%{transform:scale(.985,.97)}50%{transform:scale(1.025,1.07)}}
@media(prefers-reduced-motion:reduce){.logo-headphones,.logo-mouth{animation:none}}
.brand-mark.is-rhythmic .logo-bar{animation:none;transform:translateY(calc(var(--logo-pulse)*-.6px)) scaleY(calc(1 + var(--logo-pulse)*.065))}
.brand-mark.is-rhythmic .logo-headphones{animation:none;transform:translateY(calc(var(--logo-pulse)*-.65px)) rotate(calc(var(--logo-sway)*1deg))}
.brand-mark.is-rhythmic .logo-mouth{animation:none;transform:scale(calc(1 + var(--logo-pulse)*.025),calc(1 + var(--logo-pulse)*.08))}
.brand-mark.is-rhythmic .logo-orbit{animation:none;transform:translateY(calc(var(--logo-pulse)*-1.3px)) rotate(calc(var(--logo-sway)*2deg))}
@media(prefers-reduced-motion:reduce){.brand-mark.is-rhythmic .logo-bar,.brand-mark.is-rhythmic .logo-headphones,.brand-mark.is-rhythmic .logo-mouth,.brand-mark.is-rhythmic .logo-orbit{animation:none;transform:none}}
.logo-bar{animation-duration:3s}
@keyframes jam-bounce{0%,100%{transform:translateY(0) scaleY(.97)}50%{transform:translateY(-.7px) scaleY(1.035)}}
.logo-orbit{transform-box:fill-box;transform-origin:center;animation:jam-orbit 4.8s ease-in-out infinite}
.logo-orbit-note{animation-delay:-1.6s}.logo-orbit-blocks{animation-delay:-3.2s}
@keyframes jam-orbit{0%,100%{transform:translateY(0) rotate(-3deg) scale(.98)}50%{transform:translateY(-2px) rotate(3deg) scale(1.03)}}
.brand .brand-mark{width:61px;height:61px}.room-brand .brand-mark{width:90px;height:90px}
.startup-brand .brand-mark{width:120px;height:120px}
@media(max-width:650px){.app-header .brand .brand-mark{width:42px;height:42px}.room-brand .brand-mark{width:65px;height:65px}.startup-brand .brand-mark{width:104px;height:104px}}
@media(prefers-reduced-motion:reduce){.logo-orbit{animation:none}}

/* Account home: music stays behind the dashboard until a project is opened. */
body.is-in-room>.app-header,body.is-in-room>.transport-bar,body.is-in-room>main{visibility:hidden}
.project-room.is-workspace{width:min(1080px,calc(100vw - 36px));padding:26px 30px;background:linear-gradient(140deg,#fffdf9,#fbf7ff 70%);max-height:calc(100dvh - 36px)}
.project-room.is-workspace .room-brand{justify-content:flex-start;margin-bottom:24px;gap:12px}
.project-room.is-workspace .room-brand .brand-mark{width:64px;height:64px}.project-room.is-workspace .room-brand .brand-type{font-size:36px}
.is-workspace .room-identity{padding:18px 20px;margin-bottom:24px;background:#eee7f7;border:1px solid #dcd0ed;border-radius:21px;gap:14px}
.is-workspace .room-identity strong{font-size:21px;color:#715793}.is-workspace .room-identity small{font-size:12px;color:#93809e}
.is-workspace .account-avatar .person{padding:0;background:none;border:0}.is-workspace .account-avatar .person-picture{width:62px;height:62px;border:2px solid white;box-shadow:0 3px 0 #d7c9e7;border-radius:20px;background:#b9a1d5;color:white;font-size:26px}
.is-workspace .room-identity button{padding:10px 12px;font-size:11px;background:#fff9ff;border-color:#dacbe9;color:#85669c}
.dashboard-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:26px;align-items:start}
.dashboard-sidebar{min-width:0;padding-right:24px;border-right:1px solid #e3dcea}.dashboard-content{min-width:0}
.dashboard-sidebar button{font-family:inherit;cursor:pointer}
.dashboard-section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:23px 0 12px}
.dashboard-section-title h2{font-size:14px;font-weight:750;color:#887097;margin:0}
.dashboard-section-title #createGroupChoice{background:#dff3e9;border:1px solid #acd7c4;color:#429b7c;width:35px;height:35px;border-radius:12px;box-shadow:0 2px 0 #c7e6d7}
.dashboard-section-title .icon-svg{width:20px;height:20px}
.dashboard-personal,.dashboard-join{display:flex;align-items:center;gap:10px;padding:12px 13px;width:100%;border:1px solid #ddd1ed;background:#f5edfc;color:#9372b1;border-radius:14px;font-size:12px;font-weight:750;text-align:left;min-height:46px}
.dashboard-personal .icon-svg,.dashboard-join .icon-svg{width:22px;height:22px;flex-shrink:0}
.dashboard-personal[aria-current=true]{background:#e7ddf4;border-color:#ac8cce;color:#79559f;box-shadow:0 2px 0 #d8c5e9}
.dashboard-join{margin-top:12px;background:#fff6df;border-color:#e8d79e;color:#ac8b48;box-shadow:0 2px 0 #f1e5c4}
.my-groups{display:flex;flex-direction:column;gap:8px}.my-groups:empty{min-height:20px}
.dashboard-group{display:grid;grid-template-columns:38px minmax(0,1fr);gap:0 10px;align-items:center;width:100%;padding:10px 11px;border:1px solid #e2dce8;background:#fff;color:#8c7a9c;border-radius:14px;text-align:left;min-height:58px;font-size:12px;font-weight:700}
.dashboard-group>.identity-picture{grid-row:1/3;width:36px;height:36px;background:#e0eee8;color:#6d9a86;border:1px solid #c8e1d6;border-radius:12px;font-size:17px}
.dashboard-group>span:nth-child(2){overflow-wrap:anywhere;line-height:1.45}.dashboard-group>small{font-size:9px;color:#a197a9;margin-top:3px;font-weight:500}
.dashboard-group[aria-current=true]{border-color:#62b196;background:#eaf8f1;color:#3d8d71;box-shadow:0 2px 0 #cae8da}
.dashboard-sidebar .classroom-entry{font-size:12px;margin-top:22px;background:#ebf0fd;border-color:#cdd8f0;color:#7187b0;min-height:46px}
.pending-group{padding:10px 12px;border:1px dashed #d7c5e6;border-radius:13px;margin-top:10px;background:#fbf6ff;font-size:11px;color:#9678ae;display:flex;flex-direction:column;gap:5px}.pending-group small{color:#ae9abb;font-size:10px}
.dashboard-content>.room-tabs{padding:4px;border:1px solid #ded2ec;border-radius:15px;background:#ede5f5;margin:0 0 19px}
.dashboard-content>.room-tabs>button[aria-selected=true]{border-radius:11px;background:#fff;color:#8860aa}
.dashboard-content .group-photo-row{margin-top:0;padding:14px}.dashboard-content .room-projects{max-height:none;overflow:visible;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.dashboard-content .room-projects>p{grid-column:1/-1}.dashboard-content .saved-project{padding:16px;border-color:#ded2eb;box-shadow:0 3px 0 #ede4f4;background:#fffefc}.dashboard-content .saved-project strong{font-size:14px;line-height:1.5}
.group-requests-panel{border:1px solid #c6dfd3;background:#f0faf4;padding:14px;border-radius:16px;margin:0 0 20px}.group-requests-panel h2{font-size:13px;color:#699981;margin:0 0 10px}.group-request{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px solid #dcece2}.group-request>span{flex:1;font-size:12px;color:#708e7d;overflow-wrap:anywhere}.group-request button{display:grid;place-items:center;width:37px;height:37px;border-radius:12px;border:1px solid #aed5c2;background:#dff3e8;color:#428f6d}.group-request button:last-child{background:#fff0f3;color:#b57388;border-color:#ebcbd6}.group-request svg{width:20px;height:20px}
.profile-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.profile-fields label{min-width:0}.profile-fields:has(label[hidden]){grid-template-columns:1fr}
.project-room #joinInvitationCode{font-size:22px;letter-spacing:.13em;text-transform:uppercase}.group-invite-details>strong{font-size:25px;letter-spacing:.06em}
.logo-orbit-spark{animation-delay:-2.4s}
/* Loading is counted work, with a quiet whole-logo pulse and no bar stretching. */
.startup-screen:not([hidden]) .brand-mark,.audio-load-status:not([hidden]) .brand-mark{animation:jam-loading-pulse 1.5s ease-in-out infinite}
@keyframes jam-loading-pulse{0%,100%{opacity:.58;filter:drop-shadow(0 2px 0 #d8cde640)}50%{opacity:1;filter:drop-shadow(0 3px 7px #bca5d955)}}
.startup-progress{display:flex;align-items:center;gap:13px;width:260px;max-width:100%;margin:18px auto 0}.startup-progress progress{appearance:none;flex:1;width:0;height:9px;border:0;border-radius:9px;overflow:hidden;background:#e9e2f0;accent-color:#a886c8}.startup-progress progress::-webkit-progress-bar{background:#e9e2f0}.startup-progress progress::-webkit-progress-value{background:linear-gradient(90deg,#cbb0e2,#83c6ad);border-radius:9px;transition:width .2s ease}.startup-progress output{font-size:12px;min-width:35px;color:#9681a7;font-weight:700;font-variant-numeric:tabular-nums}
.audio-load-status>div{grid-template-columns:70px 1fr auto;gap:8px 16px;width:min(350px,calc(100vw - 70px));padding:26px;border-color:#d9c8e9;background:#fffdf9f7}.audio-load-status .audio-loading-logo{width:65px;height:65px;grid-row:1/3;grid-column:1}.audio-load-status strong{grid-row:1;grid-column:2/-1;font-size:15px;color:#9275a7}.audio-load-status output{grid-row:2;grid-column:2;font-size:12px;color:#a295ad}.audio-load-percent{grid-row:2;grid-column:3;font-size:13px;font-weight:750;color:#9470b0;font-variant-numeric:tabular-nums}.audio-load-status progress{margin-top:10px}
@media(max-width:760px){
 .project-room.is-workspace{padding:22px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.dashboard-layout{grid-template-columns:190px minmax(0,1fr);gap:18px}.dashboard-sidebar{padding-right:17px}.dashboard-content .room-projects{grid-template-columns:1fr}.is-workspace .room-identity strong{font-size:18px}
}
@media(max-width:560px){
 .project-room.is-workspace{padding:20px 16px;border-radius:23px}.project-room.is-workspace .room-brand .brand-mark{width:48px;height:48px}.project-room.is-workspace .room-brand .brand-type{font-size:29px}.project-room.is-workspace .room-brand{margin-bottom:19px}
 .is-workspace .room-identity{flex-wrap:wrap;padding:13px;gap:10px;margin-bottom:18px}.is-workspace .room-identity>div{flex-basis:calc(100% - 67px)}.is-workspace .account-avatar .person-picture{width:47px;height:47px;border-radius:16px}.is-workspace .room-identity strong{font-size:18px}.is-workspace .room-identity button{font-size:10px;min-height:36px}
 .dashboard-layout{grid-template-columns:1fr;gap:20px}.dashboard-sidebar{padding:0 0 18px;border-right:0;border-bottom:1px solid #e3dcea}.dashboard-section-title{margin-top:17px}.my-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dashboard-group{padding:9px;grid-template-columns:30px minmax(0,1fr);gap:0 8px;font-size:11px}.dashboard-group>.identity-picture{width:29px;height:29px;font-size:14px;border-radius:10px}.dashboard-sidebar .classroom-entry{margin-top:13px}.dashboard-content .room-projects{grid-template-columns:1fr}.group-invite-details>strong{font-size:23px}.profile-fields{gap:9px}
}
@media(prefers-reduced-motion:reduce){.startup-screen:not([hidden]) .brand-mark,.audio-load-status:not([hidden]) .brand-mark{animation:none}.startup-progress progress::-webkit-progress-value{transition:none}}

.dashboard-content .saved-project-actions button{font-size:10px;min-width:0;gap:4px;padding:10px 4px;white-space:normal;line-height:1.4}.dashboard-content .saved-project-actions button svg{width:16px;height:16px}

.project-room.is-busy .room-brand .brand-mark{animation:jam-loading-pulse 1.5s ease-in-out infinite}
.dashboard-section-title #createGroupChoice{width:42px;height:42px}.group-request button{width:44px;height:44px}
@media(prefers-reduced-motion:reduce){.project-room.is-busy .room-brand .brand-mark{animation:none}}

/* Quiet entry forms: one line, meaningful photo tile, required fields only. */
.entry-divider{display:block;height:0;margin:21px 0;border-top:1px solid #e2d6ec;font-size:0}.entry-divider::before,.entry-divider::after{display:none}
.required-mark{display:inline;margin-left:4px;color:#d95c74;font-size:15px;font-weight:800;line-height:1}.required-mark[hidden]{display:none}
.photo-choice{margin:2px 0 16px}.project-room .photo-pick{display:flex;align-items:center;gap:13px;min-height:76px;width:100%;padding:12px 15px;border:1.5px dashed #d8bf87;border-radius:17px;background:#fff9e9;color:#a68b50;text-align:left;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;box-sizing:border-box}
.photo-thumb{display:grid;place-items:center;position:relative;width:48px;height:48px;flex:0 0 48px;border:1px solid #e2ce9f;border-radius:15px;background:#f4e8c8;color:#b99a57}.photo-thumb>.icon-svg,.photo-thumb>span>.icon-svg{width:25px;height:25px}.photo-thumb>i{position:absolute;right:-5px;bottom:-4px;display:grid;place-items:center;width:20px;height:20px;border:2px solid #fff9e9;border-radius:8px;background:#d6b56c;color:white;font-size:16px;font-style:normal;line-height:1}.photo-thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px}.photo-pick.has-photo .photo-thumb>i{z-index:1}.photo-pick:focus-visible{outline:3px solid #b59bd2;outline-offset:3px}
.project-room .photo-choice input[hidden]{display:none}.profile-settings .photo-choice{margin-top:15px}.project-room .field-caption{display:inline;line-height:1.4}
@media(max-height:760px){.project-room .photo-pick{min-height:61px;padding:9px 12px}.photo-thumb{width:39px;height:39px;flex-basis:39px;border-radius:12px}}
@media(max-height:760px){
 .auth-card .room-form-heading{margin-bottom:9px}.auth-card .room-tabs{margin-bottom:10px}
 .project-room .auth-card label:not(.room-checkbox){margin-bottom:10px}
 .auth-card .photo-choice{margin-top:0;margin-bottom:10px}.project-room .auth-card .photo-pick{min-height:54px;padding:7px 12px}
}

.note-grid.is-drawing,.note-grid.is-erasing{touch-action:none;cursor:crosshair}.note-grid.is-erasing .note-event{cursor:crosshair}.note-event.is-erase-target{opacity:.22;outline:2px dashed #d9798d;outline-offset:1px}
/* MIDI channels and harmony share the same calm, tactile library language. */
:root{--top-height:88px;--head-width:204px}
.track-header{padding:5px 9px 3px;display:flex;flex-direction:column;justify-content:center;gap:3px;overflow:hidden}
.track-title{min-height:22px;flex-shrink:0}.track-title input{font-size:12px}.track-title .track-icon,.track-title .instrument-picture{width:24px;height:24px;min-width:24px}
.track-controls{padding-left:0;margin:0;min-height:26px}.track-controls .mix-button{height:25px;width:25px;min-width:25px}.track-controls input[data-volume]{flex:1;min-width:25px}.track-controls small{display:none}
.track-voice{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;min-height:21px;flex-shrink:0;padding:1px 7px;border:1px solid color-mix(in srgb,var(--track-color) 27%,#e6e8ee);border-radius:7px;color:#69738c;background:color-mix(in srgb,var(--track-color) 7%,white);font:600 10px var(--font);text-align:left}
.track-voice>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-voice .key-caret{width:5px;height:5px;flex:0 0 5px;margin-right:3px}
#trackIconPicker{width:330px;max-width:calc(100vw - 16px);padding:14px;z-index:180;box-shadow:0 16px 45px #51486c24}
#trackIconPicker .picker-heading{justify-content:space-between;margin:0 0 8px}#trackIconPicker .picker-heading strong{font-size:17px;color:#65567d}
.voice-search{display:flex;align-items:center;gap:8px;border:1px solid #dcd5e9;border-radius:10px;padding:6px 9px;color:#a58bbe}.voice-search svg{width:19px;height:19px}.voice-search input{min-width:0;width:100%;border:0;background:transparent;outline:0;font:13px var(--font);color:#645b76}
.voice-options{max-height:min(390px,55dvh);overflow:auto;overscroll-behavior:contain;margin-top:10px}.voice-options section h3{display:flex;align-items:center;gap:7px;font-size:12px;color:#9581aa;margin:14px 0 6px}.voice-options h3 .instrument-picture{width:24px;height:24px}.voice-options button{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;min-height:36px;padding:6px 9px;border:0;border-left:3px solid color-mix(in srgb,var(--voice-color) 60%,white);border-radius:7px;background:transparent;color:#6c6881;font:12px var(--font);margin:2px 0}.voice-options button:hover,.voice-options button[aria-pressed=true]{background:color-mix(in srgb,var(--voice-color) 12%,white)}.voice-options button svg{width:17px;height:17px;color:var(--voice-color)}
.harmony-library{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:1px 3px 15px}.changes-heading{display:flex;align-items:center;justify-content:space-between;margin:5px 0 10px;color:#a598b3;font-size:11px}.changes-heading button{display:flex;align-items:center;gap:5px;border:1px solid #d9cfeb;border-radius:9px;background:#f0e9f9;padding:6px 9px;color:#8b68ae;font:600 12px var(--font)}.changes-heading svg{width:17px;height:17px}
.changes-card{position:relative;border:1px solid color-mix(in srgb,var(--genre-color) 33%,#e3ddeb);border-left:4px solid var(--genre-color);border-radius:14px;padding:10px;margin:8px 0;background:linear-gradient(135deg,color-mix(in srgb,var(--genre-color) 8%,white),#fff 80%);box-shadow:0 3px 0 #e9e5ee75;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}.changes-card.dragging{opacity:.5}.changes-card-title{display:flex;align-items:center;gap:6px}.changes-card-title .genre-badge{width:25px;height:25px;border-radius:8px;color:var(--genre-color);background:color-mix(in srgb,var(--genre-color) 13%,white)}.changes-card-title svg{width:19px;height:19px}.changes-card strong{flex:1;font-size:12px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#71617f}.changes-card button{display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--genre-color) 22%,white);background:white;border-radius:9px;color:var(--genre-color);width:30px;height:30px;flex:0 0 30px;padding:5px}.changes-card>small{display:block;font:11px var(--font);color:#a093af;margin:5px 0 9px}.changes-card-chords{display:flex;gap:4px;align-items:center}.changes-card .harmony-chip{padding:4px 5px;font-size:11px;min-width:0;flex:1;text-align:center}.changes-card .edit-changes{position:absolute;right:45px;top:10px}.changes-card:has(.edit-changes) strong{padding-right:25px}
.harmony-row{height:40px;display:flex;position:relative;background:#faf8ff;border-bottom:1px solid #d9d3e5;touch-action:none}.measure-chord{height:40px;flex-shrink:0;border:0;border-left:1px solid #e4ddec;border-radius:0;background:transparent;padding:6px 3px;color:color-mix(in srgb,var(--pitch-color) 78%,#5f526e);font:600 12px var(--font);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;cursor:pointer}.measure-chord:hover{background:color-mix(in srgb,var(--pitch-color) 12%,white)}.measure-chord.is-sounding{background:color-mix(in srgb,var(--pitch-color) 16%,white);box-shadow:inset 0 -3px color-mix(in srgb,var(--pitch-color) 65%,transparent),inset 0 0 14px color-mix(in srgb,var(--pitch-color) 18%,transparent)}
.harmony-drop{position:absolute;inset-block:0;display:flex;align-items:center;justify-content:space-around;z-index:20;border:2px dashed #aa89c7;background:#faf5ffe8;border-radius:8px;pointer-events:none;box-sizing:border-box}.harmony-drop .harmony-chip{flex:1;text-align:center;margin:3px}
.bar-chord-picker{position:fixed;width:270px;padding:14px;border:1px solid #ddd1eb;border-radius:18px;background:#fffdff;z-index:185;box-shadow:0 18px 60px #5041642a}.bar-chord-picker .picker-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:15px;color:#78628f}.chord-roots{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.chord-roots button{display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid #e7dfed;border-radius:9px;min-height:36px;background:white;color:#7f728f;font:600 13px var(--font)}.chord-roots button i{width:7px;height:7px;border-radius:50%;background:var(--pitch-color)}.chord-roots button[aria-pressed=true]{background:color-mix(in srgb,var(--pitch-color) 17%,white);border-color:var(--pitch-color)}.bar-chord-picker select{width:100%;border:1px solid #dcd3e6;border-radius:9px;background:#f6f2fa;color:#766782;padding:9px;font:13px var(--font);margin:10px 0}.apply-chord{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;border:1px solid #90bbaa;border-radius:10px;background:#5caa92;color:white;padding:8px;font:600 13px var(--font)}.apply-chord svg{width:18px;height:18px}
.custom-changes-dialog{border:1px solid #e3d8ef;border-radius:23px;padding:24px;width:min(560px,calc(100vw - 28px));max-height:90dvh;overflow:auto;background:#fffcff;color:#776887;box-shadow:0 24px 80px #4433552b}.custom-changes-dialog::backdrop{background:#49425b55;backdrop-filter:blur(6px)}.custom-changes-dialog form{display:grid;gap:14px}.custom-changes-dialog .picker-heading{display:flex;align-items:center;justify-content:space-between}.custom-changes-dialog h2{font-size:20px;margin:0}.custom-changes-dialog label{display:grid;gap:5px;font-size:12px}.custom-changes-dialog input,.custom-changes-dialog select{min-width:0;width:100%;box-sizing:border-box;border:1px solid #dfd4e9;border-radius:10px;background:white;padding:10px;color:#766583;font:13px var(--font)}.custom-chord-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.custom-chord-grid>div{display:grid;gap:7px;padding:10px 7px;border:1px solid #e3d9eb;border-radius:13px;background:color-mix(in srgb,var(--pitch-color) 8%,white)}.custom-chord-grid strong{text-align:center;color:var(--pitch-color)}.custom-chord-grid select{padding:8px 3px;font-size:11px}.custom-changes-dialog footer{display:flex;justify-content:flex-end;gap:8px}.custom-changes-dialog footer button{display:flex;align-items:center;gap:6px;border:1px solid #c9b7dc;border-radius:10px;background:#a187bc;color:white;padding:9px 14px;font:600 13px var(--font)}.custom-changes-dialog footer svg{width:19px;height:19px}.custom-changes-dialog [role=status]:empty{display:none}
@media(max-width:760px){:root{--head-width:178px}.library-tabs{margin-bottom:7px}.harmony-library{display:flex;gap:8px;overflow:auto;max-height:180px;padding-bottom:9px}.harmony-library .changes-heading{min-width:100px;flex:0 0 100px;flex-direction:column;justify-content:center;gap:8px}.changes-card{flex:0 0 210px;margin:2px 0}.custom-chord-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.track-title input{font-size:11px}.measure-chord{font-size:11px}.track-voice{font-size:9px}}
@media(max-width:760px){.changes-card{touch-action:pan-x}}
.measure-chord{font-size:11px;letter-spacing:-.2px;padding-left:2px;padding-right:2px}

/* Four-bar harmony clips share a clear outline and a quiet drag handle. */
.harmony-row{height:52px;user-select:none;-webkit-user-select:none}
.measure-chord{height:52px}.measure-chord.in-sequence{padding-top:21px;padding-bottom:3px;cursor:grab}
.harmony-region{position:absolute;top:1px;bottom:2px;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--sequence-color) 62%,#dcd2e9);border-top-width:2px;border-radius:7px;pointer-events:none;z-index:2}
.harmony-region>button{position:absolute;top:0;left:0;width:100%;height:18px;display:flex;align-items:center;gap:5px;padding:0 5px;border:0;border-radius:5px 5px 0 0;background:color-mix(in srgb,var(--sequence-color) 12%,#faf8ff);color:#89759c;font:600 9px var(--font);cursor:grab;pointer-events:auto;text-align:left;touch-action:none}
.harmony-region>button>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sequence-grip{font:13px Arial,sans-serif;opacity:.65;flex-shrink:0}
.harmony-region.is-selected{border-color:#a17abc;box-shadow:0 0 0 1px #bda6d455}.harmony-region.is-selected>button{background:#e9def4;color:#735589}
.harmony-region.dragging{opacity:.35}.harmony-drop{z-index:5}.harmony-context-menu{z-index:1260;border-color:#e0d3ed;background:#fffcff}.harmony-context-menu .context-menu-item{min-height:44px;color:#806a98}.harmony-context-menu .context-menu-item>svg{color:#a184b9}.harmony-context-menu .context-menu-item.danger{color:#c36c88}

.sequence-grip .icon-svg{display:block;width:10px;height:12px}

/* One shared genre and one open collection, on every screen size. */
.studio-shell{grid-template-columns:250px minmax(0,1fr)}
.library{padding:14px 12px 0;min-width:0}.library-heading{margin-bottom:10px;padding:0 1px;min-height:32px}.library-heading h1{font-size:16px;letter-spacing:-.3px}.library-heading .library-emblem{display:none}.library-heading .sound-count{display:none}
.library-content{gap:0;overflow:hidden}.library-content>.genre-selector{margin:0 0 10px;flex-shrink:0}.genre-trigger{height:52px;min-height:52px;gap:10px;padding:7px 10px;border-radius:13px}.genre-choice{display:grid;gap:1px;flex:1;text-align:left;min-width:0}.genre-choice small{font-size:10px;line-height:1.1;font-weight:500;opacity:.75}.genre-choice strong{font-size:15px;line-height:1.4;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.genre-trigger>.genre-badge{width:32px;height:32px;flex-basis:32px;border-radius:9px}.genre-trigger>.genre-badge svg{width:23px;height:23px}
.library-sections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:10px;flex-shrink:0}.library-sections>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;width:100%;min-height:64px;padding:6px 3px;border:1px solid #e5dfec;border-radius:11px;background:#fcfaff;color:#9b8aa9;font:inherit;cursor:pointer}.library-sections .section-symbol{display:flex;align-items:center;justify-content:center;gap:4px;height:20px}.section-symbol>svg{width:19px;height:19px}.library-sections strong{font-size:10px;font-weight:650;line-height:1.2;min-height:24px;display:flex;align-items:center;justify-content:center;max-width:100%;text-align:center}.library-sections [data-section-count]{font-size:8px;opacity:.8;font-variant-numeric:tabular-nums}.library-sections>button[aria-selected=true]{border-color:var(--section-color);background:color-mix(in srgb,var(--section-color) 23%,white);color:var(--section-ink);box-shadow:0 2px 0 color-mix(in srgb,var(--section-color) 55%,white)}.library-sections>button:focus-visible{outline:2px solid #b19aca;outline-offset:2px}

.pattern-library-panel{display:flex;flex-direction:column;min-height:0;flex:1}.pattern-library-panel>.category-selector{margin:0 0 8px;flex-shrink:0}.pattern-library-panel .category-trigger{height:39px;min-height:39px;padding:5px 9px;gap:8px;border-radius:10px}.pattern-library-panel .selected-category-icon{width:25px;height:25px;flex-basis:25px;border-radius:7px}.pattern-library-panel .selected-category-icon svg{width:23px;height:23px}.pattern-library-panel #selectedCategoryName{font-size:13px}.pattern-library-panel .search{min-height:34px;margin:0;padding:5px 9px;flex-shrink:0;border-radius:10px}.pattern-library-panel .search input{font-size:11px}.pattern-library-panel .filter-line{margin:7px 1px;font-size:10px;flex-shrink:0}.pattern-library-panel .filter-line>span{display:none}.pattern-library-panel .filter-line select{max-width:100%;width:100%;font-size:10px}.pattern-library-panel .loop-list{flex:1;min-height:0}
.library-content>.harmony-library{display:block;overflow:auto;flex:1;min-height:0;max-height:none;padding:0 1px 12px}.harmony-library .changes-heading{margin:0 0 8px}.harmony-library .changes-card{margin:0 0 8px;flex:initial;width:auto}.changes-card strong{font-size:13px}.changes-card .harmony-chip{padding:4px 3px;font-size:11px}
.library-collapsed .library{padding:14px 9px 0}.library-collapsed .library-content{display:none}
.bar-chord-picker{width:min(294px,calc(100vw - 16px));box-sizing:border-box;padding:14px}.bar-chord-picker .picker-heading>span{display:flex;align-items:center;gap:10px}.bar-chord-picker .picker-heading small{font-size:11px;font-weight:500;color:#a092ac}.bar-chord-picker .picker-heading strong{padding:5px 10px;border-radius:9px;background:color-mix(in srgb,var(--pitch-color) 15%,white);font-size:20px;color:#6c5c7b}.chord-qualities{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;border-top:1px solid #ede4f2;margin-top:11px;padding-top:11px}.chord-qualities button{display:grid;align-content:center;justify-items:center;gap:3px;min-height:47px;padding:5px 1px;border:1px solid #e7dfec;border-radius:9px;background:#fff;color:#9781a8;font:inherit}.chord-qualities button strong{font-size:15px;font-weight:700}.chord-qualities button span{font-size:8px;white-space:nowrap}.chord-qualities button[aria-pressed=true]{background:#eee3f7;border-color:#b697ce;color:#76518e}
@media(max-width:760px){
 .library{padding:9px 11px 8px;min-height:0;max-height:none}.library-heading{min-height:28px;margin-bottom:7px}.library-heading h1{font-size:13px}.library-toggle{height:28px;width:32px;flex-basis:32px}.library-content{display:grid;grid-template-columns:minmax(110px,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto;column-gap:8px;overflow:visible;flex:none}.library-content>.genre-selector{grid-column:1;grid-row:1;margin:0}.genre-trigger{height:72px;min-height:72px;padding:7px;gap:6px}.genre-trigger>.genre-badge{width:26px;height:26px;flex-basis:26px}.genre-choice strong{font-size:13px}.genre-choice small{font-size:9px}.library-sections{grid-column:2;grid-row:1;gap:4px;margin:0}.library-sections>button{min-height:34px;padding:4px 7px}.library-sections strong{font-size:11px}.library-content>.pattern-library-panel,.library-content>.harmony-library{grid-column:1/-1;grid-row:2;margin-top:8px}.pattern-library-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:7px}.pattern-library-panel>.category-selector{grid-column:1;grid-row:1;margin:0}.pattern-library-panel .category-trigger{height:34px;min-height:34px}.pattern-library-panel>.search{grid-column:2;grid-row:1}.pattern-library-panel>.filter-line{display:none}.pattern-library-panel>.loop-list{grid-column:1/-1;grid-row:2;display:flex;flex:initial;height:113px;max-height:113px;min-height:113px;margin-top:7px;padding-bottom:4px;overflow-x:auto;overflow-y:hidden}.pattern-library-panel .loop-card{flex:0 0 190px;min-width:190px;max-height:108px}.library-content>.harmony-library{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;max-height:147px;padding:1px 0 4px}.harmony-library>.changes-heading{flex:0 0 78px;display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0;margin:0}.harmony-library>.changes-heading>span{font-size:10px}.harmony-library .changes-heading button{font-size:10px;padding:6px}.harmony-library .changes-card{flex:0 0 196px;box-sizing:border-box;min-width:196px;max-height:138px;margin:0;padding:8px}.harmony-library .library-more{flex:0 0 120px}.library-content.sections-closed{grid-template-rows:auto}.library-collapsed .library{padding:7px 11px}.library-collapsed .library-heading{margin:0}
}
@media(prefers-reduced-motion:reduce){.section-caret svg{transition:none}}

.pattern-library-panel #categorySelect.category-trigger{height:39px;min-height:39px}
.bar-chord-picker{max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain}
@media(max-width:760px){.pattern-library-panel #categorySelect.category-trigger{height:34px;min-height:34px}.library-toggle>.icon-svg{transform:rotate(90deg)}}
@media(max-width:760px){
 .library-content{display:flex;flex-direction:column;gap:0}.library-content>.genre-selector{width:100%;margin:0 0 6px}.genre-trigger{height:42px;min-height:42px;padding:5px 9px}.genre-choice strong{font-size:14px}.library-sections{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0}.library-content>.pattern-library-panel,.library-content>.harmony-library{flex:none;margin-top:8px}.library-content.sections-closed{gap:0}
}

/* Complete MIDI ideas remain visually distinct from four harmony chips. */
.idea-voices{display:grid;gap:3px;margin:9px 0 5px}.idea-voice{display:flex;align-items:center;gap:7px;min-height:18px;color:var(--voice-color);background:color-mix(in srgb,var(--voice-color) 7%,white);border-radius:5px;padding:1px 4px}.idea-voice>.instrument-picture{display:block;flex:0 0 19px;width:19px;height:19px}.idea-voice .instrument-svg{width:19px;height:19px}.idea-voice>.piano-mini{display:block;flex:1;width:0;height:17px;min-width:0}.idea-footer{display:flex;align-items:center;justify-content:space-between;color:#a093ae;font-size:9px}.idea-footer button{width:28px;height:28px;flex-basis:28px}.idea-footer button svg{width:18px;height:18px}.idea-card.is-previewing{box-shadow:0 0 9px color-mix(in srgb,var(--genre-color) 30%,transparent);border-color:var(--genre-color)}.idea-drop-label{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#9273ad}.idea-drop-label svg{width:22px;height:22px}
@media(max-width:760px){.library-sections>button{min-height:54px;gap:3px;padding:5px 6px}.library-sections strong{font-size:11px;min-height:14px}.library-content>.ideas-library{max-height:184px}.ideas-library .idea-card{flex-basis:202px;min-width:202px;max-height:177px}.idea-voices{gap:2px;margin:6px 0 3px}.idea-voice{min-height:16px}.idea-voice>.instrument-picture,.idea-voice .instrument-svg{width:17px;height:17px;flex-basis:17px}.idea-voice>.piano-mini{height:15px}.idea-footer button{height:25px;width:25px;flex-basis:25px}}

/* Each collection has its own color, independent of genre and instrument. */
.harmony-region{border-style:dashed;border-width:1.5px}
.harmony-region.is-default{border-color:#c3b4d1;background:#f6f1fb35}
.harmony-region>[data-sequence-handle]{height:20px;padding-right:24px}
.harmony-region>.sequence-dice{left:auto;right:2px;top:1px;width:19px;height:19px;padding:1px;justify-content:center;border:1px solid #dfd3ea;border-radius:6px;background:#fffcff;color:#a58abb;cursor:pointer;box-shadow:0 1px 2px #8a6c9910;touch-action:manipulation}
.sequence-dice .icon-svg{width:16px;height:16px;flex:none}
.sequence-dice:before{content:'';position:absolute;inset:-3px}
.harmony-region>.sequence-dice.is-rolling{animation:sequence-dice-roll .45s ease-in-out both;opacity:1}
@keyframes sequence-dice-roll{0%{transform:rotate(0)}30%{transform:translateY(-1px) rotate(115deg)}65%{transform:translateY(-1px) rotate(265deg)}100%{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.harmony-region>.sequence-dice.is-rolling{animation:none}}
.harmony-region>.sequence-dice:hover{background:#eee4f8;color:#8963a5}
.harmony-region>.sequence-dice:focus-visible{outline:2px solid #a883c0;outline-offset:1px}
.track-title .track-color{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;padding:4px;border:1px solid color-mix(in srgb,var(--track-color) 32%,white);border-radius:8px;background:color-mix(in srgb,var(--track-color) 9%,white);color:var(--track-color);cursor:pointer}
.track-title .track-color .icon-svg{width:17px;height:17px}
.track-title input{width:0;flex:1;min-width:0}
.voice-category{margin:4px 0;border:1px solid color-mix(in srgb,var(--voice-color) 23%,#e5e0ec);border-radius:10px;overflow:hidden;background:#fff}
.voice-category>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;padding:8px;min-height:40px;color:color-mix(in srgb,var(--voice-color) 75%,#655a75);background:color-mix(in srgb,var(--voice-color) 8%,white);font-size:12px;font-weight:650}
.voice-category>summary::-webkit-details-marker{display:none}
.voice-category>summary>.instrument-picture{width:24px;height:24px;flex:0 0 24px}
.voice-category>summary>span:not(.instrument-picture):not(.voice-category-caret){flex:1}
.voice-category-caret{display:grid;place-items:center}.voice-category-caret .icon-svg{width:15px;height:15px}
.voice-category[open] .voice-category-caret{transform:rotate(180deg)}
.voice-category-options{padding:3px 5px}.voice-options .voice-category-options button{min-height:38px;margin:1px 0;border-left-width:2px}
.voice-empty{font-size:12px;color:#9b8aa9;text-align:center;padding:15px}
.library-sections>button{border-color:color-mix(in srgb,var(--section-color) 35%,white);background:color-mix(in srgb,var(--section-color) 9%,white);color:var(--section-ink)}
.idea-voice[data-idea-part]{min-height:20px;cursor:grab;border:1px solid transparent}
.idea-voice[data-idea-part]:hover{border-color:color-mix(in srgb,var(--voice-color) 30%,white);background:color-mix(in srgb,var(--voice-color) 11%,white)}
.idea-voice.dragging{opacity:.45}
.idea-voice>.idea-part-add{flex:0 0 20px;width:20px;height:20px;padding:2px;border-radius:6px;border-color:color-mix(in srgb,var(--voice-color) 25%,white);color:var(--voice-color)}
.idea-part-add .icon-svg{width:14px;height:14px}
.library-sections [data-library-tab=patterns]{--section-color:#6b9fc4;--section-ink:#467899}
.library-sections [data-library-tab=harmony]{--section-color:#ad83c6;--section-ink:#86569e}
.library-sections [data-library-tab=ideas]{--section-color:#d5a654;--section-ink:#a17529}
.library-sections>button:focus-visible{outline-color:var(--section-color)}

/* A ready idea is selected across all its instrument lanes. */
.app-copyright{position:fixed;inset:auto 0 0;z-index:30;box-sizing:border-box;min-height:24px;display:flex;align-items:center;justify-content:center;padding:4px 12px;border-top:1px solid #e8e3ef;background:#f7f8fd;color:#7d758b;font-size:10px;line-height:15px;text-align:center}
.studio-shell{height:calc(100dvh - var(--studio-top,158px) - 24px)}
.project-room::backdrop{bottom:24px}
.clip.idea-selected{outline:2px solid #a287bc;outline-offset:2px;box-shadow:0 0 0 4px #b59ac51c;z-index:5}
.clip.idea-selected.dragging{box-shadow:0 5px 14px #886a9c26}
#selectIdea.idea-selection-toggle{display:flex;align-items:center;justify-content:center;gap:5px;width:auto;min-width:72px;padding:5px 9px;border:1px solid #e3d5bd;border-radius:10px;background:#fffaf0;color:#ad8b53;font:inherit;font-size:11px;white-space:nowrap}
#selectIdea>.icon-svg,#selectIdea>span>.icon-svg{width:18px;height:18px}
#selectIdea[aria-pressed=true]{background:#f7e8c8;border-color:#d3b16c;color:#997234;box-shadow:0 2px 0 #e9d7b450}
@media(max-width:760px){#selectIdea.idea-selection-toggle{min-width:58px;padding:4px 6px;font-size:10px;gap:3px}}
@media(max-width:760px){
 .arrangement-heading:has(#clipActions:not([hidden])){flex-wrap:wrap;row-gap:5px;padding-block:6px}
 .arrangement-heading:has(#clipActions:not([hidden])) .clip-actions{flex:0 0 auto}
 .arrangement-heading:has(#clipActions:not([hidden])) .timeline-tools{flex:0 0 100%;justify-content:flex-end}
}

/* All phrase families remain visible; only the expanded family renders scores. */
.library-sections strong{display:block;min-height:26px;font-size:9.5px;line-height:1.35;font-weight:650;text-wrap:balance}
.library-sections [data-library-tab=harmony] strong{font-size:8.6px;letter-spacing:-.15px}
.pattern-library-panel>.category-selector,.pattern-library-panel>.filter-line{display:none}
.pattern-library-panel>.loop-list{display:block;overflow-x:hidden;overflow-y:auto;max-height:none;padding:0 2px 12px;margin-top:9px;scrollbar-gutter:stable}
.phrase-category{margin-bottom:6px;border:1px solid color-mix(in srgb,var(--family-color) 25%,#e9e3ef);border-radius:11px;overflow:hidden;background:white}
.phrase-category>h2{margin:0;font-size:inherit}
.phrase-category>h2>button{display:flex;align-items:center;gap:7px;min-height:41px;width:100%;padding:6px 7px;border:0;border-radius:0;background:color-mix(in srgb,var(--family-color) 8%,white);color:color-mix(in srgb,var(--family-color) 68%,#5c536a);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
.phrase-category.is-open>h2>button{background:color-mix(in srgb,var(--family-color) 15%,white)}
.phrase-category>h2>button:focus-visible{outline:2px solid var(--family-color);outline-offset:-3px}
.phrase-category>h2 .instrument-picture{flex:0 0 26px;width:26px;height:26px}
.phrase-category>h2 .instrument-svg{width:26px;height:26px}
.phrase-family-name{flex:1;min-width:0;font-size:12px;font-weight:650}
.phrase-category>h2 small{font-size:9px;opacity:.7;font-variant-numeric:tabular-nums}
.phrase-family-caret{display:grid;place-items:center;flex:0 0 15px}
.phrase-family-caret svg{width:14px;height:14px;transition:transform .15s}
.phrase-category.is-open .phrase-family-caret svg{transform:rotate(180deg)}
.phrase-category-clips{padding:6px 5px 1px;max-height:150px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--family-color) 30%,white) transparent}
.phrase-category-clips .loop-card{padding:8px 7px 6px;margin-bottom:6px;border-color:color-mix(in srgb,var(--family-color) 16%,white)}
.phrase-category-clips .library-more{width:100%;font-size:11px;margin-bottom:5px}
@media(max-width:760px){
 .library-sections strong{min-height:28px;font-size:11px;line-height:1.25}
 .library-sections [data-library-tab=harmony] strong{font-size:10px;letter-spacing:0}
 .pattern-library-panel{display:flex;flex-direction:column}
 .pattern-library-panel>.search{width:100%;box-sizing:border-box}
 .pattern-library-panel>.loop-list{height:192px;min-height:0;max-height:192px;flex:none;margin-top:7px;overflow-y:auto;overflow-x:hidden}
 .phrase-category{margin-bottom:5px}
 .phrase-category>h2>button{min-height:39px;padding:5px 8px}
 .phrase-family-name{font-size:12px}
 .phrase-category-clips{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;max-height:117px;padding:6px}
 .pattern-library-panel .phrase-category-clips .loop-card{flex:0 0 188px;min-width:188px;width:188px;max-height:108px;margin:0;box-sizing:border-box}
 .phrase-category-clips .library-more{flex:0 0 120px;min-width:120px;margin:0}
 .library-content>.ideas-library{max-height:211px}
 .ideas-library .idea-card{max-height:none;min-height:193px}
}
@media(prefers-reduced-motion:reduce){.phrase-family-caret svg{transition:none}}

/* Header motion keeps one clock through Play/Stop instead of restarting. */
.brand-mark.is-motion-driven .logo-bar{animation:none;transform:translateY(calc(var(--logo-bar-y,0)*1px)) scaleY(var(--logo-bar-scale,1))}
.brand-mark.is-motion-driven .logo-headphones{animation:none;transform:translateY(calc(var(--logo-head-y,0)*1px)) rotate(calc(var(--logo-head-rotate,0)*1deg))}
.brand-mark.is-motion-driven .logo-mouth{animation:none;transform:scale(var(--logo-mouth-x,1),var(--logo-mouth-y,1))}
.brand-mark.is-motion-driven .logo-orbit{animation:none;transform:translateY(calc(var(--logo-orbit-y,0)*1px)) rotate(calc(var(--logo-orbit-rotate,0)*1deg)) scale(var(--logo-orbit-scale,1))}
@media(prefers-reduced-motion:reduce){.brand-mark.is-motion-driven .logo-bar,.brand-mark.is-motion-driven .logo-headphones,.brand-mark.is-motion-driven .logo-mouth,.brand-mark.is-motion-driven .logo-orbit{transform:none}}
/* A shorter score strip keeps the next instrument families in view. */
.phrase-category-clips{max-height:94px;padding:4px 5px}
.phrase-category-clips .loop-card{display:grid;grid-template-columns:minmax(0,1fr) 32px;grid-template-rows:auto auto;padding:6px 7px;gap:3px 6px;margin-bottom:5px}
.phrase-category-clips .loop-card-head{grid-column:1;grid-row:1;gap:5px;min-width:0}
.phrase-category-clips .sample-symbol{display:none}
.phrase-category-clips .sample-name{font-size:11px}
.phrase-category-clips .sample-preview{width:29px;height:29px;border-radius:9px}
.phrase-category-clips .sample-meta{grid-column:1;grid-row:2;margin:0;min-width:0;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phrase-category-clips .sample-wave{display:contents}
.phrase-category-clips .sample-wave>.piano-mini{grid-column:1;grid-row:3;height:20px;width:100%}
.phrase-category-clips .sample-add{grid-column:2;grid-row:1/4;align-self:center;width:31px;height:38px;border-radius:10px}
.phrase-category-clips .sample-preview{margin-left:auto}
@media(max-width:760px){
 .pattern-library-panel>.loop-list{height:184px;max-height:184px}
 .phrase-category-clips{max-height:87px;padding:4px;gap:6px}
 .pattern-library-panel .phrase-category-clips .loop-card{max-height:none;min-height:76px;width:188px;flex-basis:188px;padding:5px 7px;gap:1px 5px}
}

.measure-chord{cursor:copy}.measure-chord.dragging{opacity:.4}.harmony-drop.is-single-chord{border-radius:7px;background:#f4edffec}.harmony-drop.is-single-chord .harmony-chip{margin:2px;min-width:0}

/* Opening a family focuses its full available area; closing restores the tree. */
.pattern-library-panel>.loop-list.has-open-family{display:flex;flex-direction:column;overflow:hidden}
.has-open-family>.phrase-category.is-open{display:flex;flex-direction:column;flex:1;min-height:0;margin:0}
.has-open-family>.phrase-category.is-open>h2{flex:none}
.has-open-family .phrase-category-clips{display:block;flex:1;min-height:0;max-height:none;overflow:auto}
.has-open-family .phrase-family-caret svg{transform:none}
@media(max-width:760px){
 .pattern-library-panel>.loop-list.has-open-family{height:clamp(212px,36dvh,320px);max-height:none}
 .has-open-family .phrase-category-clips{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,minmax(0,1fr));grid-auto-columns:188px;gap:6px;overflow-x:auto;overflow-y:hidden}
 .pattern-library-panel .has-open-family .phrase-category-clips .loop-card{width:188px;min-width:188px;min-height:0;height:100%;margin:0;box-sizing:border-box}
 .has-open-family .phrase-category-clips .library-more{width:120px;min-width:0}
}
@media(max-width:760px) and (max-height:740px){.has-open-family .phrase-category-clips{grid-template-rows:repeat(2,minmax(0,1fr))}}

/* One lightweight image per instrument family, shared by library, tracks and
   clips. Never let the decorative picture intercept a tablet gesture. */
.instrument-artwork{display:block;object-fit:contain;aspect-ratio:1;pointer-events:none;user-select:none;-webkit-user-drag:none;flex-shrink:0}
.instrument-picture>.instrument-artwork{width:100%;height:100%;max-width:none}

/* r173: one locally hosted Greek/Latin family, calmer spacing and clear figures. */
body{font-size:14px;font-weight:500}
button,input,select,textarea{font-family:var(--font)}
h1,h2,h3{font-weight:750;letter-spacing:-.025em}
.library-heading h1{font-size:17px;letter-spacing:-.2px}
.track-title input{font-size:13px;font-weight:650;letter-spacing:0}
.clip-title{font-size:12px;font-weight:600;letter-spacing:0}
.transport-bar .musical-position>strong,.transport-bar .clock-position>strong,.tempo-control>button strong,.tempo-panel output,.tempo-panel #bpm{font-family:var(--font);font-weight:750;font-style:normal;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.ruler-bar{font-family:var(--font);font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
.counter-caption,.tempo-limits,.clock-position .total-time,#projectLength{font-family:var(--font);font-variant-numeric:tabular-nums}
.ui-artwork{display:block;object-fit:contain;aspect-ratio:1;pointer-events:none;user-select:none;-webkit-user-drag:none;flex-shrink:0}
.art-turned-right{transform:rotate(180deg)}.art-turned-down{transform:rotate(-90deg)}.art-mirrored{transform:scaleX(-1)}
.dice-artwork{display:block;position:relative;aspect-ratio:1;pointer-events:none;flex-shrink:0}
.dice-artwork>.ui-artwork{display:block;width:100%;height:100%}.dice-pips{position:absolute;inset:15% 19% 21% 15%;pointer-events:none}.dice-pips i{position:absolute;left:var(--pip-x);top:var(--pip-y);width:14%;height:14%;border-radius:50%;transform:translate(-50%,-50%);background:#544391;box-shadow:inset 0 .4px .8px #2c225d66}
.project-room .room-entry .ui-artwork{width:25px;height:25px}.room-form-heading .ui-artwork{width:29px;height:29px}
.note-editor-tools .ui-artwork,.note-finish .ui-artwork{width:23px;height:23px}.sample-preview .ui-artwork,.idea-preview .ui-artwork,.changes-preview .ui-artwork{width:21px;height:21px}
.genre-symbol.ui-artwork{object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.note-piano-key .drum-symbol.ui-artwork{width:25px;height:25px;flex-shrink:0}