/* OSCILLATE — OSC-13 · 1984 polysynth meets Miami dusk */

:root{
  --void:#0D0221;
  --panel-hi:#1d1536;
  --panel-lo:#120b26;
  --ink:#EDE9FA;
  --ink-dim:rgba(237,233,250,.72);
  --silk:rgba(237,233,250,.58);
  --mint:#00F0B5;
  --pink:#FF3CAC;
  --violet:#784BA0;
  --blue:#2B86C5;
  --grad:linear-gradient(100deg,#FF3CAC 0%,#784BA0 52%,#2B86C5 100%);
  --ease-snap:cubic-bezier(.2,1.4,.3,1);
  --ease-soft:cubic-bezier(.22,.9,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- entrance choreography ---------- */
@keyframes riseIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
@keyframes panelIn{
  from{opacity:0;transform:translateY(34px) scale(.988)}
  to{opacity:1;transform:none}
}
.tag{animation:riseIn .8s var(--ease-out) .1s both}
.specs li{animation:riseIn .7s var(--ease-out) both}
.specs li:nth-child(1){animation-delay:.28s}
.specs li:nth-child(2){animation-delay:.36s}
.specs li:nth-child(3){animation-delay:.44s}
.specs li:nth-child(4){animation-delay:.52s}
.panel{animation:panelIn .9s var(--ease-out) .18s both}
.ctl-group{animation:riseIn .7s var(--ease-out) both}
.ctl-group:nth-child(1){animation-delay:.42s}
.ctl-group:nth-child(2){animation-delay:.51s}
.ctl-group:nth-child(3){animation-delay:.6s}
.ctl-group:nth-child(4){animation-delay:.69s}
.ctl-group:nth-child(5){animation-delay:.78s}
.kbd-wrap{animation:riseIn .8s var(--ease-out) .82s both}
.spectrum-bezel{animation:riseIn .8s var(--ease-out) .94s both}
.spec-scale{animation:riseIn .8s var(--ease-out) 1s both}
.panel-foot{animation:riseIn .8s var(--ease-out) 1.08s both}
.sigpath{animation:riseIn .9s var(--ease-out) 1.2s both}
.site-foot{animation:riseIn .9s var(--ease-out) 1.3s both}

*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-color:var(--violet) var(--void)}
body{
  min-height:100svh;
  background:var(--void);
  color:var(--ink);
  font-family:"Space Mono",ui-monospace,monospace;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

canvas#bg,canvas#scope{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;
}
canvas#bg{z-index:-2}
canvas#scope{z-index:-1}

::selection{background:var(--pink);color:var(--void)}

:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- sky header ---------- */
.sky{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:2rem;
  padding:clamp(1.1rem,2.5vh,1.8rem) clamp(1.2rem,4vw,3.2rem) 0;
  min-height:clamp(128px,19vh,178px);
}
.brand h1{
  font-family:"Michroma",sans-serif;
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  letter-spacing:.34em;
  margin-right:-.34em;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,60,172,.45));
  animation:riseIn .8s var(--ease-out) both,brandGlow 6s ease-in-out .8s infinite;
}
@keyframes brandGlow{
  0%,100%{filter:drop-shadow(0 0 14px rgba(255,60,172,.35))}
  50%{filter:drop-shadow(0 0 26px rgba(43,134,197,.55))}
}
.tag{
  margin-top:.55rem;
  font-size:clamp(.58rem,.9vw,.72rem);
  letter-spacing:.24em;
  color:var(--ink-dim);
}
.specs{
  list-style:none;
  text-align:right;
  font-size:clamp(.55rem,.8vw,.66rem);
  letter-spacing:.14em;
  color:var(--ink-dim);
  display:grid;
  gap:.42rem;
  padding-top:.35rem;
}
.specs li::after{
  content:"";
  display:inline-block;
  width:.44rem;height:.44rem;
  margin-left:.6rem;
  border-radius:50%;
  background:var(--mint);
  opacity:.5;
  box-shadow:0 0 8px var(--mint);
  vertical-align:1px;
}

