:root {
      color-scheme: dark;
      --bg: #07090d;
      --panel: rgba(16, 20, 28, 0.92);
      --panel-strong: rgba(21, 27, 38, 0.98);
      --line: rgba(180, 198, 216, 0.22);
      --line-strong: rgba(129, 224, 255, 0.58);
      --text: #f2f7fb;
      --muted: #a6b7c5;
      --accent: #60d9ff;
      --accent-2: #ffbf69;
      --danger: #ff6f7a;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      height: 100vh;
      overflow: hidden;
      background:
        radial-gradient(circle at 20% 0%, rgba(96, 217, 255, 0.16), transparent 30rem),
        radial-gradient(circle at 84% 18%, rgba(255, 191, 105, 0.12), transparent 28rem),
        linear-gradient(180deg, #07090d, #10141c 70%, #090b10);
    }

    button,
    select,
    input {
      font: inherit;
    }

    button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(255, 255, 255, 0.06);
      color: var(--text);
      min-height: 38px;
      padding: 0 12px;
      cursor: pointer;
    }

    button:hover,
    button:focus-visible,
    select:focus-visible,
    input:focus-visible {
      border-color: var(--line-strong);
      outline: none;
    }

    button.primary {
      background: linear-gradient(180deg, rgba(96, 217, 255, 0.26), rgba(96, 217, 255, 0.12));
      border-color: rgba(96, 217, 255, 0.62);
    }

    button.warn {
      border-color: rgba(255, 111, 122, 0.5);
      color: #ffd9dd;
    }

    select,
    input[type="range"],
    input[type="number"] {
      width: 100%;
    }

    select,
    input[type="number"] {
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(6, 9, 14, 0.78);
      color: var(--text);
      padding: 0 10px;
    }

    .app {
      width: min(1880px, calc(100% - 32px));
      height: 100vh;
      height: 100svh;
      margin: 0 auto;
      padding: clamp(8px, 1.2vh, 16px) 0 clamp(8px, 1.2vh, 14px);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 10px;
      overflow: hidden;
    }

    .intro-card {
      display: grid;
      width: min(760px, calc(100% - 180px));
      min-height: 0;
      gap: 6px;
      align-items: start;
      padding: 10px 14px;
      border: 1px solid rgba(180, 198, 216, 0.3);
      border-radius: 8px;
      background: rgba(10, 13, 18, 0.72);
      box-shadow: 0 16px 52px rgba(0, 0, 0, 0.26);
      backdrop-filter: blur(8px);
      margin-bottom: 0;
    }

    .back-link {
      color: var(--accent);
      text-decoration: none;
      font-weight: 800;
      font-size: 0.9rem;
    }

    h1 {
      margin: 3px 0 0;
      font-size: clamp(2rem, 4.2vw, 3.15rem);
      line-height: 0.98;
      letter-spacing: 0;
    }

    .subtitle {
      margin: 4px 0 0;
      max-width: 780px;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.25;
    }

    .beat-workstation {
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 10px;
      padding: 10px;
      border: 1px solid rgba(180, 198, 216, 0.32);
      border-radius: 10px;
      background:
        linear-gradient(180deg, rgba(18, 23, 32, 0.86), rgba(8, 11, 16, 0.94)),
        var(--panel);
      box-shadow: 0 22px 80px rgba(0, 0, 0, 0.34);
      backdrop-filter: blur(6px);
      overflow: hidden;
    }

    .workstation-menu-card {
      display: grid;
      grid-template-columns: repeat(6, minmax(max-content, 1fr)) minmax(96px, 1.2fr);
      gap: 6px;
      justify-content: stretch;
      align-items: center;
      width: 100%;
    }

    .workstation-menu-card button {
      min-height: 32px;
      padding: 0 10px;
      border-color: rgba(180, 198, 216, 0.32);
      background: linear-gradient(180deg, rgba(42, 50, 64, 0.92), rgba(20, 25, 34, 0.98));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1px 0 rgba(0, 0, 0, 0.38);
      color: #edf5fb;
      font-size: 0.86rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .workstation-menu-card button:hover,
    .workstation-menu-card button:focus-visible {
      border-color: rgba(96, 217, 255, 0.68);
      background: linear-gradient(180deg, rgba(50, 61, 78, 0.98), rgba(24, 31, 43, 1));
    }

    .workstation-menu-card button.primary {
      border-color: rgba(96, 217, 255, 0.78);
      background: linear-gradient(180deg, rgba(36, 123, 150, 0.78), rgba(14, 67, 86, 0.96));
      color: #f3fbff;
    }

    .workstation-menu-card button.play-focus-toggle[aria-pressed="true"] {
      border-color: rgba(125, 223, 100, 0.85);
      background: linear-gradient(180deg, rgba(54, 120, 48, 0.9), rgba(25, 69, 32, 0.98));
      color: #f3fff0;
    }

    .beat-workstation:focus {
      outline: none;
    }

    .harmony-buttons {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }

    .harmony-buttons button[aria-pressed="true"] {
      border-color: rgba(125, 223, 100, 0.85);
      background: rgba(54, 120, 48, 0.55);
    }

    .workstation-menu-card button.warn {
      border-color: rgba(255, 111, 122, 0.68);
      background: linear-gradient(180deg, rgba(106, 45, 54, 0.76), rgba(54, 26, 32, 0.96));
      color: #ffe5e8;
    }

    .workstation-menu-card button:disabled {
      opacity: 0.48;
      cursor: not-allowed;
    }

    .tempo-control {
      min-width: 0;
      min-height: 32px;
      display: grid;
      grid-template-columns: max-content minmax(84px, 1fr) 3ch;
      align-items: center;
      gap: 8px;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(6, 9, 14, 0.78);
    }

    .tempo-title,
    .tempo-value {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }

    .tempo-value {
      color: var(--text);
      font-variant-numeric: tabular-nums;
      text-align: right;
    }

    .bpm {
      width: 100%;
      min-width: 0;
      height: 24px;
      accent-color: var(--accent);
      cursor: pointer;
    }

    .bpm:focus-visible {
      outline: none;
    }

    .tempo-control:focus-within {
      border-color: var(--line-strong);
    }

    .bpm::-webkit-slider-runnable-track {
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(96, 217, 255, 0.82), rgba(255, 191, 105, 0.58));
    }

    .bpm::-webkit-slider-thumb {
      width: 16px;
      height: 16px;
      margin-top: -6px;
      border: 2px solid #f2f7fb;
      border-radius: 50%;
      background: var(--accent);
      appearance: none;
    }

    .bpm::-moz-range-track {
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(96, 217, 255, 0.82), rgba(255, 191, 105, 0.58));
    }

    .bpm::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border: 2px solid #f2f7fb;
      border-radius: 50%;
      background: var(--accent);
    }

    .workstation-grid {
      display: grid;
      grid-template-columns: minmax(620px, 1.45fr) minmax(560px, 0.9fr);
      gap: 12px;
      align-items: stretch;
      min-height: 0;
      overflow: hidden;
    }

    .workstation-column {
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 12px;
    }

    .visualizer-card,
    .tracks-sequencer-card,
    .workstation-panel {
      border: 1px solid rgba(180, 198, 216, 0.18);
      border-radius: 8px;
      background: rgba(8, 11, 16, 0.86);
      box-shadow: none;
      overflow: hidden;
    }

    .visualizer-card {
      min-height: 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
    }

    .visual-wrap {
      position: relative;
      min-height: 0;
      background: #05070b;
    }

    .visual-wrap.is-user-sized canvas {
      height: 100%;
    }

    .resize-handle {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 12px;
      cursor: ns-resize;
      touch-action: none;
      background: linear-gradient(180deg, transparent, rgba(96, 217, 255, 0.12));
      border-bottom: 1px solid rgba(96, 217, 255, 0.22);
    }

    .resize-handle::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 3px;
      width: 58px;
      height: 3px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: rgba(166, 183, 197, 0.38);
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 0;
    }

    .visual-hud {
      display: none;
    }

    .visual-menu-shell {
      position: absolute;
      right: 12px;
      top: 12px;
      z-index: 8;
      display: grid;
      justify-items: end;
      gap: 8px;
      pointer-events: none;
    }

    .visual-menu-button {
      min-height: 32px;
      border-color: rgba(96, 217, 255, 0.64);
      background: rgba(5, 7, 11, 0.78);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
      font-size: 0.82rem;
      font-weight: 900;
      pointer-events: auto;
    }

    .visual-toolbar {
      width: min(260px, calc(100vw - 28px));
      display: grid;
      gap: 9px;
      padding: 6px;
      border: 1px solid rgba(166, 183, 197, 0.18);
      border-radius: 7px;
      background: rgba(5, 7, 11, 0.9);
      box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42);
      backdrop-filter: blur(10px);
      pointer-events: auto;
    }

    .visual-toolbar[hidden] {
      display: none;
    }

    .visual-toolbar-head,
    .visual-toolbar-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .visual-toolbar-head {
      color: var(--muted);
      font-size: 0.74rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .visual-toolbar button,
    .visual-toolbar select {
      min-height: 30px;
      font-size: 0.82rem;
    }

    .visual-toolbar select {
      width: 100%;
      min-width: 0;
    }

    .visual-toolbar-actions button {
      flex: 1 1 0;
      padding-inline: 8px;
    }

    .visual-expanded {
      overflow: hidden;
    }

    .visual-expanded .visualizer-card {
      position: fixed;
      inset: 12px;
      z-index: 120;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      border-color: rgba(96, 217, 255, 0.5);
      background: rgba(5, 7, 11, 0.98);
    }

    .visual-expanded .visual-wrap {
      height: auto !important;
      min-height: 0;
    }

    .visual-expanded canvas {
      height: 100%;
    }

    .visual-expanded .resize-handle {
      display: none;
    }

    .visual-expanded .visual-menu-shell {
      position: fixed;
      right: 24px;
      top: 24px;
      z-index: 160;
    }

    .statline {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      padding: 8px 10px;
      border-top: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.035);
      color: var(--muted);
      font-size: 0.8rem;
    }

    .pill {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 3px 8px;
      background: rgba(255, 255, 255, 0.045);
      white-space: nowrap;
    }

    .tracks-sequencer-card {
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto auto;
      padding: 10px;
      min-width: 0;
      --grid-scale: 1;
      --grid-label-width: max(160px, calc(190px * var(--grid-scale)));
      --grid-step-size: calc(34px * var(--grid-scale));
      --grid-gap: calc(5px * var(--grid-scale));
      --grid-row-gap: calc(8px * var(--grid-scale));
      overflow: hidden;
    }

    .section-title {
      display: none;
    }

    .section-title h2 {
      margin: 0;
      font-size: 1.05rem;
      letter-spacing: 0;
    }

    .grid-pane {
      position: relative;
      width: 100%;
      min-height: 0;
      overflow: hidden;
      padding-right: 14px;
    }

    .grid {
      display: grid;
      gap: var(--grid-row-gap);
      width: max-content;
      max-width: 100%;
    }

    .step-head,
    .track-row {
      display: grid;
      grid-template-columns: var(--grid-label-width) repeat(16, var(--grid-step-size));
      gap: var(--grid-gap);
      align-items: stretch;
    }

    .step-label,
    .track-label {
      min-height: calc(34px * var(--grid-scale));
      display: flex;
      align-items: center;
      color: var(--muted);
      font-size: 0.78rem;
      font-variant-numeric: tabular-nums;
    }

    .track-label {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(54px, 0.44fr) auto;
      gap: 5px;
      align-content: center;
      align-items: center;
      padding: calc(6px * var(--grid-scale));
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--panel-strong);
    }

    .track-label.is-muted {
      opacity: 0.58;
    }

    .track-select-button {
      display: grid;
      gap: 3px;
      min-width: 0;
      min-height: 0;
      padding: 0;
      border: 0;
      background: transparent;
      text-align: center;
      font-size: calc(0.88rem * var(--grid-scale));
    }

    .track-volume {
      display: grid;
      gap: 2px;
      min-width: 0;
      color: var(--muted);
      font-size: 0.58rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .track-volume input {
      width: 100%;
      min-width: 0;
      accent-color: var(--accent-2);
    }

    .track-toggle {
      min-width: calc(34px * var(--grid-scale));
      min-height: calc(28px * var(--grid-scale));
      padding: 0 6px;
      border-radius: 6px;
      font-size: 0.68rem;
      font-weight: 800;
      text-transform: uppercase;
      color: #061019;
      background: rgba(96, 217, 255, 0.82);
      border-color: rgba(185, 242, 255, 0.9);
    }

    .track-toggle[aria-pressed="false"] {
      color: var(--muted);
      background: rgba(255, 255, 255, 0.045);
      border-color: var(--line);
    }

    .track-name {
      color: var(--text);
      font-weight: 800;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .track-sample {
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: calc(0.76rem * var(--grid-scale));
    }

    .step-number {
      min-height: calc(24px * var(--grid-scale));
      display: grid;
      place-items: center;
      color: var(--muted);
      font-size: 0.72rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .step {
      position: relative;
      aspect-ratio: 1;
      min-width: 0;
      width: var(--grid-step-size);
      min-height: var(--grid-step-size);
      border-radius: 6px;
      border: 1px solid rgba(166, 183, 197, 0.22);
      background: rgba(255, 255, 255, 0.045);
      padding: 0;
    }

    .step.is-on {
      background: linear-gradient(180deg, rgba(96, 217, 255, 0.82), rgba(28, 126, 164, 0.82));
      border-color: rgba(185, 242, 255, 0.9);
      box-shadow: 0 0 18px rgba(96, 217, 255, 0.24);
    }

    .step.has-effect {
      border-color: rgba(255, 191, 105, 0.92);
      background:
        linear-gradient(135deg, rgba(255, 191, 105, 0.34), rgba(192, 132, 252, 0.28)),
        rgba(255, 255, 255, 0.045);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 16px rgba(255, 191, 105, 0.2);
    }

    .step.is-on.has-effect {
      background:
        linear-gradient(135deg, rgba(255, 191, 105, 0.9), rgba(192, 132, 252, 0.74)),
        linear-gradient(180deg, rgba(96, 217, 255, 0.82), rgba(28, 126, 164, 0.82));
      border-color: rgba(255, 229, 138, 0.96);
    }

    .step.is-current {
      outline: 2px solid var(--accent-2);
      outline-offset: 2px;
    }

    .field {
      display: grid;
      gap: 5px;
    }

    .field label {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .wide {
      grid-column: 1 / -1;
    }

    .hidden-control {
      display: none;
    }

    .readout {
      min-height: 38px;
      display: flex;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(6, 9, 14, 0.58);
      color: var(--text);
      padding: 0 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .workstation-panel {
      min-height: 0;
      padding: 10px;
    }

    .wavs-folder-card[hidden] {
      display: none;
    }

    .picker-panel {
      display: grid;
      gap: 8px;
    }

    .picker-title {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .folder-grid,
    .sample-grid {
      display: grid;
      gap: 6px;
      overflow: auto;
      padding-right: 2px;
    }

    .folder-grid {
      position: relative;
      grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
      max-height: 104px;
    }

    .folders-card {
      position: relative;
      padding-bottom: 18px;
    }

    .folders-card .resize-handle {
      border-radius: 0 0 8px 8px;
    }

    .sample-grid {
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      min-height: 0;
      max-height: clamp(112px, 16vh, 180px);
    }

    .picker-button {
      min-width: 0;
      min-height: 32px;
      padding: 4px 7px;
      border-radius: 6px;
      overflow: hidden;
      text-align: left;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 0.78rem;
    }

    .picker-button.is-selected {
      border-color: rgba(96, 217, 255, 0.86);
      background: rgba(96, 217, 255, 0.16);
      color: var(--text);
    }

    .mobile-view-tabs,
    .mobile-track-targets {
      display: none;
    }

    .status {
      min-height: 22px;
      margin-top: 10px;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .manager-overlay {
      position: fixed;
      inset: 0;
      z-index: 140;
      display: block;
      pointer-events: none;
    }

    .manager-overlay[hidden] {
      display: none;
    }

    .pattern-manager {
      width: min(1180px, calc(100vw - 24px));
      height: min(620px, calc(100vh - 24px));
      max-height: calc(100vh - 24px);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(15, 19, 27, 0.98);
      box-shadow: 0 24px 90px rgba(0, 0, 0, 0.52);
      padding: 14px;
      overflow: hidden;
      pointer-events: auto;
    }

    .floating-manager {
      position: fixed;
      left: 50%;
      top: 82px;
      transform: translateX(-50%);
      resize: none;
    }

    .floating-manager[style*="left"] {
      transform: none;
    }

    .floating-manager.is-moving {
      box-shadow:
        0 28px 92px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(96, 217, 255, 0.2);
    }

    .floating-manager-handle {
      cursor: move;
      touch-action: none;
      user-select: none;
    }

    .floating-manager-handle button,
    .floating-manager-handle input,
    .floating-manager-handle select,
    .floating-manager-handle a {
      cursor: pointer;
      touch-action: auto;
    }

    .floating-manager-resize {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 24px;
      height: 24px;
      cursor: nwse-resize;
      touch-action: none;
    }

    .floating-manager-resize::after {
      content: "";
      position: absolute;
      right: 7px;
      bottom: 7px;
      width: 10px;
      height: 10px;
      border-right: 2px solid rgba(166, 183, 197, 0.64);
      border-bottom: 2px solid rgba(166, 183, 197, 0.64);
    }

    .manager-head,
    .manager-panel-title,
    .manager-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    .manager-head h2 {
      margin: 0;
      font-size: 1.2rem;
    }

    .manager-head p {
      margin: 4px 0 0;
      color: var(--muted);
    }

    .manager-layout {
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
      gap: 14px;
    }

    .manager-panel {
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto auto;
      gap: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.035);
      padding: 12px;
      overflow: hidden;
    }

    .manager-panel-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .manager-title-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .slot-grid,
    .chain-grid {
      min-height: 0;
      display: grid;
      align-content: start;
      gap: 8px;
      overflow: auto;
      padding-right: 2px;
    }

    .slot-row,
    .chain-row {
      display: grid;
      gap: 8px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(5, 7, 11, 0.5);
      padding: 8px;
    }

    .slot-row {
      grid-template-columns: 1fr;
      gap: 7px;
    }

    .chain-row {
      grid-template-columns: minmax(160px, 1fr) 104px auto;
    }

    .slot-main {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .slot-name {
      width: 100%;
      min-height: 34px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(6, 9, 14, 0.72);
      color: var(--text);
      padding: 0 9px;
    }

    .slot-meta,
    .manager-note {
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.25;
    }

    .slot-meta {
      min-width: 88px;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .slot-actions,
    .chain-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .slot-actions button,
    .chain-actions button,
    .manager-actions button {
      min-height: 32px;
      padding: 0 9px;
      font-size: 0.82rem;
    }

    .icon-button,
    .slot-actions .icon-button {
      width: 34px;
      min-width: 34px;
      min-height: 32px;
      padding: 0;
      font-size: 1rem;
      font-weight: 800;
      line-height: 1;
    }

    .slot-actions .icon-button {
      flex: 0 0 auto;
    }

    .manager-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--text);
      text-transform: none;
      letter-spacing: 0;
      font-size: 0.86rem;
      font-weight: 700;
    }

    .pattern-library-window {
      height: min(680px, calc(100vh - 106px));
      max-height: calc(100vh - 106px);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .pattern-library-window > .manager-head {
      flex: 0 0 auto;
    }

    .pattern-menu-actions,
    .pattern-library-tabs {
      display: flex;
      gap: 6px;
    }

    .pattern-menu-actions {
      flex: 0 0 auto;
      flex-wrap: wrap;
    }

    .pattern-menu-actions button,
    .pattern-save-form button {
      min-height: 36px;
      padding: 0 12px;
    }

    .pattern-save-form button {
      min-width: 0;
      white-space: normal;
    }

    .pattern-menu-actions #closePatternManagerButton {
      margin-left: auto;
    }

    .pattern-save-form {
      display: grid;
      grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) auto auto;
      gap: 8px;
      align-items: end;
      padding: 9px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(255, 255, 255, 0.04);
    }

    .pattern-save-form[hidden],
    .pattern-tab-panel[hidden] {
      display: none;
    }

    .pattern-save-form label {
      min-width: 0;
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 0.78rem;
    }

    .pattern-save-form input,
    .pattern-save-form select {
      width: 100%;
      min-width: 0;
      min-height: 36px;
    }

    .pattern-library-card {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(255, 255, 255, 0.035);
    }

    .pattern-library-tabs {
      flex: 0 0 auto;
      border-bottom: 1px solid var(--line);
    }

    .pattern-library-tabs button {
      min-height: 38px;
      padding: 0 12px;
      border: 0;
      border-bottom: 2px solid transparent;
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      font-weight: 800;
    }

    .pattern-library-tabs button[aria-selected="true"] {
      border-bottom-color: #60d9ff;
      color: var(--text);
    }

    .pattern-tab-panel {
      flex: 1 1 auto;
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto auto;
      gap: 9px;
    }

    .pattern-tab-panel:first-of-type {
      grid-template-rows: minmax(0, 1fr);
    }

    .pattern-tab-panel:nth-of-type(2) {
      grid-template-rows: auto minmax(0, 1fr);
    }

    .pattern-list {
      min-height: 0;
      display: grid;
      align-content: start;
      gap: 8px;
      overflow: auto;
    }

    .pattern-list .slot-row {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .pattern-list .slot-main {
      grid-template-columns: 1fr;
    }

    .pattern-list .slot-meta {
      text-align: left;
    }

    .pattern-list .slot-actions {
      align-items: center;
    }

    .chain-field {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .chain-field select,
    .chain-field input {
      width: 100%;
      min-width: 0;
    }

    .chain-row select,
    .chain-row input {
      min-height: 34px;
      font-size: 0.86rem;
    }

    .effect-manager {
      width: min(760px, calc(100vw - 24px));
      height: min(590px, calc(100vh - 24px));
      grid-template-rows: auto auto minmax(0, 1fr);
      gap: 9px;
    }

    .effects-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 5px;
    }

    .effects-tabs button {
      min-height: 36px;
      font-weight: 800;
    }

    .effects-tabs button[aria-selected="true"],
    .synth-waveform button[aria-pressed="true"] {
      border-color: rgba(96, 217, 255, 0.8);
      background: rgba(36, 123, 150, 0.35);
      color: var(--text);
    }

    .effect-panel[hidden],
    .synth-panel[hidden],
    .modulation-panel[hidden] {
      display: none;
    }

    .synth-panel,
    .modulation-panel {
      display: block;
      overflow: auto;
    }

    .synth-panel > * + *,
    .modulation-panel > * + * {
      margin-top: 12px;
    }

    .synth-note-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 8px;
      align-items: end;
    }

    .synth-note-row label,
    .synth-control {
      min-width: 0;
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 800;
    }

    .synth-note-row select,
    .synth-note-row button {
      min-width: 0;
      min-height: 36px;
    }

    .synth-waveform {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 6px;
    }

    .synth-waveform button {
      min-width: 0;
      min-height: 36px;
      padding: 0 5px;
    }

    #synthWaveCanvas {
      width: 100%;
      height: 120px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: rgba(5, 7, 11, 0.65);
      cursor: crosshair;
      touch-action: none;
    }

    .synth-envelope {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .synth-keyboard {
      border-top: 1px solid var(--line);
      padding-top: 12px;
    }

    .synth-range-actions {
      display: flex;
      gap: 6px;
    }

    .synth-range-actions button {
      width: 36px;
      height: 34px;
      padding: 0;
      font-weight: 800;
    }

    .synth-key-grid {
      display: grid;
      grid-template-columns: repeat(13, minmax(0, 1fr));
      gap: 4px;
      margin-top: 10px;
    }

    .synth-key-grid button {
      min-width: 0;
      height: 48px;
      padding: 3px 1px;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 2px;
      touch-action: none;
    }

    .synth-key-grid button strong {
      font-size: 0.86rem;
    }

    .synth-key-grid button span {
      color: var(--muted);
      font-size: 0.66rem;
      white-space: nowrap;
    }

    .synth-key-grid button[aria-pressed="true"] {
      border-color: rgba(96, 217, 255, 0.9);
      background: rgba(36, 123, 150, 0.5);
    }

    .synth-control {
      padding: 9px;
      border: 1px solid var(--line);
      border-radius: 6px;
    }

    .synth-control > span {
      display: flex;
      justify-content: space-between;
      gap: 8px;
    }

    .synth-control output {
      color: var(--text);
      font-variant-numeric: tabular-nums;
    }

    .synth-control input,
    .synth-control select {
      width: 100%;
      min-width: 0;
    }

    .synth-actions {
      display: flex;
      justify-content: flex-end;
    }

    .effect-head-main {
      min-width: min(420px, 100%);
      display: grid;
      gap: 6px;
    }

    .effect-head-main select {
      width: min(360px, 100%);
    }

    .effect-panel {
      grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .effect-grid {
      min-height: 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px 12px;
      overflow: auto;
      padding-right: 2px;
    }

    .effect-control-group {
      min-width: 0;
      display: grid;
      align-content: start;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(5, 7, 11, 0.36);
      padding: 9px;
    }

    .effect-control-group h3 {
      margin: 0;
      color: var(--accent-2);
      font-size: 0.78rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .effect-control-stack {
      display: grid;
      gap: 8px;
    }

    .effect-control {
      display: grid;
      gap: 6px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(5, 7, 11, 0.42);
      padding: 8px;
    }

    .effect-control-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .effect-value {
      color: var(--text);
      font-variant-numeric: tabular-nums;
      text-transform: none;
      letter-spacing: 0;
    }

    .effect-step-panel {
      display: grid;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(5, 7, 11, 0.42);
      padding: 9px;
    }

    .effect-step-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .effect-step-actions button {
      min-height: 30px;
      padding: 0 9px;
      font-size: 0.82rem;
    }

    .effect-step-grid {
      display: grid;
      grid-template-columns: repeat(16, minmax(22px, 1fr));
      gap: 4px;
    }

    .effect-step {
      min-width: 0;
      min-height: 30px;
      padding: 0;
      border-radius: 5px;
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }

    .effect-step.is-on {
      border-color: rgba(96, 217, 255, 0.86);
      background: rgba(96, 217, 255, 0.18);
      color: var(--text);
    }

    @media (min-width: 1600px) {
      .app {
        width: min(2200px, calc(100% - 40px));
      }

      .workstation-grid {
        grid-template-columns: minmax(760px, 1.65fr) minmax(640px, 0.95fr);
        gap: 18px;
      }

      .folder-grid {
        max-height: 112px;
      }

      .sample-grid {
        max-height: clamp(190px, 22vh, 360px);
      }
    }

    @media (min-width: 2100px) {
      .app {
        width: min(96vw, 2680px);
      }

      .workstation-grid {
        grid-template-columns: minmax(980px, 1.55fr) minmax(760px, 0.9fr);
        gap: 22px;
      }

      .visual-wrap {
        min-height: clamp(620px, 64vh, 940px);
      }

      canvas {
        height: clamp(620px, 64vh, 940px);
      }

      .folder-grid {
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
        max-height: 112px;
      }

      .sample-grid {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        max-height: clamp(220px, 24vh, 420px);
      }
    }

    @media (max-width: 1280px) {
      .app {
        width: min(100% - 24px, 1180px);
      }

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

      .visual-wrap {
        min-height: clamp(420px, 56vh, 620px);
      }

      canvas {
        height: clamp(420px, 56vh, 620px);
      }
    }

    @media (max-width: 1060px) {
      .workstation-grid {
        grid-template-columns: 1fr;
      }

      .workstation-menu-card {
        justify-content: flex-start;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .tempo-control {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 760px) {
      .app {
        width: min(100% - 14px, 1480px);
        padding-top: 10px;
      }

      .intro-card {
        width: 100%;
      }

      .beat-workstation {
        padding: 8px;
        gap: 8px;
      }

      .visual-wrap {
        min-height: 360px;
      }

      canvas {
        height: 360px;
      }

      .tracks-sequencer-card {
        overflow: hidden;
      }

      .step-head,
      .track-row {
        min-width: 0;
      }

      .folder-grid,
      .sample-grid {
        max-height: 160px;
      }

      .manager-overlay {
        padding: 8px;
        align-items: end;
        overflow: hidden;
      }

      .pattern-manager {
        position: fixed;
        left: 8px;
        right: 8px;
        top: auto;
        bottom: max(8px, env(safe-area-inset-bottom));
        transform: none;
        width: auto;
        height: auto;
        max-height: min(82svh, 640px);
        padding: 10px;
        gap: 9px;
        overflow: hidden;
      }

      .floating-manager-handle {
        cursor: default;
        touch-action: auto;
      }

      .floating-manager-resize {
        display: none;
      }

      .manager-layout {
        grid-template-columns: 1fr;
        gap: 9px;
        overflow: auto;
        padding-right: 2px;
        -webkit-overflow-scrolling: touch;
      }

      .manager-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px;
      }

      .manager-head h2 {
        font-size: 1rem;
      }

      .manager-head p {
        display: none;
      }

      .manager-head button {
        width: 44px;
        min-width: 44px;
        min-height: 32px;
        border-color: rgba(255, 116, 132, 0.7);
        background: rgba(112, 38, 48, 0.62);
        padding: 0 10px;
        overflow: hidden;
        color: var(--text);
        font-size: 0;
      }

      .manager-head button::before {
        content: "X";
        font-size: 0.9rem;
        font-weight: 900;
      }

      .manager-panel {
        min-height: auto;
        padding: 9px;
        gap: 8px;
        overflow: visible;
      }

      .slot-grid,
      .chain-grid {
        max-height: 32svh;
      }

      .slot-main {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .slot-meta {
        min-width: 0;
        text-align: left;
      }

      .manager-actions {
        align-items: stretch;
      }

      .manager-actions button {
        flex: 1 1 0;
      }

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

      .pattern-library-window {
        height: min(88svh, 720px);
        max-height: min(88svh, 720px);
      }

      .pattern-library-window .manager-head p {
        display: block;
      }

      .pattern-menu-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .pattern-menu-actions button {
        min-width: 0;
        padding: 0 5px;
      }

      .pattern-menu-actions #closePatternManagerButton {
        margin-left: 0;
      }

      .pattern-save-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .pattern-save-form label {
        grid-column: 1 / -1;
      }

      .pattern-library-tabs button {
        min-width: 0;
        flex: 1 1 0;
        padding: 0 4px;
        font-size: 0.76rem;
        white-space: normal;
      }

      .pattern-list .slot-row {
        grid-template-columns: 1fr;
      }

      .pattern-list .slot-actions {
        justify-content: flex-start;
      }

      .pattern-library-window .chain-grid {
        max-height: none;
      }

      .effect-manager {
        max-height: min(82svh, 620px);
      }

      .effect-head-main {
        min-width: 0;
      }

      .effect-head-main select {
        width: 100%;
        min-width: 0;
      }

      .effect-panel {
        min-height: 0;
        display: block;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }

      .synth-panel,
      .modulation-panel {
        min-height: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }

      .synth-note-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .synth-note-row label {
        grid-column: 1 / -1;
      }

      .synth-waveform,
      .synth-envelope {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .synth-waveform {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .synth-waveform button {
        font-size: 0.78rem;
      }

      .synth-envelope {
        grid-template-columns: 1fr;
      }

      .synth-key-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
      }

      .effect-panel > * + * {
        margin-top: 8px;
      }

      .effect-grid {
        grid-template-columns: 1fr;
        overflow: visible;
      }

      .effect-step-panel {
        overflow: hidden;
      }

      .effect-step-panel .manager-panel-title {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
      }

      .effect-step-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .effect-step-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .effect-step {
        min-height: 34px;
      }

      .effect-panel .manager-note {
        white-space: normal;
        overflow-wrap: anywhere;
      }
    }

    @media (max-width: 480px) {
      body {
        overflow-x: hidden;
      }

      .app {
        width: 100%;
        max-width: 720px;
        min-height: 100vh;
        min-height: 100svh;
        margin: 0 auto;
        padding: max(4px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 6px;
      }

      .intro-card {
        width: 100%;
        gap: 6px;
        margin-bottom: 0;
        align-items: start;
        padding: 8px;
      }

      .beat-workstation {
        padding: 7px;
        gap: 6px;
        border-radius: 8px;
      }

      h1 {
        margin-top: 2px;
        font-size: clamp(1.12rem, 5vw, 1.45rem);
        line-height: 1.08;
      }

      .subtitle {
        max-width: none;
        margin-top: 3px;
        font-size: 0.9rem;
        line-height: 1.18;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .back-link {
        font-size: 0.82rem;
      }

      .workstation-menu-card {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        justify-content: stretch;
        width: 100%;
      }

      .workstation-menu-card button,
      .workstation-menu-card input {
        min-width: 0;
        min-height: 34px;
        padding: 0 5px;
        font-size: 0.86rem;
      }

      .tempo-control {
        grid-column: 1 / -1;
        grid-template-columns: max-content minmax(0, 1fr) 3ch;
        min-height: 34px;
        padding: 0 8px;
      }

      .tempo-title,
      .tempo-value {
        font-size: 0.76rem;
      }

      .bpm {
        min-height: 24px;
        padding: 0;
      }

      .workstation-grid {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .visualizer-card,
      .tracks-sequencer-card,
      .workstation-panel {
        border-radius: 7px;
      }

      .visual-wrap {
        min-height: clamp(180px, 30svh, 260px);
      }

      .resize-handle {
        display: none;
      }

      canvas {
        height: clamp(180px, 30svh, 260px);
      }

      .statline {
        gap: 5px;
        padding: 7px;
        font-size: 0.74rem;
        overflow: hidden;
      }

      .statline .pill:nth-child(n+3) {
        display: none;
      }

      .pill {
        padding: 2px 6px;
      }

      .tracks-sequencer-card {
        min-width: 0;
        padding: 8px;
        overflow: hidden;
      }

      .grid {
        gap: 7px;
      }

      .step-head,
      .track-row {
        min-width: 0;
        width: 100%;
        grid-template-columns: repeat(16, minmax(18px, 1fr));
        gap: 3px;
      }

      .step-label,
      .track-label {
        grid-column: 1 / -1;
      }

      .step-label {
        min-height: 18px;
        font-size: 0.72rem;
      }

      .step-number {
        min-height: 16px;
        font-size: 0.62rem;
      }

      .track-label {
        min-height: 38px;
        padding: 5px 7px;
        gap: 2px;
      }

      .track-name {
        font-size: 0.88rem;
      }

      .track-sample {
        font-size: 0.7rem;
      }

      .step {
        min-height: 0;
        border-radius: 4px;
      }

      .step.is-current {
        outline-width: 1px;
        outline-offset: 1px;
      }

      .field {
        gap: 3px;
      }

      .field label {
        font-size: 0.68rem;
      }

      select,
      input[type="number"] {
        min-height: 34px;
        border-radius: 6px;
        padding-inline: 8px;
        font-size: 0.86rem;
      }

      .status {
        margin-top: 7px;
        min-height: 18px;
        font-size: 0.78rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
      }
    }

    @media (max-height: 680px) and (max-width: 480px) {
      .app {
        gap: 5px;
        padding-block: max(3px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-bottom));
      }

      .subtitle {
        display: none;
      }

      .visual-wrap {
        min-height: clamp(150px, 27svh, 210px);
      }

      canvas {
        height: clamp(150px, 27svh, 210px);
      }

      .statline {
        display: none;
      }

      .track-label {
        min-height: 32px;
      }

      .track-sample {
        display: none;
      }

    }

    @media (orientation: landscape) and (max-height: 480px) {
      .app {
        max-width: none;
      }

      .workstation-grid {
        grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1fr);
        align-items: stretch;
      }

      .visual-wrap {
        height: calc(100svh - 76px);
        min-height: 220px;
      }

      canvas {
        height: 100%;
      }

      .tracks-sequencer-card {
        max-height: calc(100svh - 76px);
        overflow: auto;
      }
    }

    @media (max-width: 760px) {
      body {
        height: 100svh;
        overflow: hidden;
      }

      .app {
        width: 100%;
        height: 100svh;
        min-height: 100svh;
        padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
        grid-template-rows: minmax(0, 1fr);
        gap: 0;
      }

      .intro-card {
        display: none;
      }

      .beat-workstation {
        height: 100%;
        min-height: 0;
        grid-template-rows: auto auto minmax(0, 1fr);
        gap: 6px;
        padding: 6px;
        overflow: hidden;
      }

      .mobile-view-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        min-height: 34px;
      }

      .mobile-view-tab {
        min-width: 0;
        min-height: 34px;
        padding: 0 6px;
        border-color: rgba(180, 198, 216, 0.3);
        background: rgba(255, 255, 255, 0.055);
        color: var(--muted);
        font-size: 0.8rem;
        font-weight: 900;
      }

      .mobile-view-tab.is-active {
        border-color: rgba(96, 217, 255, 0.8);
        background: linear-gradient(180deg, rgba(36, 123, 150, 0.72), rgba(14, 67, 86, 0.92));
        color: var(--text);
      }

      .workstation-grid,
      .workstation-column {
        display: contents;
      }

      .visualizer-card,
      .folders-card,
      .wavs-folder-card,
      .tracks-sequencer-card {
        min-height: 0;
        height: 100%;
      }

      body[data-mobile-workstation-view="visual"] .folders-card,
      body[data-mobile-workstation-view="visual"] .wavs-folder-card,
      body[data-mobile-workstation-view="visual"] .tracks-sequencer-card,
      body[data-mobile-workstation-view="samples"] .visualizer-card,
      body[data-mobile-workstation-view="samples"] .tracks-sequencer-card,
      body[data-mobile-workstation-view="sequence"] .visualizer-card,
      body[data-mobile-workstation-view="sequence"] .wavs-folder-card {
        display: none;
      }

      body[data-mobile-workstation-view="samples"] .folders-card,
      body[data-mobile-workstation-view="samples"] .wavs-folder-card {
        display: grid;
      }

      body[data-mobile-workstation-view="samples"] .workstation-grid {
        display: grid;
        grid-template-columns: minmax(128px, 42vw) minmax(0, 1fr);
        gap: 6px;
        height: 100%;
        min-height: 0;
        align-items: stretch;
      }

      body[data-mobile-workstation-view="sequence"] .workstation-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        height: 100%;
        min-height: 0;
        align-items: stretch;
      }

      body[data-mobile-workstation-view="sequence"] .workstation-column {
        display: contents;
      }

      body[data-mobile-workstation-view="sequence"] .folders-card {
        display: none;
      }

      body[data-mobile-workstation-view="sequence"] .wavs-folder-card,
      body[data-mobile-workstation-view="sequence"] .wavs-folder-card[hidden] {
        display: none;
      }

      body[data-mobile-workstation-view="sequence"] .tracks-sequencer-card {
        min-width: 0;
        min-height: 0;
        height: 100%;
      }

      .visualizer-card {
        grid-template-rows: minmax(0, 1fr);
      }

      .visualizer-card .statline {
        display: none;
      }

      .visual-wrap,
      canvas {
        height: 100%;
        min-height: 0;
      }

      .visual-menu-shell {
        left: 8px;
        right: 8px;
        top: 8px;
        justify-items: stretch;
      }

      .visual-menu-button {
        justify-self: end;
      }

      .visual-toolbar {
        display: grid;
        width: 100%;
      }

      .visual-toolbar[hidden] {
        display: none;
      }

      .visual-toolbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .folders-card,
      .wavs-folder-card {
        padding: 8px;
      }

      .folders-card {
        padding-bottom: 8px;
      }

      .folders-card .picker-panel,
      .wavs-folder-card .picker-panel {
        min-height: 0;
        height: 100%;
      }

      .folders-card .picker-panel {
        grid-template-rows: auto minmax(0, 1fr);
      }

      .wavs-folder-card .picker-panel {
        grid-template-rows: auto minmax(0, 0.9fr) minmax(124px, 0.85fr);
      }

      .folder-grid {
        grid-template-columns: 1fr;
        max-height: none;
        height: 100%;
        padding-right: 0;
      }

      body[data-mobile-workstation-view="samples"] .folders-card {
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }

      body[data-mobile-workstation-view="sequence"] .folders-card,
      body[data-mobile-workstation-view="sequence"] .wavs-folder-card {
        padding: 6px;
      }

      body[data-mobile-workstation-view="sequence"] .folders-card .picker-panel,
      body[data-mobile-workstation-view="sequence"] .wavs-folder-card .picker-panel {
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }

      body[data-mobile-workstation-view="sequence"] .folders-card .picker-panel {
        grid-template-rows: auto minmax(0, 1fr);
      }

      body[data-mobile-workstation-view="sequence"] .wavs-folder-card .picker-panel {
        grid-template-rows: auto minmax(0, 1fr);
      }

      body[data-mobile-workstation-view="sequence"] .mobile-track-targets {
        display: none;
      }

      body[data-mobile-workstation-view="sequence"] .folder-grid,
      body[data-mobile-workstation-view="sequence"] .sample-grid {
        grid-template-columns: 1fr;
        height: 100%;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 0;
        -webkit-overflow-scrolling: touch;
      }

      body[data-mobile-workstation-view="sequence"] .picker-title {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
        font-size: 0.66rem;
        line-height: 1.1;
      }

      body[data-mobile-workstation-view="sequence"] .picker-title span:last-child {
        font-size: 0.6rem;
        opacity: 0.78;
      }

      body[data-mobile-workstation-view="sequence"] .picker-button {
        min-height: 31px;
        padding: 4px 6px;
        border-radius: 6px;
        font-size: 0.68rem;
        line-height: 1.1;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      body[data-mobile-workstation-view="samples"] .folders-card .picker-panel {
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }

      body[data-mobile-workstation-view="samples"] .folders-card .folder-grid {
        height: 100% !important;
        min-height: 0;
        max-height: none !important;
        overflow-y: auto;
        align-content: start;
        -webkit-overflow-scrolling: touch;
      }

      body[data-mobile-workstation-view="samples"] .folders-card .picker-button {
        min-height: 27px;
        padding: 3px 6px;
        font-size: 0.72rem;
      }

      .sample-grid {
        grid-template-columns: 1fr;
        max-height: none;
        min-height: 0;
        height: 100%;
      }

      .mobile-track-targets {
        display: grid;
        gap: 7px;
        min-height: 0;
      }

      .mobile-track-target-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        min-height: 0;
        overflow: auto;
      }

      .mobile-track-target-button {
        min-width: 0;
        min-height: 36px;
        display: grid;
        justify-items: start;
        align-content: center;
        gap: 2px;
        padding: 4px 7px;
        border-width: 1px 1px 1px 4px;
        background: rgba(255, 255, 255, 0.055);
        text-align: left;
      }

      .mobile-track-target-button strong,
      .mobile-track-target-button span {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .mobile-track-target-button strong {
        font-size: 0.78rem;
      }

      .mobile-track-target-button span {
        color: var(--muted);
        font-size: 0.66rem;
      }

      .mobile-track-target-button.is-selected {
        background: rgba(96, 217, 255, 0.13);
      }

      .tracks-sequencer-card {
        padding: 8px;
        overflow: hidden;
      }

      body[data-mobile-workstation-view="sequence"] .grid-pane {
        height: 100%;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
        padding-right: 0;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
      }

      body[data-mobile-workstation-view="sequence"] .grid {
        width: max-content;
        max-width: none;
        gap: 6px;
        padding-bottom: 72px;
        touch-action: pan-x pan-y;
      }

      body[data-mobile-workstation-view="sequence"] .step-head,
      body[data-mobile-workstation-view="sequence"] .track-row {
        width: max-content;
        grid-template-columns: 136px repeat(16, 28px);
        gap: 4px;
      }

      body[data-mobile-workstation-view="sequence"] .step-head {
        position: sticky;
        top: 0;
        z-index: 8;
        background: #10141c;
        padding-bottom: 2px;
      }

      body[data-mobile-workstation-view="sequence"] .step-label,
      body[data-mobile-workstation-view="sequence"] .track-label {
        grid-column: auto;
      }

      body[data-mobile-workstation-view="sequence"] .step-label,
      body[data-mobile-workstation-view="sequence"] .track-label {
        position: sticky;
        left: 0;
        background: #151b26;
        box-shadow: 8px 0 10px rgba(0, 0, 0, 0.28);
      }

      body[data-mobile-workstation-view="sequence"] .track-label::before,
      body[data-mobile-workstation-view="sequence"] .step-label::before {
        content: "";
        position: absolute;
        inset: -2px;
        z-index: -1;
        border-radius: inherit;
        background: #151b26;
      }

      body[data-mobile-workstation-view="sequence"] .step-label {
        z-index: 10;
      }

      body[data-mobile-workstation-view="sequence"] .track-label {
        z-index: 6;
        position: sticky;
        width: 136px;
        overflow: hidden;
        min-height: 40px;
        grid-template-columns: minmax(0, 1fr) 38px;
        padding: 4px 6px;
      }

      body[data-mobile-workstation-view="sequence"] .track-label.is-muted {
        opacity: 1;
      }

      body[data-mobile-workstation-view="sequence"] .track-select-button {
        justify-items: center;
        overflow: hidden;
      }

      body[data-mobile-workstation-view="sequence"] .step-number {
        position: sticky;
        top: 0;
        z-index: 9;
        min-height: 18px;
        background: #10141c;
        border-radius: 4px;
      }

      body[data-mobile-workstation-view="sequence"] .track-volume {
        display: none;
      }

      body[data-mobile-workstation-view="sequence"] .track-toggle {
        min-width: 34px;
        min-height: 28px;
        padding: 0 4px;
      }

      body[data-mobile-workstation-view="sequence"] .step {
        width: 28px;
        min-height: 40px;
      }

      body[data-mobile-workstation-view="sequence"] .step-number {
        min-height: 16px;
      }

      body[data-mobile-workstation-view="sequence"] .track-name {
        font-size: 0.78rem;
      }

      body[data-mobile-workstation-view="sequence"] .track-sample {
        display: block;
        font-size: 0.64rem;
      }
    }

    @media (orientation: landscape) and (max-height: 480px) and (max-width: 1000px) {
      body {
        height: auto;
        min-height: 100svh;
        overflow-x: hidden;
        overflow-y: auto;
      }

      .app {
        height: auto;
        min-height: 100svh;
        grid-template-rows: auto auto;
        overflow: visible;
      }

      .beat-workstation {
        height: auto;
        min-height: 560px;
        overflow: visible;
      }

      .workstation-grid {
        min-height: 380px;
      }
    }