:root {
  --bg: #080a0d;
  --bg-soft: #0d1116;
  --panel: #151a20;
  --panel-hi: #1c232b;
  --panel-lo: #0f1318;
  --edge: #303a45;
  --edge-soft: #232b34;
  --text: #eef3f7;
  --muted: #8e9aa7;
  --green: #a8ff60;
  --cyan: #58d7ff;
  --amber: #ffc45c;
  --red: #ff6f78;
  --shadow: rgba(0,0,0,.46);
  --glow-green: rgba(168,255,96,.22);
  --glow-cyan: rgba(88,215,255,.2);
  --radius: 14px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 0%, rgba(88,215,255,.07), transparent 30rem),
    radial-gradient(circle at 90% 5%, rgba(168,255,96,.055), transparent 34rem),
    linear-gradient(180deg, #07090b 0%, #0b0f13 55%, #090c10 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .11;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: screen;
}

button, input, select { font: inherit; }
button, select, input { accent-color: var(--green); }

.app-shell {
  width: min(1540px, calc(100% - 24px));
  margin: 0 auto;
  padding: 18px 0 104px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 6px 2px 14px;
}

.topbar h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -.05em;
  line-height: .95;
}

.topbar h1::after {
  content: " / RHYTHM SYNTH";
  color: var(--green);
  font-size: .33em;
  letter-spacing: .18em;
  vertical-align: middle;
  margin-left: 10px;
}

.topbar p, .section-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

.transport {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


.home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  color: var(--text);
  background: var(--panel-lo);
  text-decoration: none;
  font-weight: 750;
  white-space: nowrap;
}
.home-link:hover,
.home-link:focus-visible {
  border-color: var(--green);
  color: var(--green);
  outline: none;
}

.floating-transport {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 1000;
  display: flex;
  gap: 10px;
  padding: 10px;
  border: 1px solid #43505d;
  border-radius: 14px;
  background: rgba(12, 16, 21, .94);
  box-shadow: 0 14px 36px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
}

.floating-transport button {
  min-width: 92px;
  min-height: 48px;
  font-weight: 800;
  letter-spacing: .02em;
}

.floating-transport .transport-play {
  color: #eaffda;
  border-color: #658f43;
  background: linear-gradient(180deg, #314826, #1d2b18);
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 0 20px var(--glow-green);
}

.floating-transport .transport-stop {
  color: #ffe8e9;
  border-color: #7a4147;
  background: linear-gradient(180deg, #4b292d, #2b191c);
}

button {
  position: relative;
  border: 1px solid #394550;
  border-radius: 9px;
  padding: 9px 14px;
  color: var(--text);
  background: linear-gradient(180deg, #252d35, #171c22);
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 4px 12px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

button:hover {
  border-color: #6b7d8f;
  transform: translateY(-1px);
}

button:active { transform: translateY(1px); }

button.primary {
  color: #eaffda;
  border-color: #658f43;
  background: linear-gradient(180deg, #314826, #1d2b18);
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 0 20px var(--glow-green);
}

.panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 15px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), transparent 24%),
    linear-gradient(145deg, rgba(26,32,39,.98), rgba(15,19,24,.98));
  box-shadow: 0 12px 30px var(--shadow), inset 0 1px rgba(255,255,255,.025);
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  pointer-events: none;
}

.clock-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 13px;
}

.clock-strip label, .master-controls label, .osc-card label, .seq-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#clockReadout {
  align-self: center;
  justify-self: end;
  color: var(--green);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-shadow: 0 0 14px var(--glow-green);
  white-space: nowrap;
}

input[type="number"], select {
  width: 100%;
  min-height: 38px;
  color: var(--text);
  background: #0c1116;
  border: 1px solid #35404b;
  border-radius: 8px;
  padding: 8px 10px;
  outline: none;
}

input[type="number"]:focus, select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(88,215,255,.11);
}