/* ---------- rack / panel ---------- */
.rack{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 clamp(.6rem,2.5vw,2rem) clamp(.8rem,2vh,1.4rem);
}
.panel{
  position:relative;
  width:min(1180px,100%);
  border-radius:18px;
  padding:clamp(.9rem,1.8vh,1.4rem) clamp(1rem,2.6vw,2.4rem);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,var(--panel-hi),var(--panel-lo) 62%,#0e081f);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 0 rgba(0,0,0,.5),
    0 24px 70px rgba(0,0,0,.55),
    0 0 90px rgba(120,75,160,.16);
}
body.powered .panel{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 0 rgba(0,0,0,.5),
    0 24px 70px rgba(0,0,0,.55),
    0 0 110px rgba(255,60,172,.14),
    0 0 60px rgba(0,240,181,.08);
}
/* slow ambient sheen sweeping the brushed faceplate */
.panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 43%,rgba(255,255,255,.05) 50%,transparent 57%) no-repeat;
  background-size:260% 100%;
  background-position:140% 0;
  animation:sheen 12s cubic-bezier(.45,.05,.25,1) 2s infinite;
}
@keyframes sheen{
  0%,52%{background-position:140% 0}
  92%,100%{background-position:-140% 0}
}

/* screws */
.screw{
  position:absolute;width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#5d5773,#2a2440 58%,#0c081c);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28),0 1px 3px rgba(0,0,0,.7);
}
.screw::after{
  content:"";position:absolute;left:2px;right:2px;top:6.5px;height:1.6px;
  background:rgba(6,2,16,.85);border-radius:1px;
}
.s-tl{top:9px;left:10px}.s-tl::after{transform:rotate(38deg)}
.s-tr{top:9px;right:10px}.s-tr::after{transform:rotate(-21deg)}
.s-bl{bottom:9px;left:10px}.s-bl::after{transform:rotate(-64deg)}
.s-br{bottom:9px;right:10px}.s-br::after{transform:rotate(12deg)}

/* silkscreen */
.silk-label{
  font-size:.56rem;letter-spacing:.26em;color:var(--silk);
  text-transform:uppercase;
}
.silk-sub{font-size:.5rem;letter-spacing:.2em;color:rgba(237,233,250,.56)}
.silk-dim{font-size:.55rem;letter-spacing:.18em;color:rgba(237,233,250,.6)}
.silk-strong{
  font-family:"Michroma",sans-serif;font-size:.78rem;letter-spacing:.3em;
  color:var(--ink-dim);
}
body.powered .silk-strong{color:var(--mint);text-shadow:0 0 12px rgba(0,240,181,.5)}
.mint{color:var(--mint)}

/* ---------- panel head ---------- */
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding:.15rem .4rem .75rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.silk-id{display:flex;align-items:baseline;gap:1.1rem;flex-wrap:wrap}

.leds{display:flex;gap:.55rem}
.led{
  width:9px;height:9px;border-radius:50%;
  background:#231a3d;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8);
  transition:background .12s,box-shadow .12s;
}
.led.on{background:var(--mint);box-shadow:0 0 10px var(--mint),0 0 3px var(--mint)}
.led.amber.on{background:#FFB86B;box-shadow:0 0 10px #FFB86B}
.led.hot.on{background:var(--pink);box-shadow:0 0 12px var(--pink)}

.power-block{display:flex;align-items:center;gap:.8rem}
.power{
  position:relative;width:66px;height:30px;border-radius:7px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,#0a0518,#160e2c);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.75);
  cursor:pointer;padding:3px;
}
.p-cap{
  display:flex;align-items:center;justify-content:space-around;
  width:34px;height:22px;border-radius:5px;
  background:linear-gradient(180deg,#3a3155,#1e1738);
  box-shadow:0 1px 4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16);
  transform:translateX(0);
  transition:transform .22s var(--ease-snap),background .22s;
  font-style:normal;
}
.p-cap i{
  font-style:normal;font-size:.5rem;letter-spacing:0;
  color:rgba(237,233,250,.5);
}
.power.on .p-cap{
  transform:translateX(26px);
  background:linear-gradient(180deg,#0affc7,#00b98c);
  box-shadow:0 0 16px rgba(0,240,181,.65),inset 0 1px 0 rgba(255,255,255,.5);
}
.power.on .p-cap i{color:#052a1f}
.power:hover .p-cap{filter:brightness(1.15)}
/* unpowered: the switch breathes an invitation */
.power:not(.on) .p-cap{animation:powerInvite 2.8s var(--ease-soft) infinite}
@keyframes powerInvite{
  0%,100%{box-shadow:0 1px 4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16)}
  50%{box-shadow:0 1px 4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16),0 0 16px rgba(0,240,181,.5)}
}

/* ---------- controls ---------- */
.controls{
  display:flex;align-items:stretch;
  gap:clamp(.55rem,1.3vw,1.1rem);
  padding:clamp(.6rem,1.4vh,1rem) .2rem;
}
.ctl-group{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  padding:.6rem .9rem .55rem;
  border:1px solid rgba(255,255,255,.055);
  border-radius:10px;
  background:rgba(6,2,16,.25);
  flex:1 1 0;
  transition:border-color .35s var(--ease-soft),background .35s;
}
.ctl-group:hover{border-color:rgba(255,255,255,.14)}
.ctl-group:hover .mod-num{color:rgba(0,240,181,.55)}
/* boot illumination — modules light in sequence on power-on */
.ctl-group.boot-flash{animation:modBoot .75s var(--ease-soft)}
.ctl-group.boot-flash > .silk-label{color:var(--mint);text-shadow:0 0 12px rgba(0,240,181,.7)}
@keyframes modBoot{
  0%{border-color:rgba(255,255,255,.055)}
  22%{
    border-color:rgba(0,240,181,.75);
    background:rgba(0,240,181,.08);
    box-shadow:0 0 26px rgba(0,240,181,.28),inset 0 0 18px rgba(0,240,181,.14);
  }
  100%{border-color:rgba(255,255,255,.055);box-shadow:none}
}
.ctl-group > .silk-label{transition:color .4s,text-shadow .4s}
.g-wave{flex-grow:1.15}
.g-filter{flex-grow:1.45}
.g-arp{flex-grow:1.3}
.ctl-group > .silk-label{
  display:flex;align-items:center;gap:.6rem;
  width:100%;justify-content:center;
  white-space:nowrap;
}
.ctl-group > .silk-label::before,
.ctl-group > .silk-label::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12));
  min-width:.4rem;
}
.ctl-group > .silk-label::after{
  background:linear-gradient(90deg,rgba(255,255,255,.12),transparent);
}
.ctl-group > .silk-sub{margin-top:auto;white-space:nowrap}
.mod-num{
  position:absolute;top:.42rem;right:.55rem;
  font-size:.46rem;letter-spacing:.14em;
  color:rgba(237,233,250,.24);
  transition:color .4s;
}
body.powered .mod-num{color:rgba(0,240,181,.38)}
.knob-row{display:flex;gap:clamp(.5rem,1.2vw,1.2rem)}
.arp-row{display:flex;align-items:center;gap:.9rem}

