/* Vibe Designer synth open view (vibeview.js). transform / opacity only for anything that moves. */
#vv{--ink:#2A1812;--cream:#F6EBDA;--acc:#E8613C;--acc2:#FF8B63;--chip:rgba(246,235,218,.94);--chipT:#2A1812;--chipB:rgba(42,24,18,.14);
  position:fixed;inset:0;z-index:125;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;font-family:var(--ps-font),system-ui,sans-serif;color:var(--cream)}
html.dark #vv{--chip:rgba(30,29,38,.94);--chipT:#EDE8DB;--chipB:rgba(237,232,219,.16);--acc:#FF7A52}
#vv.on{opacity:1;visibility:visible}
#vv[hidden]{display:none}
#vv .vv-scrim{position:absolute;inset:0;background:radial-gradient(110% 90% at 50% 42%,rgba(52,30,22,.74),rgba(26,14,10,.92));will-change:opacity}
#vv .vv-scrim:after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(40vh,300px);background:linear-gradient(0deg,rgba(26,14,10,.95),rgba(26,14,10,0))}
html.dark #vv .vv-scrim{background:radial-gradient(110% 90% at 50% 42%,rgba(8,9,16,.8),rgba(2,3,8,.94))}
#vv .vv-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vh,28px);width:100%;height:100%;padding:56px 16px 20px;box-sizing:border-box}
#vv button,#vv a{cursor:pointer;-webkit-tap-highlight-color:transparent}
#vv :focus-visible{outline:2px solid var(--acc2);outline-offset:3px}

#vv .vv-x{position:absolute;top:14px;right:14px;z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid var(--ps-rule);background:var(--ps-bg);color:var(--ps-tp);display:grid;place-items:center;padding:0;
  transition:transform .3s var(--spring,cubic-bezier(.3,1.5,.5,1)),border-color .2s linear,background-color .2s linear}
#vv .vv-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
#vv .vv-x:hover{transform:translateY(-1px);border-color:var(--ps-accent);background:var(--ps-elev)}
#vv .vv-x:active{transform:scale(.94)}
#vv .vv-x:focus-visible,#vv .vv-link:focus-visible{outline:1.5px solid var(--ps-accent);outline-offset:2px}

/* the big synth */
#vv .vv-toy{--w:min(92vw,calc((100svh - 190px) * var(--ar)),980px);--h:calc(var(--w) / var(--ar));--s:var(--spr);position:relative;width:var(--w);height:var(--h);flex:none;will-change:transform}
html.dark #vv .vv-toy{--s:var(--nspr)}
#vv .vv-spr{position:absolute;inset:0;background:var(--s) 0 0/100% 100% no-repeat}
#vv .vv-shadow{position:absolute;left:6%;right:6%;bottom:-3%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(30,8,0,.55),rgba(30,8,0,0));pointer-events:none}
#vv .vv-scr{position:absolute;overflow:hidden;background:#05060a;isolation:isolate;box-shadow:0 0 0 calc(var(--w) * .004) rgba(0,0,0,.55)}
#vv .vv-scr.nogl{background-size:cover;background-position:center}
#vv .vv-cv,#vv .vv-frame{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;background:#05060a}
#vv .vv-glare{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14),rgba(255,255,255,0) 36%),radial-gradient(120% 120% at 50% 50%,rgba(0,0,0,0) 64%,rgba(0,0,0,.3))}
#vv .vv-live{position:absolute;left:5%;top:6%;z-index:3;display:flex;align-items:center;gap:calc(var(--w) * .007);font:600 calc(var(--w) * .0125)/1 var(--ps-font);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.7);pointer-events:none}
#vv .vv-live b{width:calc(var(--w) * .0095);height:calc(var(--w) * .0095);border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
#vv .vv-frame ~ .vv-glare{display:none}

/* knobs + ticks. The caps are part of the 3x body render (img/hi/o-synth.webp) and never move; each knob is a transparent, circular hit
   area exactly over its cap, rotated about its own centre, carrying only the indicator dot, so nothing can drift or double up. */
