:root{--ink:#171714;--paper:#e8e4d8;--orange:#ef5a19;--gray:#777975;--oled:#e8fff8;--proto:#b98747;--shadow:#090907;--mono:"Courier New",monospace}*{box-sizing:border-box}html{background:var(--ink);color:var(--paper);font-family:var(--mono)}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 30%,#37362f 0,#171714 55%,#090908 100%)}button,select,input{font:inherit}.topbar{height:64px;padding:0 clamp(18px,4vw,56px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff21}.brand{color:inherit;text-decoration:none;font-size:12px;font-weight:900;letter-spacing:.18em}.top-actions{display:flex;gap:10px}.topbar button,.skin-switch button,.editor button{border:1px solid currentColor;background:transparent;color:inherit;padding:10px 14px;font-weight:900;font-size:11px;letter-spacing:.08em;cursor:pointer}.audio-toggle{background:var(--orange)!important;color:#171714!important;border-color:var(--orange)!important}main{max-width:1240px;margin:auto;padding:clamp(22px,4vw,56px)}.intro{text-align:center}.eyebrow{font-size:10px;letter-spacing:.2em;color:#b2afa5}.intro h1{font:900 clamp(48px,9vw,110px)/.75 Arial,sans-serif;letter-spacing:-.07em;margin:20px 0}.intro h1 span{color:var(--orange)}.lede{max-width:560px;margin:30px auto 24px;color:#c6c1b4}.skin-switch{display:flex;justify-content:center;margin:28px 0 20px}.skin-switch button{color:#99958b}.skin-switch button[aria-pressed=true]{background:var(--paper);color:var(--ink)}.instrument-wrap{perspective:1200px;display:grid;place-items:center;padding:24px 0 38px}.instrument{position:relative;width:min(760px,94vw);aspect-ratio:1.46;border-radius:28px;background:#edece5;box-shadow:0 34px 60px #0009,0 8px 0 #a8a59e,inset 0 0 0 3px #fff9;transform:rotateX(3deg);overflow:hidden;color:#252521;isolation:isolate}.instrument:before,.instrument:after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:#aaa;box-shadow:inset 2px 2px 3px #555,1px 1px #fff;top:17px;left:18px;z-index:5}.instrument:after{left:auto;right:18px}.panel-grain{position:absolute;inset:0;opacity:.22;background:repeating-linear-gradient(32deg,transparent 0 4px,#8c8b86 5px 6px);z-index:-1}.screen-module{position:absolute;left:6.5%;top:6.5%;width:27%;height:23%;padding:8px;border-radius:7px;background:#222;box-shadow:inset 0 0 0 5px #3e4140,0 3px 4px #0005}.oled{height:100%;padding:7px;background:#07110f;color:var(--oled);box-shadow:inset 0 0 18px #bfffee35;text-shadow:0 0 7px #bfffee;font-size:clamp(8px,1.2vw,14px)}.oled-head,.oled-foot{display:flex;justify-content:space-between}.oled-head span:first-child{font-weight:900;font-size:1.45em}.oled-foot{font-size:.72em}.scope{height:44%;display:flex;align-items:center;gap:4%;overflow:hidden;margin:2px 0}.scope i{display:block;width:8%;height:var(--h,30%);background:currentColor}.scope i:nth-child(2){--h:70%}.scope i:nth-child(3){--h:45%}.scope i:nth-child(4){--h:90%}.scope i:nth-child(5){--h:55%}.scope i:nth-child(6){--h:80%}.scope i:nth-child(7){--h:35%}.scope i:nth-child(8){--h:65%}.utility-row{position:absolute;top:7%;left:38%;right:6%;display:grid;grid-template-columns:repeat(4,1fr);gap:2.5%}.utility{aspect-ratio:1.05;border:0;border-radius:10px;background:var(--orange);box-shadow:inset 0 -5px #b83d0c,0 6px 4px #0004;color:#762406;font-weight:900;font-size:clamp(11px,2vw,22px);cursor:pointer}.utility.active{transform:translateY(4px);box-shadow:inset 0 -2px #b83d0c,0 2px 2px #0005}.joystick-zone{position:absolute;left:7%;top:43%;width:21%;text-align:center}.joystick{position:relative;width:100%;aspect-ratio:1;border-radius:50%;background:#252521;box-shadow:0 8px 8px #0007,inset 0 0 0 12px #111;touch-action:none}.stick{position:absolute;width:64%;aspect-ratio:1;border-radius:50%;left:18%;top:14%;background:radial-gradient(circle at 40% 30%,#444,#101010 60%);box-shadow:0 12px 10px #0008;transition:transform .08s}.joy-label{display:block;margin-top:9px;font-size:10px;letter-spacing:.2em}.degree-grid{position:absolute;left:34%;right:6%;top:41%;bottom:9%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:6% 4%}.degree{position:relative;border:0;border-radius:10px;background:#7d7f7a;box-shadow:inset 0 -7px #4f514e,0 8px 5px #0004;color:#30312f;font:900 clamp(20px,4vw,42px)/1 Arial,sans-serif;cursor:pointer}.degree:active,.degree.active{transform:translateY(6px);box-shadow:inset 0 -2px #4f514e,0 2px 3px #0005;background:#969994}.degree kbd{position:absolute;right:7px;bottom:5px;font:9px var(--mono);opacity:.55}.d5{grid-column:1}.d6{grid-column:2}.d7{grid-column:3}.d1{grid-column:1;grid-row:2}.d2{grid-column:2;grid-row:2}.d3{grid-column:3;grid-row:2}.d4{grid-column:4;grid-row:2}.serial{position:absolute;right:3%;bottom:2%;font-size:8px;letter-spacing:.16em}.prototype-parts{display:none}.instrument.skin-prototype{border-radius:5px;background-color:#b8894c;background-image:radial-gradient(#684b27 1px,transparent 1.5px);background-size:19px 19px;box-shadow:0 34px 60px #0009,0 7px 0 #6f4b23}.skin-prototype .panel-grain{display:none}.skin-prototype .screen-module{left:39%;top:22%;width:27%;height:26%;background:#184b6d;transform:rotate(-1deg)}.skin-prototype .utility-row{top:12%;left:72%;right:4%;grid-template-columns:repeat(2,1fr);gap:10%}.skin-prototype .utility{background:#e1b72e;border-radius:3px;box-shadow:inset 0 0 0 4px #222,0 4px 2px #0005;font-size:10px}.skin-prototype .utility:nth-child(3){background:#e1b72e}.skin-prototype .utility:nth-child(4){background:#f0eee2}.skin-prototype .joystick-zone{left:5%;top:40%;width:27%}.skin-prototype .degree-grid{left:37%;right:5%;top:59%;bottom:6%;gap:8% 3%}.skin-prototype .degree{border-radius:50%;background:#e0b72c;box-shadow:inset 0 -5px #947617,0 5px 3px #0005;font-size:clamp(14px,2.5vw,26px)}.skin-prototype .d1,.skin-prototype .d4{background:#b83b31}.skin-prototype .d6{background:#b83b31}.skin-prototype .d3{background:#222;color:#ddd}.skin-prototype .d4{background:#ece9df;color:#555}.skin-prototype .prototype-parts{display:block}.board{position:absolute;border:2px solid #ddd;color:#ddd;background:#12475d;padding:5px;font-size:8px}.board.esp{left:4%;top:5%;width:24%;height:18%;background:#142b38}.board.dac{left:4%;top:25%;width:24%;height:10%;background:#38161b}.board.adc{left:39%;top:5%;width:27%;height:10%;background:#18567a}.status-strip{display:flex;justify-content:center;gap:clamp(18px,5vw,70px);flex-wrap:wrap;border-block:1px solid #ffffff22;padding:14px;font-size:10px;letter-spacing:.1em;color:#99958b}.status-strip b{color:#e8e4d8}.status-dot{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#777}.audio-on .status-dot{background:#65ff9c;box-shadow:0 0 10px #65ff9c}.editor{margin:30px auto 0;max-width:920px;background:#e8e4d8;color:#171714;padding:clamp(20px,4vw,40px);box-shadow:8px 8px 0 var(--orange)}.editor-head{display:flex;justify-content:space-between;align-items:start}.editor h2{font:900 clamp(22px,4vw,38px) Arial,sans-serif;margin:4px 0 24px}.editor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.editor label{font-size:10px;font-weight:900;letter-spacing:.1em}.editor select,.editor input{display:block;width:100%;margin-top:8px}.editor select{border:2px solid #171714;border-radius:0;background:white;padding:9px}.editor output{float:right}.preset-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.editor-message{font-size:11px;color:#69675f}footer{display:flex;justify-content:space-between;padding:24px clamp(18px,4vw,56px);font-size:9px;letter-spacing:.15em;color:#757169}@media(max-width:700px){.topbar{height:56px}.intro h1{font-size:56px}.instrument{width:98vw}.editor-grid{grid-template-columns:repeat(2,1fr)}.status-strip span:nth-child(2){display:none}.utility-row{left:37%}.degree-grid{left:33%}.skin-prototype .degree-grid{left:36%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}