/* waveform segmented switch */
.waveset{
  display:flex;border-radius:8px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:#0a0518;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7);
  margin:auto 0;
}
.wavebtn{
  width:50px;height:44px;border:0;cursor:pointer;
  background:transparent;
  display:grid;place-items:center;
  transition:background .18s;
}
.wavebtn+.wavebtn{border-left:1px solid rgba(255,255,255,.08)}
.wavebtn svg{width:24px;height:20px;fill:none;stroke:rgba(237,233,250,.4);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;transition:stroke .18s,filter .18s,transform .25s var(--ease-snap)}
.wavebtn:hover svg{stroke:rgba(237,233,250,.75)}
.wavebtn:active svg{transform:scale(.8)}
.wavebtn.active svg{transform:scale(1.06)}
.wavebtn.active{background:rgba(0,240,181,.09)}
.wavebtn.active svg{stroke:var(--mint);filter:drop-shadow(0 0 6px rgba(0,240,181,.8))}

/* arp toggle */
.arp-toggle{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  width:52px;padding:.5rem 0 .4rem;border-radius:8px;cursor:pointer;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,#171030,#0d0720);
  transition:border-color .2s;
}
.a-led{
  width:8px;height:8px;border-radius:50%;
  background:#231a3d;box-shadow:inset 0 1px 2px rgba(0,0,0,.8);
  transition:background .15s,box-shadow .15s;
}
.a-txt{font-family:"Space Mono",monospace;font-size:.5rem;letter-spacing:.18em;color:rgba(237,233,250,.5)}
.arp-toggle.on{border-color:rgba(255,60,172,.5)}
body.powered .arp-toggle.on .a-led{
  background:var(--pink);box-shadow:0 0 10px var(--pink);
  animation:arpBlink 1s steps(2,jump-none) infinite;
}
@keyframes arpBlink{50%{opacity:.45}}
.arp-toggle.on .a-txt{color:var(--pink)}