#vv .vv-ticks{position:absolute;left:calc(var(--w) * var(--kx));top:calc(var(--h) * var(--ky));width:0;height:0;pointer-events:none}
#vv .vv-tick{position:absolute;left:0;top:0;width:calc(var(--w) * .0085);height:calc(var(--w) * .0085);border-radius:50%;background:rgba(14,9,7,.62);box-shadow:0 calc(var(--w) * .0012) 0 rgba(255,255,255,.16);transform:rotate(var(--a)) translateY(calc(var(--w) * -.083)) translate(-50%,-50%)}
html.dark #vv .vv-tick{background:rgba(6,5,10,.7);box-shadow:0 calc(var(--w) * .0012) 0 rgba(255,255,255,.12)}
#vv .vv-tick.on{background:var(--acc);box-shadow:0 0 calc(var(--w) * .008) var(--acc),0 0 0 calc(var(--w) * .0012) rgba(255,160,120,.35)}
#vv .vv-t3{display:none}
#vv .vv-knob{position:absolute;left:calc(var(--w) * (var(--kx) - var(--kr)));top:calc(var(--h) * var(--ky) - var(--w) * var(--kr));width:calc(var(--w) * var(--kr) * 2);height:calc(var(--w) * var(--kr) * 2);
  border-radius:50%;border:0;padding:0;background:none;touch-action:none;cursor:grab;will-change:transform;transform-origin:50% 50%}
#vv .vv-dot{position:absolute;left:50%;top:15%;width:11%;height:11%;margin-left:-5.5%;margin-top:-5.5%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#ece4d6 70%);box-shadow:0 0 0 1px rgba(0,0,0,.22),0 1px 2px rgba(0,0,0,.35);pointer-events:none}
#vv .vv-k3{cursor:pointer}
#vv .vv-k3 .vv-dot{display:none}
#vv .vv-k3:before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(40,10,0,.0),rgba(40,10,0,.22));opacity:0;transition:opacity .15s linear}
#vv .vv-k3.down:before{opacity:1}
#vv .vv-knob.drag{cursor:grabbing}
#vv .vv-knob:after{content:"";position:absolute;inset:-9%;border-radius:50%;box-shadow:0 0 0 2px var(--acc),0 0 18px rgba(232,97,60,.55);opacity:0;transition:opacity .25s linear}
#vv .vv-knob:hover:after,#vv .vv-knob.drag:after{opacity:.9}
#vv .vv-knob:focus-visible{outline:none}
#vv .vv-knob:focus-visible:after{opacity:1;box-shadow:0 0 0 3px var(--acc2),0 0 0 6px rgba(255,255,255,.7)}
#vv .vv-knob:active:after{opacity:1}

/* hud: the project-page info treatment shared with #cap (meta, Inter 300 title, hairline, chips, solid pill) */
#vv .vv-hud{display:flex;flex-direction:column;align-items:stretch;gap:0;box-sizing:border-box;width:min(92vw,380px);padding:22px 24px 20px;border:1px solid var(--ps-rule);border-radius:4px;background:var(--ps-bg);color:var(--ps-tp);box-shadow:var(--ps-shadow)}
#vv .vv-cap{display:flex;flex-direction:column-reverse;gap:0;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--ps-rule);text-align:left}
#vv .vv-cap b{font:300 28px/1.02 var(--ps-font);letter-spacing:-.03em;color:var(--ps-tp)}
#vv .vv-cap i{margin:0 0 14px;font:400 10px/1.5 var(--ps-font);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--ps-accent-ink);opacity:1}
#vv .vv-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
#vv .vv-chip{font:400 10px/1 var(--ps-font);letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:999px;background:var(--ps-elev);border:1px solid var(--ps-rule);color:var(--ps-ts);white-space:nowrap}
#vv .vv-chip b{font-weight:500;color:var(--ps-tp);margin-left:4px}
#vv .vv-link{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--ps-tp);color:var(--ps-bg);border:1px solid var(--ps-tp);text-decoration:none;font:500 10px/1 var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  transition:transform .3s var(--spring,cubic-bezier(.3,1.5,.5,1)),border-color .2s linear,background-color .2s linear,color .2s linear}
#vv .vv-link::after{content:'';position:absolute;left:-2px;right:-2px;top:50%;height:44px;transform:translateY(-50%)}
#vv .vv-link svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#vv .vv-link:hover{transform:translateY(-1px);background:var(--ps-accent);border-color:var(--ps-accent);color:var(--ps-bg)}
#vv .vv-link:active{transform:scale(.96)}

@media (max-width:760px){
  #vv .vv-stage{padding:60px 10px 16px;gap:16px}
  #vv .vv-hud{width:94vw;padding:18px 18px 16px}
  #vv .vv-cap b{font-size:24px}
}
@media (prefers-reduced-motion:reduce){#vv *{transition:none!important}}
html.dark #vv .vv-scrim:after{background:linear-gradient(0deg,rgba(2,3,8,.95),rgba(2,3,8,0))}