/* CheapTuna — UI chrome, ported from the Fleck design system (paper / ink / halftone accent,
 * square 1px ink borders, hard offset "sticker" shadows, Silkscreen + JetBrains Mono).
 * Every color is a token on :root so the three Fleck themes swap live via [data-theme]. */

:root {
  --paper: #f2ede1; --paper-hover: #f6f2e6; --paper-pressed: #e9e2d2; --sunken: #e7e0cf; --field: #ffffff;
  --ink: #1c1a17; --ink-muted: #4a463d; --muted: #8a8478; --muted-faint: #b3a88f;
  --divider: #d3cbb9; --track: #d8d0c0;
  --accent: #a9e838; --accent-deep: #2f7a44; --danger: #e0503a; --gold: #a58f5a; --info: #4a86c5;
  --accent-text: #1c1a17; --danger-text: #f2ede1;
  --scrim: rgba(28, 26, 23, .42); --shadow-hard: #1c1a17; --shadow-soft: rgba(28, 26, 23, .35); --halftone-dot: rgba(28, 26, 23, .10);
  --grid-line: rgba(28, 26, 23, .10); --grid-beat: rgba(28, 26, 23, .22); --grid-bar: #1c1a17;
  --key-white: #ffffff; --key-black: #1c1a17; --key-white-text: #8a8478; --key-black-text: #f2ede1;
  --font-body: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
  --font-display: 'Silkscreen', Consolas, monospace;
  --halftone: radial-gradient(circle, var(--halftone-dot) 30%, transparent 33%);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}
:root[data-theme="dark"] {
  --paper: #201d19; --paper-hover: #302d29; --paper-pressed: #3b3833; --sunken: #2b2823; --field: #2d2a25;
  --ink: #e9e2d2; --ink-muted: #bcb5a5; --muted: #8b877d; --muted-faint: #6a665e;
  --divider: #3c3832; --track: #484239;
  --accent: #93b04f; --accent-deep: #6f9e57; --danger: #e0603a; --gold: #c8a763; --info: #6a9aca;
  --accent-text: #1a1712; --danger-text: #f4f1ea;
  --scrim: rgba(0, 0, 0, .55); --shadow-hard: #000000; --shadow-soft: rgba(0, 0, 0, .45); --halftone-dot: rgba(0, 0, 0, .12);
  --grid-line: rgba(233, 226, 210, .08); --grid-beat: rgba(233, 226, 210, .2); --grid-bar: #e9e2d2;
  --key-white: #d9d2c2; --key-black: #16130f; --key-white-text: #5d5850; --key-black-text: #bcb5a5;
}
:root[data-theme="neutral"] {
  --paper: #e9e7e2; --paper-hover: #edebe7; --paper-pressed: #dedbd5; --sunken: #dcd9d3; --field: #ffffff;
  --ink: #26241f; --ink-muted: #4f4d47; --muted: #84817a; --muted-faint: #a5a29b;
  --divider: #cdcac3; --track: #c2beb6;
  --accent: #86ad97; --accent-deep: #3f7a5e; --danger: #c0584a; --gold: #a08a5e; --info: #5a7fa8;
  --accent-text: #1a1712; --danger-text: #f4f1ea;
  --scrim: rgba(38, 36, 31, .42); --shadow-hard: #26241f; --shadow-soft: rgba(38, 36, 31, .35); --halftone-dot: rgba(38, 36, 31, .10);
  --grid-line: rgba(38, 36, 31, .10); --grid-beat: rgba(38, 36, 31, .22); --grid-bar: #26241f;
  --key-white: #ffffff; --key-black: #26241f; --key-white-text: #84817a; --key-black-text: #e9e7e2;
}

/* ---------- base ---------- */
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 13px;
  user-select: none; -webkit-user-select: none;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--track); border: 2px solid var(--paper); }
::-webkit-scrollbar-track { background: var(--paper); }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
canvas { display: block; }
.hidden { display: none !important; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.grain {
  position: fixed; inset: 0; z-index: 200; pointer-events: none; mix-blend-mode: multiply; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: .04; }

/* ---------- typography helpers ---------- */
.label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.5px; font-weight: 600; text-transform: uppercase;
  color: var(--muted);
}
.display { font-family: var(--font-display); }

