:root {
        color-scheme: dark;
        --bg: #12100f;
        --panel: #171412;
        --panel-2: #201b17;
        --line: #4b4036;
        --text: #f2eadc;
        --muted: #a79a8b;
        --rhythm: #f5b83d;
        --harmony: #00d4aa;
        --drum: #9aa4b2;
        --danger: #ff6b6b;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        min-height: 100vh;
        background: var(--bg);
        color: var(--text);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      .app-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.2rem;
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--line);
        background: transparent;
        position: sticky;
        top: 0;
        z-index: 30;
        backdrop-filter: blur(10px);
      }

      .topbar-left {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        min-width: 0;
      }

      .brand-mark {
        color: var(--rhythm);
        font-weight: 800;
        font-size: 0.95rem;
        letter-spacing: 0.24em;
      }

      .mode-switch {
        display: inline-grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.18rem;
        padding: 0.16rem;
        border: 1px solid var(--line);
        border-radius: 0.9rem;
        background: var(--panel);
        min-width: min(24rem, 100%);
      }

      .mode-switch button {
        border: 0;
        border-radius: 0.75rem;
        background: transparent;
        color: var(--muted);
        padding-block: 0.48rem;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .mode-switch button.active {
        background: rgba(245, 184, 61, 0.14);
        color: var(--rhythm);
      }

      .topbar-actions {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
      }

      .save-button {
        min-width: 6rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        border-color: rgba(245, 184, 61, 0.52);
      }

      .save-button.dirty {
        background: rgba(245, 184, 61, 0.16);
        border-color: var(--rhythm);
        color: var(--rhythm);
        box-shadow: 0 0 0 2px rgba(245, 184, 61, 0.1);
      }

      button,
      input,
      select {
        font: inherit;
      }

      button {
        border: 1px solid var(--line);
        border-radius: 0.9rem;
        padding: 0.65rem 0.95rem;
        background: transparent;
        color: var(--text);
        cursor: pointer;
        transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
      }

      button:hover {
        border-color: rgba(167, 154, 139, 0.72);
        background: rgba(255, 255, 255, 0.02);
      }

      button:focus-visible {
        border-color: rgba(245, 184, 61, 0.7);
        box-shadow: 0 0 0 2px rgba(245, 184, 61, 0.18);
        outline: 0;
      }

      button.active {
        border-color: var(--rhythm);
        background: rgba(245, 184, 61, 0.12);
        color: #fff;
      }

      button:disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }

      input,
      select {
        border: 1px solid var(--line);
        border-radius: 0.7rem;
        background: transparent;
        color: var(--text);
        padding: 0.45rem 0.6rem;
      }

      input[type="range"] {
        accent-color: var(--rhythm);
        width: 8rem;
      }

      .app {
        width: calc(100vw - 2rem);
        margin: 0 auto;
        padding: 0.5rem 0 3rem;
      }

      .workspace {
        display: grid;
        grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
      }

      .sidebar {
        display: grid;
        gap: 1rem;
        position: sticky;
        top: 4.75rem;
        max-height: calc(100vh - 5.5rem);
        overflow: auto;
        padding-right: 0.15rem;
      }

      .sequencers {
        display: grid;
        gap: 1rem;
        min-width: 0;
      }

      header.hero,
      .hero-note-card,
      .panel {
        border: 1px solid var(--line);
        border-radius: 1.15rem;
        background: var(--panel);
        box-shadow: none;
      }

      header.hero {
        display: grid;
        gap: 1.25rem;
        grid-template-columns: 9rem minmax(0, 1fr);
        align-items: center;
        padding: 1.5rem;
        margin-bottom: 1rem;
      }

      .hero-media {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .hero-disc {
        width: 8.8rem;
        height: 8.8rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 1.2rem;
        background: rgba(255, 255, 255, 0.03);
        display: grid;
        place-items: center;
      }

      .hero-disc-ring {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 999px;
        border: 4px solid rgba(245, 184, 61, 0.2);
        border-top-color: var(--rhythm);
        display: block;
      }

      .hero-copy {
        min-width: 0;
        display: grid;
        gap: 0.85rem;
      }

      .hero-title-input {
        font-family: inherit;
        width: 100%;
        font-size: 48px;
        height: 48px;
        padding: 0;
        line-height: .87;
        border: none;
        outline: none;
        background: transparent;
        resize: none;
      }

      .hero-title-input:invalid {
        outline: 2px solid red;
      }

      .hero-note-input {
        font-family: inherit;
        width: 100%;
        resize: none;
        min-height: 0;
        height: auto;
        box-sizing: border-box;
        padding: 0;
        border: none;
        outline: none;
        background: transparent;
        line-height: inherit;
      }

      .hero-note-input::placeholder {
        color: var(--muted);
        font-style: italic;
      }

      .hero-note-card {
        margin-bottom: 1rem;
        padding: 1rem 1.25rem;
      }

      .hero-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .hero-tag {
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 0.6rem;
        padding: 0.28rem 0.68rem;
        color: var(--muted);
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      h1,
      h2,
      p {
        margin-top: 0;
      }

      h1 {
        margin-bottom: 0.35rem;
        letter-spacing: -0.04em;
      }

      p {
        color: var(--muted);
        line-height: 1.5;
      }

      .status-pill {
        border: 1px solid var(--line);
        border-radius: 0.8rem;
        padding: 0.45rem 0.75rem;
        color: var(--muted);
        white-space: nowrap;
        flex-shrink: 1;
        min-width: 0;
        max-width: min(32rem, 100%);
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .write-panel {
        display: none;
      }

      body.mode-write .write-panel {
        display: block;
      }

      body.mode-write .sequencers > .panel:not(.write-panel) {
        display: none;
      }

      .write-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .transport-inline {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
      }

      .transport-icon-button {
        width: 2.2rem;
        height: 2.2rem;
        padding: 0;
        border-radius: 0.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .transport-icon-button svg {
        width: 0.95rem;
        height: 0.95rem;
      }

      .transport-step-button svg {
        width: 0.9rem;
        height: 0.9rem;
      }

      .bpm-inline {
        gap: 0.35rem;
      }

      .bpm-inline label {
        font-size: 0.78rem;
      }

      .write-dub {
        width: 100%;
        min-height: 22rem;
        resize: vertical;
        border-radius: 1rem;
        background: #0f1115;
        color: var(--text);
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
        line-height: 1.45;
      }

      .controls,
      .scene-tabs,
      .volumes {
        display: flex;
        gap: 0.65rem;
        flex-wrap: wrap;
        align-items: center;
      }

      .panel {
        margin-top: 1rem;
        padding: 1rem 1rem 1.1rem;
      }

      .project-meta {
        color: var(--muted);
        font-size: 0.88rem;
        margin-bottom: 0.75rem;
      }

      .project-actions {
        display: flex;
        gap: 0.25rem;
        justify-content: center;
      }

      .project-actions button {
        padding: 0.35rem 0.5rem;
        font-size: 1rem;
        line-height: 1;
      }

      .sidebar select#project-select {
        width: 100%;
        margin-bottom: 0.5rem;
      }

      .workspace .panel {
        margin-top: 0;
      }

      .controls {
        display: grid;
        justify-content: stretch;
      }

      .control-group {
        display: flex;
        gap: 0.55rem;
        align-items: center;
        flex-wrap: wrap;
      }

      .control-group label,
      .track-label {
        color: var(--muted);
        font-size: 0.88rem;
      }

      #bpm {
        width: 4.5rem;
        text-align: center;
      }

      .scene-tabs button.pending {
        border-color: var(--harmony);
        box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.16);
      }

      .scene-loop-control {
        align-items: center;
        color: var(--muted);
        display: flex;
        font-size: 0.88rem;
        gap: 0.45rem;
        margin-bottom: 0.65rem;
      }

      .scene-loop-control input {
        width: auto;
      }

      .scene-tab-row {
        display: grid;
        gap: 0.25rem;
        grid-template-columns: minmax(0, 1fr) auto auto;
      }

      .scene-tab-row.dragging {
        opacity: 0.6;
      }

      .scene-tab-row.drag-over > button:first-child {
        border-color: var(--rhythm);
        box-shadow: inset 0 0 0 2px rgba(245, 184, 61, 0.32);
      }

      .scene-tab-row .scene-move {
        min-width: 0;
        padding: 0.34rem 0.48rem;
        border-radius: 0.55rem;
        width: auto;
      }

      .scene-tab-row > button:first-child {
        border-radius: 0.7rem;
        padding: 0.45rem 0.62rem;
        text-align: left;
      }

      .scene-list-action {
        border-radius: 0.7rem;
        padding: 0.45rem 0.62rem;
      }

      .grid-head {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: flex-start;
        margin-bottom: 0.9rem;
      }

      .grid-head h2,
      .sidebar h2 {
        margin-bottom: 0.35rem;
        color: var(--muted);
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 0.9rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .sidebar h2 {
        margin-bottom: 0.65rem;
      }

      .sidebar .control-group,
      .sidebar .volumes,
      .sidebar .scene-tabs {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      .sidebar .scene-tabs {
        gap: 0.35rem;
      }

      .sidebar .control-group.transport {
        grid-template-columns: 1fr 1fr;
      }

      .sidebar .control-group.bpm-control {
        grid-template-columns: auto 1fr 1fr 1fr;
        align-items: center;
      }

      .sidebar .volumes label {
        display: grid;
        gap: 0.25rem;
      }

      .sidebar input[type="range"],
      .sidebar input[type="text"],
      .sidebar button {
        width: 100%;
      }

      .step-grid {
        display: grid;
        grid-template-columns: repeat(16, minmax(3.2rem, 1fr));
        gap: 0.28rem;
      }

      .chord-grid-stack {
        display: grid;
        gap: 0.75rem;
      }

      .chord-grid-part-shell {
        display: grid;
        gap: 0.6rem;
      }

      .chord-cell {
        position: relative;
        min-height: 3.65rem;
        border: 1px solid var(--line);
        border-radius: 0.55rem;
        background: #12151a;
        overflow: hidden;
      }

      .chord-cell {
        padding: 0.34rem;
        cursor: grab;
      }

      .chord-cell.beat {
        border-left-width: 3px;
      }

      .chord-cell.playing {
        outline: 2px solid #fff;
        outline-offset: 2px;
      }

      .chord-cell.dragging {
        opacity: 0.55;
      }

      .chord-cell.drag-over {
        border-color: var(--rhythm);
        box-shadow: inset 0 0 0 2px rgba(245, 184, 61, 0.32);
      }

      .chord-input {
        cursor: text;
      }

      .step-number {
        display: block;
        color: var(--muted);
        font-size: 0.56rem;
        margin-bottom: 0.22rem;
      }

      .layer-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        min-height: 1rem;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.1;
      }

      .layer-row.rhythm {
        color: var(--rhythm);
      }

      .layer-row.harmony {
        color: var(--harmony);
      }

      .chord-display {
        display: block;
        min-height: 1.2em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .chord-display.empty {
        visibility: hidden;
      }

      .chord-display.invalid {
        color: var(--danger);
      }

      .chord-input {
        width: 100%;
        min-width: 0;
        height: 1.2em;
        border: 0;
        border-radius: 0;
        padding: 0;
        background: transparent;
        color: currentColor;
        font: inherit;
        line-height: inherit;
        outline: 0;
        box-shadow: inset 0 -1px 0 currentColor;
        display: none;
      }

      .chord-input.invalid {
        color: var(--danger);
      }

      body.mode-edit .chord-display {
        display: none;
      }

      body.mode-edit .chord-input {
        display: block;
      }

      .drum-grid {
        display: grid;
        gap: 0.55rem;
      }

      .preset-panel {
        display: none;
        gap: 0.75rem;
        margin: 0 0 1rem;
        border: 1px solid var(--line);
        border-radius: 1rem;
        background: #12151a;
        padding: 0.85rem;
      }

      .preset-panel.open {
        display: grid;
      }

      .preset-tabs,
      .preset-buttons,
      .dna-tags {
        display: flex;
        gap: 0.45rem;
        flex-wrap: wrap;
      }

      .preset-tabs button,
      .preset-buttons button {
        padding: 0.45rem 0.65rem;
      }

      .preset-description {
        margin: 0;
      }

      .dna-tag {
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 0.25rem 0.5rem;
        color: var(--muted);
        font-size: 0.78rem;
      }

      .user-preset-tools {
        display: grid;
        gap: 0.7rem;
        border-top: 1px solid var(--line);
        padding-top: 0.8rem;
      }

      .user-preset-tools h3 {
        margin: 0;
        font-size: 1rem;
      }

      .user-preset-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
      }

      .user-preset-actions input {
        min-width: 14rem;
        flex: 1;
      }

      .user-preset-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
      }

      .user-preset-export {
        width: 100%;
        min-height: 9rem;
        resize: vertical;
        font-family: "SFMono-Regular", Consolas, monospace;
        font-size: 0.78rem;
      }

      .drum-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.28rem;
        align-items: center;
      }

      .beat-label-row {
        display: grid;
        grid-template-columns: 4.5rem minmax(18rem, 1fr) minmax(13.5rem, max-content);
        gap: 0.5rem;
        align-items: center;
        padding: 0 0.5rem;
      }

      .drum-row .step-grid,
      .beat-label-row .step-grid {
        grid-template-columns: repeat(32, minmax(0.8rem, 1fr));
        gap: 0;
      }

      .beat-label-row .step-grid {
        grid-column: 2;
      }

      .beat-label-spacer {
        min-height: 1rem;
      }

      .beat-label-actions-spacer {
        grid-column: 3;
        min-width: 13.5rem;
      }

      .beat-label {
        color: var(--muted);
        display: flex;
        font-size: 0.7rem;
        font-weight: 600;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      .beat-label.downbeat {
        color: var(--text);
        font-weight: 800;
      }

      .track-head {
        display: grid;
        grid-template-columns: 4.5rem minmax(18rem, 1fr) minmax(13.5rem, max-content);
        gap: 0.5rem;
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 0.75rem;
        background: #12151a;
        padding: 0.4rem 0.5rem;
      }

      .track-head strong {
        color: var(--drum);
        font-size: 0.9rem;
        white-space: nowrap;
      }

      .track-surface {
        grid-column: 2;
        position: relative;
        transition: opacity 120ms ease, filter 120ms ease;
      }

      .drum-pattern-input {
        width: 100%;
        font-family: "SFMono-Regular", Consolas, monospace;
        font-size: 0.78rem;
        letter-spacing: 0.04em;
      }

      .drum-pattern-input.invalid {
        color: rgba(255, 255, 255, 0.01);
      }

      .track-surface .drum-pattern-overlay-wrap,
      .drum-roll {
        width: 100%;
      }

      .bassline-roll,
      .drum-roll {
        background:
          repeating-linear-gradient(90deg, rgba(154, 164, 178, 0.12) 0 1px, transparent 1px calc(100% / 32)),
          linear-gradient(180deg, rgba(154, 164, 178, 0.08), rgba(154, 164, 178, 0.02));
        border-radius: 0.45rem;
        height: 1.5rem;
        overflow: hidden;
        position: relative;
      }

      .drum-roll {
        display: block;
      }

      .track-actions {
        grid-column: 3;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.35rem;
        min-width: 10.5rem;
      }

      .icon-button {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        min-width: 2rem;
        padding: 0.42rem 0.58rem;
        line-height: 0;
      }

      .icon-button svg {
        width: 0.92rem;
        height: 0.92rem;
      }

      .compact-button {
        min-width: 0;
        padding: 0.34rem 0.42rem;
        border-radius: 0.55rem;
      }

      .icon-button.danger {
        color: var(--danger);
      }

      .icon-button.record-button.active {
        border-color: rgba(255, 107, 107, 0.8);
        background: rgba(255, 107, 107, 0.14);
        color: #ff8f8f;
      }

      .icon-button.record-button:hover {
        border-color: rgba(255, 107, 107, 0.55);
      }

      .icon-button.record-button:focus-visible {
        border-color: rgba(255, 107, 107, 0.8);
        box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.18);
      }

      .drum-roll-pulse {
        position: absolute;
        bottom: 20%;
        min-width: 0.22rem;
        border-radius: 999px;
        background: var(--drum);
      }

      .drum-roll-pulse[data-track="kick"] {
        background: #b87836;
      }

      .drum-roll-pulse[data-track="snare"] {
        background: #2d8b8b;
      }

      .drum-roll-pulse[data-track="hihat"] {
        background: #4f77a8;
      }

      .drum-roll-pulse[data-track="openhat"] {
        background: #6aa370;
      }

      .bassline-roll-playhead,
      .drum-roll-playhead {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--rhythm);
        box-shadow: 0 0 0 1px rgba(245, 184, 61, 0.7), 0 0 0 3px rgba(245, 184, 61, 0.16);
        opacity: 0.92;
      }

      .drum-inline-editor {
        display: grid;
        gap: 0.55rem;
        margin-top: 0.45rem;
      }

      .drum-inline-row {
        align-items: center;
        display: grid;
        gap: 0.45rem;
        grid-template-columns: 1rem minmax(0, 1fr);
      }

      body.mode-listen .drum-inline-editor,
      body.mode-write .drum-inline-editor {
        display: none;
      }

      .drum-pattern-help {
        color: var(--muted);
        font-size: 0.72rem;
        line-height: 1.35;
      }

      .drum-volume-label {
        display: grid;
        grid-template-columns: auto 5rem;
        gap: 0.35rem;
        align-items: center;
        white-space: nowrap;
      }

      .drum-volume-label input[type="range"] {
        width: 5rem;
      }

      .track-mute-label {
        align-items: center;
        color: var(--muted);
        display: flex;
        font-size: 0.78rem;
        gap: 0.3rem;
        white-space: nowrap;
      }

      .track-mute-label input {
        width: auto;
      }

      .drum-row.muted .track-surface,
      .drum-row.muted strong,
      .drum-row.muted .track-mute-label,
      .layer-row.muted,
      [data-chord-layer].muted {
        opacity: 0.42;
      }

      .drum-row.muted .track-surface,
      [data-chord-layer].muted {
        filter: saturate(0.6);
      }

      .chord-lane-mutes {
        display: flex;
        gap: 0.55rem;
        flex-wrap: wrap;
        justify-content: flex-end;
      }

      .bass-panel {
        display: grid;
        gap: 0.75rem;
      }

      .bass-panel label {
        display: grid;
        gap: 0.3rem;
        color: var(--muted);
        font-size: 0.88rem;
      }

      .bass-panel select,
      .bass-panel input {
        width: 100%;
      }

      .bass-keyboard-map {
        display: grid;
        gap: 0.18rem;
      }

      .bass-key-row {
        display: grid;
        grid-template-columns: repeat(17, minmax(0.9rem, 1fr));
        gap: 0.12rem;
      }

      .bass-key {
        border: 1px solid var(--line);
        border-radius: 0.4rem;
        font-family: "SFMono-Regular", Consolas, monospace;
        font-size: 0.72rem;
        padding: 0.18rem 0.32rem;
        text-align: center;
      }

      .bass-key.black {
        background: #0f1115;
        color: var(--muted);
      }

      .bass-key.white {
        background: #f0ead6;
        color: #16191f;
      }

      .bass-key.pressed {
        border-color: var(--rhythm);
        box-shadow: 0 0 0 2px rgba(245, 184, 61, 0.35);
        transform: translateY(1px);
      }

      .bass-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
      }

      .bassline-roll-note {
        background: var(--harmony);
        border-radius: 999px;
        box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35);
        height: 0.25rem;
        min-width: 0.35rem;
        position: absolute;
      }

      .bassline-help {
        border: 1px solid var(--line);
        border-radius: 0.75rem;
        color: var(--muted);
        font-size: 0.72rem;
        line-height: 1.35;
        padding: 0.45rem 0.6rem;
      }

      .bass-inline-editor {
        display: grid;
        gap: 0.55rem;
      }

      .chord-inline-part-editor {
        display: grid;
        gap: 0.55rem;
      }

      .bass-inline-row,
      .chord-inline-row {
        align-items: center;
        display: grid;
        gap: 0.45rem;
        grid-template-columns: 1rem minmax(0, 1fr);
      }

      .inline-label-icon {
        color: var(--muted);
        display: inline-flex;
        width: 0.95rem;
        height: 0.95rem;
        align-items: center;
        justify-content: center;
      }

      .inline-label-icon svg {
        width: 100%;
        height: 100%;
      }

      .sr-only {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
      }

      .bass-inline-head {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem;
        flex-wrap: wrap;
      }

      .bass-inline-part {
        border-top: 0;
        padding-top: 0;
      }

      .bass-inline-row > span:first-child,
      .bass-inline-row > .bass-text-overlay-wrap {
        min-width: 0;
      }

      .compact-track-toggle {
        font-size: 0.72rem;
        gap: 0.22rem;
      }

      body.mode-listen .bass-inline-head,
      body.mode-listen .bass-inline-part,
      body.mode-listen .bassline-help,
      body.mode-write .bass-inline-head,
      body.mode-write .bass-inline-part,
      body.mode-write .bassline-help {
        display: none;
      }

      body.mode-listen .chord-inline-part-editor,
      body.mode-write .chord-inline-part-editor {
        display: none;
      }

      .bass-editor {
        display: grid;
        gap: 0.35rem;
      }

      .bass-editor-head {
        align-items: baseline;
        display: flex;
        gap: 0.6rem;
      }

      .bass-editor-head strong {
        color: var(--harmony);
        font-size: 0.9rem;
      }

      .bass-editor-fields {
        display: grid;
        gap: 0.75rem;
      }

      .bass-editor-part {
        border-top: 1px solid var(--line);
        display: grid;
        gap: 0.65rem;
        padding-top: 0.75rem;
      }

      .bass-editor-part:first-child {
        border-top: 0;
        padding-top: 0;
      }

      .bass-editor-part-head {
        align-items: baseline;
        display: flex;
        gap: 0.7rem;
      }

      .bass-editor-part-head strong {
        color: var(--harmony);
      }

      .bass-editor-stats {
        color: var(--muted);
        font-family: "SFMono-Regular", Consolas, monospace;
        font-size: 0.76rem;
      }

      .bass-editor-fields label {
        display: grid;
        gap: 0.3rem;
      }

      .bass-editor-fields input {
        width: 100%;
        font-family: "SFMono-Regular", Consolas, monospace;
        letter-spacing: 0.04em;
      }

      .bass-text-overlay-wrap {
        box-shadow: inset 0 -1px 0 rgba(154, 164, 178, 0.18);
        display: grid;
        font-family: "SFMono-Regular", Consolas, monospace;
        font-size: 0.78rem;
        letter-spacing: 0.04em;
        line-height: 1.4em;
        min-height: 1.4em;
        position: relative;
      }

      .bass-text-overlay-wrap:focus-within {
        box-shadow: inset 0 -1px 0 rgba(74, 222, 128, 0.45);
      }

      .bass-text-overlay-wrap.invalid {
        box-shadow: inset 0 -1px 0 rgba(255, 107, 107, 0.8);
      }

      .bass-text-overlay-wrap input {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        caret-color: var(--text);
        color: rgba(255, 255, 255, 0.01);
        display: block;
        font: inherit;
        height: 1.4em;
        letter-spacing: inherit;
        line-height: 1.4em;
        outline: 0;
        padding: 0;
        position: relative;
        width: 100%;
        z-index: 2;
      }

      .bass-text-overlay-wrap input.invalid {
        color: rgba(255, 255, 255, 0.01);
      }

      .bass-pattern-input.invalid,
      .bass-notes-input.invalid,
      .chord-pool-input.invalid,
      .chord-pattern-input.invalid {
        border-color: var(--danger);
        box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.16);
      }

      .bass-text-preview {
        box-sizing: border-box;
        color: var(--muted);
        font: inherit;
        height: 1.4em;
        inset: 0;
        letter-spacing: inherit;
        line-height: 1.4em;
        overflow: hidden;
        padding: 0;
        pointer-events: none;
        position: absolute;
        white-space: pre;
        z-index: 1;
      }

      .bass-text-preview span {
        border-radius: 0.25rem;
      }

      .bass-text-preview span.on {
        color: var(--harmony);
        font-weight: 800;
      }

      .bass-text-preview span.accent {
        color: var(--rhythm);
        font-weight: 900;
      }

      .bass-text-preview span.sustain {
        color: rgba(74, 222, 128, 0.7);
      }

      .bass-text-preview span.rest {
        color: rgba(154, 164, 178, 0.38);
      }

      .bass-text-preview span.extra,
      .bass-text-preview span.invalid {
        color: var(--danger);
      }

      .catalog-dialog.bass-editor-dialog[open],
      .catalog-dialog.chord-editor-dialog[open] {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
      }

      .catalog-dialog.bass-editor-dialog,
      .catalog-dialog.chord-editor-dialog {
        width: 80vw;
        height: 80vh;
      }

      .bass-editor-dialog .bass-editor,
      .chord-editor-dialog .bass-editor {
        min-height: 0;
        overflow: auto;
      }

      .bass-text-preview span.playing {
        background: var(--rhythm);
        box-shadow: 0 0 0 1px rgba(245, 184, 61, 0.75), 0 0 0 3px rgba(245, 184, 61, 0.2);
        color: #0b0d10;
        font-weight: 900;
      }

      .hint {
        margin: 0.8rem 0 0;
        color: var(--muted);
        font-size: 0.9rem;
      }

      .catalog-dialog {
        width: min(760px, calc(100vw - 2rem));
        height: min(680px, calc(100vh - 2rem));
        border: 1px solid var(--line);
        border-radius: 1rem;
        background: var(--panel);
        color: var(--text);
        padding: 1rem;
        overflow: hidden;
      }

      .catalog-dialog[open] {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto auto;
      }

      .sound-dialog[open] {
        grid-template-rows: auto minmax(0, 1fr) auto;
      }

      .dialog-columns {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(15rem, 0.9fr);
        gap: 1rem;
        min-height: 0;
        margin: 1rem 0;
      }

      .dialog-column {
        min-width: 0;
        min-height: 0;
        display: grid;
        align-content: start;
        gap: 0.85rem;
      }

      .dialog-column h3 {
        margin: 0;
        color: var(--muted);
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .dialog-tool-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
        align-content: start;
      }

      .dialog-tool-grid button {
        width: 100%;
      }

      .catalog-dialog::backdrop {
        background: rgba(0, 0, 0, 0.68);
      }

      .catalog-head,
      .catalog-actions {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        align-items: center;
      }

      .catalog-rows {
        align-content: start;
        display: grid;
        grid-auto-rows: max-content;
        margin: 1rem 0;
        overflow-y: auto;
        padding-right: 0.25rem;
      }

      .sound-rows {
        align-content: start;
        display: grid;
        gap: 0.85rem;
        overflow-y: auto;
        min-height: 0;
      }

      .sound-rows label {
        display: grid;
        gap: 0.35rem;
        color: var(--muted);
        font-size: 0.88rem;
      }

      .sound-rows select {
        width: 100%;
      }

      .mixer-sound-rows {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1rem;
      }

      .mixer-sound-rows .sound-fieldset {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1rem;
      }

      .mixer-sound-rows .sound-fieldset legend {
        grid-column: 1 / -1;
      }

      .sound-fieldset {
        display: grid;
        gap: 0.85rem;
        margin: 0;
        padding: 0;
        border: 0;
      }

      .sound-fieldset legend {
        margin-bottom: 0.35rem;
        color: var(--text);
        font-weight: 700;
      }

      .catalog-row,
      .catalog-table-head {
        display: grid;
        grid-template-columns: minmax(5rem, 0.7fr) minmax(10rem, 2fr) 5.75rem;
        gap: 0.4rem;
        align-items: center;
        border-bottom: 1px solid var(--line);
        padding: 0.35rem 0;
      }

      .catalog-table-head {
        height: 2rem;
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--panel);
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      .catalog-row {
        height: 2.6rem;
      }

      .catalog-row input {
        width: 100%;
        border-color: transparent;
        background: #12151a;
        padding-block: 0.35rem;
      }

      .catalog-row button {
        padding: 0.45rem 0.55rem;
      }

      .catalog-row input.invalid {
        border-color: var(--danger);
        color: var(--danger);
        box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.16);
      }

      @media (max-width: 820px) {
        .app {
          width: min(100vw - 1rem, 100%);
          padding-top: 0.5rem;
        }

        .app-topbar,
        header.hero {
          display: grid;
        }

        .topbar-left,
        .topbar-actions {
          justify-content: flex-start;
        }

        .workspace {
          grid-template-columns: 1fr;
        }

        .sidebar {
          position: static;
          max-height: none;
          overflow: visible;
          padding-right: 0;
        }

        .step-grid {
          grid-template-columns: repeat(8, minmax(2.6rem, 1fr));
        }

        .drum-row .step-grid,
        .beat-label-row .step-grid {
          grid-template-columns: repeat(32, minmax(0.7rem, 1fr));
          gap: 0;
        }

        .catalog-row,
        .catalog-table-head {
          grid-template-columns: 1fr;
        }

        .dialog-columns,
        .dialog-tool-grid,
        .mixer-sound-rows,
        .mixer-sound-rows .sound-fieldset {
          grid-template-columns: 1fr;
        }

        .drum-row {
          grid-template-columns: 1fr;
        }

        .beat-label-row {
          grid-template-columns: 1fr;
          padding: 0;
        }

        .track-head {
          grid-template-columns: 1fr;
        }

        .beat-label-spacer {
          display: none;
        }

        .beat-label-actions-spacer,
        .track-actions {
          display: none;
        }

        header.hero,
        .grid-head {
          display: block;
        }

        .status-pill {
          display: inline-flex;
          margin-top: 0;
        }
      }