/* PXLGEN editor: PXL SUPPLY design system (tokens, type and surfaces mirror pxl-supply/src/app/globals.css) */
@font-face{font-family:"Archivo";src:url(../fonts/Archivo-Variable.ttf) format("truetype");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../fonts/DMSans-Variable.ttf) format("truetype");font-weight:100 1000;font-display:swap}
@font-face{font-family:"DM Mono";src:url(../fonts/DMMono-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url(../fonts/DMMono-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@property --accent{syntax:"<color>";inherits:true;initial-value:#5ce1ff}
:root{
  --ink:#060607; --ink-2:#0c0c0e; --panel:#111113; --panel-2:#18181b;
  --line:rgb(255 255 255/.08); --line-2:rgb(255 255 255/.14);
  --fg:#f4f4f0; --mute:#a3a69e; --sage:#8e9289; --dim:#6f726b;
  --accent:#5ce1ff; --accent-ink:#04161b; --accent-glow:color-mix(in oklab,var(--accent) 45%,transparent);
  --accent-12:color-mix(in oklab,var(--accent) 12%,transparent); --accent-22:color-mix(in oklab,var(--accent) 22%,transparent);
  --font-sans:"DM Sans",ui-sans-serif,system-ui,sans-serif; --font-display:"Archivo","DM Sans",ui-sans-serif,sans-serif; --font-mono:"DM Mono",ui-monospace,monospace;
  --ease-out-expo:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --nav-h:56px; --gap:12px; --left:288px; --right:336px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink)}
body{font:13.5px/1.4 var(--font-sans);color:var(--fg);font-feature-settings:"ss01","ss02";-webkit-font-smoothing:antialiased;transition:--accent .6s}
::selection{background:var(--accent);color:var(--accent-ink)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
svg{width:14px;height:14px;flex:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}

/* ---------- type ---------- */
.display{font-family:var(--font-display);font-stretch:112%;font-weight:800;letter-spacing:-.025em;line-height:.9;text-transform:uppercase;margin:0}
.eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:0;font-weight:400}
.eyebrow.px{display:flex;align-items:center;gap:9px}
.eyebrow.px i{display:grid;grid-template-columns:3px 3px;gap:2px;width:8px;height:8px;
  background:linear-gradient(var(--accent),var(--accent)) 0 0/3px 3px no-repeat,linear-gradient(var(--accent),var(--accent)) 5px 5px/3px 3px no-repeat,
  linear-gradient(var(--accent-22),var(--accent-22)) 5px 0/3px 3px no-repeat,linear-gradient(var(--accent-22),var(--accent-22)) 0 5px/3px 3px no-repeat}
.eyebrow b{font-weight:500;color:var(--fg)}

/* ---------- backdrop: ink + pixel grid + accent aura ---------- */
.backdrop{position:fixed;inset:0;pointer-events:none;z-index:0}
.backdrop .grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgb(255 255 255/.035) 1px,transparent 1px),linear-gradient(to bottom,rgb(255 255 255/.035) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 45%,#000 30%,transparent 100%);mask-image:radial-gradient(80% 70% at 50% 45%,#000 30%,transparent 100%)}
.backdrop .aura{position:absolute;left:50%;top:44%;width:70vw;height:60vh;transform:translate(-50%,-50%);background:radial-gradient(50% 50% at 50% 50%,var(--accent-glow),transparent 70%);opacity:.22;filter:blur(40px)}

/* ---------- surfaces ---------- */
.glass{background:rgb(14 14 16/.62);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--line-2)}

/* ---------- buttons (site .btn / .btn-accent / .btn-ghost / .chip) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;font-weight:600;font-size:13px;letter-spacing:-.01em;white-space:nowrap;isolation:isolate;overflow:hidden;
  transition:transform .35s var(--ease-spring),background-color .3s,color .3s,box-shadow .4s,border-color .3s}
.btn:active{transform:scale(.97)}
.btn svg{width:14px;height:14px}
.btn-accent{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 40px -12px var(--accent-glow)}
.btn-accent:hover{box-shadow:0 0 0 5px color-mix(in oklab,var(--accent) 18%,transparent),0 18px 60px -10px var(--accent-glow);transform:translateY(-1px)}
.btn-accent::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-110%);background:linear-gradient(100deg,transparent 20%,rgb(255 255 255/.55) 50%,transparent 80%);transition:transform .7s var(--ease-out-expo)}
.btn-accent:hover::before{transform:translateX(110%)}
.btn-accent:disabled{opacity:.55;cursor:progress}
.btn-ghost,.btn.ghost{border:1px solid var(--line-2);color:var(--fg);background:rgb(255 255 255/.03)}
.btn-ghost:hover,.btn.ghost:hover{background:rgb(255 255 255/.08);border-color:rgb(255 255 255/.28);transform:translateY(-1px)}
.btn.wide{width:100%;height:46px;font-size:14px}
.icon{width:30px;height:30px;display:inline-grid;place-items:center;border-radius:999px;color:var(--mute);transition:background .2s,color .2s,box-shadow .3s}
.icon:hover{background:rgb(255 255 255/.07);color:var(--fg)}
.icon.ring{border:1px solid var(--line-2)}
.icon.ring:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 18px -4px var(--accent-glow)}

/* ---------- nav (floating pill, like the site's) ---------- */
.nav{position:fixed;z-index:30;top:var(--gap);left:var(--gap);right:var(--gap);height:var(--nav-h);border-radius:999px;display:flex;align-items:center;gap:14px;padding:0 10px 0 20px;
  box-shadow:0 20px 60px -30px rgb(0 0 0/.9)}
.nav::after{content:"";position:absolute;left:28px;right:28px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.55;pointer-events:none}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--fg)}
.brand .logo{display:block;width:24px;height:24px}
.brand .wm{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:15px;letter-spacing:-.01em;text-transform:uppercase;line-height:1}
.vsep{width:1px;height:24px;background:var(--line-2)}
.doc{display:flex;flex-direction:column;gap:1px;cursor:text}
.doc .eyebrow{font-size:9px;color:var(--dim)}
.doc input{border:0;background:transparent;font-weight:600;font-size:14px;width:220px;padding:0;outline:none;color:var(--fg)}
.doc input:focus{color:var(--accent)}
.nav-sp{flex:1}

