:root {
  color-scheme: dark;
  --background: #141412;
  --surface: #1b1b19;
  --raised: #22221f;
  --input: #141413;
  --line: #343430;
  --text: #f0eee8;
  --muted: #a8a59c;
  --quiet: #838078;
  --accent: #f4c55d;
  --ink: #211a0d;
  font: 14px/1.45 'Inter', 'Segoe UI', sans-serif;
  background: var(--background);
  color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .46; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 34px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); background: var(--raised); white-space: nowrap; text-decoration: none;
}
button:hover:not(:disabled), .button:hover { border-color: #737067; background: #2d2d28; }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 700; }
button.primary:hover:not(:disabled) { background: #ffda80; border-color: #ffda80; }
button.flat { background: transparent; }
button.icon { min-width: 36px; padding-inline: 8px; }
button.is-active { color: var(--accent); border-color: #74603a; background: #32291c; }
button.danger { color: #ffab98; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, .chart-lane:focus-visible, canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, select, textarea { color: var(--text); background: var(--input); border: 1px solid var(--line); border-radius: 5px; min-width: 0; padding: 8px 10px; }
textarea { width: 100%; resize: vertical; }
input[type=range] { accent-color: var(--accent); padding: 0; }
input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }
input[readonly] { color: var(--muted); }
label { display: grid; gap: 5px; min-width: 0; font-size: 12px; color: var(--muted); }
label.check { display: flex; align-items: center; gap: 8px; }
h1, h2, h3, p { margin: 0; }
h1 { font: 750 clamp(29px, 3.5vw, 47px)/1.07 'Barlow Condensed', 'Arial Narrow', 'Segoe UI', sans-serif; letter-spacing: -.035em; overflow-wrap: anywhere; }
h2 { font-size: 16px; letter-spacing: -.015em; }
h3 { font-size: 14px; }
small, .muted { color: var(--muted); }
.eyebrow { font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.mono { font: 12px/1.45 'IBM Plex Mono', Consolas, monospace; font-variant-numeric: tabular-nums; }
.app-header { display: flex; justify-content: space-between; align-items: center; padding: 0 22px; height: 62px; background: #181816; border-bottom: 1px solid var(--line); gap: 14px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: .045em; white-space: nowrap; }
.brand small { color: var(--accent); font-size: 9px; letter-spacing: .22em; display: block; }
.brand-mark { display: flex; width: 35px; height: 35px; align-items: center; justify-content: center; gap: 2px; color: var(--ink); background: var(--accent); border-radius: 8px; }
.brand-mark i { width: 3px; height: 12px; border-radius: 2px; background: currentColor; transform: skewX(-12deg); }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(4) { height: 18px; }
.brand-mark i:nth-child(3) { height: 24px; }
.header-actions, .row { display: flex; gap: 8px; align-items: center; }
.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.avatar { display: grid; place-items: center; border: 1px solid #5b523b; border-radius: 100%; height: 31px; width: 31px; color: var(--accent); background: #332a1a; font-size: 11px; font-weight: 750; flex: none; }
.workspace { display: grid; grid-template-columns: 235px minmax(0, 1fr); min-height: calc(100vh - 62px); }
.sidebar { padding: 20px 13px; border-right: 1px solid var(--line); background: #181816; }
.sidebar-top { padding: 0 5px 15px; }
.sidebar .project-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.sidebar .project-tabs button { flex: 1; padding-inline: 3px; }
.project-list { display: grid; gap: 3px; max-height: calc(100vh - 220px); overflow: auto; }
.project-row { width: 100%; text-align: left; justify-content: flex-start; padding: 9px; gap: 9px; background: transparent; border-color: transparent; }
.project-row.active { border-color: #574a30; background: #30291d; }
.project-row .item-icon { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 5px; background: #30302b; color: #c2bba8; }
.project-row.active .item-icon { color: var(--accent); background: #463820; }
.project-row span:last-child { min-width: 0; }
.project-row strong, .project-row small { display: block; overflow: hidden; text-overflow: ellipsis; }
.project-row strong { font-size: 12px; }
.project-row small { font-size: 10px; }
.side-hint { padding: 8px; font-size: 12px; color: var(--quiet); }
.library-actions { display: flex; gap: 7px; flex-wrap: wrap; padding-top: 10px; }
.main { min-width: 0; padding: 24px clamp(14px, 2vw, 31px) 36px; }
.project-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.project-header .eyebrow { margin-bottom: 7px; }
.project-header .subline { color: var(--muted); margin-top: 7px; font-size: 12px; }
.status { color: var(--accent); }
.project-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 13px; align-items: start; }
.editor-companion { display: grid; gap: 13px; min-width: 0; }
.panel { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); min-width: 0; }
.panel-header { padding: 12px 13px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.editor-preview .panel-header { flex-wrap: wrap; }
.look-ahead { gap: 6px; white-space: nowrap; }
.look-ahead input { width: 52px; padding: 3px 5px; }
.panel-body { padding: 14px; }
.stack { display: grid; gap: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.transport { padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 9px; flex-wrap: wrap; }
.play { width: 40px; }
.clock { min-width: 78px; color: var(--accent); font-size: 15px; }
.volume { width: 62px; }
.wave-tools { min-height: 39px; gap: 7px 11px; padding: 5px 10px; border-top: 1px solid var(--line); }
.wave-tools input[type=range] { width: 72px; }
.wave-tools .wave-pan { flex: 1 1 110px; }
.wave-tools .wave-pan input { flex: 1; }
.wave-tools button { min-height: 25px; padding: 2px 7px; font-size: 12px; }
#wave-window { margin-left: auto; white-space: nowrap; }
.wave-overview { position: relative; height: 99px; background: #181815; border-block: 1px solid var(--line); }
.wave-overview canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: pan-y; }
.wave-overview canvas.is-panning { cursor: grabbing; }
.wave-hint { position: absolute; top: 31%; left: 0; right: 0; padding-inline: 12px; text-align: center; color: var(--muted); font-size: 12px; pointer-events: none; }
#wave-cursor { position: absolute; inset-block: 0; width: 1px; background: var(--accent); pointer-events: none; }
.chart-toolbar { min-height: 48px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.chart-toolbar button, .chart-toolbar select { min-height: 28px; padding: 4px 7px; font-size: 12px; }
.chart-toolbar .zoom { width: 62px; }
.chart-stage { position: relative; isolation: isolate; background: #191917; }
#chart-waveform { position: absolute; pointer-events: none; }
.chart-scroll { --label: 148px; position: relative; z-index: 1; overflow: auto; max-height: min(535px, 56vh); overscroll-behavior-x: contain; scrollbar-color: #575448 #22221f; }
.chart-strip { display: grid; grid-template-columns: var(--label) 1fr; width: max-content; position: relative; }
.chart-sticky { position: sticky; left: 0; z-index: 3; border-right: 1px solid #49473e; }
.ruler { position: sticky; top: 0; z-index: 5; }
.ruler-label, .lane-label { display: flex; align-items: center; gap: 8px; background: #22221e; padding: 0 8px; color: var(--text); }
.ruler-label { height: 28px; font-size: 10px; letter-spacing: .12em; color: var(--muted); }
.lane-label { height: 34px; font-size: 11px; border-bottom: 1px solid #30302c; white-space: nowrap; }
.lane-label .key { margin-left: auto; font-size: 9px; color: #b9b6ab; min-width: 15px; text-align: center; border: 1px solid #4a483f; border-radius: 3px; }
.lane-label .dot { width: 7px; height: 7px; background: var(--lane); border-radius: 100%; flex: none; }
.chart-group { color: var(--quiet); height: 22px; background: #191917; border-bottom: 1px solid #343430; }
.chart-group .ruler-label { height: 100%; background: #191917; }
.ruler-track, .chart-lane { background-image: linear-gradient(to right, #555147 1px, transparent 1px), linear-gradient(to right, #383630 1px, transparent 1px), linear-gradient(to right, #292823 1px, transparent 1px); background-size: var(--bar) 100%, var(--beat) 100%, var(--snap) 100%; }
.ruler-track { background-color: #272620; height: 28px; position: relative; cursor: crosshair; touch-action: pan-y; }
.ruler-track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ruler-track span { position: absolute; top: 6px; color: #c6bdab; padding-left: 6px; font: 10px Consolas, monospace; pointer-events: none; }
.chart-lane { position: relative; height: 34px; border-bottom: 1px solid #30302c; cursor: crosshair; }
.chart-strip:nth-child(even) .chart-lane { background-color: #ffffff05; }
.chart-lane:hover { background-color: #f4c55d0b; }
.note { position: absolute; z-index: 2; top: 7px; height: 20px; min-height: 0; min-width: 8px; padding: 0; border-radius: 4px; background: var(--lane); border-color: #0003; color: #191811; overflow: hidden; box-shadow: inset 0 1px #fff4; cursor: grab; touch-action: none; user-select: none; }
.note:hover:not(:disabled), .note.selected { background: var(--lane); border-color: #fff8; filter: brightness(1.19); }
.note.selected { outline: 2px solid #fff8; outline-offset: 1px; }
.note-edge { position: absolute; inset-block: 0; display: grid; place-items: center; width: min(9px, 28%); cursor: ew-resize; }
.note-edge[data-edge=start] { left: 0; }
.note-edge[data-edge=end] { right: 0; }
.note-edge::after { content: ''; width: 1px; height: 10px; border-radius: 1px; background: #17161265; }
.note-edge:hover::after, .note.selected .note-edge::after { background: #171612a0; }
.note.is-moving { opacity: .35; cursor: grabbing; }
.note-drag-preview { pointer-events: none; outline: 1px solid #fffd; }
.note-drag-preview.invalid { background: #e37d72; outline-color: #ffe0da; }
.chart-cursor { position: absolute; width: 2px; top: 28px; bottom: 0; z-index: 4; background: var(--accent); pointer-events: none; box-shadow: 0 0 7px #f4c55d55; }
.chart-cursor::before { content: ''; position: absolute; top: 0; left: -3px; border-inline: 4px solid transparent; border-top: 6px solid var(--accent); }
.chart-footer { border-top: 1px solid var(--line); padding: 9px 11px; color: var(--muted); font-size: 11px; }
.inspector-tabs { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); }
.inspector-tabs button { flex: 1; min-height: 29px; padding: 3px 5px; font-size: 11px; }
.helper { color: var(--muted); font-size: 12px; }
.file-row { border: 1px solid var(--line); border-radius: 6px; padding: 8px; display: grid; gap: 7px; }
.file-row strong { font-size: 12px; overflow-wrap: anywhere; }
.file-row .row button { min-height: 26px; padding: 2px 6px; }
details { border-top: 1px solid var(--line); padding-top: 10px; }
summary { color: var(--muted); cursor: pointer; font-size: 12px; }
details > .stack { margin-top: 12px; }
.mix-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .65fr); gap: 14px; align-items: start; }
.mix-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(104px, 160px) auto; gap: 10px; align-items: center; border: 1px solid var(--line); background: #20201d; padding: 10px; border-radius: 6px; }
.mix-row strong, .mix-row small { display: block; overflow-wrap: anywhere; }
.empty-state { padding: 36px 24px; max-width: 650px; margin: 7vh auto; }
.empty-state p { margin: 12px 0 20px; color: var(--muted); }
.auth { min-height: calc(100vh - 62px); display: grid; place-items: center; padding: 22px; background: radial-gradient(ellipse at 50% 25%, #262218 0, transparent 60%); }
.auth-card { width: min(100%, 410px); padding: 28px; }
.auth-card h1 { font-size: 35px; margin: 5px 0; }
.auth-card form { margin-top: 16px; }
dialog { border: 1px solid #4b4a41; border-radius: 10px; color: var(--text); background: var(--surface); width: min(480px, calc(100% - 24px)); padding: 0; }
dialog::backdrop { background: #000a; }
dialog .panel-body { max-height: 68vh; overflow: auto; }
.history-row { padding: 8px; border: 1px solid var(--line); border-radius: 6px; }
.history-row small { display: block; }
.position-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.form-error { color: #ffab98; }
.form-error:empty { display: none; }
.import-warnings { margin: 0; padding-left: 19px; color: var(--muted); font-size: 12px; }
.comment-list { display: grid; gap: 7px; max-height: 290px; overflow: auto; }
.comment-text { font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-beat { color: #e3a4ef; padding: 2px 6px; min-height: 25px; }
.wide-dialog { width: min(760px, calc(100% - 24px)); }
.transition-plot { position: relative; height: 150px; border: 1px solid var(--line); border-radius: 5px; background: var(--input); overflow: hidden; }
.transition-plot canvas { width: 100%; height: 100%; display: block; }
#transition-cursor { position: absolute; inset-block: 0; width: 1px; background: var(--text); pointer-events: none; }
.transition-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.transition-legend::before { content: ''; width: 8px; height: 8px; border-radius: 100%; background: #ecb575; }
.transition-legend.incoming::before { background: #80cbb6; }
.transition-legend.handoff::before { background: #c69ded; }
#notice { display: none; position: fixed; z-index: 8; bottom: 18px; right: 18px; max-width: min(460px, calc(100vw - 36px)); padding: 10px 15px; border: 1px solid #77653c; border-radius: 7px; background: #2d281c; color: #fbe3a8; box-shadow: 0 10px 30px #0006; white-space: pre-line; }
#notice.visible { display: block; }
#notice.error { border-color: #8a564b; background: #37241f; color: #ffd1c6; }
@media (max-width: 1170px) {
  .workspace { grid-template-columns: 192px minmax(0, 1fr); }
  .editor-layout { grid-template-columns: minmax(0, 1fr) 230px; }
  .chart-scroll { --label: 133px; }
  .lane-label { gap: 5px; }
}
@media (max-width: 965px) {
  .editor-layout, .mix-layout { grid-template-columns: minmax(0, 1fr); }
  .editor-companion { display: contents; }
  .editor-preview { grid-row: 1; }
  .project-header { align-items: flex-start; }
}
@media (max-width: 650px) {
  .app-header { min-height: 62px; height: auto; padding: 9px 11px; flex-wrap: wrap; gap: 9px; }
  .header-actions { flex-wrap: wrap; }
  .header-actions .account-name { display: none; }
  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .sidebar { padding: 9px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-top { padding-bottom: 6px; }
  .sidebar .project-tabs { margin-bottom: 5px; }
  .project-list { grid-auto-flow: column; grid-auto-columns: minmax(135px, max-content); max-height: none; overflow: auto hidden; }
  .main { padding-top: 16px; }
  .project-header { display: grid; }
  .project-actions { justify-content: flex-start; }
  .mix-row { grid-template-columns: 1fr auto; }
  .mix-row > div:first-child { grid-column: 1 / -1; }
}

.release-toolbar { justify-content: space-between; gap: 10px; margin: 0 0 14px; align-items: end; }
.release-toolbar label:first-child { flex: 1 1 220px; }
.release-toolbar label:last-child { flex: 0 1 130px; }
.release-list { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.release-card { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 14px; }
.release-card[hidden] { display: none; }
.release-card h2 { font-size: 18px; }
.release-card h2, .release-meta, .release-notes, .release-person { overflow-wrap: anywhere; }
.release-kicker { display: flex; gap: 7px; flex-wrap: wrap; align-items: baseline; margin-bottom: 4px; color: var(--accent); }
.release-kicker span:first-child { color: var(--muted); }
.release-meta { margin-top: 4px; color: var(--muted); font-size: 12px; }
.release-notes { margin-top: 8px; color: var(--text); white-space: pre-wrap; }
.release-card .release-notes { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12px; }
.release-actions { justify-content: flex-end; flex-shrink: 0; }
.release-empty { padding: 16px; }
.release-header { align-items: flex-start; }
.release-header .project-actions { align-items: flex-end; }
.release-header .project-actions label { min-width: 92px; }
.release-header .release-notes { max-width: 65ch; }
.release-mix-songs { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.release-mix-songs li { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; padding: 9px 11px; background: var(--raised); border-radius: 6px; }
.release-members { display: grid; gap: 7px; }
.release-members label { grid-template-columns: minmax(0, 1fr) minmax(80px, max-content); gap: 8px; align-items: center; }
.release-person { font-weight: 650; color: var(--text); }
.release-form fieldset { display: grid; gap: 8px; margin: 0; min-inline-size: 0; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px 10px; }
.release-form legend { color: var(--muted); padding-inline: 4px; font-size: 12px; }
.release-form textarea { min-height: 74px; }
.release-form .position-row { gap: 6px; }
.release-form .position-row button { align-self: end; }
.release-sharing [hidden] { display: none; }
.note[data-action="seek-chart-note"] { cursor: pointer; touch-action: manipulation; }
@media (min-width: 651px) and (max-width: 1170px) {
  .sidebar .project-tabs { flex-wrap: wrap; }
  .sidebar .project-tabs [data-action="show-published"] { flex-basis: 100%; }
}
@media (max-width: 1040px) {
  .release-card { flex-wrap: wrap; }
  .release-actions { justify-content: flex-start; }
}
@media (max-width: 650px) {
  .release-card { gap: 12px; }
  .release-card .release-actions { width: 100%; }
  .release-card .release-actions button, .release-card .release-actions a { padding-inline: 9px; }
}

dialog.admin-dialog { width: min(930px, calc(100% - 24px)); }
.admin-dialog .panel-body { max-height: 76vh; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; align-items: start; }
.admin-grid h3 { font-size: 15px; }
.admin-secondary { gap: 18px; }
.admin-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.admin-card { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--raised); overflow-wrap: anywhere; }
.admin-card h3 { font-size: 14px; }
.admin-email { margin-top: 3px; }
.admin-disabled { color: #ffab98; }
.admin-metrics { display: flex; flex-wrap: wrap; gap: 5px 16px; margin: 10px 0; }
.admin-metrics dt { color: var(--muted); font-size: 11px; }
.admin-metrics dd { margin: 0; font-variant-numeric: tabular-nums; }
.admin-limit { align-items: end; margin-bottom: 8px; }
.admin-limit input { width: min(190px, 100%); }
.admin-feedback { position: sticky; top: -14px; z-index: 1; margin: 0 0 12px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--accent); }
.admin-feedback.form-error { color: #ffab98; }
.admin-feedback:empty { display: none; }
@media (max-width: 680px) {
  .admin-grid { grid-template-columns: minmax(0, 1fr); }
}