*{box-sizing:border-box}body{margin:0;background:#fff;color:#232421;font-family:Arial,Helvetica,sans-serif}button,input,label{font:inherit}button,.file-button{cursor:pointer;border:1px solid #d9d9d2;background:#fff;color:#232421;padding:10px 12px;font:10px var(--arcade-mono);border-radius:0}button:hover,.file-button:hover{border-color:#232421;color:#c73136}button[aria-pressed=true]{border-color:#c73136;color:#c73136;background:#fcf2f2}button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #c73136;outline-offset:3px}main{max-width:1800px;margin:5vh auto 0;padding:0 24px}.toolbar,.transport,.patch-bar{display:flex;justify-content:space-between;align-items:center;gap:10px}.toolbar{margin-bottom:24px}.transport{justify-content:start;flex-wrap:wrap}#status,.patch-bar,.audio-readout{font:10px/1.7 var(--arcade-mono);color:#777873}#status{text-align:right}.rack-scroll{overflow-x:auto;padding-bottom:12px}#rack{position:relative;min-width:1248px;border:1px solid #232421;padding:13px 8px;background:linear-gradient(#dadbd5 0 11px,#a5a69d 11px calc(100% - 11px),#dadbd5 calc(100% - 11px));view-transition-name:modular}#modules{display:flex;aspect-ratio:1040/255}.module{position:relative;width:calc(var(--hp)*100%/104);height:100%;container-type:size;background:#e8e9e3;color:#33372f;border-right:1px solid #9a9c92;--panel:#e8e9e3;--ink:#33372f;--line:#8d9385;--nut:#bdc1b7;--cap:#eeeeE7;--accent:#c73136}.module.ink{background:#303632;color:#dedfd5;--panel:#303632;--ink:#dedfd5;--line:#8e9888;--nut:#b2b6a8;--cap:#e5e6dc}.module.warm{background:#ded6c3;color:#35392f;--panel:#ded6c3;--ink:#35392f;--line:#948a72}.module h2{position:absolute;top:1.3%;left:12%;right:12%;margin:0;text-align:center;font:600 2.1cqh var(--arcade-mono);letter-spacing:.05em;line-height:1.2}.module.warm h2{top:0;left:0;right:0;height:5.5%;padding-top:1.2%;background:#ac4e48;color:#fff;font-size:1.65cqh}.screw{position:absolute;width:2.4cqh;height:2.4cqh;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f7f7ee,#989d90);border:1px solid #73796b;z-index:1}.screw:after{content:'';position:absolute;left:22%;right:22%;top:48%;height:1px;background:#60675a;transform:rotate(-30deg)}.screw.tl{left:5%;top:1%}.screw.tr{right:5%;top:1%}.screw.bl{left:5%;bottom:1%}.screw.br{right:5%;bottom:1%}.module[data-module=propust] .screw.tr,.module[data-module=propust] .screw.br,.module[data-module=ochd] .screw.tr,.module[data-module=ochd] .screw.br{display:none}.panel-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:var(--line);stroke-width:.45}.panel-band{fill:#303632;stroke:none}.vertical-label{position:absolute;right:2%;top:7%;writing-mode:vertical-rl;letter-spacing:.2em;font:600 2cqh var(--arcade-mono)}.face-control{position:absolute;transform:translate(-50%,-50%)}.knob{display:block;width:var(--diameter);height:var(--diameter);z-index:3}.knob input{display:block;appearance:none;-webkit-appearance:none;width:100%;height:100%;border-radius:50%;border:1px solid #191e18;margin:0;background:radial-gradient(circle at 44% 42%,var(--cap) 0 53%,#8b9282 56%,#30362d 60%,#171d17 74%);box-shadow:1px 2px 2px #0004;touch-action:none;cursor:ns-resize}.knob input::-webkit-slider-thumb{appearance:none;width:0;height:0}.knob input::-moz-range-thumb{width:0;height:0;border:0}.knob i{position:absolute;inset:0;border-radius:50%;pointer-events:none;transform:rotate(var(--angle))}.knob i:after{content:'';position:absolute;top:13%;left:47%;width:6%;height:33%;background:#3b4235;border-radius:1px}.knob span{position:absolute;top:calc(100% + .9cqh);left:50%;transform:translateX(-50%);font:1.65cqh var(--arcade-mono);white-space:nowrap;color:var(--ink);pointer-events:none}.knob output{display:none;position:absolute;inset:20% -20%;align-items:center;justify-content:center;background:var(--cap);color:#232421;font:2cqh var(--arcade-mono);z-index:2;pointer-events:none;border-radius:2px}.knob:hover output,.knob:focus-within output{display:flex}.knob:hover i,.knob:focus-within i{visibility:hidden}.module[data-module=friends] .knob input{--cap:#343a33;background:radial-gradient(circle at 44% 42%,#343a33 0 53%,#1c211b 56%,#4e5648 60%,#171d17 74%)}.module[data-module=friends] .knob i:after{background:#e6e9dd}.module[data-module=friends] .knob output{background:#e5e6dc}.socket-wrap{--jack-size:5.1cqh;width:var(--jack-size);height:var(--jack-size);z-index:5}.socket{position:relative;display:block;padding:0;width:100%;height:100%;background:transparent;border:0;border-radius:50%;color:var(--ink);box-shadow:0 1px 2px #0005;isolation:isolate}.socket:before{content:'';position:absolute;inset:0;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);background:linear-gradient(125deg,#f1f1e5,var(--nut) 45%,#737d6a 70%,#dadfd0);border:1px solid #69745e}.socket i{position:absolute;inset:17%;border-radius:50%;background:radial-gradient(circle,#101710 0 45%,#b6bcaa 48% 53%,#4d5b42 55% 64%,#e8ebdf 68%);box-shadow:inset 0 0 1px #000}.socket-wrap.out:before{content:'';position:absolute;inset:-.9cqh;background:#232b24;border:1px solid #67725e}.socket-wrap.out .socket{color:#e5e7dc}.socket-wrap span{position:absolute;top:calc(100% + .8cqh);left:50%;transform:translateX(-50%);font:1.45cqh var(--arcade-mono);white-space:nowrap;color:var(--ink);pointer-events:none}.socket.selected{outline:2px solid #e88471;outline-offset:4px}.socket.connected i{background:radial-gradient(circle,#232421 0 20%,#c6725e 24% 44%,#713b31 48% 60%,#d6a18b 65%)}.socket:hover{outline:1px solid #c73136;outline-offset:2px}.socket[aria-pressed=true]{background:none}.panel-button{width:var(--diameter);height:var(--diameter);border:1px solid #818b77;border-radius:50%;padding:0;background:radial-gradient(circle at 40% 35%,#5c6655,#1d241c);z-index:3;box-shadow:0 1px 2px #0005}.panel-button span{position:absolute;top:calc(100% + 1cqh);left:50%;transform:translateX(-50%);font:1.45cqh var(--arcade-mono);white-space:nowrap;color:var(--ink);pointer-events:none}.panel-button.blue{background:#5f91ad;border:3px solid #c3d0c2}.panel-button.green{background:#9eb7a5;border:3px solid #b9c9b4;border-radius:2px}.panel-button.switch{background:#aeb5a2}.panel-button.switch i{position:absolute;inset:-15% 30% 20%;background:linear-gradient(90deg,#7c8970,#e3e8d7,#78846b);border:1px solid #56644a;transform:rotate(-20deg)}.panel-button.switch[aria-pressed=true] i{transform:rotate(20deg)}.led{position:absolute;width:1.8cqh;height:1.8cqh;border-radius:50%;background:#69795b;box-shadow:inset 0 0 2px #17230d;transform:translate(-50%,-50%);pointer-events:none}.led.lit{background:#bed28c;box-shadow:0 0 4px #a4c574}.module[data-module=touch] h2{display:none}.module[data-module=touch] .socket-wrap{--jack-size:3.2cqh}.module[data-module=touch] .socket-wrap.out:before{display:none}.module[data-module=touch] .socket-wrap span{font-size:1.15cqh}.module[data-module=touch] .knob span{display:none}.touch-title{position:absolute;left:39%;top:6.5%;font:600 1.8cqh/1.15 var(--arcade-mono)}.note-display{position:absolute;top:5%;left:19%;font:600 12cqh/1 var(--arcade-mono);letter-spacing:-.08em;color:#d77670;text-shadow:0 0 3px #e7625044}.pads{position:absolute;left:17.5%;right:1.5%;top:24%;bottom:7%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:1fr 1fr;gap:5.5cqh 1.2cqh}.pad{padding:0;position:relative;touch-action:manipulation;background:repeating-linear-gradient(0deg,#3a4139 0 1.1cqh,#a6ad9a 1.1cqh 1.35cqh,#d5d8c9 1.35cqh 1.5cqh);border:0;box-shadow:inset 0 0 0 1px #b8bfaa;min-width:0}.pad span{display:none;position:absolute;bottom:2px;left:50%;transform:translateX(-50%);font:2cqh var(--arcade-mono);background:#303632;color:#e5e7dc;padding:1px 3px}.pad:hover span,.pad:focus-visible span{display:block}.pad.active{background:repeating-linear-gradient(0deg,#513832 0 1.1cqh,#c47765 1.1cqh 1.35cqh,#e7b09b 1.35cqh 1.5cqh);box-shadow:inset 0 0 0 1px #c47765}.transpose-plate{position:absolute;left:1.5%;width:14.5%;height:32.5%;padding:0;border:0;background:repeating-linear-gradient(90deg,#3a4139 0 1.1cqh,#a6ad9a 1.1cqh 1.35cqh,#d5d8c9 1.35cqh 1.5cqh);box-shadow:inset 0 0 0 1px #b8bfaa}.transpose-plate.up{top:24%}.transpose-plate.down{bottom:7%}.reel-slot{position:absolute;right:3%;bottom:7%;width:12%;height:3%;background:#171e18;border:1px solid #c2c9b7;cursor:pointer}.reel-slot span{position:absolute;top:110%;font:1.3cqh var(--arcade-mono);color:var(--ink);width:100%;text-align:center}.reel-slot input,.file-button input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.file-button{position:relative;overflow:hidden;display:inline-flex;align-items:center}.file-button:focus-within,.reel-slot:focus-within{outline:2px solid #c73136;outline-offset:3px}.module[data-module=ochd] h2{top:auto;bottom:1.5%;left:25%;font-size:3cqh}.module[data-module=ochd] .knob span{top:auto;bottom:calc(100% + 1cqh)}.module[data-module=ochd] .socket-wrap{--jack-size:5.4cqh}.module[data-module=ochd] .socket-wrap.out:before{display:none}.module[data-module=ochd] .socket-wrap.out span{display:none}.module[data-module=clutch] .knob span{left:-25%;top:25%;transform:none}.module[data-module=clutch] .socket-wrap span{font-size:1.2cqh}.module[data-module=propust] .socket-wrap{--jack-size:4.8cqh}.module[data-module=propust] .socket-wrap.out:before{display:none}.module[data-module=propust] .socket-wrap span{font-size:1.2cqh}.module[data-module=clutch] .socket-wrap.out:before{background:#ad5048;border:0}.module[data-module=hendrik] .vertical-label{top:48%;right:0;font-size:1.3cqh}.module[data-module=hendrik] .knob span{font-size:1.35cqh}.module[data-module=hendrik] .socket-wrap span{font-size:1.2cqh}.module[data-module=hendrik] .socket-wrap.out:before{border-radius:50%;background:#ad5048;border:0}.module[data-module=morph] .knob span{font-size:1.55cqh}.module[data-module=morph] .knob[data-control]{z-index:3}.module[data-module=morph] .socket-wrap span{font-size:1.35cqh}.module[data-module=morph] .panel-button[data-action=shift]{background:#e8ebdf}.module[data-module=morph] .panel-button[data-action=reel] span{top:calc(100% + 3cqh)}.module[data-module=morph] .panel-button[data-action=splice] span{top:auto;bottom:calc(100% + .6cqh)}#cables{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}#cables path{fill:none;stroke-width:4;opacity:.8;pointer-events:stroke;cursor:pointer;filter:drop-shadow(0 2px 1px #0004)}#cables path:hover{stroke-width:7;opacity:1}.hide-cables #cables{visibility:hidden}.patch-bar{margin:8px 0 18px;gap:20px}.patch-bar>div{display:flex;gap:7px;flex-wrap:wrap}.audio-readout{display:flex;align-items:center;gap:20px;margin:0 0 20px}.audio-readout canvas{width:150px;height:24px;border-bottom:1px solid #ddd}.connections,.note-settings,.guide{border-top:1px solid #d9d9d2;padding:16px 0;font:11px/1.8 var(--arcade-mono)}summary{cursor:pointer}summary span{color:#777873;margin-left:20px;font-size:9px}.connections ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:8px 0}.connections li button{font-size:9px}#note-editor{display:flex;gap:10px;flex-wrap:wrap;padding:15px 0}#note-editor label{display:flex;flex-direction:column;font-size:9px;gap:5px}#note-editor input{width:62px;border:1px solid #d9d9d2;padding:8px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin:26px 0}.guide h2{font:11px var(--arcade-mono)}.guide p{color:#777873}.guide a,footer a{color:inherit;text-underline-offset:3px}.credits{font:10px/1.7 var(--arcade-mono);max-width:1100px}.game-footer{justify-content:end;margin-top:20px}@media(prefers-reduced-motion:no-preference){::view-transition-group(modular){animation-duration:.45s}}@media(prefers-reduced-motion:reduce){::view-transition-group(*){animation:none}}@media(max-width:700px){main{padding:0 12px;margin-top:20px}.toolbar,.patch-bar{align-items:start;flex-direction:column;gap:12px}#status{text-align:left}.guide-grid{grid-template-columns:1fr;gap:10px}.patch-bar button,.file-button{min-height:42px}.audio-readout{flex-wrap:wrap}}@media(pointer:coarse){#rack{min-width:1664px}}
/* The hardware geometry uses the same paper and fine rules as the arcade. */
#rack{border-color:#999d94;background:linear-gradient(#efefea 0 11px,#fafaf7 11px calc(100% - 11px),#efefea calc(100% - 11px))}.module,.module.ink,.module.warm{background:#fafaf7;color:#50574b;border-right:1px solid #bfc3b8;--panel:#fafaf7;--ink:#50574b;--line:#b3baaa;--nut:#d7dbcf;--cap:#f5f6ef}.module:nth-child(2n){background:#f4f5ef;--panel:#f4f5ef}.module.warm h2{background:transparent;color:#69725f;border-bottom:1px solid #c4c9ba;font-weight:400}.module h2{font-weight:400;color:#58634d}.panel-art{stroke-width:.3}.panel-band{fill:none;stroke:#aeb7a3;stroke-width:.3}.screw{background:transparent;border:1px solid #b2bbaa;box-shadow:none}.screw:after{background:#a2ae97}.knob input,.module[data-module=friends] .knob input{background:#f2f4eb;border:1px solid #a1ad95;box-shadow:none}.knob i:after,.module[data-module=friends] .knob i:after{background:#859475;width:3%;left:48.5%;height:31%;top:14%}.knob output,.module[data-module=friends] .knob output{background:#f2f4eb;color:#505b44}.socket{box-shadow:none}.socket:before{background:#f2f4eb;border:1px solid #a9b49d}.socket i{inset:19%;background:radial-gradient(circle,#f8f9f3 0 42%,#9ba88e 45% 49%,#f4f6ed 52% 64%,#b8c2ac 67% 71%,#f8faf3 74%);box-shadow:none}.socket-wrap.out:before{background:transparent;border:1px solid #b6c0ab}.socket-wrap.out .socket{color:var(--ink)}.socket.connected i{background:radial-gradient(circle,#f8f3ed 0 21%,#bf766c 24% 40%,#f4dfd6 44% 57%,#bd9186 61% 65%,#f8f5ef 70%)}.module[data-module=clutch] .socket-wrap.out:before,.module[data-module=hendrik] .socket-wrap.out:before{background:transparent;border:1px solid #b9c3ad}.panel-button{background:#eef1e7;border:1px solid #a7b49a;box-shadow:none}.panel-button.blue{background:#c4d6dc;border:1px solid #a6b9bd}.panel-button.green{background:#d0ddca;border:1px solid #aabca0}.panel-button.switch{background:#edf1e5;border-color:#a4b397}.panel-button.switch i{background:#dfe6d4;border-color:#a0b08f}.led{background:#e2e8d8;border:1px solid #aab99a;box-shadow:none}.led.lit{background:#b2c69b;box-shadow:none}.pad{background:repeating-linear-gradient(0deg,#f7f8f2 0 1.1cqh,#b0bba2 1.1cqh 1.23cqh,#f7f8f2 1.23cqh 1.5cqh);box-shadow:inset 0 0 0 1px #b9c4ab}.transpose-plate{background:repeating-linear-gradient(90deg,#f7f8f2 0 1.1cqh,#b0bba2 1.1cqh 1.23cqh,#f7f8f2 1.23cqh 1.5cqh);box-shadow:inset 0 0 0 1px #b9c4ab}.pad.active{background:repeating-linear-gradient(0deg,#fcf3ef 0 1.1cqh,#c48c80 1.1cqh 1.23cqh,#fcf3ef 1.23cqh 1.5cqh);box-shadow:inset 0 0 0 1px #c48c80}.pad span{background:#f4f6ed;color:#657457}.note-display{color:#b47b70;text-shadow:none;font-weight:400}.touch-title{color:#77866a;font-weight:400}.reel-slot{background:#f0f3e8;border-color:#b2bfa1}.vertical-label{font-weight:400;color:#859576}#cables path{stroke-width:2;opacity:.65;filter:none}#cables path:hover{stroke-width:5;opacity:1}
/* Whole-pixel traces stay legible at both standard and Retina resolutions. */
.pad{background:repeating-linear-gradient(0deg,#f7f8f2 0 4px,#b7beaf 4px 5px)}.transpose-plate{background:repeating-linear-gradient(90deg,#f7f8f2 0 4px,#b7beaf 4px 5px)}.pad.active{background:repeating-linear-gradient(0deg,#fcf3ef 0 4px,#c48c80 4px 5px)}
/* Charcoal hardware details on the arcade's white paper. */
.module,.module.ink,.module.warm,.module:nth-child(2n){--ink:#282d29;--line:#7e887b;color:var(--ink)}
.module h2,.module.warm h2,.touch-title{color:#282d29;font-weight:600}.module.ink{background:#e2e6df;--panel:#e2e6df}.module.warm{background:#eee9df;--panel:#eee9df}
.knob input,.module[data-module=friends] .knob input{background:#303831;border:1px solid #171e18;box-shadow:0 1px 2px #0003}.knob i:after,.module[data-module=friends] .knob i:after{background:#fafbf6;width:5%;left:47.5%}
.socket:before{background:#c9d0c3;border-color:#596352}.socket i{background:radial-gradient(circle,#202720 0 42%,#87947c 45% 49%,#e4e9dd 52% 64%,#7c8873 67% 71%,#e7ecdf 74%)}
.socket-wrap.out:before,.module[data-module=clutch] .socket-wrap.out:before,.module[data-module=hendrik] .socket-wrap.out:before{background:#303831;border-color:#303831}.socket.connected i{background:radial-gradient(circle,#261f1c 0 21%,#c73136 24% 40%,#f0c9bb 44% 57%,#94463a 61% 65%,#eee6dc 70%)}
.panel-art{opacity:.65}.note-display{color:#a3292d}.vertical-label{color:#4b5846}.pad{background:repeating-linear-gradient(0deg,#e8ece1 0 4px,#67775a 4px 5px)}.transpose-plate{background:repeating-linear-gradient(90deg,#e8ece1 0 4px,#67775a 4px 5px)}.pad.active{background:repeating-linear-gradient(0deg,#f7ddd5 0 4px,#a73831 4px 5px)}
#cables path{stroke-width:3;opacity:.95;filter:drop-shadow(0 1px 1px #0003)}#status,.patch-bar,.audio-readout,.guide p,summary span{color:#50564e}button,.file-button{border-color:#aab0a5}.led.lit{background:#5b8d37;box-shadow:0 0 4px #7ea35c}
.studio-dock{display:flex;align-items:center;justify-content:center;gap:46px;padding:0 0 24px;border-bottom:1px solid #232421;margin-bottom:24px}.studio-dock #expand-op1{width:300px;max-width:100%;padding:0;border:0;background:transparent}.studio-dock img{display:block;width:100%;height:auto}.studio-dock #expand-op1 span{display:flex;justify-content:space-between;border-top:1px solid #aab0a5;padding:10px 0;color:#232421}.studio-dock b{font-weight:400;color:#a3292d}.dock-routing{font:11px/1.7 var(--arcade-mono);max-width:350px}.dock-routing p{font:18px Arial;margin:10px 0 18px}.dock-routing label{display:flex;gap:12px;align-items:center}.dock-routing small{display:block;max-width:290px;margin-top:10px;color:#50564e}.eyebrow{font:10px var(--arcade-mono);letter-spacing:1px}.external-port{margin-top:12px;font:10px var(--arcade-mono);background:#303831;color:white}.external-port.connected{border-color:#c73136}.external-port.selected{outline:2px solid #c73136;outline-offset:3px}.rack-heading{display:flex;justify-content:space-between;margin-bottom:16px;font:10px var(--arcade-mono);color:#50564e}
#op1-view[hidden]{display:none}#op1-view{position:fixed;inset:0;z-index:1000;background:#fff;display:flex;flex-direction:column}.op1-view-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;border-bottom:1px solid #aab0a5;font:11px var(--arcade-mono)}#op1-frame{width:100%;flex:1;border:0;min-height:0}.op1-expanded{overflow:hidden}
.patch-library{border-top:1px solid #232421;padding:22px 0 24px;margin-top:20px;font:11px/1.8 var(--arcade-mono)}.library-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.library-heading h2{font:22px Arial;margin:0 0 18px}.library-heading>span{color:#50564e}.library-controls,#library-save{display:flex;gap:12px;align-items:end;flex-wrap:wrap}select,#patch-name{font:11px var(--arcade-mono);padding:10px;border:1px solid #aab0a5;background:white;color:#232421;max-width:100%}.library-controls label,#library-save label{display:flex;gap:10px;align-items:center}#patch-description{max-width:850px;margin-bottom:6px}#patch-source{color:#a3292d}#library-save{margin:18px 0 8px}.patch-library small{display:block;max-width:850px;color:#50564e}.library-controls select{width:250px}#patch-name{width:250px}
@media(max-width:700px){.studio-dock{gap:20px;flex-direction:column}.studio-dock #expand-op1{width:240px}.dock-routing{width:100%;max-width:400px}.dock-routing small{max-width:none}.dock-routing p{margin:8px 0}.library-heading{align-items:start;flex-direction:column;margin-bottom:12px}.library-heading h2{margin-bottom:0}.library-controls label,#library-save label{width:100%;align-items:start;flex-direction:column;gap:4px}.library-controls select,#patch-name{width:100%}.op1-view-bar{padding:10px}.op1-view-bar span{display:none}.rack-heading{gap:12px}}
.sequence-length{display:flex;align-items:center;gap:12px;margin-top:14px}.sequence-length input{width:62px;padding:8px;border:1px solid #aab0a5}
button:disabled{opacity:.4;cursor:default}