:root {
  color-scheme: dark;
  font:
    14px system-ui,
    sans-serif;
  background: #121820;
  color: #e5ecf4;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select {
  font: inherit;
}
button,
a,
.file-button {
  transition: background 0.12s;
}
button,
.file-button {
  background: #283746;
  border: 1px solid #42556b;
  color: #eff7ff;
  border-radius: 5px;
  padding: 7px 12px;
  cursor: pointer;
}
button:hover:not(:disabled),
.file-button:hover {
  background: #38506a;
}
button:disabled {
  opacity: 0.35;
  cursor: default;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid #8ee1ca;
  outline-offset: 2px;
}
a {
  color: #9edbd4;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
input,
select {
  background: #111a24;
  color: #e4f2ff;
  border: 1px solid #3b4c60;
  border-radius: 3px;
  padding: 5px;
}
input[type="number"] {
  width: 68px;
}
.eyebrow {
  color: #8ab7c5;
  font-size: 11px;
  letter-spacing: 0.14em;
}
header {
  padding: 22px 28px 15px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
h1 {
  font-size: 24px;
  margin: 5px 0;
}
h2 {
  font-size: 15px;
  margin: 0;
}
h3 {
  font-size: 14px;
  margin: 15px 0 5px;
}
.share {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
}
.transport {
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1a2531;
  border-block: 1px solid #354454;
}
.transport .muted {
  margin-left: auto;
  font-size: 12px;
}
.playhead {
  font:
    13px ui-monospace,
    monospace;
  color: #b1efd6;
}
.restart {
  background: #594727;
  border-color: #c1a26a;
  color: #ffe2a8;
}
.workspace {
  padding: 18px 28px 75px;
  display: grid;
  grid-template-columns: minmax(225px, 1fr) minmax(460px, 2fr) minmax(240px, 1fr);
  gap: 16px;
  align-items: start;
}
.panel {
  background: #1b2632;
  border: 1px solid #334456;
  border-radius: 7px;
  padding: 14px;
  min-width: 0;
}
.panel-title {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.panel-title > span {
  font-size: 11px;
  color: #aac0d0;
}
.modules nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.modules nav button {
  text-align: left;
  padding: 8px;
  overflow-wrap: anywhere;
}
small {
  display: block;
  color: #a3b3c6;
  font-size: 11px;
  margin-top: 3px;
}
.selected {
  border-color: #8acdbd !important;
  background: #263e43 !important;
}
.controllers {
  max-height: 380px;
  overflow: auto;
}
.controller {
  padding: 8px 0;
  border-bottom: 1px solid #2e3c4d;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.controller label {
  font-size: 12px;
}
.controller > div {
  display: flex;
  gap: 3px;
}
.controller button {
  padding: 3px 8px;
}
.controller input {
  width: 59px;
}
.muted {
  color: #a3b3c6;
  line-height: 1.6;
  font-size: 12px;
}
.pattern-tools {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.pattern-tools button {
  font-size: 12px;
}
.badge {
  color: #ace9d1 !important;
  background: #24453f;
  padding: 4px 7px;
  border-radius: 4px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font:
    12px ui-monospace,
    monospace;
}
th {
  text-align: left;
  color: #829bb5;
  font-weight: 500;
  padding: 5px;
}
td {
  border-top: 1px solid #2d3b4c;
  padding: 3px 5px;
}
tr:nth-child(4n + 1) {
  background: #233341;
}
.note {
  color: #b7f2cd;
  font-weight: bold;
}
td input {
  font-size: 12px;
  width: 55px !important;
  padding: 3px;
}
td button {
  padding: 2px 7px;
}
.placement {
  border: 1px solid #3b4d60;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 9px;
}
.pattern-name {
  padding: 0;
  background: none !important;
  border: 0;
  text-align: left;
  font-weight: 600;
}
.position {
  display: block;
  font:
    12px ui-monospace,
    monospace;
  color: #b7d2e9;
  margin: 9px 0;
}
.move-buttons {
  display: flex;
  gap: 5px;
}
.presence {
  color: #d7bfed;
}
.activity {
  grid-column: 1 / -1;
}
.action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid #304152;
}
.action b {
  font-size: 12px;
}
.action button {
  font-size: 12px;
}
.error,
.offline {
  margin: 12px 28px;
  padding: 12px;
  background: #57393b;
  border: 1px solid #a36e74;
  border-radius: 5px;
}
.offline {
  background: #493d27;
  border-color: #8b754a;
}
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #111c27;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 28px;
  border-top: 1px solid #3a4b5d;
  font-size: 12px;
}
.online {
  color: #98d7b7;
}
.offline-text {
  color: #edc884;
}
footer button {
  font-size: 11px;
  padding: 4px 8px;
}
.exports {
  margin-left: auto;
  display: flex;
  gap: 16px;
}
[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}
.welcome {
  max-width: 760px;
  margin: 100px auto;
  padding: 30px;
}
.welcome h1 {
  font-size: 52px;
  line-height: 1.1;
  margin: 24px 0;
}
.welcome > p {
  max-width: 570px;
  line-height: 1.7;
}
.welcome-actions {
  display: flex;
  gap: 16px;
  margin: 30px 0;
}
.file-button input {
  display: none;
}
@media (max-width: 1050px) {
  .workspace {
    grid-template-columns: 250px minmax(420px, 1fr);
  }
  .arrangement {
    grid-column: 1 / -1;
  }
  .share {
    flex-wrap: wrap;
  }
  .transport {
    flex-wrap: wrap;
  }
  .transport .muted {
    margin-left: 0;
  }
  footer {
    flex-wrap: wrap;
  }
  .exports {
    margin-left: 0;
  }
}
@media (max-width: 750px) {
  .workspace {
    grid-template-columns: 1fr;
    padding: 12px 12px 125px;
  }
  .arrangement,
  .activity {
    grid-column: auto;
  }
  header {
    padding: 16px;
  }
  .welcome h1 {
    font-size: 36px;
  }
  .share {
    display: block;
  }
  .share a {
    display: block;
  }
  .transport {
    padding: 12px;
  }
}
/* Tracker keeps each event column aligned at every horizontal scroll position. */
.pattern {
  min-width: 0;
}
.pattern-tools {
  flex-wrap: wrap;
  gap: 8px;
}
.pattern-tools label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}
.pattern-tools input {
  width: 65px;
}
.pattern-tools input[aria-label="New pattern name"] {
  width: 135px;
}
.tracker {
  overflow: auto;
  max-height: 540px;
  outline: 1px solid #40505d;
  margin: 12px 0;
}
.tracker:focus {
  outline: 2px solid #66d9c0;
}
.tracker table {
  width: max-content;
  min-width: 100%;
  font:
    13px / 1.5 ui-monospace,
    monospace;
  user-select: none;
}
.tracker td {
  padding: 5px 7px;
  cursor: cell;
  text-align: center;
  border-right: 1px solid #25313c;
  white-space: nowrap;
}
.tracker th {
  padding: 5px;
  font-size: 11px;
}
.tracker tr:nth-child(4n + 1) {
  background: #202c36;
}
.tracker td.region-selected {
  background: #294b52;
}
.tracker td.recent-paste {
  text-decoration: underline;
  text-decoration-color: #f0cb77;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.tracker td.cursor {
  box-shadow: inset 0 0 0 2px #8cf0cc;
  color: #fff;
}
.cell-inspector {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}
.cell-inspector label {
  display: grid;
  font-size: 11px;
  gap: 4px;
  text-transform: capitalize;
}
.cell-inspector input {
  width: 75px;
}
.cell-inspector select {
  max-width: 150px;
}
.module-graph {
  grid-column: 1 / -1;
}
.graph-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}
.graph-toolbar label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: #b6cbd7;
}
.graph-toolbar input {
  max-width: 180px;
}
.graph-toolbar button {
  font-size: 12px;
}
.graph-canvas {
  display: block;
  width: 100%;
  height: 310px;
  margin: 14px 0;
  border: 1px solid #394d60;
  border-radius: 5px;
  background: radial-gradient(#293b49 1px, transparent 1px) #101b24;
  background-size: 18px 18px;
  touch-action: none;
  user-select: none;
}
.graph-node {
  fill: #26394b;
  stroke: #7393a7;
  stroke-width: 2;
  cursor: grab;
}
.graph-node.active {
  fill: #264b49;
  stroke: #a2e9cb;
}
.graph-node:focus {
  outline: none;
  stroke: #fff;
  stroke-width: 3;
}
.node-name,
.node-type {
  pointer-events: none;
}
.node-name {
  fill: #e3f2f9;
  font: 12px system-ui;
}
.node-type {
  fill: #a9c2d4;
  font:
    10px ui-monospace,
    monospace;
}
.graph-port {
  fill: #79bcc8;
  stroke: #112430;
  stroke-width: 2;
  cursor: crosshair;
}
.graph-port.connecting {
  fill: #ffe28a;
}
/* The transparent stroke keeps thin wires usable at every zoom level. */
.graph-wire {
  pointer-events: stroke;
  cursor: pointer;
  outline: none;
}
.graph-wire:hover + .graph-wire-paint,
.graph-wire:focus + .graph-wire-paint {
  stroke-width: 4;
  filter: brightness(1.4);
}
.graph-route-preview {
  pointer-events: none;
}
.graph-route-preview .graph-wire-paint {
  stroke-dasharray: 6 4;
}
.peer-label,
.graph-presence text {
  font: 10px system-ui;
}
.module-reassignment {
  border: 1px solid #405463;
  border-radius: 6px;
  padding: 0.6rem;
  margin: 0.6rem 0;
}
.module-reassignment summary {
  cursor: pointer;
  font-weight: 600;
}
.module-reassignment .pattern-tools {
  margin-top: 0.6rem;
}
.module-reassignment input {
  width: 5rem;
}
/* Docking libraries own geometry; musical views own their contents. */
.docking-workspace {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 205px);
  min-height: 400px;
  padding: 6px 12px 42px;
}
.workspace-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px 0;
}
.workspace-toolbar label {
  font-size: 12px;
}
.workspace-toolbar button {
  padding: 5px 8px;
  font-size: 12px;
}
.dock-host {
  flex: 1;
  min-height: 0;
  position: relative;
  border: 1px solid #405463;
}
.dock-host > .dv-dockview {
  height: 100%;
}
.dock-view {
  height: 100%;
  overflow: auto;
  background: #121820;
  min-width: 0;
}
.dock-view > .panel {
  min-height: 100%;
  border: 0;
  border-radius: 0;
  padding: 10px;
}
.dock-view .pattern-tools {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.dock-view .graph-toolbar {
  flex-wrap: wrap;
}
.dock-view .controllers {
  max-height: none;
}
.dock-view .graph-canvas {
  height: 300px;
  min-height: 180px;
}
.view-binding {
  display: block;
  padding: 8px;
}
.dock-view .tracker {
  overflow: auto;
}
.dock-host button {
  transition: none;
}
.dock-host .dock-maximize {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  margin: 2px 4px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
}
.dock-host .dock-maximize:hover {
  background: #38506a;
}
.dock-host .dock-maximize:focus-visible {
  outline-offset: -2px;
}

.timeline-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0;
}
.timeline-tools button {
  font-size: 12px;
  padding: 5px 8px;
}
.timeline-canvas {
  display: block;
  width: 100%;
  height: 360px;
  min-height: 240px;
  background: #131d28;
  touch-action: none;
  user-select: none;
  overscroll-behavior: contain;
}
.timeline-canvas g[role="button"] {
  cursor: grab;
  outline: none;
}
.timeline-canvas g[role="button"]:focus > rect:first-of-type {
  stroke: #fff;
  stroke-width: 3;
}
/* Playback edges leave authored selection and edit-cursor backgrounds visible. */
.tracker tr[data-playing] {
  outline: 2px solid #8ee1ca;
  outline-offset: -2px;
}
.tracker tr[data-playing] > th {
  color: #8ee1ca;
}
.tracker tr[data-playing="retained"] {
  outline-color: #ffc578;
}
.tracker tr[data-playing="retained"] > th {
  color: #ffc578;
}