input[type="range"] {
  width: 100%;
  height: 22px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid #303b45;
  border-radius: 999px;
  background: linear-gradient(90deg, #26313a, #10151a);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.8);
}
input[type="range"]::-moz-range-track {
  height: 5px;
  border: 1px solid #303b45;
  border-radius: 999px;
  background: linear-gradient(90deg, #26313a, #10151a);
}
input[type="range"]::-webkit-slider-thumb {
  width: 17px;
  height: 17px;
  margin-top: -7px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
  border: 2px solid #101418;
  background: var(--green);
  box-shadow: 0 0 0 1px #7dbe4b, 0 0 12px rgba(168,255,96,.3);
}
input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #101418;
  background: var(--green);
  box-shadow: 0 0 0 1px #7dbe4b, 0 0 12px rgba(168,255,96,.3);
}

.mode-tabs {
  display: inline-flex;
  gap: 3px;
  margin: 0 0 14px;
  padding: 4px;
  border: 1px solid #2b343e;
  border-radius: 11px;
  background: #0e1217;
}
.mode-tabs .tab {
  min-width: 112px;
  border-color: transparent;
  box-shadow: none;
  background: transparent;
}
.mode-tabs .tab.active {
  color: #edffdf;
  border-color: #5f8840;
  background: linear-gradient(180deg, #2c4122, #1a2816);
  box-shadow: 0 0 14px rgba(168,255,96,.1);
}

.workspace { display: none; }
.workspace.active { display: grid; gap: 14px; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.section-head.compact { align-items: center; }
.section-head h2 { margin: 0; font-size: 17px; letter-spacing: -.015em; }

.tables-panel { border-top-color: rgba(168,255,96,.6); }
.table-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(74px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.table-btn {
  min-height: 48px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  letter-spacing: .05em;
}
.table-btn::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #56616b;
  box-shadow: 0 0 0 1px #101418;
}
.table-btn.active {
  color: #edffdf;
  border-color: #70a54a;
  background: linear-gradient(180deg, #2c4023, #192516);
  box-shadow: 0 0 0 1px rgba(168,255,96,.08), 0 0 18px rgba(168,255,96,.09);
}
.table-btn.active::before { background: var(--green); box-shadow: 0 0 10px var(--green); }
.table-btn.modified::after {
  content: "MOD";
  position: absolute;
  top: 3px;
  right: 5px;
  padding: 1px 4px;
  border-radius: 999px;
  color: #231500;
  background: var(--amber);
  font-size: 8px;
  font-weight: 900;
}
.hint { margin-top: 10px; color: var(--amber); }
.hidden { display: none; }

.master-controls {
  display: grid;
  grid-template-columns: minmax(150px,.7fr) 1fr 2fr;
  gap: 18px;
  align-items: end;
}
.master-controls label span { color: var(--green); font-family: ui-monospace, monospace; }
.tone-chain-note { margin: 8px 0 0; color: var(--muted); font-size: 11px; }

.osc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.osc-card { min-width: 0; border-top-color: rgba(88,215,255,.45); }
.osc-title { color: #e9faff; }
.row4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.mute-label {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 7px !important;
  color: var(--text) !important;
}
.mute-label input { width: 17px; height: 17px; }

.pm-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  margin: 10px 0;
}
.pm-row {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr 1fr;
  gap: 8px;
  align-items: end;
  padding: 9px;
  border: 1px solid #29343e;
  border-radius: 9px;
  background: linear-gradient(145deg, #10161b, #0a0e12);
}
.pm-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--cyan);
  opacity: .7;
}
.pm-row strong { align-self: center; color: var(--cyan); font-family: ui-monospace, monospace; }
.pm-row label { font-size: 10px; }

.osc-canvas, .visual-panel canvas {
  display: block;
  width: 100%;
  border: 1px solid #2b3741;
  border-radius: 10px;
  background:
    linear-gradient(rgba(88,215,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88,215,255,.025) 1px, transparent 1px),
    #070b0e;
  background-size: 22px 22px;
  box-shadow: inset 0 0 28px rgba(0,0,0,.55);
}
.osc-canvas { cursor: crosshair; }
.osc-readout, .readout {
  margin-top: 8px;
  color: var(--muted);
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.readout { margin: 0; color: var(--cyan); }
.visual-panel { border-top-color: rgba(168,255,96,.5); }
.visual-panel canvas { cursor: ew-resize; }

.seq-toolbar {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.seq-toolbar label { min-width: 160px; }

.seq-help {
  margin-top: 10px;
  color: var(--muted);
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.file-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.seq-header {
  position: sticky;
  top: 0;
  z-index: 4;
  margin-bottom: 2px;
}
.seq-corner {
  z-index: 6;
  color: var(--cyan);
}
.step-head {
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid #2a3540;
  border-radius: 4px;
  color: #7f8d99;
  background: #121820;
  font: 9px/1 ui-monospace, monospace;
}
.step-head:nth-child(5n) { color: #b8c4ce; }
.seq-cell.block-start, .step-head.block-start {
  border-left: 2px solid var(--amber);
}
.seq-cell.active::before {
  content: "G" attr(data-gate);
  position: absolute;
  left: 3px;
  top: 2px;
  color: #b9d5a1;
  font: 7px/1 ui-monospace, monospace;
  opacity: .78;
}
.seq-cell.loop-end {
  border-right: 3px solid var(--amber);
  box-shadow: inset -4px 0 0 rgba(255,196,92,.12), inset 0 0 10px rgba(168,255,96,.08);
}
.seq-cell.loop-end::after {
  color: var(--amber);
}
.sequencer-wrap { overflow: auto; scrollbar-color: #42515f #11161b; }
.sequencer { min-width: 1100px; display: grid; gap: 2px; user-select: none; }
.seq-row {
  display: grid;
  grid-template-columns: 70px repeat(var(--steps), minmax(44px,1fr));
  gap: 2px;
}
.note-label {
  position: sticky;
  left: 0;
  z-index: 2;
  padding: 6px;
  border: 1px solid #2e3944;
  border-radius: 4px;
  color: #b6c1cb;
  background: #151b21;
  font: 10px/1.2 ui-monospace, monospace;
}
.seq-cell {
  position: relative;
  height: 27px;
  border: 1px solid #222c35;
  border-radius: 4px;
  background: #0b1014;
  cursor: pointer;
  transition: border-color .08s ease, background .08s ease, box-shadow .08s ease;
}
.seq-cell:nth-child(5n) { border-right-color: #3a4651; }
.seq-cell:hover { border-color: #65798a; background: #111920; }
.seq-cell.active {
  border-color: #7eb34f;
  background: linear-gradient(180deg, #40592b, #26381e);
  box-shadow: inset 0 0 10px rgba(168,255,96,.08);
}
.seq-cell.playing {
  z-index: 1;
  outline: 2px solid var(--cyan);
  box-shadow: 0 0 14px var(--glow-cyan);
}
.seq-cell[data-table]::after { content: none; }
.seq-table-layer {
  position: absolute;
  right: calc(3px + (var(--layer) * 3px));
  bottom: calc(2px + (var(--layer) * 2px));
  z-index: calc(3 + var(--layer));
  min-width: 16px;
  padding: 1px 3px;
  border: 1px solid #42515f;
  border-radius: 3px;
  background: #172029;
  color: #aebbc6;
  font: 7px/1.1 ui-monospace, monospace;
  text-align: center;
  pointer-events: none;
}
.seq-table-layer.current {
  z-index: 30;
  border-color: #a8ff60;
  background: #2a3c20;
  color: #f0ffe5;
  font-weight: 700;
}
.seq-c0 { border-top-color: #586a7a; }

@media (max-width: 1180px) {
  .clock-strip { grid-template-columns: repeat(3, 1fr); }
  #clockReadout { justify-self: start; }
  .osc-grid { grid-template-columns: 1fr; }
  .osc-card .osc-canvas { max-height: 260px; }
  .table-grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 760px) {
  .app-shell { width: min(100% - 14px, 1540px); padding-top: 8px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .topbar h1::after { display: block; margin: 8px 0 0 2px; }
  .transport { width: 100%; }
  .transport button { flex: 1; }
  .clock-strip { grid-template-columns: 1fr 1fr; }
  .master-controls { grid-template-columns: 1fr; }
  .row4, .pm-list { grid-template-columns: 1fr 1fr; }
  .mode-tabs { display: flex; width: 100%; }
  .mode-tabs .tab { flex: 1; }
}

@media (max-width: 470px) {
  .row4, .pm-list, .clock-strip { grid-template-columns: 1fr; }
  .table-grid { grid-template-columns: repeat(3,1fr); }
  .panel { padding: 12px; }
  .section-head { flex-direction: column; }
}


.share-panel{margin-bottom:14px}.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.share-grid>div{display:grid;gap:4px;padding:10px;border:1px solid var(--line,#2e3944);border-radius:8px;background:#10161b}.share-grid strong{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#8fa0ae}.share-grid span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}.share-link-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}.share-link-row input{min-width:0;background:#0b1014;border:1px solid #2e3944;border-radius:7px;color:#dce8f2;padding:10px;font:12px ui-monospace,monospace}.share-link-row button{min-width:84px}@media(max-width:700px){.share-grid{grid-template-columns:1fr}.share-link-row{grid-template-columns:1fr}}

.share-protect-row{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:12px 0}.share-protect-row label{min-width:240px;flex:1}.share-protect-row input{width:100%}.share-locked .workspace{opacity:.72}.share-locked .workspace::before{content:'Shared Tickster — play only. Unlock with the edit password to change it.';display:block;margin:0 0 12px;padding:10px 12px;border:1px solid var(--border,#33404b);border-radius:8px;font-weight:700}.hidden{display:none!important}

/* Musical timing markers: Time A/B now drive actual measure/beat boundaries. */
.step-head.beat-start,
.seq-cell.beat-start { border-left-width: 2px; border-left-color: color-mix(in srgb, var(--accent, #72d7ff) 42%, transparent); }
.step-head.measure-start,
.seq-cell.measure-start { border-left-width: 3px; border-left-color: var(--accent, #72d7ff); }
.step-head.measure-start { font-weight: 800; }

/* Per-table master power */
.table-slot {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}
.table-slot .table-btn { width: 100%; }
.table-power {
  min-height: 28px;
  padding: 4px 8px;
  font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
  border-radius: 6px;
}
.table-power.on {
  color: #dfffd0;
  border-color: #5e8b42;
  background: #1b2a16;
}
.table-power.off {
  color: #a5adb4;
  border-color: #444c53;
  background: #171b1f;
}
.table-slot.table-off .table-btn {
  opacity: .48;
  filter: saturate(.25);
}
.table-slot.table-off .table-btn::before {
  background: #3d454c;
  box-shadow: none;
}
@media (max-width: 900px) {
  .table-grid { grid-template-columns: repeat(3, minmax(82px, 1fr)); }
}

@media (max-width: 560px) {
  .floating-transport {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    gap: 7px;
    padding: 8px;
  }
  .floating-transport button {
    min-width: 72px;
    min-height: 46px;
    padding: 8px 11px;
  }
  .floating-transport button span { display: none; }
}

/* --- Layout polish pass: CSS-only --- */
html, body { overflow-x: hidden; }

.app-shell,
.workspace,
.panel,
.tables-panel,
.visual-panel,
.osc-card,
.share-panel,
.sequencer-wrap {
  min-width: 0;
}

.panel {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.section-head,
.topbar,
.clock-strip,
.master-controls,
.osc-grid,
.row4,
.pm-list,
.seq-toolbar,
.file-toolbar,
.share-protect-row,
.share-link-row {
  min-width: 0;
}

.section-head > *,
.topbar > *,
.clock-strip > *,
.master-controls > *,
.osc-grid > *,
.row4 > *,
.pm-list > *,
.seq-toolbar > *,
.file-toolbar > *,
.share-protect-row > *,
.share-link-row > * {
  min-width: 0;
  max-width: 100%;
}

label,
input,
select,
button,
canvas {
  max-width: 100%;
}

input[type="number"],
input[type="text"],
input[type="password"],
select {
  min-width: 0;
}

.table-grid {
  align-items: stretch;
}

.table-slot {
  min-width: 0;
  height: 100%;
}

.table-slot .table-btn,
.table-slot .table-power {
  width: 100%;
}

.osc-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.osc-card .row4,
.osc-card .pm-list,
.osc-card .osc-canvas {
  width: 100%;
}

.pm-row {
  min-width: 0;
  overflow: hidden;
}

.pm-row label,
.pm-row input {
  min-width: 0;
}

.sequencer-wrap {
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  overscroll-behavior-x: contain;
}

.sequencer {
  width: max-content;
  min-width: 100%;
}

/* Floating transport: vertical stack, Play above Stop. */
.floating-transport {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: max-content;
  min-width: 108px;
}

.floating-transport button {
  width: 100%;
  min-width: 96px;
}

.floating-transport .transport-play { order: 1; }
.floating-transport .transport-pause { order: 2; }
.floating-transport .transport-stop { order: 3; }

/* Ready for a real Pause control when it is added in HTML/JS. */
.floating-transport .transport-pause {
  color: #fff5d8;
  border-color: #7a6738;
  background: linear-gradient(180deg, #4b4027, #2a2418);
}

@media (max-width: 1180px) {
  .clock-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .app-shell {
    width: calc(100% - 14px);
  }

  .clock-strip,
  .row4,
  .pm-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seq-toolbar label,
  .share-protect-row label {
    min-width: min(100%, 180px);
    flex: 1 1 180px;
  }
}

@media (max-width: 470px) {
  .clock-strip,
  .row4,
  .pm-list,
  .share-grid,
  .share-link-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .floating-transport {
    min-width: 78px;
  }

  .floating-transport button {
    min-width: 70px;
  }
}


/* Dupe options */
.dupe-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:flex-end}
.dupe-seq-option{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;font-size:.9rem}
.dupe-seq-option input{width:auto;min-width:0;accent-color:var(--accent,#9fd66f)}
@media (max-width:640px){.dupe-actions{width:100%;justify-content:space-between}.dupe-seq-option{white-space:normal}}

/* Tied sequencer cells: Shift-click adjacent active cells of the same note/table. */
.seq-cell.tied-from-prev,
.seq-cell.tied-to-next {
  overflow: visible;
}
.seq-cell.tied-from-prev::marker,
.seq-cell.tied-to-next::marker { content: none; }
.seq-cell.tied-from-prev { border-left-color: transparent !important; }
.seq-cell.tied-to-next { border-right-color: transparent !important; }
.seq-cell.tied-from-prev::before,
.seq-cell.tied-to-next::before {
  box-shadow: none;
}
.seq-cell.tied-from-prev::after,
.seq-cell.tied-to-next::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 4px;
  background: var(--accent, #72d7ff);
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
.seq-cell.tied-from-prev::after { left: -50%; right: 50%; }
.seq-cell.tied-to-next::after { left: 50%; right: -50%; }
.seq-cell.tied-from-prev.tied-to-next::after { left: -50%; right: -50%; }
.seq-cell.tied-from-prev .seq-table-layer.current,
.seq-cell.tied-to-next .seq-table-layer.current {
  outline: 1px solid var(--accent, #72d7ff);
}

/* Floating donation control: bottom-left, balanced against transport dock. */
.donate-fab {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(22,22,26,.94);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.donate-fab:hover { transform: translateY(-1px); }
.donate-fab:active { transform: translateY(0); }
.donate-fab:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 640px) {
  .donate-fab {
    left: 12px;
    bottom: 12px;
    width: 46px;
    min-width: 46px;
    padding: 0;
    border-radius: 50%;
  }
  .donate-fab span { display: none; }
}

/* Front-page JSON import button */
#frontUploadJson {
  white-space: nowrap;
}
@media (max-width: 720px) {
  #frontUploadJson {
    flex: 1 1 140px;
  }
}

/* Floating workspace + file docks */
.floating-mode-dock,
.floating-file-dock {
  position: fixed;
  z-index: 1180;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(18,18,22,.94);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: min(180px, calc(100vw - 24px));
}

.floating-mode-dock {
  left: 18px;
  bottom: 82px; /* clears Donate */
}

.floating-file-dock {
  right: 18px;
  bottom: 150px; /* clears Play/Stop transport */
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

.floating-mode-dock button,
.floating-file-dock button,
.floating-file-dock .home-link {
  width: 100%;
  min-height: 42px;
  margin: 0;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center;
}

.floating-mode-dock .tab {
  min-width: 112px;
}

.floating-file-dock .home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  text-decoration: none;
}

/* Old in-flow toolbars no longer consume layout space. */
.mode-tabs,
.file-toolbar {
  margin: 0;
}

/* Keep page content clear of side docks on wide screens. */
@media (min-width: 1180px) {
  .app-shell {
    padding-left: 152px;
    padding-right: 190px;
  }
}

@media (max-width: 1179px) {
  .floating-mode-dock {
    left: 12px;
    bottom: 72px;
  }
  .floating-file-dock {
    right: 12px;
    bottom: 138px;
  }
}

@media (max-width: 720px) {
  .floating-mode-dock,
  .floating-file-dock {
    padding: 7px;
    gap: 6px;
    border-radius: 13px;
  }
  .floating-mode-dock .tab {
    min-width: 88px;
  }
  .floating-mode-dock button,
  .floating-file-dock button,
  .floating-file-dock .home-link {
    min-height: 38px;
    font-size: .78rem;
    padding-left: 8px;
    padding-right: 8px;
  }
  .floating-file-dock {
    max-width: 132px;
    max-height: calc(100vh - 156px);
  }
}

@media (max-width: 470px) {
  .floating-mode-dock {
    left: 8px;
    bottom: 66px;
  }
  .floating-file-dock {
    right: 8px;
    bottom: 132px;
    max-width: 118px;
  }
}

/* Scene arranger */
.scene-builder{display:grid;gap:.65rem;margin:.5rem 0 .8rem;min-width:0}
.scene-add-buttons{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.scene-add-buttons>span{font-weight:700;color:var(--muted,#9caab5)}
.scene-add-buttons strong{margin-left:auto;font-size:.85rem;color:var(--muted,#9caab5)}
.scene-arranger{display:flex;gap:.55rem;overflow-x:auto;padding:.45rem .1rem .65rem;min-height:76px;scrollbar-color:#42515f #11161b}
.scene-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:'grip title actions' 'grip len actions' 'grip range actions';align-items:center;column-gap:.55rem;min-width:150px;padding:.65rem .7rem;border:1px solid var(--border,#33414c);border-radius:10px;background:var(--card,#151c22);cursor:grab;user-select:none}
.scene-card:active{cursor:grabbing}.scene-card.dragging{opacity:.45}.scene-card.drag-over{outline:2px solid var(--accent,#72d7ff);outline-offset:2px}
.scene-grip{grid-area:grip;font-size:1.3rem;letter-spacing:-.25rem;color:var(--muted,#8495a2)}
.scene-card strong{grid-area:title}.scene-card>span:not(.scene-grip){grid-area:len;font-size:.84rem;color:var(--muted,#9caab5)}.scene-card small{grid-area:range;color:var(--muted,#7d8b95)}
.scene-actions{grid-area:actions;display:flex;gap:.35rem;align-items:center}.scene-actions button{width:30px;min-width:30px;height:30px;padding:0;border-radius:50%}.scene-duplicate{font-size:1rem}.scene-remove{font-size:1.1rem}
.step-head.scene-start,.seq-cell.scene-start{box-shadow:inset 3px 0 0 var(--accent,#72d7ff)}
@media(max-width:640px){.scene-card{min-width:130px}.scene-add-buttons strong{width:100%;margin-left:0}}

.scene-card.selected{border-color:var(--accent,#72d7ff);box-shadow:inset 0 0 0 1px var(--accent,#72d7ff);background:color-mix(in srgb,var(--card,#151c22) 82%,var(--accent,#72d7ff) 18%)}
.scene-card.selected strong::after{content:' · editing';font-size:.72em;font-weight:700;color:var(--accent,#72d7ff)}


/* Streaming Live */
.streaming-live-toggle{display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.55rem .7rem;border:1px solid var(--border,#33414c);border-radius:10px;background:rgba(255,255,255,.025)}
.streaming-live-toggle input{width:18px;height:18px;accent-color:#a8ff60}
.live-sync-status{align-self:center;min-width:8rem;font-size:.82rem;color:#91a0ac}
.live-sync-status.live{color:#a8ff60}
.live-sync-status.syncing{color:#57c7ff}
.live-sync-status.error{color:#ff8b8b}

.live-link-wrap{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:8px;align-items:center;flex:1 1 100%;min-width:0;margin-top:8px}.live-link-wrap input{min-width:0;width:100%}.live-open-link{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 12px;border:1px solid var(--line,#3a4650);border-radius:8px;text-decoration:none;color:inherit;background:rgba(255,255,255,.04)}@media(max-width:720px){.live-link-wrap{grid-template-columns:1fr 1fr}.live-link-wrap input{grid-column:1/-1}}

/* Tickster studio finish — compact controls, quiet surfaces, clear hierarchy. */
:root {
  --bg: #0b0f14;
  --panel: #141c25;
  --panel-lo: #101720;
  --edge: #2b3745;
  --edge-soft: #22303e;
  --text: #e8eef5;
  --muted: #98a8ba;
  --green: #b2e681;
  --cyan: #78c9e6;
  --radius: 12px;
  --shadow: rgba(0,0,0,.2);
}
body { display: flex; flex-direction: column; background: radial-gradient(ellipse at 30% 0%, #1b2934 0, transparent 65%), #0b0f14; font-size: 13px; line-height: 1.45; }
body::before { display: none; }
.app-shell { order: 1; width: min(1480px, calc(100% - 40px)); padding: 24px 0 112px; }
.topbar { padding: 0 0 20px; gap: 16px; }
.topbar h1 { font-size: clamp(30px, 4vw, 40px); letter-spacing: -.055em; line-height: 1.1; }
.topbar h1::after { color: var(--muted); font-size: .25em; letter-spacing: .16em; margin-left: 8px; }
.topbar p { font-size: 12px; margin-top: 5px; }
.panel { padding: 16px; background: linear-gradient(150deg, #17212b, #111923); box-shadow: 0 4px 16px var(--shadow); }
.panel::before { background: linear-gradient(90deg, transparent, #ffffff0b, transparent); }
.workspace.active { gap: 12px; }
.section-head { gap: 12px; margin-bottom: 12px; align-items: center; }
.section-head h2 { font-size: 15px; font-weight: 650; letter-spacing: -.02em; }
.section-head p { font-size: 11px; line-height: 1.5; max-width: 75ch; margin-top: 4px; }
button, .home-link, .live-open-link { border-color: var(--edge); background: #1c2834; box-shadow: inset 0 1px #ffffff06; border-radius: 7px; font-size: 12px; font-weight: 600; padding: 8px 12px; min-height: 36px; }
button:hover { background: #263646; border-color: #536c81; transform: none; box-shadow: none; }
button:active { background: #111b25; transform: none; }
button.primary { background: var(--green); border-color: var(--green); color: #15220c; box-shadow: none; }
button.primary:hover { background: #c4f29c; }
button:disabled { opacity: .4; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
input[type="number"], input[type="text"], input[type="password"], select { background: #0d151e; color: var(--text); border: 1px solid var(--edge); border-radius: 7px; padding: 8px 10px; min-height: 36px; font-size: 12px; }
input[type="range"] { height: 24px; }
input[type="range"]::-webkit-slider-thumb { box-shadow: none; }
input[type="range"]::-moz-range-thumb { box-shadow: none; }
.clock-strip { grid-template-columns: repeat(4,minmax(80px,1fr)) auto minmax(100px,1.4fr) auto; gap: 14px; margin-bottom: 12px; }
.clock-strip label, .master-controls label, .osc-card label, .seq-toolbar label, .share-protect-row > label:not(.streaming-live-toggle) { display: grid; gap: 6px; font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .065em; text-transform: uppercase; }
.clock-strip .metronome-toggle { display: flex; align-items: center; gap: 8px; min-height: 36px; }
#clockReadout { font-size: 11px; text-shadow: none; }
.share-panel { margin-bottom: 16px; }
.share-grid { gap: 8px; }
.share-grid > div { padding: 9px 12px; background: #0d151e; border-color: var(--edge-soft); }
.share-grid strong { font-size: 9px; letter-spacing: .12em; }
.share-grid span { font-size: 11px; }
.share-protect-row { gap: 10px; margin: 12px 0; }
.share-protect-row > label { min-width: 180px; }
.share-protect-row .streaming-live-toggle { flex: 0 0 auto; min-width: 0; min-height: 36px; font-size: 11px; padding: 8px 12px; border-color: var(--edge); }
.share-protect-row input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 16px; }
.live-sync-status { min-width: 0; flex: 1 1 120px; overflow-wrap: anywhere; font-size: 11px; }
.share-link-row { grid-template-columns: minmax(0,1fr) auto auto; }
.hint { font-size: 11px; color: var(--muted); line-height: 1.5; }
.table-grid { gap: 6px; }
.table-btn { min-height: 36px; font-size: 11px; }
.table-btn.active { background: #283723; border-color: #729554; box-shadow: inset 0 0 0 1px #b2e68112; }
.table-btn.active::before { box-shadow: none; }
.tables-panel, .visual-panel { border-top-color: #496540; }
.osc-card { border-top-color: #466b7b; }
.osc-grid { gap: 12px; }
.osc-card .section-head { padding-bottom: 12px; border-bottom: 1px solid var(--edge-soft); }
.row4 { gap: 10px; margin-bottom: 12px; }
.pm-row { padding: 8px; background: #0e1720; border-color: var(--edge-soft); gap: 8px; }
.osc-canvas, .visual-panel canvas { border-color: var(--edge-soft); border-radius: 8px; box-shadow: none; }
.osc-readout, .readout, .seq-help { font-size: 10px; color: var(--muted); line-height: 1.5; }
.scene-card { background: #101a24; border-color: var(--edge); box-shadow: none; }
.floating-file-dock { order: 0; position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; max-width: none; max-height: none; border: 0; border-bottom: 1px solid var(--edge-soft); border-radius: 0; padding: 10px 20px; gap: 6px; background: #0d141ddd; box-shadow: none; }
.floating-file-dock button, .floating-file-dock .home-link { width: auto; min-height: 32px; font-size: 11px; padding: 6px 10px; }
.floating-mode-dock { left: 50%; bottom: 18px; transform: translateX(-50%); flex-direction: row; gap: 4px; padding: 6px; border-radius: 12px; background: #111c28eF; }
.floating-mode-dock .tab { min-width: 90px; width: auto; min-height: 36px; }
.floating-mode-dock .tab.active { color: var(--green); background: #283723; border-color: #587848; }
.floating-transport { padding: 6px; gap: 5px; border-radius: 12px; border-color: var(--edge); }
.floating-transport button { min-width: 70px; min-height: 36px; font-size: 11px; }
.floating-transport .transport-play { box-shadow: none; background: #283723; border-color: #587848; }
.floating-transport .transport-stop { background: #32242b; border-color: #6d4852; }
.donate-fab { box-shadow: none; font-size: 11px; }
@media(max-width:1100px) {
  .clock-strip { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .clock-strip label:nth-last-of-type(1) { grid-column: span 2; }
  #clockReadout { justify-self: end; }
}
@media(max-width:760px) {
  .app-shell { width: calc(100% - 24px); padding: 18px 0 128px; }
  .panel { padding: 12px; }
  .osc-grid { grid-template-columns: 1fr; }
  .section-head { align-items: flex-start; flex-wrap: wrap; }
  .topbar h1::after { display: none; }
  .floating-file-dock { padding: 8px 12px; justify-content: flex-start; }
  .floating-file-dock button, .floating-file-dock .home-link { flex: 1 1 auto; min-height: 36px; }
  .share-protect-row > label:not(.streaming-live-toggle) { flex: 1 1 100%; }
  .share-grid { grid-template-columns: 1fr; }
  .floating-mode-dock { bottom: 66px; }
  .floating-transport { bottom: 12px; right: 12px; }
  .live-link-wrap { grid-template-columns: 1fr 1fr; }
  .live-link-wrap input { grid-column: 1/-1; }
}
@media(max-width:470px) {
  .clock-strip { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .clock-strip label:nth-last-of-type(1) { grid-column: auto; }
  #clockReadout { grid-column: 1/-1; justify-self: start; }
  .share-link-row { grid-template-columns: 1fr 1fr; }
  .share-link-row input { grid-column: 1/-1; }
  .topbar { gap: 10px; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

#usernameHint { text-transform: none; letter-spacing: 0; font-size: 10px; font-weight: 400; color: var(--muted); }
#artistUsername:disabled { opacity: .6; }

.artist-profile-editor{display:grid;gap:8px;margin:14px 0;padding-top:14px;border-top:1px solid var(--edge-soft)}.artist-profile-editor>label{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.065em}.artist-profile-editor textarea{width:100%;min-height:78px;max-height:220px;resize:vertical;background:#0d151e;border:1px solid var(--edge);border-radius:7px;padding:10px;color:var(--text);font:inherit;font-size:12px}.artist-profile-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.artist-profile-actions span{color:var(--muted);font-size:11px}.artist-profile-editor textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

#artistDonationUrl { width: 100%; min-width: 0; background: #0d151e; border: 1px solid var(--edge); border-radius: 7px; padding: 10px; color: var(--text); font: inherit; font-size: 12px; }

/* Artist profile: a distinct, responsive editing panel. */
#artistProfilePanel {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.7fr);
  gap: 16px 24px;
  padding: 20px;
  margin-bottom: 16px !important;
  border-top: 2px solid #729554;
  scroll-margin-top: 20px;
}
#artistProfilePanel > .section-head {
  grid-column: 1 / -1;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--edge-soft);
}
#artistProfilePanel > .section-head h2 {
  color: var(--text);
  font-size: 17px;
  letter-spacing: -.025em;
}
#artistProfilePanel > div:not(.section-head):not(.artist-profile-editor) {
  width: 100%;
  max-width: none !important;
  align-self: start;
  padding: 14px;
  border: 1px solid var(--edge-soft);
  border-radius: 9px;
  background: #0d151e;
}
#artistProfilePanel label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
#artistProfilePanel #artistUsername,
#artistProfilePanel #artistDonationUrl,
#artistProfilePanel #artistBio {
  display: block;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: #0b131c;
  color: var(--text);
  padding: 11px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
#artistProfilePanel #artistBio {
  min-height: 120px;
  max-height: 320px;
  resize: vertical;
}
#artistProfilePanel input::placeholder,
#artistProfilePanel textarea::placeholder { color: #7c8ea1; opacity: 1; }
#artistProfilePanel #usernameHint {
  display: block;
  font-size: 10px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
#artistProfilePanel .artist-profile-editor {
  min-width: 0;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
#artistProfilePanel label[for="artistDonationUrl"] { margin-top: 6px; }
#artistProfilePanel .artist-profile-actions {
  gap: 8px;
  margin-top: 6px;
  align-items: center;
}
#artistProfilePanel #saveArtistProfile {
  min-height: 40px;
  background: var(--green);
  border-color: var(--green);
  color: #15220c;
  font-weight: 650;
}
#artistProfilePanel #saveArtistProfile:hover { background: #c4f29c; }
#artistProfilePanel #artistProfileStatus {
  flex: 1 1 100%;
  overflow-wrap: anywhere;
  line-height: 1.5;
  min-height: 17px;
  padding-top: 3px;
}
#artistProfilePanel:target { border-color: #729554; }
@media (max-width: 760px) {
  #artistProfilePanel {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }
  #artistProfilePanel > .section-head { grid-column: 1; }
  #artistProfilePanel > div:not(.section-head):not(.artist-profile-editor) { padding: 12px; }
  #artistProfilePanel #artistBio { min-height: 110px; }
  #artistProfilePanel .artist-profile-actions > button,
  #artistProfilePanel .artist-profile-actions > a { flex: 1 1 auto; text-align: center; }
}

/* Artist media and the performance shelf. */
.artist-upload-grid{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:12px;padding-top:16px;border-top:1px solid var(--edge-soft);min-width:0}.artist-upload-card{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:0;padding:14px;background:#0e1721;border:1px solid var(--edge-soft);border-radius:9px}.artist-upload-card input[type=file]{width:100%;min-width:0;font-size:11px;color:var(--muted)}.artist-upload-card input[type=file]::file-selector-button{border:1px solid var(--edge);border-radius:6px;background:#1c2834;color:var(--text);padding:7px 9px;margin-right:8px;font:inherit;cursor:pointer}.artist-upload-card small{color:var(--muted);font-size:10px;line-height:1.5}.artist-upload-card>button{margin-top:auto}.artist-upload-preview{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--edge)}.artist-upload-preview.background-preview{width:128px;height:100px;border-radius:7px}.artist-upload-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}.artist-upload-actions button{flex:1 1 auto}.artist-upload-status{grid-column:1/-1;margin:0;color:var(--muted);font-size:12px;overflow-wrap:anywhere}.artist-upload-card input[type=text]{width:100%}@media(max-width:900px){.artist-upload-grid{grid-template-columns:1fr 1fr}.artist-upload-card:last-child{grid-column:1/-1}}@media(max-width:560px){.artist-upload-grid{grid-template-columns:1fr}.artist-upload-card:last-child{grid-column:auto}}

.uploaded-songs{grid-column:1/-1;border-top:1px solid var(--edge-soft);padding-top:16px;min-width:0}.uploaded-songs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.uploaded-songs h3{margin:0;font-size:14px;font-weight:650}.uploaded-song-row{display:flex;align-items:center;gap:8px;border:1px solid var(--edge-soft);border-radius:8px;padding:12px;margin-top:8px;background:#0e1721}.uploaded-song-row>div{flex:1;min-width:0}.uploaded-song-row strong{font-size:12px;display:block;overflow-wrap:anywhere}.uploaded-song-row small{font-size:10px;color:var(--muted)}.song-delete{color:#ffb3bb;border-color:#73424b;background:#322027}.song-delete:hover{border-color:#ba6572;background:#442a33}@media(max-width:560px){.uploaded-song-row{flex-wrap:wrap}.uploaded-song-row>div{flex-basis:100%}.uploaded-song-row button,.uploaded-song-row a{flex:1;text-align:center}}

/* Keep both workspace tabs inside the dock at every viewport width. */
.floating-mode-dock {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 240px;
  max-width: calc(100vw - 24px);
  min-width: 0;
  gap: 4px;
  padding: 6px;
  box-sizing: border-box;
}
.floating-mode-dock .tab {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 8px 10px;
  margin: 0;
  white-space: nowrap;
  font-size: 12px;
  box-sizing: border-box;
}

.backup-panel{grid-column:1/-1;padding-top:16px;border-top:1px solid var(--edge-soft);min-width:0}.backup-panel h3{font-size:14px;margin:0}.backup-actions{display:flex;flex-wrap:wrap;gap:8px}.backup-file{display:flex;align-items:center;gap:8px;margin-top:8px;border:1px solid var(--edge-soft);border-radius:8px;padding:12px;background:#0e1721}.backup-file.song-backup-file{border-color:color-mix(in srgb,var(--green) 36%,var(--edge-soft));background:linear-gradient(115deg,#11241d,#0e1721)}.backup-file>div{flex:1;min-width:0}.backup-file strong{display:block;font-size:12px;overflow-wrap:anywhere}.backup-file small{font-size:10px;color:var(--muted)}.backup-file button{font-size:11px}@media(max-width:560px){.backup-file{flex-wrap:wrap}.backup-file>div{flex-basis:100%}.backup-file button{flex:1}}

.midi-panel{margin-bottom:14px}.midi-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:end}.midi-controls label{display:grid;gap:5px;min-width:0}.midi-controls select{max-width:100%;min-width:120px}.midi-controls label:first-of-type{flex:1;min-width:180px}.midi-panel .hint{margin-bottom:0}

/* Instrument workspace with a dedicated artist tools rail. */
.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:20px;align-items:start}.editor-stage{min-width:0}.editor-stage>main{min-width:0}.editor-rail{position:sticky;top:18px;max-height:calc(100dvh - 42px);overflow:auto;border:1px solid var(--edge);border-radius:14px;background:#101923;padding:16px;scrollbar-width:thin;scrollbar-color:#425466 transparent}.rail-heading{padding:4px 4px 18px}.rail-heading>span{font-size:9px;letter-spacing:.17em;color:var(--green)}.rail-heading h2{font-size:20px;margin:8px 0 6px}.rail-heading p{font-size:11px;color:var(--muted);margin:0}.rail-group{border-top:1px solid var(--edge-soft);min-width:0}.rail-group>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:16px 4px;font-weight:600;font-size:13px}.rail-group>summary::-webkit-details-marker{display:none}.rail-group>summary small{display:block;color:var(--muted);font-weight:400;font-size:10px;margin-top:4px}.rail-group>summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px;border-radius:5px}.rail-chevron{color:var(--green);font-size:20px}.rail-group[open] .rail-chevron{transform:rotate(180deg)}.rail-content{padding:0 0 16px;min-width:0}.editor-rail .panel{padding:14px;min-width:0;box-shadow:none;margin-bottom:0!important}.editor-rail #artistProfilePanel{grid-template-columns:minmax(0,1fr);gap:14px}.editor-rail .artist-upload-grid{grid-template-columns:minmax(0,1fr);padding:0!important}.editor-rail .artist-upload-card:last-child{grid-column:auto}.editor-rail .artist-profile-actions{flex-wrap:wrap}.editor-rail .artist-profile-actions>*{max-width:100%;min-width:0}.editor-rail .share-grid{grid-template-columns:minmax(0,1fr)}.editor-rail .share-protect-row{display:grid;grid-template-columns:minmax(0,1fr)}.editor-rail .share-protect-row label{min-width:0}.editor-rail .section-head{flex-wrap:wrap;gap:12px}.editor-rail input:not([type=checkbox]),.editor-rail select,.editor-rail textarea{max-width:100%;min-width:0}.editor-rail .midi-controls{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch}.editor-rail .midi-controls label:first-of-type{min-width:0}.editor-rail .backup-file,.editor-rail .uploaded-song-row{flex-wrap:wrap}.editor-rail .backup-file>div,.editor-rail .uploaded-song-row>div{flex-basis:100%}.editor-rail .backup-panel,.editor-rail .uploaded-songs{border-top:0;padding-top:8px}.editor-rail .uploaded-songs-head{flex-wrap:wrap}.editor-rail .artist-upload-actions button{min-width:0}.editor-rail .live-link-wrap{flex-wrap:wrap}.editor-rail .live-link-wrap input{width:100%}.editor-stage .clock-strip{flex-wrap:wrap}.editor-stage .oscillators{min-width:0}
@media(max-width:1150px){.editor-layout{grid-template-columns:minmax(0,1fr) 310px;gap:14px}.editor-rail{padding:12px}}
@media(max-width:900px){.editor-layout{grid-template-columns:minmax(0,1fr)}.editor-rail{position:static;max-height:none;margin-top:4px}.rail-heading{padding-bottom:12px}.editor-rail #artistProfilePanel{grid-template-columns:minmax(0,1fr)}.editor-rail .midi-controls{display:flex;flex-wrap:wrap}.editor-rail .midi-controls label{flex:1;min-width:130px}.editor-rail .share-grid{grid-template-columns:minmax(0,1fr)}}

/* Green vapor signals a live connection above the Play control. */
#playBtn{position:relative;overflow:visible;isolation:isolate}.live-smoke{display:none;position:absolute;left:0;right:0;bottom:85%;height:100px;pointer-events:none;z-index:-1}.is-live .live-smoke{display:block}.live-smoke i{position:absolute;bottom:0;left:42%;width:27px;height:29px;border-radius:46% 54% 65% 35%;background:radial-gradient(ellipse,#8efa9b88 0%,#49d96d44 40%,#43c86c00 72%);filter:blur(5px);opacity:0;animation:tickster-green-smoke 3.6s ease-out infinite;--drift:-18px}.live-smoke i:nth-child(2){left:55%;animation-delay:-.6s;--drift:23px}.live-smoke i:nth-child(3){left:30%;animation-delay:-1.2s;--drift:-27px}.live-smoke i:nth-child(4){left:62%;animation-delay:-1.8s;--drift:16px}.live-smoke i:nth-child(5){left:46%;animation-delay:-2.4s;--drift:7px}.live-smoke i:nth-child(6){left:37%;animation-delay:-3s;--drift:-9px}#playBtn.is-live{border-color:#7fec93;box-shadow:0 0 15px #6ff18a33,0 4px 15px #0003}@keyframes tickster-green-smoke{0%{opacity:0;transform:translate(0,9px) scale(.55) rotate(0)}15%{opacity:.85}60%{opacity:.38}100%{opacity:0;transform:translate(var(--drift),-90px) scale(2.3) rotate(40deg)}}@media(prefers-reduced-motion:reduce){.live-smoke i{animation:none}.is-live .live-smoke{height:25px;background:radial-gradient(ellipse at bottom,#80f69855,transparent 70%);filter:blur(5px)}}

/* Full-height tools rail with transport always accessible. */
.editor-rail{top:0;height:100dvh;max-height:100dvh;border-radius:12px 12px 0 0;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}.rail-transport{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex-shrink:0;padding:14px 0 18px;position:relative;z-index:2}.rail-transport button{width:100%;min-width:0;min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700}.rail-heading{flex-shrink:0}.rail-group{flex:0 0 auto;overflow:hidden;display:flex;flex-direction:column}.rail-group>summary{flex-shrink:0}.rail-group[open]{flex:1 1 auto;min-height:0}.rail-group:not([open])>.rail-content{display:none}.rail-group[open]>.rail-content{overflow:auto;min-height:0;flex:1 1 auto;scrollbar-width:thin;padding-right:3px}.rail-transport .live-smoke{z-index:0}.rail-transport button>span:not(.live-smoke){position:relative;z-index:1}
@media(max-width:900px){.editor-rail{height:100dvh;max-height:100dvh;position:sticky;top:0}.rail-transport{padding-top:10px}}

/* Taller, open rail sections with a clean ending rule. */
.editor-rail{border:0;border-radius:0;box-shadow:none;background:transparent;padding:18px 18px 16px;height:100dvh;max-height:100dvh}.rail-group>summary{padding:23px 4px;min-height:82px}.rail-group>summary small{margin-top:6px;line-height:1.5}.rail-heading{padding-bottom:22px}.rail-ending-rule{flex:0 0 auto;width:100%;height:0;border:0;border-top:1px solid var(--edge);margin:14px 0 0}.editor-rail .panel{border:0;box-shadow:none;background:transparent;padding:12px 4px}.editor-rail #artistProfilePanel{border-top:0}.editor-rail .rail-content{padding-bottom:20px}
@media(max-width:900px){.editor-rail{padding:18px 4px 16px}.rail-group>summary{min-height:76px;padding:20px 4px}}

/* Let the full rail grow naturally with the expanded section. */
.editor-rail{height:auto;min-height:100dvh;max-height:none;position:static;overflow:visible;display:block}.rail-group{display:block;overflow:visible}.rail-group[open]{min-height:0;flex:none}.rail-group[open]>.rail-content{overflow:visible;max-height:none;flex:none}.rail-ending-rule{margin:50px 0 0}.editor-rail .rail-content{padding-bottom:0}
@media(max-width:900px){.editor-rail{height:auto;min-height:100dvh;max-height:none;position:static;overflow:visible}}

.mp3-table-panel{margin-bottom:14px}.mp3-table-panel>label{display:block;margin:12px 0;font-size:12px}.mp3-table-panel input[type=text],.mp3-table-panel input:not([type=checkbox]),.mp3-table-panel select{max-width:100%;width:100%}.mp3-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}

.screen-keyboard{margin:18px 0;padding:16px;background:#101c18;border-radius:12px}.screen-keys{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;margin:12px 0}.screen-key{min-width:0;min-height:64px;padding:6px 2px;background:#dceee2;color:#14271c;border:0;border-radius:4px}.screen-key.sharp{background:#20372a;color:#c4f3ca}.screen-key:active{background:#5cdf89}.screen-key:focus-visible{outline:2px solid #7cffab;outline-offset:2px}@media(max-width:600px){.screen-keys{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* Keep each sequencer page within the available workspace. */
.sequencer{width:100%;min-width:0;max-width:100%}.seq-row{grid-template-columns:44px repeat(var(--steps),minmax(0,1fr));gap:2px}.seq-cell{min-width:0}.seq-pages{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:12px 0}.seq-pages span{font-size:12px;color:var(--muted)}.seq-header>div{min-width:0;padding-left:0;padding-right:0;font-size:11px}

/* Sample ties stay a contained connection instead of lighting an entire note row. */
.seq-cell.sample-tied{overflow:hidden;border-top-color:#77bc8e;border-bottom-color:#77bc8e;isolation:auto}.seq-cell.sample-tied::after{height:3px;background:#77bc8e}.seq-cell.sample-tied.tied-to-next{border-top-right-radius:0;border-bottom-right-radius:0}.seq-cell.sample-tied.tied-from-prev{border-top-left-radius:0;border-bottom-left-radius:0}
.seq-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.seq-actions button{white-space:nowrap}
.movement-builder{display:grid;gap:9px;margin:14px 0;padding:12px;border:1px solid var(--edge-soft,#d8e3d7);border-radius:12px;background:color-mix(in srgb,var(--card,#f5f8ef) 88%,var(--accent,#52845c) 12%)}.movement-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.movement-heading strong{font-size:.88rem}.movement-heading span{font-size:.76rem;color:var(--muted)}.movement-tabs{display:flex;flex-wrap:wrap;gap:7px}.movement-tabs button{min-width:0;padding:7px 10px;border-radius:999px;font-size:.78rem}.movement-tabs button[aria-selected="true"]{background:var(--accent,#52845c);border-color:var(--accent,#52845c);color:#fff}.movement-controls{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.movement-nav{display:flex;gap:6px;flex:0 1 auto}.movement-controls label{display:grid;gap:4px;flex:1 1 170px;font-size:.75rem;color:var(--muted)}.movement-controls input{min-width:0}.movement-controls button{white-space:nowrap}.movement-builder .hint{margin:0;font-size:.73rem;line-height:1.45}@media(max-width:620px){.movement-nav{width:100%}.movement-nav button{flex:1 1 0}.movement-controls>#addMovement,.movement-controls>#removeMovement{flex:1 1 auto}}

/* Lock ADSR display height; bitmap resolution must not resize the panel. */
.osc-card .osc-canvas{display:block;width:100%;max-width:100%;min-width:0;height:220px;min-height:220px;max-height:220px;flex:0 0 220px;box-sizing:border-box;aspect-ratio:auto}.osc-card{min-width:0;overflow:hidden}

.monitor-volume{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.monitor-volume label{font-size:11px;color:var(--muted)}.monitor-volume input{width:130px;accent-color:var(--green)}.monitor-volume output{font-size:11px;min-width:34px}.monitor-volume button{min-height:34px;padding:6px 10px}

/* Editor art direction: a softly lit instrument desk with clear signal colors. */
.editor-stage{position:relative;isolation:isolate}
.editor-stage::before{content:"";position:absolute;z-index:-1;inset:-28px -18px auto;height:440px;pointer-events:none;background:radial-gradient(ellipse at 12% 8%,#53cfff12,transparent 46%),radial-gradient(ellipse at 84% 28%,#a8ff6010,transparent 42%);filter:blur(18px)}
.editor-stage>.panel:first-child{border-color:#425261;background:linear-gradient(115deg,#172633,#131b25 62%,#1d251b);box-shadow:0 12px 35px #0005,inset 0 1px #ffffff12}
.editor-stage>.panel:first-child label{color:#d9e9f4;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.editor-stage>.panel:first-child input{margin-top:7px;min-height:46px;padding:11px 14px;font-size:16px;font-weight:650;letter-spacing:.01em;background:linear-gradient(110deg,#09131b,#101b24);border-color:#456173;box-shadow:inset 0 2px 8px #0006}
.editor-stage>.panel:first-child input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #58d7ff16,0 0 24px #58d7ff14}
.clock-strip.panel{position:relative;overflow:hidden;border-color:#385365;background:linear-gradient(105deg,#101e29,#14212b 54%,#192316);box-shadow:0 8px 26px #0005,inset 0 1px #ffffff10}
.clock-strip.panel::after{content:"";position:absolute;right:0;top:0;width:26%;height:100%;pointer-events:none;opacity:.16;background:repeating-linear-gradient(135deg,transparent 0 7px,#58d7ff 8px,transparent 9px 16px);mask-image:linear-gradient(90deg,transparent,#000)}
.clock-strip>*{position:relative;z-index:1}
.clock-strip input[type=number],.clock-strip select{background:#09141c;border-color:#304655}
.clock-strip #clockReadout{padding:9px 12px;border:1px solid #507143;border-radius:8px;background:#192617;color:#d0ffad;font-weight:700;box-shadow:0 0 20px #a8ff6010}
.tables-panel{border-top:2px solid #a8ff60;background:radial-gradient(ellipse at 50% 0%,#a8ff6008,transparent 65%),linear-gradient(150deg,#17232b,#111923)}
.table-slot{position:relative;padding:3px;border-radius:9px;background:linear-gradient(145deg,#ffffff0b,#ffffff00 55%);transition:background .2s,filter .2s}
.table-slot:nth-child(3n+1){--slot:#9cff6f}.table-slot:nth-child(3n+2){--slot:#62dfff}.table-slot:nth-child(3n){--slot:#d296ff}
.table-slot .table-btn{position:relative;overflow:hidden;width:100%;min-height:42px;border-color:#34414d;background:linear-gradient(160deg,#202c37,#131b23);color:#c0ced9;text-align:left;padding-left:11px;transition:border-color .18s,background .18s,box-shadow .18s,color .18s}
.table-slot .table-btn::before{background:var(--slot);box-shadow:0 0 9px color-mix(in srgb,var(--slot),transparent 55%)}
.table-slot .table-btn:hover{border-color:var(--slot);color:#f2f8fc;background:linear-gradient(160deg,#283847,#17232d)}
.table-slot .table-btn.active{color:#f5ffe9;border-color:var(--slot);background:linear-gradient(135deg,color-mix(in srgb,var(--slot),#17202a 78%),#111a22 78%);box-shadow:0 0 0 1px color-mix(in srgb,var(--slot),transparent 75%),0 0 20px color-mix(in srgb,var(--slot),transparent 88%),inset 0 1px #ffffff12}
.table-slot .table-btn.active::before{background:var(--slot);box-shadow:0 0 12px var(--slot)}
.table-slot .table-power{border-color:#364653;background:#121b23;color:#8295a5}
.table-slot .table-power.on{color:#d2f8bc;border-color:#496b3c;background:#1c2b19}
.table-slot.table-off{filter:saturate(.35);opacity:.72}
.master-panel{background:linear-gradient(110deg,#17212b,#101923 75%,#1e281b)}
.master-controls label{padding:2px 0}
.osc-card{--osc:#58d7ff;position:relative;border:1px solid color-mix(in srgb,var(--osc),#26313b 66%);border-top:2px solid var(--osc);background:radial-gradient(ellipse at 85% 0%,color-mix(in srgb,var(--osc),transparent 92%),transparent 55%),linear-gradient(155deg,#17222c,#0e151d 78%);box-shadow:0 10px 28px #0004,inset 0 1px #ffffff0c}
.osc-card:nth-child(3n+2){--osc:#a8ff60}.osc-card:nth-child(3n){--osc:#d296ff}
.osc-card .osc-title{color:var(--osc);text-shadow:0 0 18px color-mix(in srgb,var(--osc),transparent 76%);letter-spacing:.01em}
.osc-card .section-head{border-color:color-mix(in srgb,var(--osc),transparent 78%)}
.osc-card .mute-label input{accent-color:var(--osc)}
.osc-card .osc-canvas{border-color:color-mix(in srgb,var(--osc),#26313b 74%);background-color:#080e14;box-shadow:inset 0 0 32px #0008,0 0 18px color-mix(in srgb,var(--osc),transparent 94%)}
.osc-card .pm-row{border-left:2px solid color-mix(in srgb,var(--osc),transparent 35%)}
.osc-card .pm-row::before{background:var(--osc)}
.osc-card .pm-row strong{color:var(--osc)}
.pitch-quantize{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:10px 0 14px}.pitch-quantize label{display:grid;gap:6px;min-width:min(190px,100%)}.pitch-quantize small{flex:1 1 100%;color:var(--muted);font-size:10px;padding-bottom:0}.pitch-quantize .time-quantize-toggle{display:flex;align-items:center;gap:8px;min-width:0;min-height:38px;padding:0 12px;border:1px solid color-mix(in srgb,var(--osc),#26313b 72%);border-radius:8px;background:#0c131a;color:var(--text);font-size:10px;letter-spacing:.04em}.time-quantize-toggle input{width:16px;height:16px;margin:0;accent-color:var(--osc)}
.seq-settings{border-top:2px solid #d296ff;background:radial-gradient(ellipse at 4% 0%,#d296ff0d,transparent 48%),linear-gradient(150deg,#17212b,#111821)}
.scene-builder{padding:12px;border:1px solid #344450;border-radius:10px;background:linear-gradient(140deg,#111b25,#0c131a);box-shadow:inset 0 1px #ffffff08}
.scene-add-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.scene-add-buttons>span{color:#a7b6c3;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.scene-add-buttons strong{margin-left:auto;color:#d5c0ff;font:600 11px ui-monospace,monospace}
.scene-card{border-color:#3a4055;background:linear-gradient(145deg,#1c2431,#141922);transition:border-color .18s,box-shadow .18s,transform .18s}
.scene-card:hover{border-color:#a883dc;box-shadow:0 0 18px #c695ff12}
.scene-card.active{border-color:#c496ff;box-shadow:0 0 0 1px #c496ff35,0 0 22px #c496ff15}
.sequencer-wrap{border-color:#354350;background:radial-gradient(ellipse at 50% 0%,#58d7ff09,transparent 62%),linear-gradient(155deg,#151f28,#0d141b);box-shadow:0 12px 34px #0005}
.sequencer{padding:4px}
.seq-header .step-head{height:29px;border-color:#354553;border-radius:5px;background:linear-gradient(180deg,#1c2934,#111a22);color:#91a6b5}
.seq-header .step-head:nth-child(4n+2){color:#d7c18b}
.note-label{border-color:#32404c;background:linear-gradient(100deg,#1d2933,#111820);color:#c6d2dc}
.seq-cell{height:29px;border-color:#26313b;border-radius:5px;background:linear-gradient(145deg,#111920,#0b1116);box-shadow:inset 0 1px #ffffff05}
.seq-cell:nth-child(4n+1){border-left-color:#53606a}
.seq-cell:nth-child(4n+2){border-right-color:#394651}
.seq-cell.active{border-color:#9ddd70;background:linear-gradient(145deg,#456132,#263c21);box-shadow:inset 0 1px #e3ffd02c,0 0 12px #a8ff6014}
.seq-cell.active::before{color:#e3ffcc}
.seq-cell.playing{outline-color:#75deff;box-shadow:0 0 0 2px #58d7ff33,0 0 18px #58d7ff45}
.seq-table-layer{border-color:#66727a;background:#1c2933;color:#d4e0e8}
.seq-table-layer.current{border-color:#d5ffaf;background:#334b28;color:#f5ffe9;box-shadow:0 0 8px #a8ff6040}
.seq-pages{padding:10px 2px 0}
.seq-pages button{border-color:#435360;background:#182630}
.screen-keyboard{border:1px solid #32564a;background:radial-gradient(ellipse at 50% 0%,#54db8a12,transparent 70%),linear-gradient(150deg,#11221d,#0d1717);box-shadow:inset 0 1px #ffffff09}
.screen-key{box-shadow:0 3px 0 #8eaa98;border:1px solid #bed9c5;transition:transform .08s,filter .12s}
.screen-key:hover{filter:brightness(1.08);transform:translateY(-1px)}
.screen-key.sharp{box-shadow:0 3px 0 #111b16;border:1px solid #3f6351}
.screen-key:active{transform:translateY(2px);box-shadow:0 1px 0 #74927e}
@media(max-width:900px){.editor-stage::before{inset:-12px -8px auto;height:320px}.scene-builder{padding:10px}.seq-cell{height:30px}}
@media(max-width:560px){.editor-stage>.panel:first-child input{max-width:100%!important}.scene-add-buttons strong{width:100%;margin:2px 0 0}.table-slot .table-btn{padding-left:7px;font-size:10px}.clock-strip.panel::after{width:45%;opacity:.09}}
@media(prefers-reduced-motion:reduce){.table-slot,.table-btn,.scene-card,.screen-key{transition:none}}

/* Compact playable keyboard sits between global controls and the oscillators. */
.editor-stage>.screen-keyboard{margin:0;padding:9px 12px;border:1px solid #345548;border-radius:11px;background:linear-gradient(100deg,#10201b,#13221f 45%,#101a20);box-shadow:0 6px 20px #0003,inset 0 1px #ffffff0a}
.screen-keyboard-head{display:flex;align-items:center;gap:10px;margin:0 2px 7px}
.screen-keyboard-head h3{margin:0;color:#dbf6e4;font-size:11px;letter-spacing:.02em}
.screen-keyboard-head>span{color:#819c8c;font-size:9px}
.screen-keyboard-head button{min-height:25px;margin-left:auto;padding:3px 8px;font-size:9px}
.screen-keys{grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;margin:0}
.screen-key{min-height:42px;height:42px;padding:2px 1px;border-radius:3px;font-size:9px;line-height:1;box-shadow:0 2px 0 #8eaa98}
.screen-key{display:grid;place-items:center;align-content:center;gap:2px;overflow:hidden}
.screen-key-note{font-weight:800;line-height:1}
.screen-key-marks{display:flex;align-items:center;justify-content:center;gap:1px;min-height:10px}
.scale-mark{display:inline-flex;align-items:center;justify-content:center;min-width:9px;height:9px;border-radius:999px;font-size:7px;font-weight:800;line-height:1;background:#ffffffb8;color:#17251e}
.scale-major{background:#c8ff9b;color:#1d431c}.scale-natural{background:#9fe4ff;color:#133a4b}.scale-harmonic{background:#e5c2ff;color:#3e2654}
.screen-key.root{border-color:#7cffab;box-shadow:0 0 0 1px #7cffab66,0 2px 0 #5e9e75}
.screen-key.root .screen-key-note::after{content:" root";font-size:6px;font-weight:700;color:#356545}
.screen-key.sharp{box-shadow:0 2px 0 #111b16}
.screen-key:active{transform:translateY(1px);box-shadow:0 1px 0 #74927e}
.screen-key-status{margin:5px 2px 0;color:#84998d;font-size:9px;line-height:1.3}
.mp3-table-panel{padding:0;border:1px solid #2d3d48;border-radius:10px;background:#101820;box-shadow:none}
.mp3-table-panel>summary{display:flex;align-items:center;gap:10px;min-height:39px;padding:8px 12px;cursor:pointer;list-style:none;color:#aebdca;font-size:11px;font-weight:650}
.mp3-table-panel>summary::-webkit-details-marker{display:none}
.mp3-table-panel>summary::after{content:"＋";margin-left:auto;color:#82a3b5;font-size:14px}
.mp3-table-panel[open]>summary::after{content:"−"}
.mp3-table-panel>summary small{color:#75899a;font-size:9px;font-weight:450}
.mp3-table-panel[open]>summary{border-bottom:1px solid #2a3944;color:#d9e8f2}
.mp3-panel-body{padding:14px}
.mp3-panel-body .section-head h2{font-size:13px}
.mp3-panel-body .section-head{margin-bottom:8px}
@media(max-width:760px){.screen-keys{grid-template-columns:repeat(12,minmax(0,1fr))}.screen-key{min-height:36px;height:36px;font-size:8px}.screen-keyboard-head>span{font-size:8px}}
@media(max-width:430px){.screen-keyboard-head{gap:6px}.screen-keyboard-head h3{font-size:10px}.screen-keyboard-head>span{max-width:95px}.mp3-table-panel>summary{flex-wrap:wrap}}

/* A calmer, light studio palette for the editor workspace. */
body.tickster-editor{--text:#2a3940;--muted:#687980;--edge:#d0dad8;--edge-soft:#e1e8e5;--green:#4e8c38;--cyan:#167d9d;--amber:#a56a0e;--red:#b74e57;--shadow:rgba(48,65,68,.11);color:var(--text);background:radial-gradient(ellipse at 9% 0%,#d6edf1 0,transparent 32rem),radial-gradient(ellipse at 94% 12%,#e3efd7 0,transparent 36rem),linear-gradient(180deg,#edf2ef,#e7edeb 70%,#eef1ed)}
body.tickster-editor::before{opacity:.16;background-image:linear-gradient(#718b8710 1px,transparent 1px),linear-gradient(90deg,#718b870a 1px,transparent 1px);mix-blend-mode:multiply}
.tickster-editor .app-shell{color:var(--text)}
.tickster-editor .topbar{position:relative;z-index:5;margin-top:-18px;padding:18px 2px 18px}
.tickster-editor .topbar::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw - 118px);right:calc(50% - 50vw + 118px);background:linear-gradient(90deg,#f8fbf8,#edf6f3 54%,#f3f7ed);border-bottom:1px solid #d1dfdc;box-shadow:0 6px 18px #344c4b0f}
.tickster-editor .topbar h1{color:#20343a}.tickster-editor .topbar p{color:#61757a}
.tickster-editor .online-counts{border-color:#d0ddda;background:#f7faf8;color:#66777b;box-shadow:0 3px 12px #344c4b0c}
.tickster-editor .online-counts strong{color:#397d4e}
.tickster-editor .editor-rail{background:#f2f5f2;border-left:1px solid #d4deda}
.tickster-editor .rail-heading h2{color:#263b40}.tickster-editor .rail-heading p,.tickster-editor .rail-group>summary small{color:#748288}
.tickster-editor .rail-heading>span{color:#548a43}.tickster-editor .rail-chevron{color:#648e51}
.tickster-editor .rail-group{border-color:#d8e0dc}.tickster-editor .rail-group>summary{color:#34464b}.tickster-editor .rail-group>summary:hover{color:#23664d}
.tickster-editor .rail-ending-rule{border-color:#cdd8d4}
.tickster-editor .editor-stage::before{opacity:.58;filter:blur(24px)}
.tickster-editor .panel{border-color:#d5dfdc;background:linear-gradient(145deg,#fbfcfa,#f2f6f3);box-shadow:0 4px 15px #42595610,inset 0 1px #fff}
.tickster-editor .panel::before{background:linear-gradient(90deg,transparent,#fff,transparent)}
.tickster-editor .editor-stage>.panel:first-child{border-color:#cadbd9;background:linear-gradient(115deg,#f6fbfa,#f5f8f1 65%,#f0f6e9);box-shadow:0 7px 20px #42595612,inset 0 1px #fff}
.tickster-editor .editor-stage>.panel:first-child label{color:#587077}
.tickster-editor .editor-stage>.panel:first-child input{color:#243b41;background:#fff;border-color:#c9d9d7;box-shadow:inset 0 1px 3px #375a5810}
.tickster-editor .clock-strip.panel{border-color:#ccdcda;background:linear-gradient(105deg,#f4faf9,#f1f8f7 55%,#f5f8ee);box-shadow:0 4px 15px #42595610}
.tickster-editor .clock-strip.panel::after{opacity:.055}
.tickster-editor .clock-strip label,.tickster-editor .master-controls label,.tickster-editor .osc-card label,.tickster-editor .seq-toolbar label{color:#64777b}
.tickster-editor input[type=number],.tickster-editor input[type=text],.tickster-editor input[type=password],.tickster-editor select,.tickster-editor textarea{color:#2e4046;background:#fff;border-color:#cbd7d5}
.tickster-editor input::placeholder,.tickster-editor textarea::placeholder{color:#89989a}
.tickster-editor #clockReadout{color:#3f7536;background:#edf6e8;border-color:#cadfc1;box-shadow:none}
.tickster-editor button,.tickster-editor .home-link,.tickster-editor .live-open-link{color:#40535a;background:#f5f8f6;border-color:#ccd8d6;box-shadow:0 1px 2px #4056530c}
.tickster-editor button:hover{color:#254c51;background:#eaf3f1;border-color:#9dbeb9;box-shadow:0 2px 8px #315d5412}
.tickster-editor button.primary{color:#fff;background:#548b42;border-color:#548b42;box-shadow:0 3px 10px #548b4222}
.tickster-editor button.primary:hover{background:#467b36}
.tickster-editor .home-link{background:#f6faf8;color:#42635f}
.tickster-editor .tables-panel{border-top-color:#79a95f;background:radial-gradient(ellipse at 50% 0%,#d9edcf99,transparent 68%),linear-gradient(145deg,#fbfcf9,#f0f5ef)}
.tickster-editor .table-slot{background:linear-gradient(145deg,#fff,#e8efeb)}
.tickster-editor .table-slot .table-btn{color:#52656c;background:linear-gradient(160deg,#fff,#edf2f0);border-color:#d1dbd9}
.tickster-editor .table-slot .table-btn:hover{color:#344b4d;background:#f1f8f4}
.tickster-editor .table-slot .table-btn.active{color:#284a32;background:linear-gradient(135deg,#e5f1dc,#f8faf5 78%);box-shadow:0 0 0 1px #78a86555,0 2px 8px #57854819,inset 0 1px #fff}
.tickster-editor .table-slot .table-power{color:#78878a;background:#f4f7f5;border-color:#d3ddda}
.tickster-editor .table-slot .table-power.on{color:#47783b;background:#edf5e9;border-color:#c6ddbb}
.tickster-editor .master-panel{background:linear-gradient(110deg,#f8faf7,#f0f5f2 76%,#f1f6e9)}
.tickster-editor .osc-card{border-color:#d2dddc;background:radial-gradient(ellipse at 88% 0%,color-mix(in srgb,var(--osc),transparent 94%),transparent 58%),linear-gradient(155deg,#fbfcfa,#f0f4f2 78%);box-shadow:0 5px 16px #42595612,inset 0 1px #fff}
.tickster-editor .osc-card .osc-title{color:color-mix(in srgb,var(--osc),#243b40 32%);text-shadow:none}
.tickster-editor .osc-card .section-head{border-color:#e0e7e4}
.tickster-editor .osc-card .osc-canvas{background-color:#10191d;box-shadow:inset 0 0 24px #0005,0 2px 8px #34514b12}
.tickster-editor .osc-card .pm-row{background:linear-gradient(145deg,#f7faf8,#edf3f1);border-color:#dce5e1}
.tickster-editor .osc-card .pm-row strong{color:color-mix(in srgb,var(--osc),#28505a 28%)}
.tickster-editor .osc-readout,.tickster-editor .readout,.tickster-editor .hint,.tickster-editor .seq-help{color:#718087}
.tickster-editor .seq-settings{border-top-color:#a77dc5;background:radial-gradient(ellipse at 4% 0%,#eadcf288,transparent 50%),linear-gradient(150deg,#fbf9fc,#f3f1f6)}
.tickster-editor .scene-builder{border-color:#d9dce2;background:linear-gradient(140deg,#f7f7f8,#eef1f2);box-shadow:inset 0 1px #fff}
.tickster-editor .scene-add-buttons>span{color:#69777b}
.tickster-editor .scene-add-buttons strong{color:#79579c}
.tickster-editor .scene-card{border-color:#d8d9e2;background:linear-gradient(145deg,#faf9fc,#f0eff5);color:#45545a}
.tickster-editor .scene-card.active{border-color:#a882c5;box-shadow:0 0 0 1px #a882c533,0 2px 8px #77519117}
.tickster-editor .sequencer-wrap{border-color:#d3dddf;background:radial-gradient(ellipse at 50% 0%,#d9eff388,transparent 64%),linear-gradient(155deg,#f8fbfa,#edf3f3);box-shadow:0 5px 18px #42595612}
.tickster-editor .seq-header .step-head{border-color:#d4dfdf;background:linear-gradient(180deg,#edf4f4,#e6eeee);color:#667b80}
.tickster-editor .seq-header .step-head:nth-child(4n+2){color:#8c6a2e}
.tickster-editor .note-label{border-color:#d5dfdc;background:linear-gradient(100deg,#eef4f2,#e5edeb);color:#52666b}
.tickster-editor .seq-cell{border-color:#dce4e2;background:linear-gradient(145deg,#f6f9f7,#eaf0ee);box-shadow:inset 0 1px #fff}
.tickster-editor .seq-cell:nth-child(4n+1){border-left-color:#9baead}.tickster-editor .seq-cell:nth-child(4n+2){border-right-color:#c4d0cd}
.tickster-editor .seq-cell:hover{border-color:#8ebbb4;background:#e8f4f0}
.tickster-editor .seq-cell.active{border-color:#77a95b;background:linear-gradient(145deg,#d6e9c9,#c3ddb5);box-shadow:inset 0 1px #fff9,0 1px 4px #5785481c}
.tickster-editor .seq-cell.active::before{color:#547b42}
.tickster-editor .seq-cell.playing{outline-color:#2186a2;box-shadow:0 0 0 2px #1682a222,0 0 10px #1682a233}
.tickster-editor .seq-table-layer{border-color:#c3d0d0;background:#eef4f2;color:#546b70}
.tickster-editor .seq-table-layer.current{border-color:#7fa768;background:#e0efd6;color:#355b2e;box-shadow:0 0 6px #83ad6940}
.tickster-editor .screen-keyboard{border-color:#c9ddd1;background:linear-gradient(100deg,#edf7ef,#f1f7f2 48%,#edf4f4);box-shadow:0 3px 12px #4259560d,inset 0 1px #fff}
.tickster-editor .screen-keyboard-head h3{color:#42654f}.tickster-editor .screen-keyboard-head>span,.tickster-editor .screen-key-status{color:#758a7c}
.tickster-editor .screen-key{background:#fbfdfa;border-color:#cfdfd2;color:#264236;box-shadow:0 2px 0 #b7cabd}
.tickster-editor .screen-key.sharp{background:#31483b;border-color:#526f5f;color:#f0f8f1;box-shadow:0 2px 0 #1a2a21}
.tickster-editor .screen-key.root{border-color:#508c5d;box-shadow:0 0 0 1px #508c5d4d,0 2px 0 #8cae91}
.tickster-editor .screen-key.root .screen-key-note::after{color:#4f7c56}
.tickster-editor .mp3-table-panel{border-color:#d3ddda;background:#f6f8f6}
.tickster-editor .mp3-table-panel>summary{color:#536a6e}.tickster-editor .mp3-table-panel>summary small{color:#7b8b8d}
.tickster-editor .mp3-table-panel[open]>summary{border-color:#dce4e1;color:#334c50}
@media(max-width:900px){.tickster-editor .editor-rail{background:#f2f5f2;border-top:1px solid #d4deda}}
@media(max-width:1250px){.tickster-editor .topbar::before{left:calc(50% - 50vw - 12px);right:calc(50% - 50vw + 12px)}}
@media(max-width:560px){.tickster-editor .topbar::before{left:calc(50% - 50vw - 6px);right:calc(50% - 50vw + 6px)}}
.tickster-editor #liveTools{border:1px solid #d8e3d7;border-radius:14px;background:linear-gradient(145deg,#f5f8ef,#edf4ec)}
.tickster-editor #liveTools>summary{color:#3f5d49}
.tickster-editor #liveTools .share-panel{background:linear-gradient(145deg,#f8fbf5,#eff5eb);border-color:#d9e4d6;border-radius:12px}
.tickster-editor #liveTools .share-panel h2{color:#385744}
.tickster-editor #liveTools .share-grid>div{background:#f9fbf6;border-color:#e0e8dd}
.tickster-editor #liveTools .share-grid strong{color:#728171}
.tickster-editor #liveTools .share-grid span{color:#3f5749}
.tickster-editor #liveTools .share-protect-row .streaming-live-toggle{background:#e9f3e4;color:#4d7544;border-color:#cbdcc4}
.tickster-editor #liveTools #shareBtn{background:#598d4b;border-color:#598d4b;color:#fff}
.tickster-editor #liveTools #shareBtn:hover{background:#4b7c3e}
.tickster-editor .artist-discovery-rail{background:linear-gradient(160deg,#f8faf3,#edf3e9);border-color:#d9e3d5;color:#42554a;box-shadow:0 7px 22px #42595612}
.tickster-editor .artist-discovery-rail h3{color:#63885b}
.tickster-editor .artist-discovery-rail a{border-color:#e1e8dd}
.tickster-editor .artist-discovery-rail small,.tickster-editor .artist-discovery-rail p{color:#7b897e}
.tickster-editor .artist-discovery-rail a:hover{color:#3d8050}
.tickster-editor .tickster-site-donate{color:#f5fff3;background:#52845c;border-color:#477b51;box-shadow:0 5px 16px #425d421f}

/* Independent level trim for each saved sequencer scene. */
.scene-card{grid-template-areas:'grip title actions' 'grip len actions' 'grip range actions' 'grip volume actions';min-width:190px;}
.scene-volume-control{grid-area:volume;display:grid;gap:3px;min-width:0;cursor:default;color:var(--muted,#718078);}
.scene-volume-control>span{display:flex;align-items:center;justify-content:space-between;gap:.45rem;font-size:.66rem;font-weight:750;letter-spacing:.08em;}
.scene-volume-control output{color:var(--accent,#52845c);font-variant-numeric:tabular-nums;letter-spacing:0;}
.scene-volume-control input{width:100%;height:14px;margin:0;accent-color:var(--accent,#52845c);cursor:pointer;}
.scene-volume-control input:focus-visible{outline:2px solid var(--accent,#52845c);outline-offset:2px;}