/* ---------- pill select + menu ---------- */
.sel-pill{position:relative;height:34px;border-radius:999px;border:1px solid var(--line-2);background:rgb(255 255 255/.03);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px 0 15px;cursor:pointer;font-size:13px;user-select:none;transition:border-color .25s,background .25s,box-shadow .3s}
.sel-pill:hover{border-color:rgb(255 255 255/.28);background:rgb(255 255 255/.06)}
.sel-pill.open{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-12)}
.sel-pill svg{width:10px;height:10px;color:var(--mute);transition:transform .3s var(--ease-out-expo)}
.sel-pill.open svg{transform:rotate(180deg);color:var(--accent)}
.sel-pill .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-right:-2px}
.pill-select .sel-pill{min-width:128px;height:38px}
.pill-select.small .sel-pill{min-width:0;height:34px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.menu{position:fixed;z-index:60;background:rgb(16 16 19/.86);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border:1px solid var(--line-2);border-radius:18px;
  box-shadow:0 30px 80px -20px rgb(0 0 0/.85),0 0 0 1px rgb(0 0 0/.4);padding:6px;min-width:160px;max-height:60vh;overflow:auto;animation:pop .35s var(--ease-out-expo)}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 12px 8px 10px;border-radius:12px;font-size:13px;color:rgb(255 255 255/.8)}
.menu button:hover{background:rgb(255 255 255/.07);color:var(--fg)}
.menu button.cur{color:var(--fg)}
.menu button i{width:12px;display:grid;place-items:center;color:var(--accent)}
.menu button i svg{width:10px;height:10px}
.menu .grp{margin:10px 10px 4px;font:400 9.5px var(--font-mono);color:var(--dim);text-transform:uppercase;letter-spacing:.18em}

/* accent switcher (same palettes + localStorage key as the site) */
.accent-pick{position:relative}
.accent-pick .cur{width:38px;height:38px;border-radius:999px;border:1px solid var(--line-2);display:grid;place-items:center;transition:border-color .25s}
.accent-pick .cur:hover{border-color:var(--accent)}
.accent-pick .cur i{width:14px;height:14px;border-radius:3px;background:var(--accent);box-shadow:0 0 14px var(--accent-glow)}
.accent-menu{display:flex;gap:6px;padding:8px}
.accent-menu button{width:26px;height:26px;padding:0;border-radius:999px;justify-content:center;display:grid;place-items:center}
.accent-menu button i{width:14px;height:14px;border-radius:3px}
.accent-menu button.on{box-shadow:0 0 0 1.5px var(--fg) inset}