/* ---------- buttons (Fleck FleckButton) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 12px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { background: var(--paper-hover); }
.btn:active { background: var(--paper-pressed); transform: translate(1px, 1px); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn:focus-visible, .input:focus-visible, .select:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 1px; }
.btn.sm { height: 24px; padding: 0 8px; font-size: 9.5px; }
.btn.xs { height: 20px; padding: 0 6px; font-size: 9px; }
.btn.icon { width: 30px; padding: 0; font-size: 13px; }
.btn.icon.sm { width: 24px; }
.btn.shadow2 { box-shadow: 2px 2px 0 var(--shadow-hard); }
.btn.shadow3 { box-shadow: 3px 3px 0 var(--shadow-hard); }
.btn.shadow2:hover, .btn.shadow3:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow-hard); }
.btn.shadow2:active, .btn.shadow3:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--shadow-hard); }
.btn.accent, .btn.on {
  background-color: var(--accent); background-image: var(--halftone); background-size: 5px 5px; color: var(--accent-text);
}
.btn.accent:hover, .btn.on:hover { background-color: var(--accent); }
.btn.danger:hover { background: var(--danger); color: var(--danger-text); }
.btn.danger.on { background-color: var(--danger); background-image: var(--halftone); color: var(--danger-text); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--paper-hover); border-color: var(--divider); }
.btn.display { font-family: var(--font-display); font-weight: 400; font-size: 10px; letter-spacing: .02em; }
.btn-group { display: inline-flex; }
.btn-group .btn + .btn { margin-left: -1px; }

/* ---------- inputs ---------- */
.input, .select {
  height: 30px; padding: 0 8px; border: 1px solid var(--ink); background: var(--field); color: var(--ink);
  font-family: var(--font-mono); font-size: 11px; outline: none; border-radius: 0;
}
.input, .select { transition: box-shadow .12s var(--ease-out), border-color .12s; }
.input:focus, .select:focus { box-shadow: 2px 2px 0 var(--shadow-hard); }
.input.sm, .select.sm { height: 24px; font-size: 10px; padding: 0 6px; }
.input.num { width: 58px; text-align: right; }
.select { appearance: none; -webkit-appearance: none; padding-right: 22px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%238a8478'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; }
.select option { font-family: var(--font-mono); }

/* range slider — Fleck FleckSlider: 3px track, ink fill, accent square thumb with a hard shadow */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; margin: 0; cursor: pointer; }
.range:focus { outline: none; }
.range::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(var(--ink), var(--ink)) no-repeat, var(--track); background-size: var(--fill, 0%) 100%; }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 16px; margin-top: -6.5px; border: 1px solid var(--ink);
  background: var(--accent); box-shadow: 2px 2px 0 var(--shadow-hard);
}
.range::-moz-range-track { height: 3px; background: var(--track); }
.range::-moz-range-progress { height: 3px; background: var(--ink); }
.range::-moz-range-thumb { width: 10px; height: 14px; border: 1px solid var(--ink); border-radius: 0; background: var(--accent); box-shadow: 2px 2px 0 var(--shadow-hard); }
.range.tiny { height: 14px; }
.range.tiny::-webkit-slider-thumb { width: 8px; height: 12px; margin-top: -4.5px; box-shadow: 1px 1px 0 var(--shadow-hard); }