.transport label input[type="number"] {
  width: 6em;
}

.participant-profile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}
.participant-profile label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.participant-list {
  list-style: none;
  padding: 0;
}
.participant-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #344353;
}
.participant-list small {
  display: block;
  color: #acbfcc;
  margin-top: 4px;
}
.participant-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.graph-menu {
  position: fixed;
  z-index: 10000;
  width: 232px;
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: 6px;
  background: #1b2632;
  border: 1px solid #6b8297;
  border-radius: 6px;
  box-shadow: 0 6px 24px #0008;
}
.graph-menu button {
  display: block;
  width: 100%;
  text-align: left;
  margin: 2px 0;
}
.graph-create {
  background: #1b2632;
  color: #e5ecf4;
  border: 1px solid #6b8297;
  border-radius: 6px;
}
.graph-create::backdrop {
  background: #0008;
}
.graph-create form,
.graph-create label {
  display: grid;
  gap: 10px;
}
.graph-toolbar button[aria-pressed="true"] {
  background: #385c65;
  border-color: #8ee1ca;
}
.graph-canvas {
  overscroll-behavior: contain;
}
.pattern-tools button[aria-pressed="true"] {
  background: #385c65;
  border-color: #8ee1ca;
}
.controller-list {
  display: grid;
  gap: 8px;
}
.controller-editor {
  display: grid;
  grid-template-columns: minmax(95px, 1fr) minmax(90px, 2fr) 76px;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #304152;
}
.controller-editor > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #ffd49a;
}
.controller-name {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.controller-bar {
  border: 1px solid #547381;
  border-radius: 4px;
  padding: 8px;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  text-align: right;
  font:
    12px ui-monospace,
    monospace;
}
.controller-bar:focus-visible {
  outline: 2px solid #8ee1ca;
}
.controller-editor input {
  width: 76px !important;
}
.controller-properties {
  background: #1b2632;
  color: #e5ecf4;
  border: 1px solid #6b8297;
  border-radius: 6px;
  max-width: 440px;
}
.controller-properties::backdrop {
  background: #0008;
}

.controller-bar {
  position: relative;
}
.controller-authored-marker {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: #ffda88;
  pointer-events: none;
  max-width: 100%;
  transform: translateX(-1px);
}
.controller-bar > span {
  position: relative;
  pointer-events: none;
}

.module-browser {
  width: min(640px, 90vw);
  max-height: 85vh;
  overflow: auto;
  background: #1b2632;
  color: #e5ecf4;
  border: 1px solid #668080;
  border-radius: 8px;
}
.module-browser::backdrop {
  background: #0008;
}
.module-browser form > label {
  display: block;
  margin: 12px 0;
}
.module-type-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
  margin: 12px 0;
}
.module-type-list button {
  text-align: left;
}
.module-type-list button[aria-pressed="true"] {
  border-color: #8ee1ca;
  background: #263e43;
}