/* ---------- layout ---------- */
.app{position:fixed;inset:calc(var(--nav-h) + var(--gap) * 2) var(--gap) var(--gap) var(--gap);z-index:1}
.panel{position:absolute;top:0;bottom:0;border-radius:28px;overflow:hidden;box-shadow:0 30px 90px -40px rgb(0 0 0/.9)}
.panel::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgb(255 255 255/.045),transparent 30%)}
.stack{left:0;width:var(--left);display:flex;flex-direction:column}
.inspector{right:0;width:var(--right);overflow:auto;scrollbar-width:thin;scrollbar-color:rgb(255 255 255/.12) transparent}
.stage{position:absolute;left:calc(var(--left) + var(--gap));right:calc(var(--right) + var(--gap));top:0;bottom:0}

/* ---------- layer stack ---------- */
.panel-head{position:relative;display:flex;align-items:center;justify-content:space-between;padding:18px 14px 12px 20px}
.add-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 10px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:12px;box-shadow:0 8px 30px -10px var(--accent-glow);transition:transform .35s var(--ease-spring),box-shadow .3s}
.add-btn:hover{transform:translateY(-1px);box-shadow:0 0 0 4px var(--accent-12),0 12px 40px -10px var(--accent-glow)}
.add-btn svg{width:10px;height:10px}
.add-btn.open svg{transform:rotate(45deg)}
.layer-list{list-style:none;margin:0;padding:2px 10px 10px;overflow:auto;flex:1;scrollbar-width:none}
.layer{position:relative;display:flex;align-items:center;gap:11px;padding:7px 8px 7px 7px;border-radius:18px;cursor:pointer;user-select:none;border:1px solid transparent;margin-bottom:4px;transition:background .25s,border-color .25s}
.layer:hover{background:rgb(255 255 255/.04)}
.layer.sel{background:linear-gradient(100deg,var(--accent-12),rgb(255 255 255/.03) 70%);border-color:color-mix(in oklab,var(--accent) 38%,transparent)}
.layer.sel::before{content:"";position:absolute;left:-10px;top:50%;width:3px;height:22px;margin-top:-11px;background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.layer .thumb{position:relative;width:62px;height:40px;border-radius:11px;overflow:hidden;flex:none;background:#000;box-shadow:0 0 0 1px var(--line-2)}
.layer .thumb canvas{display:block;width:100%;height:100%}
.layer .thumb .kind{position:absolute;left:4px;bottom:4px;width:15px;height:15px;border-radius:5px;display:grid;place-items:center;background:rgb(6 6 7/.72);color:var(--fg)}
.layer .thumb .kind svg{width:7px;height:7px}
.layer.fx .thumb .kind{color:var(--accent)}
.layer .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:13px}
.layer .nm small{display:block;font:400 9.5px/1.6 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:1px;overflow:hidden;text-overflow:ellipsis}
.layer.sel .nm small{color:color-mix(in oklab,var(--accent) 70%,var(--mute))}
.layer.off .thumb,.layer.off .nm{opacity:.38}
.layer .icon{width:26px;height:26px}
.layer .icon svg{width:12px;height:12px}
.layer .eye{color:var(--dim)}
.layer .ops{position:absolute;right:38px;top:50%;transform:translateY(-50%);display:flex;gap:1px;padding:2px;border-radius:999px;background:rgb(18 18 21/.92);border:1px solid var(--line-2);opacity:0;pointer-events:none;transition:opacity .2s}
.layer:hover .ops{opacity:1;pointer-events:auto}
.layer .ops .icon{width:24px;height:24px}
.layer .ops .icon svg{width:10px;height:10px}
.layer.drag-over{box-shadow:0 -2px 0 var(--accent)}
.hint{display:flex;gap:8px;align-items:flex-start;color:var(--dim);font-size:11.5px;line-height:1.45;margin:0;padding:12px 18px 16px;border-top:1px solid var(--line)}
.hint svg{width:10px;height:10px;margin-top:3px;color:var(--sage)}
.add-menu{position:absolute;z-index:10;left:10px;right:10px;top:58px;max-height:calc(100% - 70px);overflow:auto;border-radius:22px;padding:8px 8px 10px;background:rgb(16 16 19/.94);box-shadow:0 30px 80px -20px rgb(0 0 0/.9);animation:pop .35s var(--ease-out-expo)}
.add-menu h6{display:flex;align-items:center;gap:8px;margin:10px 8px 6px;font:400 9.5px var(--font-mono);color:var(--dim);text-transform:uppercase;letter-spacing:.18em}
.add-menu h6::after{content:"";flex:1;height:1px;background:var(--line)}
.add-menu .tiles{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.add-menu button{display:flex;align-items:center;gap:9px;min-height:42px;line-height:1.2;text-align:left;padding:9px 10px;border-radius:14px;border:1px solid var(--line);background:rgb(255 255 255/.02);font-size:12.5px;color:rgb(255 255 255/.85);transition:border-color .2s,background .2s,color .2s}
.add-menu button:hover{border-color:var(--accent);background:var(--accent-12);color:var(--fg)}
.add-menu button svg{width:10px;height:10px;color:var(--accent)}

/* ---------- stage ---------- */
.canvas-wrap{position:absolute;border-radius:20px;overflow:hidden;background:#000;line-height:0;
  box-shadow:0 0 0 1px var(--line-2),0 0 120px -20px var(--accent-glow),0 60px 160px -40px rgb(0 0 0/.9)}
#view{display:block;width:100%;height:100%}
.hud{position:absolute;top:12px;display:flex;align-items:center;gap:8px;height:24px;padding:0 10px;border-radius:999px;background:rgb(6 6 7/.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgb(255 255 255/.1);font:400 9.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:rgb(255 255 255/.75);pointer-events:none}
.hud.tl{left:12px}.hud.tr{right:12px}
.hud .live{width:6px;height:6px;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse-dot 1.6s ease-in-out infinite}
.paused .hud .live{animation:none;opacity:.35}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.35}}
.dock{position:absolute;left:50%;bottom:0;transition:top .35s var(--ease-out-expo);transform:translateX(-50%);display:flex;align-items:center;gap:10px;height:62px;padding:0 10px 0 10px;border-radius:999px;box-shadow:0 24px 70px -24px rgb(0 0 0/.95);white-space:nowrap;max-width:100%}
.dock .play{width:42px;height:42px;flex:none;border-radius:999px;display:grid;place-items:center;background:var(--fg);color:#060607;transition:transform .35s var(--ease-spring),box-shadow .3s}
.dock .play:hover{transform:scale(1.05);box-shadow:0 0 0 5px rgb(255 255 255/.1)}
.dock .play svg{width:14px;height:14px}
.scrub{display:flex;flex-direction:column;gap:6px;width:clamp(120px,16vw,260px)}
.timeline{position:relative;height:12px;cursor:pointer;touch-action:none}
.timeline::before{content:"";position:absolute;left:0;right:0;top:4px;height:4px;border-radius:999px;background:rgb(255 255 255/.1);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(100%/32 - 2px),transparent calc(100%/32 - 2px) calc(100%/32));mask:repeating-linear-gradient(90deg,#000 0 calc(100%/32 - 2px),transparent calc(100%/32 - 2px) calc(100%/32))}
.timeline .fillbar{position:absolute;left:0;top:4px;height:4px;width:0;border-radius:999px;background:var(--accent);box-shadow:0 0 12px var(--accent-glow);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 8px);mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 8px)}
.timeline i{position:absolute;top:0;width:3px;height:12px;margin-left:-1px;background:var(--fg);box-shadow:0 0 10px var(--accent)}
.scrub-meta{display:flex;justify-content:space-between}
.tc{font:400 10px/1 var(--font-mono);letter-spacing:.1em;color:var(--fg);font-variant-numeric:tabular-nums}
.tc.dim{color:var(--dim)}
.dsep{width:1px;height:26px;background:var(--line-2)}
.chip-tgl{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 11px;border-radius:999px;border:1px solid var(--line-2);font:400 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);cursor:pointer;user-select:none;transition:all .25s var(--ease-out-expo)}
.chip-tgl input{position:absolute;opacity:0;pointer-events:none}
.chip-tgl svg{width:10px;height:10px}
.chip-tgl:hover{color:var(--fg);border-color:rgb(255 255 255/.3)}
.chip-tgl:has(input:checked){background:var(--fg);color:#060607;border-color:var(--fg)}
.stepper{display:inline-flex;align-items:center;height:34px;border-radius:999px;border:1px solid var(--line-2);padding:0 3px;color:var(--mute);font:400 11px var(--font-mono)}
.stepper button{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;color:var(--mute)}
.stepper button:hover{background:rgb(255 255 255/.08);color:var(--fg)}
.stepper button svg{width:9px;height:9px}
.stepper input{width:24px;border:0;background:transparent;text-align:right;color:var(--fg);font:500 12px var(--font-mono);outline:none;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper span{margin:0 4px 0 1px}

/* ---------- inspector ---------- */
.insp-head{position:sticky;top:0;z-index:3;padding:20px 16px 16px 20px;background:linear-gradient(180deg,rgb(14 14 16/.96) 70%,rgb(14 14 16/0));}
.insp-head .row1{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}
.insp-head .acts{display:flex;gap:4px}
.insp-head .ttl{font-size:26px;margin-top:10px;word-break:break-word}
.insp-head .ttl .n{color:var(--dim);font-size:.5em;letter-spacing:0;vertical-align:top;margin-left:6px;font-family:var(--font-mono);font-weight:400;font-stretch:100%}
.sec{margin:0 12px 8px;border:1px solid var(--line);border-radius:20px;background:rgb(255 255 255/.018);transition:border-color .3s,background .3s}
.sec:hover{border-color:rgb(255 255 255/.11)}
.sec-title{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;cursor:pointer;user-select:none}
.sec-title .ix{font:400 9.5px var(--font-mono);color:var(--dim);letter-spacing:.1em}
.sec-title .tt{flex:1;font-weight:600;font-size:13px}
.sec-title .ct{font:400 9.5px var(--font-mono);color:var(--dim);letter-spacing:.12em}
.sec-title .pm{width:24px;height:24px;border-radius:999px;border:1px solid var(--line-2);display:grid;place-items:center;transition:border-color .25s,color .25s,background .25s;color:var(--mute)}
.sec-title .pm b{display:grid;place-items:center}
.sec-title .pm .cl,.sec.closed .sec-title .pm .op{display:none}.sec.closed .sec-title .pm .cl{display:grid}
.sec-title .pm svg{width:8px;height:8px}
.sec-title:hover .pm{border-color:var(--accent);color:var(--accent)}
.sec.closed{background:transparent}
.sec.closed .sec-title .tt{color:rgb(255 255 255/.7)}
.sec-body{padding:0 14px 14px}
.sec.closed .sec-body{display:none}
.ctl{margin:12px 0 0}
.ctl:first-child{margin-top:2px}
.ctl-top{display:flex;align-items:center;gap:2px;color:rgb(255 255 255/.72);font-size:12.5px;margin-bottom:7px}
.ctl-top .lb{flex:1;display:flex;align-items:center;gap:7px}
.ctl.dirty .ctl-top .lb::before{content:"";width:4px;height:4px;background:var(--accent);box-shadow:0 0 6px var(--accent)}
.ctl-top .mini{width:22px;height:22px;display:grid;place-items:center;border-radius:999px;color:var(--dim);transition:color .2s,background .2s}
.ctl-top .mini:hover{background:rgb(255 255 255/.07);color:var(--fg)}
.ctl-top .mini svg{width:10px;height:10px}
.ctl-top .mini.on{color:var(--accent-ink);background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.ctl-top .reset{opacity:0;pointer-events:none}
.ctl.dirty .ctl-top .reset{opacity:1;pointer-events:auto;color:var(--accent)}
.ctl-top .vt{font:500 11px var(--font-mono);letter-spacing:.02em;color:var(--fg);min-width:44px;height:22px;padding:0 8px;border-radius:999px;display:inline-grid;place-items:center;background:rgb(255 255 255/.05);border:1px solid var(--line);cursor:text;margin-left:4px;font-variant-numeric:tabular-nums}
.ctl-top .vt:hover{border-color:var(--line-2)}
.ctl-top .vt input{width:52px;border:0;background:transparent;color:var(--accent);font:inherit;text-align:center;outline:none;padding:0}
/* PXL slider: segmented pixel rail, accent fill with glow, square knob */
.sl{position:relative;height:20px;cursor:ew-resize;user-select:none;touch-action:none}
.sl .rail{position:absolute;left:0;right:0;top:8px;height:4px;background:rgb(255 255 255/.09);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 6px);mask:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 6px)}
.sl .fl{position:absolute;top:8px;height:4px;background:linear-gradient(90deg,color-mix(in oklab,var(--accent) 45%,transparent),var(--accent));
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 6px);mask:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 6px);filter:drop-shadow(0 0 4px var(--accent-glow))}
.sl .z{position:absolute;top:5px;width:1px;height:10px;background:rgb(255 255 255/.28);margin-left:-.5px}
.sl .kn{position:absolute;top:3px;width:14px;height:14px;margin-left:-7px;background:var(--fg);border-radius:4px;box-shadow:0 0 0 3px rgb(6 6 7/.85),0 0 0 4px color-mix(in oklab,var(--accent) 60%,transparent),0 0 16px var(--accent-glow);transition:transform .25s var(--ease-spring)}
.sl:hover .kn,.sl.drag .kn{transform:scale(1.12)}
.sl.drag .kn{background:var(--accent)}
.sel-pill.wide{width:100%}
.ctl .sel-pill{height:34px}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.swatches button{height:26px;border-radius:999px;box-shadow:inset 0 0 0 1px rgb(255 255 255/.1);transition:transform .3s var(--ease-spring),box-shadow .25s}
.swatches button:hover{transform:translateY(-1px)}
.swatches button.on{box-shadow:0 0 0 2px var(--ink),0 0 0 3.5px var(--accent),0 0 18px -2px var(--accent-glow)}
.color-pill{display:flex;align-items:center;gap:10px;height:34px;border-radius:999px;border:1px solid var(--line-2);padding:0 12px 0 6px;font:400 11px var(--font-mono);letter-spacing:.08em;position:relative;cursor:pointer}
.color-pill:hover{border-color:rgb(255 255 255/.28)}
.color-pill i{width:22px;height:22px;border-radius:999px;box-shadow:inset 0 0 0 1px rgb(255 255 255/.18)}
.color-pill input{position:absolute;inset:0;opacity:0;cursor:pointer}
.toggle{height:34px;border-radius:999px;border:1px solid var(--line-2);display:inline-flex;align-items:center;padding:0 14px 0 5px;gap:10px;font:400 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);cursor:pointer;user-select:none;transition:border-color .25s}
.toggle b{width:40px;height:24px;border-radius:999px;background:rgb(255 255 255/.08);position:relative;transition:background .3s}
.toggle b::after{content:"";position:absolute;left:4px;top:4px;width:16px;height:16px;border-radius:4px;background:var(--mute);transition:left .35s var(--ease-spring),background .3s}
.toggle.on{color:var(--fg);border-color:color-mix(in oklab,var(--accent) 45%,transparent)}
.toggle.on b{background:var(--accent);box-shadow:0 0 14px var(--accent-glow)}.toggle.on b::after{left:20px;background:var(--accent-ink)}
.lfo{display:flex;gap:10px;align-items:center;margin-top:8px;padding:6px 6px 6px 12px;border-radius:999px;background:var(--accent-12);border:1px solid color-mix(in oklab,var(--accent) 30%,transparent);font:400 10px var(--font-mono);color:var(--accent)}
.lfo>svg{width:10px;height:10px}
.lfo .sl{flex:1;min-width:90px;height:18px}
.lfo .sl .rail,.lfo .sl .fl{top:7px}
.lfo .sl .kn{top:3px;width:12px;height:12px;margin-left:-6px}
.lfo .vt{font:500 10px var(--font-mono);color:var(--fg);min-width:32px;text-align:right}
.lfo .cyc{display:flex;gap:2px}
.lfo .cyc button{min-width:22px;height:22px;border-radius:999px;font:400 10px var(--font-mono);color:var(--mute)}
.lfo .cyc button:hover{color:var(--fg)}
.lfo .cyc button.on{background:var(--accent);color:var(--accent-ink)}
.empty{color:var(--mute);padding:60px 20px;text-align:center}
.note{color:var(--dim);font-size:11.5px;line-height:1.45;margin:8px 0 0}
.ctl .btn{height:34px;font-size:12.5px}
.ctl .btn.wide{height:38px}

