:root{color-scheme:light;--paper:#f6f2e4;--cream:#e3ddcc;--ink:#292e2a;--secondary:#4a4d41;--sage:#3d5249;--orange:#b8471a;--amber:#ffab42;--display:#0e110d;--mono:Menlo,"SFMono-Regular",Consolas,"Liberation Mono",monospace;--sans:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-family:var(--sans);color:var(--ink);background:#d6d3c3;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:linear-gradient(135deg,#dbd6c7,#c4c4b5)}button,input,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;color:inherit}button:disabled{cursor:default;opacity:.5}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #99421d;outline-offset:4px}
.instrument-wrap{width:min(430px,calc(100% - 28px));margin:0 auto;padding:18px 0 16px}.overline{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 17px;font:500 9px var(--mono);letter-spacing:2.4px;color:var(--secondary)}.overline i{width:3px;height:3px;border-radius:50%;background:#667b6c}.instrument{isolation:isolate;position:relative;background:linear-gradient(135deg,var(--paper),var(--cream) 60%,#d1ccbd);border-radius:21px;box-shadow:inset 0 1px 1px #fffffff2,inset -1px -1px 2px #0004,0 8px #1f211e,0 17px 24px #0004,2px 6px 5px #0002}.instrument::before{content:"";position:absolute;z-index:-2;left:-6px;right:0;top:4px;bottom:-3px;border-radius:23px;background:linear-gradient(90deg,var(--orange),#702910)}.instrument::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:.5;background-image:radial-gradient(#0002 .3px,transparent .6px),radial-gradient(#fff8 .35px,transparent .6px);background-size:3px 7px,11px 5px;background-position:0 0,4px 2px}.face{padding:0 18px}.panel-header{display:flex;align-items:center;justify-content:space-between;min-height:82px;padding:17px 0 18px;border-bottom:.7px solid #292e2a45;box-shadow:0 .5px #fff5}.wordmark h1{margin:0;font:650 29px/1.15 var(--sans);letter-spacing:6px}.wordmark p{margin:4px 0 0;font:600 8px var(--mono);letter-spacing:1.9px;color:var(--secondary)}.header-right{display:flex;align-items:center;gap:15px}.header-right p{margin:0;border-left:.7px solid #292e2a45;padding-left:12px;font:500 7.5px/1.5 var(--mono);letter-spacing:2px;color:var(--secondary)}.screw{position:relative;display:inline-block;flex:0 0 12px;width:12px;height:12px;border:1px solid #0006;border-radius:50%;background:linear-gradient(135deg,#d8d8d0,#626761 50%,#aeb2a7 80%);box-shadow:0 1px 2px #0005,inset 0 0 0 1px #fff5}.screw::after{content:"";position:absolute;top:4px;left:2px;width:6px;height:1.5px;background:#292e2a;transform:rotate(-35deg);border-radius:2px}
.primary-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:11px 0 16px;border-bottom:.7px solid #292e2a45;box-shadow:0 .5px #fff5}.control{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;font-family:var(--mono)}.primary-controls .control:first-child{border-right:.7px solid #292e2a3d;padding-right:4px}.knob{--knob-angle:-135deg;position:relative;width:min(145px,calc((100vw - 90px)/2));aspect-ratio:1;border-radius:50%;flex-shrink:0}.ticks,.ticks svg{display:block;position:absolute;width:100%;height:100%;inset:0}.ticks line{stroke:#292e2a6b;stroke-width:.48;stroke-linecap:round}.ticks line.major{stroke:#292e2acc;stroke-width:1.03}.knob-shadow{position:absolute;width:77%;height:77%;top:15%;left:12%;background:#0005;border-radius:50%;filter:blur(3px)}.knob-body{position:absolute;inset:12.5%;border-radius:50%;border:1px solid #171c17;background:repeating-conic-gradient(#111710 0deg 1.6deg,#4d5347 1.7deg 2.2deg,#171e15 2.3deg 3.214deg);box-shadow:inset 1px 1px 2px #fff5,0 3px 3px #0006}.knob-face{position:absolute;inset:15%;border-radius:50%;border:.7px solid #000b;background:repeating-linear-gradient(0deg,#fff1 0 .25px,transparent .4px 1.5px),linear-gradient(135deg,#444940,#242b22 50%,#111710);box-shadow:inset .5px .5px 1px #fff5,0 1px 2px #0009}.metal .knob-face{background:repeating-linear-gradient(0deg,#fff2 0 .3px,transparent .4px 1.4px),linear-gradient(135deg,#e1e1d6,#aeb3a7 55%,#cdd0bf);border-color:#687161;box-shadow:inset .5px .5px 1px #fffe,0 1px 2px #0008}.knob-pointer{position:absolute;width:3.5%;height:52%;top:24%;left:48.25%;transform:rotate(var(--knob-angle));pointer-events:none}.knob-pointer::before{display:block;content:"";width:100%;height:38%;border-radius:4px;background:var(--paper);box-shadow:1px 1px 1px #0009}.metal .knob-pointer::before{background:var(--ink);box-shadow:.5px .5px #fff5}.knob-input{position:absolute;inset:6%;width:88%;height:88%;margin:0;border-radius:50%;opacity:0;cursor:ns-resize;touch-action:none}.knob:has(input:focus-visible){outline:3px solid #99421d;outline-offset:2px}.control-name{margin-top:5px;font:650 13px/1.25 var(--mono);letter-spacing:1.4px}.control-detail{margin-top:5px;min-height:15px;font:500 11px/1.35 var(--mono);letter-spacing:.2px;color:var(--secondary);text-transform:uppercase;max-width:100%}
.secondary-controls{display:grid;grid-template-columns:1fr 1.05fr 1fr;align-items:center;gap:7px;padding:13px 0;border-bottom:.7px solid #292e2a45;box-shadow:0 .5px #fff5}.small .knob{width:67px}.small .control-name{margin-top:2px;font-size:11px;letter-spacing:.2px}.small .control-detail{margin-top:2px}.small .knob-pointer{width:3px;left:calc(50% - 1.5px)}.journey-control{display:flex;flex-direction:column;align-items:center;font-family:var(--mono)}.journey-control label{font-size:11px;font-weight:650;letter-spacing:.2px;margin-bottom:5px}.journey-control select{max-width:100%;width:110px;min-height:44px;border:.7px solid #787c6c;border-radius:5px;color:var(--ink);background:#f6f2e47a;padding:4px 3px;font:500 11px var(--mono)}.journey-control>span{margin-top:5px;font-size:8px;color:var(--secondary)}.switch{appearance:none;border:0;background:transparent;min-width:63px;min-height:92px;padding:0 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.switch-hardware{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:1.5px solid #43483f;border-radius:50%;background:conic-gradient(#e6e6dc,#70756b,#d6d9ca,#777e70,#e6e6dc);box-shadow:0 4px 4px #0006,inset 0 1px #fff9;color:var(--ink);font-size:14px}.switch-hardware::before{content:"";position:absolute;inset:5px;border:3px solid #343b32;border-radius:50%}.switch-hardware::after{content:"";position:absolute;inset:9px;border:.7px solid #fff9;border-radius:50%;background:linear-gradient(135deg,#d0d1c6,#8e9787,#bdc1ad)}.switch-hardware>span{position:relative;z-index:1}.switch.on .switch-hardware::before{border-color:var(--amber);box-shadow:0 0 5px #ffab4299}.switch-label{font:650 11px/1.25 var(--mono);letter-spacing:1px}.hold .switch-hardware{width:46px;height:46px;font-size:13px}.hold{min-height:76px}.listening-area{display:grid;grid-template-columns:minmax(0,1fr) 68px;align-items:start;gap:12px;padding:17px 0 19px}.readout{min-width:0;min-height:260px;border-radius:6px;padding:12px 13px;border:1.5px solid #080d07;border-bottom-color:#838069;color:var(--amber);background:linear-gradient(135deg,#131510,var(--display));box-shadow:inset 1px 1px 3px #000e,0 1px #fff8;font:500 11px/1.45 var(--mono)}.display-heading{display:flex;align-items:baseline;justify-content:space-between;gap:5px}.display-heading h2{margin:0;font-size:12px;letter-spacing:1.7px}.display-heading time{font-size:11px;color:#c5c2ad;font-variant-numeric:tabular-nums}.display-state{display:flex;align-items:baseline;gap:7px;min-height:35px;margin:7px 0 9px;color:#e0dfcd;font-size:10px}.status-light{flex:0 0 3px;width:3px;height:3px;margin-top:5px;border-radius:50%;background:#a6ab9469}.is-playing .status-light{background:var(--amber)}.sound-lane{display:flex;gap:6px;align-items:baseline;font-size:10px}.sound-lane b{font-weight:650}.sound-lane>span{color:var(--paper);font-size:10px;overflow-wrap:anywhere}#stage{margin:6px 0 3px;font-size:9px;color:#b7b9a6}.voice-field{height:35px;margin:7px 0;border-top:.5px solid #ffab423d;border-bottom:.5px solid #ffab423d}.voice-field svg{display:block;width:100%;height:100%}#voice-detail{margin:5px 0 12px;color:#d1d2bd;font-size:9px;min-height:26px;overflow-wrap:anywhere}.meter-heading{display:flex;justify-content:space-between;gap:6px;font-size:9px}.meter-heading span{color:#c6c9af;font-variant-numeric:tabular-nums}meter{display:block;width:100%;height:12px;margin:3px 0 8px;border:0;border-radius:2px;background:#ffab421a}meter::-webkit-meter-bar{border:0;border-radius:2px;background:#ffab421a}meter::-webkit-meter-optimum-value{background:var(--amber);border-radius:2px}meter::-moz-meter-bar{background:var(--amber);border-radius:2px}#pending-sound{margin:4px 0;font-size:9px;color:#ffe1a3}.display-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;border-top:.5px solid #ffab423d;padding-top:8px;margin:8px 0 0;color:#acae96;font-size:8px}.transport{display:flex;flex-direction:column;align-items:center}.hold-description{font:500 8px var(--mono);letter-spacing:.5px;margin-top:4px;color:var(--secondary)}
.lower-plate{display:flex;align-items:center;gap:7px;border-radius:0 0 20px 20px;padding:10px 12px;border-top:1px solid #0008;box-shadow:inset 0 1px #fff4;background:linear-gradient(135deg,#4a5e52,var(--sage),#2e3d36);color:var(--paper)}.edition{flex:1;display:flex;flex-direction:column;gap:5px;font:500 9px/1.25 var(--mono);letter-spacing:.5px}.edition b{font-size:11px;letter-spacing:.8px}.lower-plate button{border:0;background:transparent;color:inherit;padding:10px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:21px}.lower-plate button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.underplate{margin:22px 0 0;text-align:center;font:500 8px var(--mono);letter-spacing:3.5px;color:#565e4e}.listening-help{margin:12px 0 0;text-align:center;font-size:11px;color:var(--secondary)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
dialog{max-width:430px;width:calc(100% - 28px);max-height:calc(100svh - 38px);padding:0;border:1px solid #c2c5b5;border-radius:17px;background:#f6f5ed;color:var(--ink);box-shadow:0 15px 60px #0005}dialog::backdrop{background:#171e1666}.sheet-heading{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;background:#f6f5ed;border-bottom:1px solid #cbd0be}.sheet-heading h2{font-size:18px;margin:0;font-weight:650}.done{min-width:54px;min-height:44px;border:0;border-radius:8px;background:transparent;font-size:15px;font-weight:600;color:#3d614b}.sheet-body{padding:16px}.sheet-section{padding:14px;background:#fffef8;border:1px solid #dce0d2;border-radius:11px}.sheet-section+.sheet-section{margin-top:16px}.sheet-section h3{font-size:13px;font-weight:600;color:#536149;margin:0 0 14px}.sheet-section label{font-size:14px}.sheet-section select{width:100%;min-height:44px;padding:10px 5px;margin:8px 0 0;border:1px solid #bbc5af;border-radius:7px;background:#fafcf4;color:var(--ink);font-size:14px}.help{font-size:12px;line-height:1.65;color:#536149;margin:9px 0 0}.precise-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.precise-heading output{font-size:13px;color:#526047}.sheet-section input[type=range]{width:100%;min-height:44px;accent-color:#48684b;margin:7px 0 0}.output-heading{margin-top:22px}.number{display:flex;align-items:center;gap:4px;font-size:13px}.number input{width:66px;min-height:44px;background:#f9fbf2;border:1px solid #bbc5af;border-radius:7px;color:var(--ink);text-align:center}.about-copy{font-size:14px;line-height:1.75}.about-copy p{margin:0 0 16px}.is-error #status{color:#ffd0a5}
.instrument::before{right:auto;width:18px;border-radius:23px 0 0 23px}.face{position:relative;border-radius:21px 21px 0 0;background:radial-gradient(#292e2a0b .3px,transparent .6px) 0 0/7px 5px,linear-gradient(135deg,var(--paper),var(--cream) 60%,#d1ccbd)}
.display-state,.sound-lane,.sound-lane>span,#stage,#voice-detail,.meter-heading,#pending-sound{font-size:11px}.display-foot{font-size:11px}.readout{min-height:260px}.journey-control>span,.hold-description,.edition{font-size:11px}.secondary-controls{position:sticky;top:0;z-index:3;background:linear-gradient(135deg,var(--paper),var(--cream))}
.transport-symbol svg{display:block;width:20px;height:20px;fill:currentColor}.hold .transport-symbol svg{width:17px;height:17px}
@media(min-width:650px){.instrument-wrap{padding-top:28px}}
@media(max-width:350px){.header-right{gap:8px}.header-right p{padding-left:8px;font-size:7px;letter-spacing:1px}.wordmark h1{font-size:27px}.journey-control select{width:87px;font-size:11px}.secondary-controls{gap:4px}.listening-area{grid-template-columns:minmax(0,1fr)}.transport{flex-direction:row;justify-content:center;gap:10px}.hold-description{margin:0}.readout{min-height:260px}.lower-plate{gap:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}