/* toggle (square checkbox) */
.toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: var(--font-mono); font-size: 10.5px; }
.toggle input { display: none; }
.toggle .box { width: 14px; height: 14px; border: 1px solid var(--ink); background: var(--field); position: relative; flex: none; }
.toggle input:checked + .box { background-color: var(--accent); background-image: var(--halftone); background-size: 5px 5px; }
.toggle input:checked + .box::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--accent-text); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.chip {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid var(--ink);
  background: var(--paper); font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.chip.accent { background-color: var(--accent); background-image: var(--halftone); background-size: 5px 5px; color: var(--accent-text); }
.chip .dot { width: 8px; height: 8px; border: 1px solid var(--ink); }

/* ---------- app shell ---------- */
#app { display: grid; grid-template-rows: 52px 1fr; height: 100vh; width: 100vw; }
#titlebar {
  display: flex; align-items: center; gap: 14px; padding: 0 20px; border-bottom: 1px solid var(--ink); background: var(--paper);
  z-index: 20;
}
#titlebar .logo { display: flex; align-items: center; gap: 10px; }
#titlebar .logo .sq { width: 15px; height: 15px; background: var(--accent); border: 1px solid var(--ink); }
#titlebar .logo .name { font-family: var(--font-display); font-size: 13px; letter-spacing: .02em; }
#titlebar .vsep { width: 1px; height: 20px; background: var(--divider); flex: none; }
#titlebar .tagline { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
#titlebar .spacer { flex: 1; }
#song-title { width: 180px; }
@media (max-width: 1300px) { #titlebar .tagline, #titlebar .tagline + .vsep { display: none; } #song-title { width: 130px; } }
@media (max-width: 1150px) { #btn-examples, #btn-help { display: none; } #titlebar { gap: 8px; padding: 0 10px; } }
#transport { display: flex; align-items: center; gap: 6px; }
#transport .pos { font-family: var(--font-mono); font-size: 12px; font-weight: 600; min-width: 74px; text-align: center; letter-spacing: .05em; padding: 0 6px; height: 30px; line-height: 28px; border: 1px solid var(--ink); background: var(--field); }
#transport .bpm-wrap { display: flex; align-items: center; gap: 4px; }
#transport .bpm-wrap .label { letter-spacing: 1px; }
#bpm { width: 52px; }
.dirty-dot { color: var(--danger); font-size: 16px; line-height: 1; margin-left: -6px; }

/* the playlist height is a user-dragged px value; capped at 55% so a layout saved on a tall
 * screen never pushes the piano off a shorter one */
#main { display: grid; grid-template-rows: minmax(140px, min(var(--arr-h, 30%), 55%)) 4px minmax(150px, 1fr) 4px var(--piano-h, 130px); min-height: 0; overflow: hidden; }
#tabbar { display: none; }
.splitter { background: var(--paper); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); cursor: row-resize; transition: background .15s var(--ease-out); }
.splitter:hover { background: var(--accent); }
.splitter.v { cursor: col-resize; border: 0; border-left: 1px solid var(--divider); border-right: 1px solid var(--divider); }
#bottom { display: grid; grid-template-columns: 1fr 4px var(--inst-w, 340px); min-height: 0; min-width: 0; }

/* ---------- panels (Fleck FloatPanel) ---------- */
.panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--paper); border: 1px solid var(--ink); border-left: 0; border-right: 0; border-top: 0; overflow: hidden; }
.panel-head {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 11px; background: var(--paper-hover); border-bottom: 1px solid var(--ink); flex: none;
}
.panel-head .title { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-head .title b { color: var(--ink); }
.panel-head .spacer { flex: 1; }
.panel-head .tools { display: flex; align-items: center; gap: 4px; }
.panel-body { flex: 1; min-height: 0; min-width: 0; position: relative; }
.focus-btn { flex: none; }
.focus-btn.on, .focus-tab.on { background-color: var(--accent); background-image: var(--halftone); background-size: 5px 5px; color: var(--accent-text); }

/* ---------- focus mode: one panel fills #main (⛶ button, F2–F6, or the compact tab bar) ---------- */
#main[data-focus] { grid-template-rows: 1fr; }
#main[data-focus] > .splitter, #main[data-focus] > .panel, #main[data-focus] > #bottom { display: none; }
#main[data-focus="arr"] > #arr-panel, #main[data-focus="piano"] > #piano-panel { display: flex; }
#main[data-focus="roll"] > #bottom, #main[data-focus="inst"] > #bottom { display: grid; grid-template-columns: 1fr; }
#main[data-focus] > #bottom > .splitter { display: none; }
#main[data-focus="roll"] > #bottom > #inst-panel, #main[data-focus="inst"] > #bottom > #roll-panel { display: none; }
#main[data-focus="piano"] #piano-body { grid-template-columns: 110px 1fr; }
#main[data-focus="piano"] .pk .kk { font-size: 12px; } #main[data-focus="piano"] .pk { font-size: 10px; padding-bottom: 8px; }

/* ---------- compact screens (phone / short window): wrapped title bar + tab bar, always focused ---------- */
@media (max-width: 900px), (max-height: 620px) {
  #app { grid-template-rows: auto 1fr auto; }
  #titlebar { flex-wrap: wrap; height: auto; min-height: 44px; padding: 5px 10px; row-gap: 5px; gap: 6px; }
  #titlebar .tagline, #titlebar .tagline + .vsep, #titlebar .logo + .vsep { display: none; }
  #titlebar .spacer { flex: 1 0 8px; }
  #song-title { width: 110px; }
  #tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--ink); background: var(--paper-hover); }
  #tabbar .btn { height: 38px; border: 0; border-right: 1px solid var(--ink); font-size: 10px; }
  #tabbar .btn:last-child { border-right: 0; }
  .focus-btn, #split-h, #split-h2 { display: none !important; }
  .panel-head { height: auto; min-height: 34px; flex-wrap: wrap; padding: 4px 6px 4px 10px; row-gap: 4px; }
  .piano-hint { display: none; }
  #arr-body { grid-template-columns: 150px 1fr; }
  #piano-body { grid-template-columns: 90px 1fr !important; }
  #toasts { bottom: 56px; right: 10px; left: 10px; align-items: flex-end; }
  .dialog { min-width: 0; width: calc(100vw - 20px); max-height: 94vh; }
}
@media (max-width: 520px) {
  #titlebar .tagline, #btn-examples, #btn-help, #transport .bpm-wrap .label { display: none; }
  #song-title { width: 90px; }
  .btn { padding: 0 8px; }
}

/* ---------- arrangement ---------- */
#arr-body { display: grid; grid-template-columns: 190px 1fr; }
#arr-heads { border-right: 1px solid var(--ink); overflow: hidden; background: var(--paper); position: relative; }
#arr-heads-inner { position: absolute; left: 0; right: 0; top: 0; }
#arr-heads .ruler-corner { height: 22px; border-bottom: 1px solid var(--ink); background: var(--sunken); display: flex; align-items: center; padding: 0 8px; }
.trk { display: flex; align-items: center; gap: 5px; height: 36px; padding: 0 6px; border-bottom: 1px solid var(--divider); background: var(--paper); position: relative; transition: background .15s var(--ease-out); }
.trk.sel { background: var(--paper-pressed); }
.trk::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: center; transition: transform .18s var(--ease-out); }
.trk.sel::before { transform: scaleY(1); }
.trk .sw { width: 12px; height: 12px; border: 1px solid var(--ink); flex: none; cursor: pointer; }
.trk .nm { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.trk .nm input { width: 100%; height: 20px; padding: 0 4px; border: 1px solid var(--ink); background: var(--field); font: inherit; outline: none; }
.trk .ms { display: inline-flex; }
.trk .ms .btn { width: 20px; height: 20px; padding: 0; font-size: 9px; }
.trk .ms .btn + .btn { margin-left: -1px; }
.trk .vol { width: 40px; }
.trk .meter { width: 4px; height: 24px; background: var(--track); position: relative; flex: none; }
.trk .meter i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--accent-deep); transition: height .05s linear, background .1s; }
.trk .meter i.hot { background: var(--danger); }
#arr-canvas-wrap { position: relative; overflow: auto; }
#arr-canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; }