.recent-projects {
  margin-top: 36px;
  border-top: 1px solid #40505d;
  padding-top: 24px;
}
.recent-projects form {
  display: flex;
  gap: 10px;
  align-items: end;
  margin: 16px 0 28px;
}
.recent-projects label {
  flex: 1;
}
.recent-projects input {
  display: block;
  width: 100%;
  margin-top: 6px;
}
.recent-projects ul {
  padding: 0;
  list-style: none;
}
.recent-projects li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #334456;
}
.project-header h1 {
  overflow-wrap: anywhere;
}
.project-header form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.project-sharing {
  max-width: 480px;
  min-width: 220px;
}
.project-sharing details {
  margin-top: 10px;
}
.project-sharing label {
  display: block;
  margin: 12px 0;
}
.project-sharing input {
  display: block;
  width: 100%;
  margin: 6px 0;
}
.welcome-actions {
  flex-wrap: wrap;
}

.participant-locations {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.participant-list li {
  transition: opacity 0.3s;
}
.restart-explanation {
  padding: 8px 24px;
  background: #3c3225;
  color: #ffd394;
}
.restart-explanation p {
  margin: 8px 0;
}
.pattern-collaborators {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.activity-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: 12px;
}
.activity-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.activity-entry {
  border-top: 1px solid #304152;
  padding: 8px 0;
}
.activity-heading {
  display: block;
  width: 100%;
  text-align: left;
  white-space: normal;
}
.activity-details {
  padding: 10px;
}
.activity-reveal {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.reversal-preview {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #8b754a;
}
.reversal-preview li {
  padding: 6px;
  overflow-wrap: anywhere;
}
.reversal-preview li span {
  display: block;
}
.reversal-preview button {
  margin-right: 8px;
}

.dock-view :focus-visible {
  outline: 2px solid #8ee1ca;
  outline-offset: 2px;
}
.graph-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.graph-menu kbd {
  font:
    11px ui-monospace,
    monospace;
  color: #a9bdcc;
  white-space: nowrap;
}
/* Personal transport settings stay outside the shared editor panes. */
.personal-loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 12px 8px;
  padding: 5px 10px 9px;
  border: 1px solid #48516a;
  border-radius: 5px;
  font-size: 12px;
}
.personal-loop legend {
  color: #d2c4ff;
  padding: 0 5px;
}
.personal-loop label {
  display: flex;
  align-items: center;
  gap: 5px;
}
.personal-loop input[type="number"] {
  width: 90px;
}
.personal-loop input[type="checkbox"] {
  width: auto;
}
.workspace-shell {
  height: 100dvh;
  min-height: 640px;
  display: flex;
  flex-direction: column;
}
.workspace-shell > header,
.workspace-shell > .transport,
.workspace-shell > .personal-loop,
.workspace-shell > footer {
  flex-shrink: 0;
}
.workspace-shell > .transport {
  flex-wrap: wrap;
}
.workspace-shell > .docking-workspace {
  height: auto;
  min-height: 240px;
  flex: 1;
  padding-bottom: 6px;
}
.workspace-shell > footer {
  position: static;
}

.project-panel {
  overflow: auto;
  height: 100%;
  padding: 16px;
}
.project-panel h2 {
  overflow-wrap: anywhere;
}
.project-panel h3 {
  margin-top: 24px;
}
.project-panel form,
.project-tempo {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.project-tempo label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-tempo input {
  width: 90px;
}
.project-panel .exports {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.project-panel .exports > span {
  width: 100%;
}
.project-panel .project-sharing {
  min-width: 0;
  max-width: none;
}

.access-notice {
  padding: 10px 28px;
  background: #493d27;
  flex-shrink: 0;
}
.owner-access {
  margin-top: 24px;
}
.owner-access label {
  display: block;
}
.owner-access input {
  display: block;
  width: 100%;
  margin: 8px 0;
}
.owner-access .owner-confirm {
  border: 1px solid #8b754a;
  padding: 12px;
  margin-top: 10px;
}

.annotation-editor {
  width: min(640px, 90vw);
  max-height: 85vh;
  overflow: auto;
  background: #17232c;
  color: #e5ecf4;
  border: 1px solid #617482;
  border-radius: 8px;
  padding: 20px;
}
.annotation-editor::backdrop {
  background: #0008;
}
.annotation-editor textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  font: 14px / 1.5 monospace;
  white-space: pre-wrap;
}
.annotation-editor label {
  display: block;
}
.annotation-conflict {
  padding: 12px;
  background: #493c23;
}
.annotation-conflict pre {
  white-space: pre-wrap;
  max-height: 160px;
  overflow: auto;
}
.annotation-editing {
  display: inline-block;
  white-space: nowrap;
  font: 11px system-ui;
  margin: 0 4px;
}
.description-indicator {
  padding: 0 3px !important;
  min-width: 18px;
  line-height: 18px;
  font-size: 14px;
  cursor: pointer;
}
.description-tooltip {
  position: fixed;
  z-index: 10000;
  width: min(380px, calc(100vw - 16px));
  max-height: min(220px, calc(100vh - 16px));
  box-sizing: border-box;
  padding: 10px;
  background: #101b24;
  color: #edf3f8;
  border: 1px solid #91a4af;
  border-radius: 4px;
  pointer-events: none;
  box-shadow: 0 4px 16px #0008;
  overflow: hidden;
}
.description-tooltip > div {
  white-space: pre-wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  max-height: 160px;
  overflow-wrap: anywhere;
}
.description-tooltip small {
  display: block;
  margin-top: 6px;
  color: #a7bac8;
}
.text-note-content {
  white-space: pre;
}
.text-note-resize {
  cursor: ew-resize;
}

@keyframes audio-attention {
  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
  40% {
    box-shadow: 0 0 0 3px #8ee1ca88;
  }
}
.audio-attention {
  animation: audio-attention 1.2s ease-out;
}
.sample-loader[open]:not(:modal) {
  position: fixed;
  inset: 20vh auto auto 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-height: 70vh;
  overflow: auto;
  box-shadow: 0 12px 50px #0008;
}
@media (prefers-reduced-motion: reduce) {
  .audio-attention {
    animation: none;
    outline: 2px solid #8ee1ca;
    outline-offset: 2px;
  }
}

.piano {
  margin: 6px 0;
  min-width: 0;
  border: 1px solid #53636d;
  background: #23303a;
}
.piano-tools {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 3px;
  font-size: 11px;
}
.piano-tools > span {
  margin-right: auto;
}
.piano-tools button,
.piano-tools select,
.piano-octave button {
  padding: 3px 5px;
  font-size: 11px;
}
.piano-tools input {
  width: 54px;
  padding: 3px;
}
.piano-row {
  display: flex;
  min-width: 0;
}
.piano-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  min-width: 0;
  height: 88px;
  touch-action: none;
}
.piano-keys {
  position: relative;
  height: 72px;
}
.piano-key {
  position: absolute;
  top: 0;
  border: 1px solid #53616a;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  color: #23303a;
  background: #b9c5cb;
  height: 72px;
  touch-action: none;
}
.piano-key.sharp {
  background: #596873;
  color: #e1e8ed;
  height: 43px;
  z-index: 1;
}
.piano-key span {
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  font: 11px monospace;
}
.piano-key.octave-key span {
  font-weight: bold;
  color: #07131b;
}
.piano-key[aria-pressed="true"] {
  background: #8ee1ca;
  color: #122029;
}
.piano-octave {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 45px;
  font: 11px monospace;
}
.piano-scroll:focus-visible {
  outline: 2px solid #8ee1ca;
  outline-offset: -2px;
}

.private-controller-mode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid #45616e;
  border-radius: 4px;
}
.private-controller-mode > p,
.private-controller-mode > fieldset {
  flex-basis: 100%;
  margin: 0;
}
.controller-name > small {
  display: block;
  color: #aec9d3;
}

