@font-face{font-family:"AP Mono";src:url("../fy/assets/fonts/JetBrainsMono-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"AP Mono";src:url("../fy/assets/fonts/JetBrainsMono-Medium.ttf") format("truetype");font-weight:500 600;font-display:swap}
@font-face{font-family:"AP Mono";src:url("../fy/assets/fonts/JetBrainsMono-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"AP Grotesk";src:url("../fy/assets/fonts/SpaceGrotesk-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"AP Grotesk";src:url("../fy/assets/fonts/SpaceGrotesk-Medium.ttf") format("truetype");font-weight:500 600;font-display:swap}
@font-face{font-family:"AP Grotesk";src:url("../fy/assets/fonts/SpaceGrotesk-Bold.ttf") format("truetype");font-weight:700 800;font-display:swap}

html,body{margin:0;overflow:hidden;background:#05070D}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none}
#app{position:relative;width:1260px;height:820px;overflow:hidden;color:#EAF2FF;font:500 13px/1.2 "AP Grotesk",sans-serif;--mono:"AP Mono",monospace;
  --cy:#19E6FF;--pk:#FF2EC4;--vi:#8B5CFF;--gr:#38FF9A;--line:rgba(255,255,255,.11);--card:rgba(14,12,34,.62)}
#bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(1.5px) saturate(1.45) brightness(.5)}
#tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,10,60,.42),rgba(8,5,26,.66))}
i{font-style:normal}

/* title bar */
#titlebar{position:absolute;left:0;top:0;right:0;height:32px;display:flex;align-items:center;gap:9px;padding:0 14px;font:500 10.5px/1 var(--mono);letter-spacing:.3em;color:#A9B4C9}
#titlebar img{width:15px;height:15px;object-fit:contain}
#titlebar .win{margin-left:auto;display:flex;gap:30px;font:400 12px/1 var(--mono);letter-spacing:0;color:#C9D2E4}
#titlebar .gear{font-size:14px}

/* sidebar */
#side{position:absolute;left:0;top:32px;width:240px;height:438px;padding:6px 16px 0;background:linear-gradient(180deg,rgba(6,7,18,.78),rgba(6,7,18,.6));border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0 0 14px 0}
#side .fold{position:absolute;left:12px;top:8px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#A9B4C9;font-size:14px}
#side .gem{display:block;width:62px;height:62px;object-fit:contain;margin:6px auto 0;filter:drop-shadow(0 0 18px rgba(139,92,255,.55))}
.wordmark{margin-top:2px;text-align:center;font:700 21px/1.2 "AP Grotesk",sans-serif;letter-spacing:-.01em}
.wordmark b{color:var(--pk)}
.nav{height:44px;margin-top:9px;border-radius:9px;display:flex;align-items:center;justify-content:center;font:700 14px/1 "AP Grotesk",sans-serif;letter-spacing:.14em;border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -10px 18px rgba(0,0,0,.35)}
.nav.n1{margin-top:12px;background:linear-gradient(180deg,#3C59A8,#101B44 70%)}
.nav.n2{background:linear-gradient(180deg,#3F7F6F,#0E2A2A 70%)}
.nav.n3{background:linear-gradient(180deg,#5A4BA4,#1B1444 70%)}
.nav.n4{background:linear-gradient(180deg,#7A3A8C,#2A0F3C 70%)}
.gpu{margin-top:12px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;font:500 9px/1 var(--mono);letter-spacing:.1em;color:#7F8AA3;background:rgba(8,8,22,.5)}
.gpu>div{display:flex;align-items:center;gap:6px}
.gpu>div+div{margin-top:7px}
.gpu .dot{width:5px;height:5px;border-radius:50%;background:#EAF2FF}
.gpu .v{color:#C9D2E4}.gpu .v2{font:600 11px/1 "AP Grotesk",sans-serif;letter-spacing:0;color:#EAF2FF}
.gpu em{margin-left:auto;font-style:normal;padding:4px 7px;border:1px solid var(--line);border-radius:5px;color:#A9B4C9}
.keys{position:relative;height:56px;margin-top:12px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:1px;font:800 19px/1 "AP Grotesk",sans-serif;letter-spacing:.1em;background:linear-gradient(120deg,#2B2F8F,#3B2C9A 45%,#27358F);border:1.5px solid transparent;background-clip:padding-box;box-shadow:0 0 0 1.5px rgba(139,92,255,.75),0 0 26px rgba(139,92,255,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.keys b{background:linear-gradient(90deg,#5B8BFF,#B76BFF 40%,#FF4FD0 75%,#FF8A2B);-webkit-background-clip:text;background-clip:text;color:transparent;animation:kp 6s linear infinite;background-size:200% 100%}
.keys i{margin-left:12px;font:400 13px/1 var(--mono);color:#C9D2E4}
@keyframes kp{to{background-position:-200% 0}}

/* main */
#main{position:absolute;left:254px;top:36px;right:10px}
.chain{display:flex;align-items:center;gap:7px;height:24px;font:600 9.5px/1 var(--mono);letter-spacing:.26em;color:#59637C;white-space:nowrap}
.chain span.on{color:#EAF2FF;border-bottom:2px solid var(--cy);padding-bottom:5px;margin-bottom:-7px}
.chain canvas{margin-left:auto;width:520px;height:22px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.stat{position:relative;height:48px;padding:7px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);font:500 13px/1 "AP Grotesk",sans-serif;color:#C9D2E4}
.stat small{display:block;font:500 8.5px/1 var(--mono);letter-spacing:.3em;color:#7F8AA3;margin-bottom:6px}
.stat b{font:700 17px/1 "AP Grotesk",sans-serif;color:#fff}
.stat:after{content:'';position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:var(--c)}
.c1{--c:var(--cy)}.c2{--c:var(--pk)}.c3{--c:var(--gr)}
.card{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--card);backdrop-filter:blur(6px)}
.ch{display:flex;align-items:center;gap:14px;padding:12px 16px 0;font:500 9px/1 var(--mono);letter-spacing:.34em;color:#8F9AB3}
.d{width:6px;height:6px;border-radius:50%;flex:none}
.d.cy{background:var(--cy);box-shadow:0 0 8px var(--cy)}.d.pk{background:var(--pk);box-shadow:0 0 8px var(--pk)}.d.vi{background:var(--vi);box-shadow:0 0 8px var(--vi)}.d.gr{background:var(--gr);box-shadow:0 0 8px var(--gr)}.d.wh{background:#EAF2FF}
.import{height:76px;margin-top:9px}
.linkrow{display:flex;align-items:center;gap:12px;padding:9px 16px 0}
.lbl{font:500 10px/1 var(--mono);letter-spacing:.2em;color:#8F9AB3}
.input{flex:1;height:34px;display:flex;align-items:center;padding:0 14px;border:1px solid var(--line);border-radius:8px;background:rgba(5,5,16,.6);font:400 12px/1 var(--mono);color:#7F8AA3}
.fetch{height:38px;padding:0 20px;display:flex;align-items:center;border-radius:9px;background:linear-gradient(180deg,#3BF0FF,#12BFDD);color:#04121A;font:700 13px/1 "AP Grotesk",sans-serif;box-shadow:0 0 18px rgba(25,230,255,.45)}
.row2{display:grid;grid-template-columns:1.56fr 1fr;gap:12px;margin-top:9px}
.sel,.want{height:256px}
.statebar{position:absolute;left:-1px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--gr);box-shadow:0 0 10px var(--gr)}
.ch .right{margin-left:auto;display:flex;align-items:center;gap:10px;letter-spacing:0}
.done{font:700 12px/1 "AP Grotesk",sans-serif;color:var(--gr)}
.ch em{font:500 8px/1 var(--mono);font-style:normal;letter-spacing:.14em;padding:4px 6px;border:1px solid var(--line);border-radius:5px}
.rdy{font:500 10.5px/1 var(--mono);color:#C9D2E4}
.list{margin:10px 16px 0;height:84px;border:1px dashed rgba(255,255,255,.14);border-radius:9px;padding:5px;background:rgba(5,5,16,.3)}
.file{height:32px;display:flex;align-items:center;padding:0 12px;border-radius:6px;background:rgba(56,120,160,.42);font:500 12px/1 "AP Grotesk",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info{display:flex;align-items:center;gap:8px;margin:8px 16px 0;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:7px;font:600 11.5px/1 "AP Grotesk",sans-serif}
.info span:first-child{margin-right:auto}
.chip{padding:5px 10px;border-radius:999px;font:700 10.5px/1 var(--mono);letter-spacing:.06em}
.chip.bpm{color:var(--cy);border:1px solid rgba(25,230,255,.5);background:rgba(25,230,255,.1)}
.chip.key{color:#FF6BD6;border:1px solid rgba(255,46,196,.5);background:rgba(255,46,196,.1)}
.ticks{margin:8px 16px 0;font:500 12px/1.5 "AP Grotesk",sans-serif;color:#B9C3D8}
.btns{position:absolute;left:16px;right:16px;bottom:12px;display:flex;gap:8px}
.btns span{height:30px;padding:0 12px;display:flex;align-items:center;border:1px solid rgba(255,255,255,.22);border-radius:7px;background:rgba(10,10,28,.6);font:700 11.5px/1 "AP Grotesk",sans-serif;white-space:nowrap}
.btns .sp{flex:1;border:0;background:none;padding:0}
.btns .o{border-color:rgba(25,230,255,.45)}
.wrow{display:flex;align-items:center;gap:14px;padding:12px 16px 0}
.iw{font:700 13px/1 "AP Grotesk",sans-serif;white-space:nowrap}
.dd{position:relative;flex:1;height:40px;display:flex;align-items:center;gap:10px;padding:0 16px;border:1px solid var(--line);border-radius:9px;background:rgba(5,5,16,.55);font:500 13px/1 "AP Grotesk",sans-serif;cursor:pointer}
.dd>i{font-size:9px;color:#C9D2E4}
.ddlist{display:none;position:absolute;left:-1px;right:-1px;top:42px;z-index:30;padding:5px;border:1px solid rgba(255,255,255,.2);border-radius:9px;background:#0B0B22;box-shadow:0 18px 50px rgba(0,0,0,.7)}
.dd.open .ddlist{display:block}
.ddlist div{padding:8px 11px;border-radius:6px;font:500 12.5px/1 "AP Grotesk",sans-serif}
.ddlist div:hover{background:rgba(139,92,255,.3)}
.ddlist div.on{color:var(--cy)}
.togs{display:grid;grid-template-columns:1fr 1fr;gap:10px 8px;padding:14px 16px 0}
.tog{display:flex;align-items:center;gap:11px;font:700 12.5px/1.15 "AP Grotesk",sans-serif;cursor:pointer}
.tog small{display:block;margin-top:3px;font:400 9px/1 var(--mono);color:#7F8AA3}
.tog>i{position:relative;width:38px;height:21px;border-radius:999px;background:#23233A;border:1px solid var(--line);flex:none;transition:background .2s}
.tog>i:after{content:'';position:absolute;left:2px;top:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:left .2s}
.tog.on>i{background:#2B9DFF}.tog.on>i:after{left:19px}
.split{position:absolute;left:16px;right:16px;bottom:12px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(90deg,#2B8CFF,#7A6BFF 40%,#FF4FD0 78%,#B58CFF);color:#0A0A1E;font:700 14px/1 "AP Grotesk",sans-serif;box-shadow:0 0 26px rgba(139,92,255,.5),inset 0 1px 0 rgba(255,255,255,.5);cursor:pointer}

/* mixer */
#mixer{position:absolute;left:4px;right:4px;top:480px;bottom:4px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:linear-gradient(180deg,rgba(40,30,74,.62),rgba(12,10,30,.72));backdrop-filter:blur(6px)}
#mixer.pulse{animation:mp 1.1s ease}
@keyframes mp{30%{box-shadow:0 0 0 2px var(--cy),0 0 60px rgba(25,230,255,.5)}}
.pill{position:absolute;left:50%;top:-8px;width:56px;height:3px;margin-left:-28px;border-radius:3px;background:rgba(255,255,255,.35)}
.mh{display:flex;align-items:center;gap:8px;height:48px;padding:0 14px}
.mlab{font:500 9.5px/1 var(--mono);letter-spacing:.34em;color:#8F9AB3;margin:0 6px}
.btn{height:30px;padding:0 12px;display:flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.2);border-radius:7px;background:rgba(10,10,28,.6);font:600 11.5px/1 "AP Grotesk",sans-serif;white-space:nowrap}
.btn small{font-size:8px}.btn.sq{padding:0 9px}
.btn.snap{color:var(--gr);border-color:rgba(56,255,154,.5)}
.btn.rec{color:#FF6B6B;border-color:rgba(255,90,90,.6);font-weight:700}
#rew{cursor:pointer}
.grow{flex:1}
.play{position:relative;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:radial-gradient(circle at 35% 30%,#3B2C9A,#12102E);border:1.5px solid var(--cy);box-shadow:0 0 16px rgba(25,230,255,.55);font-size:12px;color:#fff}
.play b{margin-left:2px}.play.on b{margin-left:0;font-size:10px;letter-spacing:1px}
.play.idle:after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--cy);animation:ring 1.6s ease-out infinite}
@keyframes ring{from{opacity:.9;transform:scale(.8)}to{opacity:0;transform:scale(1.5)}}
.time{min-width:96px;text-align:center;font:500 11.5px/1 var(--mono);color:#C9D2E4}
.fader{position:relative;height:22px;cursor:pointer;touch-action:none}
.fader:before{content:'';position:absolute;left:0;right:0;top:10px;height:3px;border-radius:3px;background:rgba(255,255,255,.16)}
.fader i{position:absolute;left:0;top:10px;height:3px;border-radius:3px;background:var(--c,#F2F4FF)}
.fader b{position:absolute;top:5px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.6)}
.fader.master{width:84px}
.rulerrow{display:flex;height:22px;padding:0 14px}
.rulerrow .ctl{width:270px;flex:none}.rulerrow .tail{width:62px;flex:none}
#ruler{flex:1;min-width:0;height:22px;cursor:pointer}
#lanes{position:relative;padding:4px 14px 0}
.lane{position:relative;display:flex;align-items:center;height:37px;margin-bottom:5px;border:1px solid rgba(255,255,255,.1);border-left:3px solid var(--c);border-radius:9px;background:rgba(10,8,26,.5)}
.lane .ctl{width:267px;flex:none;display:flex;align-items:center;gap:8px;padding-left:8px}
.sw{width:10px;height:10px;border-radius:3px;background:var(--c)}
.nm{width:62px;text-align:center}
.nm b{display:block;font:700 8.5px/1 var(--mono);letter-spacing:.14em;color:var(--c)}
.nm span{display:block;margin-top:3px;font:500 10.5px/1 "AP Grotesk",sans-serif;color:#C9D2E4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms{width:24px;height:22px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);border-radius:5px;background:rgba(10,10,28,.7);font:700 10px/1 var(--mono);cursor:pointer}
.ms.m.on{background:#FF5A5A;border-color:#FF5A5A;color:#12050A}
.ms.s.on{background:#FFD23F;border-color:#FFD23F;color:#1A1400}
.lane .fader{width:64px}
.db{width:44px;font:500 9.5px/1 var(--mono);color:#C9D2E4;text-align:right}
.meter{position:relative;width:5px;height:27px;margin-left:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.meter i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,#38FF9A,#19E6FF 70%,#FFD23F)}
.wave{position:relative;flex:1;min-width:0;height:29px;border-radius:6px;overflow:hidden;cursor:pointer;background:color-mix(in srgb,var(--c) 24%,transparent);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);transition:opacity .2s}
.wave canvas{position:absolute;left:0;top:0;height:100%}
.wave .lit{position:absolute;left:0;top:0;bottom:0;width:0;overflow:hidden}
.lane.off .wave{opacity:.28}
.lane .tail{width:62px;flex:none;display:flex;align-items:center;gap:8px;padding-left:9px}
.sqs{display:grid;grid-template-columns:11px 11px;gap:2px}
.sqs i{height:11px;border:1px solid rgba(255,255,255,.25);border-radius:2px;font:600 6.5px/9px var(--mono);text-align:center;color:#C9D2E4}
.x{font:400 12px/1 var(--mono);color:#7F8AA3}
#ph{position:absolute;top:4px;bottom:6px;width:1.5px;background:#fff;box-shadow:0 0 6px #fff;pointer-events:none;left:0}
#hint{position:absolute;right:230px;top:-34px;padding:8px 12px;border-radius:8px;background:#0B0B22;border:1px solid var(--cy);box-shadow:0 0 22px rgba(25,230,255,.4);font:600 11.5px/1 "AP Grotesk",sans-serif;color:#EAF2FF;transition:opacity .4s}
#hint.gone{opacity:0;pointer-events:none}

/* lane size follows --lh; ▲ raises the mixer over the splitter and makes the lanes tall */
#app{--lh:56px}
#app.exp{--lh:170px}
.lane{height:var(--lh);margin-bottom:6px;transition:height .45s cubic-bezier(.22,1,.36,1)}
.wave{height:calc(var(--lh) - 12px);transition:height .45s cubic-bezier(.22,1,.36,1),opacity .2s}
.meter{height:calc(var(--lh) - 16px)}
#mixer{transition:top .45s cubic-bezier(.22,1,.36,1),background .45s}
#app.exp #mixer{top:36px;background:linear-gradient(180deg,rgba(40,30,74,.86),rgba(12,10,30,.92))}
#main,#side{transition:opacity .3s}
#app.exp #main,#app.exp #side{opacity:0;pointer-events:none}
#app.exp #hint{display:none}
#expand{cursor:pointer}
/* the DEMO badge in the title bar */
.demo{display:inline-flex;align-items:center;gap:6px;margin-left:6px;padding:4px 9px;border-radius:999px;background:#FFD23F;color:#1A1400;font:700 9.5px/1 var(--mono);letter-spacing:.2em;box-shadow:0 0 14px rgba(255,210,63,.55)}
.demo i{width:5px;height:5px;border-radius:50%;background:#1A1400}

/* poses sent by the page as you scroll (app21.js pose()) */
.import,.want{transition:box-shadow .4s ease,border-color .4s ease}
#app.pose-paste .import{border-color:var(--cy)}
#app.pose-paste .fetch{animation:pulse 1.2s ease-in-out infinite}
#app.pose-split .want{border-color:var(--pk)}
#app.pose-split .split{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{filter:brightness(1.35);transform:scale(1.015)}}
@keyframes blink{50%{opacity:0}}
/* detached: the mixer floats as its own window over the dimmed app, ON TOP lit */
#mixer{transition:top .45s cubic-bezier(.22,1,.36,1),left .45s cubic-bezier(.22,1,.36,1),right .45s cubic-bezier(.22,1,.36,1),bottom .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,background .45s}
#app.pose-detach.go{--lh:50px}
#app.pose-detach.go #mixer{left:70px;right:70px;top:230px;bottom:268px;background:linear-gradient(180deg,rgba(34,26,66,.97),rgba(12,10,30,.98));border-color:rgba(139,92,255,.75);box-shadow:0 40px 120px rgba(0,0,0,.8),0 0 0 1px rgba(139,92,255,.5),0 0 70px rgba(139,92,255,.35)}
#app.pose-detach.go #main,#app.pose-detach.go #side,#app.pose-detach.go #titlebar{opacity:.3;filter:saturate(.6)}
#app.pose-detach.go #hint{display:none}
.ontop{display:none;height:30px;padding:0 12px;align-items:center;border:1px solid var(--gr);border-radius:7px;color:var(--gr);background:rgba(56,255,154,.1);font:700 11.5px/1 "AP Grotesk",sans-serif;box-shadow:0 0 14px rgba(56,255,154,.4)}
#app.pose-detach.go .ontop{display:flex}
#app.pose-detach.go #expand,#app.pose-detach.go .mh .btn.rec+.btn{display:none}
#titlebar{transition:opacity .3s}

/* ---------- v8: feels like the app (app21_fx.js) ---------- */
#bgimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .5s ease}
#tint{transition:opacity .2s}
/* the chain: one word lit at a time, in its own colour */
.chain .cword{position:relative;padding-bottom:6px}
.chain .cword:after{content:'';position:absolute;left:0;bottom:0;height:2px;width:var(--u,0%);background:var(--uc,#19E6FF);border-radius:2px;box-shadow:0 0 8px var(--uc,#19E6FF)}
.chain .cdot{color:#3A4258}
/* the link box is a real input */
input.input{font:400 12px/1 var(--mono);color:#EAF2FF;outline:none;-webkit-user-select:text;user-select:text;cursor:text;min-width:0}
input.input::placeholder{color:#7F8AA3}
input.input:focus{border-color:var(--cy);box-shadow:0 0 0 1px var(--cy),0 0 18px rgba(25,230,255,.3)}
.fetch,#cog{cursor:pointer}
/* button feedback, as in the app */
.btn,.btns span,.fetch,.split,.nav,.keys,.ms,.gpu em,.ch em{transition:filter .16s,transform .12s,box-shadow .22s,border-color .22s}
.btn:hover,.btns span:not(.sp):hover,.fetch:hover,.split:hover,.nav:hover,.keys:hover,.ms:hover{filter:brightness(1.22)}
.btn:active,.btns span:not(.sp):active,.fetch:active,.split:active,.nav:active,.keys:active,.ms:active{transform:scale(.97)}
.nav:hover{transform:translateX(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 24px rgba(139,92,255,.45)}
.stat{transition:transform .22s,box-shadow .22s}
.stat:hover{transform:scale(1.03);z-index:5;box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 22px color-mix(in srgb,var(--c) 40%,transparent)}
/* Shine: a light under the cursor, the edge in the panel's colour, a sheen crossing now and then */
.shine{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;overflow:hidden;z-index:3;
  background:radial-gradient(150px circle at var(--x,50%) var(--y,50%),rgba(var(--a),calc(.22*var(--h,0)*var(--g,1))),transparent 70%);
  box-shadow:inset 0 0 0 1px rgba(var(--a),calc(.75*var(--h,0)*var(--g,1))),inset 0 1px 0 rgba(255,255,255,calc(.28*var(--h,0)*var(--g,1))),0 0 26px rgba(var(--a),calc(.3*var(--h,0)*var(--g,1)))}
.shine .sheen{position:absolute;top:0;bottom:0;left:-30%;width:22%;background:linear-gradient(100deg,transparent,rgba(255,255,255,calc(.07*var(--g,1))),transparent);animation:sheen 9s linear infinite}
@keyframes sheen{0%,62%{left:-30%}100%{left:130%}}
.stat,.nav,.keys,.gpu{position:relative}
/* scroll steps: the part being talked about glows, the rest steps back */
.stats,.import,.sel,.want,#side,.chain,.row2{transition:filter .5s ease,opacity .5s ease,box-shadow .4s ease,border-color .4s ease}
#app.pose-paste .stats,#app.pose-paste .row2,#app.pose-paste #side,#app.pose-paste #mixer,
#app.pose-split .stats,#app.pose-split .import,#app.pose-split .sel,#app.pose-split #side,#app.pose-split #mixer{filter:blur(1.6px) saturate(.75) brightness(.62)}
#app.pose-paste .import{box-shadow:0 0 0 1.5px var(--cy),0 0 54px rgba(25,230,255,.5),inset 0 0 40px rgba(25,230,255,.08)}
#app.pose-split .want{z-index:6;box-shadow:0 0 0 1.5px var(--pk),0 0 54px rgba(255,46,196,.45),inset 0 0 40px rgba(255,46,196,.07)}
#app.pose-mix #mixer{box-shadow:0 0 0 1.5px var(--gr),0 0 60px rgba(56,255,154,.32)}
#app.pose-detach.go #main,#app.pose-detach.go #side,#app.pose-detach.go #titlebar{filter:blur(2px) saturate(.6)}
#app.pose-detach.go #mixer{box-shadow:0 40px 120px rgba(0,0,0,.8),0 0 0 1.5px #FFD23F,0 0 70px rgba(255,210,63,.35)}
/* the background picker (the cog) */
.bgpanel{display:none;position:absolute;right:86px;top:34px;width:486px;z-index:50;padding:14px 16px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(10,11,28,.97);box-shadow:0 24px 70px rgba(0,0,0,.75)}
.bgpanel.open{display:block}
.bglab{font:500 9px/1 var(--mono);letter-spacing:.34em;color:#8F9AB3}
.bggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0 12px}
.tile{cursor:pointer}
.tile .pic,.sw2 .pic{height:62px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background-size:cover;background-position:center;transition:transform .15s,box-shadow .2s}
.tile b{display:block;margin-top:6px;font:700 11.5px/1 "AP Grotesk",sans-serif;color:#C9D2E4}
.tile small{display:block;margin-top:3px;font:400 8.5px/1 var(--mono);color:#6F7A93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile:hover .pic,.sw2:hover .pic{transform:scale(1.04)}
.tile.on .pic,.sw2.on .pic{border-color:transparent;box-shadow:0 0 0 2px #19E6FF,0 0 0 3.5px rgba(139,92,255,.9),0 0 18px rgba(25,230,255,.5)}
.tile.on b{color:#fff}
.bgrow{display:flex;gap:9px;margin:10px 0 12px}
.sw2{flex:1;cursor:pointer}
.sw2 .pic{height:30px}
.bgdim{display:flex;align-items:center;gap:12px}
.bgdim input{flex:1;accent-color:#EAF2FF;height:3px}
/* the "demo version" pop-up beside Fetch / Split */
.pop{display:none;position:absolute;z-index:60;width:318px;padding:14px 16px 15px;border-radius:11px;border:1px solid rgba(25,230,255,.55);background:rgba(11,12,34,.97);box-shadow:0 16px 44px rgba(0,0,0,.6),0 0 26px rgba(25,230,255,.22)}
.pop.open{display:block;animation:popin .18s ease-out}
@keyframes popin{from{opacity:0;transform:translateY(-6px) scale(.97)}}
.pop:before{content:'';position:absolute;right:26px;top:-6px;width:10px;height:10px;transform:rotate(45deg);background:rgba(11,12,34,.97);border-left:1px solid rgba(25,230,255,.55);border-top:1px solid rgba(25,230,255,.55)}
.pop.above:before{top:auto;bottom:-6px;border:0;border-right:1px solid rgba(25,230,255,.55);border-bottom:1px solid rgba(25,230,255,.55)}
.ptag{font:700 9px/1 var(--mono);letter-spacing:.22em;color:#FFD23F}
.pop b{display:block;margin-top:9px;font:700 15px/1.25 "AP Grotesk",sans-serif;color:#fff}
.pop p{margin:6px 0 0;font:400 12px/1.5 "AP Grotesk",sans-serif;color:#B9C3D8}
.pbuy{display:inline-flex;align-items:center;height:30px;margin-top:11px;padding:0 13px;border-radius:7px;background:linear-gradient(90deg,#2B8CFF,#7A6BFF 45%,#FF4FD0);color:#0A0A1E;font:700 11.5px/1 "AP Grotesk",sans-serif;cursor:pointer;transition:filter .16s,transform .12s}
.pbuy:hover{filter:brightness(1.18)}
.pbuy:active{transform:scale(.97)}
.px{position:absolute;right:10px;top:9px;font:400 11px/1 var(--mono);color:#7F8AA3;cursor:pointer;padding:3px}
.px:hover{color:#fff}

/* v10: slimmer GPU chip (one row), KeyPrism word centred with its icon pinned right, whole box visible */
.gpu{padding:9px 10px}
.keys{height:54px;margin-top:12px}
.keys i{position:absolute;right:14px;top:50%;margin:-7px 0 0}
#side{height:auto;padding-bottom:14px}

/* ---------- v11: two beats per scroll step (pose + .go) ---------- */
@keyframes press{0%,100%{transform:scale(1)}45%{transform:scale(.93)}}
@keyframes ring{0%{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--rc),0 0 18px 4px var(--rc)}100%{box-shadow:0 0 0 2px #fff,0 0 0 13px transparent,0 0 30px 12px transparent}}
#app.pose-paste.go .fetch,#app.pose-split.go .split,#app.pose-mix:not(.go) #expand,#app.pose-detach:not(.go) #detach{position:relative;z-index:7;filter:brightness(1.3);animation:press 1s ease-in-out infinite,ring 1s ease-out infinite}
#app.pose-paste.go .fetch{--rc:#19E6FF}
#app.pose-split.go .split{--rc:#FF2EC4}
#app.pose-mix:not(.go) #expand{--rc:#38FF9A}
#app.pose-detach:not(.go) #detach{--rc:#FFD23F}
/* Split, second beat: the song card and the mixer come back into focus for the run */
#app.pose-split.go .sel,#app.pose-split.go #mixer{filter:none}
#app.pose-split.go .sel{box-shadow:0 0 0 1.5px var(--pk),0 0 44px rgba(255,46,196,.3)}
.prog{display:none;height:5px;margin:8px 16px 0;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.prog i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#19E6FF,#8B5CFF 55%,#FF2EC4);box-shadow:0 0 12px rgba(139,92,255,.8);transition:width .25s linear}
#app.splitting .prog{display:block}
#app.splitting .list{height:72px}
#app.splitting .done{color:var(--cy)}
#app.splitting .statebar{background:var(--cy);box-shadow:0 0 10px var(--cy)}
.lane{transition:height .45s cubic-bezier(.22,1,.36,1),opacity .45s ease,transform .45s ease}
.lane.pending{opacity:.08;transform:translateY(8px)}
/* before the mixer grows / floats, the rest of the window stays sharp so the button being pointed at reads */