/* NOTE panels — "Light, not chrome" (art direction v2).
   Panels are the solid casing with a hairline edge. Type sits on it in
   one family and five sizes, sentence case throughout. Nothing is boxed, filled
   or underlined: a chosen word is full strength at weight 500 with a small glowing
   dot of the scene's light before it. Buttons are words. Tokens:
   instrument-tokens.css. */
/* ================= Material: the casing ================= */
body.field-ui :is(#panel-audio .space-stage,#instrument-rail #record-menu.field-utility,.note-loop-panel.field-utility,.field-options-menu.is-floating,#about-dialog){
 background:var(--note-casing);-webkit-backdrop-filter:none;backdrop-filter:none;
 border:1px solid var(--note-edge);border-radius:var(--note-radius-panel);box-shadow:none;
}

/* ================= Shared type and control reset ================= */
body.field-ui :is(#panel-audio,#record-menu,#loop-panel){
 font:var(--note-weight-text) var(--note-text-sm)/var(--note-leading) var(--note-font);font-variant-numeric:var(--note-numeric);
 color:var(--note-text);color-scheme:dark;letter-spacing:0;-webkit-font-smoothing:antialiased;
}
body.field-ui :is(#panel-audio,#record-menu,#loop-panel) :is(button,summary,select,input,a){
 margin:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:none;text-decoration:none;
 filter:none;transform:none;-webkit-tap-highlight-color:transparent;
}
body.field-ui :is(#panel-audio,#record-menu,#loop-panel) :is(button,summary){cursor:pointer;transition:color var(--note-dur) var(--note-ease)}
body.field-ui :is(#record-menu,#loop-panel) [hidden]{display:none!important}
body.field-ui :is(#panel-audio,#record-menu,#loop-panel,#about-dialog) :focus-visible{outline:1px solid var(--note-text);outline-offset:3px;border-radius:var(--note-radius-focus)}
body.field-ui .field-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.field-ui .session-status:empty{display:none}

/* Labels: 12px, sentence case, muted, close to what they label, never wrapped. */
body.field-ui #panel-audio :is(.panel-row>label,.field-section-label,.field-clock .space-subtitle,.field-knob>label,.field-level>label,.device-section>label,.device-midi-options>label,[id=audio-input-controls]>label,label.demo-title){
 display:block;margin:0 0 var(--note-label-gap);padding:0;border:0;color:var(--note-text-muted);font:var(--note-weight-text) var(--note-text-xs)/var(--note-leading) var(--note-font);
 letter-spacing:0;text-transform:none;white-space:nowrap;
}
/* Running text: 14px, muted. */
body.field-ui #panel-audio :is(p,.demo-title small,.session-help,.record-help,[id=instrument-description],.field-control-hint,.field-clock-hint,.take-storage),
body.field-ui :is(#record-menu,#loop-panel) :is(p,.session-help,.record-help){
 margin:0;max-width:52ch;color:var(--note-text-muted);font:var(--note-weight-text) var(--note-text-sm)/var(--note-leading) var(--note-font);letter-spacing:0;
}
body.field-ui #panel-audio .demo-title small{display:block}
/* Hit areas stay 44px tall; their invisible padding tucks up under the label so
   the label reads 4-8px from its words. */
body.field-ui #panel-audio :is(.panel-row>label,.field-section-label,label.demo-title,.device-section>label,.device-midi-options>label)+:is(.panel-segmented,[id=root-grid],select,.arrangement-player){margin-top:-10px}
body.field-ui #panel-audio .panel-val{color:var(--note-text);font-size:var(--note-text-sm);font-variant-numeric:var(--note-numeric);text-align:right}

/* Buttons are words. Secondary actions are muted; hover brings them to full strength. */
body.field-ui :is(#panel-audio,#record-menu,#loop-panel) :is(.space-action,.field-action,.session-button,.take-btn,.sound-actions button,.device-actions button,.library-storage-details>summary,.midi-import-section>summary,.setup-options>summary,.take-options>summary,.setup-form button,.setup-rename button,.rail-btn){
 position:relative;display:inline-flex;align-items:center;gap:8px;min-height:var(--note-target);padding:0;
 color:var(--note-text-muted);font:var(--note-weight-text) var(--note-text-sm)/var(--note-leading) var(--note-font);text-align:left;white-space:nowrap;
}
body.field-ui :is(#panel-audio,#record-menu,#loop-panel) :is(.space-action,.field-action,.session-button,.take-btn,.sound-actions button,.device-actions button,summary,.setup-form button,.setup-rename button,.rail-btn):hover:not(:disabled){color:var(--note-text)}
/* A primary action is a word with the glowing point of light before it. */
body.field-ui :is(#panel-audio,#loop-panel) :is(#sample-record,#demo-toggle,#song-load,#save-setup-open,#midi-connect,#audio-input-connect,#audio-output-test,#loop-record,.setup-form button[type=submit],.library-toolbar>.field-action:not(.library-select)){color:var(--note-text)}
body.field-ui :is(#panel-audio,#loop-panel) :is(#sample-record,#demo-toggle,#song-load,#save-setup-open,#midi-connect,#audio-input-connect,#audio-output-test,#loop-record,.setup-form button[type=submit],.library-toolbar>.field-action:not(.library-select))::before{
 content:'';flex:none;width:var(--note-dot);height:var(--note-dot);border-radius:50%;background:var(--scene-accent);box-shadow:var(--note-glow);
}
body.field-ui :is(#panel-audio,#loop-panel) :is(#sample-record,#demo-toggle,#song-load,#save-setup-open,#midi-connect,#audio-input-connect,#audio-output-test,#loop-record):disabled::before{background:var(--note-text-disabled);box-shadow:none}
/* Destructive words are red, never boxed. */
body.field-ui :is(#panel-audio,#loop-panel) :is(.take-del,.library-select-delete,#loop-clear,#midi-disconnect,.field-options-menu button[aria-label^="Delete"]){color:var(--note-danger)}
/* Unavailable words drop to the disabled grey, destructive ones included. */
body.field-ui :is(#panel-audio,#record-menu,#loop-panel) :is(button,summary,select,input,#loop-clear,#midi-disconnect):disabled{color:var(--note-text-disabled);cursor:default}
/* Links: no underline; an arrow says they leave. */
body.field-ui #panel-audio a{display:inline-flex;align-items:center;min-height:var(--note-target);color:var(--note-text-muted);text-decoration:none}
body.field-ui #panel-audio a:hover{color:var(--note-text)}
body.field-ui #panel-audio a[target=_blank]::after{content:'\00a0\2197'}

/* ================= Selection is light ================= */
/* Option words: unselected faint, hover full, chosen full at 500 with a glowing dot
   that fades in before it. A group lit by NoteUI.light instead carries ONE light that
   glides to the chosen word (note-ui.css). */
body.field-ui #panel-audio :is(.panel-segmented:not([id=instrument-buttons]),[id=root-grid]){position:relative;display:flex;flex-wrap:wrap;gap:0 24px;min-width:0;margin:0;padding:0;background:none;border:0}
body.field-ui #panel-audio :is(.panel-segmented:not([id=instrument-buttons]),[id=root-grid],.menu-tabs,.device-tabs) button{
 position:relative;display:inline-flex;align-items:center;min-width:var(--note-target);min-height:var(--note-target);padding:0;
 color:var(--note-text-faint);font:var(--note-weight-text) var(--note-text-sm)/var(--note-leading) var(--note-font);white-space:nowrap;
}
body.field-ui #panel-audio :is(.panel-segmented:not([id=instrument-buttons]),[id=root-grid],.menu-tabs,.device-tabs) button:hover:not(:disabled){color:var(--note-text)}
body.field-ui #panel-audio :is(.panel-segmented:not([id=instrument-buttons]),[id=root-grid]) button:is(.active,[aria-pressed=true]),
body.field-ui #panel-audio :is(.menu-tabs,.device-tabs) button[aria-selected=true]{color:var(--note-text);font-weight:var(--note-weight-label)}
body.field-ui #panel-audio :is(.panel-segmented:not([id=instrument-buttons]),[id=root-grid],.menu-tabs,.device-tabs) button::before,
body.field-ui #panel-audio #instrument-buttons button::before,
body.field-ui #panel-audio .field-clock #metro-toggle::before{
 content:'';position:absolute;left:-12px;top:calc(50% - var(--note-dot) / 2);width:var(--note-dot);height:var(--note-dot);border-radius:50%;
 background:var(--scene-accent);box-shadow:var(--note-glow);opacity:0;transform:scale(.4);pointer-events:none;
 transition:opacity var(--note-dur-fade) var(--note-ease),transform var(--note-dur-fade) var(--note-ease);
}
body.field-ui #panel-audio :is(.panel-segmented:not([id=instrument-buttons]),[id=root-grid]) button:is(.active,[aria-pressed=true])::before,
body.field-ui #panel-audio :is(.menu-tabs,.device-tabs) button[aria-selected=true]::before,
body.field-ui #panel-audio #instrument-buttons button.active::before,
body.field-ui #panel-audio .field-clock #metro-toggle[aria-pressed=true]::before{opacity:1;transform:none}
/* A choice that doesn't apply right now (e.g. scales while playing Free) keeps its dot, unlit. */
body.field-ui #panel-audio :is(.panel-segmented,[id=root-grid]) button:disabled::before{background:var(--note-text-disabled);box-shadow:none}
/* A lit group (NoteUI.light, note-ui.css) carries one gliding light instead of per-word dots. */
body.field-ui #panel-audio [data-light]{position:relative}
body.field-ui #panel-audio [data-light] button::before{display:none}

/* Selects: the value in type and a small chevron. */
body.field-ui #panel-audio select{
 appearance:none;-webkit-appearance:none;display:block;width:auto;max-width:100%;min-width:0;min-height:var(--note-target);padding:0 24px 0 0;field-sizing:content;
 color:var(--note-text);font:var(--note-weight-text) var(--note-text-sm)/var(--note-leading) var(--note-font);cursor:pointer;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M.5.5 5 5 9.5.5' fill='none' stroke='%23bdbab3'/%3E%3C/svg%3E") right 2px center/10px 6px no-repeat;
}
body.field-ui #panel-audio select option{background:var(--note-casing);color:var(--note-text)}
/* Text fields: the words and a caret; the placeholder is faint type. */
body.field-ui :is(#panel-audio,#record-menu) :is(input[type=search],input[type=text],input[type=url],input:not([type]),.library-search,.setup-name,.take-name-input){
 appearance:none;-webkit-appearance:none;min-width:0;min-height:var(--note-target);padding:0;color:var(--note-text);
 font:var(--note-weight-text) var(--note-text-sm)/var(--note-leading) var(--note-font);cursor:text;
}
body.field-ui :is(#panel-audio,#record-menu) input::placeholder{color:var(--note-text-faint);opacity:1}
body.field-ui #panel-audio input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
body.field-ui #panel-audio input:disabled{color:var(--note-text-disabled)}
body.field-ui #panel-audio input:disabled::placeholder{color:var(--note-text-disabled)}

/* Sliders (sound only): a 1px track, the filled part in paper, a 2×14 tick. */
body.field-ui :is(#panel-audio,#loop-panel) input[type=range]:not(.field-dial input){
 appearance:none;-webkit-appearance:none;min-width:0;height:var(--note-target);margin:0;padding:0;background:transparent;cursor:ew-resize;writing-mode:horizontal-tb;direction:ltr;
}
body.field-ui :is(#panel-audio,#loop-panel) input[type=range]:not(.field-dial input)::-webkit-slider-runnable-track{
 height:1px;border:0;border-radius:0;box-shadow:none;background:linear-gradient(to right,var(--note-text) 0 var(--fill,0%),var(--note-track) var(--fill,0%));
}
body.field-ui :is(#panel-audio,#loop-panel) input[type=range]:not(.field-dial input)::-webkit-slider-thumb{
 appearance:none;-webkit-appearance:none;width:2px;height:14px;margin-top:-6.5px;border:0;border-radius:0;background:var(--note-text);box-shadow:none;
}
body.field-ui :is(#panel-audio,#loop-panel) input[type=range]:not(.field-dial input)::-moz-range-track{height:1px;border:0;border-radius:0;background:var(--note-track)}
body.field-ui :is(#panel-audio,#loop-panel) input[type=range]:not(.field-dial input)::-moz-range-progress{height:1px;background:var(--note-text)}
body.field-ui :is(#panel-audio,#loop-panel) input[type=range]:not(.field-dial input)::-moz-range-thumb{width:2px;height:14px;border:0;border-radius:0;background:var(--note-text)}

/* ================= The panel ================= */
/* 12px in from the display glass; fades and rises 8px as it opens. */
body.field-ui #panel-audio .space-stage{
 position:absolute;inset:auto auto 12px 12px;width:min(600px,calc(100% - 24px));height:auto;max-height:calc(100% - 24px);
 display:flex;flex-direction:column;overflow:hidden;margin:0;padding:0;transform:none;pointer-events:auto;
 transition:opacity var(--note-dur) var(--note-ease),translate var(--note-dur) var(--note-ease);
}
@starting-style{body.field-ui #panel-audio.open .space-stage{opacity:0;translate:0 var(--note-rise)}}
body.field-ui #panel-audio .space-stage[data-page=instrument]{width:min(720px,calc(100% - 24px))}
body.field-ui #panel-audio .space-stage[data-group=devices]{width:min(520px,calc(100% - 24px))}
/* Header: title at 28/300, tab words beside it, × at the far right. */
body.field-ui #panel-audio .field-header{display:flex;flex-wrap:wrap;align-items:baseline;flex:none;gap:0 32px;min-height:0;padding:20px var(--note-pad) 12px;border:0}
body.field-ui #panel-audio .field-header h2{margin:0;color:var(--note-text);font:var(--note-weight-light) var(--note-text-lg)/var(--note-leading-display) var(--note-font);letter-spacing:0;flex:none}
body.field-ui #panel-audio .field-header .menu-tabs,body.field-ui #panel-audio .device-tabs{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;gap:0 24px;width:auto;margin:0;padding:0;background:none;border:0}
body.field-ui #panel-audio .field-back{order:-1;min-height:var(--note-target);padding:0;color:var(--note-text-muted);font:var(--note-weight-text) var(--note-text-sm)/var(--note-leading) var(--note-font)}
body.field-ui #panel-audio .field-back:hover{color:var(--note-text)}
body.field-ui #panel-audio .field-back[hidden]{display:none}
/* Close is the one glyph: × at 18px, no circle. */
body.field-ui #panel-audio #sound-close.menu-dismiss,
body.field-ui #instrument-rail #record-menu #record-close,
body.field-ui #loop-panel .loop-heading button{
 position:static;inset:auto;display:inline-flex;align-items:center;justify-content:flex-end;flex:none;align-self:center;width:var(--note-target);height:var(--note-target);min-width:var(--note-target);min-height:var(--note-target);
 margin:0 -12px 0 auto;padding:0 12px 0 0;border:0;border-radius:0;background:none;box-shadow:none;opacity:1;transform:none;
 color:var(--note-text-muted);font:var(--note-weight-light) var(--note-text-md)/1 var(--note-font);letter-spacing:0;text-transform:none;
}
body.field-ui #panel-audio #sound-close.menu-dismiss svg,body.field-ui #record-menu #record-close svg,body.field-ui #loop-panel .loop-heading button svg{display:none}
body.field-ui #panel-audio #sound-close.menu-dismiss::after,body.field-ui #record-menu #record-close::after,body.field-ui #loop-panel .loop-heading button::after{content:'\00d7'}
body.field-ui #panel-audio #sound-close.menu-dismiss:hover,body.field-ui #instrument-rail #record-menu #record-close:hover,body.field-ui #loop-panel .loop-heading button:hover{color:var(--note-text)}
/* Body and footer. */
body.field-ui #panel-audio .menu-content{flex:1 1 auto;min-width:0;min-height:0;padding:4px var(--note-pad) 12px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--note-track) transparent}
body.field-ui #panel-audio .menu-pages{min-width:0;min-height:0}
body.field-ui #panel-audio .space-card{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;opacity:1;transform:none}
body.field-ui #panel-audio .space-card>.space-title{display:none}
body.field-ui #panel-audio .panel-group{margin:0;padding:0;border:0;background:none}
body.field-ui #panel-audio .panel-group-title{display:none}
body.field-ui #panel-audio .field-footer{display:flex;align-items:center;gap:24px;flex:none;margin:0 var(--note-pad);padding:0 0 4px;border:0}
body.field-ui #panel-audio .field-footer .menu-help{margin-left:auto}
body.field-ui #panel-audio .field-footer .field-mute{display:none}
body.field-ui #panel-audio .space-stage:is([data-group=play],[data-group=library],[data-group=devices]) .field-footer>.field-action{display:none}
body.field-ui #panel-audio .field-utility .field-footer{display:none}
body.field-ui #panel-audio .field-utility .menu-content{padding-bottom:var(--note-pad)}

/* ================= Sound · Instrument ================= */
body.field-ui #panel-audio .space-main.menu-current{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 40px;align-items:start}
body.field-ui #panel-audio #instrument-status{grid-column:1/-1;margin:0 0 12px;color:var(--note-text)}
body.field-ui #panel-audio #instrument-status:empty{display:none}
/* The instrument list: names at 18px in two short columns. */
body.field-ui #panel-audio #instrument-buttons{display:grid;grid-template-rows:repeat(5,auto);grid-auto-flow:column;grid-auto-columns:max-content;column-gap:32px;margin:0;padding:0 0 0 12px}
body.field-ui #panel-audio #instrument-buttons button{position:relative;display:flex;align-items:center;min-width:0;min-height:var(--note-target);padding:0;text-align:left}
body.field-ui #panel-audio #instrument-buttons .choice-name{color:var(--note-text-faint);font:var(--note-weight-text) var(--note-text-md)/var(--note-leading) var(--note-font);letter-spacing:0;transition:color var(--note-dur) var(--note-ease)}
body.field-ui #panel-audio #instrument-buttons button:hover .choice-name{color:var(--note-text)}
body.field-ui #panel-audio #instrument-buttons button.active .choice-name{color:var(--note-text);font-weight:var(--note-weight-label)}
/* The editor: name, a line of description, the knobs, the level. */
body.field-ui #panel-audio .instrument-editor{min-width:0;padding:10px 0 0;border:0;background:none;color:var(--note-text)}
body.field-ui #panel-audio .instrument-editor>.space-subtitle{margin:0;padding:0;border:0;color:var(--note-text);font:var(--note-weight-text) var(--note-text-md)/var(--note-leading) var(--note-font);letter-spacing:0}
body.field-ui #panel-audio #instrument-description{margin:0 0 20px;min-height:0}
body.field-ui #panel-audio .menu-character{display:grid;grid-template-columns:repeat(var(--knob-count,3),minmax(0,1fr));gap:20px 16px;align-items:start}
body.field-ui #panel-audio .menu-character .panel-row.field-knob{display:flex;flex-direction:column;align-items:center;gap:0;margin:0;min-width:0}
body.field-ui #panel-audio .menu-character .panel-row.field-knob>label{flex:none;margin-bottom:6px}
body.field-ui #panel-audio .menu-character .field-knob>.field-value{margin-top:-6px}
body.field-ui #panel-audio .menu-character .field-level{grid-column:1/-1;order:3;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0 12px;margin:0;padding:0;border:0;min-height:var(--note-target)}
body.field-ui #panel-audio .menu-character .field-level>label{margin:0}
body.field-ui #panel-audio .menu-character .field-level input[type=range]{width:100%;min-width:0;margin:0;padding:0}
body.field-ui #panel-audio .menu-character .field-switches{grid-column:1/-1;order:2;display:block;margin:0}
body.field-ui #panel-audio .field-control-hint{margin:4px 0 0;color:var(--note-text-faint);font-size:var(--note-text-xs)}
/* The knob: 1px ring, 2px value arc in the scene's light, 1px tick. No face. */
body.field-ui .field-dial{position:relative;flex:none;width:52px;height:52px;border-radius:50%;background:none;isolation:isolate}
body.field-ui .field-dial::before{content:'';position:absolute;inset:0;border-radius:50%;
 background:conic-gradient(from 225deg,var(--scene-accent) 0deg var(--sweep,0deg),transparent var(--sweep,0deg));
 -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
 filter:drop-shadow(0 0 4px var(--scene-accent))}
body.field-ui .field-dial-face{position:absolute;inset:0;border:1px solid var(--note-text-faint);border-radius:50%;background:none;box-shadow:none;pointer-events:none}
body.field-ui .field-dial-face::after{content:'';position:absolute;inset:3px;border-radius:50%;background:linear-gradient(var(--note-text),var(--note-text)) center 2px/1px 11px no-repeat;transform:rotate(var(--turn,0deg))}
body.field-ui .field-dial input[type=range]{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;padding:0;min-width:0;writing-mode:horizontal-tb;direction:ltr;touch-action:none;cursor:ns-resize}
body.field-ui .field-dial:has(input:focus-visible){outline:1px solid var(--note-text);outline-offset:3px}
body.field-ui .field-dial.is-dragging .field-dial-face{border-color:var(--note-text-muted)}
/* A value you can click to type. */
body.field-ui .field-value{position:relative;display:grid;place-items:center;min-width:52px;min-height:var(--note-target);margin:0;cursor:text}
body.field-ui .field-value:hover .panel-val{color:var(--note-text)}
body.field-ui .field-value .panel-val{text-align:center}
body.field-ui .field-value input{box-sizing:border-box;position:absolute;inset:8px 0;width:100%;height:auto;padding:0;border:0;border-radius:var(--note-radius-focus);background:var(--note-casing);color:var(--note-text);text-align:center;font:var(--note-weight-text) var(--note-text-sm) var(--note-font);font-variant-numeric:var(--note-numeric);outline:1px solid var(--note-text);outline-offset:0;appearance:textfield;-moz-appearance:textfield}
body.field-ui .field-value input::-webkit-inner-spin-button{appearance:none}
body.field-ui .field-value.is-editing>.panel-val{visibility:hidden}
/* Organ / rotary / mute groups inside the editor: label over words. */
body.field-ui #panel-audio .instrument-editor .panel-row:has(>.panel-segmented){display:block;margin:0}

/* ================= Sound · Sampler, Play · Song ================= */
body.field-ui #panel-audio .sound-playground p,body.field-ui #panel-audio .space-module>.panel-group>p{margin:0 0 8px}
body.field-ui #panel-audio .sound-actions{display:flex;flex-wrap:wrap;gap:0 32px;margin:0 0 4px}
body.field-ui #panel-audio .sound-footnote{margin-top:12px;color:var(--note-text-faint)}

/* ================= Play · Key & tempo ================= */
/* Key on the left, tempo on the right; each label sits just above its words. */
body.field-ui #panel-audio .space-stage[data-group=play]{width:min(640px,calc(100% - 24px))}
body.field-ui #panel-audio .menu-play.menu-current{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 40px;align-items:start}
body.field-ui #panel-audio .field-key-controls{min-width:0}
body.field-ui #panel-audio .field-key-controls>.panel-group{display:flex;flex-direction:column;margin:0}
body.field-ui #panel-audio .field-key-controls>.panel-group>.panel-row{display:block;margin:0}
body.field-ui #panel-audio .field-key-controls :is(#scalemode-buttons,#scale-buttons){padding-left:12px;margin-left:-12px}
body.field-ui #panel-audio .field-key-controls .field-section-label{margin:0}
body.field-ui #panel-audio .field-key-controls #root-grid{display:grid;grid-template-columns:repeat(6,var(--note-target));gap:0;margin-bottom:0}
body.field-ui #panel-audio .field-key-controls #root-grid button{justify-content:flex-start;font-size:var(--note-text-md)}
body.field-ui #panel-audio .field-key-controls .demo-title{order:4;margin:4px 0 0}
/* Tempo: a display numeral with BPM beside it. */
body.field-ui #panel-audio .field-clock{display:flex;flex-direction:column;align-items:flex-start;min-width:176px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
body.field-ui #panel-audio .field-clock .space-subtitle{margin:0 0 var(--note-label-gap);padding:0;border:0}
body.field-ui #panel-audio .field-clock .panel-row{display:block;margin:0}
body.field-ui #panel-audio .field-clock #bpm-display{position:relative;display:inline-flex;align-items:baseline;gap:8px;width:auto;height:auto;min-height:0;margin:0 0 4px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--note-text);cursor:ns-resize}
body.field-ui #panel-audio .field-clock #bpm-num{font:var(--note-weight-light) var(--note-text-xl)/var(--note-leading-display) var(--note-font);color:var(--note-text);text-shadow:none}
body.field-ui #panel-audio .field-clock .bpm-unit{color:var(--note-text-muted);font:var(--note-weight-text) var(--note-text-xs)/var(--note-leading) var(--note-font);letter-spacing:0;text-transform:none}
body.field-ui #panel-audio .field-clock .tempo-controls{display:flex;flex-wrap:wrap;gap:0 24px;margin:0;padding-left:12px;margin-left:-12px}
body.field-ui #panel-audio .field-clock #tap-tempo{color:var(--note-text)}
body.field-ui #panel-audio .field-clock #metro-toggle{width:auto;height:auto;color:var(--note-text-faint)}
body.field-ui #panel-audio .field-clock #metro-toggle svg{display:none}
body.field-ui #panel-audio .field-clock #metro-toggle[aria-pressed=true]{color:var(--note-text);font-weight:var(--note-weight-label)}
body.field-ui #panel-audio .field-clock-hint{margin:4px 0 0;color:var(--note-text-faint);font-size:var(--note-text-xs)}
body.field-ui .field-tempo-input{box-sizing:border-box;position:absolute;inset:0;width:100%;border:0;border-radius:var(--note-radius-focus);background:var(--note-casing);color:var(--note-text);outline:1px solid var(--note-text);outline-offset:3px;font:var(--note-weight-light) var(--note-text-xl)/var(--note-leading-display) var(--note-font);font-variant-numeric:var(--note-numeric);padding:0;appearance:textfield}
body.field-ui .field-tempo-input::-webkit-inner-spin-button{appearance:none}

/* ================= Play · Backing ================= */
body.field-ui #panel-audio .demo-group{display:flex;flex-direction:column;align-items:stretch}
body.field-ui #panel-audio .arrangement-player{display:flex;flex-wrap:wrap;align-items:center;gap:0 32px;margin:0;padding-left:12px;margin-left:-12px}
body.field-ui #panel-audio #demo-select{font-size:var(--note-text-md)}
body.field-ui #panel-audio #demo-status{display:block;margin:0;color:var(--note-text-muted);font-size:var(--note-text-sm)}
body.field-ui #panel-audio .demo-group>.demo-title{margin:0 0 var(--note-row-gap)}
body.field-ui #panel-audio .demo-group>.panel-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0 12px;margin:0}
body.field-ui #panel-audio .demo-group>.panel-row>label{margin:0}
body.field-ui #panel-audio .midi-import-section{margin:12px 0 0;padding:4px 0 0;border-top:1px solid var(--note-rule)}
body.field-ui #panel-audio .midi-import-section>summary{list-style:none}
body.field-ui #panel-audio .midi-import-section>summary::-webkit-details-marker{display:none}
body.field-ui #panel-audio .midi-import-section>summary::after,body.field-ui #panel-audio .library-storage-details>summary::after{content:'\2193';color:var(--note-text-faint)}
body.field-ui #panel-audio :is(.midi-import-section,.library-storage-details)[open]>summary::after{content:'\2191'}
body.field-ui #panel-audio .midi-import-section p{margin:0 0 8px}
body.field-ui #panel-audio #demo-source-key-row{margin:8px 0}

/* ================= Library ================= */
body.field-ui #panel-audio .space-stage[data-group=library]{width:min(600px,calc(100% - 24px))}
body.field-ui #panel-audio .field-utility .session-setups.menu-current{display:block}
body.field-ui #panel-audio .library-toolbar{display:flex;align-items:center;gap:32px;margin:0 0 8px}
body.field-ui #panel-audio .library-toolbar .library-search{flex:1}
body.field-ui #panel-audio .library-toolbar>.field-action{flex:none}
body.field-ui #panel-audio .library-no-results{margin:12px 0}
/* Selection mode (NoteUI.select): a line of words over the rows; each chosen row has its point of light. */
body.field-ui #panel-audio :is(.library-toolbar>[hidden],.library-select-bar[hidden]){display:none}
body.field-ui #panel-audio .library-select-bar{display:flex;align-items:center;flex-wrap:wrap;gap:0 24px;margin:0 0 8px}
body.field-ui #panel-audio .library-select-bar .library-select-count{flex:1;min-width:0;color:var(--note-text);font-variant-numeric:var(--note-numeric);white-space:nowrap}
body.field-ui #panel-audio .library-select-bar>.field-action:not(.library-select-delete){color:var(--note-text)}
body.field-ui #panel-audio #takes-list.is-selecting :is(.take-actions,.take-export-status){display:none}
body.field-ui #panel-audio #takes-list.is-selecting>.take-row{--select-y:24px}
body.field-ui #panel-audio #takes-list.is-selecting>.take-row .take-name{color:var(--note-text-faint);transition:color var(--note-dur) var(--note-ease)}
body.field-ui #panel-audio #takes-list.is-selecting>.take-row:hover .take-name{color:var(--note-text)}
body.field-ui #panel-audio #takes-list.is-selecting>.take-row[aria-selected=true] .take-name{color:var(--note-text);font-weight:var(--note-weight-label)}
/* A row's keyboard focus is the word ring around its name, never a box around the row (release.css shows it for keys only). */
body.field-ui #panel-audio #takes-list.is-selecting>.take-row:focus-visible{outline:none!important}
body.field-ui #panel-audio #takes-list.is-selecting .take-name{flex:0 1 auto}
body.field-ui #panel-audio #takes-list.is-selecting .take-dur{margin-left:auto}
body.field-ui.keyboard-navigation #panel-audio #takes-list.is-selecting>.take-row:focus-visible .take-name{color:var(--note-text);outline:1px solid var(--note-text);outline-offset:3px;border-radius:var(--note-radius-focus)}
/* Save form: a name and two words. */
body.field-ui #panel-audio .setup-form{display:flex;align-items:center;gap:0 32px;margin:0 0 12px;padding:0;background:none;border:0}
body.field-ui #panel-audio .setup-form>input{flex:1}
body.field-ui #panel-audio .setup-form>button{flex:none}
/* Rows: poster, title at 18, a muted line, a word for more. */
body.field-ui #panel-audio .setup-list{display:grid;gap:4px;max-height:none;overflow:visible}
body.field-ui #panel-audio .setup-row{display:flex;align-items:center;gap:16px;padding:4px 0;border:0}
body.field-ui #panel-audio :is(.setup-row img,.take-thumbnail){flex:none;float:none;width:64px;height:40px;margin:0;object-fit:cover;border-radius:var(--note-radius-poster)}
body.field-ui #panel-audio .setup-row .setup-open{flex:1;min-width:0;min-height:var(--note-target);display:block;padding:0;text-align:left;color:var(--note-text);font:var(--note-weight-text) var(--note-text-md)/var(--note-leading) var(--note-font);overflow-wrap:anywhere}
body.field-ui #panel-audio .setup-row .setup-open small{display:block;margin:0;color:var(--note-text-muted);font-size:var(--note-text-xs)}
body.field-ui #panel-audio .setup-rename{display:flex;flex:1;align-items:center;gap:0 24px;flex-wrap:wrap;min-width:0}
body.field-ui #panel-audio .setup-rename input{flex:1;min-width:96px}
body.field-ui #panel-audio :is(.setup-options,.take-options){flex:none;padding:0;background:none;border:0}
body.field-ui #panel-audio :is(.setup-options,.take-options)>summary{list-style:none}
body.field-ui #panel-audio :is(.setup-options,.take-options)>summary::-webkit-details-marker{display:none}
/* Row actions float beside their trigger on a small glass sheet. */
body.field-ui .field-options-menu.is-floating{position:fixed;inset:auto;margin:0;min-width:176px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:4px 16px;overflow:auto;max-height:calc(100dvh - 32px);color:var(--note-text)}
body.field-ui .field-options-menu::backdrop{background:transparent}
body.field-ui .field-options-menu .take-downloads{display:grid;gap:0;margin:0 0 4px;padding:0 0 4px;border-bottom:1px solid var(--note-rule)}
body.field-ui .field-options-menu .take-downloads>span{display:none}
body.field-ui #panel-audio .field-options-menu :is(button,a){display:flex;align-items:center;width:100%;min-height:var(--note-target);padding:0;color:var(--note-text-muted);text-align:left;font:var(--note-weight-text) var(--note-text-sm)/var(--note-leading) var(--note-font);white-space:nowrap}
body.field-ui #panel-audio .field-options-menu :is(button,a):hover{color:var(--note-text)}
/* Recordings. */
/* Take progress shows once, inside Library: the scene's status toast (#audio-status) would sit on the panel's edge. */
body.field-ui #panel-audio #field-takes>.session-status{margin:0 0 var(--note-row-gap)}
body.field-ui:has(#panel-audio.open .space-stage[data-group=library]) #audio-status{visibility:hidden}
body.field-ui #panel-audio .field-takes #takes-menu{display:block;max-height:none;margin:0;padding:0;border:0;overflow:visible}
body.field-ui #panel-audio .field-takes .record-library-heading{display:none}
body.field-ui #panel-audio #takes-empty{padding:0;margin:4px 0 12px;color:var(--note-text-muted);font-size:var(--note-text-sm)}
body.field-ui #panel-audio .field-takes .take-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:center;min-height:0;margin:0;padding:4px 0;border:0;border-radius:0;background:none}
body.field-ui #panel-audio .field-takes .take-heading{display:flex;align-items:center;gap:16px;min-width:0;margin:0}
body.field-ui #panel-audio .field-takes .take-name{flex:1;min-width:0;color:var(--note-text);font:var(--note-weight-text) var(--note-text-md)/var(--note-leading) var(--note-font);overflow-wrap:anywhere}
body.field-ui #panel-audio .field-takes .take-dur{color:var(--note-text-muted);font-size:var(--note-text-xs);font-variant-numeric:var(--note-numeric)}
body.field-ui #panel-audio .field-takes .take-actions{display:flex;align-items:center;justify-content:flex-end;gap:0 24px;flex-wrap:wrap}
/* Play / Stop and Download are words; their icons are dropped. */
body.field-ui #panel-audio .field-takes :is(.take-play,.take-save) svg{display:none}
body.field-ui #panel-audio .field-takes .take-play{color:var(--note-text)}
body.field-ui #panel-audio .field-takes .take-play::after{content:'Play'}
body.field-ui #panel-audio .field-takes .take-play[data-icon=stop]::after{content:'Stop'}
body.field-ui #panel-audio .field-takes .take-play.playing::before{content:'';width:var(--note-dot);height:var(--note-dot);border-radius:50%;background:var(--scene-accent);box-shadow:var(--note-glow)}
body.field-ui #panel-audio .field-takes .take-save::after{content:'Download'}
body.field-ui #panel-audio .field-takes .take-storage{grid-column:1/-1;display:none;margin:0;color:var(--note-text-faint);font-size:var(--note-text-xs)}
body.field-ui #panel-audio .field-takes .take-row.is-saved .take-storage{display:block}
body.field-ui #panel-audio .take-export-status{grid-column:1/-1;margin:0;color:var(--note-text);font-size:var(--note-text-sm)}
body.field-ui #panel-audio .take-export-status:empty{display:none}
body.field-ui #panel-audio .take-name-input{width:100%}
body.field-ui #panel-audio .library-storage-details{margin:12px 0 0;padding:4px 0 0;border-top:1px solid var(--note-rule)}
body.field-ui #panel-audio .library-storage-details>summary{list-style:none}
body.field-ui #panel-audio .library-storage-details>summary::-webkit-details-marker{display:none}
body.field-ui #panel-audio .library-storage{margin:0;padding:0;border:0}
body.field-ui #panel-audio .library-storage-details .record-help{margin:4px 0 0}

/* ================= Audio & MIDI ================= */
body.field-ui #panel-audio .device-tabs{margin:0 0 8px;padding-left:12px;margin-left:-12px}
body.field-ui #panel-audio .device-section{margin:0;padding:0;border:0}
body.field-ui #panel-audio .device-section h4{margin:0 0 4px;color:var(--note-text);font:var(--note-weight-text) var(--note-text-md)/var(--note-leading) var(--note-font)}
body.field-ui #panel-audio .device-section p{margin:0 0 var(--note-row-gap)}
body.field-ui #panel-audio :is(.device-section>label,.device-midi-options>label,[id=audio-input-controls]>label){margin:var(--note-row-gap) 0 0}
body.field-ui #panel-audio .device-section select{margin:0}
body.field-ui #panel-audio .device-actions{display:flex;flex-wrap:wrap;gap:0 32px;margin:0;padding-left:12px;margin-left:-12px}
body.field-ui #panel-audio .demo-transport{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;padding-left:12px;margin-left:-12px}
body.field-ui #panel-audio #midi-status{margin:0 0 4px}
body.field-ui #panel-audio .device-meter{display:flex;align-items:center;gap:12px;margin:8px 0}
body.field-ui #panel-audio .device-meter meter{flex:1;min-width:0;height:1px;appearance:none;-webkit-appearance:none;background:var(--note-track);border:0}
body.field-ui #panel-audio .device-meter meter::-webkit-meter-bar{height:1px;background:var(--note-track);border:0;border-radius:0}
body.field-ui #panel-audio .device-meter meter::-webkit-meter-optimum-value,body.field-ui #panel-audio .device-meter meter::-webkit-meter-suboptimum-value,body.field-ui #panel-audio .device-meter meter::-webkit-meter-even-less-good-value{background:var(--note-text);border-radius:0}
body.field-ui #panel-audio .device-meter meter::-moz-meter-bar{background:var(--note-text)}
body.field-ui #panel-audio .device-meter span,body.field-ui #panel-audio #audio-input-db{color:var(--note-text-muted);font-size:var(--note-text-xs);font-variant-numeric:var(--note-numeric);white-space:nowrap}
body.field-ui #panel-audio #audio-input-controls .device-monitor{display:flex;align-items:center;gap:12px;color:var(--note-text);font-size:var(--note-text-sm)}
body.field-ui #panel-audio #audio-input-gain{flex:1;min-width:0}

/* ================= Record ================= */
body.field-ui #instrument-rail #record-menu.field-utility{width:340px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:16px var(--note-pad) var(--note-pad);gap:0;transition:opacity var(--note-dur) var(--note-ease),translate var(--note-dur) var(--note-ease)}
body.field-ui #instrument-rail #record-menu.field-utility.open{display:block}
@starting-style{body.field-ui #instrument-rail #record-menu.field-utility.open{opacity:0;translate:0 var(--note-rise)}}
body.field-ui #record-menu.field-utility .record-header{display:flex;align-items:center;gap:24px;margin:0 0 8px;padding:0;border:0}
body.field-ui #record-menu.field-utility .record-header h2{margin:0;color:var(--note-text);font:var(--note-weight-light) var(--note-text-lg)/var(--note-leading-display) var(--note-font);letter-spacing:0}
body.field-ui #record-menu.field-utility .record-new h3{display:none}
body.field-ui #record-menu.field-utility .record-actions{display:flex;flex-direction:column;gap:4px}
/* Each way to record: the record light, a name, a line under it. */
body.field-ui #instrument-rail #record-menu.field-utility .record-actions button{
 display:grid;grid-template-columns:var(--note-dot) minmax(0,1fr);align-items:start;column-gap:12px;width:100%;min-height:var(--note-target);
 margin:0;padding:4px 0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--note-text);text-align:left;white-space:normal;
}
body.field-ui #instrument-rail #record-menu.field-utility .record-actions button::before{content:'';width:var(--note-dot);height:var(--note-dot);margin-top:9px;border-radius:50%;background:var(--note-danger);box-shadow:0 0 10px 1px var(--note-danger);opacity:.85}
body.field-ui #record-menu .capture-copy{text-align:left;white-space:normal}
body.field-ui #record-menu .capture-copy strong{display:block;color:var(--note-text);font:var(--note-weight-text) var(--note-text-md)/var(--note-leading) var(--note-font)}
body.field-ui #record-menu .capture-copy small{display:block;margin:0;color:var(--note-text-muted);font:var(--note-weight-text) var(--note-text-xs)/var(--note-leading) var(--note-font)}
body.field-ui #instrument-rail #record-menu.field-utility .record-actions button:hover .capture-copy strong{font-weight:var(--note-weight-label)}
body.field-ui #instrument-rail #record-menu.field-utility .record-actions button:hover::before{opacity:1}
body.field-ui #record-menu #record-status{max-width:none;margin:8px 0 0;padding:0;color:var(--note-text);font:var(--note-weight-text) var(--note-text-sm)/var(--note-leading) var(--note-font)}
body.field-ui #record-menu #record-status:empty{display:none}
body.field-ui #instrument-rail #record-menu.field-utility>.field-action{
 display:flex;width:100%;min-height:var(--note-target);margin:12px 0 0;padding:0;border:0;border-top:1px solid var(--note-rule);border-radius:0;background:none;
 color:var(--note-text-muted);font:var(--note-weight-text) var(--note-text-sm)/var(--note-leading) var(--note-font);letter-spacing:0;text-transform:none;text-align:left;justify-content:flex-start;
}
body.field-ui #instrument-rail #record-menu.field-utility>.field-action:hover{color:var(--note-text)}

/* ================= Phrase loop ================= */
body.field-ui .note-loop-panel.field-utility{
 position:fixed;z-index:80;left:calc(var(--frame-l) + 12px);right:auto;bottom:calc(var(--visual-bottom) + 12px);transform:none;
 width:min(440px,calc(100vw - 2 * var(--frame-edge) - 24px));max-height:calc(100dvh - var(--visual-bottom) - var(--frame-edge) - var(--frame-t) - 24px);overflow:auto;
 padding:16px var(--note-pad) var(--note-pad);transition:opacity var(--note-dur) var(--note-ease),translate var(--note-dur) var(--note-ease);
}
@starting-style{body.field-ui .note-loop-panel.field-utility:not([hidden]){opacity:0;translate:0 var(--note-rise)}}
body.field-ui #loop-panel .loop-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 4px;padding:0;border:0}
body.field-ui #loop-panel .loop-heading h3{margin:0;color:var(--note-text);font:var(--note-weight-light) var(--note-text-lg)/var(--note-leading-display) var(--note-font);letter-spacing:0;text-transform:none}
body.field-ui #loop-panel .loop-heading+.session-help{margin:0}
body.field-ui #loop-panel .field-loop-display{margin:12px 0 4px}
body.field-ui #loop-panel .field-loop-display .session-status{min-height:0;margin:0 0 8px;color:var(--note-text);font:var(--note-weight-text) var(--note-text-md)/var(--note-leading) var(--note-font)}
/* The loop's progress is the playhead: a line lit by the scene. */
body.field-ui #loop-panel .loop-progress{display:block;width:100%;height:1px;margin:0;border:0;border-radius:0;appearance:none;-webkit-appearance:none;background:var(--note-track);accent-color:var(--scene-accent);overflow:hidden}
body.field-ui #loop-panel .loop-progress::-webkit-progress-bar{background:var(--note-track)}
body.field-ui #loop-panel .loop-progress::-webkit-progress-value{background:var(--scene-accent)}
body.field-ui #loop-panel .loop-progress::-moz-progress-bar{background:var(--scene-accent)}
body.field-ui #loop-panel .loop-actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:0 28px;border:0;padding-left:12px;margin-left:-12px}
body.field-ui #loop-panel .loop-actions button{flex:none;margin:0}
body.field-ui #loop-panel[data-state=recording] #loop-record::before,body.field-ui #loop-panel[data-state=overdubbing] #loop-record::before{background:var(--note-danger);box-shadow:0 0 10px 1px var(--note-danger)}
body.field-ui #loop-panel[data-state=recording] #loop-record,body.field-ui #loop-panel[data-state=overdubbing] #loop-record{color:var(--note-danger)}

/* ================= The keyboard (pre-redesign material; labels at 12px) ================= */
body.field-ui #keyboard .key-label{font-size:var(--note-text-xs);color:#bfc3b9}
body.field-ui.light-ground #keyboard .key-label,body.field-ui.paper-world #keyboard .key-label{color:#354239}
body.field-ui #keyboard .white-key:not(.pressed){border-color:#ffffff26;box-shadow:inset 0 1px 0 #ffffff24,0 4px 12px #0004}
body.field-ui #keyboard .black-key:not(.pressed){border-color:#ffffff19}
/* A played key is backlit in cool white (index.html); its label darkens to stay legible on the light. */
body.field-ui #keyboard .white-key.pressed .key-label{color:#24324a;transition-duration:30ms}
body.field-ui #keyboard .key-label{transition:color 220ms ease-out}
@media(prefers-reduced-motion:reduce){body.field-ui #keyboard .key::after,body.field-ui #keyboard .key-label{transition:none}}

/* ================= About ================= */
body.field-ui #about-dialog{transition:opacity var(--note-dur) var(--note-ease),translate var(--note-dur) var(--note-ease)}
@starting-style{body.field-ui #about-dialog[open]{opacity:0;translate:0 var(--note-rise)}}

/* ================= Phones ================= */
@media(max-width:800px){
 body.field-ui #panel-audio .space-stage,body.field-ui #panel-audio .space-stage[data-page=instrument],body.field-ui #panel-audio .space-stage[data-group]{left:8px;bottom:8px;width:calc(100% - 16px);max-height:calc(100% - 16px)}
 body.field-ui #panel-audio .space-main.menu-current{grid-template-columns:minmax(0,1fr);gap:12px}
 body.field-ui #panel-audio #instrument-buttons{grid-template-rows:repeat(5,auto);column-gap:24px}
 body.field-ui #panel-audio .instrument-editor{padding:0}
 body.field-ui .note-loop-panel.field-utility{left:calc(var(--frame-edge) + 8px);width:calc(100vw - 2 * var(--frame-edge) - 16px)}
}
@media(max-width:600px){
 body.field-ui #panel-audio .field-header{padding:16px var(--note-pad) 8px;gap:0 24px}
 body.field-ui #panel-audio .field-header .menu-tabs{order:3;flex-basis:100%;padding-left:12px;margin-left:-12px}
 body.field-ui #panel-audio .field-footer .menu-help{display:none}
 body.field-ui #panel-audio .menu-character{gap:16px 12px}
 body.field-ui .field-dial{width:48px;height:48px}
 body.field-ui #panel-audio .menu-play.menu-current{grid-template-columns:minmax(0,1fr);gap:12px}
 body.field-ui #panel-audio .library-toolbar{gap:24px}
 body.field-ui #panel-audio .library-select-bar .library-select-count{flex-basis:100%}
 body.field-ui #panel-audio .setup-form{flex-wrap:wrap}
 body.field-ui #panel-audio .setup-form>input{flex-basis:100%}
 body.field-ui #panel-audio .field-takes .take-row{grid-template-columns:minmax(0,1fr);row-gap:0}
 body.field-ui #panel-audio .field-takes .take-actions{justify-content:flex-start;padding-left:80px}
 body.field-ui #instrument-rail #record-menu.field-utility{width:auto}
}
@media(max-width:360px){
 body.field-ui #panel-audio #instrument-buttons{grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto}
 body.field-ui #panel-audio .field-takes .take-actions{padding-left:0}
}
@media(prefers-reduced-motion:reduce){
 body.field-ui :is(#panel-audio,#record-menu,#loop-panel) *,body.field-ui :is(#panel-audio .space-stage,#record-menu,#loop-panel,#about-dialog){transition:none}
}