/* knobs (SVG injected by JS) */
.knob{
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
  width:74px;
  cursor:ns-resize;
  touch-action:none;
  user-select:none;-webkit-user-select:none;
  border-radius:10px;
}
.knob svg{width:64px;height:64px;overflow:visible}
.knob .tick{stroke:rgba(237,233,250,.22);stroke-width:1.4}
.knob .k-arc-bg{fill:none;stroke:rgba(237,233,250,.1);stroke-width:2.5;stroke-linecap:round}
.knob .k-arc{fill:none;stroke:var(--mint);stroke-width:2.5;stroke-linecap:round;opacity:.35;transition:opacity .3s;filter:drop-shadow(0 0 4px rgba(0,240,181,.7))}
body.powered .knob .k-arc{opacity:1}
.knob .k-body{
  fill:url(#knobBody);stroke:rgba(255,255,255,.14);stroke-width:1;
}
.knob .k-ind{stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;transition:stroke .3s}
body.powered .knob .k-ind{stroke:var(--mint);filter:drop-shadow(0 0 5px rgba(0,240,181,.9))}
.knob .k-cap{fill:rgba(255,255,255,.09)}
.knob:hover .k-body{stroke:rgba(255,255,255,.3)}
.k-name{font-size:.52rem;letter-spacing:.22em;color:var(--silk)}
.k-val{
  font-size:.6rem;letter-spacing:.08em;color:var(--ink-dim);
  min-height:1em;
  transition:color .3s,transform .2s var(--ease-snap),text-shadow .3s;
}
body.powered .k-val{color:var(--mint)}
/* live drag feedback */
.knob.dragging .k-arc{opacity:1;filter:drop-shadow(0 0 8px rgba(0,240,181,.95))}
.knob.dragging .k-ind{stroke:var(--mint)}
.knob.dragging .k-body{stroke:rgba(0,240,181,.55)}
.knob.dragging .k-val{
  color:var(--mint);transform:scale(1.22);
  text-shadow:0 0 12px rgba(0,240,181,.65);
}
body.knob-drag{cursor:ns-resize}
body.knob-drag .key,body.knob-drag .wavebtn{cursor:ns-resize}

/* ---------- keyboard ---------- */
.kbd-wrap{
  position:relative;
  padding:.35rem .2rem .9rem;
}
.kbd-glow{
  position:absolute;left:2%;right:2%;bottom:.55rem;height:8px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,60,172,.0),transparent 70%);
  transition:background 1s var(--ease-soft);
  filter:blur(6px);
}
body.powered .kbd-glow{
  background:radial-gradient(ellipse at center,rgba(255,60,172,.55),transparent 70%);
}
.keyboard{
  position:relative;
  height:clamp(138px,20vh,182px);
  border-radius:6px;
  touch-action:none;
  background:#060213;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.8);
  padding:5px 4px 6px;
  display:flex;
}
.key{
  border:0;cursor:pointer;position:relative;
  -webkit-tap-highlight-color:transparent;
}
.key.white{
  flex:1;
  margin:0 1.5px;
  border-radius:0 0 5px 5px;
  background:linear-gradient(180deg,#efeaf8 0%,#dcd5ec 78%,#c8c0de);
  box-shadow:inset 0 -5px 8px rgba(96,80,140,.35),inset 0 2px 0 rgba(255,255,255,.9),0 3px 4px rgba(0,0,0,.55);
  transition:background .08s,transform .06s,box-shadow .08s;
}
.key.black{
  position:absolute;top:5px;height:58%;width:calc(100%/11*.6);
  z-index:2;
  border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,#241b40 0%,#0d0720 85%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -4px 6px rgba(0,0,0,.7),0 4px 6px rgba(0,0,0,.7);
  transition:background .08s,transform .06s,box-shadow .08s;
}
.key .k-tag{
  position:absolute;left:0;right:0;bottom:8px;
  font-family:"Space Mono",monospace;
  font-weight:700;
  font-size:.58rem;letter-spacing:.05em;
  color:rgba(38,26,74,.72);
  pointer-events:none;
}
.key.black .k-tag{color:rgba(237,233,250,.55);bottom:6px;font-size:.52rem}
.key .k-note{
  position:absolute;left:0;right:0;bottom:24px;
  font-size:.44rem;letter-spacing:.08em;
  color:rgba(38,26,74,.5);
  pointer-events:none;
}
.key.white:hover{background:linear-gradient(180deg,#f8f5ff,#e6e0f4 78%,#d2cae6)}
.key.black:hover{background:linear-gradient(180deg,#31254f,#140b2b 85%)}
.key.white.held,.key.white.lit{
  background:linear-gradient(180deg,#d7fff3 0%,#7dffd9 70%,#00F0B5);
  box-shadow:inset 0 -6px 12px rgba(0,190,140,.55),0 0 18px rgba(0,240,181,.75),0 3px 4px rgba(0,0,0,.5);
  transform:translateY(2px);
}
.key.black.held,.key.black.lit{
  background:linear-gradient(180deg,#123f36,#00543d 85%);
  box-shadow:inset 0 1px 0 rgba(0,240,181,.5),0 0 16px rgba(0,240,181,.65),0 4px 6px rgba(0,0,0,.6);
  transform:translateY(2px);
}
.key.black.held .k-tag,.key.black.lit .k-tag{color:rgba(215,255,243,.85)}

/* ---------- spectrum ---------- */
.spectrum-bezel{
  height:clamp(52px,7.5vh,68px);
  border-radius:8px;
  border:1px solid rgba(255,255,255,.07);
  background:#05010f;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.85);
  overflow:hidden;
  padding:5px 8px;
}
#spectrum{width:100%;height:100%;display:block}
.spec-scale{
  display:flex;justify-content:space-between;
  padding:.32rem .5rem 0;
  font-size:.46rem;letter-spacing:.16em;
  color:rgba(237,233,250,.52);
}

.panel-foot{
  display:flex;flex-wrap:wrap;justify-content:center;
  column-gap:.4rem;row-gap:.15rem;
  text-align:center;
  padding:.8rem .5rem .2rem;
  line-height:1.9;
}
.hint{white-space:nowrap}
.hint + .hint::before{
  content:"·";
  margin-right:.4rem;
  color:rgba(0,240,181,.5);
}

/* signal-path strip below the panel */
.sigpath{
  margin-top:clamp(1rem,3.4vh,2.2rem);
  text-align:center;
  font-size:clamp(.52rem,.75vw,.62rem);
  letter-spacing:.32em;
  color:rgba(237,233,250,.52);
  text-shadow:0 0 12px rgba(120,75,160,.5);
}
.sigpath .arrow{
  color:rgba(0,240,181,.65);
  text-shadow:0 0 10px rgba(0,240,181,.55);
  animation:arrowPulse 3.2s ease-in-out infinite;
}
.sigpath .arrow:nth-of-type(2){animation-delay:.55s}
.sigpath .arrow:nth-of-type(3){animation-delay:1.1s}
@keyframes arrowPulse{
  0%,100%{opacity:.55}
  50%{opacity:1}
}
body.powered .sigpath{color:rgba(237,233,250,.58)}

/* ---------- footer ---------- */
.site-foot{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;
  padding:.4rem clamp(1.2rem,4vw,3.2rem) 1.1rem;
  font-size:.62rem;letter-spacing:.14em;
  color:var(--ink-dim);
}
.site-foot nav{display:flex;gap:.7rem;align-items:center}
.site-foot a{
  color:var(--mint);text-decoration:none;
  border-bottom:1px solid rgba(0,240,181,.35);
  padding-bottom:1px;
  transition:border-color .2s,text-shadow .2s;
}
.site-foot a:hover{border-color:var(--mint);text-shadow:0 0 10px rgba(0,240,181,.7)}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .sky{min-height:118px;flex-direction:column;gap:.9rem;padding-top:.9rem}
  .specs{display:none}
  .panel{padding:.9rem .7rem 1rem}
  .panel-head{flex-wrap:wrap;gap:.8rem;justify-content:space-between;padding-bottom:.55rem}
  .silk-id{gap:.7rem}
  .made{display:none}
  .leds{display:none}
  .controls{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.55rem;
    padding:.6rem 0;
    grid-template-areas:"wave wave" "filter osc" "delay arp";
  }
  .ctl-group{padding:.5rem .4rem .45rem;gap:.4rem}
  .g-wave{grid-area:wave}
  .g-filter{grid-area:filter}
  .g-osc{grid-area:osc}
  .g-delay{grid-area:delay}
  .g-arp{grid-area:arp}
  .knob{width:62px}
  .knob svg{width:54px;height:54px}
  .arp-row{gap:.5rem}
  .arp-toggle{width:44px}
  .silk-sub{display:none}
  .g-wave .silk-sub,.g-arp .silk-sub{display:block}
  .mod-num{top:.35rem;right:.45rem}
  .keyboard{height:138px}
  .key.black{width:calc(100%/11 * .52);height:54%}
  .key .k-note{display:none}
  .key .k-tag{font-size:.48rem;bottom:6px}
  .panel-foot{font-size:.5rem;line-height:2;padding-top:.65rem}
  .hint + .hint::before{margin-right:.3rem}
  .spec-scale{padding:.28rem .2rem 0;font-size:.42rem}
  .sigpath{
    margin-top:1rem;
    font-size:.48rem;letter-spacing:.2em;
    padding:0 .6rem;
  }
  .site-foot{justify-content:center;text-align:center}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .brand h1{animation:none;filter:drop-shadow(0 0 14px rgba(255,60,172,.35))}
}