@font-face{font-family:Atari;src:url('fonts/VT323-Regular.ttf') format('truetype');font-display:block}
:root{color-scheme:light;--paper:#fff;--ink:#000;--gap:4px;--dither-light:repeating-conic-gradient(#000 0% 25%,#fff 0% 100%) 0 0/2px 2px;--dither:repeating-conic-gradient(#000 0% 25%,#fff 0% 50%) 0 0/2px 2px;--lcd-overlay-colour:#c1cf82;--lcd-ink-colour:#24301b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
/* Keep selection available inside editable text and number fields. */
input:not([type]):read-write,input[type=text]:read-write,input[type=number]:read-write,textarea:read-write,[contenteditable=true],[contenteditable=true] *{-webkit-user-select:text;user-select:text}
/* Override native focus rings for pointer and programmatic focus, including SVG. */
:focus,:focus-visible{outline:none}
body{margin:0;background:white;color:black;font:20px/1 Atari,monospace;-webkit-font-smoothing:none}
/* Multiply tints the white pixels; a second lighten overlay lifts black to
   dark green without changing the LCD background. Neither intercepts controls. */
html[data-display-overlay=true] body::before{content:'';position:fixed;inset:0;background:var(--lcd-overlay-colour);mix-blend-mode:multiply;pointer-events:none;z-index:2147483646;    box-shadow: inset 0 0 30px 0 rgba(0, 0, 0, 0.5);}
html[data-display-overlay=true] body::after{content:'';position:fixed;inset:0;background:var(--lcd-ink-colour);mix-blend-mode:lighten;pointer-events:none;z-index:2147483647}
/* Modal dialogs occupy the browser's top layer, above the body overlay.
   Tint their surface separately; the content scrolls beneath this overlay. */
html[data-display-overlay=true] dialog::after{content:'';position:absolute;inset:0;background:var(--lcd-overlay-colour);mix-blend-mode:multiply;pointer-events:none;z-index:2147483646}
html[data-display-overlay=true] dialog::before{content:'';position:absolute;inset:0;background:var(--lcd-ink-colour);mix-blend-mode:lighten;pointer-events:none;z-index:2147483647}
/* The overlay stops at the padding edge; colour the double-border gap beneath it. */
html[data-display-overlay=true] dialog{background:linear-gradient(white,white) padding-box,var(--lcd-overlay-colour) border-box}
button,input{font:inherit;color:inherit;border-radius:0}
button{position:relative;--bevel:3px;background:white;border:0;padding:2px 6px;cursor:var(--cursor-pointer,pointer)}
/* Crisp diagonal corners and light top/left edges, like the original Atari buttons.
   An overlay keeps the bevel from changing control sizes or moving their labels. */
button::after{content:'';position:absolute;inset:0;border:var(--bevel) solid;border-color:white black black white;pointer-events:none}
button:active:not(:disabled)::after,button[aria-pressed=true]::after{border-color:black white white black}
.wave-options button,.window-title>button{--bevel:1px}
.operator-toggle,.operator-select{--bevel:2px}
button:active,button[aria-pressed=true]{color:white;background:black}
button:disabled{cursor:var(--cursor-default,default);color:#777}button:disabled:hover{outline:0}
.window{width:100%;min-width:900px;height:100dvh;min-height:680px;background:white;border:2px solid black;display:flex;flex-direction:column}
.window-title{height:30px;flex:none;border-bottom:2px solid black;display:flex;align-items:stretch;background:repeating-linear-gradient(0deg,white 0px,white 2px,black 2px,black 3px)}
.window-title h1{margin:0 auto;padding:3px 20px;background:white;font:22px/1 Atari,monospace;letter-spacing:1px;align-self:stretch}
.window-title>button{background:white;color:black;width:28px;padding:0;border:0;display:grid;place-items:center;flex:none;font-size:24px}
#display-overlay{width:38px;font-size:16px}
.fullscreen-icon{display:block;width:14px;height:14px;flex:none}
.window-title>.window-box{border-right:2px solid black}.window-title>#zoom{border-left:2px solid black}
.editor-screen{padding:12px 8px 0;display:grid;grid-template-rows:16px minmax(130px,1fr) auto minmax(142px,1.1fr) 16px;flex:1;min-height:0}
.commands{display:grid;grid-template-columns:48px minmax(140px,1.4fr) repeat(5,minmax(0,1fr)) 60px;grid-template-rows:repeat(2,minmax(36px,auto));gap:8px;padding:8px;border:4px double black;background:var(--dither);margin:0 8px 12px}
.commands>button,.voice-name{min-width:0;min-height:0;background:white}
.commands>button{border:0;background:white}.commands>button:active{background:black}
.voice-name{display:flex;flex-direction:column;justify-content:center;border:2px solid black;padding:4px;font-size:20px;font-weight:bold}
.voice-name input{font-size:22px;background:white;border:0;padding:0;width:100%;min-width:0}
.voice-name{grid-column:2;grid-row:1 / 3}.engine-switch{grid-column:1;grid-row:1 / 3}
#show-voice{grid-column:3;grid-row:1}#midi-settings{grid-column:4;grid-row:1}#transmit{grid-column:5;grid-row:1}#compare{grid-column:6;grid-row:1}
#show-effects,#show-pitch{grid-column:3;grid-row:2}#device-controls{grid-column:4;grid-row:2}#receive{grid-column:5;grid-row:2}#seed{grid-column:6;grid-row:2}#mappings{grid-column:7;grid-row:1 / 3}
.group-captions,.bottom-captions,.sliders{display:grid;grid-template-columns:repeat(var(--control-count,16),minmax(0,1fr));column-gap:var(--gap)}
.group-captions,.bottom-captions{font-size:15px;text-align:center;line-height:14px}
.group-captions span:nth-child(1){grid-column:1/3}.group-captions span:nth-child(2){grid-column:3/9}.group-captions span:nth-child(3){grid-column:9/14}.group-captions span:nth-child(4){grid-column:14/17}
.group-captions span:nth-child(2),.group-captions span:nth-child(3){border:1px solid black;border-bottom:0}
.control{min-height:0;min-width:0;text-align:center;display:flex;flex-direction:column}
.mapping-target{position:relative}
.mapping-action{display:none!important;position:absolute;z-index:8;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:max-content;min-width:108px;height:34px;padding:3px 10px;font-size:16px;line-height:1;white-space:nowrap;overflow:visible;border:2px solid black;background:white!important;color:black!important}
.mapping-active .effects-screen{filter:grayscale(1);opacity:.42}
.mapping-active :is(.editor-screen,#modulations-screen){position:relative}
.mapping-active :is(.editor-screen,#modulations-screen)::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.58);pointer-events:none;z-index:4}
.mapping-active .mapping-target{filter:none;opacity:1}
.mapping-active .mapping-target,.mapping-active .mapping-target *{cursor:var(--cursor-pointer,pointer)}
.mapping-active .mapping-target:hover .mapping-action,.mapping-active .mapping-target .mapping-action.has-mapping{display:block!important}
.mapping-active .operator-top:has(.wave-options:hover)>.wave-map-action,.mapping-active .operator-top:has(.operator-toggle-host:hover)>.on-map-action,.mapping-active .operator-top>.mapping-action:is(:hover,:focus-visible,.has-mapping){display:block!important;pointer-events:auto}
.operator-top>.wave-map-action{left:calc(50% + 89px)}.operator-top>.on-map-action{left:94px;right:auto}
.mapping-active .editor-screen :is(input,button),.mapping-active .effects-screen :is(input,button){pointer-events:none}
.mapping-active .mapping-target .mapping-action{pointer-events:auto}
.mapping-active .mapping-target:hover:has(.control-title,.slider-body)::after{content:'';position:absolute;inset:0;z-index:5;box-shadow:0 0 0 2px black;pointer-events:none}
.mapping-active .mapping-target:has(.mapping-action.has-mapping):hover .mapping-action.has-mapping{background:black!important;color:white!important}
.mapping-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}.mapping-fields label{display:block;font-size:16px}.mapping-fields input,.mapping-fields select{display:block;box-sizing:border-box;width:100%;margin-top:5px;background:white;color:black;border:1px solid black;font:20px Atari,monospace;padding:3px}.mapping-device{grid-column:1/-1}.mapping-learn{align-self:end;height:32px;font-size:17px}.mapping-hint{font-size:16px;min-height:18px;margin:0 0 16px;text-align:center}.mapping-target-name{font-size:18px;text-align:center;margin:0 0 16px}
.mapping-fields label>.retro-select{display:block;width:100%;margin-top:8px}
.control-title{font-size:20px;line-height:18px;height:20px;flex:none;border:1px solid black;white-space:nowrap;font-weight:bold}
.slider-body{flex:1;min-height:0;border:1px solid black;border-top:0;position:relative;background:var(--dither-light)}
.slider-body:before{content:'';position:absolute;top:12px;bottom:12px;left:50%;transform:translateX(-50%);width:12px;background:var(--dither);border:1px solid black}
.slider-body:after{content:'';position:absolute;left:50%;top:3px;transform:translateX(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:6px solid black;pointer-events:none}
.slider-body input[type=range]{position:absolute;inset:10px 0;width:100%;height:calc(100% - 20px);margin:0;writing-mode:vertical-lr;direction:rtl;appearance:none;-webkit-appearance:none;background:transparent;cursor:var(--cursor-ns-resize,ns-resize);z-index:2;touch-action:none}
.slider-body input[type=range]::-webkit-slider-thumb{appearance:none;width:44px;height:16px;background:white;border:1px solid black;box-shadow:2px 2px 0 black}
.slider-body input[type=range]::-moz-range-thumb{width:42px;height:14px;background:white;border:1px solid black;border-radius:0;box-shadow:2px 2px 0 black}
.slider-value{position:absolute;left:0;right:0;top:var(--position);transform:translateY(-50%);pointer-events:none;font-size:16px;line-height:14px;z-index:3;white-space:nowrap}
.down-arrow{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:0;height:0;font-size:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid black;pointer-events:none}
.options{display:flex;flex-direction:column;padding:3px;gap:3px}
.options button{position:relative;flex:1;min-height:0;line-height:1;padding:0;font-size:19px;border:0;display:grid;place-items:center}
.options:before,.options:after{display:none}
.lfo-wave{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}
.lfo-wave path,.wave-preview .wave-pixels{fill:currentColor;stroke:none;shape-rendering:crispEdges}
.operators{display:grid;grid-template-columns:repeat(var(--operator-count,4),minmax(0,1fr));gap:var(--gap);padding:8px 0 6px}
.operator-card{min-width:0;display:grid;grid-template-rows:40px minmax(92px,15dvh) 38px;gap:0}
.operator-top{cursor:var(--cursor-pointer,pointer);position:relative;display:grid;grid-template-columns:32px 32px 42px 56px minmax(0,1fr);border:1px solid black;gap:3px;padding:3px;min-height:0}
.operator-card.selected .operator-top{background:black}
.operator-wave{min-width:0;min-height:0;background:white}
.wave-preview{width:100%;height:100%;display:block;border:1px solid black}
.wave-axis{fill:none;stroke:black;stroke-width:.5}
.wave-options{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:1px}
.wave-options button{font-size:14px;padding:0;line-height:1;min-width:0}
.operator-toggle{font-size:20px;padding:0;line-height:1}
.operator-toggle-host{position:relative;min-width:0;min-height:0}.operator-toggle-host>.operator-toggle{width:100%;height:100%}
.operator-toggle[aria-pressed=true]{background:white;color:black}.operator-toggle[aria-pressed=false]{background:black;color:white}
.operator-select{font-size:27px;padding:0}
.operator-role{display:flex;align-items:center;justify-content:center;border:1px solid black;font-size:27px;background:white;color:black}
.envelope-plot{position:relative;height:100%;background:white}
/* Threshold the clipped fill alpha as well as the SVG outline to remove edge fringes. */
.envelope-fill-mask{position:absolute;inset:0 1px 1px;pointer-events:none}
.envelope-fill{position:absolute;inset:0;background:var(--dither);pointer-events:none}
.envelope-fill-off{background:var(--dither-light)}
.envelope{position:relative;width:100%;height:100%;border:1px solid black;border-top:0;display:block;background:transparent;cursor:var(--cursor-pointer,pointer);shape-rendering:crispEdges}
.operator-meta{font-size:14px;line-height:12px;white-space:pre;overflow:hidden;padding-top:4px}
.bottom-captions span{border:1px solid black;border-top:0}.bottom-captions span:nth-child(1){grid-column:1/7}.bottom-captions span:nth-child(2){grid-column:7/13}.bottom-captions span:nth-child(3){grid-column:13/14}.bottom-captions span:nth-child(4){grid-column:14/16}.bottom-captions span:nth-child(5){grid-column:16/17}
.editor-status{margin-top:8px;padding:5px 8px;display:flex;justify-content:space-between;border-top:1px solid black;font-size:16px;flex:none;gap:12px;min-height:27px}
#midi-connection{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
#midi-connection::before{content:"";width:10px;height:10px;flex:none;background:linear-gradient(45deg,transparent 42%,currentColor 42%,currentColor 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,currentColor 42%,currentColor 58%,transparent 58%)}
#midi-connection[data-connected="true"]::before{background:currentColor;border-radius:50%;animation:midi-connection-blink 1.2s step-end infinite}
@keyframes midi-connection-blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){#midi-connection[data-connected="true"]::before{animation:none}}
dialog{background:white;color:black;border:4px double black;box-shadow:5px 5px 0 black;width:480px;padding:22px;font:22px/1.15 Atari,monospace}
dialog::backdrop{background:rgba(0,0,0,.18)}dialog h2{font-size:25px;margin:0 0 20px;text-align:center}dialog p{margin:12px 0}dialog a{color:black}dialog .dialog-actions{display:flex;gap:12px;justify-content:center}
@media(min-height:850px){.editor-screen{grid-template-rows:16px minmax(160px,1fr) auto minmax(175px,1.1fr) 16px;padding-top:14px}.operator-card{grid-template-rows:44px minmax(110px,17dvh) 41px}.operator-meta{line-height:13px}}
.unavailable{display:grid;place-items:center;font-size:17px;color:#666;cursor:var(--cursor-help,help)}
.unavailable:before,.unavailable:after{display:none}
.global-row{display:grid;grid-template-columns:var(--algorithm-width,120px) minmax(0,1fr);gap:4px;min-height:0}
.group-captions{margin-left:calc(var(--algorithm-width,120px) + 4px)}
#algorithm-diagram{display:flex;flex-direction:column;min-height:0;border:1px solid black}
#algorithm-diagram .control-title{border:0;border-bottom:1px solid black;height:19px;text-align:center}
#algorithm-diagram svg{width:100%;flex:1;min-height:0;display:block;shape-rendering:crispEdges}
.algorithm-wires{fill:none;stroke:black;stroke-width:1}
.algorithm-node{cursor:var(--cursor-pointer,pointer)}
.algorithm-node:hover rect{stroke-width:3}
.algorithm-node:focus{outline:none}
.algorithm-node rect{fill:white;stroke:black;stroke-width:1}
.algorithm-node text{fill:black;font:18px Atari,monospace;text-anchor:middle}
.algorithm-node.selected rect{fill:black}.algorithm-node.selected text{fill:white}
.algorithm-output{font:10px Atari,monospace}
[hidden]{display:none!important}
.effects-screen{flex:1;min-height:0;padding:20px 16px 0;display:flex;flex-direction:column;gap:16px}
.effects-layout{flex:1;min-height:0;display:grid;grid-template-columns:1.15fr 1.2fr;gap:12px}
.effects-layout>section{border:4px double black;min-width:0;overflow:auto}
.effects-layout h2{font-size:23px;text-align:center;margin:0;padding:8px;border-bottom:1px solid black;font-weight:normal}
#fx-programs{padding:8px;display:grid;gap:6px;height:calc(100% - 40px)}
#fx-programs button{text-align:left;padding:4px 12px;font-size:22px}
.effect-detail{display:flex;flex-direction:column}.effect-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px;flex:1;min-height:180px}
.effect-readout{border-top:1px solid black;padding:8px;font-size:18px}.effect-readout p{margin:8px 0}

/* Fade the complete control, including custom slider thumbs and readouts. */
.control[data-disabled=true]{opacity:.45}
.slider-body input[type=range]:disabled{cursor:var(--cursor-default,default)}

/* Focus never adds a visual indicator, even on hovered buttons. */
:focus,:focus-visible{outline:none!important}

/* Keep selected command faces dark despite toolbar background overrides. */
.commands button[aria-pressed=true],.commands button:active:not(:disabled){background:black;color:white}

/* Halftone button faces with solid black selected/pressed states. */
button{
  --button-face:var(--dither-light);
  --button-face-selected:#000;
}
button, .window-title>button, .commands>button,
.operator-toggle[aria-pressed=true]{
  background:var(--button-face);color:black;
}
button[aria-pressed=true],button:active:not(:disabled),
.commands button[aria-pressed=true],.commands button:active:not(:disabled),
.operator-toggle[aria-pressed=false]{
  background:var(--button-face-selected);color:white;
}
/* The operator enable switch retains its existing light-on / dark-off convention. */
.operator-toggle[aria-pressed=true]:not(:active){background:var(--button-face);color:black}
button:disabled{color:#777}

/* The original uses flat, solid choices for waves, numeric lists and operator
   controls; only switches and command buttons use the halftone bevel. */
.control:is([data-parameter=LFW],[data-parameter=AMS],[data-parameter=SHIFT],[data-parameter=RATE]) button,
.mod-waves button,.wave-options button,.operator-toggle,.operator-select,.window-title>button{
  --button-face:#fff;
  --button-face-selected:#000;
}
.control:is([data-parameter=LFW],[data-parameter=AMS],[data-parameter=SHIFT],[data-parameter=RATE]) button::after,
.mod-waves button::after,.wave-options button::after,.operator-toggle::after,.operator-select::after,.window-title>button::after{
  display:none;
}

.window>.commands{flex:none;height:auto;min-height:104px;margin:12px 16px 0}

.commands>button{font-size:20px;font-weight:bold;line-height:1;padding:4px;text-decoration:none;align-self:stretch}

/* Disabled operators keep a halftone face with white state lettering. */
.operator-toggle[aria-pressed=false]{background:var(--dither);color:white}

/* Flat choices retain their outline; beveled buttons use only their bevel. */
.control:is([data-parameter=LFW],[data-parameter=AMS],[data-parameter=SHIFT],[data-parameter=RATE]) button,
.mod-waves button,.wave-options button,.operator-toggle{border:1px solid black}
.operator-top>.operator-select{border:0;background:transparent;color:black}
.operator-card.selected .operator-select{color:white}

.envelope{touch-action:none}
.env-guides{opacity:0;pointer-events:none}
.envelope:hover .env-guides,.envelope.dragging .env-guides{opacity:1;pointer-events:auto}
.env-hit{fill:none;stroke:transparent;stroke-width:12;pointer-events:stroke;vector-effect:non-scaling-stroke}
.env-line{fill:none;stroke:black;stroke-width:1;stroke-dasharray:2 3;pointer-events:none;vector-effect:non-scaling-stroke}
.env-anchor{fill:white;stroke:black;stroke-width:1;vector-effect:non-scaling-stroke}
.env-label{font:10px Atari,monospace;fill:black;stroke:white;stroke-width:2;paint-order:stroke;pointer-events:none}
.env-guide:hover .env-line,.env-guide.active .env-line{stroke-dasharray:none;stroke-width:2}
.env-guide:hover .env-anchor,.env-guide.active .env-anchor{fill:black}

/* Link parameter hover to the selected operator without rerendering controls. */
.editor-screen:has(.control:is([data-parameter=AR],[data-parameter=D1R],[data-parameter=D1L],[data-parameter=D2R],[data-parameter=RR]):hover) .operator-card.selected .env-guides{opacity:1}
.editor-screen:has(.control[data-parameter=AR]:hover) .operator-card.selected .env-guide[data-key=AR],
.editor-screen:has(.control[data-parameter=D1R]:hover) .operator-card.selected .env-guide[data-key=D1R],
.editor-screen:has(.control[data-parameter=D1L]:hover) .operator-card.selected .env-guide[data-key=D1L],
.editor-screen:has(.control[data-parameter=D2R]:hover) .operator-card.selected .env-guide[data-key=D2R],
.editor-screen:has(.control[data-parameter=RR]:hover) .operator-card.selected .env-guide[data-key=RR]{--guide-dash:none;--guide-width:2;--anchor-fill:black}
.env-line{stroke-dasharray:var(--guide-dash,2 3);stroke-width:var(--guide-width,1)}
.env-anchor{fill:var(--anchor-fill,white)}

/* Engine selection shares the original command bar vocabulary. */
.engine-switch{display:grid;grid-template-rows:1fr 1fr;gap:4px}
.engine-switch button{font-size:20px;font-weight:bold;padding:0}
.window[data-engine=dx7]{min-width:1100px;--algorithm-width:180px}
.window[data-engine=dx7] .operator-top{grid-template-columns:32px 32px 42px;justify-content:start;gap:3px}
.window[data-engine=dx7] .operator-toggle-host{width:42px}.window[data-engine=dx7] .operator-toggle{width:100%}
.window[data-engine=dx7] .operator-select{width:32px}
.window[data-engine=dx7] .operator-wave,.window[data-engine=dx7] .wave-preview,.window[data-engine=dx7] .wave-options,.window[data-engine=dx7] .wave-map-action{display:none!important}
.window[data-engine=dx7] .operator-meta{font-size:13px}
.window[data-engine=dx7] .control-title{font-size:18px}
.window[data-engine=dx7] .options button{font-size:15px}
#pitch-preview{border:1px solid black;min-height:0;display:flex;flex-direction:column;grid-column:1;grid-row:4;margin-right:67%;font-size:16px;text-align:center;padding:4px}
#pitch-preview svg{width:100%;min-height:0;flex:1}
.editor-screen:has(#pitch-preview:not([hidden])) #operator-controls{grid-column:1;grid-row:4;margin-left:34%}
#bank-voices{display:grid;grid-template-columns:1fr 1fr;gap:5px;max-height:260px;overflow:auto}
#bank-voices button{text-align:left;font-size:18px}
#load-syx{max-width:100%;font-size:18px}

/* Native DX7 EG controls share the selected-card hover guidance. */
.editor-screen:has(.control:is([data-parameter=R1],[data-parameter=R2],[data-parameter=R3],[data-parameter=R4],[data-parameter=L1],[data-parameter=L2],[data-parameter=L3],[data-parameter=L4]):hover) .operator-card.selected .env-guides{opacity:1}
.editor-screen:has(.control[data-parameter=R1]:hover) .operator-card.selected .env-guide[data-key=R1],
.editor-screen:has(.control[data-parameter=R2]:hover) .operator-card.selected .env-guide[data-key=R2],
.editor-screen:has(.control[data-parameter=R3]:hover) .operator-card.selected .env-guide[data-key=R3],
.editor-screen:has(.control[data-parameter=R4]:hover) .operator-card.selected .env-guide[data-key=R4],
.editor-screen:has(.control[data-parameter=L1]:hover) .operator-card.selected .env-guide[data-key=L1],
.editor-screen:has(.control[data-parameter=L2]:hover) .operator-card.selected .env-guide[data-key=L2],
.editor-screen:has(.control[data-parameter=L3]:hover) .operator-card.selected .env-guide[data-key=L3],
.editor-screen:has(.control[data-parameter=L4]:hover) .operator-card.selected .env-guide[data-key=L4]{--guide-dash:none;--guide-width:2;--anchor-fill:black}

.midi-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}.midi-fields label,fieldset label{display:block;margin:8px 0}dialog{max-height:85vh;overflow:auto}dialog input[type=number]{width:85px}dialog fieldset{margin:12px 0}#bank-voices{max-height:260px;overflow:auto}#bank-voices>div{display:flex;justify-content:space-between;gap:8px;margin:4px 0}#midi-status{min-height:1.2em}
.midi-fields > p {grid-column:1 / -1;margin:0 0 8px}.midi-fields input[type=number]{display:block;width:100%;box-sizing:border-box}.midi-fields label{min-width:0}.midi-fields select{max-width:100%}

.midi-fields select{display:block;width:100%;min-height:32px;font-size:18px}

.controller-assignments{grid-column:1 / -1;border:3px double black;padding:8px 12px;min-width:0}
.controller-assignments legend{padding:0 6px;text-transform:uppercase}
.assignment-route{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:12px;align-items:center}
.assignment-route>label:first-child{display:flex;align-items:center;gap:8px;text-transform:capitalize}
.assignment-route input[type=checkbox],.retro-checkbox{appearance:none;width:20px;height:20px;flex:none;border:2px solid black;background:white;box-shadow:inset 2px 2px white,inset -2px -2px black;margin:0}
.assignment-route input[type=checkbox]:checked,.retro-checkbox:checked{background:black;box-shadow:inset 0 0 0 3px white}
.assignment-route input:disabled{opacity:.45}

/* Horizontal audition faders echo the editor's square handles and dithered rails. */
dialog fieldset label:has(input[type=range]){display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:12px;min-height:32px}
dialog input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;min-width:0;height:32px;margin:0;background:transparent;cursor:var(--cursor-ew-resize,ew-resize)}
dialog input[type=range]::-webkit-slider-runnable-track{height:12px;border:1px solid black;border-radius:0;background:var(--dither)}
dialog input[type=range]::-moz-range-track{height:12px;box-sizing:border-box;border:1px solid black;border-radius:0;background:var(--dither)}
dialog input[type=range]::-moz-range-progress{height:10px;background:transparent}
dialog input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:18px;height:26px;margin-top:-8px;border:1px solid black;border-radius:0;background:linear-gradient(black,black) center/2px 12px no-repeat,white;box-shadow:inset -2px -2px black}
dialog input[type=range]::-moz-range-thumb{box-sizing:border-box;width:18px;height:26px;border:1px solid black;border-radius:0;background:linear-gradient(black,black) center/2px 12px no-repeat,white;box-shadow:inset -2px -2px black}
dialog input[type=range]:active::-webkit-slider-thumb{background:linear-gradient(white,white) center/2px 12px no-repeat,black;box-shadow:none}
dialog input[type=range]:active::-moz-range-thumb{background:linear-gradient(white,white) center/2px 12px no-repeat,black;box-shadow:none}
dialog input[type=range]:disabled{opacity:.45;cursor:var(--cursor-default,default)}
dialog label:has(#midi-sustain){display:flex;align-items:center;gap:12px;min-height:32px}
#midi-sustain{appearance:none;width:20px;height:20px;margin:0;border:2px solid black;background:white;cursor:var(--cursor-pointer,pointer)}
#midi-sustain:checked{background:black;box-shadow:inset 0 0 0 3px white}

/* Custom selectors share the raised button face; the entire popup is monochrome. */
.retro-select{display:inline-block;position:relative;min-width:72px;vertical-align:middle}
.midi-fields .retro-select{display:block;width:100%;min-width:0}
.retro-select-button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:40px;padding:8px 12px;border:0;--bevel:3px;font:20px/1 Atari,monospace;text-align:left}
.retro-select-caption{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.retro-select-arrow{flex:none;width:18px;height:11px;background:currentColor;clip-path:polygon(0 0,100% 0,50% 100%)}
.retro-select-menu{position:fixed;inset:auto;margin:0;padding:2px;border:1px solid black;border-radius:0;background:white;color:black;box-shadow:3px 3px 0 black;overflow:auto;z-index:10000;font:20px/1.1 Atari,monospace;overscroll-behavior:contain}
.retro-select-menu [role=option]{position:relative;padding:7px 12px 7px 26px;min-height:34px;cursor:var(--cursor-pointer,pointer);white-space:normal;overflow-wrap:anywhere}
.retro-select-menu [aria-selected=true]::before{content:'◆';position:absolute;left:7px;font-size:14px;top:9px}
.retro-select-menu .active:not([aria-disabled=true]){background:black;color:white}
.retro-select-menu [aria-disabled=true]{color:#777;cursor:var(--cursor-default,default)}
/* Popovers sit above both LCD overlays. Tint their palette directly so the
   colour covers the surface and every option as the menu scrolls. */
html[data-display-overlay=true] .retro-select-menu:popover-open{background:var(--lcd-overlay-colour);color:var(--lcd-ink-colour);border-color:var(--lcd-ink-colour);box-shadow:3px 3px 0 var(--lcd-ink-colour)}
html[data-display-overlay=true] .retro-select-menu:popover-open .active:not([aria-disabled=true]){color:var(--lcd-overlay-colour);background:var(--lcd-ink-colour)}
html[data-display-overlay=true] .retro-select-menu:popover-open [aria-disabled=true]{color:color-mix(in srgb,var(--lcd-overlay-colour) 46.667%,var(--lcd-ink-colour))}
.retro-select-button[aria-expanded=true]::after{border-color:black white white black}

/* Modal windows use the same striped title bar as the editor. */
dialog{padding:0;overflow:hidden}
dialog[open]{display:flex;flex-direction:column}
.dialog-titlebar{height:32px;min-height:32px;flex:none}
.dialog-titlebar h2{margin:0 auto;padding:3px 10px;background:white;font:22px/1 Atari,monospace;align-self:stretch;max-width:calc(100% - 36px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dialog-titlebar #dialog-close{width:30px;border-right:2px solid black;flex:none;font:26px/1 Atari,monospace}
#dialog-content{padding:16px 20px 20px;min-height:0;overflow:auto;overscroll-behavior:contain}
#dialog-content.midi-fields{margin:0}
dialog input[type=number],dialog input[type=text],dialog .retro-select-button{height:32px;min-height:32px;font-size:20px;line-height:1;padding-top:4px;padding-bottom:4px}

/* Mapping affordances have one appearance, independent of their host control. */
button.mapping-action{--bevel:3px;display:none!important;box-sizing:border-box;flex:none!important;width:max-content!important;min-width:82px!important;height:34px!important;min-height:34px!important;padding:3px 9px!important;border:0!important;background:white!important;color:black!important;font:16px/1 Atari,monospace!important;text-align:center!important;white-space:nowrap!important;place-items:center!important}
button.mapping-action::after{display:block!important;border:var(--bevel) solid!important;border-color:white black black white!important}

/* Virtual modulation workspace. */
#midi-settings{grid-column:3}#device-controls{grid-column:3}
#show-voice,#show-effects,#show-pitch{grid-column:4}
#mappings{grid-column:5;grid-row:2}#show-modulations{grid-column:5;grid-row:1}
#compare,#seed{grid-column:6}#transmit,#receive{grid-column:7}
.commands{grid-template-columns:48px minmax(140px,1.4fr) repeat(5,minmax(0,1fr)) 60px}
#modulations-screen{flex:1;min-height:0;padding:12px 8px 0;display:grid;grid-template-rows:minmax(260px,1.4fr) minmax(180px,1fr);gap:8px}
.mod-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:0}
.mod-panel{border:1px solid black;display:flex;flex-direction:column;min-height:0;min-width:0;padding:4px;gap:4px}
.mod-panel h2{font:22px Atari,monospace;text-align:center;margin:0;border-bottom:1px solid black}
.mod-panel .mod-lfo-heading{display:flex;align-items:center;justify-content:center;gap:8px}
.mod-lfo-phase{position:relative;display:inline-block;flex:none;width:48px;height:10px;border:1px solid currentColor;border-radius:2px;overflow:hidden}
.mod-lfo-fill{position:absolute;left:50%;top:0;width:0;height:100%;background:currentColor}
.mod-lfo-controls{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:4px;flex:1;min-height:0}
.mod-speed .slider-body input[type=range]::-webkit-slider-thumb{width:80px}
.mod-speed .slider-body input[type=range]::-moz-range-thumb{width:78px}
.mod-waves{display:flex;flex-direction:column;gap:3px;min-height:0}.mod-waves button{flex:1;min-height:0}
.mod-macros{--control-count:8}.mod-name{width:100%;text-align:center;background:white;border:1px solid black;font-size:22px;min-width:0}
.mod-xy{position:relative;flex:1;min-height:0;border:1px solid black;touch-action:none;background:linear-gradient(transparent calc(50% - .5px),black 50%,transparent calc(50% + .5px)),linear-gradient(90deg,transparent calc(50% - .5px),black 50%,transparent calc(50% + .5px)),var(--dither-light);cursor:var(--cursor-crosshair,crosshair)}
.mod-dot{position:absolute;width:17px;height:17px;border:3px solid black;background:white;transform:translate(-50%,-50%);pointer-events:none}
.mod-latch{align-self:flex-start;min-width:100px;min-height:32px}
.mod-meter{height:6px;border:1px solid black;background:linear-gradient(to right,black var(--level,50%),white 0)}
#modulations-screen :focus-visible{outline:2px solid black;outline-offset:2px}
.mapping-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:16px}
.mapping-tabs button{min-height:34px}
.mapping-midi-row{grid-template-columns:1fr 1fr 1fr}

/* Atari-inspired pixel cursors, including controls in the browser top layer. */
html{cursor:var(--cursor-default,default)}
button,[role=button],[role=option],select,input[type=checkbox],.algorithm-node,.envelope{cursor:var(--cursor-pointer,pointer)}
input:not([type]),input[type=text],input[type=number],textarea,[contenteditable=true]{cursor:var(--cursor-text,text)}
.control-title[data-tooltip],.unavailable{cursor:var(--cursor-help,help)}
.slider-body input[type=range]{cursor:var(--cursor-ns-resize,ns-resize)}
dialog input[type=range]{cursor:var(--cursor-ew-resize,ew-resize)}
.env-guide[data-axis=x]{cursor:var(--cursor-ew-resize,ew-resize)!important}
.env-guide[data-axis=y]{cursor:var(--cursor-ns-resize,ns-resize)!important}
.mod-xy{cursor:var(--cursor-crosshair,crosshair)}
button:disabled,input:disabled,.slider-body input[type=range]:disabled,dialog input[type=range]:disabled,[role=option][aria-disabled=true]{cursor:var(--cursor-not-allowed,not-allowed)}
.retro-tooltip{position:fixed;inset:auto;margin:0;max-width:min(340px,calc(100vw - 16px));padding:7px 10px;border:3px double black;border-radius:0;background:white;color:black;box-shadow:3px 3px black;font:18px/1.1 Atari,monospace;white-space:normal;overflow-wrap:anywhere;z-index:2147483647}
.retro-tooltip[hidden]{display:none}
/* The tooltip popover is above the blend overlays, so apply the same tint. */
html[data-display-overlay=true] .retro-tooltip{background:var(--lcd-overlay-colour);color:var(--lcd-ink-colour);border-color:var(--lcd-ink-colour);box-shadow:3px 3px var(--lcd-ink-colour)}

.mapping-active #modulations-screen .mapping-target :is(input,button){pointer-events:none}
.mapping-active #modulations-screen .mapping-target .mapping-action{pointer-events:auto}
.mapping-active .mapping-target:focus-within .mapping-action{display:block!important}

#save-voice{grid-column:8;grid-row:1}#load-voice{grid-column:8;grid-row:2}

.mapping-source-range output{float:right;font-size:16px}
.mapping-source-range input[type=range]{border:0;padding:0;margin-top:5px}

.file-bank-confirm{display:inline-flex;align-items:center;gap:8px;margin:8px 0}

.dialog-titlebar{touch-action:none;user-select:none;cursor:var(--cursor-grab,grab)}
.dialog-titlebar.dragging{cursor:var(--cursor-grabbing,grabbing)}
dialog.dialog-positioned{position:fixed;margin:0;right:auto;bottom:auto}