app/studio.css

@reference './theme.css';

/*A focused studio workspace.*/

.score-overlay {
 @apply fixed inset-0 z-100;
 background: #050507c9;
 backdrop-filter: blur(6px);
 @apply grid place-items-center p-6;
 color-scheme: dark;
 @apply text-[#eeedf2];
 font: 13px var(--sans);
}

.score-editor {
 --accent: #ff7133;
 @apply flex;
 @apply flex-col w-[min(1140px,100%)];
 height: min(790px,calc(100svh - 48px));
 @apply min-h-95;
 background: #17171c;
 border: 1px solid #414149;
 @apply rounded-[20px];
 box-shadow: 0 30px 120px #0009;
 @apply overflow-hidden;
}

.score-editor button,.score-editor input,.score-editor textarea,.score-editor select {
 font: inherit;
}

.score-editor button:focus-visible,.score-editor input:focus-visible,.score-editor select:focus-visible,.score-editor textarea:focus-visible {
 outline: 2px solid #ff9a6b;
 outline-offset: 2px;
}

.score-editor button:disabled {
 @apply opacity-[.35] cursor-default;
}

.score-editor-header {
 @apply flex items-center justify-between;
 padding: 19px 22px 16px;
 border-bottom: 1px solid #2e2e36;
}

.score-editor-title {
 @apply flex items-center gap-3;
}

.score-editor-title>span {
 @apply grid place-items-center w-[38px] h-[38px] rounded-[12px];
 background: #31292b;
 @apply text-[#ffac85];
}

.score-editor h2 {
 @apply text-[17px];
 margin: 0 0 4px;
 @apply font-semibold;
}

.score-editor-title p {
 @apply text-[11px];
 @apply text-[#9898a6] m-0;
}

.score-editor-toolbar {
 @apply flex items-center gap-[7px];
 padding: 12px 20px;
 @apply flex-wrap;
}

/*The piano roll: an FL Studio-style slate grid with a sculpted keyboard.*/

.roll-editor {
 @apply w-[min(1240px,100%)];
 height: min(820px,calc(100svh - 48px));
}

.roll-toolbar {
 @apply flex items-center gap-[14px];
 padding: 10px 18px;
 background: linear-gradient(#262d31,#1f2528);
 border-bottom: 1px solid #0d1113;
 @apply flex-wrap;
}

.roll-transport,.roll-history,.roll-key {
 @apply flex items-center gap-1;
}

.roll-history {
 @apply ml-auto;
}

.roll-play {
 @apply grid place-items-center w-[38px] h-[30px] rounded-[6px] text-[#dff5e4];
 background: linear-gradient(#3d4b52,#2c373c);
 border: 1px solid #11171a;
 box-shadow: inset 0 1px 0 #ffffff1f,0 1px 2px #0007;
}

.roll-play.on {
 @apply text-[#132216];
 background: linear-gradient(#b4f1bf,#7ccf8f);
 border-color: #4f8f5f;
}

.roll-button {
 @apply grid place-items-center w-[30px] h-7 rounded-[6px] text-[#b9c6cc];
 background: linear-gradient(#323d42,#283135);
 border: 1px solid #11171a;
 box-shadow: inset 0 1px 0 #ffffff14;
}

.roll-button:hover:not(:disabled),.roll-play:hover {
 filter: brightness(1.18);
}

.roll-button.on {
 @apply text-[#ffc36b];
 box-shadow: inset 0 0 0 1px #ffc36b55;
}

.roll-field {
 @apply flex items-center gap-[7px] text-[#90a1a9];
 @apply text-[11px];
}

.roll-key span {
 @apply min-w-10 text-center;
 @apply text-[#e3ecef];
 font: 12px ui-monospace,monospace;
}

.roll-field input,.roll-field select {
 background: #11171a;
 border: 1px solid #3a474d;
 @apply rounded-[5px] text-[#e7f2ef];
 font: 12px ui-monospace,monospace !important;
 padding: 5px 6px;
}

.roll-field input {
 @apply w-[54px] text-center;
}

.roll-lanes {
 @apply flex p-[2px] rounded-[7px];
 background: #11171a;
 border: 1px solid #2f3a3f;
}

.roll-lanes button {
 padding: 5px 10px;
 @apply rounded-[5px] text-[11px];
 @apply text-[#8a9aa1];
}

.roll-lanes button.on.vocal {
 @apply text-[#163020];
 background: linear-gradient(#b4f1bf,#86d898);
}

.roll-lanes button.on.instrument {
 @apply text-[#11283a];
 background: linear-gradient(#c3e5ff,#8cc4ee);
}

.roll-scroll {
 @apply flex-1 min-h-40 overflow-auto relative;
 background: #2b373d;
 overscroll-behavior: contain;
 scrollbar-color: #56656c #1c2326;
}

.roll-content {
 @apply relative;
}

.roll-ruler {
 @apply sticky top-0 z-6 h-7;
 background: linear-gradient(#36444b,#2a353a);
 border-bottom: 1px solid #12181b;
 box-shadow: 0 2px 6px #0005;
}

.roll-corner {
 @apply sticky left-0 h-7 z-7;
 background: linear-gradient(#36444b,#2a353a);
 border-right: 1px solid #12181b;
}

.roll-timeline {
 @apply absolute top-0 h-7 cursor-pointer;
 background: repeating-linear-gradient(to right,#ffffff1a 0 1px,transparent 1px 64px) bottom/100% 7px no-repeat;
}

.roll-bar-number {
 @apply absolute top-0 h-full;
 padding: 3px 0 0 5px;
 border-left: 1px solid #ffffff38;
 @apply text-[#d4dfe3];
 font: 11px ui-monospace,monospace;
 @apply pointer-events-none;
}

.roll-marker {
 @apply absolute bottom-0 w-0 h-0 -ml-[7px];
 border: 7px solid transparent;
 border-bottom: 9px solid #ff9a3d;
 border-top: 0;
 @apply pointer-events-none;
 filter: drop-shadow(0 1px 1px #0008);
}

.roll-grid {
 @apply absolute overflow-hidden;
}

.roll-lane {
 @apply absolute left-0;
 @apply right-0;
 background: #3a4950;
 border-bottom: 1px solid #00000024;
}

.roll-lane.black {
 background: #313e44;
}

.roll-lane.octave {
 border-bottom: 1px solid #0000005e;
}

.roll-lane.lit {
 background: #46585f;
}

.roll-lines {
 @apply absolute inset-0 pointer-events-none;
 background-image: linear-gradient(to right,#00000047 1px,transparent 1px),linear-gradient(to right,#0000001f 1px,transparent 1px);
}

.roll-bar-line {
 @apply absolute top-0;
 @apply bottom-0 w-[2px] -ml-[1px];
 background: #151c1f;
 @apply opacity-[.75] pointer-events-none;
}

.roll-hit {
 @apply absolute inset-0 cursor-crosshair;
}

.roll-note {
 @apply absolute;
 padding: 0 4px;
 @apply text-left rounded-[3px];
 border: 1px solid #4f8f5f;
 background: linear-gradient(#c3f6cb,#8fd9a0);
 @apply text-[#143020];
 font: 9px/1 ui-monospace,monospace !important;
 @apply cursor-grab touch-none z-2;
 box-shadow: inset 0 1px 0 #ffffffa0,0 1px 2px #0007;
 @apply flex items-center;
}

.roll-note:active {
 @apply cursor-grabbing;
}

.roll-note span {
 @apply overflow-hidden whitespace-nowrap pointer-events-none;
}

.roll-note i {
 @apply absolute -right-[1px];
 @apply -top-[1px];
 @apply -bottom-[1px] w-[7px] cursor-ew-resize;
 border-radius: 0 3px 3px 0;
 @apply touch-none;
}

.roll-note i:hover {
 background: #0000002a;
}

.roll-note.instrument {
 border-color: #4f80a6;
 background: linear-gradient(#d0ebff,#8cc4ee);
 @apply text-[#0f2638];
}

.roll-note.secondary {
 @apply opacity-[.38] z-1;
 box-shadow: none;
}

.roll-note.selected {
 border-color: #b9473c;
 background: linear-gradient(#ffc4ba,#f48a7b);
 @apply text-[#3a110c] z-3;
}

.roll-note.playing {
 filter: brightness(1.18);
 box-shadow: inset 0 1px 0 #fff,0 0 10px #c8ffd3aa;
}

.roll-note.fixed {
 @apply cursor-default;
}

.roll-note.fixed i {
 @apply hidden;
}

.roll-playhead {
 @apply absolute top-0;
 @apply bottom-0 w-[1px];
 background: #ff9a3d88;
 @apply pointer-events-none z-4;
}

.roll-playhead.on {
 @apply w-[2px] -ml-[1px];
 background: #ffad4f;
 box-shadow: 0 0 8px #ff9a3d;
}

/*Keys are lit from the top left: a convex face, a darker front lip, and black keys casting onto the whites.*/

.roll-keys {
 @apply sticky left-0 z-5 w-24;
 background: #0e1214;
 box-shadow: 4px 0 10px #0008;
 border-left: 5px solid #5b1a1a;
 border-image: linear-gradient(#6d2222,#3e0f0f) 1;
}

.roll-keys .key {
 @apply absolute left-0 cursor-pointer touch-none;
 transition: transform .05s,background .05s;
}

.roll-keys .white {
 @apply right-0;
 background: linear-gradient(to right,#cfcac0 0%,#f5f2ea 18%,#fffdf7 72%,#e6e1d6 92%,#bdb6a8 100%);
 border-bottom: 1px solid #8d877c;
 border-radius: 0 4px 4px 0;
 box-shadow: inset 0 1px 0 #fff,inset -3px 0 2px -1px #0000002e;
}

.roll-keys .white em {
 @apply absolute right-[7px];
 @apply bottom-[2px];
 font: 9px ui-monospace,monospace;
 @apply not-italic text-[#6a655b] pointer-events-none;
}

.roll-keys .white.down {
 background: linear-gradient(to right,#bdb7ab 0%,#e2ddd2 25%,#ece7dc 78%,#cfc9bc 100%);
 box-shadow: inset 3px 0 6px #0000003a,inset -1px 0 0 #0002;
 transform: translateX(-1px);
}

.roll-keys .black {
 @apply w-[60%] z-2;
 border-radius: 0 3px 3px 0;
 background: linear-gradient(to right,#050505 0%,#2b2b2d 55%,#3c3c40 80%,#121214 86%,#4a4a4f 100%);
 box-shadow: 2px 2px 3px #000000a6,inset 0 1px 0 #ffffff22,inset 0 -2px 0 #000;
}

.roll-keys .black.down {
 background: linear-gradient(to right,#050505 0%,#232325 60%,#2d2d31 90%,#18181a 100%);
 box-shadow: 1px 1px 1px #000000a0,inset 0 -1px 0 #000;
 transform: translateX(-2px);
}

.roll-keys .white.down,.roll-keys .black.down {
 filter: drop-shadow(0 0 0 transparent);
}

.score-editor-footer {
 @apply flex items-center justify-between gap-[10px];
 padding: 12px 20px;
 border-top: 1px solid #2c2c35;
}

.score-editor-footer>div {
 @apply flex items-center gap-[6px];
}

.score-preview-button,.score-save-button {
 @apply flex items-center gap-[7px];
 padding: 10px 14px;
 @apply rounded-[8px];
 background: #34343f;
 @apply text-[#dfdce7];
 font-size: 12px !important;
 @apply whitespace-nowrap;
}

.score-save-button {
 background: #f47741;
 @apply text-[#231911];
 font-weight: 600 !important;
}

.score-preview-button:hover {
 background: #444450;
}

.score-save-button:hover {
 background: #ff9460;
}

.score-editor-message {
 @apply flex items-center justify-between gap-3;
 padding: 8px 20px;
 @apply m-0 text-[11px];
 @apply text-[#c3c39e];
 background: #2a2a20;
}

.score-editor-message.error {
 @apply text-[#f2ac9b];
 background: #302322;
}

.composer-menu.composer-menu-floating {
 --ink: #f0efed;
 --accent: #ff7133;
 @apply text-ink;
 color-scheme: dark;
 font: 13px var(--sans);
 @apply z-150 overflow-y-auto;
 box-shadow: 0 12px 45px #0009;
}

.composer-menu-floating button:focus-visible {
 outline: 2px solid #ff9d70;
 outline-offset: -2px;
}

.cover-controls {
 @apply flex gap-[6px] items-center;
 @apply flex-wrap;
 padding: 7px 0 2px;
}

.composer-score-row {
 @apply flex gap-2 items-center;
 @apply flex-wrap;
 padding: 4px 0 10px;
}

.composer-score-row>span {
 @apply text-[10px];
 @apply text-[#92929e];
}

.score-open,.score-plan {
 @apply flex items-center gap-[6px];
 padding: 6px 10px;
 @apply rounded-[8px] text-[11px];
 @apply text-[#d1c5de];
 background: #2b2831;
 border: 1px solid #3c3745;
}

.score-plan {
 @apply text-[#d9c0ac];
 background: #302923;
 border-color: #43372b;
 @apply ml-auto;
}

.score-open:hover,.score-plan:hover {
 filter: brightness(1.2);
}

.instrument-choice {
 padding: 0 0 8px;
}

.ai-panel {
 max-height: calc(100svh - 190px);
}

.ai-body {
 @apply min-h-0 overflow-y-auto;
}

.composer-task-description {
 font-size: 11px !important;
 @apply leading-[1.5];
}

@media (max-width:720px) {
 .score-overlay {
  @apply p-2;
 }
 .score-editor {
  height: calc(100svh - 16px);
  @apply rounded-[13px];
 }
 .score-editor-header {
  @apply p-3;
 }
 .score-editor-title p {
  @apply text-[10px];
 }
 .score-editor-title>span {
  @apply hidden;
 }
 .roll-toolbar {
  padding: 8px 10px;
  @apply gap-2;
 }
 .roll-history {
  @apply ml-0;
 }
 .score-editor-footer {
  @apply p-[10px] flex-wrap;
 }
 .score-editor-footer>div:last-child {
  @apply ml-auto;
 }
 .score-editor-footer .wide {
  padding: 0 9px;
  @apply text-[11px];
 }
 .score-save-button {
  padding: 9px 10px;
  font-size: 11px !important;
 }
 .ai-panel {
  max-height: calc(100svh - 200px);
 }
}

.studio {
 --paper: #0b0b0d;
 --panel: #151517;
 --surface: #222225;
 --ink: #f0efed;
 --muted: #8d8d94;
 --line: #29292d;
 --accent: #ff7133;
 --lane: #111113;
 --grid-bar: #ffffff0c;
 --grid-beat: #ffffff04;
 --rec: #ff563b;
 --mute: #e4b65b;
 --solo: #79c9a3;
 --track-header: 244px;
 color-scheme: dark;
 @apply text-ink;
 background: var(--paper);
 font: 13px var(--sans);
 @apply relative isolate h-svh min-h-105 overflow-hidden grid;
 grid-template-rows: 60px minmax(0,1fr) 46px;
 grid-template-areas: "bar" "arr" "tools";
}

.studio button,.studio a,.studio input,.studio summary,.studio textarea {
 transition: background .15s,color .15s,border-color .15s;
}

.studio button:focus-visible,.studio a:focus-visible,.studio summary:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 3px;
}

.studio button:disabled {
 @apply opacity-[.3];
}

.studio ::-webkit-scrollbar {
 @apply h-2 w-[7px];
}

.studio ::-webkit-scrollbar-track {
 background: #111113;
}

.studio ::-webkit-scrollbar-thumb {
 background: #343439;
 @apply rounded-[8px];
 border: 2px solid #111113;
}

/*Project and transport*/

.studio-bar {
 grid-area: bar;
 @apply grid;
 grid-template-columns: 1fr auto 1fr;
 @apply items-center gap-4;
 padding: 0 18px;
 background: var(--paper);
 @apply z-15;
}

.studio-brand,.studio-transport,.studio-header-actions {
 @apply flex items-center gap-2 min-w-0;
}

.studio-header-actions {
 @apply justify-end;
}

.studio-logo {
 @apply flex items-center gap-[9px];
 font: 700 24px var(--display);
 @apply tracking-[-.8px] mr-[10px];
}

.studio-logo .kiku-mark {
 @apply flex-none rounded-[7px];
}

.header-pill {
 @apply h-[34px] rounded-[20px];
 background: #19191c;
 @apply inline-flex gap-[7px] items-center justify-center;
 padding: 0 12px;
 @apply text-[12px];
 @apply text-[#aaaab0] whitespace-nowrap;
 border: 1px solid transparent;
}

button.header-pill:hover,a.header-pill:hover,.project-menu summary:hover {
 background: #242428;
 @apply text-ink;
}

.header-pill.on {
 border-color: #55555b;
 @apply text-ink;
 background: #26262a;
}

.project-menu {
 @apply relative min-w-0;
}

.project-menu summary {
 @apply cursor-pointer;
 list-style: none;
 @apply max-w-[170px];
}

.project-menu summary::-webkit-details-marker {
 @apply hidden;
}

.project-menu summary>span {
 @apply overflow-hidden text-ellipsis;
}

.history-buttons {
 @apply gap-0;
 padding: 0 5px;
}

.history-buttons button {
 @apply grid place-items-center w-[29px] h-7 rounded-[50%] text-muted;
}

.history-buttons button:hover:not(:disabled) {
 @apply text-ink;
 background: #313136;
}

.studio-popover {
 background: #1b1b1f;
 border: 1px solid #3a3a40;
 @apply rounded-[14px] p-3;
 box-shadow: 0 12px 40px #0008;
 @apply text-ink;
}

.project-menu .studio-popover {
 @apply absolute top-[42px];
 @apply left-0 w-[250px] flex;
 @apply flex-col gap-[9px];
}

.export-menu .studio-popover {
 @apply left-auto;
 @apply right-0 w-[230px] gap-[2px] p-[6px] z-30;
}

.export-menu summary[aria-disabled=true] {
 @apply opacity-[.45] cursor-default;
}

.export-menu .spinner {
 @apply w-3 h-3;
}

.export-menu .studio-popover button:hover {
 background: #29292e;
}

.export-menu .studio-popover button>span {
 @apply flex;
 @apply flex-col gap-[2px];
}

.export-menu .studio-popover small {
 @apply text-[10px];
 @apply text-muted;
}

.studio-popover>button,.studio-popover>a {
 @apply flex items-center gap-[9px] p-[9px] rounded-[7px] text-left;
 @apply text-[12px];
}

.studio-popover>button:hover,.studio-popover>a:hover {
 background: var(--surface);
}

.project-name-label {
 @apply flex;
 @apply flex-col gap-2 text-muted;
 @apply text-[11px] p-1;
}

.project-name-label input {
 background: var(--lane);
 border: 1px solid var(--line);
 @apply rounded-[7px] text-ink p-[9px] w-full;
 @apply text-[13px];
}

.account-row {
 @apply flex items-center justify-between;
 border-top: 1px solid var(--line);
 padding: 9px 5px 0;
 @apply text-muted;
 @apply text-[12px];
}

.account-row button {
 @apply grid place-items-center h-7 w-7;
}

.studio .transport {
 @apply flex;
 @apply flex-nowrap;
 @apply flex-none items-center gap-[1px];
 padding: 3px 6px;
 border: 0;
 @apply rounded-[22px];
 background: #19191c;
 @apply min-h-0 h-[34px] m-0;
}

.studio .transport button {
 @apply h-7 w-[29px] grid place-items-center rounded-[50%] text-[#98989f];
}

.studio .transport button:hover {
 background: #303036;
 @apply text-ink;
}

.studio .transport .play.on {
 @apply text-ink;
 background: #323239;
}

.studio .transport .rec {
 color: var(--rec);
}

.studio .transport .rec.on {
 background: var(--rec);
 @apply text-[#fff];
 animation: rec-pulse 1.2s ease-in-out infinite;
}

.studio .transport button.on {
 @apply text-accent;
}

@keyframes rec-pulse {
 50% {
  opacity: .55;
 }
}

.lcd {
 @apply flex items-center gap-[13px];
 background: #19191c;
 @apply rounded-[22px] h-[34px];
 padding: 0 14px;
 @apply whitespace-nowrap text-[#9c9ca5];
 font: 11px ui-monospace,SFMono-Regular,Consolas,monospace;
 @apply font-semibold tabular-nums;
}

.lcd>svg {
 @apply text-[#6a6a73];
}

.lcd-bars {
 @apply text-[#676771] min-w-[49px];
}

.lcd-time {
 @apply min-w-17;
}

.tempo-pill {
 @apply gap-1;
 font: 10px ui-monospace,Consolas,monospace;
 @apply font-semibold text-[#9898a1];
}

.tempo-pill input {
 @apply w-7 p-0;
 background: none;
 border: 0;
 outline-offset: 3px;
 @apply text-inherit;
 appearance: textfield;
 font: inherit;
 @apply text-right;
}

.tempo-pill input::-webkit-inner-spin-button,.tempo-pill input::-webkit-outer-spin-button {
 @apply appearance-none m-0;
}

.time-signature {
 @apply ml-[15px];
}

/*Timeline and channels*/

.arrangement {
 grid-area: arr;
 @apply relative overflow-auto;
 background: var(--lane);
 overscroll-behavior: contain;
 border-radius: 9px 9px 0 0;
 margin: 0 8px;
 border: 1px solid #1e1e22;
 scrollbar-color: #343439 #111113;
}

.arr-canvas {
 @apply relative min-h-full;
}

.arr-top {
 @apply flex sticky top-0 z-7;
 background: #171719;
 border-bottom: 1px solid #2c2c31;
}

.arr-corner {
 @apply w-[var(--track-header)] sticky left-0 z-8 flex-none;
 @apply flex justify-between items-center;
 padding: 0 16px;
 background: #171719;
 border-right: 1px solid #2c2c31;
 @apply text-[#686872];
 font: 9px ui-monospace,Consolas,monospace;
 @apply tracking-[1.2px];
}

.arr-corner>span:first-child {
 @apply flex items-center gap-[7px];
}

.ruler {
 @apply relative;
 cursor: text;
 @apply select-none touch-none overflow-hidden;
}

.ruler-bar {
 @apply absolute top-0;
 @apply bottom-0;
 border-left: 1px solid #3c3c43;
 padding: 12px 5px 0;
 @apply text-[#72727c];
 font: 10px ui-monospace,Consolas,monospace;
 @apply pointer-events-none;
}

.ruler-head {
 @apply absolute bottom-0;
 @apply -left-[5px] w-0 h-0;
 border: 5px solid transparent;
 border-bottom: 0;
 border-top: 7px solid var(--accent);
 @apply pointer-events-none z-3;
}

.ruler-loop {
 @apply absolute bottom-0 h-1;
 background: var(--accent);
 @apply rounded-[3px] pointer-events-none;
}

.ruler-range {
 @apply absolute;
 inset-block: 0;
 background: #ff713325;
 @apply pointer-events-none;
}

.ruler-ghost {
 @apply absolute top-[2px] h-[5px] rounded-[3px] pointer-events-none;
 background: repeating-linear-gradient(-45deg,var(--accent) 0 4px,transparent 4px 8px);
 animation: ghost-slide 1s linear infinite;
 background-size: 11px 11px;
}

@keyframes ghost-slide {
 to {
  background-position: 11px 0;
 }
}

.chord-lane {
 @apply relative;
 border-top: 1px solid var(--line);
 font: 10px ui-monospace,monospace;
}

.chord-lane span {
 @apply absolute top-[2px];
 padding: 2px 6px;
 border-left: 2px solid var(--accent);
 @apply whitespace-nowrap text-[#b1b1ba];
 background: #222225;
 @apply rounded-[3px];
}

.arr-rows {
 @apply flex;
}

.arr-headers {
 @apply sticky left-0 z-5 w-[var(--track-header)] flex-none;
 background: #151517;
 border-right: 1px solid #2c2c31;
}

.track-head {
 @apply flex items-stretch;
 border-bottom: 1px solid #0c0c0e;
 border-left: 3px solid var(--clip);
 background: #161618;
}

.track-head.selected {
 background: #202024;
}

.track-head.silent {
 border-left-color: #4a4a52;
}

.track-head.silent .track-name,.track-head.silent .track-number {
 @apply text-[#6c6c76];
}

.track-head.silent .channel-volume {
 filter: grayscale(1);
 @apply opacity-[.6];
}

.track-number {
 @apply w-[26px] flex-none pt-6 text-center;
 font: 10px ui-monospace,monospace;
 @apply text-[#676770] cursor-pointer;
}

.track-main {
 @apply flex;
 @apply flex-col justify-center gap-[13px];
 padding: 0 11px 0 0;
 @apply min-w-0 flex-1;
}

.track-title-row {
 @apply flex items-center gap-[3px];
}

.track-name {
 @apply flex-1 min-w-0 w-full;
 background: transparent;
 border: 1px solid transparent;
 @apply text-ink;
 @apply text-[12px] font-semibold;
 padding: 3px 0;
 @apply rounded-[4px];
}

.track-name:hover {
 border-color: #3d3d44;
}

.track-name:focus {
 background: #29292e;
 outline: none;
 border-color: var(--accent);
 @apply pl-1;
}

.ms {
 @apply flex-none w-[21px] h-[22px] grid place-items-center text-[10px] font-semibold rounded-[50%];
 @apply text-[#84848e] p-0;
}

.ms:hover {
 background: #333339;
 @apply text-ink;
}

.ms.on-mute {
 color: var(--mute);
 background: #e4b65b20;
}

.ms.on-solo {
 color: var(--solo);
 background: #79c9a320;
}

.ms.trash {
 @apply w-[18px] text-[#5e5e68];
}

.ms.trash:hover {
 color: var(--rec);
}

.track-controls {
 @apply flex items-center gap-2;
}

.channel-volume {
 @apply block relative flex-1 h-[19px] overflow-hidden rounded-[12px];
 background: #242427;
 @apply min-w-0;
}

.channel-volume:before {
 content: '';
 @apply absolute inset-0;
 background: linear-gradient(to right,color-mix(in srgb,var(--clip) 65%,#777),var(--clip));
 @apply w-[var(--volume,50%)] opacity-[.75];
 mask-image: linear-gradient(to right,#000 70%,transparent);
}

.channel-volume input {
 @apply relative block w-full h-[19px] m-0 appearance-none;
 background: transparent;
 @apply cursor-ew-resize;
 padding: 0 8px;
}

.channel-volume input::-webkit-slider-thumb {
 @apply appearance-none h-[10px] w-[3px] rounded-[2px];
 background: #a4a4ac;
}

.channel-volume input::-moz-range-thumb {
 @apply h-[10px] w-[3px];
 border: 0;
 @apply rounded-[2px];
 background: #a4a4ac;
}

.channel-pan {
 @apply w-10 flex-none;
 background: #232326;
 border-radius: 20px 20px 4px 4px;
 @apply h-[19px] overflow-hidden;
}

.channel-pan input {
 @apply block appearance-none w-full h-[19px] m-0;
 padding: 0 7px;
 background: transparent;
 @apply cursor-ew-resize;
}

.channel-pan input::-webkit-slider-thumb {
 @apply appearance-none h-4 w-[3px];
 background: #65656f;
 @apply rounded-[3px];
}

.channel-pan input::-moz-range-thumb {
 @apply h-4 w-[3px];
 background: #65656f;
 border: 0;
 @apply rounded-[3px];
}

.add-track-button {
 @apply sticky left-0 w-full flex items-center justify-center gap-2 h-[58px] text-[#71717c];
 @apply text-[11px];
}

.add-track-button:hover {
 @apply text-ink;
 background: #1c1c20;
}

.arr-lanes {
 @apply relative flex-none touch-none select-none;
}

.arr-lanes.tool-range {
 cursor: text;
}

.lane {
 @apply absolute left-0;
 @apply right-0;
 border-bottom: 1px solid #ffffff05;
 @apply pointer-events-none;
}

.clip {
 @apply absolute rounded-[4px] overflow-hidden cursor-grab bg-[#3b4942];
 background-image: repeating-linear-gradient(to right,#14251b26 0 1px,transparent 1px var(--bar-width));
 box-shadow: inset 0 0 0 1px #71847840,inset 0 -2px #a5b8a67a;
 transition: filter .15s,opacity .15s;
}

.clip:active {
 @apply cursor-grabbing;
}

.tool-range .clip {
 cursor: text;
}

.tool-pointer .clip {
 cursor: text;
}

.tool-pointer .clip-head {
 @apply cursor-grab;
}

.tool-pointer .clip:active .clip-head {
 @apply cursor-grabbing;
}

.clip-head {
 @apply absolute;
 inset: 0 0 auto;
 @apply z-1 h-[21px];
 padding: 4px 8px 0;
 @apply text-[10px];
 line-height: 14px;
 @apply font-normal text-[#c1cec5] whitespace-nowrap overflow-hidden;
 @apply text-ellipsis;
 text-shadow: 0 1px 2px #111f19;
 background: linear-gradient(#3b494270,transparent);
}

.clip-wave {
 @apply block pointer-events-none;
}

.clip.chosen {
 box-shadow: 0 0 0 1px #bed0c2,inset 0 0 0 1px #bed0c230,inset 0 -2px #c0d1c08c;
 @apply z-2;
}

.clip.muted {
 filter: grayscale(1);
 @apply opacity-[.3];
}

/*A muted track, or one a solo elsewhere silences, goes grey until it is heard again.*/

.clip.silent {
 filter: grayscale(1);
 @apply opacity-[.45];
}

.clip-edge {
 @apply absolute top-0;
 @apply bottom-0;
 @apply left-0 w-2 cursor-ew-resize z-1;
}

.clip-edge.right {
 @apply left-auto;
 @apply right-0;
}

.clip-edge:hover {
 background: #ffffff40;
}

.clip:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 2px;
}

.clip-context-menu {
 @apply fixed z-50 w-55;
 max-width: calc(100vw - 16px);
 @apply p-[6px];
 background: #202025;
 border: 1px solid #44444e;
 @apply rounded-[10px];
 box-shadow: 0 12px 36px #0008;
 @apply text-ink;
}

.clip-menu-name {
 @apply block;
 padding: 6px 10px 8px;
 @apply text-[11px];
 @apply text-[#9393a2] whitespace-nowrap overflow-hidden;
 @apply text-ellipsis;
}

.clip-context-menu button {
 @apply flex items-center gap-[9px] w-full p-[10px] rounded-[6px] text-[12px];
 @apply text-left;
}

.clip-context-menu button:hover,.clip-context-menu button:focus-visible {
 background: #34343c;
 @apply text-[#fff];
 outline: none;
}

.range-box {
 @apply absolute z-3 pointer-events-none;
 background: #ff713326;
 box-shadow: inset 1px 0 var(--accent),inset -1px 0 var(--accent);
}

.studio .playhead {
 @apply absolute top-0;
 @apply left-0 w-[1px];
 background: #e9e9ec;
 @apply pointer-events-none z-4;
 will-change: transform;
 @apply opacity-[.7];
}

.arr-timebar {
 @apply sticky bottom-0 flex h-6 z-6;
 background: #111113;
 border-top: 1px solid #25252a;
}

.timebar-corner {
 @apply sticky left-0 z-7 w-[var(--track-header)] flex-none;
 background: #151517;
 border-right: 1px solid #2c2c31;
 padding: 7px 16px;
 font: 8px ui-monospace,monospace;
 @apply tracking-[1px] text-[#565661];
}

.arr-timebar>div {
 @apply relative;
}

.arr-timebar>div>span {
 @apply absolute top-[7px] text-[#5c5c68];
 font: 9px ui-monospace,monospace;
 @apply tracking-[.5px] pl-1;
 border-left: 1px solid #45454f;
}

.master-channel {
 @apply absolute left-[9px];
 @apply bottom-[70px] w-[243px] h-18 z-8;
 background: #18181b;
 border-top: 1px solid #29292f;
 border-left: 3px solid #d6d6da;
 padding: 12px 13px;
}

.master-channel>div {
 @apply flex items-center gap-[7px] text-[11px] mb-[10px];
}

.master-channel>div>svg {
 @apply text-[#8c8c95];
}

.master-channel>div>svg:last-child {
 @apply ml-auto;
}

.master-channel .channel-volume {
 @apply w-[143px] inline-block;
 vertical-align: middle;
 @apply h-4;
}

.master-channel .channel-volume input {
 @apply h-4;
}

.master-db {
 font: 9px ui-monospace,monospace;
 @apply text-[#84848f];
 float: right;
 @apply mt-1;
}

/*A real empty project still feels like a place to make music.*/

.arr-empty {
 @apply absolute left-0;
 @apply top-0;
 height: calc(100% - 150px);
 @apply min-h-[235px] grid place-items-center cursor-default z-6 pointer-events-none;
}

.empty-state {
 @apply text-center max-w-125;
 padding: 30px 20px;
 @apply pointer-events-auto;
}

.empty-symbol {
 @apply grid place-items-center w-[66px] h-[66px];
 border: 1px solid #323237;
 @apply rounded-[21px];
 margin: 0 auto 24px;
 @apply text-accent;
 background: linear-gradient(145deg,#242426,#171719);
 box-shadow: 0 8px 30px #0002;
}

.empty-eyebrow {
 @apply text-[#666670];
 @apply text-[9px] tracking-[2px];
}

.studio .empty-state h2 {
 font: 400 clamp(23px,2.5vw,34px) var(--sans);
 @apply tracking-[-1px];
 margin: 13px 0 12px;
 @apply text-[#e2e2e7];
}

.empty-state p {
 @apply text-[13px] leading-[1.8];
 @apply text-[#85858f];
 margin: 0 0 22px;
}

.empty-state>div {
 @apply flex items-center justify-center gap-2;
 @apply flex-wrap;
}

.run-button {
 @apply flex items-center justify-center gap-2;
 background: var(--accent);
 @apply text-[#fff] rounded-[22px] h-9;
 @apply text-[12px];
 padding: 0 16px;
 @apply cursor-pointer;
}

.run-button:hover {
 background: #ff864f;
}

.tool-button.wide {
 padding: 0 16px;
 @apply h-9;
 border: 1px solid #393940;
 @apply rounded-[22px] text-[12px];
 @apply text-[#c0c0c8];
}

.empty-formats {
 @apply block mt-4 text-[10px];
 @apply text-[#55555f];
}

/*Floating assistant; detailed controls open above the prompt.*/

.assistant-dock {
 @apply absolute bottom-22;
 left: calc(50% + 118px);
 transform: translateX(-50%);
 width: min(620px,calc(100% - 320px));
 @apply z-10;
}

.assistant-hidden {
 @apply hidden;
}

.ai-panel {
 @apply relative;
 background: #171719f5;
 border: 1px solid #45454b;
 @apply rounded-[18px];
 box-shadow: 0 12px 48px #0005;
 backdrop-filter: blur(20px);
 @apply flex;
 @apply flex-col text-ink;
}

.panel-title {
 @apply flex items-center gap-2;
 padding: 12px 13px 0;
 @apply min-w-0;
}

.composer-choice {
 @apply relative min-w-0 flex-none;
}

.composer-selector {
 @apply flex items-center gap-[7px] h-[30px];
 border: 1px solid #3b3b43;
 @apply rounded-[18px];
 padding: 0 10px;
 background: #28282e;
 @apply text-[#d7d7df];
 @apply text-[11px] whitespace-nowrap;
}

.composer-selector>svg:first-child {
 @apply text-[#a5a5b4] flex-none;
}

.composer-choice:nth-of-type(2) .composer-selector>svg:first-child {
 @apply text-[#e5a581];
}

.composer-selector:hover,.composer-selector.expanded {
 background: #34343c;
 border-color: #555561;
 @apply text-[#fff];
}

.selector-chevron {
 @apply text-[#777787];
 transition: transform .15s;
}

.expanded .selector-chevron {
 transform: rotate(180deg);
}

.composer-menu {
 @apply absolute;
 bottom: calc(100% + 12px);
 @apply left-0 w-75 p-2;
 background: #202025;
 border: 1px solid #44444e;
 @apply rounded-[15px];
 box-shadow: 0 16px 50px #0009;
 @apply z-22;
}

.composer-menu-heading {
 @apply flex items-center justify-between gap-3;
 padding: 7px 9px 12px;
}

.composer-menu-heading>span:first-child {
 @apply text-[#c7c7d2];
 @apply text-[12px];
}

.composer-menu-heading>span:last-child {
 @apply text-[#626272];
 font: 8px ui-monospace,monospace;
 @apply tracking-[1.4px];
}

.composer-options {
 @apply flex;
 @apply flex-col gap-1;
 max-height: min(330px,calc(100svh - 300px));
 @apply overflow-auto;
}

.composer-option {
 @apply flex items-center gap-[9px] text-left min-h-14;
 border: 1px solid transparent;
 @apply rounded-[10px];
 padding: 9px 8px;
 @apply text-[#c9c9d4];
}

.composer-option:hover:not(:disabled),.composer-option:focus-visible {
 background: #2c2c34;
 border-color: #464652;
 outline: none;
}

.composer-option.selected {
 background: #ff71330b;
 border-color: #a975534a;
}

.option-icon {
 @apply grid place-items-center flex-none w-[30px] h-[30px] rounded-[9px];
 color: var(--option-color);
 background: color-mix(in srgb,var(--option-color) 12%,transparent);
}

.option-copy {
 @apply flex;
 @apply flex-col gap-1;
 @apply flex-1 min-w-0;
}

.option-copy strong {
 @apply text-[12px] font-medium;
}

.option-copy small {
 @apply text-[#9393a2];
 @apply text-[10px] leading-[1.5];
}

.option-check {
 @apply text-[#e8a57e] flex-none;
}

.style-menu {
 @apply w-70;
}

.style-menu .composer-options {
 @apply grid;
 grid-template-columns: 1fr 1fr;
 @apply gap-1;
}

.style-menu .composer-option {
 @apply min-h-[41px] p-[6px] gap-[7px];
}

.style-menu .option-icon {
 @apply w-6 h-6 rounded-[7px];
}

.style-menu .option-copy strong {
 @apply text-[11px];
}

.composer-caption {
 @apply text-[10px];
 @apply text-[#747480] mr-auto;
}

.composer-score {
 @apply max-h-[min(330px,40svh)] overflow-auto;
 padding: 5px 0;
}

.composer-lyrics {
 border-top: 1px solid #303036;
 @apply pt-2;
}

.composer-brand {
 @apply ml-auto flex items-center gap-[5px] text-[10px] whitespace-nowrap;
 @apply text-[#9797a1];
}

.composer-brand svg {
 @apply text-accent;
}

.ai-body {
 padding: 10px 15px 12px;
 @apply flex;
 @apply flex-col gap-[10px] m-0;
}

.composer-prompt {
 @apply block;
}

.composer-prompt textarea {
 background: none;
 @apply text-ink;
 border: 0;
 @apply w-full resize-none block text-[13px] leading-[1.6] min-h-[45px];
 padding: 3px 1px;
 outline: none;
}

.composer-prompt textarea::placeholder {
 @apply text-[#81818b];
}

.composer-prompt textarea:focus-visible {
 outline: 0;
}

.ai-panel:focus-within {
 border-color: #6b6b76;
}

.composer-task-description {
 @apply text-[13px];
 @apply text-[#a0a0aa];
 margin: 4px 0 10px;
}

.composer-footer {
 @apply flex items-center gap-3 min-h-[30px];
}

.ai-actions {
 @apply flex items-center gap-[6px];
}

.selection-download {
 @apply relative;
}

.selection-download summary {
 list-style: none;
 @apply cursor-pointer;
}

.selection-download summary::-webkit-details-marker {
 @apply hidden;
}

.selection-download-menu {
 @apply absolute bottom-[38px];
 @apply right-0 z-40 flex;
 @apply flex-col gap-[2px] w-[150px] p-[5px];
 background: #1b1b1f;
 border: 1px solid #3a3a40;
 @apply rounded-[11px];
 box-shadow: 0 12px 40px #0008;
}

.selection-download-menu button {
 @apply flex items-baseline justify-between gap-2;
 padding: 8px 9px;
 @apply rounded-[7px] text-[12px];
 @apply text-ink;
}

.selection-download-menu button:hover {
 background: #29292e;
}

.selection-download-menu small {
 @apply text-[10px];
 @apply text-muted;
}

.ai-actions .run-button {
 @apply w-[30px] h-[30px] p-0 rounded-[50%];
}

.ai-tabs {
 @apply flex gap-[3px];
 padding: 0 0 3px;
 @apply overflow-x-auto;
 scrollbar-width: none;
}

.ai-tabs button {
 @apply flex items-center gap-[5px] rounded-[16px];
 padding: 6px 8px;
 @apply text-[10px];
 @apply text-[#8a8a94] whitespace-nowrap;
}

.ai-tabs button:hover:not(:disabled) {
 @apply text-ink;
 background: #2b2b30;
}

.ai-tabs button.chosen {
 @apply text-[#ff9565];
 background: #ff713317;
}

.ai-panel .field {
 @apply flex;
 @apply flex-col gap-[7px] text-[12px] m-0;
}

.ai-panel .field>span {
 @apply flex justify-between text-[#a0a0aa];
 @apply text-[11px] m-0;
}

.ai-panel .field em {
 @apply not-italic text-[#d0d0d8];
}

.ai-panel input:not([type]),.ai-panel input[type=text],.ai-panel .field textarea {
 @apply w-full;
 padding: 8px 10px;
 background: #141417;
 border: 1px solid #3a3a41;
 @apply text-ink rounded-[8px];
 @apply text-[12px];
}

.ai-where {
 border-left: 2px solid var(--accent);
 padding: 0 0 0 10px;
 @apply m-0 text-[#aaaab5];
 @apply text-[11px] leading-[1.6];
}

.ai-error {
 @apply flex items-start justify-between gap-[10px];
 padding: 9px 11px;
 @apply m-0;
 background: #ff563b14;
 border: 1px solid #ff563b40;
 @apply rounded-[8px] text-[12px] leading-[1.5];
}

.job-list {
 @apply absolute;
 bottom: calc(100% + 8px);
 @apply left-0 w-full flex;
 @apply flex-col gap-[6px];
 background: #171719;
 @apply p-[10px];
 border: 1px solid #38383f;
 @apply rounded-[14px] max-h-40 overflow-auto;
}

.job {
 @apply grid;
 grid-template-columns: 15px minmax(0,1fr) 22px;
 @apply items-center gap-[10px] p-[7px];
}

.job .spinner {
 @apply w-[13px] h-[13px];
}

.job strong {
 @apply block text-[12px] font-medium mb-[3px];
}

.job span {
 @apply text-[11px];
 @apply text-[#9595a0] leading-[1.5];
 overflow-wrap: anywhere;
}

.job.failed {
 @apply text-[#ff907b];
}

.job button {
 @apply text-[#888893];
}

/*Library and optional mixer*/

.library-drawer {
 @apply absolute z-12 top-17;
 @apply right-4;
 @apply bottom-16 w-[270px];
 max-width: calc(100% - 32px);
 background: #19191df7;
 border: 1px solid #3a3a42;
 @apply rounded-[16px];
 box-shadow: 0 12px 48px #0008;
 @apply flex;
 @apply flex-col overflow-hidden;
 backdrop-filter: blur(24px);
}

.library-drawer>header,.mixer-drawer>header {
 @apply flex justify-between items-center p-4 text-[#dadade];
 @apply text-[13px];
}

.library-drawer>header>span,.mixer-drawer>header>span {
 @apply flex items-center gap-2;
}

.library-drawer>header button,.mixer-drawer>header button {
 @apply grid place-items-center text-[#90909b];
}

.library-intro {
 padding: 0 16px;
 margin: 0 0 10px;
 @apply text-[11px];
 @apply text-[#777784];
}

.browser {
 @apply overflow-auto;
 padding: 0 10px 18px;
 @apply min-h-0;
}

.browser h2 {
 font: 10px var(--sans);
 @apply font-normal uppercase tracking-[1.2px];
 margin: 19px 9px 7px;
 @apply text-[#666673];
}

.browse-item {
 @apply flex items-center gap-[10px] w-full;
 padding: 9px 10px;
 @apply text-left rounded-[8px];
 @apply text-[12px];
 @apply text-[#c0c0c9];
}

.browse-item svg {
 @apply text-[#7d7d8a] flex-none;
}

.browse-item:hover {
 background: #2c2c33;
 @apply text-ink;
}

.browse-item.chosen {
 @apply text-[#ffad87];
 background: #ff713313;
}

.browse-item.chosen svg {
 @apply text-inherit;
}

.browse-item.recording {
 @apply text-[#ff957e];
 background: #ff563b18;
}

.project-info label,.project-info p {
 @apply flex items-center justify-between m-0;
 padding: 5px 10px;
 @apply text-[#94949f];
 @apply text-[11px];
}

.project-info input {
 @apply w-[70px];
 background: #111115;
 border: 1px solid #38383f;
 @apply rounded-[6px] p-[5px] text-ink;
 @apply text-[11px];
}

.project-info strong {
 @apply font-normal text-[#d0d0d8];
}

.project-info .chord-summary {
 @apply block leading-[1.6] text-[#b8b8c3];
}

.mixer-drawer {
 @apply absolute left-4;
 @apply bottom-[62px] z-13;
 background: #1a1a1e;
 border: 1px solid #3a3a42;
 @apply rounded-[16px];
 box-shadow: 0 10px 40px #0008;
 max-width: calc(100% - 32px);
 @apply overflow-hidden;
}

.mixer-drawer>header {
 padding: 12px 15px;
}

.mixer {
 @apply flex gap-[6px];
 padding: 0 10px 10px;
 @apply overflow-x-auto;
 max-width: calc(100vw - 50px);
}

.mixer-empty {
 @apply self-center text-[#898994];
 @apply text-[12px];
 margin: 0 20px;
}

.strip {
 @apply flex-none w-[73px];
 @apply flex;
 @apply flex-col items-center gap-[5px];
 background: #25252b;
 border-top: 2px solid var(--clip);
 @apply rounded-[8px];
 padding: 8px 4px;
}

.strip-master {
 background: #303036;
}

.strip.silent {
 border-top-color: #4a4a52;
}

.strip.silent .strip-pan,.strip.silent .strip-body,.strip.silent .strip-name {
 filter: grayscale(1);
 @apply opacity-[.55];
}

.strip-number {
 font: 9px ui-monospace,monospace;
 @apply text-[#81818f];
}

.strip-pan {
 @apply h-4 flex items-center;
}

.strip-pan input {
 @apply w-[58px];
 accent-color: var(--clip);
}

.strip-body {
 @apply flex gap-[7px] h-26;
}

.strip-meter {
 @apply relative w-[5px] rounded-[3px] overflow-hidden;
 background: #111115;
}

.strip-meter i {
 @apply absolute inset-0;
 transform: scaleY(0);
 transform-origin: bottom;
 background: linear-gradient(to top,#79c9a3 0 62%,#e4b65b 62% 84%,#ff563b 84%);
}

.fader {
 writing-mode: vertical-lr;
 direction: rtl;
 @apply w-[22px] h-26 m-0;
 accent-color: var(--clip);
}

.strip-db {
 font: 9px ui-monospace,monospace;
 @apply text-[#9595a2];
}

.strip-buttons {
 @apply flex gap-[3px];
}

.strip-name {
 @apply max-w-16 text-ellipsis overflow-hidden whitespace-nowrap;
 @apply text-[10px];
 @apply text-[#c8c8d1];
}

/*Quiet toolbar*/

.studio-tools {
 grid-area: tools;
 @apply flex items-center gap-2;
 padding: 0 12px;
 background: var(--paper);
 @apply min-w-0 z-14;
}

.tool-group {
 @apply flex items-center gap-[2px];
 padding: 3px 6px;
 @apply rounded-[20px];
 background: #19191c;
 @apply flex-none;
}

.tool-button {
 @apply inline-flex items-center justify-center gap-[6px] min-w-7 h-7;
 padding: 0 7px;
 @apply rounded-[50%] text-[11px];
 @apply text-[#898993] cursor-pointer;
}

.tool-button:hover {
 background: #2e2e34;
 @apply text-ink;
}

.tool-button.on {
 @apply text-[#e2e2e8];
 background: #303036;
}

.snap {
 @apply gap-[3px] text-[#72727e];
}

.snap select {
 @apply h-[25px];
 padding: 0 2px;
 background: none;
 border: 0;
 @apply text-[#9a9aa5];
 @apply text-[10px] cursor-pointer w-[53px];
}

.snap select option {
 background: #222225;
}

.tool-hint {
 @apply flex-1 text-[#5f5f6c];
 @apply text-[10px] whitespace-nowrap overflow-hidden;
 @apply text-ellipsis flex gap-[10px] items-center;
}

.zoom-tools {
 @apply gap-[6px];
}

.assistant-toggle {
 @apply rounded-[20px];
 padding: 0 12px;
 @apply h-[34px] whitespace-nowrap;
 background: #19191c;
 @apply text-[#a0a0aa];
}

.assistant-toggle.on {
 @apply text-[#ffad88];
 background: #ff71330d;
}

.assistant-toggle svg {
 @apply text-accent;
}

.shortcuts-popover {
 @apply absolute bottom-15;
 @apply right-4 z-16 w-[278px] text-[12px];
}

.shortcuts-popover>header {
 @apply flex justify-between items-center;
 padding: 4px 2px 13px;
 border-bottom: 1px solid #33333b;
 @apply mb-[7px];
}

.shortcuts-popover strong {
 @apply font-medium;
}

.shortcut {
 @apply flex justify-between items-center gap-[10px];
 padding: 7px 3px;
 @apply text-[#a4a4af];
 @apply text-[11px];
}

.shortcut kbd {
 font: 10px ui-monospace,monospace;
 background: #303036;
 border: 1px solid #41414a;
 @apply rounded-[4px];
 padding: 3px 6px;
 @apply text-[#d0d0d8];
}

.studio-notice {
 @apply absolute left-[50%];
 @apply bottom-15;
 transform: translateX(-50%);
 @apply z-20 m-0 flex gap-3 items-center;
 padding: 12px 16px;
 border: 1px solid #46464f;
 @apply rounded-[12px];
 background: #27272f;
 @apply text-[#e8e8ee];
 @apply text-[12px];
 box-shadow: 0 8px 24px #0005;
 max-width: calc(100% - 32px);
}

.studio-notice button {
 @apply text-[#ffad88] whitespace-nowrap;
}

/*Score controls within assistant settings*/

.segmented {
 @apply grid;
 grid-template-columns: 1fr 1fr;
 @apply gap-[3px] p-[3px];
 background: #141417;
 @apply rounded-[9px];
}

.segmented button {
 padding: 8px 4px;
 @apply rounded-[6px] text-[11px];
 @apply text-[#9595a0];
}

.segmented button.chosen {
 background: #323237;
 @apply text-[#ffad88];
}

.ai-panel .text-button {
 @apply inline-flex items-center gap-[6px] mt-[7px] p-0 text-[#ffad88];
 @apply text-[11px];
}

.ghost-button {
 @apply flex-1 h-[33px];
 border: 1px solid #414149;
 @apply rounded-[8px];
 background: #26262c;
 @apply text-[12px];
}

.score-next {
 @apply flex gap-2;
}

.score-sheet {
 @apply flex;
 @apply flex-col gap-[11px];
}

.score-meta {
 @apply grid;
 grid-template-columns: 1fr 92px;
 @apply gap-[10px];
 align-items: end;
}

.score-meta input[type=number] {
 @apply w-full;
 background: #141417;
 border: 1px solid #3a3a41;
 @apply rounded-[7px];
 padding: 7px 8px;
 @apply text-ink;
 @apply text-[12px];
}

.stepper {
 @apply flex items-center gap-1;
 background: #141417;
 border: 1px solid #3a3a41;
 @apply rounded-[7px] p-[3px];
}

.stepper button {
 @apply w-[26px] h-[26px] grid place-items-center rounded-[5px] text-[#9595a0];
}

.stepper strong {
 @apply flex-1 text-center;
 @apply text-[12px] font-medium whitespace-nowrap;
}

.stepper strong em {
 @apply not-italic text-accent;
}

.score-bars {
 @apply grid;
 grid-template-columns: repeat(2,minmax(0,1fr));
 @apply gap-[5px] max-h-75 overflow-auto;
}

.score-bar {
 @apply flex;
 @apply flex-col gap-[3px];
 padding: 6px 7px 7px;
 @apply rounded-[7px];
 background: #26262c;
 border: 1px solid #3a3a41;
}

.score-bar.opens {
 border-left: 3px solid var(--accent);
}

.score-bar .bar-no {
 @apply flex justify-between;
 font: 10px ui-monospace,monospace;
 @apply text-[#9595a0];
}

.score-bar .bar-no small {
 @apply text-[10px];
}

.score-bar em {
 @apply not-italic text-[10px];
 @apply text-accent;
}

.ai-panel .score-bar input {
 padding: 4px 6px;
 font: 12px ui-monospace,monospace;
}

.score-hint {
 @apply text-[11px] leading-[1.6];
 @apply text-[#9595a0] m-0;
}

@media (min-width:1250px) {
 .studio-transport {
  @apply absolute left-[50%];
  transform: translateX(-50%);
 }
 .studio-header-actions {
  grid-column: 3;
 }
}

@media (max-width:1100px) {
 .studio-bar {
  @apply gap-2;
  padding: 0 12px;
 }
 .studio-logo {
  @apply mr-1;
 }
 .history-buttons {
  @apply hidden;
 }
 .project-menu summary {
  @apply max-w-33;
 }
 .lcd {
  @apply gap-[9px];
  padding: 0 10px;
 }
 .lcd-bars {
  @apply hidden;
 }
 .studio-header-actions {
  @apply gap-[5px];
 }
 .header-pill {
  padding: 0 9px;
 }
 .tempo-pill {
  padding: 0 8px;
 }
 .time-signature {
  @apply ml-[6px];
 }
}

@media (max-width:760px) {
 .studio-bar {
  grid-template-columns: 1fr auto;
  grid-template-rows: 47px 42px;
  @apply h-[89px] gap-0;
 }
 .studio {
  grid-template-rows: 89px minmax(0,1fr) 46px;
 }
 .studio-transport {
  grid-row: 2;
  grid-column: 1/-1;
  @apply justify-center;
  border-top: 1px solid #222227;
  padding: 5px 0;
 }
 .lcd-bars {
  @apply block;
 }
 .tempo-pill {
  @apply hidden;
 }
 .studio-logo {
  @apply text-[24px];
 }
 .header-pill {
  @apply h-[30px] text-[11px];
 }
 .assistant-dock {
  left: calc(50% + 110px);
  width: calc(100% - 300px);
  @apply min-w-75;
 }
 .composer-brand {
  @apply hidden;
 }
 .panel-sub {
  @apply ml-auto;
 }
 .library-drawer {
  @apply top-[97px];
 }
 .tool-hint {
  @apply hidden;
 }
 .zoom-tools {
  @apply ml-auto;
 }
 .master-channel {
  @apply bottom-[70px];
 }
 .empty-eyebrow {
  @apply hidden;
 }
 .empty-symbol {
  @apply mb-4 w-13 h-13 rounded-[16px];
 }
 .studio .empty-state h2 {
  @apply text-[23px];
 }
 .empty-state p {
  @apply text-[12px];
 }
 .arr-empty {
  height: calc(100% - 185px);
 }
}

@media (max-width:639px) {
 .assistant-dock {
  @apply left-[50%];
  width: calc(100% - 32px);
  @apply min-w-0 bottom-[85px];
 }
 .master-channel {
  @apply w-[155px];
  padding: 11px 10px;
  @apply h-[65px];
 }
 .master-channel .channel-volume {
  @apply w-23;
 }
 .master-db {
  @apply text-[8px];
 }
 .master-channel>div {
  @apply mb-2;
 }
 .track-main {
  @apply pr-[7px] gap-[11px];
 }
 .track-number {
  @apply w-[18px] text-[9px];
 }
 .track-name {
  @apply text-[11px];
 }
 .ms {
  @apply w-[17px];
 }
 .ms.trash {
  @apply hidden;
 }
 .track-title-row {
  @apply gap-0;
 }
 .channel-pan {
  @apply w-[27px];
 }
 .track-controls {
  @apply gap-[5px];
 }
 .arr-corner {
  padding: 0 10px;
 }
 .timebar-corner {
  @apply pl-[10px];
 }
 .studio-tools {
  @apply gap-[5px];
  padding: 0 7px;
 }
 .tool-group {
  @apply p-[3px];
 }
 .snap,.help-button {
  @apply hidden;
 }
 .zoom-tools {
  @apply gap-0;
 }
 .assistant-toggle {
  padding: 0 8px;
 }
 .assistant-toggle span {
  @apply hidden;
 }
 .panel-sub {
  @apply text-[9px];
 }
 .composer-context {
  @apply text-[10px];
 }
 .ai-tabs button {
  padding: 6px 7px;
  @apply text-[9px];
 }
 .settings-body {
  max-height: calc(100svh - 350px);
  @apply p-4;
 }
 .studio .empty-state h2 {
  @apply text-[21px] tracking-[-.6px];
 }
 .empty-state {
  padding: 25px 12px;
 }
 .empty-state>div {
  @apply gap-[6px];
 }
 .empty-state .run-button,.tool-button.wide {
  @apply h-8 text-[11px];
  padding: 0 11px;
 }
 .arr-empty {
  @apply min-h-55;
  height: calc(100% - 170px);
 }
 .empty-formats {
  @apply text-[9px];
 }
 .empty-symbol {
  @apply w-[45px] h-[45px];
 }
 .studio-header-actions .header-pill {
  @apply gap-1;
  padding: 0 9px;
 }
 .project-menu summary {
  @apply max-w-[126px];
 }
 .studio-brand {
  @apply gap-1;
 }
 .studio-logo {
  @apply mr-[2px];
 }
 .studio-logo span {
  @apply hidden;
 }
 .studio-notice {
  width: calc(100% - 24px);
  @apply text-[11px];
 }
 .library-drawer {
  @apply bottom-[58px];
  @apply right-3;
 }
 .arr-timebar>div>span {
  @apply text-[8px];
 }
}

@media (max-height:660px) {
 .empty-symbol,.empty-eyebrow,.empty-formats {
  @apply hidden;
 }
 .empty-state p {
  @apply mb-[13px];
 }
 .empty-state {
  @apply p-4;
 }
 .assistant-dock {
  @apply bottom-20;
 }
 .settings-body {
  max-height: calc(100svh - 285px);
 }
 .arr-empty {
  height: calc(100% - 155px);
 }
}

@media (prefers-reduced-motion:reduce) {
 .studio * {
  animation: none !important;
  transition: none !important;
 }
}

@media (max-width:639px) {
 .composer-choice:nth-of-type(2) .composer-menu {
  @apply left-auto;
  @apply -right-[35px];
 }
 .composer-menu {
  width: min(300px,calc(100vw - 48px));
 }
 .style-menu {
  width: min(280px,calc(100vw - 48px));
 }
}

@media (max-width:380px) {
 .panel-title {
  @apply gap-[6px];
  padding-inline: 12px;
 }
 .composer-selector {
  @apply gap-[5px];
  padding: 0 7px;
  @apply text-[10px];
 }
 .composer-choice:nth-of-type(2) .composer-selector>svg:first-child {
  @apply hidden;
 }
 .composer-add,.composer-close {
  @apply w-6 h-6;
 }
 .composer-selector span {
  @apply max-w-[82px] overflow-hidden text-ellipsis;
 }
 .lcd-bars {
  @apply hidden;
 }
 .project-menu summary {
  @apply max-w-[86px];
 }
 .studio-transport {
  @apply gap-[6px];
 }
}

/*Give the transcription action room without crowding the transport or project menu.*/

@media (min-width:640px) and (max-width:1350px) {
 .studio-bar {
  grid-template-columns: 1fr auto;
  grid-template-rows: 47px 42px;
  @apply h-[89px] gap-0;
 }
 .studio {
  grid-template-rows: 89px minmax(0,1fr) 46px;
 }
 .studio-transport {
  grid-row: 2;
  grid-column: 1/-1;
  @apply static;
  transform: none;
  @apply justify-center;
  border-top: 1px solid #222227;
  padding: 5px 0;
 }
 .studio-header-actions {
  grid-column: 2;
 }
 .library-drawer {
  @apply top-[97px];
 }
}

@media (max-width:639px) {
 .studio-bar {
  grid-template-rows: 47px 38px 42px;
  @apply h-[127px];
 }
 .studio {
  grid-template-rows: 127px minmax(0,1fr) 46px;
 }
 .studio-brand {
  grid-row: 1;
  grid-column: 1/-1;
 }
 .studio-header-actions {
  grid-row: 2;
  grid-column: 1/-1;
  @apply justify-center gap-1;
 }
 .studio-header-actions .header-pill {
  padding: 0 8px;
 }
 .studio-transport {
  grid-row: 3;
 }
 .library-drawer {
  @apply top-[135px];
 }
}

.composer-close {
 @apply h-[27px] w-[27px] flex-none grid place-items-center text-[#a0a0a9] rounded-[50%] p-0;
}

.composer-close:hover {
 background: #38383e;
 @apply text-ink;
}

/*How much a restyle changes: a filled rail split into named zones.*/

.strength {
 @apply flex;
 @apply flex-col gap-[9px];
 padding: 4px 0 10px;
}

.strength-top {
 @apply flex items-baseline justify-between text-[11px];
 @apply text-[#a0a0aa];
}

.strength-top strong {
 @apply text-[12px] font-semibold;
 @apply text-ink;
}

.strength-top em {
 @apply not-italic font-normal text-[#85858f] ml-[7px] tabular-nums;
}

.strength-track {
 @apply relative h-[22px];
}

.strength-rail {
 @apply absolute left-0;
 @apply right-0;
 @apply top-2 h-[6px] rounded-[3px];
 background: linear-gradient(to right,var(--accent) var(--fill),#34343a var(--fill));
 @apply pointer-events-none;
}

.strength-rail i {
 @apply absolute -top-[3px] w-[2px] h-3 -ml-[1px] rounded-[1px];
 background: #17171a;
}

.strength-track input {
 @apply absolute inset-0 w-full h-[22px] m-0;
 background: none;
 @apply cursor-pointer;
 -webkit-appearance: none;
 @apply appearance-none;
}

.strength-track input::-webkit-slider-runnable-track {
 @apply h-[22px];
 background: none;
}

.strength-track input::-moz-range-track {
 @apply h-[22px];
 background: none;
}

.strength-track input::-webkit-slider-thumb {
 -webkit-appearance: none;
 @apply w-[18px] h-[18px] mt-[2px] rounded-[50%];
 background: #fff;
 border: 4px solid var(--accent);
 box-shadow: 0 2px 8px #0008;
}

.strength-track input::-moz-range-thumb {
 @apply w-[10px] h-[10px] rounded-[50%];
 background: #fff;
 border: 4px solid var(--accent);
 box-shadow: 0 2px 8px #0008;
}

.strength-track input:focus-visible {
 outline: none;
}

.strength-track input:focus-visible::-webkit-slider-thumb {
 box-shadow: 0 0 0 4px #ff713355;
}

.strength-zones {
 @apply grid;
 grid-template-columns: repeat(4,1fr);
 @apply gap-1;
}

.strength-zones button {
 padding: 6px 0;
 @apply rounded-[8px] text-[10px];
 @apply text-[#8a8a94];
 background: #222226;
 border: 1px solid transparent;
}

.strength-zones button:hover {
 @apply text-ink;
 background: #2b2b30;
}

.strength-zones button.on {
 @apply text-[#ff9565];
 background: #ff713317;
 border-color: #ff713340;
}

.strength-text {
 @apply m-0 min-h-[30px] text-[11px] leading-[1.45];
 @apply text-[#9a9aa4];
}

/*A take sits under its source; its switch picks it or the original.*/

.track-head.take-head {
 background: #141416;
 border-left-style: dashed;
}

.take-use {
 @apply flex-none self-center grid place-items-center w-[18px] h-[18px];
 margin: 0 7px 0 9px;
 @apply rounded-[5px];
 border: 1.5px solid #5b5b64;
 background: none;
 @apply text-[#1a1208] cursor-pointer;
}

.take-use:hover {
 border-color: var(--accent);
}

.take-use.on {
 background: var(--accent);
 border-color: var(--accent);
}

.take-warn {
 @apply grid place-items-center text-[#e4b65b];
}

.lane.take-lane {
 background: #ffffff03;
}

/*A running job's lane: dots morph on a fixed grid and brighten with progress.*/

.track-head.job-head {
 border-left: 3px dashed var(--accent);
 background: #17151a;
}

.job-pulse {
 @apply flex-none self-center w-2 h-2;
 margin: 0 12px 0 14px;
 @apply rounded-[50%];
 background: var(--accent);
 animation: job-pulse 1.4s ease-in-out infinite;
}

.job-head .track-main {
 @apply justify-center gap-[6px];
}

.job-title {
 @apply flex-1 min-w-0 text-[12px] font-medium;
 @apply text-ink whitespace-nowrap overflow-hidden;
 @apply text-ellipsis;
}

.job-status {
 @apply text-[10px];
 @apply text-[#9a9aa4] whitespace-nowrap overflow-hidden;
 @apply text-ellipsis;
}

.job-meter {
 @apply block h-[3px] rounded-[2px];
 background: #2c2c31;
 @apply overflow-hidden;
}

.job-meter i {
 @apply block h-full;
 background: var(--accent);
 transition: width .4s linear;
}

.job-lane {
 @apply absolute z-2 pointer-events-none rounded-[6px] overflow-hidden;
 background: #ff71330d;
 border: 1px dashed #ff713366;
}

.job-wave {
 @apply absolute left-0;
 @apply top-5 block pointer-events-none;
}

.job-lane-label {
 @apply absolute left-2;
 @apply top-1 text-[10px] font-medium;
 @apply text-[#ffb08c] whitespace-nowrap tabular-nums;
}

@keyframes job-pulse {
 50% {
  opacity: .35;
  transform: scale(.8);
 }
}

@media (prefers-reduced-motion:reduce) {
 .job-pulse {
  animation: none;
 }
 .job-meter i {
  transition: none;
 }
}

.save-pill .spinner {
 @apply w-3 h-3;
}

.save-pill.saved svg {
 @apply text-[#79c9a3];
}

.save-pill.error svg {
 @apply text-[#ff907b];
}

.save-pill.needs {
 @apply text-[#ffb08c];
 border-color: #ff713355;
}

.voice-choice {
 @apply flex items-center gap-1 text-[11px];
 @apply text-[#a0a0aa];
}

.voice-choice span {
 @apply mr-[6px];
}

.voice-choice button {
 padding: 5px 10px;
 @apply rounded-[12px] text-[11px];
 @apply text-[#8a8a94];
 background: #222226;
 border: 1px solid transparent;
}

.voice-choice button:hover {
 @apply text-ink;
}

.voice-choice button.on {
 @apply text-[#ff9565];
 background: #ff713317;
 border-color: #ff713340;
}