@font-face { font-family:"Barlow Condensed"; src:url("./fonts/barlow-condensed-400.ttf") format("truetype"); font-style:normal; font-weight:400; font-display:swap; }
/* Melt — an integrated black instrument display with tactile controls. */
@font-face { font-family:"Melt Segment"; src:url("./fonts/dseg7-classic-italic.woff2") format("woff2"); font-style:italic; font-weight:400; font-display:swap; unicode-range:U+0030-0039,U+003A,U+002D,U+002E; }
:root { color-scheme:dark; --bg:#080c0b; --text:#d7dfda; --muted:#89968f; --line:#293630; --accent:#b8d4c6; --orange:#ff9254; --record:#ff7668; --mint:#9bdfbf; --violet:#a397c9; --panel:#080c0b; --screen:#080c0b; --type:"Barlow Condensed","Arial Narrow",sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --digital:"Melt Segment",var(--mono); font-family:var(--type); font-weight:400; font-size:14px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; color:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; outline-offset:4px; }
button { cursor:pointer; border:0; background:none; }
button:disabled { opacity:.35; cursor:default; }
button:hover { color:#f0f6f2; }
button:focus-visible,a:focus-visible,select:focus-visible { outline:0; box-shadow:inset 0 -1px 0 var(--accent); color:var(--text); }
input:focus-visible { outline:0; }
a { color:inherit; text-decoration:none; }
input[type=range] { width:100%; appearance:none; -webkit-appearance:none; background:transparent; margin:10px 0 0; height:14px; cursor:ew-resize; touch-action:pan-y; }
input[type=range]::-webkit-slider-runnable-track { height:3px; background:#28332d; border-bottom:0; border-radius:0; }
input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:7px; height:11px; margin-top:-4px; border-radius:0; background:#b8c8be; border:1px solid #4f6156; box-shadow:none; }
input[type=range]::-moz-range-track { height:3px; background:#28332d; border-bottom:0; }
input[type=range]::-moz-range-thumb { width:7px; height:11px; border-radius:0; border:1px solid #4f6156; background:#b8c8be; }
button svg,a svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
[hidden] { display:none!important; }
.icon-defs { position:absolute; width:0; height:0; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app-shell { height:100svh; min-height:650px; max-width:2000px; margin:auto; display:flex; flex-direction:column; background:var(--bg); box-shadow:none; }

/* Quiet source and preset controls let the field carry the color. */
.topbar { height:82px; position:relative; flex-shrink:0; padding:0 34px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px; background:var(--bg); border:0; }
.topbar::before,.topbar::after,.lower-controls::before,.lower-controls::after { content:none; position:absolute; width:6px; height:6px; border-radius:50%; background:none; box-shadow:none; pointer-events:none; display:none; }
.topbar::before { top:13px; left:13px; }
.topbar::after { top:13px; right:13px; }
.brand { position:relative; z-index:2; display:block; flex-shrink:0; width:150px; padding:0; line-height:0; background:none; }
.brand svg { display:block; width:100%; height:auto; overflow:visible; stroke:none; }
.brand .melt-letter { transform-box:fill-box; transform-origin:50% 0%; }
.brand[data-state=melting] { pointer-events:none; box-shadow:none; }
.brand[data-state=gone] { visibility:hidden; pointer-events:none; }
.source-tools { display:flex; align-items:center; justify-content:flex-start; gap:8px; min-width:0; }
.source-tools select { height:36px; min-width:0; max-width:205px; padding:0 20px 0 8px; color:var(--text); background:var(--bg); border:0; border-radius:0; font:400 15px/1 var(--type); letter-spacing:.3px; cursor:pointer; }
.source-tools select option { background:var(--bg); color:var(--text); font-weight:400; }
.source-tools select optgroup { background:var(--bg); color:var(--muted); font-weight:400; }
.import-button { display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0; padding:0; border:0; border-radius:3px; background:transparent; color:var(--muted); }
.import-button svg { width:14px; height:14px; stroke-width:1.5; }
.import-button:hover { background:#b8d4c60a; color:var(--text); }
.import-button:active { transform:translateY(1px); background:#b8d4c614; }
.mic-button { color:#b3c3b9; }
.header-actions { position:relative; display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; }
.palette-picker { position:static; }
.palette-picker>.icon-button { width:36px; height:36px; }
.palette-preview { width:21px; height:13px; border-radius:4px; background:var(--palette-preview,linear-gradient(90deg,#cbf3e9,#73dedf,#38b6e1,#4582dc,#7871cf)); opacity:.8; transition:opacity .2s; }
#palette-toggle:hover .palette-preview,#palette-toggle[aria-expanded=true] .palette-preview { opacity:1; }
.palette-menu { position:absolute; top:calc(100% + 10px); right:0; z-index:31; width:246px; max-width:calc(100vw - 36px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; padding:10px; border-radius:6px; background:#111b17; box-shadow:0 12px 36px #0009; }
.palette-option { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-width:0; padding:9px; border-radius:3px; color:#9dada4; font:400 14px/1 var(--type); text-align:left; }
.palette-swatch { width:100%; height:17px; border-radius:3px; opacity:.75; transition:opacity .2s; }
.palette-option:hover,.palette-option:focus-visible { color:var(--text); background:#b8d4c610; box-shadow:none; }
.palette-option:hover .palette-swatch,.palette-option[aria-checked=true] .palette-swatch { opacity:1; }
.palette-option[aria-checked=true] { color:var(--text); }
.palette-option[aria-checked=true]::after { content:""; position:absolute; bottom:13px; right:10px; width:4px; height:4px; border-radius:50%; background:currentColor; }
.preset-picker { position:relative; }
.preset-picker>.icon-button { width:36px; height:36px; }
.preset-picker>.icon-button[aria-expanded=true] { color:var(--text); background:#b8d4c614; }
.preset-menu { position:absolute; top:calc(100% + 10px); right:0; z-index:30; width:166px; padding:7px; background:#111b17; border-radius:5px; box-shadow:0 12px 36px #0009; }
.preset { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:40px; padding:0 13px; color:#a8b8ae; border:0; border-radius:3px; font:400 17px/1 var(--type); letter-spacing:.3px; text-align:left; }
.preset::after { content:""; width:4px; height:4px; border-radius:50%; background:transparent; }
.preset.active { color:var(--text); }
.preset.active::after { background:#b8ff60; box-shadow:0 0 8px #b8ff6040; }
.preset:hover,.preset:focus-visible { color:var(--text); background:#b8d4c610; box-shadow:none; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:6px; border:0; border-radius:3px; background:transparent; color:var(--muted); }
.icon-button:hover { color:var(--text); background:#b8d4c60a; }
.help-button { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; padding:0; border:0; border-radius:3px; color:var(--muted); font:400 17px/1 var(--type); }
.text-button { color:#b6c9bd; padding:8px 0; font:400 14px/1 var(--type); letter-spacing:.7px; text-transform:uppercase; }
.text-button[aria-expanded=true] { color:var(--text); }

.header-actions>.icon-button { width:36px; height:36px; background:transparent; }
.brand-code { color:#899b8f; font:8px/1.2 var(--mono); letter-spacing:1px; }

/* The approved field sits directly on the same black surface. */
.workspace { position:relative; flex:1; min-height:270px; margin:12px 18px 0; border:5px solid var(--bg); border-radius:0; background:var(--bg); box-shadow:none; }
.workspace::after { content:none; position:absolute; inset:-4px; border-radius:1px; border-top:1px solid #09121c; border-bottom:1px solid #c1d4e166; pointer-events:none; display:none; }
.sound-surface { position:absolute; inset:0; overflow:hidden; cursor:crosshair; touch-action:none; outline-offset:-6px; }
.sound-surface:focus { outline:0; }
.sound-surface:focus-visible .display-heading>span:first-child { color:#b8ff60; text-decoration:underline; text-underline-offset:4px; }
.sound-surface canvas { display:block; width:100%; height:100%; pointer-events:none; }
.display-heading { position:absolute; top:20px; left:24px; right:24px; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--accent); font:9px/1.2 var(--mono); letter-spacing:1.15px; text-transform:uppercase; pointer-events:none; text-shadow:0 1px 3px #000; }
.display-heading>span { display:inline-flex; align-items:center; gap:8px; }
.display-heading>span::before { content:none; }
.display-heading .display-status { letter-spacing:1px; }
.display-status[data-state=idle] { color:#8b9a91; }
.display-status[data-state=live] { color:var(--mint); }
.display-status[data-state=live]::before { background:currentColor; }
.display-status[data-state=hold] { color:var(--accent); }
.display-status[data-state=hold]::before { border-width:2px; }
.surface-handle { pointer-events:none; position:absolute; width:38px; height:38px; border:1.5px solid #b8ff60; border-radius:50%; transform:translate(-50%,-50%); opacity:0; display:grid; place-items:center; background:radial-gradient(circle,#b8ff6010,transparent 70%); box-shadow:0 0 12px #b8ff6040,inset 0 0 10px #b8ff6020; }
.surface-handle span { width:3px; height:3px; border-radius:50%; background:#d9ffae; box-shadow:0 0 6px #b8ff60; }
.drop-overlay { position:absolute; inset:15px; z-index:20; display:none; align-items:center; justify-content:center; pointer-events:none; background:#0a0b0cf2; border:1px dashed #b8d4c6aa; border-radius:0; color:var(--accent); font:400 21px/1 var(--type); letter-spacing:1.5px; text-transform:uppercase; }
.drag-over .drop-overlay { display:flex; }
.workspace-tools { position:absolute; z-index:2; bottom:18px; left:11px; right:12px; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; column-gap:16px; pointer-events:none; }
.workspace-tools>* { pointer-events:auto; }
.transport { display:flex; align-items:center; gap:4px; padding:5px; border:0; background:#080c0bf5; cursor:default; }
.play-button,.toggle-button { display:flex; align-items:center; justify-content:center; width:44px; min-width:44px; height:40px; padding:0; border:0; border-radius:3px; background:#b8d4c610; color:#afc0b5; }
.play-button { background:#b8d4c61e; color:var(--text); }
.play-button svg,.toggle-button svg { width:17px; height:17px; }
.play-button:hover,.toggle-button:hover { color:#f2f8f4; background:#b8d4c62a; }
.play-button:active,.toggle-button:active { transform:translateY(1px); }
.toggle-button[aria-pressed=true] { color:#c4ed9b; background:#b8ff601c; }
.view-controls { display:flex; justify-self:end; gap:3px; padding:3px; border:0; background:#080c0bf5; }
.view-controls .icon-button { width:30px; height:30px; border-color:transparent; background:transparent; box-shadow:none; color:#a7bab0; }
.view-controls .icon-button:focus-visible { box-shadow:inset 0 -1px 0 var(--accent); color:var(--text); }
.view-controls svg { width:18px; height:18px; }
.view-controls #piano-toggle[aria-pressed=true] { color:#c4ed9b; }
.controls-collapsed #transport-toggle svg { transform:rotate(180deg); }

/* The waveform and tactile grain/effect controls stay below the display. */
.lower-controls { position:relative; padding:0 34px 12px; flex-shrink:0; background:var(--bg); box-shadow:none; }
.lower-controls::before { bottom:13px; left:13px; }
.lower-controls::after { bottom:13px; right:13px; }
.waveform-meta { display:flex; align-items:center; justify-content:space-between; padding:11px 1px 6px; color:#acbfb2; font:italic 400 11px/1.2 var(--digital); letter-spacing:.3px; text-shadow:none; font-variant-numeric:tabular-nums; }
.waveform-meta #source-duration { color:#82968a; text-shadow:none; }
.waveform-track { position:relative; height:41px; margin:0 0 12px; border:0; background:var(--bg); }
.waveform-track canvas { display:block; width:100%; height:100%; }
.waveform-track input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:crosshair; margin:0; z-index:3; }
.waveform-track:has(input:focus-visible) .waveform-cursor { width:2px; background:#b8ff60; }
.waveform-cursor { position:absolute; left:0; top:0; height:100%; width:1px; background:var(--accent); pointer-events:none; }
.waveform-cursor span { position:absolute; top:-1px; left:-1px; width:3px; height:3px; background:var(--accent); }
.waveform-window { position:absolute; left:0; top:0; height:100%; min-width:5px; background:#b8d4c615; pointer-events:none; }
.parameter-panel { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); padding:18px 0 14px; border:0; }
.piano-panel { max-width:980px; margin:0 auto; padding:10px 0 17px; outline:0; animation:piano-appear .28s ease-out; }
.piano-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:16px; min-height:26px; margin:0 0 12px; color:var(--muted); }
.piano-toolbar button { display:inline-flex; align-items:center; justify-content:center; width:30px; height:26px; padding:0; color:var(--muted); }
.piano-toolbar button:hover { color:var(--text); }
.piano-toolbar svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.piano-octave { margin-right:auto; display:flex; align-items:center; gap:8px; }
.piano-octave-label { min-width:55px; text-align:center; font:10px/1 var(--mono); letter-spacing:.5px; color:#a7bab0; }
.piano-sustain[aria-pressed=true] { color:#c4ed9b; }
.piano-level { display:flex; align-items:center; gap:8px; }
.piano-level input[type=range] { width:78px; height:16px; margin:0; }
.piano-keybed { width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#405247 transparent; border-radius:4px; }
.piano-keys { position:relative; height:112px; width:100%; min-width:450px; isolation:isolate; }
.piano-key { position:absolute; top:0; height:100%; margin:0; padding:0; border:0; border-right:2px solid var(--bg); border-radius:2px 2px 5px 5px; background:linear-gradient(180deg,#bfc9b8,#a9baa9 72%,#8b9e8c); color:#435d4e; box-shadow:inset 0 1px 0 #e5edde80,inset 0 -4px 0 #5c76615c; touch-action:none; user-select:none; -webkit-user-select:none; }
.piano-key::after { content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; background:var(--palette-keys,linear-gradient(155deg,#dcf7f0,#a0e9e9,#78cdeb,#81aae7,#a39ede)); transition:opacity .35s; pointer-events:none; }
.piano-key:hover { color:#263d30; }
.piano-key.is-black { z-index:2; height:66%; border:1px solid #28372f; border-top:0; border-radius:0 0 4px 4px; background:linear-gradient(180deg,#15221b,#1b2b21 76%,#09140e); color:#839888; box-shadow:0 3px 5px #0006,inset 0 -4px 0 #030a0680; }
.piano-key.is-black::after { background:linear-gradient(#080c0b66,#080c0b66),var(--palette-dark-keys,linear-gradient(155deg,#cbf3e9,#73dedf,#38b6e1,#4582dc,#7871cf)); }
.piano-key.is-down::after { opacity:1; transition-duration:.04s; }
.piano-key.is-down { box-shadow:inset 0 2px 5px #152a1840; }
.piano-key:focus-visible { outline:0; box-shadow:inset 0 -3px 0 #c7ff82; }
.piano-key-label,.piano-note-label { position:absolute; z-index:3; left:50%; transform:translateX(-50%); pointer-events:none; font:10px/1 var(--mono); font-weight:400; }
.piano-key-label { bottom:13px; }
.piano-note-label { top:13px; font-size:8px; opacity:.6; }
.piano-key.is-black .piano-key-label { bottom:11px; font-size:9px; }
.piano-panel[aria-disabled=true] .piano-keybed { opacity:.4; }
@keyframes piano-appear { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
.parameter { position:relative; text-align:center; margin:0; border:0; }
.parameter:last-child { border-right:0; box-shadow:none; }
.parameter label { display:block; margin-top:9px; color:var(--muted); font:400 14px/1.1 var(--type); letter-spacing:.4px; }
.parameter-readout { display:inline-flex; justify-content:center; align-items:baseline; gap:6px; min-width:90px; max-width:calc(100% - 12px); min-height:32px; padding:7px 8px 6px; margin-top:7px; border:0; background:transparent; font-variant-numeric:tabular-nums; white-space:nowrap; }
.parameter .dial-value { color:var(--text); font:italic 400 17px/1 var(--digital); letter-spacing:.2px; }
.dial-unit { color:#82968a; font:8px/1 var(--mono); letter-spacing:.1px; text-shadow:none; }
.dial { --angle:-135deg; --amount:25%; position:relative; width:74px; height:74px; margin:0 auto; padding:10px; border-radius:50%; touch-action:none; cursor:ns-resize; }
.dial::before { content:none; }
.dial::after { content:""; position:absolute; inset:8px; border:1px solid #2d3b33; border-radius:50%; background:#090c0b; box-shadow:0 2px 5px #0009; pointer-events:none; }
.dial-face { position:relative; z-index:1; width:100%; height:100%; border:1px solid #3f443a; border-radius:50%; pointer-events:none; background:#191e1a; box-shadow:inset 0 1px 1px #c2c5ad35,inset 0 -2px 2px #000,0 2px 3px #0009; }
.dial-face::before { content:""; position:absolute; inset:5px; border-radius:50%; border:1px solid #444b3e; background:radial-gradient(ellipse at 32% 18%,#30372b,#171d17 55%,#0c100d); box-shadow:inset 0 1px 1px #b9bea523,inset 0 -2px 2px #0009; }
.dial-face::after { content:none; position:absolute; inset:10px; border-radius:50%; background:none; opacity:.8; display:none; }
.dial-indicator { position:absolute; inset:0; z-index:2; transform:rotate(var(--angle)); pointer-events:none; }
.dial-indicator::before { content:""; position:absolute; top:15px; left:calc(50% - 1.5px); width:3px; height:12px; border-radius:0; background:#d5e5db; box-shadow:none; }
.dial input { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:ns-resize; z-index:4; touch-action:none; }
.parameter:has(.dial input:focus-visible) label { color:var(--text); text-decoration:underline; text-underline-offset:4px; }
#volume-slider:focus-visible::-webkit-slider-thumb { background:#b8ff60; }
#volume-slider:focus-visible::-moz-range-thumb { background:#b8ff60; }
.dial:hover .dial-face::before { border-color:#829b8c; }

.record-row { display:flex; justify-content:space-between; align-items:center; gap:18px; min-height:49px; margin:0; padding-top:5px; }
.record-tools { display:flex; align-items:center; gap:16px; }
.record-button { display:flex; align-items:center; gap:8px; color:var(--muted); font:400 15px/1 var(--type); letter-spacing:.3px; padding:8px 0; }
.record-dot { width:5px; height:5px; border-radius:50%; background:var(--muted); }
.record-button.recording { color:var(--record); }
.recording .record-dot { background:var(--record); box-shadow:0 0 6px #ff766844; animation:recordpulse 1.5s ease infinite; }
.record-status { color:#8b9e91; font:9px var(--mono); }
.download-button { display:flex; align-items:center; gap:6px; color:var(--muted); font:400 15px/1 var(--type); letter-spacing:.3px; padding:8px 0; }
.download-button[aria-disabled=true] { opacity:.28; pointer-events:none; }
.download-button svg { width:14px; height:14px; }
.output-tools { display:flex; align-items:center; gap:10px; }
.output-tools svg { width:15px; height:15px; }
.volume-control { position:relative; display:flex; align-items:center; }
#volume-slider { width:96px; margin:0; height:24px; }
.volume-unity { position:absolute; left:calc(66.6667% - 1px); bottom:1px; width:1px; height:3px; background:#90a79a80; pointer-events:none; }
.volume-readout { position:absolute; bottom:calc(100% + 5px); left:50%; transform:translateX(-50%) translateY(3px); color:#b7d6c9; background:#080c0bf5; padding:3px 5px; border-radius:2px; white-space:nowrap; font:400 10px/1 var(--mono); opacity:0; pointer-events:none; transition:opacity .15s,transform .15s; }
.volume-control:is(:hover,:focus-within) .volume-readout { opacity:1; transform:translateX(-50%) translateY(0); }
.level-meter { position:relative; width:25px; height:7px; background:#28352d; }
.level-meter span { position:absolute; inset:0; width:0%; max-width:100%; background:var(--mint); transition:width .07s; }

/* Secondary surfaces keep the same light typography and restrained palette. */
.toast { position:fixed; bottom:20px; left:50%; transform:translate(-50%,15px); z-index:100; width:max-content; max-width:calc(100vw - 30px); padding:12px 18px; border:0; border-radius:4px; background:#142019fa; color:var(--text); font:400 15px/1.3 var(--type); letter-spacing:.3px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; box-shadow:0 8px 30px #0009; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
dialog { width:calc(100vw - 32px); max-width:430px; max-height:calc(100dvh - 32px); overflow:auto; padding:40px 34px 30px; border:0; border-radius:7px; text-align:center; color:var(--text); background:#0e1713; box-shadow:0 20px 100px #000d; }
dialog::backdrop { background:#030706bf; backdrop-filter:blur(9px); }
#close-help { position:absolute; top:13px; right:13px; }
#close-help svg { width:16px; height:16px; }
#help-title img,#help-title svg { display:block; max-width:100%; height:auto; margin:auto; }
#help-title { margin:0 0 27px; font:400 38px/1 var(--type); letter-spacing:1.2px; }
.help-guide { display:grid; gap:20px; }
dialog p { margin:0; color:#b9c9bf; font:400 19px/1.45 var(--type); letter-spacing:.15px; }
.help-shortcuts { display:flex; justify-content:center; gap:22px; margin:29px 0 24px; color:#8fa497; font:400 14px/1 var(--type); }
.help-shortcuts span { display:flex; flex-direction:column; align-items:center; gap:9px; }
.help-shortcuts kbd { min-width:30px; color:#c8d6ce; font:400 11px/1 var(--mono); }
.help-details { margin:0 auto 23px; color:#8fa497; }
.help-details summary { width:max-content; margin:auto; padding:5px; cursor:pointer; list-style:none; font:400 14px/1.3 var(--type); letter-spacing:.2px; }
.help-details summary::-webkit-details-marker { display:none; }
.help-details summary::after { content:" +"; margin-left:4px; }
.help-details[open] summary::after { content:" −"; }
.help-details summary:hover { color:var(--text); }
.help-details summary:focus-visible { outline:0; color:var(--text); text-decoration:underline; text-underline-offset:4px; }
.help-details p { margin:14px 0 0; font-size:15px; line-height:1.55; }
dialog .help-note { color:#718a7c; font:400 13px/1.4 var(--type); }
.primary-button { display:block; min-height:38px; margin:20px auto 0; padding:0 25px; border:0; border-radius:3px; color:var(--text); background:#b8d4c619; font:400 16px/1 var(--type); letter-spacing:.3px; }
.primary-button:hover { color:var(--text); background:#b8d4c629; }
@supports (background-clip:text) or (-webkit-background-clip:text) {
  .flow-text { background-image:var(--palette-soft,linear-gradient(100deg,#dcf7f0,#a0e9e9,#78cdeb,#81aae7,#a39ede)); background-size:280% 100%; background-clip:text; -webkit-background-clip:text; }
  #help-dialog:is(:hover,:focus-within) .flow-text { color:transparent; animation:textflow 7s ease-in-out infinite alternate; }
}
@keyframes textflow { from { background-position:0% 50%; } to { background-position:100% 50%; } }
/* Capture lives beside the source selector, without a dialog. */
.mic-capture { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.mic-capture .mic-button { color:var(--muted); }
.mic-time { color:var(--record); font:400 10px/1 var(--mono); letter-spacing:0; font-variant-numeric:tabular-nums; min-width:29px; }
.mic-cancel { width:32px; height:32px; padding:6px; }
.mic-cancel svg { width:13px; height:13px; }
.mic-meter { width:14px; height:3px; background:#26372d; overflow:hidden; }
.mic-meter span { display:block; height:100%; width:0; background:var(--record); }
.mic-capture[data-state=recording] .mic-button { color:var(--record); }
.mic-capture[data-state=requesting] .mic-time { color:var(--muted); }

.scene-fullscreen .app-shell { max-width:none; width:100%; height:100dvh; min-height:0; }
.scene-fullscreen .topbar { display:none; }
.scene-fullscreen .workspace { margin-top:10px; }
.controls-collapsed .app-shell { min-height:0; height:100dvh; }
.controls-collapsed .workspace { min-height:0; margin-bottom:12px; }
@keyframes recordpulse { 50% { opacity:.4; } }

@media(max-width:1100px) and (min-width:701px) {
  .topbar { gap:12px; padding:0 26px; }
  .source-tools { gap:7px; }
  .source-tools:has(.mic-capture:not([data-state=idle])) { gap:3px; }
  .source-tools:has(.mic-capture:not([data-state=idle])) select { max-width:90px; }
  .source-tools:has(.mic-capture:not([data-state=idle])) #import-button { display:none; }
  .source-tools select { max-width:140px; }
  .header-actions { gap:7px; }
  .lower-controls { padding-left:26px; padding-right:26px; }
}
@media(max-width:800px) and (min-width:701px) {
  .topbar { padding:0 20px; gap:8px; }
  .brand { width:125px; }
  .source-tools { gap:5px; }
  .source-tools select { max-width:110px; font-size:13px; padding-left:7px; }
  .header-actions { gap:4px; }
}
@media(max-width:700px) {
  .app-shell { min-height:850px; }
  .topbar { height:67px; padding:8px 22px; grid-template-columns:auto minmax(0,1fr); gap:12px; }
  .topbar::before,.topbar::after { top:7px; width:4px; height:4px; }
  .topbar::before { left:8px; }
  .topbar::after { right:8px; }
  .brand { width:125px; }
  .workspace-tools { bottom:13px; left:6px; right:6px; grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; }
  .source-tools { grid-column:1; grid-row:2; gap:10px; }
  .sound-surface { bottom:44px; }
  .source-tools:has(.mic-capture:not([data-state=idle])) { gap:2px; }
  .source-tools:has(.mic-capture:not([data-state=idle])) select { max-width:80px; padding-left:0; }
  .source-tools:has(.mic-capture:not([data-state=idle])) #import-button { display:none; }
  .mic-capture { gap:3px; }
  .source-tools select { height:34px; font-size:13px; letter-spacing:.25px; max-width:126px; padding:0 17px 0 8px; }
  .import-button { width:34px; height:34px; }
  .import-button svg { width:13px; height:13px; }
  .header-actions { grid-column:2; grid-row:1; justify-content:flex-end; gap:8px; }
  .header-actions>.icon-button,.header-actions>.help-button { width:34px; height:34px; }
  .workspace { min-height:270px; margin:10px 12px 0; border-width:4px; }
  .lower-controls { padding:0 22px 10px; }
  .lower-controls::before { left:8px; bottom:11px; width:4px; height:4px; }
  .lower-controls::after { right:8px; bottom:11px; width:4px; height:4px; }
  .transport { grid-column:1/-1; grid-row:1; justify-self:center; }
  .play-button,.toggle-button { min-width:40px; width:40px; height:38px; }
  .view-controls { grid-column:2; grid-row:2; }
  .view-controls .icon-button { width:27px; height:29px; }
  .view-controls svg { width:15px; height:15px; }
  .waveform-meta { padding-top:9px; }
  .waveform-track { height:37px; margin-bottom:9px; }
  .parameter-panel { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px 0; padding:17px 0 13px; }
  .piano-key { touch-action:pan-x; }
  .piano-keys { height:105px; }
  .piano-toolbar { gap:12px; }
  .piano-panel { padding-top:7px; }
  .parameter { border:0; box-shadow:none; }
  .dial { width:59px; height:59px; padding:8px; }
  .dial::after { inset:6px; }
  .dial-face::before { inset:4px; }
  .dial-face::after { inset:8px; }
  .dial-indicator::before { top:12px; width:2px; height:10px; left:calc(50% - 1px); }
  .parameter label { margin-top:8px; font-size:11px; letter-spacing:.65px; }
  .parameter .dial-value { font-size:17px; }
  .parameter-readout { width:calc(100% - 4px); max-width:none; min-width:0; min-height:39px; margin-top:6px; padding:5px 2px 4px; flex-direction:column; align-items:center; gap:4px; }
  .dial-unit { font-size:7px; line-height:1; }
  .record-row { min-height:47px; padding-top:5px; gap:6px 10px; flex-wrap:wrap; }
  .record-tools { gap:10px; flex-wrap:wrap; row-gap:4px; }
  .record-status { font-size:8px; }
  .record-button,.download-button { font-size:13px; letter-spacing:.5px; }
  .output-tools { gap:5px; margin-left:auto; }
  .output-tools .icon-button { width:27px; height:29px; }
  .output-tools .level-meter { width:17px; }
  .output-tools #volume-slider { width:64px; }
  .download-button svg { width:13px; height:13px; }
  .record-tools:has(.record-status:not(:empty)) { gap:7px; }
}
@media(max-width:430px) {
  .topbar { padding-left:18px; padding-right:18px; column-gap:9px; }
  .brand { width:105px; }
  .source-tools { gap:5px; }
  .source-tools select { max-width:103px; }
  .header-actions { gap:3px; }
  .header-actions>.icon-button,.header-actions>.help-button,.palette-picker>.icon-button,.preset-picker>.icon-button { width:30px; height:34px; }
  .lower-controls { padding-left:18px; padding-right:18px; }
  .view-controls .icon-button { width:28px; }

  .output-tools #volume-slider { width:60px; }
  .record-tools { gap:8px; }
}
@media(max-width:350px) {
  dialog { padding:40px 24px 26px; }
}
@media(min-width:701px) and (max-height:740px) {
  .topbar { height:72px; }
  .workspace { min-height:250px; margin-top:10px; }
  .parameter-panel { padding:14px 0 11px; }
  .dial { width:65px; height:65px; padding:9px; }
  .dial::after { inset:7px; }
  .dial-indicator::before { top:13px; height:11px; }
  .parameter label { margin-top:7px; }
  .record-row { min-height:43px; }
  .waveform-track { height:35px; margin-bottom:9px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

/* A quiet waveform editor for longer imports. */
.trim-dialog { max-width:680px; padding:36px 36px 25px; overflow-x:hidden; background:#0b1210; }
.trim-close { position:absolute; right:12px; top:12px; }
#trim-title { margin:0 30px 8px; font:400 28px/1.2 var(--type); letter-spacing:.3px; }
dialog .trim-name { color:var(--muted); font:400 14px/1.3 var(--type); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trim-track { position:relative; height:160px; margin:32px 0 9px; touch-action:none; user-select:none; cursor:crosshair; }
#trim-waveform { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.trim-selection { position:absolute; top:0; height:100%; cursor:grab; border-radius:3px; background:var(--palette-soft); opacity:.055; touch-action:none; }
.trim-selection:active { cursor:grabbing; }
.trim-selection:focus-visible { opacity:.1; outline:0; }
.trim-handle { position:absolute; top:0; height:100%; width:24px; transform:translateX(-50%); padding:0; touch-action:none; cursor:ew-resize; }
.trim-handle::before { content:""; position:absolute; top:0; bottom:0; left:11px; width:2px; border-radius:3px; background:#c5e9e0; box-shadow:0 0 9px #a0e9e933; }
.trim-handle::after { content:""; position:absolute; top:calc(50% - 13px); left:8px; width:8px; height:26px; border-radius:4px; background:#c5e9e0; }
.trim-handle:hover::after,.trim-handle:focus-visible::after { background:#effff9; box-shadow:0 0 12px #a0e9e955; }
.trim-handle:focus-visible { box-shadow:none; }
.trim-cursor { position:absolute; top:0; bottom:0; width:1px; background:#edfff7; pointer-events:none; }
.trim-timeline { display:flex; justify-content:space-between; color:#65796f; font:400 10px/1 var(--mono); }
.trim-times { display:flex; align-items:center; justify-content:space-between; margin-top:24px; gap:8px; }
.trim-times input { background:transparent; border:0; padding:8px 0; width:85px; min-width:0; color:#c6d8cf; font:400 15px/1 var(--mono); text-align:left; }
.trim-times input:last-child { text-align:right; }
.trim-times input:focus-visible { box-shadow:0 1px #a0e9e955; }
.trim-times output { color:#8caaa0; font:400 13px/1 var(--type); }
dialog .trim-error { color:var(--record); font-size:13px; min-height:18px; margin:3px 0; }
.trim-actions { display:flex; align-items:center; gap:8px; }
.trim-actions>span { color:#758f81; font:400 13px/1 var(--type); }
.trim-actions .primary-button { margin:0 0 0 auto; padding:0 18px; }
@media(max-width:480px) { .trim-dialog { padding:32px 24px 22px; } .trim-track { height:130px; margin-top:25px; } #trim-title { font-size:25px; } .trim-times input { width:78px; font-size:13px; } }

/* A quiet, local loop maker. The waveform carries the current palette. */
#loop-button { width:32px; height:36px; }
#loop-button svg { width:19px; height:19px; }
.loop-dialog { width:min(440px,calc(100vw - 28px)); padding:30px 30px 27px; text-align:center; max-height:calc(100svh - 28px); overflow:auto; }
.loop-dialog h2 { margin:0 0 22px; font:400 30px/1.2 var(--type); letter-spacing:.5px; }
#loop-close { position:absolute; top:12px; right:12px; }
.loop-settings { display:flex; align-items:center; justify-content:center; gap:8px; min-height:38px; }
.loop-settings select,.loop-settings input { border:0; border-radius:0; background:transparent; padding:6px; font:400 18px/1 var(--type); color:var(--text); }
.loop-settings select { max-width:140px; cursor:pointer; }
.loop-settings option { background:var(--bg); }
#loop-tempo[aria-pressed=true] { color:#c1ebe5; }
#loop-tempo-value { display:flex; align-items:center; gap:3px; }
#loop-bpm { width:62px; text-align:center; font-size:18px; }
#loop-tempo-value span { color:var(--muted); font:10px var(--mono); }
#loop-bpm:focus-visible { box-shadow:0 1px 0 var(--accent); }
.loop-track { position:relative; height:92px; margin:19px 0 10px; overflow:hidden; }
#loop-waveform { width:100%; height:100%; display:block; }
#loop-cursor { position:absolute; top:6px; bottom:6px; width:1px; background:#e0fff1bb; pointer-events:none; }
#loop-progress { display:block; appearance:none; border:0; height:2px; width:100%; background:#b8d4c610; border-radius:0; margin:0 0 12px; }
#loop-progress::-webkit-progress-bar { background:#b8d4c610; }
#loop-progress::-webkit-progress-value { background:var(--palette-soft); }
#loop-progress::-moz-progress-bar { background:var(--palette-soft); }
.loop-status { margin:0; color:var(--muted); font:400 15px/1.5 var(--type); }
.loop-error { margin:0; color:#f0aaa2; font:400 15px/1.4 var(--type); }
.loop-error:not(:empty) { margin-top:12px; }
.loop-result { display:flex; justify-content:center; align-items:center; gap:20px; margin:15px 0 0; }
.loop-result .download-button { color:var(--text); }
#loop-make { margin-top:24px; min-width:130px; font-weight:400; }
.loop-dialog[data-state=ready] #loop-make { background:transparent; color:var(--muted); padding:5px 16px; font-size:15px; margin-top:10px; }
.loop-dialog[data-state=ready] #loop-make:hover { color:var(--text); }
@media(max-width:430px) { .loop-dialog { padding:28px 22px 22px; } .record-tools { column-gap:8px; } }