@font-face{font-family:Bastardo;src:url('assets/bastardo-groteskish.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
:root{--green:#29382e;--paper:#f2f1eb;--graphite:#272727;--line:rgba(242,241,235,.7);--u:min(1vw,1.77778dvh)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Bastardo,Helvetica,Arial,sans-serif;font-weight:400;background:var(--green);color:var(--paper);-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none;padding:0}button,input,select,[role=slider]{-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,[role=slider]:focus-visible{outline:1px solid var(--paper);outline-offset:4px}button:hover{opacity:.7}button:disabled{opacity:.4}h1,h2,p{margin:0;font-weight:400}h1,h2{font-size:calc(var(--u)*2);line-height:1.1;letter-spacing:-.045em}h2{white-space:nowrap}.page{width:100%;height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto auto;justify-items:center;padding:0 3.1vw 2.9dvh;gap:2.8dvh}.intro{min-height:0;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;width:100%;padding-top:2dvh;gap:0}.logo{width:calc(var(--u)*21);height:auto;max-height:16dvh;object-fit:contain;flex-shrink:1;min-height:0}.intro-rule{height:1px;background:var(--paper);opacity:.95;width:calc(var(--u)*39.5);margin:4.4dvh 0 3.5dvh;flex-shrink:0}.instrument{width:calc(var(--u)*75.7);height:calc(var(--u)*30.7);border:1px solid var(--paper);border-radius:calc(var(--u)*1.75);padding:calc(var(--u)*2.85) calc(var(--u)*3.2) calc(var(--u)*2.55);display:grid;grid-template-rows:minmax(0,1fr) calc(var(--u)*5.1) calc(var(--u)*8.9);min-height:0}.modules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-inline:calc(var(--u)*-3.2);padding-inline:calc(var(--u)*3.2)}.module{min-width:0;text-align:center;position:relative;border-right:1px solid var(--line);padding:0 calc(var(--u)*1.9)}.module:first-child{padding-left:0}.module:last-child{border-right:0;padding-right:0}.module h2{margin-bottom:calc(var(--u)*.75)}.knob-pair{display:flex;justify-content:space-between;gap:calc(var(--u)*1.8)}.control{position:relative;min-width:0;display:flex;align-items:center;flex-direction:column;flex:1}.control label{font-size:calc(var(--u)*1);line-height:1.15;display:block;margin-bottom:calc(var(--u)*.9)}.dial{height:calc(var(--u)*4.65);width:calc(var(--u)*4.65);border:1px solid var(--paper);border-radius:50%;touch-action:none;user-select:none;cursor:ns-resize;flex-shrink:0}.knob{display:block;width:100%;height:100%;position:relative;transform:rotate(var(--rotation,0deg))}.knob i{position:absolute;top:9%;left:calc(50% - .5px);width:1px;height:18%;background:var(--paper)}.value-tooltip{position:absolute;bottom:calc(var(--u)*-1.15);font-size:calc(var(--u)*.7);white-space:nowrap;visibility:hidden;pointer-events:none}.control:focus-within .value-tooltip,.control.dragging .value-tooltip{visibility:visible}.wave-display{height:calc(var(--u)*4.55);display:flex;align-items:center;justify-content:center}.wave-display svg{width:calc(var(--u)*13);height:calc(var(--u)*3)}.wave-display path{fill:none;stroke:var(--paper);stroke-width:1;vector-effect:non-scaling-stroke}.wave-options{display:flex;gap:calc(var(--u)*.45);justify-content:center;margin-top:calc(var(--u)*.15)}.wave-options button{height:calc(var(--u)*1.1);width:calc(var(--u)*2.9);border:1px solid var(--paper);border-radius:4px;font-size:calc(var(--u)*.78);line-height:1}.wave-options button.active{background:rgba(242,241,235,.08)}.octave{display:flex;justify-content:center;align-items:center;gap:calc(var(--u)*.25);font-size:calc(var(--u)*.78);line-height:1;margin-top:calc(var(--u)*.45)}.octave button{min-width:calc(var(--u)*1.2);height:calc(var(--u)*1.3);font-size:calc(var(--u)*.95)}.patchbay{position:relative;border-block:1px solid var(--line);display:grid;grid-template-columns:24% 48% 28%;align-items:center;font-size:calc(var(--u)*1.5);line-height:1;min-height:0}.patch-label{text-align:center}.jacks{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*1.4)}.jack{position:relative;display:flex;align-items:center;gap:calc(var(--u)*1.1);white-space:nowrap;min-height:calc(var(--u)*2.6)}.jack i{display:block;width:calc(var(--u)*1.35);height:calc(var(--u)*1.35);border:1px solid var(--paper);border-radius:50%;background:var(--green);flex-shrink:0}.jack.connected i{box-shadow:inset 0 0 0 calc(var(--u)*.34) var(--green);background:var(--paper)}.jack.source[aria-pressed=true] i{outline:1px dashed var(--paper);outline-offset:4px}.cables{position:absolute;width:100%;height:100%;inset:0;pointer-events:none;overflow:visible;z-index:1}.cables path{fill:none;stroke:var(--paper);stroke-width:1;opacity:.65;stroke-linecap:round}.patchbay>button{justify-self:center;margin-left:calc(var(--u)*4.8)}.sequencer{min-height:0;padding:calc(var(--u)*1.55) calc(var(--u)*3.35) 0}.seq-head{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:calc(var(--u)*1);margin-bottom:calc(var(--u)*2.15)}.seq-head h2{text-align:center}.transport{display:flex;align-items:center;gap:calc(var(--u)*2.25)}#play{width:calc(var(--u)*2.2);height:calc(var(--u)*2.3);display:block}#play svg{display:block;width:100%;height:100%;fill:none;stroke:var(--paper);stroke-width:1;vector-effect:non-scaling-stroke}.stop-shape{display:none}.playing .play-shape{display:none}.playing .stop-shape{display:block}.tempo{display:flex;align-items:baseline;white-space:nowrap;font-size:calc(var(--u)*1.6);letter-spacing:-.04em}.tempo input{border:0;background:none;padding:0;outline-offset:0;width:2ch;min-width:2ch;max-width:3ch;appearance:textfield;-moz-appearance:textfield;text-align:right;line-height:1}.tempo input::-webkit-inner-spin-button,.tempo input::-webkit-outer-spin-button{appearance:none;margin:0}.seq-actions{display:flex;justify-content:flex-end;gap:calc(var(--u)*1.4);font-size:calc(var(--u)*1.5)}.seq-actions button{border:1px solid var(--paper);border-radius:999px;min-width:calc(var(--u)*6.95);height:calc(var(--u)*2.05);line-height:1;padding:0 calc(var(--u)*.8)}.steps{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:calc(var(--u)*1.05)}.step{position:relative;height:calc(var(--u)*3);border:1px solid var(--paper);border-radius:calc(var(--u)*.45);display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*1.6);min-width:0;transition:background .08s,color .08s}.step.current{background:var(--paper);color:var(--green)}.step:focus-within{outline:1px solid var(--paper);outline-offset:4px}.step select{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;opacity:0;border:0;appearance:none}.step option{color:var(--paper);background:var(--green)}.step-label{pointer-events:none}footer{display:flex;justify-content:space-between;width:100%;font-size:calc(var(--u)*2);line-height:1.1;letter-spacing:-.035em}footer>span:last-child{white-space:nowrap}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-aspect-ratio:4/3) and (min-width:701px){:root{--u:min(1.18vw,1.9dvh)}.page{gap:3dvh;padding-bottom:3dvh}.intro-rule{margin:3dvh 0}.logo{width:calc(var(--u)*23)}.instrument{width:calc(var(--u)*79)}footer{font-size:calc(var(--u)*1.7)}}
@media(max-width:700px) and (orientation:portrait){:root{--u:min(1vw,1.78dvh)}.page{padding:max(12px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));gap:2.6dvh;grid-template-rows:minmax(0,1fr) minmax(0,3.2fr) auto}.intro{padding:0;justify-content:center}.logo{width:min(49vw,27dvh);max-height:12dvh;flex-shrink:1}.intro-rule{width:74%;margin:2.2dvh 0 1.9dvh}h1{font-size:clamp(17px,4.8vw,28px)}.instrument{width:100%;height:100%;border-radius:20px;padding:2.6dvh 4vw 2.4dvh;grid-template-rows:minmax(0,1fr) 7.7dvh 14.5dvh}.modules{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));padding:0;margin:0;row-gap:2.2dvh}.module{padding:0 3vw}.module:nth-child(2){border:0;padding-right:0}.module:nth-child(3){padding-left:0}.module:nth-child(n+3){padding-top:1.4dvh;border-top:1px solid var(--line)}.module h2{font-size:clamp(14px,4.2vw,23px);margin-bottom:1dvh;letter-spacing:-.045em}.control label{font-size:clamp(10px,2.8vw,15px);margin-bottom:1dvh}.knob-pair{gap:2vw}.dial{width:min(12vw,7.5dvh);height:min(12vw,7.5dvh)}.value-tooltip{font-size:9px;bottom:-1.5dvh}.wave-display{height:5.7dvh}.wave-display svg{width:31vw;height:4.5dvh}.wave-options{gap:1vw;margin-top:.2dvh}.wave-options button{width:7.4vw;height:2.1dvh;min-height:16px;font-size:clamp(8px,2.2vw,12px);border-radius:3px}.octave{gap:1vw;font-size:10px;margin-top:.3dvh}.octave button{height:2.5dvh;min-width:24px;font-size:13px}.patchbay{grid-template-columns:19% 63% 18%;font-size:clamp(10px,2.7vw,14px)}.patch-label{text-align:left;max-width:40px;line-height:1.2}.jacks{gap:1.5vw}.jack{flex-direction:column;gap:.6dvh;min-height:5dvh;justify-content:center}.jack i{width:15px;height:15px}.jack.connected i{box-shadow:inset 0 0 0 4px var(--green)}.patchbay>button{margin:0;font-size:clamp(9px,2.5vw,13px);justify-self:end}.sequencer{padding:1.4dvh 0 0}.seq-head{grid-template-columns:1fr 1fr 1fr;gap:1vw;margin-bottom:1.5dvh}.seq-head h2{font-size:clamp(13px,3.7vw,21px)}.transport{gap:1.3vw}#play{height:27px;width:22px;flex-shrink:0}.tempo{font-size:clamp(12px,3.5vw,19px)}.seq-actions{gap:1.3vw;font-size:clamp(11px,2.9vw,16px)}.seq-actions button{min-width:0;min-height:24px;height:3.4dvh;padding:0 1.7vw}.steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:1dvh 2vw}.step{height:3.8dvh;min-height:24px;border-radius:5px;font-size:clamp(13px,3.6vw,19px)}footer{font-size:clamp(10px,3vw,15px);gap:15px;align-items:flex-end}footer>span:first-child{max-width:77%;line-height:1.2}}
@media(max-width:700px) and (orientation:landscape){:root{--u:min(1.15vw,1.65dvh)}.page{gap:2.3dvh;padding-bottom:2.3dvh}.intro-rule{margin:2dvh 0}.logo{max-height:13dvh}.instrument{width:calc(var(--u)*85)}}
@media(prefers-reduced-motion:reduce){.step{transition:none}}
@media(min-width:701px), (orientation:landscape){.modules{padding-inline:0}.module:first-child{padding-left:calc(var(--u)*3.2)}.module:last-child{padding-right:calc(var(--u)*3.2)}}
.audio-error{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);max-width:90vw;border:1px solid var(--paper);border-radius:10px;background:var(--graphite);padding:12px 18px;text-align:center;font-size:14px;z-index:10}
@media(max-width:700px) and (orientation:portrait){.instrument{grid-template-rows:minmax(0,1fr) max(44px,7.7dvh) max(104px,14.5dvh)}}