/* ---------- export pop ---------- */
.pop{position:fixed;z-index:40;width:360px;border-radius:28px;padding:20px 20px 20px;box-shadow:0 40px 120px -40px var(--accent-glow),0 40px 100px -30px rgb(0 0 0/.95);animation:pop .4s var(--ease-out-expo);background:rgb(14 14 16/.86)}
.pop-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.pop-head h3{font-size:30px;margin-top:10px}
.pop .row{margin:16px 0 0}
.pop .row>label{display:block;margin-bottom:8px;font-size:9.5px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1;height:36px;border-radius:999px;font-size:12.5px;border:1px solid var(--line-2);color:var(--mute);background:rgb(255 255 255/.02);transition:all .25s var(--ease-out-expo)}
.seg button:hover{color:var(--fg);border-color:rgb(255 255 255/.3)}
.seg button.on{background:var(--fg);color:#060607;border-color:var(--fg);font-weight:600}
.pop .spec{font:400 10.5px/1.5 var(--font-mono);letter-spacing:.06em;color:var(--mute);text-transform:uppercase;padding:12px 14px;border-radius:16px;border:1px dashed var(--line-2)}
.prog{height:4px;background:rgb(255 255 255/.08);overflow:hidden;margin:16px 0 8px;border-radius:999px}
.prog i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.status{color:var(--dim);font-size:11.5px;line-height:1.45;min-height:34px;margin-bottom:12px}

/* lyrics */
.lyr{width:100%;height:160px;resize:vertical;border:1px solid var(--line-2);border-radius:16px;background:rgb(255 255 255/.04);color:var(--fg);font:11.5px/1.55 var(--font-mono);padding:10px 12px;outline:none;transition:border-color .2s,box-shadow .2s}
.lyr:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-22)}
.lyr-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lyr-btns .btn{height:32px;font-size:12px;padding:0 13px}