/* ---------- piano roll ---------- */
#roll-body { display: grid; grid-template-rows: 1fr 4px 64px; }
#roll-canvas-wrap { position: relative; overflow: hidden; cursor: crosshair; }
#roll-canvas { position: absolute; left: 0; top: 0; }
#vel-wrap { position: relative; overflow: hidden; border-top: 1px solid var(--ink); }
#vel-canvas { position: absolute; left: 0; top: 0; }
.roll-tools .btn.tool { width: 26px; padding: 0; font-size: 12px; }

/* ---------- instrument panel ---------- */
#inst-body { overflow-y: auto; overflow-x: hidden; padding: 0 0 20px; }
.inst-tabs { display: flex; border-bottom: 1px solid var(--ink); }
.inst-tabs .btn { flex: 1; border: 0; border-right: 1px solid var(--ink); height: 28px; }
.inst-tabs .btn:last-child { border-right: 0; }
.sec { border-bottom: 1px solid var(--divider); }
.sec-head { display: flex; align-items: center; gap: 8px; padding: 9px 14px 6px; }
.sec-head .label { color: var(--ink-muted); }
.sec-head .spacer { flex: 1; }
.sec-body { padding: 0 14px 10px; display: flex; flex-direction: column; gap: 3px; }
.row { display: grid; grid-template-columns: 78px 1fr 46px; align-items: center; gap: 8px; min-height: 22px; }
.row .k { font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .v { font-family: var(--font-mono); font-size: 10px; text-align: right; color: var(--ink); white-space: nowrap; }
.row.wide { grid-template-columns: 78px 1fr; }
.row .btn-group { flex-wrap: wrap; }
.row .btn-group .btn { flex: 1; padding: 0 5px; font-size: 9px; min-width: 0; }
.presets-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 4px; padding: 10px 14px 4px; }
#wavetable { border: 1px solid var(--ink); background: var(--field); cursor: crosshair; width: 100%; height: 96px; image-rendering: pixelated; }
.wt-shapes { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- virtual piano ---------- */
/* the body row is capped at the panel height: the side column must never push the keys past it */
#piano-body { display: grid; grid-template-columns: 110px 1fr; grid-template-rows: minmax(0, 1fr); }
#piano-side { border-right: 1px solid var(--ink); padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; min-height: 0; }
#piano-keys { position: relative; overflow: hidden; background: var(--sunken); }
.pk { position: absolute; top: 0; border: 1px solid var(--ink); font-family: var(--font-mono); font-size: 9px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 4px; cursor: pointer; transition: background-color .07s ease-out, color .07s ease-out; }
.pk.w { background: var(--key-white); height: 100%; color: var(--key-white-text); }
.pk.b { background: var(--key-black); height: 58%; z-index: 2; color: var(--key-black-text); width: 26px; }
.pk.w.down { background-color: var(--accent); background-image: var(--halftone); background-size: 5px 5px; color: var(--accent-text); }
.pk.b.down { background: var(--accent-deep); }
.pk .kk { font-weight: 600; font-size: 10px; }
.pk .nn { opacity: .7; }

/* ---------- dialogs & toasts ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 100; display: flex; align-items: center; justify-content: center; }
.dialog { background: var(--paper); border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--shadow-hard); min-width: 360px; max-width: 640px; max-height: 88vh; display: flex; flex-direction: column; }
.dialog .head { display: flex; align-items: center; height: 40px; padding: 0 6px 0 16px; border-bottom: 1px solid var(--ink); background: var(--paper-hover); }
.dialog .head .title { font-family: var(--font-display); font-size: 11px; letter-spacing: .04em; flex: 1; }
.dialog .body { padding: 16px; overflow: auto; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 10px; }
.dialog .body .row { grid-template-columns: 130px 1fr; }
.dialog .foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--divider); }
.dialog kbd { font-family: var(--font-mono); font-size: 10px; border: 1px solid var(--ink); padding: 1px 5px; background: var(--field); box-shadow: 1px 1px 0 var(--shadow-hard); }
.dialog table { border-collapse: collapse; width: 100%; font-size: 12px; }
.dialog td { padding: 3px 8px 3px 0; vertical-align: top; }
.dialog td:first-child { white-space: nowrap; }
.dialog h4 { margin: 8px 0 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
#toasts { position: fixed; right: 20px; bottom: 132px; display: flex; flex-direction: column; gap: 10px; z-index: 150; }
.toast { background: var(--paper); border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--shadow-hard); padding: 12px 16px; max-width: 380px; font-family: var(--font-mono); font-size: 10.5px; }
.toast .t { font-weight: 600; letter-spacing: 1.2px; font-size: 11px; margin-bottom: 4px; text-transform: uppercase; }
.toast.err .t { color: var(--danger); }
.toast .b { color: var(--muted); white-space: pre-wrap; }
.toast .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* context menu */
.ctx { position: fixed; z-index: 120; background: var(--paper); border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--shadow-hard); min-width: 160px; padding: 4px 0; }
.ctx .it { padding: 7px 14px; font-family: var(--font-mono); font-size: 10.5px; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; transition: background-color .08s, color .08s; }
.ctx .it:hover { background-color: var(--accent); background-image: var(--halftone); background-size: 5px 5px; color: var(--accent-text); }
.ctx .it.dis { opacity: .4; pointer-events: none; }
.ctx .sep { height: 1px; background: var(--divider); margin: 4px 0; }
.ctx .it .hk { color: var(--muted); font-size: 9.5px; }


