/* greek-ext */
@font-face {
  font-family: 'Ubuntu Sans';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(./assets/fonts/ubuntu-sans-greek-ext-v1.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: 'Ubuntu Sans';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(./assets/fonts/ubuntu-sans-greek-v1.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* latin-ext */
@font-face {
  font-family: 'Ubuntu Sans';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(./assets/fonts/ubuntu-sans-latin-ext-v1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Ubuntu Sans';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(./assets/fonts/ubuntu-sans-latin-v1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* The note sheet is a small, separate workspace; the arrangement keeps waves. */
.notes-button{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:10px;background:#eef0ff;color:#6165b5;font-weight:700;font-size:11px}
.notes-button svg{width:17px;height:17px}
dialog.note-editor{--editor-color:#e9b84b;--note-row:28px;width:min(1100px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:1px solid #e6eaf3;border-radius:24px;background:#fff;color:var(--ink);box-shadow:0 24px 90px #293d6533;overflow:hidden}
.note-editor::backdrop{background:#27395666;backdrop-filter:blur(5px)}
.note-editor[open]{display:flex;flex-direction:column}
.note-editor-heading{display:flex;align-items:center;gap:13px;padding:20px 24px 14px;flex-shrink:0;position:relative;z-index:10}
.note-editor-symbol{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:color-mix(in srgb,var(--editor-color) 16%,white);color:var(--editor-color)}
.note-editor-symbol .instrument-picture{width:38px;height:38px}
.note-editor-heading h2{margin:0;font-size:21px;letter-spacing:-.7px}
.note-editor-heading p{margin:6px 0 0;color:#8390a2;font-size:11px}
.note-zoom{margin-left:auto;position:relative}
.note-zoom>.icon-button{background:#f1f3fb;color:#7484a9}
.note-zoom>.icon-button[aria-expanded=true]{background:#e7e5ff;color:#6553bb}
.note-zoom-panel{position:absolute;top:48px;right:0;width:246px;padding:18px;border-radius:17px;border:1px solid #e4e8f3;background:white;box-shadow:0 12px 36px #33445b29}
.note-zoom-panel label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#6c7a99;margin-bottom:12px}
.note-zoom-panel input{width:100%;height:30px;accent-color:#7a83d6}
.note-zoom-panel>button{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:36px;background:#f1f3fb;border-radius:11px;font-size:11px;font-weight:700;color:#7181a2}
.note-zoom-panel>button svg{width:17px;height:17px}
.note-editor-tools{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:0 24px 16px;flex-shrink:0}
.note-tool{display:flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 12px;border-radius:13px;background:#f1f3fb;color:#66769b;font-size:11px;font-weight:700;white-space:nowrap}
.note-tool svg{width:17px;height:17px}
.note-tool[aria-pressed=true]{background:#e7e5ff;color:#6553bb;box-shadow:inset 0 0 0 1.5px #aa9cdb}
.note-tool#notePaste[aria-pressed=true]{background:#e4f6ec;color:#267858;box-shadow:inset 0 0 0 1.5px #8bc5a5}
.note-select-symbol{width:16px;height:15px;border:1.5px dashed currentColor;border-radius:3px}
.note-listen{display:flex;align-items:center;justify-content:center;gap:9px;min-width:100px;height:40px;border-radius:13px;background:#e9f7f1;color:#23886e;font-weight:700}
.note-listen svg{width:17px;height:17px}
.note-editor-tools>.icon-button{height:40px;width:40px;background:#f3f5fb;border-radius:13px}
.note-editor-hint{margin-left:auto;font-size:11px;color:#8390a2}
.note-scroll{position:relative;margin:0 24px;overflow:auto;overscroll-behavior:contain;overflow-anchor:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;border:1px solid #e1e7f2;border-radius:14px;min-height:180px;height:min(420px,calc(100dvh - 290px));background:#fafbff;scrollbar-color:#c7cfdf #f5f7fb;scrollbar-width:thin}
.note-sheet{min-width:100%;width:920px;position:relative;isolation:isolate}
.note-measures{position:sticky;top:0;z-index:5;height:38px;display:grid;grid-template-columns:88px repeat(4,1fr);background:#f2f5fc;border-bottom:2px solid #d5ddeb}
.note-measures>.note-measure{display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-left:2px solid #d5ddeb;font-size:12px}
.note-measures>.note-measure>span{font-size:11px;color:#8b97b0}
.note-measures>.note-measure>strong{font-size:14px;color:#586e93}
.note-measure-corner{position:sticky;left:0;z-index:2;display:grid;place-items:center;background:#edf1f9;color:#7b8ca5;font-size:10px}
.note-body{display:flex;position:relative}
.note-keys{position:sticky;left:0;z-index:4;flex:0 0 88px;background:white;box-shadow:2px 0 0 #ced8e8}
.note-key{display:block;width:88px;height:var(--note-row);padding:0 9px;text-align:right;border-bottom:1px solid #e5eaf3;background:#fff;font-size:clamp(10px,calc(var(--note-row) * .36),14px);font-weight:600;color:#7586a0}
.note-key.is-sharp{background:#e9edf5;color:#78849a}
.note-key.is-c{color:#5868b6;background:#eef0ff;font-weight:700;border-bottom-color:#cbd3e8}
.note-key:hover,.note-key:active{background:#dbeafc}
.note-grid{flex:1;position:relative;min-width:0;background:#fff;user-select:none;-webkit-user-select:none}
.note-grid.is-selecting,.note-grid.is-pasting{touch-action:none;cursor:crosshair}
.note-marquee{position:absolute;z-index:4;pointer-events:none;border:2px dashed #8570ca;border-radius:5px;background:#a59be12b}
.note-paste-guide{position:absolute;top:0;bottom:0;width:2px;z-index:4;background:#40a475;pointer-events:none}
.note-paste-guide.invalid{background:#d86c7e}
.note-paste-ghost{position:absolute;inset:0;pointer-events:none;z-index:3}
.note-paste-ghost>i{position:absolute;height:calc(var(--note-row) - 6px);min-width:10px;border:2px dashed #3b9c70;background:#93d4ae55;border-radius:6px}
.note-rows{position:absolute;inset:0;pointer-events:none}
.note-row{height:var(--note-row);border-bottom:1px solid #e8edf5;background-color:#fff;background-image:linear-gradient(to right,#c1cde7 2px,transparent 2px),linear-gradient(to right,#dce4f1 1px,transparent 1px),linear-gradient(to right,#eef1f8 1px,transparent 1px);background-size:25% 100%,6.25% 100%,3.125% 100%}
.note-row.is-sharp{background-color:#f5f7fb}
.note-row.is-c{border-bottom-color:#c2cfe5}
.note-events{position:absolute;inset:0;pointer-events:none}
.note-event{position:absolute;height:calc(var(--note-row) - 6px);min-width:10px;padding:0 3px;border-radius:6px;border:1px solid hsl(var(--note-hue) 45% 55%);background:hsl(var(--note-hue) 72% 77%);box-shadow:inset 0 2px 0 #ffffff6b,0 2px 2px #2335540d;pointer-events:auto;touch-action:none;cursor:grab;transition:none}
.note-event>span{display:block;height:3px;width:min(14px,60%);border-radius:2px;background:#ffffffa8}
.note-event.selected{z-index:2;outline:2px solid #4c5b91;outline-offset:1px;box-shadow:0 2px 8px #38416c2b}
.note-event:active{cursor:grabbing}
.note-event>.note-shine{pointer-events:none}
.note-event>.note-resize{position:absolute;right:0;top:-3px;bottom:-3px;width:7px;height:auto;max-width:none;margin:0;background:transparent;cursor:ew-resize;touch-action:none;border-radius:4px}
.note-resize::after{content:'';position:absolute;width:2px;height:10px;top:50%;right:3px;transform:translateY(-50%);border-radius:2px;background:#ffffffc9;box-shadow:1px 0 0 #45577638}
.note-event.selected>.note-resize{right:-5px;width:16px}
.note-event.selected>.note-resize::after{right:5px;height:14px;width:3px;background:#53639b;box-shadow:0 0 0 2px #ffffffdc}
.has-note-group .note-resize{display:none}
.note-cursor{position:absolute;top:0;bottom:0;width:2px;background:#e46679;pointer-events:none;z-index:3;box-shadow:0 0 0 1px #ffffffab}
.note-editor-footer{display:flex;align-items:center;gap:16px;padding:18px 24px;min-height:78px;flex-shrink:0}
.note-selection{display:flex;align-items:center;gap:16px;min-width:0}
#noteSelected{font-size:11px;color:#70819c;min-width:105px}
.note-clear{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#eef0fa;color:#7c87a4;margin-left:-10px}
.note-clear svg{width:15px;height:15px}
.note-length{display:flex;align-items:center;gap:8px;font-size:10px;color:#8a96a8}
.note-length button{width:36px;height:36px;border:1px solid #e1e7f0;border-radius:11px;font-size:20px;background:#f7f9fd}
.note-selection>.icon-button{height:36px;width:36px;border-radius:11px;background:#fff0f2;color:#cb6476}
.note-editor button:disabled{opacity:.35;cursor:default}
.note-editor button:focus-visible,.note-scroll:focus-visible{outline:3px solid #8a9df0;outline-offset:2px}
#noteMessage{flex:1;margin:0;color:#9a6682;font-size:10px;line-height:1.5}
.note-finish{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.note-finish>button{height:40px;border-radius:13px;padding:0 18px;font-size:12px;font-weight:700}
.note-finish>button:first-child{background:#f3f5fa;color:#7c8ca2}
.note-finish>.note-done{display:flex;align-items:center;gap:8px;background:#687ee2;color:#fff;box-shadow:0 3px 0 #5368c7}
.note-done svg{width:15px;height:15px}
@media(max-width:1100px){.note-editor-hint{display:none}}
@media(max-width:780px){dialog.note-editor{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:20px}.note-editor-heading{padding:16px 16px 12px}.note-editor-tools{padding:0 16px 12px}.note-scroll{margin:0 16px;height:calc(100dvh - 290px)}.note-editor-footer{padding:14px 16px;flex-wrap:wrap;gap:10px}.note-selection{gap:10px}#noteSelected{min-width:80px}.note-editor-hint{max-width:230px;line-height:1.7;font-size:10px}#noteMessage:empty{display:none}.note-finish{margin-left:auto}.note-finish>button{padding:0 12px}}
@media(max-width:540px){.note-editor-hint{display:none}.note-editor-heading h2{font-size:18px}.note-editor-symbol{width:42px;height:42px}.note-editor-heading p{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-editor-footer{justify-content:space-between}.note-selection{width:100%;justify-content:space-between}.note-finish{width:100%;justify-content:flex-end}.note-scroll{height:calc(100dvh - 330px)}}

:root {
  --ink:#33445b; --muted:#8b98aa; --line:#e8edf5; --blue:#5b83ed;
  --teal:#27b7a5; --coral:#ef7386; --purple:#a184dc; --yellow:#f1b842;
  --row:84px; --ruler-height:36px; --top-height:36px; --head-width:190px;
  --font:'Ubuntu Sans',Arial,sans-serif; color-scheme:light;
}
* {box-sizing:border-box}
body {margin:0;background:#f6f9ff;color:var(--ink);font-family:var(--font);font-size:13px;overflow:hidden}
button,input,select {font:inherit}
button {border:0;background:transparent;color:inherit;cursor:pointer;transition:background .14s,box-shadow .14s,transform .14s}
button:hover:not(:disabled) {background:#edf2fc}
button:active:not(:disabled) {transform:translateY(1px)}
button:disabled {opacity:.32;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible,[role=slider]:focus-visible,[role=button]:focus-visible {outline:3px solid #9db7f8;outline-offset:3px}
input,select {color:inherit;border:0;background:transparent;min-width:0}
input[type=number] {appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button {appearance:none}
input[type=range] {cursor:pointer}
a {color:inherit;text-decoration:none}
svg {display:block}
.icon-svg,.icon {display:block;width:21px;height:21px;flex-shrink:0;pointer-events:none}
button>svg,button .icon-svg {pointer-events:none}
.tool-icon {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
[hidden] {display:none!important}

.app-header {height:76px;display:flex;align-items:center;gap:20px;padding:0 26px;border-bottom:1px solid var(--line);background:#fff;position:relative;z-index:30}
.brand {font-size:30px;font-weight:700;letter-spacing:-1.7px;line-height:1;white-space:nowrap;color:#557de4}
.brand-sub {display:inline-block;margin-left:8px;font-size:13px;letter-spacing:-.3px;font-weight:600;vertical-align:middle;color:#8d9bb1}
.brand-dot {color:var(--coral)}
.header-divider {height:25px;width:1px;flex-shrink:0;background:var(--line);margin-left:5px}
.project-name {font-size:14px;font-weight:600;width:220px;padding:9px 0;text-overflow:ellipsis}
.save-status {font:10px var(--font);color:#9aa8bb;white-space:nowrap}
.header-actions {margin-left:auto;display:flex;align-items:center;gap:10px}
.text-button,.file-button,.export-button {min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:10px 13px;font-size:12px;font-weight:600;white-space:nowrap}
.file-button {background:#f0f4fd;color:#7183a3}
.chevron {font:15px var(--font);margin-left:2px}
.export-button {background:#e5f6f0;color:#3f9987}
.export-button:hover:not(:disabled) {background:#d3f0e6}
.export-button .icon-svg,.file-button .icon-svg {width:20px;height:20px}
.file-menu {position:absolute;right:175px;top:65px;width:225px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px #49648c1c;z-index:80}
.file-menu>button {display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:13px 12px;border-radius:9px;font-size:12px;line-height:1.4}
.file-menu .icon-svg {width:19px;height:19px;color:#8ca1c5}

.transport-bar {height:82px;padding:0 26px;display:flex;align-items:center;gap:16px;background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:20}
.play-controls {display:flex;align-items:center;gap:8px}
.play-button,.stop-button {width:46px;height:46px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:16px}
.play-button {color:#fff;background:var(--teal);box-shadow:0 4px 0 #1ba99516}
.play-button:hover:not(:disabled) {background:#20a996}
.play-button .icon-svg {width:22px;height:22px}
.stop-button {color:#8998b3;background:#f0f3fa}
.stop-button:hover:not(:disabled) {background:#e5eaf5}
.stop-button .icon-svg {width:21px;height:21px}
.time-display {display:flex;align-items:baseline;gap:7px;margin-left:10px;min-width:165px;padding:12px 14px;background:#f7f9fe;border-radius:13px;font-family:var(--font);font-variant-numeric:tabular-nums;white-space:nowrap}
.time-display>strong {font-size:21px;font-weight:500;letter-spacing:-.4px;color:#536986}
.time-display>span {font-size:11px;color:#9aa8bd}
.time-display #projectLength {font-size:12px;color:#94a2b8}
.time-display #barCount {font-size:10px;color:#a4b0c3}
.transport-divider {height:29px;width:1px;flex-shrink:0;background:var(--line);margin:0 2px}
.tempo-control {display:flex;align-items:center;gap:9px;padding:8px 12px;background:#fff6df;border-radius:13px;color:#a28441}
.tempo-control>span {font-size:10px;font-weight:600;letter-spacing:.3px}
.tempo-control>div {display:flex;align-items:baseline;gap:5px}
.tempo-control input {width:38px;font:500 21px var(--font);padding:1px 0;color:#9a7b35;font-variant-numeric:tabular-nums}
.tempo-control>div>span {font:9px var(--font);color:#b59e65}
.tempo-control .icon-svg {width:21px;height:21px}
.transport-toggle {position:relative;width:46px;height:46px;min-height:46px;padding:0;display:inline-flex;align-items:center;justify-content:center;gap:0;border-radius:15px;flex-shrink:0;color:#95a5be;background:#f0f3fa}
.transport-toggle .icon-svg {width:25px;height:25px}
#loopBtn {color:#a18aca;background:#f2edfb}
#loopBtn.active {color:#8666bf;background:#e5d8fc;box-shadow:inset 0 0 0 1.5px #b99be7}
#metronomeBtn {color:#d29476;background:#fff0e7}
#metronomeBtn.active {color:#be7957;background:#ffe0ca;box-shadow:inset 0 0 0 1.5px #efb393}
.beat-light {position:absolute;top:7px;right:7px;width:5px;height:5px;background:#e1b69e;border-radius:50%}
.beat-light.pulse {background:#e78653;box-shadow:0 0 0 3px #efb49165}
.transport-spacer {flex:1}
.edit-tools {display:flex;gap:5px}
.icon-button {width:35px;height:35px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:#96a7c1;font-size:23px;line-height:1;flex-shrink:0}
.icon-button .icon-svg {width:21px;height:21px}

.studio-shell {height:calc(100dvh - 158px);display:grid;grid-template-columns:280px minmax(0,1fr);min-height:280px}
.library {padding:21px 16px 0;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.library-heading {display:flex;align-items:center;justify-content:space-between;padding:0 4px;margin-bottom:17px}
.library-heading h1 {font-size:18px;font-weight:700;letter-spacing:-.6px;margin:0;color:#576d8b}
.sound-count {font:11px var(--font);color:#9aaac2;background:#f2f5fb;padding:5px 8px;border-radius:8px}
.categories {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.category {position:relative;min-width:0;min-height:77px;padding:10px 3px 9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1.5px solid transparent;border-radius:12px;background:color-mix(in srgb,var(--color) 9%,white);color:var(--color);text-align:center}
.category:hover:not(:disabled) {background:color-mix(in srgb,var(--color) 16%,white)}
.category.active {background:color-mix(in srgb,var(--color) 18%,white);border-color:color-mix(in srgb,var(--color) 80%,white)}
.category strong {font-size:10px;font-weight:600;line-height:1.2;letter-spacing:-.35px;color:color-mix(in srgb,var(--color) 75%,#35425c)}
.category small {display:none}
.category-icon {display:flex;align-items:center;justify-content:center;color:var(--color)}
.category-icon .icon-svg,.category>.icon-svg,.category-icon svg {width:29px;height:29px}
.category.custom {grid-column:1/-1;min-height:46px;flex-direction:row;gap:10px}
.category.custom strong {font-size:12px}
.category.custom .icon-svg {width:23px;height:23px}
.search {display:flex;align-items:center;gap:9px;margin-top:17px;padding:10px 11px;border:1px solid #edf1f7;border-radius:11px;background:#f8faff;color:#a6b6cf}
.search .icon-svg {width:17px;height:17px}
.search input {width:100%;outline:none;font:12px var(--font);color:#667d9b}
.search input::placeholder {color:#a6b4c9}
.filter-line {display:flex;align-items:center;justify-content:space-between;gap:6px;margin:17px 3px 9px;font-size:11px;color:#889bb6}
.filter-line>span {font-weight:600;white-space:nowrap}
.filter-line select {font:10px var(--font);color:#9badc5;max-width:140px;cursor:pointer}
.loop-list {overflow-y:auto;min-height:0;flex:1;padding:1px 2px 18px;scrollbar-width:thin;scrollbar-color:#dbe4f2 transparent}
.loop-card {margin-bottom:7px;padding:10px 10px 8px;border:1px solid #edf1f7;border-radius:12px;cursor:grab;background:#fff}
.loop-card:hover {border-color:color-mix(in srgb,var(--clip-color) 40%,white);background:color-mix(in srgb,var(--clip-color) 4%,white)}
.loop-card.previewing {border-color:color-mix(in srgb,var(--clip-color) 60%,white);background:color-mix(in srgb,var(--clip-color) 7%,white)}
.loop-card-head {display:flex;align-items:center;gap:7px}
.sample-name {font-size:12px;font-weight:600;line-height:1.4;flex:1;color:#7387a3;min-width:0}
.sample-preview {display:flex;align-items:center;justify-content:center;width:31px;height:31px;flex-shrink:0;color:var(--clip-color);background:color-mix(in srgb,var(--clip-color) 10%,white);border-radius:11px}
.sample-preview:hover {background:color-mix(in srgb,var(--clip-color) 19%,white)!important}
.sample-preview .icon-svg {width:16px;height:16px}
.sample-meta {display:flex;gap:6px;align-items:center;margin:3px 0 5px;font:10px var(--font);color:#a4b1c4}
.sample-meta .sample-style {color:#9badc3}
.sample-wave {display:flex;align-items:center;gap:9px;min-width:0}
.waveform {display:block;width:100%;height:31px;min-width:0;color:var(--clip-color);pointer-events:none}
.sample-add {width:29px;height:29px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:9px;background:color-mix(in srgb,var(--clip-color) 9%,white);color:var(--clip-color);font:25px var(--font)}
.sample-add .icon-svg {width:17px;height:17px}
.sample-add:hover {background:color-mix(in srgb,var(--clip-color) 18%,white)!important}
.empty-library {padding:22px 10px;font-size:12px;color:#9eafc5;line-height:1.8}

.arrangement {min-height:0;min-width:0;display:flex;flex-direction:column;background:#fff}
.arrangement-heading {min-height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 21px;gap:12px;border-bottom:1px solid var(--line)}
.arrangement-heading>div:first-child {display:flex;align-items:center;gap:13px;flex-shrink:0}
.arrangement-heading h2 {font-size:15px;font-weight:600;color:#7a8fae;margin:0;letter-spacing:-.5px}
#projectSummary {font:11px var(--font);color:#a4b3c8}
.zoom-tools {display:flex;gap:4px;align-items:center;margin-left:auto}
.zoom-tools .icon-button {width:32px;height:32px;color:#9bacc4;font-size:22px}
.fit-button {display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;color:#9bacc4;font-size:10px}
.fit-button .icon-svg {width:20px;height:20px}
.clip-actions {display:flex;align-items:center;gap:5px;margin-left:auto;min-width:0}
.clip-actions>span {font-size:11px;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis;color:#97a8bf}
.clip-actions button {width:33px;height:33px;padding:7px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:#9badc5;background:#f5f8fd}
.clip-actions button .icon-svg {width:18px;height:18px}
.clip-actions #deleteClip {color:#de93a1;background:#fff3f5}
.timeline-scroll {flex:1;overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#d4deed #f8faff;position:relative}
.timeline-body {display:flex;align-items:stretch;min-height:100%;width:max-content;min-width:100%}
.track-headers {position:sticky;left:0;width:var(--head-width);flex-shrink:0;background:#fff;z-index:15;border-right:1px solid #e4ebf5}
.ruler-label {height:var(--top-height);position:sticky;top:0;background:#f8faff;border-bottom:1px solid #e4ebf5;display:flex;align-items:center;padding:0 18px;color:#b0bfd5;z-index:16}
.ruler-label .icon-svg {width:18px;height:18px}
.track-header {height:var(--row);padding:12px 11px 10px;border-bottom:1px solid #edf1f7;border-left:3px solid var(--track-color);background:#fff;cursor:pointer}
.track-header.selected {background:color-mix(in srgb,var(--track-color) 4%,white)}
.track-title {display:flex;align-items:center;gap:8px;min-width:0}
.track-icon {width:25px;height:25px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--track-color)}
.track-icon .icon-svg,.track-icon svg {width:24px;height:24px}
.track-title input {width:100%;font-size:12px;font-weight:600;letter-spacing:-.35px;color:#7388a5}
.track-number {font:10px var(--font);color:#a5b5cd}
.track-controls {display:flex;align-items:center;gap:5px;margin-top:7px;padding-left:33px}
.mix-button {padding:0;border:1px solid #e6ecf6;color:#a6b5ca;background:#fff;border-radius:8px;font:600 10px var(--font);width:28px;height:27px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.mix-button.active {color:#fff;background:var(--track-color);border-color:var(--track-color)}
.mix-button[data-solo].active {background:#efba49;border-color:#efba49;color:#fff}
.track-controls input[data-volume] {width:52px;min-width:25px;height:5px;margin:0 0 0 2px;accent-color:var(--track-color);flex:1}
.track-controls small {font:8px var(--font);color:#adbbcf;min-width:14px;text-align:right}
.add-track {width:100%;min-height:48px;display:flex;align-items:center;gap:8px;padding:10px 14px;text-align:left;color:#9cacc4;font-size:10px;font-weight:500;line-height:1.5}
.add-track .icon-svg {width:19px;height:19px}
.timeline-content {position:relative;flex-shrink:0;background:#fff;min-height:100%;display:flex;flex-direction:column}
.timeline-top {position:sticky;top:0;height:var(--top-height);flex-shrink:0;z-index:9;background:#f8faff}
.ruler {height:var(--ruler-height);position:relative;display:flex;background:#f8faff;border-bottom:1px solid #e3ebf6;cursor:crosshair;touch-action:none}
.ruler-bar {position:relative;z-index:2;pointer-events:none;height:100%;flex-shrink:0;padding:11px 8px 0;border-left:1px solid #e6edf7;font:11px var(--font);font-variant-numeric:tabular-nums;color:#adbbcf}
.ruler-bar:nth-child(4n+1) {color:#899dbb}
.loop-region {position:absolute;top:3px;bottom:3px;min-width:8px;background:#dce5f04a;border-radius:5px;border-top:2px solid #acbbd22b;border-bottom:2px solid #acbbd22b;z-index:1;cursor:grab;touch-action:none}
.loop-region.active {background:#38bba41c;border-color:#49b9a673}
.loop-region>span {display:none}
.loop-handle {position:absolute;top:-3px;bottom:-3px;width:22px;min-height:var(--ruler-height);padding:0;z-index:4;color:#91c1bb;background:transparent!important;border-radius:0;cursor:ew-resize;touch-action:none}
.loop-handle:before {content:'';position:absolute;top:5px;bottom:5px;width:5px;border-radius:4px;background:currentColor;box-shadow:0 1px 3px #5b8e8720}
.loop-handle:after {content:'';position:absolute;top:13px;height:10px;width:1px;background:#fff8}
.loop-handle.start {left:-8px}
.loop-handle.start:before {left:8px}
.loop-handle.start:after {left:10px}
.loop-handle.end {right:-8px}
.loop-handle.end:before {right:8px}
.loop-handle.end:after {right:10px}
.loop-region.active .loop-handle {color:#2fb4a0}
#lanes {flex-shrink:0}
.lane {height:var(--row);position:relative;border-bottom:1px solid #edf1f7;background-color:#fff;background-image:linear-gradient(to right,#dfe7f480 1px,transparent 1px),linear-gradient(to right,#eff3f9 1px,transparent 1px)}
.lane:nth-child(even) {background-color:#fcfdff}
.lane.drag-over {background-color:#f0f7ff;box-shadow:inset 0 0 0 2px #bad3fb}
.lane.is-muted .clip {opacity:.3;filter:saturate(.4)}
.lane-empty {display:none}
.clip {position:absolute;top:12px;height:60px;overflow:hidden;background:color-mix(in srgb,var(--clip-color) 13%,white);border:1px solid color-mix(in srgb,var(--clip-color) 47%,white);border-top:3px solid var(--clip-color);border-radius:8px;touch-action:none;user-select:none;cursor:grab;z-index:3;box-shadow:0 2px 3px #859bc107}
.clip.selected {outline:2px solid color-mix(in srgb,var(--clip-color) 75%,white);outline-offset:2px;z-index:4}
.clip-title {height:20px;padding:3px 8px 0;display:flex;align-items:center;justify-content:space-between;gap:6px;white-space:nowrap;font-size:10px;font-weight:600;line-height:1.2;color:color-mix(in srgb,var(--clip-color) 70%,#4c6384)}
.clip-title>span {overflow:hidden;text-overflow:ellipsis}
.clip-title small {display:none}
.clip .waveform {height:32px;margin-top:1px;opacity:.9}
.loop-boundary {position:absolute;top:21px;bottom:4px;border-left:1px dashed color-mix(in srgb,var(--clip-color) 45%,white);pointer-events:none;z-index:1}
.resize-handle {position:absolute;right:0;top:0;width:12px;height:100%;cursor:ew-resize;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--clip-color) 8%,transparent));z-index:2}
.resize-handle:after {content:'';position:absolute;right:4px;top:24px;width:3px;height:11px;border-radius:3px;background:var(--clip-color);opacity:.5}
.new-track-zone,#newTrackZone {position:relative;min-height:120px;flex:1;overflow:hidden;background-color:#fcfdff;background-image:linear-gradient(to right,#e4ebf780 1px,transparent 1px),linear-gradient(to right,#f0f4fa 1px,transparent 1px);background-size:64px 100%,16px 100%;border-bottom:1px solid #edf1f7}
.new-track-zone:before,#newTrackZone:before {content:'+';position:absolute;top:28px;left:22px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1.5px dashed #d9e3f2;border-radius:12px;color:#c3cfe1;font:25px var(--font);pointer-events:none}
.new-track-zone.drag-over,#newTrackZone.drag-over {background-color:#f1f7ff;box-shadow:inset 0 0 0 2px #bad3fb}
.new-track-zone.drag-over:before,#newTrackZone.drag-over:before {opacity:0}
#dropGhost {position:absolute;top:12px;height:60px;pointer-events:none;z-index:5;border:2px dashed var(--clip-color,#86b1ee);background:color-mix(in srgb,var(--clip-color,#86b1ee) 14%,white);border-radius:8px;opacity:.85}
.timeline-end {height:44px;display:flex;align-items:center;justify-content:flex-end;padding:0 12px;background:#fff;flex-shrink:0}
.timeline-end button {font-size:10px;color:#a4b5cd;padding:8px 10px;border-radius:9px;display:flex;align-items:center;gap:5px}
.timeline-end .icon-svg {width:16px;height:16px}
.loop-shade {position:absolute;top:var(--top-height);bottom:44px;pointer-events:none;border-left:1px solid #3cbaa51b;border-right:1px solid #3cbaa51b;background:#3cbaa504;z-index:1;display:none}
.loop-shade.active {display:block}
.playhead {position:absolute;top:0;bottom:44px;width:2px;background:#8198c6;pointer-events:none;z-index:10}
.playhead>span {position:absolute;top:0;left:-4px;width:10px;height:8px;background:#8198c6;border-radius:2px 2px 0 0;clip-path:polygon(0 0,100% 0,50% 100%)}

.toast {position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100;background:#6b83ab;color:#fff;padding:13px 21px;border-radius:14px;font-size:12px;line-height:1.6;max-width:90vw;text-align:center;box-shadow:0 5px 20px #5b79a624}
.load-error {position:fixed;bottom:15px;left:20px;right:20px;padding:15px;color:#bd6b80;background:#fff0f4;border:1px solid #f9dfe7;border-radius:12px;z-index:110;font-size:12px;line-height:1.6}

@media(max-width:1100px) {
  .app-header {padding:0 20px;gap:15px}.project-name {width:180px}.save-status {display:none}.header-actions {gap:7px}
  .transport-bar {padding:0 20px;gap:13px}.time-display {min-width:152px;margin-left:6px;padding:12px 11px}.time-display>strong {font-size:20px}
  .studio-shell {grid-template-columns:260px minmax(0,1fr)}.library {padding-left:13px;padding-right:13px}.category {min-height:73px}.category strong {font-size:9px}.category-icon .icon-svg,.category-icon svg {width:27px;height:27px}
  .arrangement-heading {padding:0 15px;gap:9px}.arrangement-heading>div:first-child {gap:9px}.clip-actions>span {display:none}
}
@media(max-width:850px) and (min-width:761px) {
  .brand {font-size:27px}.brand-sub {font-size:11px;margin-left:5px}.app-header {gap:12px}.project-name {width:145px;font-size:12px}.header-actions {gap:6px}.file-button,.export-button {font-size:11px;padding:10px}
  .transport-bar {gap:10px;padding:0 17px}.time-display {min-width:143px;margin-left:3px}.time-display>strong {font-size:19px}.time-display #barCount {display:none}.transport-divider {margin:0}.tempo-control {padding:9px 10px;gap:7px}.tempo-control>span {font-size:9px}.tempo-control input {font-size:20px}
  .studio-shell {grid-template-columns:245px minmax(0,1fr)}.library {padding-left:11px;padding-right:11px}.category {gap:6px;padding-left:1px;padding-right:1px}.category strong {font-size:8.5px;letter-spacing:-.4px}.filter-line select {max-width:126px;font-size:9px}
  .arrangement-heading h2 {font-size:13px}#projectSummary {font-size:10px}.zoom-tools {gap:0}.zoom-tools .icon-button,.fit-button {width:29px}.clip-actions button {width:29px;height:31px}
}
@media(max-height:760px) and (min-width:761px) {
  .app-header {height:66px}.transport-bar {height:72px}.studio-shell {height:calc(100dvh - 138px)}.library {padding-top:16px}.library-heading {margin-bottom:12px}.category {min-height:64px;gap:5px;padding-top:7px;padding-bottom:7px}.category-icon .icon-svg,.category-icon svg {width:25px;height:25px}.search {margin-top:13px}.filter-line {margin-top:13px}.arrangement-heading {min-height:52px}
}
@media(max-width:760px) {
  :root {--head-width:163px;--row:82px;--ruler-height:36px;--top-height:36px}
  body {overflow:auto}.app-header {height:66px;padding:0 14px;gap:11px;display:grid;grid-template-columns:auto minmax(0,1fr) auto}.brand {font-size:27px;letter-spacing:-1.6px}.brand-sub {display:block;font-size:8px;letter-spacing:.1px;margin:6px 0 0 2px;line-height:1;color:#96a8c1}.header-divider,.save-status {display:none}.project-name {width:100%;font-size:11px;letter-spacing:-.35px}.header-actions {gap:5px;margin-left:0}.file-button,.export-button {width:35px;height:35px;min-height:35px;padding:7px;border-radius:11px;font-size:0;gap:0}.file-button .icon-svg,.export-button .icon-svg {width:20px;height:20px}.header-actions .text-button,.chevron {display:none}.export-button>span:not(.tool-icon) {font-size:0}.file-menu {right:13px;top:57px;width:225px}
  .transport-bar {height:auto;min-height:122px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:10px 12px;align-content:center}.play-controls {flex:1;gap:6px;min-width:0}.play-button,.stop-button {width:40px;height:40px;border-radius:13px}.play-button .icon-svg {width:20px;height:20px}.time-display {margin-left:3px;min-width:0;gap:5px;padding:11px 9px}.time-display>strong {font-size:18px}.time-display>span {font-size:9px}.time-display #projectLength {font-size:10px}.time-display #barCount {display:none}.transport-divider,.transport-spacer {display:none}.tempo-control {padding:9px 10px;gap:7px;border-radius:12px}.tempo-control>span {font-size:9px}.tempo-control input {width:34px;font-size:19px}.tempo-control>div>span {font-size:8px}.transport-toggle {width:40px;height:40px;min-height:40px;border-radius:12px}.transport-toggle .icon-svg {width:23px;height:23px}.edit-tools {margin-left:auto;gap:2px}.edit-tools .icon-button {width:32px;height:34px}.edit-tools .icon-svg {width:20px;height:20px}
  .studio-shell {height:auto;display:flex;flex-direction:column;min-height:0}.library {border-right:0;border-bottom:1px solid var(--line);padding:16px 13px 8px}.library-heading {margin-bottom:12px;padding:0 2px}.library-heading h1 {font-size:16px}.sound-count {font-size:10px;padding:4px 7px}.categories {display:flex;gap:7px;overflow:auto;padding-bottom:5px;scrollbar-width:thin;scrollbar-color:#dce5f3 transparent}.category {width:77px;min-width:77px;min-height:68px;gap:5px;padding:7px 2px;border-radius:11px;flex-shrink:0}.category strong {font-size:9px}.category-icon .icon-svg,.category-icon svg {width:26px;height:26px}.category.custom {width:102px;min-width:102px;min-height:68px;flex-direction:column;gap:5px}.category.custom strong {font-size:9px}
  .search {margin-top:8px;padding:8px 10px}.search input {font-size:11px}.filter-line {margin:12px 3px 7px;font-size:11px}.filter-line select {font-size:9px;max-width:190px}.loop-list {display:flex;overflow-x:auto;overflow-y:hidden;gap:8px;padding:0 0 7px;max-height:116px;min-height:0}.loop-card {width:193px;min-width:193px;margin-bottom:0;padding:9px;border-radius:11px}.sample-name {font-size:11px}.sample-preview {width:28px;height:28px;border-radius:9px}.sample-meta {font-size:9px;margin:3px 0}.sample-add {width:26px;height:26px}.waveform {height:27px}
  .arrangement {height:min(680px,79dvh);min-height:430px}.arrangement-heading {min-height:52px;padding:0 13px;gap:8px}.arrangement-heading h2 {font-size:13px}#projectSummary {font-size:10px}.arrangement-heading>div:first-child {gap:8px}.clip-actions {gap:4px}.clip-actions>span {display:none}.clip-actions button {width:29px;height:29px;padding:6px}.zoom-tools {gap:0}.zoom-tools .icon-button,.fit-button {width:27px;height:29px}.zoom-tools .icon-svg,.fit-button .icon-svg {width:18px;height:18px}
  .ruler-label {padding:0 13px}.track-header {padding:11px 8px 9px}.track-title {gap:6px}.track-icon,.track-icon .icon-svg,.track-icon svg {width:22px;height:22px}.track-title input {font-size:11px;letter-spacing:-.4px}.track-controls {padding-left:28px;margin-top:9px;gap:4px}.mix-button {width:26px;height:26px;border-radius:7px;font-size:9px}.track-controls input[data-volume] {width:37px;min-width:20px;margin-left:1px}.track-controls small {display:none}.add-track {font-size:9px;padding-left:11px;gap:6px}.add-track .icon-svg {width:18px;height:18px}.clip {top:11px;height:60px}.clip-title {font-size:9px;padding-left:7px}.ruler-bar {font-size:11px;padding-left:6px}.new-track-zone,#newTrackZone {min-height:120px}.timeline-end {padding-right:8px}.timeline-end button {font-size:9px}
}
@media(max-width:390px) {
  .transport-bar {column-gap:9px}.play-controls {gap:4px}.time-display {padding:11px 7px;gap:4px}.time-display>strong {font-size:17px}.tempo-control {gap:5px;padding:9px}.tempo-control>span {font-size:8px}.tempo-control input {width:31px;font-size:18px}.tempo-control>div>span {font-size:7px}.arrangement-heading>div:first-child {gap:5px}#projectSummary {font-size:9px}.arrangement-heading {gap:5px}.arrangement-heading h2 {font-size:12px}.zoom-tools .icon-button,.fit-button {width:25px}.clip-actions button {width:27px}
}
@media(prefers-reduced-motion:reduce) {* {transition:none!important}}

/* Shared instrument and transport symbols. */
.icon-fill {fill:currentColor;stroke:none}
.icon-wash {fill:currentColor;fill-opacity:.14;stroke:none}
.brand-j {color:#ee748c}.brand-a {color:#eab54d}.brand-m {color:#65bba6}
.transport-toggles {display:flex;align-items:center;gap:10px;flex-shrink:0}
.tempo-control>span:first-child {display:flex;align-items:center;flex-shrink:0}
.tempo-control>span:last-child {font:9px var(--font);letter-spacing:0;color:#b59e65}
.total-time {display:inline-flex;align-items:baseline;gap:5px}
.total-time #barCount {margin-left:3px;padding-left:7px;border-left:1px solid #dfe6f1}
.ruler-bars,#rulerBars {position:relative;display:flex;height:100%;z-index:2;pointer-events:none}
.new-track-zone:before,#newTrackZone:before {content:none}
.new-track-hint {position:absolute;top:28px;left:21px;display:flex;align-items:center;gap:9px;color:#b4c3d8;font-size:11px;pointer-events:none}
.new-track-hint .icon-svg {width:32px;height:32px;padding:7px;border:1.5px dashed #d7e2f1;border-radius:10px;color:#b8c8df}
.new-track-zone.drag-over .new-track-hint,#newTrackZone.drag-over .new-track-hint,.new-track-zone.full .new-track-hint,#newTrackZone.full .new-track-hint {display:none}
.sample-name {font-size:13px}
@media(max-width:1100px) {.time-display {min-width:0}.total-time #barCount {display:none}}
@media(max-width:760px) {
  .play-controls {flex:1 0 calc(100% - 119px);min-width:0}.tempo-control {flex:0 0 107px;justify-content:center;padding-left:8px;padding-right:8px}.tempo-control>span:last-child {font-size:8px}.transport-toggles {gap:9px}.total-time {gap:3px}.sample-name {font-size:12px}.new-track-hint {font-size:10px;left:16px}
}
@media(max-width:390px) {
  .play-controls {flex-basis:calc(100% - 105px)}.tempo-control {flex-basis:96px;gap:5px;padding-left:7px;padding-right:7px}.tempo-control>span:last-child {font-size:7px}
}
@media(max-width:350px) {.play-controls {flex-basis:100%}}

/* Keep the classroom palette bright and the small labels easy to read. */
.brand-j{color:#ec537a}.brand-a{color:#e8a51f}.brand-m{color:#20ad91}.brand-sub{color:#697e9b}
.category{background:color-mix(in srgb,var(--color) 12%,white)}.category strong{font-size:12px;color:color-mix(in srgb,var(--color) 65%,#23334d)}.category.active{background:var(--color);border-color:var(--color);box-shadow:0 4px 0 color-mix(in srgb,var(--color) 22%,transparent)}.category.active .category-icon,.category.active strong{color:#fff}.category.active .icon-wash{fill-opacity:.25}
.sample-name{color:#4c6282}.sample-meta .sample-style{color:#7488a5}.track-title input{font-size:13px;color:#4e6484}.arrangement-heading h2{color:#506b91}.filter-line,.filter-line select{color:#7186a4}.time-display>strong{color:#405c80}.time-display #projectLength{color:#7489a6}.time-display #barCount{color:#8194ae}
.export-button{background:#28b29d;color:white}.export-button:hover:not(:disabled){background:#1b9f8b}.play-button{background:#24b6a1}.loop-region.active{background:#37baa72c;border-color:#2da990}.loop-region.active .loop-handle{color:#139e88}.ruler-bar{color:#8197b5}.ruler-bar:nth-child(4n+1){color:#55749e}.icon-button{color:#7d96b9}.mix-button{color:#7b92b2}.clip-title{font-size:11px}.new-track-hint{color:#8aa5c8}#dropGhost{display:flex;align-items:center;padding:10px;color:var(--clip-color)}#dropGhost .icon-svg{width:30px;height:30px}
@media(max-width:1100px){.category strong{font-size:11px}}
@media(max-width:760px){.category strong{font-size:10px}.track-title input{font-size:12px}.clip-title{font-size:10px}}

/* Instrument drawings share the same vector language as the transport controls. */
.instrument-picture{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;flex-shrink:0;pointer-events:none;line-height:0}
.category{gap:3px;padding:7px 2px 8px;min-height:90px}.category-icon{width:56px;height:56px;background:#ffffff91;border-radius:14px}.category.active .category-icon{background:#fffc}.category.active{box-shadow:0 4px 0 color-mix(in srgb,var(--color) 22%,transparent)}.track-icon{width:32px;height:32px}.track-icon .instrument-picture{width:34px;height:34px}.track-title{gap:6px}.track-header{padding-top:9px}.track-controls{margin-top:3px}
@media(max-height:760px) and (min-width:761px){.category{min-height:78px;padding-top:5px;padding-bottom:6px;gap:1px}.category-icon{width:47px;height:47px;border-radius:11px}.category-icon .instrument-picture{width:47px;height:47px}.library-heading{margin-bottom:10px}.search{margin-top:11px}.filter-line{margin-top:11px}}
@media(max-width:760px){.category{min-height:83px;gap:3px}.category-icon{width:48px;height:48px;border-radius:12px}.category-icon .instrument-picture{width:48px;height:48px}.track-icon{width:28px;height:28px}.track-icon .instrument-picture{width:30px;height:30px}.track-title input{font-size:11px}.track-header{padding-top:9px}.track-controls{margin-top:6px}}

.category-icon{overflow:hidden}#dropGhost .instrument-picture{width:44px;height:44px}


/* Rounded mixer controls: two listening buttons and a full touch-height fader. */
.track-controls {
  height:30px;gap:6px;margin-top:2px;padding-left:0;align-items:center;
}
.mix-button {
  --mix-accent:#df7c91;--mix-wash:#fff0f4;
  width:30px;height:30px;padding:6px;flex:0 0 30px;
  border:1px solid color-mix(in srgb,var(--mix-accent) 19%,white);
  border-radius:10px;background:var(--mix-wash);color:var(--mix-accent);
  box-shadow:0 1px 1px #8499be07;
}
.mix-button[data-solo] {
  --mix-accent:#c9a044;--mix-wash:#fff8e4;
}
.mix-button .icon-svg {width:17px;height:17px;stroke-width:2.1}
.mix-button:hover:not(:disabled) {
  background:color-mix(in srgb,var(--mix-accent) 14%,white);
  border-color:color-mix(in srgb,var(--mix-accent) 40%,white);
}
.mix-button[data-mute].active {
  background:#ec7a91;border-color:#e56e85;color:#fff;
  box-shadow:inset 0 -2px 0 #ce577421,0 2px 4px #e8829825;
}
.mix-button[data-solo].active {
  background:#eeb951;border-color:#e4ac3e;color:#fff;
  box-shadow:inset 0 -2px 0 #d3982d21,0 2px 4px #e9b84e25;
}
.track-controls input[data-volume] {
  --level:75%;appearance:none;-webkit-appearance:none;display:block;
  height:30px;min-width:24px;width:0;flex:1 1 0;
  margin:0;padding:0 2px;border:0;border-radius:10px;background:transparent;
  color:var(--track-color);cursor:pointer;touch-action:pan-y;
}
.track-controls input[data-volume]::-webkit-slider-runnable-track {
  height:6px;border:0;border-radius:8px;
  background:linear-gradient(to right,var(--track-color) 0%,var(--track-color) var(--level),#e9eef8 var(--level),#e9eef8 100%);
}
.track-controls input[data-volume]::-webkit-slider-thumb {
  appearance:none;-webkit-appearance:none;width:16px;height:16px;margin-top:-5px;
  border:3px solid var(--track-color);border-radius:50%;background:#fff;
  box-shadow:0 1px 4px #718bb02e;transition:box-shadow .14s;
}
.track-controls input[data-volume]:hover::-webkit-slider-thumb {
  box-shadow:0 0 0 3px color-mix(in srgb,var(--track-color) 12%,transparent),0 1px 4px #718bb02e;
}
.track-controls input[data-volume]::-moz-range-track {
  height:6px;border:0;border-radius:8px;background:#e9eef8;
}
.track-controls input[data-volume]::-moz-range-progress {
  height:6px;border:0;border-radius:8px;background:var(--track-color);
}
.track-controls input[data-volume]::-moz-range-thumb {
  box-sizing:border-box;width:16px;height:16px;border:3px solid var(--track-color);
  border-radius:50%;background:#fff;box-shadow:0 1px 4px #718bb02e;
}
.track-controls input[data-volume]:hover::-moz-range-thumb {
  box-shadow:0 0 0 3px color-mix(in srgb,var(--track-color) 12%,transparent),0 1px 4px #718bb02e;
}
.track-controls small {display:none}
@media(max-width:760px) {
  .track-controls {height:30px;margin-top:6px;padding-left:0;gap:6px}
  .mix-button {width:30px;height:30px;flex-basis:30px;border-radius:10px}
  .track-controls input[data-volume] {height:30px;width:0;min-width:20px;margin:0}
}

/* Measure numbers are playback targets; only the loop edges and top grip drag. */
.ruler-bars,#rulerBars{z-index:2;pointer-events:auto}
.ruler-bar{display:flex;align-items:center;justify-content:center;padding:0;pointer-events:auto;border-radius:0;border-top:0;border-right:0;border-bottom:0;cursor:pointer;position:relative;font-size:12px;color:#6884a9;transform:none!important}
.ruler-bar:hover:not(:disabled){background:#7a9ce820;color:#3d64a3}.ruler-bar:focus-visible{outline-offset:-3px;z-index:3}
.loop-region{z-index:3;pointer-events:none}.loop-handle{pointer-events:auto;width:16px}.loop-handle.start{left:-5px}.loop-handle.end{right:-5px}.loop-handle.start:before{left:5px}.loop-handle.start:after{left:7px}.loop-handle.end:before{right:5px}.loop-handle.end:after{right:7px}
.loop-region>.loop-grip{display:block;position:absolute;top:-3px;left:10px;right:10px;height:8px;cursor:grab;pointer-events:auto;touch-action:none;border-radius:4px;background:#91c1bb30}
.loop-region.active>.loop-grip{background:#23a78e75}.loop-region>.loop-grip:active{cursor:grabbing}

.ruler-bar{touch-action:none;user-select:none}

/* A single, tactile family for playback, editing and mixing controls. */
.icon-svg {stroke-width:2;shape-rendering:geometricPrecision}
.icon-wash {fill-opacity:.17}
.file-button,.export-button,.play-button,.stop-button,.transport-toggle,.icon-button,
.sample-preview,.sample-add,.mix-button {
  border-radius:12px;
  transition:background .14s,box-shadow .14s,transform .14s;
}
.file-button,.stop-button {box-shadow:inset 0 -2px 0 #cad6ec22}
.play-button {box-shadow:inset 0 -2px 0 #138c7b26,0 3px 7px #29b39e13}
.export-button {box-shadow:inset 0 -2px 0 #148d7b20}
.transport-toggle {box-shadow:inset 0 -2px 0 #91a5c312}
.icon-button {color:#7b95b9;background:#f4f7fd;box-shadow:inset 0 -1px 0 #dce5f633}
.icon-button:hover:not(:disabled) {color:#5278b0;background:#e8f0ff}
.icon-button:disabled {background:#f6f8fc;box-shadow:none}
#loopBtn.active {box-shadow:inset 0 -2px 0 #9265c52b,inset 0 0 0 1px #bba0e650}
#metronomeBtn.active {box-shadow:inset 0 -2px 0 #d38c5b2b,inset 0 0 0 1px #eab38b60}
.sample-preview,.sample-add {box-shadow:inset 0 -1.5px 0 color-mix(in srgb,var(--clip-color) 11%,transparent)}
.mix-button {border-radius:9px;box-shadow:inset 0 -1px 0 #b8bfd315}
.mix-button .icon-svg {width:18px;height:18px;stroke-width:2}
.mix-button[data-mute].active {box-shadow:inset 0 -2px 0 #c45d7625,0 1px 3px #e8829818}
.mix-button[data-solo].active {box-shadow:inset 0 -2px 0 #cc963b25,0 1px 3px #e9b84e18}
.track-controls input[data-volume] {height:30px;padding:0 2px;touch-action:pan-y}
.track-controls input[data-volume]::-webkit-slider-runnable-track {
  height:6px;border-radius:5px;
  background:linear-gradient(to right,var(--track-color) 0%,var(--track-color) var(--level),#e4ebf6 var(--level),#e4ebf6 100%);
  box-shadow:inset 0 1px 1px #6881a31c;
}
.track-controls input[data-volume]::-webkit-slider-thumb {
  width:13px;height:22px;margin-top:-8px;
  border:2px solid color-mix(in srgb,var(--track-color) 79%,white);border-radius:5px;
  background:linear-gradient(to bottom,transparent 0,transparent 7px,color-mix(in srgb,var(--track-color) 48%,white) 7px,color-mix(in srgb,var(--track-color) 48%,white) 9px,transparent 9px),linear-gradient(#fff,#f8faff);
  box-shadow:0 1px 3px #627c9f36;
}
.track-controls input[data-volume]:hover::-webkit-slider-thumb {
  box-shadow:0 0 0 3px color-mix(in srgb,var(--track-color) 9%,transparent),0 1px 3px #627c9f36;
}
.track-controls input[data-volume]::-moz-range-track {
  height:6px;border-radius:5px;background:#e4ebf6;box-shadow:inset 0 1px 1px #6881a31c;
}
.track-controls input[data-volume]::-moz-range-progress {height:6px;border-radius:5px;background:var(--track-color)}
.track-controls input[data-volume]::-moz-range-thumb {
  width:13px;height:22px;border:2px solid color-mix(in srgb,var(--track-color) 79%,white);border-radius:5px;
  background:linear-gradient(to bottom,transparent 0,transparent 7px,color-mix(in srgb,var(--track-color) 48%,white) 7px,color-mix(in srgb,var(--track-color) 48%,white) 9px,transparent 9px),linear-gradient(#fff,#f8faff);
  box-shadow:0 1px 3px #627c9f36;
}
.track-controls input[data-volume]:hover::-moz-range-thumb {
  box-shadow:0 0 0 3px color-mix(in srgb,var(--track-color) 9%,transparent),0 1px 3px #627c9f36;
}

/* The arrangement toolbar stays compact; the extra measures live here too. */
.arrangement-heading {gap:12px}
.arrangement-meta {display:flex;align-items:center;gap:7px;color:#8ca1bd;flex-shrink:0}
.arrangement-meta>.icon-svg,.arrangement-meta>span>.icon-svg {width:19px;height:19px}
.arrangement-meta #projectSummary {font-size:11px;color:#8ca1bd;font-variant-numeric:tabular-nums}
.timeline-tools {display:flex;align-items:center;gap:13px;margin-left:auto;min-width:0}
.timeline-tools .zoom-tools {gap:4px;margin-left:0}
#extendTimeline {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:7px 10px;border-radius:10px;background:#f0f5ff;color:#8a9fc0;font-size:10px;white-space:nowrap}
#extendTimeline .icon-svg {width:16px;height:16px}
#extendTimeline:hover:not(:disabled) {color:#6487bc;background:#e4eeff}
.loop-shade,.playhead {bottom:0}

/* The instrument header and repeat dividers describe the actual audio clip. */
.clip {border-radius:9px;box-shadow:0 2px 3px #859bc109}
.clip-title {height:23px;padding:1px 7px 0;gap:5px;justify-content:flex-start;overflow:hidden}
.clip-title>span:not(.clip-instrument) {min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.clip-instrument {display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px;overflow:hidden}
.clip-instrument .instrument-picture {width:20px;height:20px}
.clip-instrument .icon-svg {width:17px;height:17px}
.clip-segments,.clip-content {height:32px;position:relative;overflow:hidden}
.clip-segments .waveform,.clip-content .waveform {height:31px;margin-top:0;opacity:.92}
.clip-segments .loop-boundary,.clip-content .loop-boundary {
  top:1px;bottom:2px;border-left:1.5px dashed color-mix(in srgb,var(--clip-color) 62%,white);z-index:2;
}
.clip-segments .loop-boundary:before,.clip-content .loop-boundary:before {
  content:'';position:absolute;top:0;left:-3px;width:5px;height:3px;border-radius:0 0 2px 2px;background:var(--clip-color);opacity:.65;
}
.clip.dragging {opacity:.68;cursor:grabbing;box-shadow:0 7px 16px #52749c20;z-index:8}
.clip.dragging .resize-handle {opacity:.4}
.resize-handle {width:13px}
.resize-handle:after {right:4px;width:3px;height:12px;border-radius:3px;opacity:.6}

/* The same snapped preview follows drops into channels and the empty area. */
.lane.drag-over {background-color:#f4f8ff;box-shadow:inset 0 0 0 1px #bad3fb}
#dropGhost,.drop-ghost {
  position:absolute;top:12px;height:60px;pointer-events:none;z-index:7;
  display:flex;align-items:center;gap:6px;padding:9px;border:1.5px dashed var(--clip-color,#86b1ee);
  border-radius:9px;background:color-mix(in srgb,var(--clip-color,#86b1ee) 10%,white);
  color:var(--clip-color,#86b1ee);opacity:.88;box-shadow:0 3px 9px #8aadd31a;overflow:hidden;
}
#dropGhost .instrument-picture {width:32px;height:32px}
#dropGhost .icon-svg {width:26px;height:26px}
.drop-guide {position:absolute;top:0;bottom:0;width:2px;z-index:8;pointer-events:none;background:var(--clip-color,#7ea7e3);border-radius:2px;box-shadow:0 0 0 1px #fff8}
.drop-guide-label {position:absolute;top:2px;left:5px;padding:3px 6px;border-radius:5px;background:var(--clip-color,#7ea7e3);color:#fff;font:10px var(--font);white-space:nowrap;box-shadow:0 1px 3px #5f7f9b15}

/* Clip actions open next to the chosen sound and stay usable by keyboard. */
.context-menu {
  position:fixed;z-index:125;min-width:220px;max-width:calc(100vw - 20px);padding:7px;
  border:1px solid #e3eaf5;border-radius:15px;background:#fff;box-shadow:0 8px 32px #46628624;
}
.context-menu-item {
  width:100%;min-height:39px;display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:9px;background:transparent;color:#6e86a8;text-align:left;font-size:12px;font-weight:600;
}
.context-menu-item>.icon-svg,.context-menu-item>span>.icon-svg {width:19px;height:19px;flex-shrink:0;color:#91a9cb}
.context-menu-item>span:not(:has(.icon-svg)) {flex:1;min-width:0}
.context-menu-item kbd {margin-left:auto;padding-left:12px;color:#a7b6cb;font:10px var(--font);white-space:nowrap}
.context-menu-item:hover:not(:disabled),.context-menu-item:focus-visible {background:#edf4ff;color:#5275a8}
.context-menu-item:focus-visible {outline-offset:-2px}
.context-menu-item.danger,.context-menu-item[data-action=delete],.context-menu-item[data-clip-action=delete] {color:#d57c90}
.context-menu-item.danger>.icon-svg {color:#df8da0}
.context-menu-item.danger:hover:not(:disabled) {background:#fff0f4}
.menu-divider {height:1px;background:#eaf0f8;margin:5px 8px}
.context-hint {padding:5px 10px 4px;font:10px var(--font);color:#a2b3ca;line-height:1.5}
@media(max-width:850px) and (min-width:761px) {
  .timeline-tools {gap:7px}.timeline-tools .zoom-tools {gap:2px}#extendTimeline {font-size:9px;padding:7px 8px;gap:4px}
}
@media(max-width:760px) {
  .arrangement-heading {padding:0 12px;gap:7px}.arrangement-meta {gap:5px}.arrangement-meta #projectSummary {font-size:10px}.arrangement-meta>.icon-svg {width:17px;height:17px}
  .timeline-tools {gap:7px}.timeline-tools .zoom-tools {gap:3px}.zoom-tools .icon-button {width:29px;height:29px}
  #extendTimeline {min-height:29px;padding:6px 7px;gap:3px;font-size:9px}#extendTimeline .icon-svg {width:15px;height:15px}
  .clip-title {height:23px;padding-left:5px;gap:4px}.clip-instrument,.clip-instrument .instrument-picture {width:18px;height:18px}.clip-instrument {flex-basis:18px}
  #dropGhost,.drop-ghost {top:11px}.context-menu {min-width:210px}.context-menu-item {min-height:42px;font-size:12px}
}
@media(max-width:390px) {
  .arrangement-heading {gap:5px;padding:0 10px}.timeline-tools {gap:5px}.timeline-tools .zoom-tools {gap:2px}#extendTimeline {padding-left:6px;padding-right:6px}
  .clip-actions {gap:3px}.clip-actions button {width:27px;height:29px}
}

/* Each repeat keeps its source width; shortening a clip crops the final repeat. */
.clip-segments {height:32px;position:relative;overflow:hidden}
.clip-repeat {position:absolute;top:0;bottom:0;overflow:hidden}
.clip-repeat .waveform {max-width:none;width:auto;height:31px;margin:0;opacity:.92}
#dropGhost,.drop-ghost {display:block;padding:0}
#dropGhost .clip-title {padding-top:2px}
#dropGhost .clip-instrument .instrument-picture {width:20px;height:20px}
#dropGhost .clip-instrument .icon-svg {width:17px;height:17px}
.drop-guide-label {top:34px}
.clip.just-synced {animation:clip-sync-flash .7s ease-out}
@keyframes clip-sync-flash {0% {box-shadow:inset 0 0 0 2px #ffffffc9,0 0 0 3px color-mix(in srgb,var(--clip-color) 25%,transparent)}100% {box-shadow:0 2px 3px #859bc109}}
@media(prefers-reduced-motion:reduce) {.clip.just-synced {animation:none}}

.loop-card {touch-action:pan-y;user-select:none}
.loop-card.dragging {opacity:.5;cursor:grabbing}
body:has(.loop-card.dragging) {cursor:grabbing}

.clip-repeat {border-right:2px solid color-mix(in srgb,var(--clip-color) 8%,white)}
.clip-repeat:last-of-type {border-right:0}
.clip-repeat:nth-of-type(even) {background:color-mix(in srgb,var(--clip-color) 5%,transparent)}
@media(max-width:760px) {.loop-card {touch-action:pan-x}}

/* Channel artwork is editable without adding permanent controls to each row. */
button.track-icon {
  position:relative;width:32px;height:32px;padding:0;border:0;border-radius:10px;
  background:transparent;color:var(--track-color);flex-shrink:0;
}
button.track-icon:hover:not(:disabled),button.track-icon[aria-expanded=true] {
  background:color-mix(in srgb,var(--track-color) 10%,white);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--track-color) 21%,white);
}
button.track-icon:focus-visible {outline-color:color-mix(in srgb,var(--track-color) 60%,white);outline-offset:2px}

#trackIconPicker {
  --track-color:#7898d6;position:fixed;z-index:130;width:270px;max-width:calc(100vw - 20px);
  max-height:calc(100dvh - 24px);overflow:auto;padding:12px;border:1px solid #e3eaf5;
  border-radius:16px;background:#fff;box-shadow:0 8px 32px #46628624;
}
.picker-heading {display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:10px;padding-left:2px}
.picker-heading h2 {margin:0;font-size:13px;font-weight:600;line-height:1.5;color:#7088aa;letter-spacing:-.25px}
.picker-heading .icon-button {width:29px;height:29px;border-radius:9px;flex:0 0 29px;background:#f4f7fd;color:#97aac5}
.picker-heading .icon-button .icon-svg {width:16px;height:16px}
.icon-picker-grid {display:grid;grid-template-columns:repeat(5,44px);gap:6px}
.icon-choice {
  --choice-color:var(--color,var(--track-color));display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:5px;border:1px solid #eaf0f8;border-radius:12px;
  background:#f9fbff;color:var(--choice-color);box-shadow:inset 0 -1px 0 #e5ecf633;
}
.icon-choice:hover:not(:disabled) {
  background:color-mix(in srgb,var(--choice-color) 10%,white);
  border-color:color-mix(in srgb,var(--choice-color) 30%,white);
}
.icon-choice[aria-pressed=true],.icon-choice.active {
  background:color-mix(in srgb,var(--choice-color) 16%,white);
  border:2px solid color-mix(in srgb,var(--choice-color) 75%,white);padding:4px;
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--choice-color) 9%,transparent);
}
.icon-choice:focus-visible {outline-color:color-mix(in srgb,var(--choice-color) 55%,white);outline-offset:2px}
.icon-choice .instrument-picture {width:32px;height:32px}
.icon-choice .icon-svg {width:24px;height:24px;stroke-width:2}
@media(max-width:760px) {button.track-icon {width:28px;height:28px;border-radius:9px}}
@media(max-width:290px) {
  .icon-picker-grid {grid-template-columns:repeat(5,minmax(0,1fr))}.icon-choice {width:100%;height:42px}.icon-choice .instrument-picture {width:29px;height:29px}
}

/* Color stays on the drawing even inside an active category's white tile. */
.instrument-picture>.instrument-svg {display:block;width:100%;height:100%;flex-shrink:0;overflow:visible;stroke-width:2.4}
.category-icon .instrument-picture {color:color-mix(in srgb,var(--color) 83%,#34465c)}
.category.active .category-icon .instrument-picture {color:color-mix(in srgb,var(--color) 83%,#34465c)}
.track-icon .instrument-picture {color:color-mix(in srgb,var(--track-color) 82%,#34465c)}
.clip-instrument .instrument-picture {color:color-mix(in srgb,var(--clip-color) 78%,#34465c)}
.icon-choice .instrument-picture {color:var(--choice-color)}
.icon-choice .instrument-picture>.instrument-svg {width:100%;height:100%;stroke-width:2.4}
.mix-button .control-icon,.icon-choice .control-icon {stroke-width:1.8}
.icon-choice .control-icon {width:27px;height:27px}
#metronomeBtn .control-icon {width:28px;height:28px}
.tempo-control .control-icon {width:24px;height:24px}
#metronomeBtn {color:#b77a56}
#metronomeBtn.active {color:#985d3c}
.tempo-control>span:first-child {color:#94702c}
@media(max-width:760px) {.tempo-control .control-icon {width:22px;height:22px}#metronomeBtn .control-icon {width:26px;height:26px}}

/* The end arrow changes duration; solid seams make every repeat visible. */
.clip {overflow:visible;border-left-width:2px;border-right-width:2px}
.clip-title {padding-right:29px;border-radius:6px 6px 0 0}
.clip-segments {overflow:hidden;border-radius:0 0 6px 6px}
.clip-repeat,.clip-repeat:nth-of-type(even) {border-right:0;background:transparent}
.clip-repeat .waveform {opacity:.92}
.clip-repeat.is-repeat {background:color-mix(in srgb,var(--clip-color) 4%,white)}
.clip-repeat.is-repeat .waveform {opacity:.5}
.clip>.loop-boundary,.drop-ghost>.loop-boundary {
  position:absolute;top:-3px;bottom:-1px;width:2px;border:0;
  background:color-mix(in srgb,var(--clip-color) 87%,#34465c);
  box-shadow:-1px 0 0 #ffffffc9,1px 0 0 #ffffffd9;
  z-index:5;pointer-events:none;
}
.drop-ghost>.loop-boundary {top:0;bottom:0}
.clip>.loop-boundary:before,.clip>.loop-boundary:after,
.drop-ghost>.loop-boundary:before,.drop-ghost>.loop-boundary:after {display:none}
.clip-loop-handle {
  position:absolute;right:3px;top:1px;width:22px;height:22px;min-height:0;
  display:flex;align-items:center;justify-content:center;padding:3px;
  border:1px solid color-mix(in srgb,var(--clip-color) 40%,white);border-radius:50%;
  background:#fff;color:color-mix(in srgb,var(--clip-color) 88%,#34465c);
  box-shadow:0 1px 3px #6c829419;z-index:8;cursor:ew-resize;touch-action:none;
}
.clip-loop-handle .icon-svg {width:15px;height:15px;flex-shrink:0;pointer-events:none}
.clip-loop-handle:hover:not(:disabled) {background:#fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--clip-color) 18%,transparent),0 1px 3px #6c829419}
.clip-loop-handle:active {transform:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--clip-color) 23%,transparent)}
.clip-loop-handle:focus-visible {outline-color:var(--clip-color);outline-offset:2px}
.clip.compact .clip-title {padding:0}
.clip.compact .clip-title>span {display:none}
.clip.compact .clip-loop-handle {right:-3px;top:2px;width:16px;height:16px;padding:2px}
.clip.compact .clip-loop-handle .icon-svg {width:11px;height:11px}
#dropGhost .clip-title {padding-right:7px}

/* Channel colors use the same quiet popover and generous targets as artwork. */
#trackColorPicker {
  position:fixed;z-index:130;width:270px;max-width:calc(100vw - 20px);
  max-height:calc(100dvh - 24px);overflow:auto;padding:12px;border:1px solid #e3eaf5;
  border-radius:16px;background:#fff;box-shadow:0 8px 32px #46628624;
}
#trackIconPicker .picker-heading h2,#trackColorPicker .picker-heading h2 {display:none}
#trackIconPicker .picker-heading,#trackColorPicker .picker-heading {justify-content:flex-end;margin-bottom:8px;padding-left:0}
.channel-color-grid {display:grid;grid-template-columns:repeat(5,44px);gap:6px}
.color-choice {
  --swatch-color:var(--swatch,var(--color,#7898d6));position:relative;
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:5px;
  border:2px solid transparent;border-radius:13px;background:transparent;color:#fff;
}
.color-choice:before {
  content:'';position:absolute;inset:4px;border-radius:9px;background:var(--swatch-color);
  box-shadow:inset 0 -2px 0 #22364a13;pointer-events:none;
}
.color-choice:hover:not(:disabled) {background:color-mix(in srgb,var(--swatch-color) 7%,white);border-color:color-mix(in srgb,var(--swatch-color) 30%,white)}
.color-choice[aria-pressed=true],.color-choice.active {background:#fff;border-color:var(--swatch-color);box-shadow:0 0 0 1px #fff}
.color-choice .icon-svg {position:relative;z-index:1;width:20px;height:20px;color:#fff;pointer-events:none;filter:drop-shadow(0 1px 1px #33445b25)}
.color-choice[aria-pressed=false] .icon-svg {visibility:hidden}
.color-choice:focus-visible {outline-color:color-mix(in srgb,var(--swatch-color) 68%,white);outline-offset:2px}
@media(max-width:290px) {
  .channel-color-grid {grid-template-columns:repeat(5,minmax(0,1fr))}.color-choice {width:100%;height:42px}
}

/* Volume keeps its round thumb; the adjacent dial controls pan. */
.track-controls {gap:5px}
.track-controls .mix-button {width:28px;height:28px;flex:0 0 28px}
.track-controls input[data-volume] {height:30px;width:0;min-width:24px;flex:1 1 0;padding:0 2px}
.track-controls input[data-volume]::-webkit-slider-thumb {
  width:16px;height:16px;margin-top:-5px;border:3px solid var(--track-color);border-radius:50%;
  background:#fff;box-shadow:0 1px 4px #718bb02e;
}
.track-controls input[data-volume]::-moz-range-thumb {
  box-sizing:border-box;width:16px;height:16px;border:3px solid var(--track-color);border-radius:50%;
  background:#fff;box-shadow:0 1px 4px #718bb02e;
}
/* The pan indicator turns around a fixed center, independent of the volume rail. */
.pan-knob {
  position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:30px;
  flex:0 0 32px;padding:0;border:0;background:transparent;color:var(--track-color);
  border-radius:50%;cursor:ew-resize;touch-action:none;user-select:none;
}
.pan-knob-ring {
  position:absolute;left:4px;top:3px;width:24px;height:24px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 225deg,#dce5f0 0deg var(--pan-from),var(--track-color) var(--pan-from) var(--pan-to),#dce5f0 var(--pan-to) 270deg,transparent 270deg 360deg);
  -webkit-mask:radial-gradient(circle,transparent 10px,#000 10.5px);mask:radial-gradient(circle,transparent 10px,#000 10.5px);
}
.pan-knob-face {
  position:relative;width:18px;height:18px;border:1px solid #d5dfed;border-radius:50%;
  background:linear-gradient(145deg,#fff 25%,#edf2f9);box-shadow:0 1px 3px #718bb02e;
  transform:rotate(var(--pan-angle));pointer-events:none;
}
.pan-knob-face:before {content:'';position:absolute;left:calc(50% - 1px);top:2px;width:2px;height:6px;border-radius:2px;background:var(--track-color)}
.pan-knob:after {content:'';position:absolute;top:1px;left:15px;width:2px;height:2px;border-radius:1px;background:#9aabc2;pointer-events:none}
.pan-knob:hover:not(:disabled),.pan-knob.turning {background:color-mix(in srgb,var(--track-color) 7%,white)}
.pan-knob:hover .pan-knob-face,.pan-knob.turning .pan-knob-face {border-color:color-mix(in srgb,var(--track-color) 35%,white);box-shadow:0 1px 4px #718bb03d}
.pan-knob:focus-visible {outline:2px solid color-mix(in srgb,var(--track-color) 55%,white);outline-offset:1px}

/* Category choices keep their instrument symbol when the menu opens. */
#categories {display:none!important}
.category-selector {
  --category-color:var(--color,#839ecc);display:flex;min-height:52px;padding:0;
  border:1px solid color-mix(in srgb,var(--category-color) 28%,white);border-radius:13px;
  background:color-mix(in srgb,var(--category-color) 6%,white);
}
#categorySelect.category-trigger {
  appearance:none;-webkit-appearance:none;display:flex;align-items:center;gap:10px;
  min-height:50px;width:100%;min-width:0;margin:0;padding:8px 10px;border:0;border-radius:12px;
  background:transparent;color:#627d9f;font:600 13px/1.5 var(--font);text-align:left;cursor:pointer;
}
#categorySelect.category-trigger:hover {background:color-mix(in srgb,var(--category-color) 5%,transparent)}
#categorySelect[aria-expanded=true] {box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--category-color) 30%,white)}
.selected-category-icon {display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 32px;color:var(--category-color)}
.selected-category-icon .instrument-picture {width:28px;height:28px;color:var(--category-color)}
.selected-category-icon>.icon-svg {width:28px;height:28px}
#selectedCategoryName {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-caret {width:7px;height:7px;flex:0 0 7px;border-right:1.5px solid #8496b1;border-bottom:1.5px solid #8496b1;transform:translateY(-2px) rotate(45deg);margin:0 4px 0 8px}
[aria-expanded=true]>.category-caret {transform:translateY(2px) rotate(225deg)}
.category-menu {
  position:fixed;z-index:150;overflow:auto;padding:5px;border:1px solid #e0e7f2;border-radius:14px;
  background:#fff;box-shadow:0 8px 30px #46628626;scrollbar-width:thin;scrollbar-color:#dce5f3 transparent;
  overscroll-behavior:contain;
}
.category-option {
  display:flex;align-items:center;gap:11px;width:100%;min-height:39px;padding:6px 10px;
  border:0;border-radius:9px;background:transparent;color:#637b9d;font:600 12px/1.4 var(--font);text-align:left;
}
.category-option>span:last-child {flex:1;min-width:0}
.category-option-icon {display:flex;align-items:center;justify-content:center;width:25px;height:25px;flex:0 0 25px;color:var(--color)}
.category-option-icon .instrument-picture,.category-option-icon>.icon-svg {width:23px;height:23px;color:var(--color)}
.category-option:hover,.category-option:focus-visible {background:color-mix(in srgb,var(--color) 9%,white);outline:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color) 25%,white)}
.category-option[aria-selected=true] {background:color-mix(in srgb,var(--color) 12%,white);color:color-mix(in srgb,var(--color) 70%,#34465c)}
.category-option[aria-selected=true]:after {content:'';width:6px;height:6px;border-radius:50%;background:var(--color);flex:0 0 6px;margin-left:3px}

/* Smaller channel symbols and clip repeat arrows leave room for the names. */
button.track-icon {width:28px;height:28px;border-radius:8px}
.track-icon .instrument-picture,.track-icon .icon-svg,.track-icon svg {width:22px;height:22px}
.track-title {gap:6px}
.clip-instrument,#dropGhost .clip-instrument {width:16px;height:16px;flex-basis:16px}
.clip-instrument .instrument-picture,.clip-instrument .icon-svg,#dropGhost .clip-instrument .instrument-picture,#dropGhost .clip-instrument .icon-svg {width:15px;height:15px}
.clip-title {padding-right:25px}
.clip-loop-handle {width:18px;height:18px;right:4px;top:3px;padding:2px}
.clip-loop-handle .icon-svg {width:12px;height:12px}
.clip-loop-handle:before {content:'';position:absolute;inset:-6px;border-radius:50%;background:transparent}
.clip.compact .clip-loop-handle {width:14px;height:14px;right:-2px;top:3px;padding:1px}
.clip.compact .clip-loop-handle .icon-svg {width:10px;height:10px}
#trackColorPicker {width:220px}
.channel-color-grid {grid-template-columns:repeat(4,44px)}
@media(max-width:760px) {
  .track-controls {gap:5px}.track-controls .mix-button {width:28px;height:28px;flex-basis:28px}
  .track-controls input[data-volume] {min-width:20px}
  .category-selector {min-height:44px;padding:0;border-radius:11px}
  #categorySelect.category-trigger {min-height:42px;padding:6px 9px;gap:8px;font-size:12px}
  button.track-icon {width:26px;height:26px}
  .track-icon .instrument-picture,.track-icon .icon-svg,.track-icon svg {width:20px;height:20px}
  .selected-category-icon {width:30px;height:30px;flex-basis:30px}
  .selected-category-icon .instrument-picture,.selected-category-icon>.icon-svg {width:26px;height:26px}
  .category-option {min-height:40px}
}
@media(max-width:240px) {.channel-color-grid {grid-template-columns:repeat(4,minmax(0,1fr))}.color-choice {width:100%}}

/* Channel colors are also available by tapping its symbol, including on tablets. */
#trackIconPicker .channel-color-grid {grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-top:11px;padding-top:10px;border-top:1px solid #e8eef7}
#trackIconPicker .color-choice {width:100%;height:33px;padding:3px;border-radius:10px}
#trackIconPicker .color-choice:before {inset:3px;border-radius:7px}

/* The selected channel continues across the arrangement without hiding its grid. */
.lane.is-selected:not(.drag-over) {
  background-color:color-mix(in srgb,var(--track-color) 7%,white);
  border-bottom-color:var(--track-color);
  box-shadow:inset 0 -1px 0 var(--track-color);
}
/* Project room: short group entry and a visual list of saved compositions. */
.group-badge{border:0;border-radius:15px;background:#ede9ff;color:#6051a5;font-family:inherit;font-size:11px;font-weight:700;padding:8px 11px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.project-room{box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #e0dcef;border-radius:28px;padding:34px 38px 24px;background:#fffdfc;color:#3e4160;box-shadow:0 24px 100px #49447930;font-family:inherit}
.project-room::backdrop{background:#e8e6f4d9;backdrop-filter:blur(6px)}
.room-brand{display:flex;align-items:baseline;justify-content:center;font-size:54px;font-weight:800;letter-spacing:-5px;margin-bottom:12px}
.room-brand .brand-sub{font-size:15px;letter-spacing:-.5px;margin-left:10px;color:#6c6884}
.project-room h1{font-size:18px;font-weight:700;text-align:center;margin:6px 0 26px;letter-spacing:-.6px}
.room-close{position:absolute;right:14px;top:12px;width:32px;height:32px;border:0;background:#f1eff8;border-radius:50%;color:#79718e;font-size:22px;cursor:pointer}
.room-tabs{display:flex;border-radius:17px;background:#f1eef7;padding:5px;margin-bottom:24px;gap:5px}
.room-tabs button{flex:1;border:0;border-radius:13px;padding:12px 8px;background:transparent;font-family:inherit;font-size:13px;font-weight:700;color:#7a738f;cursor:pointer}
.room-tabs button[aria-selected=true]{background:white;color:#6c56b6;box-shadow:0 3px 9px #71648e14}
.project-room label:not(.room-checkbox){display:flex;flex-direction:column;gap:9px;font-size:13px;font-weight:700;margin:0 0 20px}
.project-room input:not([type=checkbox]),.project-room select{box-sizing:border-box;border:1.5px solid #ded8ed;border-radius:13px;background:white;color:#41415c;padding:14px 13px;width:100%;font-family:inherit;font-size:13px;outline:none}
.project-room input:focus,.project-room select:focus{border-color:#9e86d8;box-shadow:0 0 0 3px #9e86d81a}
.project-room input::placeholder{color:#a4a0b4}
.room-primary{width:100%;border:0;border-radius:15px;background:#8a6ac2;color:white;font-family:inherit;font-size:15px;font-weight:700;padding:15px 18px;display:flex;justify-content:center;align-items:center;gap:16px;cursor:pointer;box-shadow:0 4px 0 #7051a1;margin-top:8px}
.room-primary:hover{background:#7d60b2}.room-primary:active{transform:translateY(2px);box-shadow:0 2px 0 #7051a1}
.room-checkbox{display:flex;align-items:center;gap:8px;font-size:11px;line-height:1.7;margin-bottom:20px;color:#7a738a}.room-checkbox input{accent-color:#8a6ac2}
.room-resume{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;border:1px solid #d8e8e6;border-radius:14px;background:#f1f9f7;color:#5d8b86;padding:13px;font-family:inherit;margin-top:23px;cursor:pointer}.room-resume span{font-size:10px}.room-resume strong{font-size:12px}
.room-feedback{text-align:center;font-size:11px;color:#9b7580;line-height:1.7}.room-feedback p{margin:14px 0 6px}.room-retry{border:0;background:none;color:#8d85a2;text-decoration:underline;font-family:inherit;font-size:10px;cursor:pointer;padding:5px}
.room-note{font-size:12px;color:#9289a2;line-height:1.8;text-align:center}.room-projects{display:flex;flex-direction:column;gap:12px;max-height:380px;overflow:auto;padding:3px;overscroll-behavior:contain}
.saved-project{text-align:left;padding:14px;border:1px solid #e7e1f0;border-radius:19px;background:white;color:#5a5078;font-family:inherit;flex-shrink:0}
.saved-project.is-playing{border-color:#75c4b0;background:#f8fffc;box-shadow:0 0 0 2px #b5e7d629}
.saved-project-heading{display:flex;align-items:center;gap:11px;margin-bottom:13px}.saved-project-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.saved-project strong{font-size:13px;overflow-wrap:anywhere}.saved-project small{font-size:10px;color:#9a92a8}
.saved-project-icon{display:grid;place-items:center;width:37px;height:37px;flex-shrink:0;background:#f3eafa;color:#9c73bc;border-radius:12px}.saved-project-icon svg{width:23px;height:23px}
.saved-project button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;border:0;border-radius:11px;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer}
.saved-project button:focus-visible{outline:3px solid #a58bd6;outline-offset:2px}.saved-project button:hover{filter:brightness(.97)}
.saved-project .project-rename{width:44px;background:#f5f1fb;color:#8b72b3;flex-shrink:0}.saved-project button svg{width:18px;height:18px;flex-shrink:0}
.saved-project-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.saved-project-actions button{background:#f1ebfc;color:#8462b7;padding:9px 5px}
.saved-project-actions [data-project-action=play]{color:#398e78;background:#e9f7ef}.saved-project-actions [aria-pressed=true]{color:white;background:#58ae92}
.saved-project .project-delete{color:#bd6578;background:#fff0f2}
.project-rename-form,.project-delete-confirm{margin-top:13px;border-top:1px solid #ece5f3;padding-top:15px}
.project-room .project-rename-form label{font-size:11px;margin-bottom:11px;gap:8px}.project-room .project-rename-form input{padding:11px;font-size:12px}
.project-confirm-actions{display:flex;justify-content:flex-end;gap:8px}.project-confirm-actions button{padding:9px 12px;background:#f2eff7;color:#8e809f}
.project-confirm-actions .project-confirm{background:#8a6ac2;color:white}.project-confirm-actions .project-delete{background:#bd6578;color:white}
.project-delete-confirm p{font-size:12px;line-height:1.7;margin:0 0 12px;overflow-wrap:anywhere}
.room-entry{margin-bottom:12px;background:#edf6f4}.room-entry button[aria-selected=true]{color:#398e78}
.account-scope{margin-bottom:14px}.account-scope label{font-size:11px!important;margin:0 0 8px!important;color:#8b809d}.account-scope select{padding:12px!important;font-weight:700}
.group-choices{display:flex;gap:9px;margin:0 0 17px}.group-choices button{flex:1;min-height:40px;border:1px solid #e4dcee;border-radius:12px;background:#fbf8ff;font-family:inherit;font-size:11px;font-weight:700;color:#8462b7;cursor:pointer}
#accountGroupForm{padding:17px;background:#f8f5fc;border-radius:16px;margin-bottom:18px}#accountGroupForm h2{font-size:14px;margin:0 0 18px}#accountGroupForm label{font-size:11px;margin-bottom:14px}#accountGroupForm input{padding:11px}
.project-list-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 3px 12px}.project-list-heading>strong{font-size:12px;color:#9b8cab}
#roomTrash{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 11px;border:1px solid #e6e0ef;border-radius:12px;background:white;color:#9d7ca6;font:inherit;font-size:11px;cursor:pointer}#roomTrash svg{width:17px;height:17px}#roomTrash[aria-pressed=true]{background:#f6ecf4;border-color:#dec4d7}
.saved-project .restore-project{width:100%;background:#e8f6ed;color:#468e73}.project-restore-form{margin-top:14px;border-top:1px solid #ece4f0;padding-top:14px}.project-restore-form label{font-size:11px!important}
.trashed-project .saved-project-icon{background:#f2eff5;color:#ada2b6}.trashed-project small{font-size:10px}
.person{display:flex;align-items:center;gap:7px;font-size:10px;color:#8a7b9a}.person-picture{display:grid;place-items:center;width:29px;height:29px;flex-shrink:0;background:#eae4f7;color:#9378bb;border-radius:50%;overflow:hidden;font-size:12px;font-weight:700}.person-picture img{width:100%;height:100%;object-fit:cover}
.group-people{display:flex;flex-wrap:wrap;gap:11px;margin:0 0 17px}.group-people:empty{display:none}.account-avatar .person>span:last-child{display:none}.account-avatar .person-picture{width:44px;height:44px;font-size:20px}.room-identity>.account-avatar{flex-shrink:0}.room-identity>div{flex:1}
.room-identity #profilePhoto{font-size:9px;padding:8px 6px}.profile-settings{background:#f7f4fb;border-radius:15px;padding:15px;margin-bottom:18px}.photo-upload{border:1px dashed #c7badc;border-radius:13px;padding:14px}.photo-upload small{font-weight:400;color:#a495b2;font-size:10px}.project-room input[type=file]{font-size:10px;padding:8px}.profile-settings button{font-size:10px}
@media(max-width:440px){.saved-project{padding:12px}.saved-project-actions button{flex-direction:column;font-size:10px;gap:5px;padding:10px 2px}.saved-project-actions{gap:6px}.project-confirm-actions button{font-size:10px}}
.project-room button:disabled{opacity:.55;cursor:wait}.cloud-conflict{position:fixed;z-index:200;bottom:18px;left:50%;transform:translateX(-50%);width:min(900px,calc(100vw - 30px));box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;border:1px solid #dfb9a8;border-radius:17px;background:#fff3e8;padding:14px;box-shadow:0 5px 30px #77604c28;font-size:12px;color:#886343}.cloud-conflict button{border:1px solid #e2c9bb;background:white;border-radius:10px;padding:9px;color:#886343;font-family:inherit;cursor:pointer}.save-status[data-state=offline],.save-status[data-state=conflict]{color:#b37949}
@media(max-width:650px){.group-badge{max-width:100px;font-size:9px;padding:6px 8px}.project-room{padding:30px 24px 20px;border-radius:23px}.project-room h1{font-size:16px}.room-brand{font-size:48px}.cloud-conflict{font-size:11px}}
/* The shared touch controller pans and zooms the grid; only a short tap seeks. */
.timeline-scroll{touch-action:none;overscroll-behavior:contain;overflow-anchor:none}
.ruler,.ruler-bars,.ruler-bar,.lane,.loop-region,.loop-region>.loop-grip,.loop-handle{touch-action:none}
.lane,.clip,.track-header,#newTrackZone{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.track-header input{-webkit-user-select:text;user-select:text}
.clip{top:3px;height:calc(var(--row) - 6px)}
.clip-segments,.clip-content{height:calc(var(--row) - 34px)}
.clip-segments .waveform,.clip-content .waveform,.clip-repeat .waveform{height:calc(var(--row) - 34px)}
.zoom-axis-divider{width:1px;height:20px;background:#e4e8f2;margin:0 3px}
.vertical-zoom{position:relative;display:flex;align-items:center;justify-content:center}
.vertical-zoom small{position:absolute;right:0;bottom:0;font:10px var(--font);color:#6f8ab7;background:#f6f9ff;border-radius:3px;padding:0 1px}
.room-members{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.room-members input{min-width:0}.room-members label{font-size:11px!important}
.room-identity{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px 19px}
.room-identity>div{display:flex;flex-direction:column;gap:7px;min-width:0}.room-identity strong{font-size:14px;color:#705ba7;overflow-wrap:anywhere}.room-identity small{font-size:10px;color:#8a819c;overflow-wrap:anywhere}
.room-identity button{font-size:10px;color:#9a88b0;border:1px solid #e7e0f1;border-radius:10px;padding:8px;white-space:nowrap}
#memberSetup h2{font-size:14px;text-align:center;margin:10px 0 24px}
.save-status[data-state=auth],.save-status[data-state=error]{color:#b37949}
@media(max-width:1050px){#saveStatus[data-state]{display:block;position:fixed;right:12px;bottom:9px;z-index:110;background:#fffef9ee;border:1px solid #e5deed;border-radius:10px;padding:7px 10px;max-width:calc(100vw - 24px);font-size:10px;box-shadow:0 3px 15px #76628a16}}
@media(max-width:760px){.room-members{gap:7px}.room-members input{font-size:11px!important;padding-left:8px!important;padding-right:8px!important}.zoom-tools{gap:1px}.zoom-tools .vertical-zoom{width:26px}.zoom-axis-divider{margin:0 2px}}

/* Musical genres share the picker language, with their own abstract badges. */
.genre-selector{margin-top:9px;flex-shrink:0}
.genre-trigger{--genre-color:#8b91ac;display:flex;align-items:center;gap:11px;width:100%;min-height:50px;padding:7px 10px;border:1px solid color-mix(in srgb,var(--genre-color) 26%,white);border-radius:13px;background:color-mix(in srgb,var(--genre-color) 5%,white);font-size:12px;font-weight:700;color:#667893;text-align:left}
.genre-trigger:hover{background:color-mix(in srgb,var(--genre-color) 10%,white)!important}
#selectedGenreName{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.genre-badge{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 32px;color:var(--genre-color);background:color-mix(in srgb,var(--genre-color) 10%,white);border-radius:10px}
.genre-symbol{width:23px;height:23px;flex-shrink:0}
.genre-menu{padding:6px;scroll-padding:6px}
.genre-option{display:flex;align-items:center;gap:12px;width:100%;min-height:49px;padding:7px 10px;border-radius:11px;font-size:12px;font-weight:700;text-align:left;color:#64748c}
.genre-option>span:last-child{flex:1}
.genre-option:hover,.genre-option:focus-visible{background:color-mix(in srgb,var(--genre-color) 8%,white);outline:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--genre-color) 24%,white)}
.genre-option[aria-selected=true]{background:color-mix(in srgb,var(--genre-color) 11%,white);color:color-mix(in srgb,var(--genre-color) 68%,#33445b)}
.genre-option[aria-selected=true]:after{content:'';width:6px;height:6px;border-radius:50%;background:var(--genre-color)}
/* A steady musical counter and whole seconds replace the flickering decimals. */
.time-display{display:flex;align-items:center;gap:17px;margin-left:8px;min-width:0;height:58px;padding:8px 15px;border:1px solid #e5eaf4;border-radius:16px;background:#f7f9fe;font-family:var(--font);font-variant-numeric:tabular-nums;box-shadow:inset 0 1px 0 #fff}
.musical-position{position:relative;min-width:79px;padding-bottom:7px}
.counter-caption{display:block;margin:0 0 4px;font-size:7px;line-height:1.25;font-weight:700;letter-spacing:.65px;color:#97a3b8;white-space:nowrap}
.musical-position>strong{display:flex;align-items:baseline;justify-content:flex-start;gap:7px;font-size:22px;line-height:1;font-weight:700;color:#7580bb}
.position-dot{color:#c1c6dc;font-size:15px}
#beatPosition{min-width:15px;font-size:17px;color:#8e99c4}
.beat-steps{display:flex;gap:4px;position:absolute;bottom:-1px;left:1px}
.beat-steps i{width:12px;height:3px;border-radius:2px;background:#e0e5f2}
.beat-steps i.current{background:#a5afce}.beat-steps.is-playing i.current{background:#62bea9}
.clock-position{padding-left:16px;border-left:1px solid #e2e7f1;min-width:110px;display:grid;grid-template-columns:auto 1fr;column-gap:6px;align-items:baseline}
.clock-position .counter-caption{grid-column:1/-1}
.clock-position>strong{font-size:20px;font-weight:700;line-height:1.2;color:#4e6587;letter-spacing:-.6px}
.clock-position .total-time{font:600 9px var(--font);color:#a2adc0;white-space:nowrap}
.time-display #projectLength{font:600 10px var(--font);color:#96a4b9}
.time-display #barCount{display:none}
/* The active identity stays visible beside the project, including on tablets. */
.group-badge{display:inline-flex;align-items:center;gap:8px;max-width:185px;min-height:44px;padding:5px 11px 5px 5px;border:1px solid #e7e1f2;border-radius:16px;background:#f7f3fc;color:#8771a6;font-size:11px;overflow:hidden;flex-shrink:0}
.identity-picture{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;overflow:hidden;border-radius:11px;background:#e9e2f4;color:#987cb6;font-weight:700;font-size:15px}
.identity-picture img{width:100%;height:100%;object-fit:cover}
.group-badge-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group-photo-row{display:flex;align-items:center;gap:9px;padding:12px;margin:0 0 17px;background:#f8f5fc;border-radius:15px}
.group-photo-row strong{flex:1;min-width:0;font-size:12px;color:#8771a6;overflow-wrap:anywhere}
.group-photo-row button{font-size:10px;color:#8e78a5;border:1px solid #e6dff0;border-radius:10px;padding:9px;background:white}
@media(max-width:1100px){.app-header{gap:13px}.project-name{width:175px}.group-badge{max-width:165px}.time-display{gap:12px;padding:8px 12px}.clock-position{padding-left:12px;min-width:101px}}
@media(max-width:760px){.genre-selector{margin-top:7px}.genre-trigger{min-height:44px;padding:6px 9px;font-size:11px}.genre-badge{width:30px;height:30px;flex-basis:30px}.genre-symbol{width:22px;height:22px}.time-display{height:50px;gap:10px;margin-left:3px;padding:6px 10px;border-radius:13px}.musical-position{min-width:68px}.musical-position>strong{font-size:20px}.counter-caption{font-size:6px;letter-spacing:.4px}.clock-position{min-width:91px;padding-left:10px;column-gap:4px}.clock-position>strong{font-size:17px}.time-display #projectLength{font-size:8px}.beat-steps{gap:3px}.beat-steps i{width:10px}.group-badge{display:inline-flex;max-width:140px;font-size:10px;min-height:38px;padding:4px 8px 4px 4px}.group-badge .identity-picture{width:28px;height:28px;flex-basis:28px;border-radius:9px;font-size:12px}.app-header{gap:10px}.project-name{flex:1;min-width:50px}}
@media(max-width:440px){.app-header{gap:7px}.group-badge{max-width:102px;font-size:9px;gap:5px}.group-badge .identity-picture{width:26px;height:26px;flex-basis:26px}.time-display{gap:7px;padding:6px 7px}.clock-position{min-width:82px;padding-left:7px}.musical-position{min-width:62px}.counter-caption{font-size:5.5px}.clock-position>strong{font-size:16px}.clock-position .total-time{font-size:8px}.group-photo-row{gap:7px;padding:10px}.group-photo-row button{font-size:9px;padding:8px}}

/* JaMixLab wordmark: three words, three colors, one shared lab. */
.brand,.room-brand{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;letter-spacing:-1.4px;line-height:1}
.brand{font-size:28px;font-weight:700;flex-shrink:0}
.brand-word{display:inline-flex;align-items:baseline;white-space:nowrap}
.brand-ja{color:#e45b68}.brand-mix{color:#e5ac28}.brand-lab{color:#36ad82}
.brand-tagline{font-size:8px;font-weight:600;letter-spacing:.3px;color:#8898ad;line-height:1.4;white-space:nowrap}
.room-brand{display:flex;align-items:center;margin-bottom:23px;font-size:49px;letter-spacing:-2.5px;gap:12px}
.room-brand .brand-tagline{font-size:11px;letter-spacing:.6px}
@media(max-width:760px){.brand{font-size:24px;gap:5px}.brand-tagline{font-size:6.5px;letter-spacing:.15px}.room-brand{font-size:43px}.room-brand .brand-tagline{font-size:10px}}
@media(max-width:440px){.brand{font-size:21px}.brand-tagline{font-size:5.8px}.room-brand{font-size:41px}}
/* Keep the subtitle aligned to both ends of the wordmark. */
.brand,.room-brand{width:max-content}
.room-brand{margin-left:auto;margin-right:auto}
.brand-tagline{align-self:stretch;text-align:justify;text-align-last:justify}

/* Larger subtitle, with natural spacing between the words. */
.brand .brand-tagline,.room-brand .brand-tagline{font-size:.439em;letter-spacing:0;word-spacing:normal;text-align:left;text-align-last:auto;align-self:flex-start;font-weight:500}

/* A single transport family: identical height, corners, borders and icon sizes. */
.transport-bar{--transport-size:48px;height:78px;min-height:78px;padding:0 26px;gap:10px;flex-wrap:nowrap;align-items:center;background:#fff}
.transport-bar .play-controls,.transport-bar .transport-toggles,.transport-bar .edit-tools{display:flex;align-items:center;flex:0 0 auto;gap:8px;min-width:0;margin:0}
.transport-bar .play-button,.transport-bar .stop-button,.transport-bar .transport-toggle,.transport-bar .icon-button,.tempo-control>button{height:var(--transport-size);min-height:var(--transport-size);width:var(--transport-size);padding:0;border:1px solid #e2e8f1;border-radius:14px;display:inline-flex;justify-content:center;align-items:center;box-shadow:0 2px 0 #4f638508;flex:0 0 auto;background:#f6f8fc;color:#687b98}
.transport-bar .control-icon,.transport-bar .icon-svg{width:23px;height:23px}
.transport-bar .play-button{background:#48b49e;border-color:#48b49e;color:white}.transport-bar .play-button:hover:not(:disabled){background:#3ba88f}
.transport-bar .transport-toggle.active{background:#eee9fa;border-color:#d2c6ef;color:#8061ba}
.transport-bar .stop-button{color:#7e8fa9}.transport-bar .icon-button:disabled{opacity:.4}
.transport-bar .time-display{height:var(--transport-size);margin:0;padding:0;gap:0;border:0;border-radius:0;background:none;box-shadow:none;display:flex;flex:0 0 auto;align-items:center}
.transport-bar .musical-position,.transport-bar .clock-position{height:var(--transport-size);padding:7px 12px;min-width:95px;border:1px solid #e2e8f1;border-radius:14px;box-shadow:0 2px 0 #4f638508;background:#f6f8fc;display:grid;grid-template-columns:auto;align-content:center;gap:2px}
.transport-bar .clock-position{margin-left:8px;grid-template-columns:auto auto;column-gap:6px;min-width:137px}.transport-bar .clock-position .counter-caption{grid-column:1/-1}
.transport-bar .counter-caption{font:600 8px var(--font);letter-spacing:0;color:#8c9bb0;margin:0;line-height:1}
.transport-bar .musical-position>strong,.transport-bar .clock-position>strong{font:600 18px var(--font);font-variant-numeric:tabular-nums;color:#526987;line-height:1.15;letter-spacing:0;display:flex;gap:3px;align-items:baseline;justify-content:flex-start}
.transport-bar #beatPosition{font:inherit;color:inherit;min-width:0}.transport-bar .position-dot{font:inherit;color:#a8b4c5}.transport-bar .beat-steps{display:none}
.transport-bar .clock-position .total-time,.transport-bar #projectLength{font:500 11px var(--font);color:#98a5b8;align-self:end;line-height:1.7}
.transport-bar .tempo-control{position:relative;display:block;flex:0 0 auto;padding:0;background:none;border-radius:0;margin:0}
.tempo-control>button{width:110px;gap:6px;background:#fff8e7;border-color:#eee1ba;color:#a4863d}.tempo-control>button strong{font:600 18px var(--font)}.tempo-control>button>span:last-child{font:600 9px var(--font);text-transform:none;color:#aa955f}
.tempo-control>button[aria-expanded=true]{background:#fff0bf;border-color:#dfc66e}
.tempo-panel{position:absolute;top:calc(100% + 10px);left:0;width:245px;padding:17px 18px 13px;background:#fff;border:1px solid #e8dfc6;border-radius:17px;box-shadow:0 14px 40px #52607b22;z-index:150}
.tempo-panel label{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:#73829a;gap:14px}.tempo-panel label>span{font-size:10px;color:#9b8b62}
.tempo-panel #bpm{width:53px;font:600 20px var(--font);padding:6px 4px;background:#fff8e7;border-radius:8px;text-align:center;color:#987a35}
.tempo-panel input[type=range]{display:block;width:100%;height:36px;margin:8px 0 0;accent-color:#d4aa43;background:none;touch-action:pan-y}
.tempo-limits{display:flex;justify-content:space-between;font:10px var(--font);color:#aab3c2}
.header-actions .file-button,.header-actions .export-button{height:48px;min-height:48px;padding:0 14px;border-radius:14px;border:1px solid #e2e8f1;box-shadow:0 2px 0 #4f638508}.header-actions .file-button{width:48px;padding:0;background:#f6f8fc}.header-actions .export-button{background:#edf8f3;border-color:#cfe5da;color:#58a38a}
@media(max-width:1100px){.transport-bar{gap:8px;padding:0 18px}.transport-bar .musical-position{min-width:82px}.transport-bar .clock-position{min-width:126px;padding-left:10px;padding-right:10px}.tempo-control>button{width:104px}.transport-bar .transport-spacer{display:block}}
@media(max-width:760px){.transport-bar{height:auto;min-height:112px;padding:12px 14px;gap:9px 8px;flex-wrap:wrap}.transport-bar .play-controls{flex:0 0 auto}.transport-bar .time-display{flex:1}.transport-bar .musical-position{min-width:77px}.transport-bar .clock-position{min-width:125px}.transport-bar .tempo-control{flex:0 0 auto}.transport-bar .transport-spacer{display:block;flex:1}.transport-bar .edit-tools{margin-left:0}.studio-shell{height:calc(100dvh - 178px)}.tempo-panel{left:auto;right:0}}
@media(max-width:440px){.transport-bar{--transport-size:44px;padding:10px;gap:8px;min-height:116px}.transport-bar .play-controls,.transport-bar .transport-toggles,.transport-bar .edit-tools{gap:6px}.transport-bar .time-display{flex:1}.transport-bar .musical-position{min-width:73px;padding:6px 10px}.transport-bar .clock-position{margin-left:6px;min-width:119px;padding:6px 10px}.transport-bar .tempo-control{order:3}.transport-bar .transport-toggles{order:4}.transport-bar .transport-spacer{order:5}.transport-bar .edit-tools{order:6}.tempo-control>button{width:110px}.tempo-panel{right:auto;left:0}.transport-bar .counter-caption{font-size:8px}.transport-bar .clock-position>strong{font-size:18px}}
.tempo-control>.tempo-panel{display:block}
.transport-bar #loopBtn:not(.active),.transport-bar #metronomeBtn:not(.active){background:#f6f8fc;border-color:#e2e8f1;color:#7c8eaa}
.transport-bar #loopBtn.active,.transport-bar #metronomeBtn.active{background:#e2f5ed;border-color:#b4dbc9;color:#449d82}
.transport-bar .counter-caption{font-size:9px}
.tempo-panel output{display:inline-block;min-width:53px;font:600 20px var(--font);padding:6px 4px;background:#fff8e7;border-radius:8px;text-align:center;color:#987a35}
.transport-bar #metronomeBtn .control-icon,.transport-bar #tempoToggle .control-icon{width:23px;height:23px}
.app-header .group-badge{height:48px;min-height:48px;border-radius:14px}
@media(max-width:440px){.studio-shell{height:calc(100dvh - 182px)}.app-header .group-badge,.header-actions .file-button,.header-actions .export-button{height:44px;min-height:44px}}
.play-button[aria-busy=true]{position:relative;opacity:.8}.play-button[aria-busy=true] .icon-svg{opacity:0}.play-button[aria-busy=true]:after{content:'';position:absolute;width:20px;height:20px;border:2px solid #ffffff55;border-top-color:white;border-radius:50%;animation:prepare-notes .8s linear infinite}@keyframes prepare-notes{to{transform:rotate(360deg)}}

/* Keep the sound library first by genre, and let the arrangement take its space. */
.library-content{display:flex;flex-direction:column;min-height:0;flex:1}
.library-heading{gap:8px}.library-heading h1{margin-right:auto}.library-heading .sound-count{margin-left:0}
.library-toggle{width:32px;height:32px;flex:0 0 32px;border:1px solid #e4e9f3;border-radius:10px;background:#f6f8fc;color:#7d8eaa;display:grid;place-items:center}
.library-toggle>span,.key-caret{width:7px;height:7px;border-top:1.7px solid currentColor;border-right:1.7px solid currentColor;transform:rotate(-135deg)}
.library-toggle:hover{background:#edf1f9}.library-toggle[aria-expanded=false]>span{transform:rotate(45deg)}
.library-content>.genre-selector{margin:0 0 9px}
.studio-shell.library-collapsed{grid-template-columns:52px minmax(0,1fr)}
.library-collapsed .library{padding:14px 9px 0}.library-collapsed .library-heading{padding:0;margin:0}
.library-collapsed .library-heading h1,.library-collapsed .sound-count{display:none}
/* The key selector belongs to the same transport family as tempo and playback. */
.key-control{position:relative;flex:0 0 auto}
.transport-bar .key-control>button{position:relative;display:grid;grid-template-columns:1fr auto;align-content:center;column-gap:12px;width:88px;height:var(--transport-size);min-height:var(--transport-size);padding:6px 12px;border:1px solid #d8dfef;border-radius:14px;background:#f0f3fc;color:#7081b4;box-shadow:0 2px 0 #4f638508;text-align:left}
.key-caption{grid-column:1/-1;font-size:9px;line-height:1.1;font-weight:600;margin-bottom:3px}
.key-control>button strong{font:600 18px var(--font);line-height:1.1}.key-caret{align-self:center;width:6px;height:6px;transform:rotate(135deg);margin-top:-4px}
.key-control>button[aria-expanded=true]{background:#e5eafa;border-color:#b9c5e5}
.key-panel{position:absolute;top:calc(100% + 10px);left:0;width:270px;padding:14px;background:#fff;border:1px solid #e0e6f2;border-radius:18px;box-shadow:0 14px 40px #52607b22;z-index:151}
.key-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.key-choices button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;min-height:56px;padding:8px 4px;border:1px solid #e8edf5;border-radius:12px;background:#fafbfe;color:#7385a8}
.key-choices strong{font-size:16px}.key-choices span{font-size:10px}.key-choices button:hover{background:#f0f3fc}
.key-choices button[aria-pressed=true]{background:#e9e6fa;border-color:#b5a7e1;color:#7963b4}
.key-harmony{margin-top:13px;text-align:center;font-size:12px;font-weight:700;color:#8795af}
#keyAudioNotice{font-size:10px;line-height:1.7;margin:12px 0 0;color:#8c92a1}
@media(max-width:760px){
 .library-collapsed .library{padding:6px 13px}.library-collapsed .library-heading h1{display:block;font-size:13px}.library-collapsed .library-heading{justify-content:space-between}
 .library-toggle>span{transform:rotate(-45deg)}.library-toggle[aria-expanded=false]>span{transform:rotate(135deg)}
 .library-content{flex:initial}.library-content>.genre-selector{margin:0 0 7px}
 .key-panel{left:auto;right:0}.transport-bar .key-control>button{width:82px}
}
@media(max-width:440px){.key-control{order:3}.key-panel{left:auto;right:-45px}.transport-bar .key-control>button{width:78px}.transport-bar .tempo-control>button{width:100px}}
.key-control>.key-panel{position:fixed;right:auto;overflow:auto}
@media(min-width:761px) and (max-width:950px){
 .transport-bar{--transport-size:44px;gap:6px;padding:0 14px}
 .transport-bar .musical-position{min-width:77px;padding:6px 9px}.transport-bar .clock-position{min-width:110px;padding:6px 9px}
 .transport-bar .tempo-control>button{width:98px}.transport-bar .key-control>button{width:78px}
}
@media(max-width:440px){.transport-bar{column-gap:6px}.transport-bar .tempo-control>button{width:85px}.transport-bar .key-control>button{width:64px;padding-left:9px;padding-right:9px;column-gap:7px}}

/* The same pitch keeps its Boomwhackers color on keys, notes and chord badges. */
.note-key,.note-key.is-sharp,.note-key.is-c{color:color-mix(in srgb,var(--pitch-color) 68%,#263044);background:color-mix(in srgb,var(--pitch-color) 13%,white);border-bottom-color:color-mix(in srgb,var(--pitch-color) 23%,#e5eaf3);border-left:5px solid var(--pitch-color)}
.note-key:hover,.note-key:active{background:color-mix(in srgb,var(--pitch-color) 26%,white)}
.note-row,.note-row.is-sharp{background-color:color-mix(in srgb,var(--pitch-color) 4%,white)}
.note-event{background:var(--pitch-color);border-color:color-mix(in srgb,var(--pitch-color) 75%,#263044);box-shadow:inset 0 2px 0 #ffffff45,0 2px 2px #2335540d}
.note-event.selected{outline-color:#35436b;box-shadow:0 0 0 3px white,0 3px 8px #38416c30}
.note-measures>.note-measure>span{font-size:12px;font-weight:700;color:color-mix(in srgb,var(--pitch-color) 70%,#263044);background:color-mix(in srgb,var(--pitch-color) 15%,white);border:1px solid color-mix(in srgb,var(--pitch-color) 25%,white);border-radius:8px;padding:4px 8px;white-space:nowrap}
.note-play-controls{display:flex;gap:6px;flex-shrink:0}
.note-play-controls>button{display:grid;place-items:center;min-width:40px;width:40px;height:40px;padding:0;border-radius:13px;border:1px solid #d7e5e4}
.note-play-controls>.note-listen{background:#e5f5ef;color:#258a70}.note-play-controls>.note-listen.is-playing{background:#258a70;color:white}
.note-play-controls>.note-stop{background:#fceef2;color:#c0758b;border-color:#efdde5}
.note-play-controls>button svg{width:18px;height:18px}
.note-scale,.project-scale-control{position:relative;display:flex;flex-direction:column;justify-content:center;border:1px solid #d8dfef;background:#f0f3fc;border-radius:13px;color:#7081b4;min-width:0}
.note-scale>span,.project-scale-control>span{font-size:9px;font-weight:600;line-height:1.1;pointer-events:none}
.note-scale>select,.project-scale-control>select{font-weight:700;cursor:pointer;padding:0 18px 0 0;width:100%;appearance:none;background:transparent;color:#596e9f;text-overflow:ellipsis}
.note-scale:after,.project-scale-control:after{content:'';position:absolute;right:12px;bottom:13px;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);pointer-events:none}
.note-scale{width:230px;height:44px;padding:5px 11px;gap:5px}.note-scale>select{font-size:11px}.note-scale[hidden]{display:none}
.transport-bar .key-control>button{width:72px;column-gap:8px}.key-control>button strong{font-size:16px}
.project-scale-control{height:var(--transport-size);min-height:var(--transport-size);width:190px;padding:6px 11px;gap:6px;flex:0 0 auto;box-shadow:0 2px 0 #4f638508}
.project-scale-control>select{font-size:11px}
.studio-shell{height:calc(100dvh - var(--studio-top,158px))}
@media(max-width:1100px){.project-scale-control{width:166px}.transport-bar{gap:7px}.transport-bar .key-control>button{width:66px}}
@media(max-width:950px){.transport-bar{flex-wrap:wrap;height:auto;min-height:74px;padding-top:10px;padding-bottom:10px}.project-scale-control{width:170px}.transport-spacer{display:none}}
@media(max-width:540px){.note-scale{flex:1;min-width:170px}.note-editor-tools{gap:7px}.note-tool{padding:0 9px}.project-scale-control{width:158px;order:3}.transport-bar .key-control>button{width:64px}.note-scroll{min-height:140px}}
.note-event:hover:not(:disabled){background:color-mix(in srgb,var(--pitch-color) 90%,white)}
/* A quiet piano keyboard with a small color cue before each note name. */
.note-key,.note-key.is-sharp,.note-key.is-c{display:flex;align-items:center;justify-content:flex-end;gap:7px;border-left:0;border-bottom:1px solid #e5eaf3;background:#fff;color:#7586a0;font-weight:600}
.note-key.is-sharp{background:#e9edf5;color:#78849a}.note-key.is-c{color:#5868b6;background:#eef0ff;border-bottom-color:#cbd3e8;font-weight:700}
.note-key:hover,.note-key:active{background:#dbeafc}
.note-pitch-dot{width:7px;height:7px;flex:0 0 7px;display:inline-block;border-radius:50%;background:var(--pitch-color);box-shadow:0 0 0 1px #23355412}
.note-row{background-color:white}.note-row.is-sharp{background-color:#f5f7fb}
.note-root{display:flex;flex-direction:column;justify-content:center;gap:5px;width:72px;height:44px;padding:5px 9px;border:1px solid #d8dfef;background:#f0f3fc;border-radius:13px;color:#7081b4}
.note-root>span{font-size:9px;font-weight:600}.note-root select{font-size:11px;font-weight:700;padding:0;cursor:pointer;color:#596e9f}.note-root[hidden]{display:none}
.note-scale{width:204px}
@media(max-width:540px){.note-scale{min-width:135px}.note-key{gap:5px;padding-right:6px}.note-pitch-dot{width:6px;height:6px;flex-basis:6px}}
/* Drum steps show one full cell, independent of sample/note release length. */
.note-measures{grid-template-columns:var(--note-key-width,88px) repeat(4,1fr)}
.note-keys{flex-basis:var(--note-key-width,88px)}.note-key{width:var(--note-key-width,88px)}
.is-drums .note-key{justify-content:flex-start;gap:9px;padding:0 10px;color:#71819c;background:#f8fafe;border-bottom-color:#e4eaf4;font-size:10px;text-align:left}
.is-drums .note-key>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.is-drums .note-key>svg{width:24px;height:24px;flex:0 0 24px;color:var(--pitch-color)}
.is-drums .note-row{background-color:#fff}.is-drums .note-measures>.note-measure>span{display:none}
.is-drums .note-event{min-width:0;border-radius:7px;height:calc(var(--note-row) - 6px);background:color-mix(in srgb,var(--pitch-color) 65%,white);border:1.5px solid var(--pitch-color);box-shadow:inset 0 2px 0 #ffffff99}
.is-drums .note-event:hover:not(:disabled){background:color-mix(in srgb,var(--pitch-color) 82%,white)}
.is-drums .note-event>.note-shine{width:45%;height:3px;margin:0 auto}
.is-drums #noteSelected,.is-drums .note-length{display:none}
.is-drums .note-selection{gap:10px}.is-drums .note-editor-footer{min-height:68px}
.is-drums .note-scroll{height:min(420px,calc(100dvh - 270px))}
.drum-view{position:relative;display:flex;align-items:center;gap:10px;padding:0 13px;height:44px;border:1px solid #d8e8e4;border-radius:13px;background:#eef9f5;color:#4b9c86}
.drum-view[hidden]{display:none}.drum-view-symbol svg{display:block;width:23px;height:23px}
.drum-view select{font-size:12px;font-weight:700;cursor:pointer;padding:4px 0;min-width:105px}

.note-event{background:color-mix(in srgb,var(--pitch-color) 58%,white);border-color:color-mix(in srgb,var(--pitch-color) 68%,white)}
.note-event:hover:not(:disabled){background:color-mix(in srgb,var(--pitch-color) 70%,white)}
.note-pitch-dot{background:color-mix(in srgb,var(--pitch-color) 78%,white)}
.note-event>.note-resize{width:16px;right:-5px;top:-6px;bottom:-6px}
.note-event>.note-resize::after{right:6px;background:#ffffffc9;height:12px}
.note-event.selected>.note-resize{width:22px;right:-7px}.note-event.selected>.note-resize::after{right:8px}

.is-drums .note-scroll{height:min(420px,calc(var(--note-row) * var(--drum-count,4) + 38px),calc(100dvh - 270px))}
.is-drums .note-key{font-size:11px}

.note-context-menu{position:fixed;z-index:200;min-width:190px;padding:7px;background:white;border:1px solid #e2e7f2;border-radius:16px;box-shadow:0 12px 35px #2739562e}
.note-context-menu[hidden]{display:none}
.note-context-menu>button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;text-align:left;font-size:12px;border-radius:10px;color:#6c7d9f}
.note-context-menu>button svg{width:18px;height:18px}.note-context-menu>.note-menu-delete{color:#c46e83;border-top:1px solid #f0e8ed;border-radius:0 0 10px 10px;margin-top:5px}
.note-context-menu>button:focus-visible{outline:2px solid #a4b4e6;outline-offset:-2px;background:#f1f4fc}
.drum-view select{min-width:155px}

/* A starting note, with the same soft Boomwhackers cues as the piano roll. */
.transport-bar .key-control>button{width:112px;column-gap:8px}
.key-control>button strong{display:flex;align-items:center;gap:7px;font-size:16px;white-space:nowrap}
.key-caption{font-size:10px}
.key-pitch-dot{display:inline-block;flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--pitch-color) 72%,white);box-shadow:0 0 0 1px #33456a12}
.key-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:270px;padding:10px}
.key-panel[hidden]{display:none}
.key-panel>button{display:flex;align-items:center;gap:8px;min-height:46px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--pitch-color) 24%,#e5eaf3);border-radius:12px;background:color-mix(in srgb,var(--pitch-color) 8%,white);font-size:13px;font-weight:600;color:#596b8e}
.key-panel>button:hover,.key-panel>button:focus-visible{background:color-mix(in srgb,var(--pitch-color) 18%,white);outline:2px solid #879bc4;outline-offset:1px}
.key-panel>button[aria-selected=true]{background:color-mix(in srgb,var(--pitch-color) 22%,white);border-color:color-mix(in srgb,var(--pitch-color) 60%,#ccd5e7)}
@media(max-width:540px){.transport-bar .key-control>button{width:100px}}

/* A loop's own starting note stays available in every pitched scale. */
.note-root{position:relative;display:block;flex:0 0 108px;width:108px;height:44px;padding:0;border:0;background:transparent}
.note-root>button{position:relative;display:grid;grid-template-columns:1fr auto;align-content:center;gap:4px 8px;width:100%;height:44px;padding:5px 10px;border:1px solid #d8dfef;border-radius:13px;background:#f0f3fc;color:#7081b4;text-align:left}
.note-root-caption{grid-column:1/-1;font-size:9px;font-weight:600;line-height:1.1}
.note-root>button strong{display:flex;align-items:center;gap:7px;font-size:12px;line-height:1.1;font-weight:700;white-space:nowrap}
.note-root>button[aria-expanded=true]{background:#e5eafa;border-color:#b9c5e5}
.note-root-menu{position:fixed;right:auto;overflow:auto;z-index:230}

/* The current starting note remains readable beside each loop's identity. */
.clip.has-tonic{container-type:inline-size;container-name:clip}
.clip-title>span.clip-tonic{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;max-width:48px;padding:2px 5px;border:1px solid color-mix(in srgb,var(--pitch-color) 22%,white);border-radius:6px;background:color-mix(in srgb,var(--pitch-color) 12%,#fff);color:#59677e;font-size:9px;font-weight:700;line-height:1;overflow:hidden;white-space:nowrap;box-shadow:0 1px 2px #25355708}
.clip-tonic>i{display:block;flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--pitch-color) 78%,white)}
.clip-title>.clip-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis}
.clip.compact .clip-title>span.clip-tonic{display:inline-flex}
@container clip (max-width:100px){.clip-title>.clip-name{display:none}.clip-title{gap:4px;padding-left:5px;padding-right:22px}}
@container clip (max-width:90px){.clip-title>.clip-instrument{display:none}}
@container clip (max-width:56px){.clip-title{padding:3px 20px 0 3px}.clip-title>span.clip-tonic{padding:2px 3px}.clip-tonic>.clip-tonic-name{display:none}}

/* A drag preview has exactly the same usable drawing height as the dropped clip. */
#dropGhost,.drop-ghost{top:3px;height:calc(var(--row) - 6px);padding:0;display:block;box-sizing:border-box}
.clip-view-toggle{display:flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid #e0e5f2;border-radius:10px;background:#f6f8fd;color:#8190b1;font:600 11px var(--font);white-space:nowrap}
.clip-view-toggle .icon-svg{width:18px;height:18px}.clip-view-toggle[aria-pressed=true]{background:#ece9fb;border-color:#c9c0ec;color:#7564b8}
.piano-mini{background:#ffffff24}
@media(max-width:950px){.clip-view-toggle{width:32px;padding:0}.clip-view-toggle>span:last-child{display:none}}
#groupSettingsForm{display:grid;gap:14px;padding-bottom:20px;margin-bottom:18px;border-bottom:1px solid #e3e6f0}
#groupSettingsForm[hidden]{display:none}
#groupSettingsForm h2{font-size:18px;margin:0}
.group-directory select{width:100%;min-height:46px;padding:10px 38px 10px 14px;border:1px solid #dddfee;border-radius:14px;background:#f5f3fc;color:#5b567c;font:inherit}
.note-quantize{display:flex;align-items:center;gap:3px}
.note-quantize select{min-height:38px;border:1px solid #dcdfee;border-radius:12px;background:#f5f3fc;color:#68628f;padding:4px 7px;font:inherit;font-size:12px}
.note-grid.is-erasing .note-event{cursor:crosshair}
#noteEraseMode[aria-pressed="true"]{background:#ffe7eb;border-color:#e5a3b2;color:#a54a65}

/* JamMixLab 0.1: a shared illustration style and a compact classroom identity. */
.brand,.room-brand{flex-direction:row;align-items:center;gap:10px;position:relative}
.brand-type{display:flex;flex-direction:column;gap:5px;min-width:0}
.brand-mark{width:46px;height:46px;flex:none;filter:drop-shadow(0 2px 2px #7772a40c)}
.brand .brand-tagline,.room-brand .brand-tagline{font-size:.439em;letter-spacing:0;white-space:nowrap}
.brand .brand-word{letter-spacing:-1.25px}
.version-badge{font:600 10px/1 'Quicksand',sans-serif;letter-spacing:0;color:#817b9d;background:#f3f1fa;border:1px solid #e7e3f1;border-radius:7px;padding:4px 5px;align-self:flex-start;margin-top:2px}
.room-brand .brand-mark{width:67px;height:67px}
.room-brand .version-badge{font-size:12px;margin-top:5px}
.app-header{gap:12px}
.app-header .project-name{min-width:60px;flex:1 1 100px;width:100px}
.app-header .group-badge{min-width:0;max-width:190px;flex:0 1 auto;padding:6px 11px 6px 6px;gap:8px;background:#f5faf8;border-color:#dcece6;color:#467f70}
.app-header .group-badge.is-guest{background:#f6f5fc;border-color:#e8e4f3;color:#7c719e}
.group-badge .identity-picture{width:30px;height:30px;min-width:30px;border-radius:10px;font-weight:700;background:#e8f2ee;color:#4d917e;display:grid;place-items:center;overflow:hidden}
.group-badge.is-guest .identity-picture{background:#ece8f6;color:#9381b5}
.group-badge .identity-picture .icon-svg{width:21px;height:21px}
.group-badge-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:650}
.icon-svg,.genre-symbol,.drum-symbol{overflow:visible}
.instrument-vector .instrument{width:100%;height:100%}
.genre-badge .genre-symbol{width:24px;height:24px}
.room-close .icon-svg{width:22px;height:22px}
.note-editor-heading{cursor:grab;touch-action:none;user-select:none}
.note-editor-heading.is-dragging{cursor:grabbing}
.note-editor-heading:focus-visible{outline:2px solid #9990c8;outline-offset:-5px;border-radius:20px 20px 0 0}
.note-drag-grip{display:flex;align-items:center;color:#b4adc9;width:12px;flex:none;margin-left:-10px;margin-right:-5px}
.note-drag-grip .icon-svg{width:16px;height:24px}
.note-editor-heading button,.note-editor-heading input{cursor:pointer}
.note-editor-heading h2,.note-editor-heading p{cursor:inherit}
@media(max-width:1000px){.app-header .save-status{display:none}.app-header .group-badge{max-width:185px}.brand-mark{width:40px;height:40px}.brand{gap:8px}.version-badge{margin-left:-3px}}
@media(max-width:650px){.app-header{gap:8px;flex-wrap:wrap}.brand{font-size:25px;flex:1}.app-header .project-name{order:3;flex:1 1 45%;width:45%;font-size:13px}.app-header .group-badge{order:4;max-width:50%;height:38px;min-height:38px}.app-header .header-actions{margin-left:auto}.brand-mark{width:37px;height:37px}.room-brand{gap:8px}.room-brand .brand-mark{width:48px;height:48px}.room-brand .brand-type{font-size:34px}.room-brand .version-badge{font-size:10px}.note-drag-grip{margin-left:-5px}}

.note-select-symbol{border:0;background:none;width:18px;height:18px;display:inline-flex}.note-select-symbol:before,.note-select-symbol:after{display:none}.note-select-symbol .icon-svg{width:18px;height:18px}

/* A small musical face, with a quiet rhythm. */
.logo-bar{transform-box:fill-box;transform-origin:center;animation:jam-bounce 2.8s ease-in-out infinite}.logo-bar-two{animation-delay:-.8s}.logo-bar-three{animation-delay:-1.6s}.logo-eyes{transform-box:fill-box;transform-origin:center;animation:jam-blink 6s infinite}@keyframes jam-bounce{0%,100%{transform:translateY(0) scaleY(.85)}50%{transform:translateY(-2px) scaleY(1.1)}}@keyframes jam-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.08)}}@media(prefers-reduced-motion:reduce){.logo-bar,.logo-eyes{animation:none}}

.playground-entry{margin:14px 0}.playground-entry>button{display:flex;align-items:center;gap:14px;width:100%;padding:14px 18px;border:1px solid #b9dfd1;border-radius:18px;background:#edf9f3;color:#278b6c;text-align:left;font:inherit;font-weight:800}.playground-entry svg{width:28px;height:28px}.playground-entry small{display:block;font-size:12px;font-weight:500;margin-top:2px}.playground-entry>button>span:last-child{margin-left:auto}.room-entry{display:grid;grid-template-columns:1fr 1fr 1fr}.room-entry button{font-size:13px!important;padding:11px 7px!important}.classroom-entry{display:flex;align-items:center;gap:10px;width:100%;margin:12px 0;padding:13px 16px;border-radius:14px;border:1px solid #d8cff3;background:#f5f1fd;color:#6d57a3;font:inherit;font-weight:800}.classroom-entry span:last-child{margin-left:auto}.classroom-entry svg{width:23px;height:23px}.classroom-dialog{width:min(900px,95vw);max-height:92dvh;box-sizing:border-box;border:1px solid #e0e2ed;background:#fbfcff;border-radius:26px;padding:26px;color:#45516f;box-shadow:0 24px 100px #33375c35;font:inherit}.classroom-dialog::backdrop{background:#31384e65;backdrop-filter:blur(5px)}.classroom-header{display:flex;align-items:center;gap:14px;position:relative;margin-bottom:24px;padding-right:40px}.classroom-header h1{font-size:25px;margin:4px 0}.classroom-header small{color:#8c87a6}.classroom-emblem{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:#ede7fa;color:#9277c7}.classroom-emblem svg{width:30px;height:30px}.classroom-header .room-close{position:absolute;right:0;top:0}.classroom-dialog button{font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 14px;border:1px solid #dce1ee;border-radius:12px;color:#576580;background:#fff}.classroom-dialog button:hover{border-color:#a89bd0;background:#f7f3ff}.classroom-dialog button:disabled{opacity:.5;cursor:wait}.classroom-dialog svg{width:21px;height:21px;flex-shrink:0}.classroom-dialog .room-primary{background:#7862b8;color:white;border-color:#7862b8}.classroom-dialog label{display:flex;flex-direction:column;gap:7px;font-weight:650;font-size:14px}.classroom-dialog input,.classroom-dialog textarea,.classroom-dialog select{font:inherit;box-sizing:border-box;width:100%;border:1px solid #d6ddea;border-radius:12px;padding:12px;color:#465371;background:white}.classroom-dialog input:focus,.classroom-dialog textarea:focus{outline:3px solid #ddd5f4}.classroom-dialog textarea{resize:vertical}.exercise-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.classroom-dialog .exercise-card{display:flex;flex-direction:column;text-align:left;align-items:flex-start;justify-content:flex-start;border-color:hsl(var(--exercise-hue) 40% 88%);padding:20px;border-radius:20px;background:white;min-height:170px}.exercise-symbol{color:hsl(var(--exercise-hue) 45% 55%);background:hsl(var(--exercise-hue) 70% 95%);border-radius:13px;padding:10px;display:flex}.exercise-symbol svg{width:25px;height:25px}.exercise-card strong{font-size:18px;margin-top:12px}.exercise-card p{font-size:14px;margin:8px 0 16px;color:#7e879c;white-space:pre-wrap;overflow-wrap:anywhere}.exercise-open{margin-top:auto;font-size:12px;display:flex;align-items:center;gap:7px;color:#8983ab}.exercise-open svg{width:15px;height:15px}.class-new{width:100%;border-style:dashed!important;background:#f5f2fc!important;color:#7862b8!important}.exercise-form{display:grid;gap:20px;max-width:640px;margin:20px auto}.class-back{border:0!important;background:transparent!important;padding-left:0!important}.exercise-title{display:flex;align-items:center;gap:12px}.exercise-title h2{font-size:25px}.exercise-description{line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}.exercise-share{padding:18px;border-radius:18px;background:#f1edf9;display:flex;gap:12px;align-items:flex-end}.exercise-share label{flex:1;min-width:0}.exercise-share input{font-size:12px}.exercise-add-team{display:flex;gap:12px;align-items:flex-end;margin:20px 0}.exercise-add-team label{flex:1}.exercise-teams{display:flex;flex-wrap:wrap;gap:8px}.exercise-teams>span{display:flex;gap:6px;align-items:center;background:#edf6f5;color:#408e82;border-radius:10px;padding:8px 10px;font-size:13px}.exercise-teams svg{width:17px;height:17px}.exercise-works-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px}.classroom-live{font-size:12px;color:#7d94a0;display:flex;align-items:center;gap:6px}.classroom-live i{background:#50b392;border-radius:50%;width:6px;height:6px}.exercise-work{display:flex;align-items:center;gap:12px;background:white;border:1px solid #e3e7ef;border-radius:17px;padding:14px;margin:10px 0}.exercise-work>div{flex:1;min-width:0}.exercise-work strong,.exercise-work small{display:block;overflow-wrap:anywhere}.exercise-work small{color:#8792a9;font-size:12px;margin-top:4px}.exercise-work-icon{display:flex;color:#c29251;background:#fff3df;border-radius:12px;padding:10px}.exercise-submit-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.exercise-choose{display:grid;gap:8px;padding:12px;background:#f1f5fb;border-radius:15px;margin-bottom:18px}.exercise-invitation{padding:20px;border-radius:18px;background:#eef8f2;border:1px solid #bde1cc;margin-bottom:18px}.classroom-message{font-size:14px;color:#856b92;min-height:18px}.is-playground #saveStatus,.is-playground #saveProject,.is-playground #saveAsNew,.is-playground #cloudProjects,.is-playground #cloudConflict{display:none!important}
@media(max-width:600px){.classroom-dialog{padding:18px}.exercise-list{grid-template-columns:1fr}.exercise-share{flex-direction:column;align-items:stretch}.exercise-work{flex-wrap:wrap}.exercise-work>div{min-width:60%}.exercise-works-heading{align-items:flex-start;flex-direction:column}.classroom-dialog .exercise-card{min-height:150px}}
/* One quiet palette, with clearer ink and a little handmade character. */
.brand .brand-mark{width:56px;height:56px}.room-brand .brand-mark{width:82px;height:82px}.brand .brand-tagline{font-size:.404em}.room-brand .brand-tagline{font-size:.404em}
.version-badge{transform:rotate(-9deg);background:#fff1bf;border:1px solid #e4c267;color:#8d6b2d;font-weight:800;font-size:11px;border-radius:7px 7px 7px 2px;padding:5px 7px;box-shadow:0 2px 0 #e6cf8d35;letter-spacing:.1px;margin-top:0}.room-brand .version-badge{font-size:13px;padding:6px 9px}
.group-badge.is-guest{width:46px;max-width:46px;min-width:46px;padding:4px;justify-content:center;border-color:#ece8f1;background:#fff}.group-badge.is-guest .identity-picture{width:36px;height:36px;background:none}.group-badge.is-guest .brand-mark{width:36px;height:36px}.group-badge.is-guest .group-badge-name{display:none}
.library-toggle{width:38px;height:34px;flex-basis:38px;color:#667e9b;background:#eff4fa}.library-toggle .icon-svg{width:23px;height:23px}.library-toggle>span{border:0;transform:none}.library-toggle[aria-expanded=false]>span{transform:none}.library-heading h1{color:#5b6c86}
.meter-badge{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:38px;height:42px;padding:0 7px;border:1px solid #e2e7ef;border-radius:13px;background:#f6f8fc;font-size:14px;font-weight:750;color:#697c99;font-variant-numeric:tabular-nums}
.clip-title{box-sizing:border-box;max-width:100%;padding-right:10px;color:color-mix(in srgb,var(--clip-color) 74%,#26364d)}.clip-title>.clip-name{display:block;min-width:0;flex:1 1 0%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-weight:650}.clip-title>.clip-instrument{flex-shrink:0}.clip>.loop-boundary{top:0}.clip-title:after{content:'';position:absolute;right:0;top:0;bottom:0;width:5px;background:color-mix(in srgb,var(--clip-color) 10%,white);pointer-events:none}
.note-editor-tools{gap:8px;align-items:center}.note-editor-tools .note-tool{width:40px;min-width:40px;height:40px;padding:8px;display:inline-flex;align-items:center;justify-content:center}.note-editor-tools .note-tool .icon-svg{width:23px;height:23px}.note-tool-divider{width:1px;height:29px;background:#dce1eb;flex:0 0 1px;margin:0 3px}.note-quantize{border:1px solid #d9d3ec;background:#f0edf8;border-radius:13px;padding:3px;gap:2px}.note-quantize #noteQuantize{width:auto;min-width:112px;gap:7px;color:#66538d;border:0;background:transparent;font-weight:750}.note-quantize #noteQuantize>span{font-size:12px}.note-quantize select{background:#fff;border-color:#e5e0ef;min-height:36px}.note-finish button{display:inline-flex;align-items:center;justify-content:center;gap:8px}.note-finish .icon-svg{width:20px;height:20px}.note-grid.is-marquee-drag{cursor:crosshair}
.note-editor:not(.is-drums) .note-key{display:grid;grid-template-columns:minmax(0,1fr) 8px;gap:10px;padding-left:5px;padding-right:12px;align-items:center}.note-editor:not(.is-drums) .note-key>span{text-align:right;white-space:nowrap}.note-editor:not(.is-drums) .note-key>.note-pitch-dot{width:8px;height:8px;margin:0;justify-self:center}
.exercise-qr{text-align:center;border:1px solid #dedce9;background:#fff;border-radius:18px;padding:20px;margin-top:12px}.exercise-qr a{display:block;width:min(300px,100%);margin:auto}.exercise-qr>a>svg{display:block;width:100%;height:auto;image-rendering:pixelated}.exercise-qr p{font-size:13px;color:#6d7a91;margin:10px 0 0}.exercise-share{flex-wrap:wrap}.exercise-share label{flex:1 1 200px}.exercise-instructions{padding:18px 0 24px}.exercise-instructions>span{display:inline-flex;padding:12px;background:#edf5f3;border-radius:15px;color:#4b9c87}.exercise-instructions>span svg{width:28px;height:28px}.exercise-instructions h2{font-size:26px;margin:14px 0}.exercise-instructions p{white-space:pre-wrap;line-height:1.7}.exercise-start-form{display:flex;align-items:flex-end;gap:12px;background:#f2eef9;border:1px solid #e0d8ed;padding:20px;border-radius:18px}.exercise-start-form label{flex:1}.exercise-start-form button{min-width:85px;height:46px}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:650px){.brand .brand-mark{width:49px;height:49px}.room-brand .brand-mark{width:65px;height:65px}.version-badge{font-size:10px}.meter-badge{height:38px;min-width:29px;font-size:12px}.note-tool-divider{margin:0 1px}.note-editor-tools{gap:5px}.note-quantize #noteQuantize{min-width:98px}.note-editor:not(.is-drums) .note-key{gap:8px;padding-right:9px}.exercise-start-form{flex-direction:column;align-items:stretch}.exercise-share label{flex-basis:100%}}

.clip-title{padding-right:27px}

.exercise-qr>strong{display:block;margin:0 0 9px;font-size:17px}.exercise-qr>button{margin-top:14px}

.exercise-qr>button .icon-svg{width:18px;height:18px}
/* Shared exercise portfolio, instructions and feedback. */
.classroom-tabs{display:flex;gap:7px;padding:5px;border:1px solid #e2ddeb;border-radius:15px;background:#f0edf6;margin:0 0 20px}.classroom-tabs button{flex:1;background:transparent;border-color:transparent;color:#80768e}.classroom-tabs button[aria-current=true]{background:white;color:#6e55a4;border-color:#ded6eb;box-shadow:0 2px 5px #4c366b08}
.exercise-overview{display:flex;align-items:flex-start;gap:22px;margin:16px 0 22px}.exercise-overview>div{flex:1;min-width:0}.exercise-overview h2{font-size:25px;line-height:1.3;margin:0 0 14px}.exercise-cover{margin:0;flex:0 0 180px;max-width:180px;overflow:hidden;border-radius:20px;border:1px solid #e0dce9;background:#f2edf8}.exercise-cover[hidden]{display:none}.exercise-cover img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.exercise-goals{background:#edf6f2;border:1px solid #d7e9e0;border-radius:14px;padding:14px 16px;margin-top:16px}.exercise-goals h3{font-size:14px;color:#448777;margin:0 0 7px}.exercise-goals p{white-space:pre-wrap;line-height:1.6;margin:0;font-size:14px}.exercise-dates{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px;color:#7b8397;margin-bottom:14px}.exercise-dates>span{display:flex;align-items:center;gap:7px}.exercise-dates strong{font-weight:600;color:#59677e}.exercise-phase{padding:4px 8px;background:#f0edf8;border-radius:8px;color:#8b75aa}
.exercise-date-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.exercise-form label small,.exercise-review-form label small{font-weight:400;font-size:12px;color:#8a839e}.exercise-remove-image{flex-direction:row!important;align-items:center;font-size:13px!important}.exercise-remove-image input{width:18px;height:18px}.exercise-form .exercise-cover{width:150px;max-width:150px}
.exercise-title{justify-content:flex-end;margin-bottom:-8px}.exercise-work{display:block}.exercise-work-main{display:flex;align-items:center;gap:12px}.exercise-work-main>div{flex:1;min-width:0}.exercise-work-main>button{font-size:13px;flex-shrink:0}.exercise-work-main strong{font-size:16px}.exercise-feedback{margin:12px 0 0 52px;border-left:3px solid #b5a4d7;padding:10px 14px;background:#f7f4fc;border-radius:0 12px 12px 0}.exercise-feedback>strong{font-size:14px;color:#776098}.exercise-feedback small{font-weight:400}.exercise-feedback p{margin:6px 0 0;font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}.exercise-review-form{max-width:620px;margin:24px auto;display:grid;gap:20px}.exercise-review-form h2{font-size:25px;margin:0}.exercise-review-form>p{margin:-12px 0 0;color:#8d829e}.exercise-review-form input[type=number]{width:125px;font-weight:700;font-size:24px;text-align:center}.exercise-review-emblem{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:#edf6f0;color:#59947e}.exercise-review-emblem svg{width:27px;height:27px}.portfolio-exercises{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0 52px}.portfolio-exercises button{font-size:12px;padding:6px 10px;min-height:34px;border-color:#e3ddeb;background:#f7f4fc;color:#8b78a6}.portfolio-exercises button svg{width:16px;height:16px}.portfolio-exercises button>span{margin-left:4px;padding:2px 6px;border-radius:5px;background:#e9e0f5;color:#786496}
@media(max-width:650px){.exercise-overview{flex-direction:column;gap:16px}.exercise-cover{width:140px;max-width:140px;flex-basis:auto}.exercise-date-fields{grid-template-columns:1fr}.exercise-work-main{flex-wrap:wrap;gap:9px}.exercise-work-main>div{min-width:calc(100% - 65px)}.exercise-work-main>button{flex:1;font-size:12px}.exercise-feedback,.portfolio-exercises{margin-left:0}.exercise-instructions{padding-top:0}.classroom-tabs button{font-size:13px}}
.classroom-dialog .exercise-submit-actions>button{width:auto}
.classroom-dialog .exercise-start-form label{min-width:0}
.classroom-dialog .exercise-start-form .room-primary{width:auto;flex:0 0 auto;min-width:100px;margin-top:0}
.note-grid{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.exercise-feedback strong small{display:inline}
/* The harmony picker shares the transport's size, palette and rounded controls. */
.progression-control{position:relative;flex-shrink:0}.transport-bar .progression-control>button{display:grid;grid-template-columns:1fr 10px;grid-template-rows:auto auto;align-content:center;gap:4px 7px;height:48px;min-width:177px;padding:6px 11px;border:1px solid #dedbed;border-radius:15px;background:#f5f1fc;color:#75628f;font:inherit;cursor:pointer;box-shadow:0 2px 0 #75628f06}.progression-caption{grid-column:1;font-size:9px;line-height:1;color:#91849f;text-align:left}.progression-control .key-caret{grid-column:2;grid-row:1/3}.progression-current{display:flex;gap:5px}.harmony-chip{display:inline-flex;align-items:center;justify-content:center;min-width:26px;min-height:22px;padding:2px 5px;box-sizing:border-box;border-radius:7px;background:color-mix(in srgb,var(--pitch-color) 15%,white);color:#635b70;font-size:12px;font-weight:650;line-height:1;white-space:nowrap}.progression-panel{position:fixed;z-index:1250;width:min(392px,calc(100vw - 16px));overflow:auto;overscroll-behavior:contain;padding:9px;border:1px solid #ded9eb;border-radius:18px;background:#fff;box-shadow:0 14px 45px #42435e26;box-sizing:border-box}.progression-panel[hidden]{display:none}.progression-menu-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px 9px 13px;color:#77708a;font-size:13px}.progression-menu-heading>span{font-size:11px;color:#a099ad;font-weight:400}.progression-choice{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:61px;padding:10px;border:1px solid transparent;border-radius:12px;background:#fff;color:#5b5770;text-align:left;font:inherit;cursor:pointer}.progression-choice[aria-pressed=true]{background:#f4effb;border-color:#dbd0ed}.progression-choice:hover,.progression-choice:focus-visible{background:#f7f4fc;outline:2px solid #b7a5d1;outline-offset:-2px}.progression-option-name{font-size:13px;font-weight:650}.progression-option-name small{display:block;margin-top:5px;font-size:10px;color:#938a9e;font-weight:400;letter-spacing:.1px}.progression-option-chords{display:flex;gap:5px;flex-shrink:0}.progression-option-chords .harmony-chip{min-width:32px;font-size:12px}
@media(max-width:1100px){.transport-bar{flex-wrap:wrap}.transport-bar .progression-control>button{min-width:168px}.progression-option-chords{gap:3px}}
@media(max-width:440px){.transport-bar .progression-control>button{min-width:157px}.progression-choice{gap:8px}.progression-option-chords .harmony-chip{min-width:28px;padding:3px;font-size:11px}}
/* Preview is a separate sibling button; hearing a chord never selects it. */
.progression-panel{width:min(432px,calc(100vw - 16px))}.progression-option-row{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;gap:6px}.progression-choice{gap:10px;padding:10px 8px;min-width:0}.progression-option-name{min-width:0}.progression-panel button.progression-preview{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #d8e8e0;border-radius:12px;background:#f0f8f3;color:#6c9b86;cursor:pointer}.progression-preview svg{width:16px;height:16px}.progression-panel button.progression-preview:hover,.progression-panel button.progression-preview:focus-visible{background:#e2f2e8;border-color:#9dc8b2;outline:2px solid #bbd9cb;outline-offset:1px}.progression-panel button.progression-preview.is-previewing{background:#6da68e;color:white;border-color:#6da68e}.progression-preview.is-loading svg{animation:harmony-loading .8s ease-in-out infinite alternate}@keyframes harmony-loading{to{opacity:.35}}@media(prefers-reduced-motion:reduce){.progression-preview.is-loading svg{animation:none}}

/* Sounding items keep their size and typography; only a soft halo changes. */
.progression-control .harmony-chip,.note-measures>.note-measure>span{transition:background .16s,box-shadow .16s}
.progression-control .harmony-chip.is-sounding,.note-measures>.note-measure>span.is-sounding{background:color-mix(in srgb,var(--pitch-color) 23%,white);box-shadow:0 0 7px 1px color-mix(in srgb,var(--pitch-color) 32%,transparent)}
.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-key.is-sounding .note-pitch-dot{box-shadow:0 0 6px 2px color-mix(in srgb,var(--pitch-color) 32%,transparent)}
.is-drums .note-key.is-sounding>svg{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--pitch-color) 36%,transparent))}
@media(prefers-reduced-motion:reduce){.progression-control .harmony-chip,.note-measures>.note-measure>span{transition:none}}

.note-measures>.note-measure:hover:not(:disabled){background:#edf0fa}
.note-measures>.note-measure:focus-visible{outline:2px solid #b5c3df;outline-offset:-3px}
.note-measures>.note-measure:active:not(:disabled){transform:none}

/* Cover the workspace from its first paint until the sign-in screen is ready. */
.is-starting>.app-header,.is-starting>.transport-bar,.is-starting>main{filter:blur(10px);opacity:.12;pointer-events:none}
.startup-screen{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;background:#f6f7fceF;backdrop-filter:blur(12px)}
.startup-screen[hidden],.audio-load-status[hidden]{display:none}
.startup-card{text-align:center;color:#85859d;font-size:14px}.startup-word{display:flex;justify-content:center;font-size:38px;font-weight:800;letter-spacing:-2px;margin-bottom:22px}.startup-word i{font-style:normal}.startup-word i:nth-child(1){color:#e45b68}.startup-word i:nth-child(2){color:#d9ad3b}.startup-word i:nth-child(3){color:#36ad82}
.startup-spinner{display:inline-block;width:24px;height:24px;border:3px solid #dedced;border-top-color:#9580bd;border-radius:50%;animation:startup-turn .9s linear infinite}@keyframes startup-turn{to{transform:rotate(360deg)}}
.audio-load-status{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;pointer-events:none}.audio-load-status>div{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:12px 16px;width:min(330px,calc(100vw - 64px));padding:24px;border:1px solid #dedceb;border-radius:23px;background:#fffffff7;box-shadow:0 14px 65px #46405d26;color:#686079}.audio-load-status strong{font-size:16px;font-weight:650}.audio-load-status output{grid-column:2;color:#9690a5;font-size:14px}.audio-load-status progress{grid-column:1/-1;width:100%;height:9px;appearance:none;border:0;border-radius:9px;overflow:hidden;background:#eeebf6;accent-color:#9782c3}.audio-load-status progress::-webkit-progress-bar{background:#eeebf6;border-radius:9px}.audio-load-status progress::-webkit-progress-value{background:linear-gradient(90deg,#b19bd7,#86bdb0);border-radius:9px}
.sound-settings-button{display:grid;place-items:center;width:40px;height:40px;border:1px solid #dedceb;border-radius:13px;background:#f5f2fb;color:#8a76ad;cursor:pointer}.sound-settings-button svg{width:21px;height:21px}
.sound-settings{width:min(540px,calc(100vw - 32px));box-sizing:border-box;padding:26px;border:1px solid #e0ddec;border-radius:25px;background:#fcfbff;color:#635c78;box-shadow:0 20px 90px #4740602a;font:inherit}.sound-settings::backdrop{background:#e8e6f4cc;backdrop-filter:blur(8px)}.sound-settings header{display:flex;gap:13px;align-items:center}.sound-settings header>span{display:grid;place-items:center;width:45px;height:45px;border-radius:14px;background:#ece6f6;color:#9a81bf}.sound-settings svg{width:23px;height:23px}.sound-settings h2{font-size:23px;margin:0;flex:1}.sound-settings header button{border:0;background:transparent;color:#9891a9;cursor:pointer}.sound-settings>p{color:#9790a6;font-size:14px;line-height:1.6}.sound-settings fieldset{border:0;margin:22px 0;padding:0;display:grid;gap:12px}.sound-profile{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid #e1dceb;border-radius:16px;cursor:pointer;background:#fff}.sound-profile:has(input:checked){border-color:#ac96cf;background:#f4effb}.sound-profile input{accent-color:#9477bc;width:18px;height:18px;flex-shrink:0}.sound-profile>span{flex:1;min-width:0}.sound-profile strong,.sound-profile small{display:block}.sound-profile strong{font-size:15px}.sound-profile small{font-size:12px;color:#9a91a7;margin-top:6px;line-height:1.5}.sound-profile em{font-style:normal;max-width:120px;font-size:11px;line-height:1.6;color:#a193b1;text-align:right}.sound-settings-note{margin:0;font-size:12px!important}
@media(prefers-reduced-motion:reduce){.startup-spinner{animation:none}}

/* On phones the library must not shrink to zero below the wrapped transport. */
@media(max-width:760px){
 .studio-shell{height:auto;min-height:calc(100dvh - var(--studio-top,158px));overflow:visible}
 .library{flex:0 0 auto;min-height:0;max-height:none}
 .library-heading{flex-shrink:0;min-height:36px}
 .library-content{flex:0 0 auto}
 .loop-list{flex:0 0 116px;height:116px;min-height:116px;max-height:116px}
 .loop-card{flex:0 0 193px}
 .arrangement{flex:0 0 auto}
}
@media(max-width:760px){
 .app-header{display:grid;grid-template-columns:minmax(0,1fr) 116px;grid-template-rows:auto auto;height:auto;min-height:104px;padding:10px 12px;gap:9px 8px}
 .app-header .brand{grid-column:1;grid-row:1;min-width:0;font-size:23px;gap:6px}
 .app-header .brand .brand-mark{width:36px;height:36px}
 .app-header .version-badge{font-size:9px;padding:4px;margin:0 0 0 -2px}
 .app-header .project-name{grid-column:1;grid-row:2;order:initial;width:100%;min-width:0;height:38px;font-size:13px}
 .app-header .group-badge{grid-column:2;grid-row:2;order:initial;width:100%;max-width:100%;height:38px;min-height:38px;padding:4px 6px;gap:5px}
 .app-header .group-badge.is-guest{width:38px;min-width:38px;justify-self:end;padding:0}
 .app-header .header-actions{grid-column:2;grid-row:1;gap:4px;margin:0;justify-content:flex-end}
 .header-actions .file-button,.header-actions .export-button,.header-actions .sound-settings-button{width:36px;height:38px;min-height:38px;padding:0;border-radius:11px;flex:0 0 36px}
 .transport-bar{padding:10px 12px;gap:8px;flex-wrap:wrap}
 .transport-bar .play-controls{order:0}
 .transport-bar .time-display{order:1;flex:1 0 198px;min-width:198px}
 .transport-bar .tempo-control{order:2}
 .transport-bar .key-control{order:3}
 .transport-bar .progression-control{order:4}
 .transport-bar .transport-toggles{order:5}
 .transport-bar .meter-badge{order:6}
 .transport-bar .transport-spacer{order:7;display:block;flex:1}
 .transport-bar .edit-tools{order:8}
}

/* Short landscape phone windows still need a reachable pattern list. */
@media(min-width:761px) and (max-width:950px) and (max-height:560px){
 body{overflow:auto}
 .studio-shell{height:auto;min-height:430px}
 .library{min-height:430px}
 .library-heading,.genre-selector,.category-selector,.search,.filter-line{flex-shrink:0}
 .loop-list{flex:1 0 130px;min-height:130px}
 .arrangement{height:430px;min-height:430px}
}

.library-more{width:100%;min-height:44px;border:1px solid #ded8ed;border-radius:12px;background:#f4f0fb;color:#81729d;font:600 13px var(--font);margin:8px 0;flex:0 0 170px}

.group-badge[data-peers]{position:relative}.group-badge[data-peers]:after{content:attr(data-peers);position:absolute;right:-5px;bottom:-4px;min-width:20px;height:20px;padding:2px;border:2px solid white;border-radius:50%;background:#74bca5;color:white;font:700 10px var(--font);display:grid;place-items:center}

.history-versions{max-height:55dvh;overflow:auto;margin-top:18px}.history-versions>div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid #eeeaf4;color:#8a8199;font-size:12px}.history-versions button{display:flex;align-items:center;gap:6px;min-height:36px;padding:5px 10px;border-radius:10px;background:#eee8f8;color:#8d76ae;font:600 12px var(--font)}.history-versions svg{width:16px;height:16px}

/* Six banks stay reachable on short tablet and phone screens. */
.sound-bank-settings{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.sound-bank-settings>header{position:sticky;top:-26px;z-index:1;margin:-26px -26px 0;padding:26px 26px 13px;background:#fcfbff}
@media(max-width:520px){.sound-bank-settings .sound-profile{padding:13px;gap:10px}.sound-bank-settings .sound-profile em{max-width:80px}}

/* Soundbank audition buttons are separate from the saved radio choice. */
.sound-bank-settings{width:min(620px,calc(100vw - 32px))}
.sound-bank-settings .sound-profile{gap:12px;padding:12px}
.sound-profile-choice{display:flex;align-items:center;gap:12px;flex:1;min-width:0;cursor:pointer}
.sound-profile-choice>span{flex:1;min-width:0}.sound-profile-choice em{flex:0 0 64px}
.sound-profile-play{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border:1px solid #ded5ee;border-radius:13px;background:#f3edf9;color:#9278b5}
.sound-profile-play svg{width:18px;height:18px}.sound-profile-play[aria-pressed=true]{background:#e6f5ef;border-color:#b8ddce;color:#448f78}
.sound-profile-play.is-loading svg{opacity:0}.sound-profile-play.is-loading{position:relative}
.sound-profile-play.is-loading:after{content:'';position:absolute;width:16px;height:16px;border:2px solid #b7d9cd;border-top-color:#448f78;border-radius:50%;animation:startup-turn .9s linear infinite}
.sound-profile-play:focus-visible{outline:3px solid #bba6d9;outline-offset:3px}
.sound-bank-settings .sound-preview-caption{font-size:12px;margin:0;line-height:1.7;color:#888097}
.sound-bank-settings .sound-preview-status{min-height:20px;font-size:12px;color:#5c9884;margin:7px 0}
@media(max-width:520px){
 .sound-bank-settings{padding:20px}.sound-bank-settings>header{top:-20px;margin:-20px -20px 0;padding:20px 20px 13px}
 .sound-bank-settings .sound-profile{padding:10px;gap:8px}.sound-profile-choice{flex-wrap:wrap;gap:6px 9px}
 .sound-profile-choice input{margin:0}.sound-profile-choice>span{flex-basis:calc(100% - 30px)}
 .sound-profile-choice em{flex-basis:auto;margin-left:27px;text-align:left;max-width:none!important}
 .sound-profile-play{width:40px;height:44px;flex-basis:40px}.sound-profile strong{font-size:13px}
}

/* One entry screen, before any form; student registration is a first choice. */
.entry-landing .playground-entry{margin:10px 0 24px}
.entry-landing .playground-entry>button{min-height:84px;padding:18px 20px;border-radius:21px}
.entry-landing .playground-entry>button>span:first-child{display:grid;place-items:center;width:46px;height:46px;background:#d8efe5;border-radius:15px}
.entry-landing .playground-entry>button>span:last-child svg{width:18px}
.entry-landing .playground-entry small{margin-top:7px;font-size:11px;color:#629b86}
.entry-divider{display:flex;align-items:center;gap:12px;margin:0 0 19px;font-size:10px;line-height:1.6;color:#a19aad;text-align:center}
.entry-divider:before,.entry-divider:after{content:'';height:1px;background:#eee8f3;flex:1}
.student-entry-actions{display:grid;gap:10px}
.student-entry-actions>button{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 17px;border:1px solid #e1daed;border-radius:15px;background:#f7f3fc;color:#8b74ab;text-align:left;font-size:12px;font-weight:650}
.student-entry-actions>button:last-child{background:white;color:#7f819e;border-color:#e7e7f0}
.student-entry-actions svg{width:20px;height:20px;flex-shrink:0}
.entry-secondary{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;padding-top:17px;border-top:1px solid #eeeaf3}
.entry-secondary>button{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 5px;min-height:40px;font-size:10px;color:#9b92a8}
.entry-secondary svg{width:17px;height:17px;flex-shrink:0}
.room-entry-back{display:flex;align-items:center;gap:4px;min-height:38px;padding:0 4px;color:#9890a5;font-size:11px;margin:0 0 10px}
.room-entry-back svg{width:16px;height:16px}.project-room .room-brand{margin-bottom:20px}
@media(max-width:520px){.project-room{padding:25px 22px 18px}.entry-secondary{gap:5px}.entry-secondary>button{font-size:9px}}

/* Give identity, transport and file actions their own predictable places. */
.app-header{gap:20px;padding:0 24px;height:80px;min-height:80px}
.project-heading{display:flex;flex-direction:column;justify-content:center;gap:4px;flex:1;min-width:80px}
.project-heading .project-name{width:100%;max-width:340px;min-width:0;padding:5px 0;font-size:14px}
.project-heading .save-status{font:9px var(--font);max-width:320px;overflow:hidden;text-overflow:ellipsis}
.app-header .header-actions{gap:8px;margin:0;padding-left:14px;border-left:1px solid #eeeaf3}
body.is-playground .app-header .group-badge.is-guest{width:auto;max-width:150px;padding:5px 11px 5px 5px}
body.is-playground .group-badge.is-guest .group-badge-name{display:block}
body.is-playground .group-badge .identity-picture svg{width:17px;height:17px}
.header-actions .sound-settings-button,.header-actions .file-button{height:44px;min-height:44px;border:1px solid #e3dfed;border-radius:14px;box-shadow:none;background:#f7f5fb;color:#8a7ba0}
.header-actions .sound-settings-button{width:44px}.header-actions .file-button{width:auto;padding:0 13px;gap:9px;font-size:11px}
.menu-caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 1px 4px 4px}
.file-menu{right:24px;top:calc(100% - 5px);width:245px;max-height:calc(100dvh - 100px);overflow:auto;padding:7px;border-radius:18px;border-color:#e7e0ef;box-shadow:0 12px 40px #65517e20}
.file-section+.file-section{border-top:1px solid #eeeaf3;padding-top:6px;margin-top:6px}
.file-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 12px;border-radius:10px;font-size:11px;line-height:1.5;color:#81748f}
.file-menu button:focus-visible{outline:2px solid #b4a3ce;outline-offset:-2px;background:#f6f1fb}
.file-menu #exportBtn{color:#518f7d}
.file-menu svg{width:18px;height:18px;flex-shrink:0;color:#a89bb9}
.transport-bar{--transport-size:44px;height:auto;min-height:76px;gap:16px;padding:14px 24px;flex-wrap:nowrap}
.transport-group{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-width:0}
.transport-group+.transport-group{border-left:1px solid #eae7f0;padding-left:16px}
.transport-bar .transport-playback{gap:12px}
.transport-bar .musical-position{min-width:72px;padding:6px 10px}
.transport-bar .clock-position{min-width:114px;padding:6px 10px;margin-left:6px}
.transport-bar .musical-position>strong,.transport-bar .clock-position>strong{font-size:17px;font-weight:550}
.transport-bar .time-display{flex:0 0 auto}
.transport-bar .tempo-control>button{width:98px;gap:5px}
.transport-bar .key-control>button{width:98px;font-size:11px}
.transport-bar .progression-control>button{width:172px;min-width:172px}
.transport-bar .meter-badge{margin:0;min-width:34px;padding:0 7px;border:0;background:none;font-size:12px;color:#9a93a9}
.transport-bar .transport-spacer{flex:1;min-width:0}
.transport-bar .edit-tools{gap:5px;border-left:1px solid #eae7f0;padding-left:12px}
@media(max-width:1180px){
 .transport-bar{display:grid;grid-template-columns:1fr auto auto;gap:10px 14px;padding:12px 20px}
 .transport-playback{grid-column:1;grid-row:1}.transport-options{grid-column:2;grid-row:1}
 .transport-music{grid-column:1/-1;grid-row:2;border-left:0!important;padding-left:0!important;justify-content:center;padding-top:10px;border-top:1px solid #f0edf5}
 .transport-bar .edit-tools{grid-column:3;grid-row:1}.transport-bar .transport-spacer{display:none}
 .app-header{padding:0 20px;gap:16px}.app-header .group-badge{max-width:160px}
}
@media(max-width:760px){
 .app-header{grid-template-columns:minmax(0,1fr) 100px;grid-template-rows:auto auto;gap:8px 10px;min-height:112px;padding:10px 12px}
 .app-header .brand{grid-column:1;grid-row:1}.app-header .project-heading{grid-column:1;grid-row:2;min-width:0}
 .project-heading .project-name{height:30px!important;width:100%!important;font-size:12px;padding:3px 0}.project-heading .save-status{font-size:8px}
 .app-header .group-badge{grid-column:2;grid-row:2;max-width:100%}
 .app-header .header-actions{grid-column:2;grid-row:1;border:0;padding:0;gap:6px}
 .header-actions .sound-settings-button,.header-actions .file-button{width:42px;min-height:42px;height:42px;flex:0 0 42px;padding:0}
 .header-actions .file-button>span:not(:first-child){display:none}
 .transport-bar{grid-template-columns:1fr auto;gap:10px;padding:11px 12px;--transport-size:42px}
 .transport-bar .transport-playback{grid-column:1/-1;grid-row:1;justify-content:space-between;gap:8px}
 .transport-bar .time-display{min-width:0;flex:0 0 auto}.transport-bar .musical-position{min-width:69px}.transport-bar .clock-position{min-width:111px}
 .transport-bar .transport-music{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:90px 88px minmax(0,1fr);gap:7px;padding-top:0;border-top:0}
 .transport-bar .transport-music>div,.transport-bar .transport-music>div>button{width:100%;min-width:0}
 .transport-bar .transport-music .progression-control>button{min-width:0;width:100%;padding:5px 8px}
 .transport-bar .progression-current{gap:1px}.transport-bar .progression-current .harmony-chip{min-width:19px;padding:2px;font-size:10px}
 .transport-bar .transport-options{grid-column:1;grid-row:3;border:0;padding:0}
 .transport-bar .edit-tools{grid-column:2;grid-row:3;border:0;padding:0}
 .transport-bar .tempo-panel{left:0;right:auto}.transport-bar .key-panel{left:-70px}
 .file-menu{right:12px;top:calc(100% - 3px)}
}
@media(max-width:520px){
 .project-room .room-brand{gap:7px;max-width:100%}
 .project-room .room-brand .brand-mark{width:50px;height:50px}
 .project-room .room-brand .brand-type{font-size:28px}
 .project-room .room-brand .version-badge{font-size:9px;padding:4px 5px}
 body.is-playground .app-header .group-badge.is-guest{max-width:100%;padding:5px 7px}
 body.is-playground .app-header .group-badge.is-guest .identity-picture{display:none}
}