@media (max-width:1280px){:root{--left:244px;--right:304px}.doc input{width:150px}.brand .wm{font-size:13px}}
@media (max-width:1100px){.dock .btn-ghost span,.scrub{width:110px}.doc{display:none}.vsep{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ---------- locked export (?export=locked, public embed) ---------- */
.lock-card[hidden],.lock-scrim[hidden],.wm-lock[hidden]{display:none!important}
.btn-accent.locked{background:rgb(255 255 255/.06);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-accent.locked svg{color:var(--accent)}
.btn.locked svg{color:var(--accent)}
.wm-lock{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:7px;height:24px;padding:0 10px 0 8px;border-radius:999px;background:rgb(6 6 7/.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgb(255 255 255/.08);font:400 9.5px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:rgb(255 255 255/.62);pointer-events:none;user-select:none}
.wm-lock img{width:11px;height:11px;opacity:.75}
.lock-scrim{position:fixed;inset:0;z-index:79;background:rgb(0 0 0/.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .3s ease}
@keyframes fade{from{opacity:0}}
.lock-card{position:fixed;z-index:80;left:50%;top:50%;width:min(420px,calc(100vw - 32px));transform:translate(-50%,-50%);border-radius:28px;padding:28px 28px 26px;background:rgb(14 14 16/.88);
  box-shadow:0 40px 120px -40px var(--accent-glow),0 40px 100px -30px rgb(0 0 0/.95);animation:lockpop .45s var(--ease-out-expo)}
@keyframes lockpop{from{opacity:0;transform:translate(-50%,-48%) scale(.98)}}
.lock-card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgb(255 255 255/.05),transparent 35%)}
.lock-x{position:absolute;top:16px;right:16px}
.lock-badge{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--accent-12);border:1px solid color-mix(in oklab,var(--accent) 35%,transparent);color:var(--accent);margin-bottom:18px;box-shadow:0 0 30px -8px var(--accent-glow)}
.lock-badge svg{width:18px;height:18px}
.lock-card h3{font-size:30px;margin:12px 0 0;line-height:.95}
.lock-copy{color:var(--mute);font-size:13.5px;line-height:1.5;margin:14px 0 22px}
.lock-btns{display:flex;gap:8px}
.lock-btns .btn{flex:1;height:44px;font-size:14px;text-decoration:none}