/* ---------- motion ---------- */
/* Short, hard-edged moves that fit the sticker look: things drop onto the page from the top-left
 * (the direction the shadow implies) and lift off the same way. Every transient surface animates in
 * on mount and gets an .out class before removal (CT.UI.dismiss). */
@keyframes ct-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ct-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ct-sticker-in { from { opacity: 0; transform: translate(-8px, -8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ct-sticker-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate(4px, 4px) scale(.985); } }
@keyframes ct-slide-in-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes ct-slide-out-right { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(28px); } }
@keyframes ct-pop { from { opacity: 0; transform: translateY(-4px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ct-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ct-blink { 50% { opacity: .3; } }
@keyframes ct-eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

.scrim { animation: ct-fade-in .16s var(--ease-out); }
.scrim.out { animation: ct-fade-out .14s ease forwards; pointer-events: none; }
.dialog { animation: ct-sticker-in .2s var(--ease-out); }
.scrim.out .dialog { animation: ct-sticker-out .14s ease forwards; }
.toast { animation: ct-slide-in-right .22s var(--ease-out); }
.toast.out { animation: ct-slide-out-right .16s ease forwards; pointer-events: none; }
.ctx { animation: ct-pop .14s var(--ease-out); transform-origin: top left; }
.ctx.out { animation: ct-fade-out .1s ease forwards; pointer-events: none; }
.dirty-dot:not(.hidden), .chip:not(.hidden) { animation: ct-pop .2s var(--ease-out); }
#btn-rec.on { animation: ct-blink 1s ease-in-out infinite; }
/* the instrument panel rebuilds its sections on a tab / track switch: let them settle in one by one */
#inst-body .sec, #inst-body .presets-row { animation: ct-rise .22s var(--ease-out) both; }
#inst-body .sec:nth-child(2) { animation-delay: .03s; } #inst-body .sec:nth-child(3) { animation-delay: .06s; }
#inst-body .sec:nth-child(4) { animation-delay: .09s; } #inst-body .sec:nth-child(5) { animation-delay: .12s; } #inst-body .sec:nth-child(n+6) { animation-delay: .15s; }
/* focus mode / tab bar: the panel that takes the stage rises into place */
#main.switching .panel { animation: ct-rise .22s var(--ease-out); }
.range::-webkit-slider-thumb { transition: transform .12s var(--ease-out); }
.range:hover::-webkit-slider-thumb, .range:active::-webkit-slider-thumb { transform: scale(1.15); }
#tabbar .btn { transition: background-color .15s, color .15s; }

/* ---------- boot screen ---------- */
/* Covers the page until CT.App.boot() finishes (audio worklet + song); the app underneath is laid
 * out at opacity 0 so the canvases already have their sizes when the curtain lifts. */
#boot { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background-color: var(--paper); background-image: var(--halftone); background-size: 7px 7px; }
#boot.out { animation: ct-fade-out .32s ease forwards; pointer-events: none; }
.boot-card { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px 36px 24px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 6px 6px 0 var(--shadow-hard); animation: ct-sticker-in .3s var(--ease-out); }
.boot-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 15px; letter-spacing: .02em; }
.boot-logo .sq { width: 16px; height: 16px; background: var(--accent); border: 1px solid var(--ink); }
.boot-eq { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.boot-eq i { display: block; width: 8px; height: 100%; border: 1px solid var(--ink); background-color: var(--accent); background-image: var(--halftone); background-size: 4px 4px; transform-origin: bottom; animation: ct-eq .9s ease-in-out infinite; }
.boot-eq i:nth-child(2) { animation-delay: -.15s; } .boot-eq i:nth-child(3) { animation-delay: -.3s; } .boot-eq i:nth-child(4) { animation-delay: -.45s; }
.boot-eq i:nth-child(5) { animation-delay: -.6s; } .boot-eq i:nth-child(6) { animation-delay: -.75s; } .boot-eq i:nth-child(7) { animation-delay: -.9s; }
.boot-line { width: 180px; height: 5px; border: 1px solid var(--ink); background: var(--field); }
.boot-line i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .35s var(--ease-out); }
.boot-msg { min-height: 12px; }
#app.booting { opacity: 0; }
#app.intro { animation: ct-fade-in .3s ease; }
#app.intro #titlebar { animation: ct-rise .35s var(--ease-out) both; }
#app.intro .panel { animation: ct-rise .4s var(--ease-out) both; }
#app.intro #arr-panel { animation-delay: .05s; } #app.intro #roll-panel { animation-delay: .1s; }
#app.intro #inst-panel { animation-delay: .15s; } #app.intro #piano-panel { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}