:root{--bg:#101112;--panel:#191b1a;--ink:#f1efe8;--muted:#93958d;--line:#383a38;--accent:#ff9c52}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}body.light{--bg:#f0eee8;--panel:#e9e6df;--ink:#252824;--muted:#686c61;--line:#c9c6c4}button,input,select{font:inherit}button,select{color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:0;padding:10px 13px;cursor:pointer}button:hover,button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}button:focus-visible,select:focus-visible,input:focus-visible,#pad:focus-visible{outline:2px solid var(--accent);outline-offset:4px}main{max-width:1600px;margin:auto;padding:0 clamp(22px,5.75vw,80px)}.intro{display:flex;justify-content:space-between;align-items:end;padding:38px 0 26px}.eyebrow,label,.readout,.coordinates,.cluster,.footnote,footer>span,.pad-label,.axis{font:10px/1.5 'Courier New',monospace;letter-spacing:1.5px}.eyebrow{color:var(--accent);margin:0 0 12px}h1{font-size:58px;letter-spacing:-4px;line-height:1;margin:0;font-weight:500}h1 span{display:inline-block;color:var(--muted);font-size:14px;letter-spacing:0;margin-left:22px}.preset{display:grid;gap:8px;min-width:190px}.preset label{color:var(--muted)}select{background:var(--bg)}.instrument{border:1px solid var(--line)}.readout{display:flex;justify-content:space-between;padding:17px 22px;border-bottom:1px solid var(--line);color:var(--muted)}#voiceStatus{color:var(--accent)}.stage{height:460px;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 4%,var(--bg)),var(--bg) 65%)}canvas{position:absolute;inset:0;width:100%;height:100%}.disc{position:absolute;width:346px;height:346px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:50%;touch-action:none;cursor:crosshair}.cross{position:absolute;background:var(--line);opacity:.45}.cross.x{width:100%;height:1px;top:50%}.cross.y{height:100%;width:1px;left:50%}.pad-label{position:absolute;left:0;width:100%;text-align:center;font-size:8px;color:var(--muted);pointer-events:none}.pad-label.top{top:24px}.pad-label.bottom{bottom:23px;font-size:7px}.axis{position:absolute;top:49%;font-size:8px;color:var(--muted)}.axis.left{left:-42px}.axis.right{right:-48px}#cursor{position:absolute;width:27px;height:27px;border:1px solid var(--accent);border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none;background:var(--bg);box-shadow:0 0 24px color-mix(in srgb,var(--accent) 28%,transparent)}#cursor i{width:5px;height:5px;background:var(--accent);border-radius:50%}.orbital{position:absolute;top:43%;width:150px}.left-control{left:6%}.right-control{right:6%}.orbital label{display:flex;justify-content:space-between;color:var(--accent)}.orbital span{font-size:11px;color:var(--muted)}input[type=range]{width:100%;appearance:none;height:2px;background:var(--line);display:block;margin:17px 0;cursor:ew-resize;accent-color:var(--accent)}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border:2px solid var(--accent);border-radius:50%;background:var(--bg)}.coordinates{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);display:flex;gap:30px;color:var(--muted)}.coordinates b{color:var(--accent);font-weight:normal}.macros{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}.macros label{padding:16px 22px;border-right:1px solid var(--line);color:var(--muted);position:relative}.macros label:last-child{border:0}.macros output{position:absolute;right:20px;top:16px;color:var(--accent)}.macros input{margin-bottom:6px}.transport{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:14px 20px;gap:15px}.cluster{display:flex;gap:8px;align-items:center}.cluster button,.cluster select{font:10px 'Courier New',monospace;letter-spacing:1px}.tempo{display:flex;gap:7px;align-items:center}.tempo input{color:var(--ink);width:48px;background:transparent;border:0;border-bottom:1px solid var(--line);padding:8px 0}#keyboard{display:flex;height:108px;margin:0 20px 0;position:relative;touch-action:none}.key{position:relative;flex:1;padding:0;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:0 0 3px 3px;display:flex;align-items:end;justify-content:center;font:9px 'Courier New',monospace;padding-bottom:9px;user-select:none}.key.black{position:absolute;width:4.3%;height:65%;background:var(--bg);z-index:2;border:1px solid var(--line);border-top:0}.key.active{background:color-mix(in srgb,var(--accent) 30%,var(--panel));border-color:var(--accent);color:var(--accent);box-shadow:inset 0 -3px var(--accent)}.footnote{display:flex;justify-content:space-between;color:var(--muted);font-size:8px;padding:16px 21px}footer{display:flex;justify-content:space-between;align-items:center;margin:24px 0 40px}footer p{font-size:13px;line-height:1.7}footer p span,footer>span{color:var(--muted);font-size:10px}dialog{background:var(--bg);color:var(--ink);border:1px solid var(--line);max-width:530px;padding:35px;line-height:1.8}dialog::backdrop{background:#0009;backdrop-filter:blur(8px)}dialog h2{font-size:35px;font-weight:normal;letter-spacing:-1.5px}dialog p{font-size:14px;color:var(--muted)}dialog .small{font-size:10px}#closeHelp{float:right;font-size:24px;border:0;padding:0 8px}@media(min-width:1500px){.stage{height:520px}.disc{width:390px;height:390px}}@media(max-width:950px){.orbital{width:105px}.left-control{left:4%}.right-control{right:4%}.disc{width:300px;height:300px}.stage{height:410px}.transport{flex-wrap:wrap}.macros label{padding:15px 12px}.macros output{display:none}}@media(max-width:650px){.intro{align-items:start;gap:18px;padding-top:25px}h1{font-size:42px;letter-spacing:-3px}h1 span{display:block;font-size:11px;margin:10px 0 0}.preset{min-width:120px;width:130px}.preset select{font-size:12px;padding:9px}.eyebrow{font-size:8px}.stage{height:440px}.disc{width:255px;height:255px;top:38%}.orbital{top:auto;bottom:45px;width:115px}.left-control{left:7%}.right-control{right:7%}.coordinates{bottom:12px}.macros{grid-template-columns:repeat(3,1fr)}.macros label:nth-child(3){border-right:0}.macros label:nth-child(n+4){border-top:1px solid var(--line)}.transport{padding:12px}.cluster{gap:5px;flex-wrap:wrap}.cluster button,.cluster select{padding:9px 8px;font-size:9px}.readout{font-size:8px;padding:13px 12px;letter-spacing:.8px}#keyboard{margin:0 12px;height:100px}.footnote{padding:12px;font-size:7px;gap:10px}.footnote span:first-child{display:none}footer>span{display:none}footer{margin-top:12px}.axis.left{left:-23px}.axis.right{right:-28px}.axis{font-size:6px}.pad-label{font-size:6px}.pad-label.bottom{font-size:6px}}