.dock-view > .arena-chat {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.arena-chat .panel-title {
  margin-bottom: 0;
}
.chat-history {
  flex: 1;
  min-height: 80px;
  overflow: auto;
  overflow-anchor: none;
}
.chat-messages {
  list-style: none;
  padding: 0;
  margin: 0;
}
.chat-messages > li {
  padding: 10px 2px;
  border-bottom: 1px solid #334456;
}
.chat-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 12px;
}
.chat-byline time,
.chat-byline small {
  color: #aac0d0;
}
.chat-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 6px 0;
}
.chat-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.chat-actions button {
  padding: 3px 8px;
  font-size: 11px;
}
.arena-chat textarea {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  max-height: 160px;
  font: inherit;
}
.chat-compose label {
  display: block;
}
.chat-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.chat-compose-actions small {
  color: #aac0d0;
  font-size: 11px;
}
.chat-pending {
  padding: 8px;
  border: 1px solid #bc9553;
  max-height: 150px;
  overflow: auto;
}
.chat-latest {
  align-self: center;
}
.arena-chat textarea {
  color: #dce8ef;
  background: #101923;
  border: 1px solid #405463;
  border-radius: 4px;
  padding: 7px;
}

.help-slot {
  display: inline-flex;
  width: 28px;
  height: 28px;
  min-width: 28px;
  margin: 0 3px;
  vertical-align: middle;
}
button.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 4px;
  margin: 0;
  border: 0;
  background: transparent;
  color: #a7b7c7;
  vertical-align: middle;
  cursor: help;
}
.help-icon span,
.help-toggle span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
}
button.help-icon:hover,
button.help-icon:focus-visible {
  color: #e1f3ef;
  background: #263b4c;
}
button.help-icon:focus-visible,
button.help-toggle:focus-visible {
  outline: 2px solid #91c8e0;
  outline-offset: 2px;
}
footer .help-toggle {
  margin-left: auto;
  order: 1;
  white-space: nowrap;
}
.help-toggle[aria-pressed="true"] {
  color: #b8e3d6;
  border-color: #82bcaa;
}
.help-tooltip {
  position: fixed;
  inset: auto;
  margin: 0;
  box-sizing: border-box;
  width: max-content;
  max-width: min(360px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overflow: auto;
  padding: 10px 12px;
  background: #172633;
  color: #e2eaf0;
  border: 1px solid #637d90;
  border-radius: 6px;
  box-shadow: 0 4px 16px #0006;
  font:
    12px / 1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
.help-tooltip strong {
  display: block;
  margin-bottom: 4px;
}
@media (pointer: coarse) {
  .help-slot,
  button.help-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}

.save-status-bar {
  position: relative;
  gap: 10px;
}
.save-status-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.save-status-label[data-save-state="saved"] {
  color: #98d7b7;
}
.save-status-label[data-save-state="offline"],
.save-status-label[data-save-state="recovering"],
.save-status-label[data-save-state="access"],
.save-status-label[data-save-state="attention"] {
  color: #edc884;
}
.save-status-details {
  margin-left: auto;
}
.save-status-details summary {
  cursor: pointer;
  padding: 4px 8px;
}
.save-status-panel {
  position: absolute;
  z-index: 30;
  right: 12px;
  bottom: calc(100% + 4px);
  width: min(360px, calc(100vw - 24px));
  max-height: min(420px, 65vh);
  overflow: auto;
  overflow-wrap: anywhere;
  padding: 14px;
  background: #152434;
  border: 1px solid #586c80;
  border-radius: 6px;
  box-shadow: 0 6px 20px #0006;
}
.save-status-panel p {
  margin: 0 0 12px;
}
.save-status-panel dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
}
.save-status-panel dd {
  margin: 0;
}
.save-status-panel .status-error {
  color: #ffc4c4;
}
.workspace-shell > .save-status-bar {
  position: relative;
}
.workspace-shell > .playback-error {
  margin: 0;
  padding: 8px 24px;
}

.save-status-bar .help-toggle {
  margin-left: 0;
}

.layout-menu-panel {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(390px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overflow: auto;
  overflow-wrap: anywhere;
  padding: 12px;
  border: 1px solid #586c80;
  border-radius: 6px;
  background: #152434;
  color: #dce7ee;
  box-shadow: 0 6px 20px #0006;
}
.layout-menu-panel fieldset {
  min-width: 0;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid #405463;
}
.layout-menu-panel legend {
  max-width: 100%;
  font-size: 13px;
}
.layout-menu-panel form {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
  margin-top: 10px;
}
.layout-menu-panel label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 130px;
  font-size: 12px;
}
.layout-menu-panel select {
  min-width: 0;
  width: 100%;
}
.layout-actions,
.layout-reset {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.layout-reset {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #405463;
}
.layout-menu-panel button {
  padding: 5px 8px;
  font-size: 12px;
}

.pattern-actions-panel {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(390px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overflow: auto;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #597084;
  border-radius: 5px;
  background: #162735;
  color: #e4ecf3;
}
.pattern-actions-panel fieldset {
  min-width: 0;
  margin: 0 0 12px;
  border: 1px solid #405363;
  padding: 10px;
}
.pattern-actions-panel fieldset:last-child {
  margin-bottom: 0;
}
.pattern-actions-panel legend {
  overflow-wrap: anywhere;
  max-width: 100%;
}
.pattern-actions-panel label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pattern-actions-panel input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
.pattern-size-fields,
.pattern-copy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.pattern-size-fields > label {
  flex: 1 1 90px;
}
.pattern-actions-panel button {
  font-size: 12px;
}
.pattern-resize-warning {
  font-size: 12px;
  color: #f2c882;
}

.module-empty-search {
  margin: 12px 0;
  padding: 12px;
  border: 1px dashed #668080;
  border-radius: 4px;
}
.module-empty-search p {
  margin-top: 0;
  overflow-wrap: anywhere;
}
.module-selection {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  margin: 16px 0 12px;
  border: 1px solid #668080;
  border-radius: 4px;
  background: #263e43;
  overflow-wrap: anywhere;
}
.module-selection > span {
  font-size: 12px;
}
.module-operation-preview {
  overflow-wrap: anywhere;
}
.module-browser .graph-toolbar {
  flex-wrap: wrap;
}
.module-browser .graph-toolbar label {
  min-width: 0;
}
.module-browser input:not([type="checkbox"]),
.module-browser select {
  max-width: 100%;
  box-sizing: border-box;
}

.module-browser .file-button {
  position: relative;
}
.module-browser .file-button input {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.module-browser .file-button:focus-within {
  outline: 2px solid #8ee1ca;
  outline-offset: 2px;
}

.project-exports .export-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0;
}
.project-exports .export-choice {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #45545d;
  border-radius: 6px;
  overflow-wrap: anywhere;
}
.project-exports .export-choice p {
  margin-bottom: 0;
}
.project-exports a[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}
.project-exports .export-advanced summary {
  cursor: pointer;
}

.project-sharing .access-link {
  margin: 12px 0;
  min-width: 0;
}
.project-sharing .access-link p {
  margin: 6px 0;
}
.project-sharing .access-link input {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.project-sharing .owner-access > summary {
  cursor: pointer;
}

.welcome .welcome-primary {
  background: #8ee1ca;
  color: #14272b;
  font-weight: 700;
  padding: 12px 20px;
}
.welcome-import {
  margin: 16px 0 24px;
}
.welcome-import .file-button {
  position: relative;
}
.welcome-import .file-button input {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.welcome-import .file-button:focus-within {
  outline: 2px solid #8ee1ca;
  outline-offset: 2px;
}
.welcome .welcome-help {
  left: 0;
  margin: 0;
  padding: 10px 28px;
}

.sample-loader section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #42556b;
}
.sample-loader h3 {
  margin: 0 0 12px;
  font-size: 14px;
}
.sample-tuning label,
.sample-loader > label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 12px 0;
}
.sample-tuning > button {
  margin: 0 8px 12px 0;
}
.sample-preview > button {
  margin: 0 8px 12px 0;
}
.sample-shared strong {
  overflow-wrap: anywhere;
}
.sample-filename {
  overflow-wrap: anywhere;
}

.icon-painter {
  margin: 16px 0;
}
.icon-paint-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.icon-paint-tools button[aria-pressed="true"] {
  border-color: #8ee1ca;
  box-shadow: inset 0 -3px #8ee1ca;
}
.icon-paint-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  width: min(384px, 100%);
  aspect-ratio: 1;
  touch-action: none;
  user-select: none;
  margin-bottom: 12px;
}
.icon-paint-grid button {
  border-radius: 0;
  min-width: 0;
  padding: 0;
  border: 1px solid #80808080;
}
.icon-paint-grid button:focus {
  position: relative;
  z-index: 1;
  outline: 2px solid #8ee1ca;
  outline-offset: 1px;
  box-shadow: inset 0 0 0 2px #16222e;
}
.appearance-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #808080;
  overflow-wrap: anywhere;
}
.appearance-preview svg {
  flex-shrink: 0;
}
.appearance-editor h2 {
  overflow-wrap: anywhere;
}
.icon-paint-tools,
.icon-paint-grid {
  border: 0;
  padding: 0;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}
.appearance-preview {
  margin: 12px 0;
}
.multictl-mappings {
  margin: 8px 0;
  min-width: 0;
}
.multictl-mappings fieldset {
  min-width: 0;
  margin: 6px 0;
  padding: 6px;
}
.multictl-mappings select {
  display: block;
  width: 100%;
  min-width: 0;
}
.multictl-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 6px 0;
}
.multictl-fields input {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.waveshaper-editor {
  margin: 12px 0;
  min-width: 0;
}
.curve-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.waveshaper-editor canvas {
  display: block;
  width: 100%;
  height: 180px;
  touch-action: none;
  cursor: crosshair;
  border: 1px solid #476575;
}
.waveshaper-editor canvas:focus {
  outline: 2px solid #ffe09c;
  outline-offset: 2px;
}
.curve-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-top: 4px;
}

.module-options {
  margin: 0.75rem 0;
}
.module-options summary {
  cursor: pointer;
  padding: 0.4rem 0;
}
.module-options fieldset {
  display: grid;
  gap: 0.6rem;
}
.module-options label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.module-options small {
  color: var(--muted);
}

.sampler-map-bed {
  min-width: 0;
  padding: 0;
  border: 0;
  display: flex;
  overflow-x: auto;
  max-width: 100%;
  touch-action: none;
  user-select: none;
  margin: 8px 0;
}
.sampler-map-bed > button {
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  height: 64px;
  padding: 6px 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: #253344;
}
.sampler-map-bed > button.black-note {
  background: #141c27;
}
.sampler-map-bed > button[aria-pressed="true"] {
  background: #256351;
  box-shadow: inset 0 -3px #8ee1ca;
}
.sampler-map-range label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sampler-map-range input {
  width: 64px;
}