/* ==========================================================
   MAIN: every section between the navigation and the footer
   ========================================================== */
.pxv{--navy:#101426;--navy2:#181d38;--navy3:#0b0e1c;--purple:#7756D8;--purple-d:#5a3fb5;--cyan:#55E6E9;--cyan-d:#2aa9ac;--green:#89F0A0;--gold:#FFDA78;--gold-d:#d9a93f;--cream:#F4F0E8;--coral:#FF7F91;--line:var(--ln);
  --pix:'Press Start 2P',monospace;--body:'Space Grotesk',system-ui,-apple-system,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  position:relative;background:var(--bgc);color:var(--tx);font-family:var(--body);font-size:17px;line-height:1.65;overflow-x:clip}
.pxv *,.pxv *::before,.pxv *::after{box-sizing:border-box}
.pxv img{max-width:100%;height:auto;display:block}
.pxv h1,.pxv h2,.pxv h3,.pxv h4{margin:0;font-weight:400}
.pxv p{margin:0}
.pxv a{color:var(--tcyan)}
.pxv :focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.pxv .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pxv section{position:relative;z-index:1;scroll-margin-top:72px;padding:clamp(80px,11vw,140px) clamp(16px,5vw,64px)}
.pxv .wrap{max-width:1200px;margin:0 auto;position:relative}
/* stepped pixel border helper */
.pxv .pframe{position:relative;background:var(--pn);
  clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px))}
.pxv .pbox{position:relative;background:var(--pn);border:4px solid var(--line);box-shadow:6px 6px 0 #05070f}
.pxv .pbox::before,.pxv .pbox::after{content:"";position:absolute;width:8px;height:8px;background:var(--bgc)}
.pxv .pbox::before{top:-4px;left:-4px}.pxv .pbox::after{bottom:-4px;right:-4px}

/* section headings */
.pxv .sec-head{margin-bottom:clamp(36px,5vw,56px);max-width:760px}
.pxv .sec-lv{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;color:var(--tcyan);margin-bottom:16px}
.pxv .sec-lv::before{content:"";width:10px;height:10px;background:var(--cyan);box-shadow:14px 0 0 var(--purple),28px 0 0 var(--gold);margin-right:30px}
.pxv .sec-title{font-family:var(--pix);font-size:clamp(18px,3vw,30px);line-height:1.45;color:var(--tx);text-shadow:4px 4px 0 var(--purple-d)}
.pxv .sec-sub{margin-top:18px;color:var(--tx2);max-width:62ch}

/* buttons */
.pxv .pbtn{--bg:var(--gold);--sh:var(--gold-d);--fg:var(--navy);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--pix);font-size:11px;line-height:1.3;letter-spacing:.5px;color:var(--fg);background:var(--bg);border:0;padding:16px 20px;cursor:pointer;text-decoration:none;
  box-shadow:inset -4px -4px 0 var(--sh),inset 4px 4px 0 rgba(255,255,255,.35),0 0 0 4px #05070f,6px 6px 0 4px #05070f;transition:transform .08s steps(1),box-shadow .08s steps(1),filter .15s}
.pxv .pbtn:hover{filter:brightness(1.08);transform:translate(-2px,-2px);box-shadow:inset -4px -4px 0 var(--sh),inset 4px 4px 0 rgba(255,255,255,.35),0 0 0 4px #05070f,8px 8px 0 4px #05070f}
.pxv .pbtn:active{transform:translate(6px,6px);box-shadow:inset 4px 4px 0 var(--sh),0 0 0 4px #05070f,0 0 0 4px #05070f}
.pxv .pbtn.cyan{--bg:var(--cyan);--sh:var(--cyan-d)}
.pxv .pbtn.ghost{--bg:var(--navy2);--sh:#0b0e1c;--fg:var(--tx)}
.pxv .pbtn.sm{font-size:9px;padding:12px 14px}
.pxv .pbtn:focus-visible{outline:3px solid var(--frame);outline-offset:6px}

/* pixel art */
.pxv .art{display:inline-block;position:relative;vertical-align:middle;flex-shrink:0}
.pxv .art>i{position:absolute;top:0;left:0;display:block}
.pxv .art.anim>i.f2{opacity:0}
.pxv .art.anim>i.f1{animation:pxF1 .5s steps(1) infinite}
.pxv .art.anim>i.f2{animation:pxF2 .5s steps(1) infinite}
@keyframes pxF1{0%{opacity:1}50%{opacity:0}}
@keyframes pxF2{0%{opacity:0}50%{opacity:1}}

/* ============ PRELOADER ============ */
.px-pre{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:var(--bgc);color:var(--tx);font-family:var(--pix);overflow:hidden;
  animation:pxPreFailsafe 0s linear 6s forwards}
@keyframes pxPreFailsafe{to{visibility:hidden;opacity:0;pointer-events:none}}
.px-pre-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(85,230,233,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(85,230,233,.09) 1px,transparent 1px);background-size:32px 32px;opacity:0;animation:pxFadeIn .7s steps(7) forwards}
.px-pre-cascade{position:absolute;inset:0;display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(10,1fr)}
.px-pre-cascade i{background:var(--purple);opacity:0;animation:pxCascade .7s steps(3) forwards}
@keyframes pxCascade{0%{opacity:0}40%{opacity:.55}100%{opacity:0}}
@keyframes pxFadeIn{to{opacity:1}}
.px-pre-core{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.px-pre-hud{position:absolute;top:calc(100% + 30px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;width:max-content;max-width:92vw}
.px-pre-logo{position:relative;width:min(150px,38vw);aspect-ratio:1;display:grid;place-items:center}
.px-pre-logo img{width:100%;height:100%;object-fit:contain}
.px-pre-logo .cover{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}
.px-pre-logo .cover i{background:var(--bgc);animation:pxOut .1s steps(1) forwards}
@keyframes pxOut{to{opacity:0}}
.px-pre-logo .ring{position:absolute;inset:-18px;border:4px dashed var(--gold);opacity:0;clip-path:inset(0 100% 0 0)}
.px-pre.s3 .px-pre-logo .ring{opacity:1;animation:pxRing .9s steps(9) forwards}
@keyframes pxRing{to{clip-path:inset(0 0 0 0)}}
.px-pre.s3 .px-pre-logo img{animation:pxBounce .45s steps(4) 2}
@keyframes pxBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.px-pre-orbit{position:absolute;inset:-34px;animation:pxSpin 2.4s steps(24) infinite;opacity:0}
.px-pre.s2 .px-pre-orbit{opacity:1}
.px-pre-orbit i{position:absolute;width:8px;height:8px;background:var(--cyan)}
.px-pre-orbit i:nth-child(1){top:0;left:50%}.px-pre-orbit i:nth-child(2){bottom:0;left:50%;background:var(--coral)}
.px-pre-orbit i:nth-child(3){left:0;top:50%;background:var(--green)}.px-pre-orbit i:nth-child(4){right:0;top:50%;background:var(--gold)}
@keyframes pxSpin{to{transform:rotate(360deg)}}
.px-pre-bar{display:flex;gap:4px;padding:6px;border:4px solid var(--frame);opacity:0;box-shadow:4px 4px 0 #000}
.px-pre.s2 .px-pre-bar{opacity:1}
.px-pre-bar i{width:clamp(8px,2.2vw,12px);height:18px;background:var(--ln2)}
.px-pre-bar i.on{background:var(--green);box-shadow:inset 0 -4px 0 #4fb867}
.px-pre-msg{font-size:clamp(8px,2vw,11px);color:var(--tcyan);min-height:1.5em;opacity:0}
.px-pre.s2 .px-pre-msg{opacity:1}
.px-pre-pct{font-family:var(--mono);font-size:13px;color:var(--tgold);opacity:0}
.px-pre.s2 .px-pre-pct{opacity:1}
.px-pre-ready{font-size:clamp(14px,3.6vw,22px);color:var(--tgold);text-shadow:3px 3px 0 var(--purple-d);height:0;overflow:hidden;opacity:0}
.px-pre.s4 .px-pre-ready{height:auto;opacity:1;animation:pxBlink .3s steps(1) 3}
.px-pre.s4 .px-pre-msg{display:none}
@keyframes pxBlink{50%{opacity:0}}
.px-pre-stars{position:absolute;inset:0;pointer-events:none}
.px-pre-stars i{position:absolute;width:4px;height:4px;background:var(--cream);opacity:0}
.px-pre.s3 .px-pre-stars i{animation:pxTw 1s steps(2) infinite}
.px-pre-wipe{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,1fr);pointer-events:none;z-index:3}
.px-pre-wipe i{background:var(--purple);transform:scale(0);transition:transform .14s steps(2)}
.px-pre-wipe i:nth-child(odd){background:var(--purple-d)}
.px-pre.cover .px-pre-wipe i{transform:scale(1.02)}
.px-pre.reveal{background:transparent}
.px-pre.reveal>*:not(.px-pre-wipe){visibility:hidden}
.px-pre.reveal .px-pre-wipe i{transform:scale(0)}
.px-pre.gone{display:none}

/* ============ GLOBAL WORLD BG ============ */
.px-world{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(ellipse at 20% 0%,rgba(119,86,216,.22),transparent 55%),radial-gradient(ellipse at 90% 70%,rgba(85,230,233,.08),transparent 50%),var(--navy)}
.px-world::before{content:"";position:absolute;inset:-64px;background-image:linear-gradient(rgba(119,86,216,.07) 2px,transparent 2px),linear-gradient(90deg,rgba(119,86,216,.07) 2px,transparent 2px);background-size:48px 48px;transform:translateY(var(--sy,0))}
.px-world .layer{position:absolute;inset:0}
.px-world .stars i{position:absolute;width:3px;height:3px;background:var(--cream);opacity:.5;animation:pxTw 3s steps(3) infinite}
.px-world .stars i.b{width:5px;height:5px;background:var(--gold)}
@keyframes pxTw{0%,100%{opacity:.15}50%{opacity:.9}}
.px-world .floaters i{position:absolute;bottom:-20px;width:6px;height:6px;background:var(--cyan);opacity:.4;animation:pxRise linear infinite}
@keyframes pxRise{to{transform:translateY(-110vh)}}
.px-world .cloud{position:absolute;opacity:.16;animation:pxDrift linear infinite}
@keyframes pxDrift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
.px-world .shoot{position:absolute;top:12%;left:-10%;width:60px;height:3px;background:linear-gradient(90deg,transparent,var(--cream));opacity:0;animation:pxShoot 11s steps(30) infinite 4s}
@keyframes pxShoot{0%{opacity:0;transform:translate(0,0)}3%{opacity:1}12%{opacity:0;transform:translate(60vw,30vh)}100%{opacity:0;transform:translate(60vw,30vh)}}

/* ============ HUD / TOASTS / CURSOR ============ */
.px-hud{position:fixed;right:14px;bottom:14px;z-index:900;display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:rgba(11,14,28,.9);border:3px solid var(--line);box-shadow:4px 4px 0 #000;font-family:var(--pix);font-size:8px;color:var(--tx);opacity:0;transform:translateY(10px);transition:all .3s steps(3)}
.px-hud.show{opacity:1;transform:none}
.px-hud .lbl{display:flex;justify-content:space-between;gap:14px}
.px-hud .lbl b{color:var(--tgold);font-weight:400}
.px-hud .segs{display:flex;gap:3px}
.px-hud .segs i{width:14px;height:8px;background:var(--ln2)}
.px-hud .segs i.on{background:var(--cyan)}
.px-hud .segs i.cur{background:var(--gold);animation:pxBlink .8s steps(1) infinite}
.px-toasts{position:fixed;left:14px;bottom:14px;z-index:4000;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:calc(100vw - 28px)}
.px-toast{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--pn2);border:3px solid var(--gold);box-shadow:4px 4px 0 #000;font-family:var(--pix);font-size:9px;line-height:1.6;color:var(--tx);max-width:360px;animation:pxToastIn .35s steps(4)}
.px-toast small{display:block;color:var(--tgold);font-size:7px}
.px-toast.out{animation:pxToastOut .3s steps(3) forwards}
@keyframes pxToastIn{from{transform:translateX(-120%)}}
@keyframes pxToastOut{to{transform:translateX(-130%)}}
.px-cursor{position:fixed;left:0;top:0;z-index:100000;pointer-events:none;display:none}
html.px-cursor-on .px-cursor{display:block}
html.px-cursor-on,html.px-cursor-on body,html.px-cursor-on a,html.px-cursor-on button,html.px-cursor-on [role=button],html.px-cursor-on summary{cursor:none!important}
html.px-cursor-on input,html.px-cursor-on textarea,html.px-cursor-on select{cursor:auto!important}
.px-cursor .tag{position:absolute;left:22px;top:20px;font-family:var(--pix);font-size:7px;color:var(--navy);background:var(--gold);padding:4px 5px;white-space:nowrap;opacity:0;transform:scale(.6);transition:all .12s steps(2)}
.px-cursor.has-tag .tag{opacity:1;transform:none}
.px-cursor.hide{opacity:0}

/* ============ HERO ============ */
.px-hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-top:110px!important;overflow:hidden}
.px-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center;width:100%}
.px-lv-chip{display:inline-flex;align-items:center;gap:10px;font-family:var(--pix);font-size:10px;color:var(--navy);background:var(--green);padding:8px 10px;box-shadow:4px 4px 0 #000;margin-bottom:26px}
.px-hero h1{font-family:var(--pix);font-size:clamp(20px,3.6vw,40px);line-height:1.45;color:var(--tx)}
.px-hero h1 .ln{display:block}
.px-hero h1 .ln2{color:var(--tgold);text-shadow:4px 4px 0 var(--purple-d);margin-top:10px}
.px-hero h1 .ch{display:inline-block;opacity:0}
.px-hero.on h1 .ch{animation:pxCh .01s steps(1) forwards}
@keyframes pxCh{to{opacity:1}}
.px-typer{margin-top:24px;font-family:var(--pix);font-size:clamp(10px,1.5vw,14px);color:var(--tcyan);min-height:2.4em;display:flex;align-items:center;gap:4px}
.px-typer .caret{display:inline-block;width:.8em;height:1.1em;background:var(--cyan);animation:pxBlink .8s steps(1) infinite}
.px-hero .intro{margin-top:18px;max-width:56ch;color:var(--tx2);font-size:clamp(16px,1.3vw,18px)}
.px-hero .ctas{display:flex;flex-wrap:wrap;gap:22px;margin-top:34px}
.px-hero .fade{opacity:0;transform:translateY(8px)}
.px-hero.on .fade{opacity:1;transform:none;transition:opacity .4s steps(4),transform .4s steps(4)}
.px-portal{position:relative;aspect-ratio:4/5;width:100%;max-width:470px;justify-self:center}
.px-portal .par{position:absolute;inset:0;transition:transform .25s ease-out}
.px-portal .glow{inset:8%;background:radial-gradient(circle,rgba(119,86,216,.65),rgba(85,230,233,.15) 55%,transparent 70%);filter:blur(10px)}
.px-portal .rings{display:grid;place-items:center}
.px-portal .rings i{position:absolute;border:4px dashed var(--purple);width:var(--s);aspect-ratio:1;opacity:0;animation:pxSpin calc(var(--d)*1s) steps(36) infinite}
.px-hero.on .px-portal .rings i{opacity:.55;transition:opacity .4s steps(4) .3s}
.px-portal .frame{position:absolute;inset:6% 8%;background:linear-gradient(180deg,#221a4a,#0f1230)}
.px-portal .frame::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(85,230,233,.1) 2px,transparent 2px),linear-gradient(90deg,rgba(85,230,233,.1) 2px,transparent 2px);background-size:24px 24px}
.px-portal .photo{position:absolute;inset:6% 8%;overflow:hidden;clip-path:circle(0% at 50% 60%);z-index:2}
.px-hero.on .px-portal .photo{animation:pxPortal 1.1s steps(10) .35s forwards}
@keyframes pxPortal{to{clip-path:circle(85% at 50% 60%)}}
.px-portal .photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.px-portal .corners i{position:absolute;width:28px;height:28px;border:6px solid var(--cyan);z-index:3;animation:pxCorner 1.6s steps(2) infinite}
.px-portal .corners i:nth-child(1){top:3%;left:5%;border-right:0;border-bottom:0}
.px-portal .corners i:nth-child(2){top:3%;right:5%;border-left:0;border-bottom:0;animation-delay:.4s}
.px-portal .corners i:nth-child(3){bottom:3%;left:5%;border-right:0;border-top:0;animation-delay:.8s}
.px-portal .corners i:nth-child(4){bottom:3%;right:5%;border-left:0;border-top:0;animation-delay:1.2s;border-color:var(--gold)}
@keyframes pxCorner{50%{transform:scale(1.15)}}
.px-portal .parts i{position:absolute;width:8px;height:8px;background:var(--gold);z-index:3;animation:pxFloat 3s steps(6) infinite}
@keyframes pxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.px-portal .tagname{position:absolute;left:-2%;bottom:9%;z-index:4;font-family:var(--pix);font-size:9px;line-height:1.7;background:var(--pn2);border:3px solid var(--frame);padding:8px 10px;box-shadow:4px 4px 0 #000}
.px-portal .tagname b{color:var(--tgreen);font-weight:400}
.px-hero-ground{position:absolute;left:0;right:0;bottom:0;height:34px;z-index:1;background:
  repeating-linear-gradient(90deg,#2b3a2b 0 16px,#334a33 16px 32px);border-top:6px solid #4fb867}
.px-walker{position:absolute;bottom:34px;left:0;z-index:2;animation:pxWalk 22s linear infinite}
@keyframes pxWalk{from{transform:translateX(-60px)}to{transform:translateX(calc(100vw + 60px))}}
.px-hero-stars i{position:absolute;width:6px;height:6px;background:var(--cream);animation:pxTw 2.4s steps(3) infinite}
.px-egg{position:absolute;right:clamp(10px,4vw,48px);top:96px;z-index:3;background:none;border:0;padding:6px;cursor:pointer;opacity:.8;transition:transform .1s steps(1)}
.px-egg:hover{opacity:1}
.px-egg:active{transform:translateY(3px)}
.px-coin{position:fixed;top:-20px;z-index:4500;pointer-events:none;animation:pxCoin 1.8s steps(18) forwards}
@keyframes pxCoin{to{transform:translateY(110vh) rotate(360deg)}}
.px-secret{position:fixed;left:50%;top:40%;z-index:4600;transform:translate(-50%,-50%);font-family:var(--pix);font-size:clamp(12px,3vw,20px);text-align:center;line-height:1.8;color:var(--tgold);background:var(--pn2);border:4px solid var(--gold);padding:18px 22px;box-shadow:8px 8px 0 #000;animation:pxPop .3s steps(3)}
@keyframes pxPop{from{transform:translate(-50%,-50%) scale(.2)}}

/* ============ ABOUT ============ */
.px-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
.px-profile{padding:28px}
.px-profile dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 22px;font-family:var(--mono);font-size:14px}
.px-profile dt{color:var(--tcyan)}
.px-profile dd{margin:0;color:var(--tx)}
.px-profile .copy p+p{margin-top:14px}
.px-profile .copy p{color:var(--tx2)}
.px-cards{position:relative;height:clamp(500px,48vw,620px)}
.px-card{position:absolute;width:41%;aspect-ratio:3/4;padding:10px 10px 34px;background:var(--cream);border:0;cursor:pointer;box-shadow:6px 6px 0 #000;
  transform:translate(var(--mx,0),var(--my,0)) rotate(var(--r));transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .2s;opacity:0}
.px-card.in{opacity:1;animation:pxDeal .6s steps(6) both}
@keyframes pxDeal{from{transform:translate(0,60px) rotate(0) scale(.6);opacity:0}}
.px-card img{width:100%;height:100%;object-fit:cover;object-position:center top;background:#ddd}
.px-card .cap{position:absolute;left:10px;right:10px;bottom:9px;font-family:var(--pix);font-size:8px;color:var(--navy);text-align:left}
.px-card .sel{position:absolute;inset:-8px;pointer-events:none;opacity:0;border:4px dashed var(--gold)}
.px-card:hover,.px-card:focus-visible{z-index:5;transform:translate(var(--mx,0),calc(var(--my,0) - 18px)) rotate(0) scale(1.06);box-shadow:14px 18px 0 rgba(0,0,0,.7)}
.px-card:hover .sel,.px-card:focus-visible .sel{opacity:1;animation:pxBlink .5s steps(1) 2}
.px-card:nth-child(1){left:2%;top:2%;--r:-5deg}
.px-card:nth-child(2){right:2%;top:6%;--r:4deg}
.px-card:nth-child(3){left:6%;bottom:2%;--r:3deg}
.px-card:nth-child(4){right:6%;bottom:0;--r:-4deg}
.px-cards .hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;font-family:var(--pix);font-size:8px;color:var(--navy);background:var(--gold);padding:6px 8px;box-shadow:3px 3px 0 #000;pointer-events:none}
.px-console{margin-top:28px;padding:20px}
.px-console h3{font-family:var(--pix);font-size:10px;color:var(--tgold);margin-bottom:14px}
.px-console ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.px-console a{display:flex;align-items:center;gap:14px;padding:12px;background:var(--slot);border:3px solid var(--line);color:var(--tx);text-decoration:none;font-family:var(--mono);font-size:14px;transition:border-color .15s steps(2),transform .15s steps(2)}
.px-console a:hover,.px-console a:focus-visible{border-color:var(--cyan);transform:translateX(4px)}
.px-console a small{display:block;font-family:var(--pix);font-size:8px;color:var(--tcyan);margin-bottom:4px}
.px-console .ic-fb{animation:pxHop 1.4s steps(4) infinite}
@keyframes pxHop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
.px-console .ic-ig{animation:pxGlow 1.6s steps(4) infinite}
@keyframes pxGlow{50%{filter:drop-shadow(0 0 6px var(--coral))}}
.px-console .ic-em{position:relative;animation:pxFloat 2.4s steps(6) infinite}
.px-console .ic-em::after{content:"";position:absolute;right:-4px;top:-4px;width:8px;height:8px;background:var(--coral);animation:pxBlink 1s steps(1) infinite}

/* ============ ADVANTAGES ============ */
.px-adv{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.px-trait{padding:28px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;opacity:0}
.px-trait.in{opacity:1;animation:pxAssemble .7s steps(7) backwards}
@keyframes pxAssemble{0%{clip-path:inset(0 0 100% 0)}100%{clip-path:inset(0 0 0 0)}}
.px-trait .badge{width:72px;height:72px;display:grid;place-items:center;background:var(--slot);border:4px solid var(--line);transition:border-color .2s steps(2),background .2s steps(2)}
.px-trait:hover .badge{border-color:var(--gold);background:var(--sel)}
.px-trait:hover .badge .art{animation:pxHop .6s steps(3) 2}
.px-trait .num{font-family:var(--mono);font-size:12px;color:var(--tcyan)}
.px-trait h3{font-family:var(--pix);font-size:13px;line-height:1.6;margin:6px 0 12px;color:var(--tx)}
.px-trait p{color:var(--tx2);font-size:16px}
.px-trait .meter{display:flex;gap:4px;margin-top:16px}
.px-trait .meter i{width:16px;height:6px;background:var(--ln2)}
.px-trait.in .meter i{animation:pxLit .2s steps(1) forwards}
@keyframes pxLit{to{background:var(--green)}}
.px-trait .unlocked{font-family:var(--pix);font-size:8px;color:var(--tgreen);margin-left:8px;opacity:0}
.px-trait.in .unlocked{opacity:1;transition:opacity .2s steps(1) 1.4s}
.px-trait:hover{outline:4px solid var(--purple);outline-offset:-4px}

/* ============ ACHIEVEMENTS ============ */
.px-inv{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.px-cert{position:relative;padding:14px 14px 18px;background:linear-gradient(180deg,#1d2245,var(--pn2));border:4px solid var(--line);box-shadow:6px 6px 0 #05070f;cursor:pointer;text-align:left;color:var(--tx);font:inherit;opacity:0;transition:border-color .15s steps(2),transform .2s steps(2)}
.px-cert.in{opacity:1;animation:pxRevealPix .8s steps(8) both}
@keyframes pxRevealPix{from{clip-path:inset(50% 50% 50% 50%)}to{clip-path:inset(0 0 0 0)}}
.px-cert::before{content:"";position:absolute;top:-4px;right:-4px;width:28px;height:28px;background:linear-gradient(225deg,var(--gold) 50%,transparent 50%);z-index:2}
.px-cert .shot{aspect-ratio:4/3;background:#0b0e1c;display:grid;place-items:center;overflow:hidden;border:3px solid #0b0e1c}
.px-cert .shot img{width:100%;height:100%;object-fit:contain;transition:transform .3s}
.px-cert .meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:14px}
.px-cert .meta h3{font-family:var(--pix);font-size:10px;line-height:1.6}
.px-cert .meta span{font-family:var(--mono);font-size:12px;color:var(--tgold)}
.px-cert .tip{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.6);opacity:0;font-family:var(--pix);font-size:8px;background:var(--gold);color:var(--navy);padding:7px 9px;box-shadow:3px 3px 0 #000;transition:all .15s steps(3);pointer-events:none;z-index:3}
.px-cert:hover,.px-cert:focus-visible{border-color:var(--gold);transform:translateY(-6px)}
.px-cert:hover .tip,.px-cert:focus-visible .tip{opacity:1;transform:translate(-50%,-50%);animation:pxFloat 1.2s steps(4) infinite .2s}
.px-cert:hover .shot img{transform:scale(1.04)}
.px-cert:hover{box-shadow:0 0 0 4px var(--gold-d),6px 6px 0 4px #05070f}

/* ============ EDUCATION ============ */
.px-edu{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,60px);align-items:center}
.px-map{position:relative;aspect-ratio:5/4;background:#1a3a3a;border:4px solid var(--frame);box-shadow:8px 8px 0 #000;overflow:hidden;
  background-image:linear-gradient(rgba(0,0,0,.15) 2px,transparent 2px),linear-gradient(90deg,rgba(0,0,0,.15) 2px,transparent 2px);background-size:20px 20px}
.px-map .water{position:absolute;right:-6%;top:-8%;width:42%;height:40%;background:#1e4f7a;box-shadow:inset 0 0 0 8px #255f92}
.px-map svg.path{position:absolute;inset:0;width:100%;height:100%}
.px-map svg.path path{fill:none;stroke:var(--gold);stroke-width:6;stroke-dasharray:6 10;stroke-linecap:square}
.px-map .reveal-path{stroke-dashoffset:0}
.px-map .mask-path{stroke:#1a3a3a!important;stroke-dasharray:1200!important;stroke-dashoffset:0;stroke-width:12!important}
.px-edu.in .px-map .mask-path{animation:pxDraw 2.2s steps(22) forwards}
@keyframes pxDraw{to{stroke-dashoffset:-1200}}
.px-map .node{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--pix);font-size:7px;color:var(--tx);text-align:center;opacity:0}
.px-edu.in .px-map .node{opacity:1;transition:opacity .2s steps(1) var(--dl)}
.px-map .node b{font-weight:400;background:var(--pn2);padding:4px 5px;border:2px solid var(--line)}
.px-map .check{z-index:3}
.px-map .check b{background:var(--gold);color:var(--navy);border-color:#000;animation:pxBlink 1s steps(1) infinite 2.4s}
.px-map .tree{position:absolute}
.px-map .platform{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);width:44%;display:flex;flex-direction:column;align-items:center}
.px-map .platform .logo{width:62%;aspect-ratio:1;background:var(--cream);padding:8px;border:4px solid #000;transform:translateY(40px);opacity:0;box-shadow:4px 4px 0 #000}
.px-map .platform .logo img{width:100%;height:100%;object-fit:contain}
.px-edu.in .px-map .platform .logo{animation:pxRiseUp .8s steps(6) 1.3s forwards}
@keyframes pxRiseUp{to{transform:none;opacity:1}}
.px-map .platform .base{width:100%;height:16px;background:repeating-linear-gradient(90deg,#8a5a3a 0 12px,#a06a44 12px 24px);border-top:4px solid #4fb867;box-shadow:0 4px 0 #000}
.px-edu-info{display:flex;flex-direction:column;gap:20px}
.px-polaroid{position:relative;background:var(--cream);padding:12px 12px 40px;box-shadow:8px 8px 0 #000;transform:rotate(-2deg);max-width:520px}
.px-polaroid img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:brightness(2.2) sepia(1) contrast(.4);transition:filter 2.4s steps(12) .4s}
.px-edu.in .px-polaroid img{filter:none}
.px-polaroid figcaption{position:absolute;left:14px;bottom:10px;font-family:var(--pix);font-size:8px;color:var(--navy)}
.px-polaroid .cap{position:absolute;right:-18px;top:-26px;animation:pxFloat 2.6s steps(6) infinite}
.px-degree{padding:24px}
.px-degree h3{font-family:var(--pix);font-size:clamp(11px,1.4vw,14px);line-height:1.7;color:var(--tgold)}
.px-degree .major{font-family:var(--mono);font-size:14px;color:var(--tcyan);margin:10px 0 14px}
.px-degree p{color:var(--tx2);font-size:16px}
.px-banner{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;font-family:var(--pix);font-size:clamp(9px,1.2vw,11px);line-height:1.6;color:var(--navy);background:var(--gold);padding:12px 16px;box-shadow:inset -4px -4px 0 var(--gold-d),6px 6px 0 #000;transform:scaleX(0);transform-origin:left}
.px-edu.in .px-banner{animation:pxBanner .6s steps(6) 2.3s forwards}
@keyframes pxBanner{to{transform:scaleX(1)}}

/* ============ TECH STACK ============ */
.px-tabs{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px}
.px-tab{font-family:var(--pix);font-size:10px;padding:14px 16px;background:var(--pn);color:var(--tx);border:4px solid var(--line);cursor:pointer;box-shadow:4px 4px 0 #000;transition:transform .08s steps(1)}
.px-tab:hover{border-color:var(--cyan)}
.px-tab:active{transform:translate(3px,3px)}
.px-tab[aria-selected=true]{background:var(--purple);border-color:var(--frame);animation:pxPulse 1.2s steps(3) infinite}
@keyframes pxPulse{50%{box-shadow:0 0 0 4px rgba(85,230,233,.5),4px 4px 0 #000}}
.px-inv-wrap{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.px-slots-box{padding:20px;position:relative;overflow:hidden;min-height:340px}
.px-slots-box .deco{position:absolute;right:12px;top:10px;display:flex;gap:8px;opacity:.5}
.px-slots-box .note{font-family:var(--mono);font-size:13px;color:var(--tx3);margin-bottom:16px;padding-right:110px}
.px-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.px-slot{position:relative;width:100%;min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px 6px;background:var(--slot);border:3px solid var(--ln);color:var(--tx);cursor:pointer;font:inherit;text-align:center;
  box-shadow:inset 0 0 0 3px var(--slot),inset 0 0 0 5px #1a1f40;transition:border-color .12s steps(2)}
.px-slot .mono{width:44px;height:44px;display:grid;place-items:center;font-family:var(--pix);font-size:11px;color:var(--navy);background:var(--c,var(--cyan));box-shadow:inset -4px -4px 0 rgba(0,0,0,.25),inset 4px 4px 0 rgba(255,255,255,.3)}
.px-slot .nm{font-family:var(--body);font-size:12.5px;line-height:1.3;font-weight:500}
.px-slot:hover,.px-slot:focus-visible{border-color:var(--cyan)}
.px-slot[aria-pressed=true]{border-color:var(--gold);background:var(--sel)}
.px-slot[aria-pressed=true]::after{content:"";position:absolute;inset:-7px;border:3px dashed var(--gold);animation:pxBlink 1s steps(1) infinite;pointer-events:none}
.px-slot.asm{animation:pxSlotIn .45s steps(5) both}
@keyframes pxSlotIn{0%{transform:scale(.2);opacity:0;clip-path:inset(40% 40% 40% 40%)}100%{transform:none;opacity:1;clip-path:inset(0 0 0 0)}}
.px-slot.dis{animation:pxSlotOut .28s steps(4) forwards}
@keyframes pxSlotOut{to{transform:scale(.4);opacity:0;filter:blur(2px)}}
.px-slot .tt{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:200px;z-index:5;font-family:var(--body);font-size:13px;line-height:1.45;padding:10px;background:var(--cream);color:var(--navy);box-shadow:4px 4px 0 #000;opacity:0;pointer-events:none;transition:opacity .12s steps(2)}
.px-slot:hover .tt,.px-slot:focus-visible .tt{opacity:1}
.px-spark{position:absolute;width:6px;height:6px;pointer-events:none;z-index:4;animation:pxSpark .55s steps(5) forwards}
@keyframes pxSpark{to{transform:translate(var(--dx),var(--dy));opacity:0}}
.px-equip{padding:22px;position:sticky;top:90px}
.px-equip h3{font-family:var(--pix);font-size:10px;color:var(--tgold);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.px-equip h3::before{content:"";width:8px;height:8px;background:var(--green);animation:pxBlink 1s steps(1) infinite}
.px-equip .big{width:84px;height:84px;display:grid;place-items:center;font-family:var(--pix);font-size:18px;color:var(--navy);background:var(--c,var(--cyan));box-shadow:inset -6px -6px 0 rgba(0,0,0,.25),inset 6px 6px 0 rgba(255,255,255,.3),6px 6px 0 #000;margin-bottom:18px}
.px-equip.swap .big,.px-equip.swap .body{animation:pxSwap .35s steps(4)}
@keyframes pxSwap{0%{opacity:0;transform:translateX(-12px)}}
.px-equip .tn{font-family:var(--pix);font-size:12px;line-height:1.6;color:var(--tx)}
.px-equip .cat{font-family:var(--mono);font-size:12px;color:var(--tcyan);margin:6px 0 14px}
.px-equip dl{margin:0;display:grid;gap:12px}
.px-equip dt{font-family:var(--pix);font-size:8px;color:var(--tgold);margin-bottom:4px}
.px-equip dd{margin:0;font-size:15px;color:var(--tx2)}

/* ============ SKILL TREE ============ */
.px-tree-wrap{display:grid;grid-template-columns:1fr 330px;gap:28px;align-items:center}
.px-tree{position:relative;aspect-ratio:1/0.82;min-height:460px}
.px-tree svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.px-tree svg line{stroke:var(--ln);stroke-width:6;stroke-dasharray:8 6}
.px-tree svg line.lit{stroke:var(--purple);transition:stroke .2s steps(2)}
.px-tree svg line.act{stroke:var(--cyan)}
.px-tree .center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:120px;display:grid;place-items:center;background:var(--pn2);border:4px solid var(--gold);box-shadow:0 0 0 6px var(--bgc),0 0 0 10px var(--purple),8px 8px 0 10px #000;z-index:2}
.px-tree .center span{position:absolute;bottom:-34px;font-family:var(--pix);font-size:8px;color:var(--tgold);white-space:nowrap}
.px-tree .node{position:absolute;left:var(--nx);top:var(--ny);transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;color:var(--tx);cursor:pointer;padding:4px;font:inherit;opacity:.35;transition:opacity .2s steps(2)}
.px-tree .node.lit{opacity:1}
.px-tree.has-act .node.lit{opacity:.5}
.px-tree.has-act .node.act{opacity:1}
.px-tree .node .orb{width:64px;height:64px;display:grid;place-items:center;background:var(--slot);border:4px solid var(--line);transition:all .15s steps(2)}
.px-tree .node.lit .orb{border-color:var(--purple);box-shadow:0 0 0 4px rgba(119,86,216,.25)}
.px-tree .node.act .orb,.px-tree .node:hover .orb,.px-tree .node:focus-visible .orb{border-color:var(--cyan);background:var(--sel);box-shadow:0 0 0 4px rgba(85,230,233,.35),0 0 24px rgba(85,230,233,.4)}
.px-tree .node .lb{font-family:var(--pix);font-size:8px;line-height:1.5;text-align:center;max-width:120px;background:var(--bgc);padding:2px 4px}
.px-tree .node .desc{display:none}
.px-tree .runner{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--gold);z-index:1;animation:pxRun 2.4s steps(12) infinite;animation-delay:var(--rd);opacity:0}
.px-tree.on .runner{opacity:1}
@keyframes pxRun{0%{transform:translate(0,0)}100%{transform:translate(var(--dx),var(--dy))}}
.px-dialog{padding:24px;min-height:220px}
.px-dialog .who{font-family:var(--pix);font-size:8px;color:var(--tcyan);margin-bottom:12px}
.px-dialog h3{font-family:var(--pix);font-size:13px;line-height:1.6;color:var(--tgold);margin-bottom:12px}
.px-dialog p{color:var(--tx2)}
.px-dialog .more{margin-top:16px;font-family:var(--pix);font-size:8px;color:var(--tx);animation:pxBlink 1s steps(1) infinite}
.px-dialog.swap{animation:pxSwap .3s steps(3)}

/* ============ SERVICES ============ */
.px-svc-head .big{font-family:var(--pix);font-size:clamp(14px,2.2vw,22px);line-height:1.6;color:var(--tgold);margin-top:20px}
.px-quests{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.px-quest{grid-column:span 2;position:relative;display:flex;flex-direction:column;padding:0;overflow:hidden;opacity:0}
.px-quest:nth-child(4){grid-column:2/span 2}
.px-quest.in{opacity:1;animation:pxQuestIn .6s steps(6) both}
@keyframes pxQuestIn{from{transform:translateY(40px) scale(.95);opacity:0}}
.px-quest .scene{position:relative;height:130px;overflow:hidden;background:var(--sc);border-bottom:4px solid #000}
.px-quest .scene::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.12) 2px,transparent 2px),linear-gradient(90deg,rgba(0,0,0,.12) 2px,transparent 2px);background-size:16px 16px}
.px-quest .scene .gnd{position:absolute;left:0;right:0;bottom:0;height:18px;background:var(--gc);border-top:4px solid rgba(255,255,255,.25)}
.px-quest .scene .icon{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);transition:transform .25s steps(3)}
.px-quest .scene .bits i{position:absolute;width:8px;height:8px;background:var(--gold);opacity:0;transition:all .3s steps(3)}
.px-quest .scene .bits i:nth-child(1){left:30%;top:20%}.px-quest .scene .bits i:nth-child(2){left:68%;top:24%}
.px-quest .scene .bits i:nth-child(3){left:26%;top:58%}.px-quest .scene .bits i:nth-child(4){left:72%;top:60%}
.px-quest .scene .hero{position:absolute;bottom:18px;left:6px;transition:transform .6s steps(6)}
.px-quest .scene .say{position:absolute;right:10px;top:10px;max-width:58%;font-family:var(--pix);font-size:7px;line-height:1.6;background:var(--cream);color:var(--navy);padding:6px 8px;box-shadow:3px 3px 0 #000;opacity:0;transform:scale(.6);transform-origin:right top;transition:all .2s steps(3)}
.px-quest:hover .scene .hero,.px-quest:focus-within .scene .hero{transform:translateX(calc(var(--w,300px) * .28))}
.px-quest:hover .scene .icon,.px-quest:focus-within .scene .icon{transform:translate(-50%,-62%) scale(1.1)}
.px-quest:hover .scene .bits i,.px-quest:focus-within .scene .bits i{opacity:1}
.px-quest:hover .scene .bits i:nth-child(1){transform:translate(14px,10px)}.px-quest:hover .scene .bits i:nth-child(2){transform:translate(-14px,8px)}
.px-quest:hover .scene .bits i:nth-child(3){transform:translate(12px,-8px)}.px-quest:hover .scene .bits i:nth-child(4){transform:translate(-12px,-8px)}
.px-quest:hover .scene .say,.px-quest:focus-within .scene .say{opacity:1;transform:none}
.px-quest:hover,.px-quest:focus-within{border-color:var(--gold)}
.px-quest .qb{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.px-quest .qn{font-family:var(--mono);font-size:12px;color:var(--tcyan)}
.px-quest h3{font-family:var(--pix);font-size:11px;line-height:1.7;color:var(--tx);transition:transform .2s steps(2)}
.px-quest:hover h3{transform:translateY(-3px);color:var(--tgold)}
.px-quest p{font-size:15.5px;color:var(--tx2)}
.px-quest details{border-top:3px dashed var(--line);padding-top:10px}
.px-quest summary{font-family:var(--pix);font-size:8px;color:var(--tgold);cursor:pointer;list-style:none;padding:6px 0}
.px-quest summary::-webkit-details-marker{display:none}
.px-quest summary::before{content:"+ "}
.px-quest details[open] summary::before{content:"− "}
.px-quest ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:14.5px;color:var(--tx2)}
.px-quest ul li::before{content:"■ ";color:var(--tgreen);font-size:10px}
.px-quest .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:auto;padding-top:10px}

/* ============ MODALS ============ */
.px-modal{position:fixed;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;padding:16px}
.px-modal.open{display:flex}
.px-modal .dim{position:absolute;inset:0;background:rgba(6,8,18,.88);background-image:radial-gradient(rgba(119,86,216,.25) 2px,transparent 2px);background-size:12px 12px;animation:pxDim .3s steps(4)}
@keyframes pxDim{from{opacity:0}}
.px-modal .box{position:relative;z-index:1;animation:pxBoxIn .35s steps(5)}
@keyframes pxBoxIn{from{clip-path:inset(48% 0 48% 0)}to{clip-path:inset(0 0 0 0)}}
.px-viewer .box{width:min(1100px,100%);height:min(88vh,860px);display:flex;flex-direction:column;background:var(--pn2);border:4px solid var(--frame);box-shadow:8px 8px 0 #000}
.px-viewer .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:4px solid var(--line);flex-wrap:wrap}
.px-viewer .bar h2{font-family:var(--pix);font-size:10px;line-height:1.6;color:var(--tgold)}
.px-viewer .bar .count{font-family:var(--mono);font-size:12px;color:var(--tcyan);margin-left:8px}
.px-viewer .tools{display:flex;gap:6px;flex-wrap:wrap}
.px-ib{min-width:40px;height:40px;padding:0 10px;font-family:var(--pix);font-size:10px;color:var(--navy);background:var(--cyan);border:0;cursor:pointer;box-shadow:inset -3px -3px 0 var(--cyan-d),3px 3px 0 #000}
.px-ib:active{transform:translate(3px,3px);box-shadow:inset 3px 3px 0 var(--cyan-d)}
.px-ib.x{background:var(--coral);box-shadow:inset -3px -3px 0 #c95264,3px 3px 0 #000}
.px-ib:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.px-viewer .stage{position:relative;flex:1;overflow:hidden;touch-action:none;cursor:grab;background:#05070f;background-image:linear-gradient(45deg,#0b0e1c 25%,transparent 25%,transparent 75%,#0b0e1c 75%),linear-gradient(45deg,#0b0e1c 25%,transparent 25%,transparent 75%,#0b0e1c 75%);background-size:24px 24px;background-position:0 0,12px 12px}
.px-viewer .stage.drag{cursor:grabbing}
.px-viewer .stage img{position:absolute;left:50%;top:50%;max-width:94%;max-height:94%;transform-origin:center;user-select:none;-webkit-user-drag:none;transition:transform .15s ease-out}
.px-viewer .stage.drag img,.px-viewer .stage.pinch img{transition:none}
.px-viewer .stage .nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.px-viewer .stage .nav.prev{left:10px}.px-viewer .stage .nav.next{right:10px}
.px-viewer .foot{padding:8px 12px;font-family:var(--mono);font-size:12px;color:var(--tx3);border-top:4px solid var(--line)}
.px-viewer .stage .loading{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--pix);font-size:9px;color:var(--tcyan)}
.px-qmodal .box{width:min(720px,100%);max-height:88vh;overflow:auto;background:var(--pn);border:4px solid var(--gold);box-shadow:8px 8px 0 #000;padding:clamp(20px,4vw,34px)}
.px-qmodal .x-wrap{position:absolute;right:12px;top:12px}
.px-qmodal .qlabel{font-family:var(--mono);font-size:13px;color:var(--tcyan)}
.px-qmodal h2{font-family:var(--pix);font-size:clamp(12px,2vw,16px);line-height:1.7;margin:10px 50px 10px 0;color:var(--tx)}
.px-qmodal .tag{font-family:var(--pix);font-size:9px;color:var(--tgold);margin-bottom:16px;line-height:1.6}
.px-qmodal p{color:var(--tx2)}
.px-qmodal h3{font-family:var(--pix);font-size:9px;color:var(--tgreen);margin:22px 0 10px}
.px-qmodal ul{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.px-qmodal li{font-size:15px;color:var(--tx2)}
.px-qmodal li::before{content:"■ ";color:var(--tgold);font-size:10px}
.px-qmodal .fine{font-size:13px;color:var(--tx3);margin-top:16px}

/* ============ CONTACT ============ */
.px-contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,60px);align-items:start}
.px-contact .big{font-family:var(--pix);font-size:clamp(16px,2.6vw,26px);line-height:1.6;color:var(--tgold);text-shadow:4px 4px 0 var(--purple-d);margin-bottom:18px}
.px-contact .lead{color:var(--tx2);max-width:48ch}
.px-clinks{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}
.px-clinks a{display:flex;align-items:center;gap:14px;color:var(--tx);text-decoration:none;font-family:var(--mono);font-size:14px;word-break:break-all}
.px-clinks a:hover{color:var(--tcyan)}
.px-clinks a .art{flex-shrink:0}
.px-form{padding:clamp(20px,3vw,30px);position:relative;overflow:hidden}
.px-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.px-field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.px-field label{font-family:var(--pix);font-size:9px;color:var(--tcyan)}
.px-field input,.px-field select,.px-field textarea{width:100%;font-family:var(--body);font-size:16px;color:var(--tx);background:var(--slot);border:3px solid var(--ln);padding:12px;border-radius:0;outline:none;transition:border-color .12s steps(2)}
.px-field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cyan) 50%),linear-gradient(135deg,var(--cyan) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.px-field textarea{min-height:140px;resize:vertical}
.px-field input:focus,.px-field select:focus,.px-field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,218,120,.25)}
.px-field .err{font-size:13px;color:var(--coral);min-height:0}
.px-field.bad input,.px-field.bad select,.px-field.bad textarea{border-color:var(--coral)}
.px-field select option{background:var(--slot);color:var(--tx)}
.px-form .submit{width:100%}
.px-form .submit .dots{display:none;gap:4px}
.px-form .submit .dots i{width:8px;height:8px;background:var(--bgc);animation:pxBlink .6s steps(1) infinite}
.px-form .submit .dots i:nth-child(2){animation-delay:.2s}.px-form .submit .dots i:nth-child(3){animation-delay:.4s}
.px-form.sending .submit .dots{display:inline-flex}
.px-form.sending .submit .lbl{display:none}
.px-form .fly{position:absolute;left:-60px;top:40%;z-index:3;pointer-events:none;opacity:0}
.px-form.sending .fly{animation:pxFly 1.1s steps(11) forwards}
@keyframes pxFly{0%{opacity:1;transform:translate(0,0)}50%{transform:translate(calc(50vw - 100px),-40px)}100%{opacity:1;transform:translate(calc(100vw),-10px)}}
.px-status{margin-top:16px;font-size:15px;line-height:1.55;padding:12px 14px;border:3px solid var(--line);background:var(--slot);display:none}
.px-status.show{display:block}
.px-status.ok{border-color:var(--green)}
.px-status.warn{border-color:var(--gold)}
.px-status.bad{border-color:var(--coral)}
.px-status b{font-family:var(--pix);font-size:9px;display:block;margin-bottom:6px;font-weight:400}
.px-form .fine{font-size:13px;color:var(--tx3);margin-top:12px}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .px-inv-wrap,.px-tree-wrap{grid-template-columns:1fr}
  .px-equip{position:relative;top:0}
  .px-quests{grid-template-columns:1fr 1fr}
  .px-quest,.px-quest:nth-child(4){grid-column:auto}
  .px-quest:nth-child(5){grid-column:1/-1}
}
@media (max-width:860px){
  .pxv{font-size:16px}
  .px-hero .wrap,.px-about-grid,.px-edu,.px-contact{grid-template-columns:1fr}
  .px-hero{padding-top:96px!important}
  .px-portal{max-width:270px;order:-1}
  .px-adv{grid-template-columns:1fr}
  .px-inv{grid-template-columns:1fr 1fr;gap:16px}
  .px-hud{display:none}
  .px-egg{top:78px}
}
@media (max-width:720px){
  .px-tree{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column;gap:0;padding-left:20px}
  .px-tree svg,.px-tree .runner{display:none}
  .px-tree .center{position:relative;left:auto;top:auto;transform:none;width:84px;height:84px;margin:0 0 40px 0}
  .px-tree .center span{bottom:-26px;left:0}
  .px-tree::before{content:"";position:absolute;left:50px;top:84px;bottom:30px;width:6px;background:repeating-linear-gradient(180deg,var(--purple) 0 8px,transparent 8px 14px)}
  .px-tree .node{position:relative;left:auto;top:auto;transform:none;flex-direction:row;align-items:flex-start;gap:14px;width:100%;text-align:left;margin-bottom:14px}
  .px-tree.has-act .node.lit{opacity:1}
  .px-tree .node .orb{width:64px;height:64px;flex-shrink:0}
  .px-tree .node .txt{display:flex;flex-direction:column;gap:8px;padding-top:10px}
  .px-tree .node .lb{max-width:none;text-align:left;font-size:9px}
  .px-tree .node.act .desc{display:block;font-size:15px;line-height:1.55;color:var(--tx2);background:var(--pn);border:3px solid var(--line);padding:10px}
  .px-dialog{display:none}
  .px-quests{grid-template-columns:1fr}
  .px-quest:nth-child(5){grid-column:auto}
  .px-qmodal ul{grid-template-columns:1fr}
  .px-form .row{grid-template-columns:1fr}
  .px-cards{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .px-card{position:relative;width:100%;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;--mx:0!important;--my:0!important}
  .px-cards .hint{display:none}
}
@media (max-width:520px){
  .px-inv{grid-template-columns:1fr}
  .px-hero .ctas .pbtn{width:100%}
  .px-trait{grid-template-columns:1fr}
  .px-polaroid .cap{right:-4px}
  .px-world .clouds{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pxv *,.pxv *::before,.pxv *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .px-walker,.px-world .floaters,.px-world .shoot,.px-tree .runner,.px-world .cloud{display:none}
  .pxv .px-card,.pxv .px-cert,.pxv .px-quest,.px-hero .fade,.px-hero h1 .ch{opacity:1!important}
  .pxv .px-trait{opacity:1!important}
  .px-map .platform .logo{opacity:1!important;transform:none!important}
  .px-banner{transform:none!important}
}

/* ===== THEME TOKENS (dark default, light via html[data-px-theme=light]) ===== */
.pxv{--bgc:#101426;--pn:#181d38;--pn2:#0b0e1c;--slot:#0c1020;--ln:#2e3566;--ln2:#1f2547;--line:#2e3566;--sel:#1d1a45;--tx:#F4F0E8;--tx2:#d4d0e2;--tx3:#a9a6bf;--tgold:#FFDA78;--tcyan:#55E6E9;--tgreen:#89F0A0;--frame:#F4F0E8;}
html[data-px-theme=light] .pxv{--bgc:#F4EFE4;--pn:#FFFDF8;--pn2:#ECE6F6;--slot:#F7F3FF;--ln:#C4BBE2;--ln2:#DED7F0;--line:#C4BBE2;--sel:#FFF2C6;--tx:#171B33;--tx2:#3A3E5C;--tx3:#5C607E;--tgold:#8F5C00;--tcyan:#0A6E74;--tgreen:#1F6E43;--frame:#171B33;}
html[data-px-theme=light] .pxv :is(.px-pre,.px-hud,.px-toast,.px-term,.px-debug,.px-aic,.px-modal .box,.px-fq,.px-mon .bez,.px-secret,.px-cursor,.px-portal,.px-map,.px-tree .center,.px-crm,.px-site,.px-quest .scene,.px-feat .frame,.px-ach-stage .shot,.px-a2p .pv,.px-wfc .shot,.px-dcard .im,.px-path .th){--bgc:#101426;--pn:#181d38;--pn2:#0b0e1c;--slot:#0c1020;--ln:#2e3566;--ln2:#1f2547;--line:#2e3566;--sel:#1d1a45;--tx:#F4F0E8;--tx2:#d4d0e2;--tx3:#a9a6bf;--tgold:#FFDA78;--tcyan:#55E6E9;--tgreen:#89F0A0;--frame:#F4F0E8;}
.pxv{background:var(--bgc);transition:background-color .3s steps(3)}
html[data-px-theme=light] .px-world{background:radial-gradient(ellipse at 20% 0%,rgba(119,86,216,.16),transparent 55%),radial-gradient(ellipse at 90% 70%,rgba(85,230,233,.14),transparent 50%),var(--bgc)}
html[data-px-theme=light] .px-world::before{background-image:linear-gradient(rgba(119,86,216,.1) 2px,transparent 2px),linear-gradient(90deg,rgba(119,86,216,.1) 2px,transparent 2px)}
html[data-px-theme=light] .px-world .stars i,html[data-px-theme=light] .px-hero-stars i{background:#9c86e6}
html[data-px-theme=light] .px-world .stars i.b{background:#e0a92f}
html[data-px-theme=light] .px-world .cloud{opacity:.5;filter:drop-shadow(0 0 0 #c4bbe2) brightness(.92)}
html[data-px-theme=light] .px-world .floaters i{opacity:.35}
html[data-px-theme=light] .pxv .sec-title{text-shadow:4px 4px 0 #c9b8ff}
html[data-px-theme=light] .px-hero h1 .ln2,html[data-px-theme=light] .px-contact .big{text-shadow:4px 4px 0 #d7c8ff}
html[data-px-theme=light] .pxv .pbox,html[data-px-theme=light] .pxv .px-cert{box-shadow:6px 6px 0 #171B33}
html[data-px-theme=light] .px-tree .center{box-shadow:0 0 0 6px var(--bgc),0 0 0 10px var(--purple),8px 8px 0 10px #171B33}
html[data-px-theme=light] .px-xp-mark{box-shadow:0 0 0 4px var(--bgc),4px 4px 0 4px #171B33}

/* ===== V2 SHARED ===== */
.pxv .px-imgfail{width:100%;height:100%;min-height:120px;display:grid;place-items:center;align-content:center;gap:10px;padding:14px;text-align:center;background:#0b0e1c;border:3px dashed var(--ln);font-family:var(--pix);font-size:8px;line-height:1.6;color:var(--tx3)}
.pxv .px-imgfail a{font-family:var(--pix);font-size:8px;color:var(--navy);background:var(--cyan);padding:6px 8px;text-decoration:none}
.pxv .sub-head{margin:0 0 26px;max-width:760px}
.pxv .sub-head .kick{font-family:var(--mono);font-size:12px;color:var(--tgreen);margin-bottom:10px}
.pxv .sub-head h3{font-family:var(--pix);font-size:clamp(12px,1.8vw,16px);line-height:1.6;color:var(--tgold)}
.pxv .sub-head p{margin-top:12px;color:var(--tx2);font-size:16px}
.pxv .px-mini{display:inline-flex;align-items:center;gap:6px;font-family:var(--pix);font-size:8px;line-height:1.2;padding:10px 11px;border:0;cursor:pointer;text-decoration:none;color:var(--navy);background:var(--cyan);box-shadow:inset -3px -3px 0 var(--cyan-d),3px 3px 0 #000;transition:transform .08s steps(1)}
.pxv .px-mini:active{transform:translate(3px,3px);box-shadow:inset 3px 3px 0 var(--cyan-d)}
.pxv .px-mini.gold{background:var(--gold);box-shadow:inset -3px -3px 0 var(--gold-d),3px 3px 0 #000}
.pxv .px-mini.ghost{background:var(--ln2);color:var(--tx);box-shadow:inset -3px -3px 0 #0b0e1c,3px 3px 0 #000}
.pxv .px-mini:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.pxv .px-tiltable{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s ease-out}

/* ===== SKILL TREE CENTER PHOTO ===== */
.px-tree .center{overflow:visible;padding:0}
.px-tree .center .pic{width:100%;height:100%;overflow:hidden;background:#0b0e1c}
.px-tree .center .pic img{width:100%;height:100%;object-fit:cover;object-position:center top}

/* ===== EXPERIENCE ===== */
.px-xp{list-style:none;margin:0;padding:0 0 0 clamp(56px,7vw,86px);position:relative}
.px-xp::before{content:"";position:absolute;left:clamp(22px,3vw,36px);top:10px;bottom:10px;width:8px;background:repeating-linear-gradient(180deg,var(--purple) 0 10px,transparent 10px 18px);animation:pxPath 1.2s steps(6) infinite}
@keyframes pxPath{to{background-position:0 18px}}
.px-xp-item{position:relative;margin-bottom:46px;opacity:0;transform:translateX(-30px)}
.px-xp-item.in{opacity:1;transform:none;transition:opacity .5s steps(5),transform .5s steps(5)}
.px-xp-mark{position:absolute;left:calc(clamp(56px,7vw,86px) * -1 + clamp(22px,3vw,36px) - 20px);top:18px;width:48px;height:48px;display:grid;place-items:center;background:var(--pn2);border:4px solid var(--gold);box-shadow:0 0 0 4px var(--bgc),4px 4px 0 4px #000;z-index:2}
.px-xp-item.in .px-xp-mark{animation:pxMark 1.6s steps(2) infinite}
@keyframes pxMark{50%{border-color:var(--cyan)}}
.px-xp-card{display:grid;grid-template-columns:1fr 300px;gap:24px;padding:clamp(20px,3vw,30px);transition:border-color .2s steps(2),box-shadow .2s steps(2)}
.px-xp-card:hover,.px-xp-card:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(85,230,233,.18),6px 6px 0 #05070f}
.px-xp-parts{position:absolute;inset:0;pointer-events:none;overflow:visible}
.px-xp-parts i{position:absolute;width:6px;height:6px;background:var(--gold);opacity:.5;animation:pxFloat 3s steps(6) infinite;pointer-events:none}
.px-xp-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--mono);font-size:13px;color:var(--tcyan);margin-bottom:12px}
.px-xp-meta .chk{font-family:var(--pix);font-size:8px;color:var(--navy);background:var(--green);padding:5px 7px}
.px-xp-card h3{font-family:var(--pix);font-size:clamp(13px,1.8vw,17px);line-height:1.6;color:var(--tgold);text-shadow:3px 3px 0 var(--purple-d)}
.px-xp-card .role{margin:8px 0 16px;font-size:16px;color:var(--tx2)}
.px-xp-tog{font-family:var(--pix);font-size:8px;color:var(--tx);background:var(--slot);border:3px solid var(--line);padding:8px 10px;cursor:pointer;margin-bottom:12px}
.px-xp-tog:hover{border-color:var(--cyan)}
.px-xp-tog[aria-expanded=false]+.px-term{display:none}
.px-term{list-style:none;margin:0;padding:16px;background:#05070f;border:3px solid var(--ln2);display:grid;gap:12px;font-size:15.5px;line-height:1.6;color:var(--tx2)}
.px-term li{position:relative;padding-left:22px;clip-path:inset(0 100% 0 0)}
.px-term li::before{content:">";position:absolute;left:0;top:0;font-family:var(--mono);color:var(--tgreen)}
.px-term li b{font-weight:700;color:var(--tcyan)}
.px-term.typed li{animation:pxType .8s steps(16) forwards}
@keyframes pxType{to{clip-path:inset(0 0 0 0)}}
.px-term.typed li:last-child::after{content:"";display:inline-block;width:8px;height:14px;margin-left:6px;vertical-align:middle;background:var(--green);animation:pxBlink .8s steps(1) infinite}
/* CRM robot */
.px-crm{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:20px;background:var(--slot);border:3px solid var(--ln2)}
.px-crm .bot{clip-path:inset(100% 0 0 0)}
.px-xp-item.in .px-crm .bot{animation:pxBuild 1s steps(10) .3s forwards}
@keyframes pxBuild{to{clip-path:inset(0 0 0 0)}}
.px-crm .bot .art>i.f2{opacity:0}
.px-xp-card:hover .px-crm .bot .art>i.f1,.px-xp-card:focus-within .px-crm .bot .art>i.f1{animation:pxF1 .4s steps(1) infinite}
.px-xp-card:hover .px-crm .bot .art>i.f2,.px-xp-card:focus-within .px-crm .bot .art>i.f2{animation:pxF2 .4s steps(1) infinite}
.px-crm .net{position:relative;width:100%;display:flex;justify-content:space-between}
.px-crm .net::before{content:"";position:absolute;left:20px;right:20px;top:50%;height:4px;margin-top:-2px;background:repeating-linear-gradient(90deg,var(--ln) 0 6px,transparent 6px 10px)}
.px-crm .n{position:relative;z-index:1;font-family:var(--pix);font-size:8px;color:var(--navy);background:var(--purple);padding:8px 6px;box-shadow:3px 3px 0 #000;transition:background .2s steps(2)}
.px-xp-card:hover .px-crm .n{background:var(--cyan)}
.px-crm .sig{position:absolute;top:50%;left:20px;width:8px;height:8px;margin-top:-4px;background:var(--gold);opacity:0;z-index:2}
.px-xp-card:hover .px-crm .sig,.px-xp-card:focus-within .px-crm .sig{opacity:1;animation:pxSig 1.2s steps(12) infinite}
.px-crm .sig.s2{animation-delay:.6s!important}
@keyframes pxSig{from{left:20px}to{left:calc(100% - 28px)}}
.px-crm .lbl{font-family:var(--pix);font-size:7px;color:var(--tx3)}
.px-xp-card:hover .px-crm .lbl{color:var(--tgreen)}
/* QA debug */
.px-debug{position:relative;min-height:240px;overflow:hidden;background:#05070f;border:3px solid var(--ln2)}
.px-debug pre{margin:0;padding:12px;font-family:var(--mono);font-size:11px;line-height:1.7;color:#3b4a7a;white-space:pre;animation:pxCode 9s steps(30) infinite}
@keyframes pxCode{to{transform:translateY(-50%)}}
.px-debug .scan{position:absolute;top:30%;left:0;animation:pxScan 5s steps(25) infinite}
@keyframes pxScan{0%{transform:translate(0,0)}25%{transform:translate(200px,-30px)}50%{transform:translate(120px,70px)}75%{transform:translate(20px,40px)}100%{transform:translate(0,0)}}
.px-debug .bug{position:absolute;background:none;border:0;padding:4px;cursor:pointer;animation:pxHop 1s steps(2) infinite}
.px-debug .bug.squash{animation:pxSquash .35s steps(3) forwards;pointer-events:none}
@keyframes pxSquash{to{transform:scale(1.8);opacity:0}}
.px-debug .qa{position:absolute;left:8px;right:8px;bottom:8px;font-family:var(--pix);font-size:8px;line-height:1.6;color:var(--tgold);background:rgba(11,14,28,.92);border:3px solid var(--line);padding:8px}
.px-debug .qa.done{color:var(--navy);background:var(--green);border-color:#000;animation:pxPop .3s steps(3)}
.px-debug .hint{position:absolute;right:8px;top:8px;font-family:var(--pix);font-size:7px;color:var(--tx3)}

/* ===== WORKS ===== */
.px-works-big{font-family:var(--pix);font-size:clamp(13px,2vw,20px);line-height:1.6;color:var(--tgold);margin-top:18px}
.px-wtabs{position:relative;display:flex;flex-wrap:wrap;gap:12px;padding-bottom:16px;margin-bottom:26px;border-bottom:4px solid var(--ln2)}
.px-wtabs button{font-family:var(--pix);font-size:clamp(9px,1.1vw,11px);padding:14px 16px;background:var(--pn);color:var(--tx);border:4px solid var(--line);cursor:pointer;box-shadow:4px 4px 0 #000}
.px-wtabs button[aria-selected=true]{background:var(--purple);border-color:var(--frame)}
.px-wtabs button:hover{border-color:var(--cyan)}
.px-wtabs .ind{position:absolute;bottom:-4px;height:4px;background:repeating-linear-gradient(90deg,var(--gold) 0 8px,var(--cyan) 8px 16px);transition:left .35s steps(6),width .35s steps(6)}
.px-wsub{display:flex;gap:10px;overflow-x:auto;padding:4px 4px 12px;margin-bottom:24px;scrollbar-width:thin}
.px-wsub button{flex-shrink:0;font-family:var(--pix);font-size:8px;line-height:1.5;padding:11px 12px;background:var(--slot);color:var(--tx2);border:3px solid var(--ln);cursor:pointer}
.px-wsub button[aria-selected=true]{color:var(--navy);background:var(--green);border-color:#000;box-shadow:3px 3px 0 #000}
.px-wsub button:hover{border-color:var(--cyan)}
.px-wpanel.swap,.px-wsp.swap{animation:pxPanel .4s steps(5)}
@keyframes pxPanel{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
/* Bake Blush */
.px-brandhead{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;padding:22px;margin-bottom:24px}
.px-brandhead .logo{width:120px;height:120px;background:var(--cream);padding:8px;border:4px solid #000;box-shadow:6px 6px 0 #000;animation:pxBounce 2.4s steps(4) infinite}
.px-brandhead .logo img{width:100%;height:100%;object-fit:contain}
.px-brandhead .kick{font-family:var(--mono);font-size:12px;color:var(--coral);margin-bottom:8px}
.px-brandhead h3{font-family:var(--pix);font-size:clamp(11px,1.6vw,15px);line-height:1.7;color:var(--tx)}
.px-brandhead p{margin-top:10px;color:var(--tx2);font-size:16px}
.px-feat{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;margin-bottom:24px;align-items:stretch}
.px-feat .frame{position:relative;display:grid;place-items:center;min-height:360px;max-height:600px;padding:14px;background:#05070f;background-image:linear-gradient(45deg,#0b0e1c 25%,transparent 25%,transparent 75%,#0b0e1c 75%),linear-gradient(45deg,#0b0e1c 25%,transparent 25%,transparent 75%,#0b0e1c 75%);background-size:24px 24px;background-position:0 0,12px 12px;border:4px solid var(--frame);box-shadow:8px 8px 0 #000;cursor:zoom-in}
.px-feat .frame img{max-width:100%;max-height:560px;width:auto;height:auto;object-fit:contain}
.px-feat .frame.swap img{animation:pxMask .5s steps(6)}
@keyframes pxMask{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.px-feat .info{padding:22px;display:flex;flex-direction:column;gap:12px}
.px-feat .ctr{font-family:var(--pix);font-size:9px;color:var(--tcyan)}
.px-feat h4{margin:0;font-family:var(--pix);font-size:13px;line-height:1.6;color:var(--tgold)}
.px-feat p{color:var(--tx2);font-size:16px}
.px-feat .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto}
.px-dcards{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.px-dcard{position:relative;padding:8px 8px 30px;background:var(--pn);border:3px solid var(--line);cursor:pointer;color:var(--tx);opacity:0}
.px-dcard.in{opacity:1;animation:pxDcard .6s steps(6) backwards}
@keyframes pxDcard{from{opacity:0;transform:translate(var(--fx,0),var(--fy,30px));clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.px-dcard .im{aspect-ratio:4/5;display:grid;place-items:center;background:#05070f;overflow:hidden}
.px-dcard .im img{max-width:100%;max-height:100%;object-fit:contain}
.px-dcard .no{position:absolute;left:8px;bottom:8px;font-family:var(--pix);font-size:8px;color:var(--tgold)}
.px-dcard .tip{position:absolute;left:50%;top:-14px;transform:translateX(-50%) scale(.6);opacity:0;font-family:var(--pix);font-size:7px;white-space:nowrap;background:var(--gold);color:var(--navy);padding:5px 6px;box-shadow:3px 3px 0 #000;transition:all .15s steps(3);pointer-events:none;z-index:2}
.px-dcard:hover .tip,.px-dcard:focus-visible .tip{opacity:1;transform:translateX(-50%)}
.px-dcard[aria-pressed=true]{border-color:var(--gold)}
.px-dcard[aria-pressed=true]::after{content:"";position:absolute;inset:-8px;border:3px dashed var(--gold);animation:pxBlink 1s steps(1) infinite;pointer-events:none}
/* Workflows */
.px-wf{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.px-wfc{display:flex;flex-direction:column;padding:14px;opacity:0}
.px-wfc.in{opacity:1;animation:pxRevealPix .7s steps(7) backwards}
.px-wfc.wide{grid-column:span 2}
.px-wfc .shot{position:relative;display:grid;place-items:center;aspect-ratio:16/10;background:#05070f;border:3px solid #0b0e1c;cursor:zoom-in;padding:0;overflow:hidden}
.px-wfc .shot img{max-width:100%;max-height:100%;object-fit:contain}
.px-wfc .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.px-wfc .pair .part{position:relative}
.px-wfc .pair .tag{position:absolute;left:6px;top:6px;z-index:2;font-family:var(--pix);font-size:7px;color:var(--navy);background:var(--gold);padding:4px 6px}
.px-wfc .hd{display:flex;align-items:center;gap:12px;margin:14px 0 8px}
.px-wfc .hd .ic{flex-shrink:0;width:38px;height:38px;display:grid;place-items:center;background:var(--slot);border:3px solid var(--line)}
.px-wfc .hd .ic .art{animation:pxSpin 4s steps(8) infinite}
.px-wfc:hover .hd .ic{border-color:var(--green)}
.px-wfc h4{margin:0;font-family:var(--pix);font-size:10px;line-height:1.6;color:var(--tx)}
.px-wfc .no{font-family:var(--mono);font-size:11px;color:var(--tcyan)}
.px-wfc p{font-size:15px;color:var(--tx2);margin-bottom:14px}
.px-wfc .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.px-wfc:hover{border-color:var(--green)}
/* Dashboards */
.px-dash{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.px-mon{display:flex;flex-direction:column;align-items:center;opacity:0}
.px-mon.in{opacity:1;animation:pxQuestIn .6s steps(6) backwards}
.px-mon .bez{width:100%;padding:14px 14px 30px;background:linear-gradient(180deg,#3a3f6e,#262a4d);border:4px solid #000;box-shadow:inset 0 0 0 4px #4b5190,8px 8px 0 #000;position:relative;cursor:zoom-in}
.px-mon .scr{position:relative;aspect-ratio:16/10;display:grid;place-items:center;background:#020308;overflow:hidden;filter:brightness(.08) saturate(0)}
.px-mon.in .scr{filter:none;transition:filter 1.2s steps(8) .3s}
.px-mon .scr img{max-width:100%;max-height:100%;object-fit:contain}
.px-mon .scr::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);pointer-events:none}
.px-mon .leds{position:absolute;right:16px;bottom:9px;display:flex;gap:6px}
.px-mon .leds i{width:8px;height:8px;background:var(--ln2)}
.px-mon.in .leds i{animation:pxLed 1.6s steps(1) infinite}
.px-mon.in .leds i:nth-child(1){background:var(--green)}
.px-mon.in .leds i:nth-child(2){background:var(--gold);animation-delay:.4s}
.px-mon.in .leds i:nth-child(3){background:var(--coral);animation-delay:.8s}
@keyframes pxLed{50%{opacity:.25}}
.px-mon .brand{position:absolute;left:16px;bottom:8px;font-family:var(--pix);font-size:7px;color:#9aa0d8}
.px-mon .stand{width:24%;height:20px;background:#262a4d;border:4px solid #000;border-top:0}
.px-mon .base{width:44%;height:12px;background:#3a3f6e;border:4px solid #000;box-shadow:4px 4px 0 #000}
.px-mon .cap{width:100%;margin-top:18px;padding:18px}
.px-mon .cap h4{margin:0 0 8px;font-family:var(--pix);font-size:11px;line-height:1.6;color:var(--tgold)}
.px-mon .cap p{font-size:15px;color:var(--tx2);margin-bottom:12px}
.px-mon .cap .acts{display:flex;flex-wrap:wrap;gap:10px}
/* AI terminals */
.px-ai{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.px-aic{position:relative;display:flex;flex-direction:column;background:#05070f;border:4px solid var(--ln);box-shadow:6px 6px 0 #000;overflow:hidden;opacity:0}
.px-aic.in{opacity:1;animation:pxQuestIn .6s steps(6) backwards}
.px-aic::after{content:"";position:absolute;left:0;right:0;top:0;height:30px;background:linear-gradient(180deg,transparent,rgba(85,230,233,.12),transparent);animation:pxScanline 3.2s steps(16) infinite;pointer-events:none}
@keyframes pxScanline{from{transform:translateY(-30px)}to{transform:translateY(520px)}}
.px-aic .tb{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--pn2);border-bottom:3px solid var(--ln);font-family:var(--pix);font-size:7px;color:var(--tx3)}
.px-aic .tb i{width:8px;height:8px;background:var(--coral)}.px-aic .tb i:nth-child(2){background:var(--gold)}.px-aic .tb i:nth-child(3){background:var(--green)}
.px-aic .tb span{margin-left:auto;display:flex;align-items:center;gap:6px}
.px-aic .tb span::before{content:"";width:8px;height:8px;background:var(--green);animation:pxBlink 1s steps(1) infinite}
.px-aic .stage{position:relative;height:170px;display:flex;align-items:flex-end;justify-content:center;gap:18px;padding:18px;background:radial-gradient(circle at 50% 70%,rgba(119,86,216,.25),transparent 70%)}
.px-aic .stage .bot{animation:pxBounce 1.6s steps(4) infinite}
.px-aic .stage .say{position:absolute;top:14px;left:14px;max-width:62%;font-family:var(--pix);font-size:7px;line-height:1.6;background:var(--cream);color:var(--navy);padding:7px 8px;box-shadow:3px 3px 0 #000}
.px-aic .wave{display:flex;align-items:center;gap:3px;height:60px}
.px-aic .wave i{width:6px;height:100%;background:var(--cyan);transform:scaleY(.2);animation:pxWave .9s steps(4) infinite}
@keyframes pxWave{50%{transform:scaleY(1)}}
.px-aic .play{position:absolute;right:16px;bottom:16px;width:52px;height:52px;display:grid;place-items:center;background:var(--gold);border:0;cursor:pointer;box-shadow:inset -4px -4px 0 var(--gold-d),4px 4px 0 #000;animation:pxPulse 1.4s steps(3) infinite}
.px-aic .play:focus-visible{outline:3px solid var(--frame);outline-offset:3px}
.px-aic .bd{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1;border-top:3px solid var(--ln2)}
.px-aic h4{margin:0;font-family:var(--pix);font-size:10px;line-height:1.7;color:var(--tx)}
.px-aic p{font-size:15px;color:var(--tx2)}
.px-aic .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.px-aic.off .wave i,.px-aic.off .stage .bot,.px-aic.off::after{animation-play-state:paused}
/* Construction */
.px-build{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:clamp(20px,4vw,40px)}
.px-build h3{font-family:var(--pix);font-size:clamp(14px,2.2vw,20px);line-height:1.6;color:var(--tgold)}
.px-build p{margin-top:14px;color:var(--tx2)}
.px-build .load{margin-top:22px;display:flex;gap:4px;padding:5px;border:3px solid var(--frame);width:max-content}
.px-build .load i{width:12px;height:14px;background:var(--ln2);animation:pxLoad 3s steps(1) infinite}
@keyframes pxLoad{0%{background:var(--ln2)}50%,100%{background:var(--green)}}
.px-site{position:relative;height:260px;background:var(--slot);border:4px solid var(--ln);overflow:hidden}
.px-site .gnd{position:absolute;left:0;right:0;bottom:0;height:26px;background:repeating-linear-gradient(90deg,#2b3a2b 0 16px,#334a33 16px 32px);border-top:5px solid #4fb867}
.px-site .panel{position:absolute;left:48%;bottom:26px;display:grid;grid-template-columns:repeat(6,22px);grid-auto-rows:22px;gap:3px;transform:translateX(-50%)}
.px-site .panel i{background:var(--ln2);border:2px dashed var(--ln)}
.px-site .panel i.f{background:var(--purple);border:2px solid #000;animation:pxFillIn 4s steps(1) infinite}
@keyframes pxFillIn{0%,10%{opacity:0}11%,100%{opacity:1}}
.px-site .dev{position:absolute;left:14%;bottom:26px}
.px-site .tool{position:absolute;left:calc(14% + 52px);bottom:70px;transform-origin:bottom left;animation:pxHammer .6s steps(2) infinite}
@keyframes pxHammer{50%{transform:rotate(-35deg)}}
.px-site .bits i{position:absolute;width:6px;height:6px;background:var(--gold);animation:pxFloat 2.6s steps(5) infinite}
.px-site .sign{position:absolute;right:12px;top:12px;font-family:var(--pix);font-size:8px;line-height:1.6;color:var(--navy);background:var(--gold);padding:6px 8px;border:3px solid #000;animation:pxBlink 1.6s steps(1) infinite}
/* A2P */
.px-a2p-title{display:inline-block;font-family:var(--pix);font-size:9px;color:var(--navy);background:var(--cyan);padding:6px 8px;margin-bottom:12px}
.px-a2p{display:grid;grid-template-columns:1fr;gap:20px}
.px-a2p .viewer{display:grid;grid-template-columns:1.4fr .6fr;gap:20px}
.px-a2p .pv{position:relative;display:grid;place-items:center;min-height:320px;max-height:560px;padding:12px;background:#05070f;border:4px solid var(--frame);box-shadow:8px 8px 0 #000;cursor:zoom-in;overflow:hidden}
.px-a2p .pv img{max-width:100%;max-height:530px;object-fit:contain}
.px-a2p .pv .scanl{position:absolute;left:0;right:0;height:6px;background:var(--cyan);box-shadow:0 0 14px var(--cyan);top:-10px;opacity:0;pointer-events:none}
.px-a2p .pv.swap img{animation:pxSlideIn .45s steps(5)}
.px-a2p .pv.swap .scanl{animation:pxScanDown .8s steps(10)}
@keyframes pxSlideIn{from{transform:translateX(40px);opacity:0}}
@keyframes pxScanDown{0%{top:0;opacity:1}100%{top:100%;opacity:1}}
.px-a2p .meta{padding:20px;display:flex;flex-direction:column;gap:12px}
.px-a2p .meta .step{font-family:var(--pix);font-size:9px;color:var(--tcyan)}
.px-a2p .meta h4{margin:0;font-family:var(--pix);font-size:12px;line-height:1.6;color:var(--tgold)}
.px-a2p .meta p{font-size:15px;color:var(--tx2)}
.px-a2p .meta .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.px-a2p .meta .prog{display:flex;gap:3px}
.px-a2p .meta .prog i{flex:1;height:8px;background:var(--ln2)}
.px-a2p .meta .prog i.on{background:var(--green)}
.px-path{position:relative;display:grid;grid-template-columns:repeat(10,1fr);gap:8px;padding:22px 6px 6px}
.px-path::before{content:"";position:absolute;left:5%;right:5%;top:36px;height:6px;background:repeating-linear-gradient(90deg,var(--ln) 0 8px,transparent 8px 14px)}
.px-path .trail{position:absolute;left:5%;top:36px;height:6px;background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 14px);transition:width .45s steps(6);width:0}
.px-path button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;cursor:pointer;padding:0;color:var(--tx3);font-family:var(--pix);font-size:7px}
.px-path button .dot{width:34px;height:34px;display:grid;place-items:center;background:var(--slot);border:4px solid var(--line);color:var(--tx);font-size:8px}
.px-path button.done .dot{border-color:var(--green)}
.px-path button[aria-current=step] .dot{background:var(--gold);color:var(--navy);border-color:#000;box-shadow:0 0 0 4px rgba(255,218,120,.3);animation:pxBounce .5s steps(3)}
.px-path button:focus-visible .dot{outline:3px solid var(--cyan);outline-offset:2px}
.px-path .th{width:100%;aspect-ratio:4/3;background:#05070f;border:3px solid var(--ln2);overflow:hidden;display:grid;place-items:center}
.px-path .th img{max-width:100%;max-height:100%;object-fit:contain}
.px-path button[aria-current=step] .th{border-color:var(--gold)}

/* ===== VIDEO MODAL ===== */
.px-video .box{width:min(1000px,100%);max-height:94vh;overflow:auto}
.px-video .cab{position:relative;background:var(--pn2);border:6px solid #000;box-shadow:inset 0 0 0 4px var(--purple),10px 10px 0 #000;padding:14px}
.px-video.open .cab{animation:pxCab .5s steps(6)}
@keyframes pxCab{0%{clip-path:inset(0 50% 0 50%)}60%{clip-path:inset(0 0 0 0)}}
.px-video .bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.px-video .bar h2{font-family:var(--pix);font-size:10px;line-height:1.6;color:var(--tgold);flex:1;min-width:180px}
.px-video .bar .count{font-family:var(--mono);font-size:12px;color:var(--tcyan)}
.px-video .bar .tools{display:flex;gap:6px}
.px-video .sw{position:relative;border:6px solid #000;background:#000;box-shadow:0 0 0 4px var(--ln)}
.px-video .sw .cn{position:absolute;width:16px;height:16px;background:var(--cyan);z-index:2}
.px-video .sw .c1{left:-10px;top:-10px}.px-video .sw .c2{right:-10px;top:-10px}.px-video .sw .c3{left:-10px;bottom:-10px}.px-video .sw .c4{right:-10px;bottom:-10px;background:var(--gold)}
.px-video .screen{position:relative;aspect-ratio:16/9;background:#05070f;display:grid;place-items:center}
.px-video .screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .5s steps(5)}
.px-video .screen iframe.ok{opacity:1}
.px-video .screen .ld{font-family:var(--pix);font-size:9px;line-height:1.8;color:var(--tcyan);text-align:center;padding:20px}
.px-video .screen .ld a{color:var(--tgold)}
.px-video .info{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:14px}
.px-video .info p{flex:1;min-width:220px;font-size:15px;color:var(--tx2)}
.px-viewer .bar .tools a.px-ib{display:inline-grid;place-items:center;text-decoration:none}

/* ===== TESTIMONIALS ===== */
.px-tst{position:relative}
.px-tst .vp{overflow:hidden;touch-action:pan-y}
.px-tst .track{display:flex;transition:transform .45s steps(8)}
.px-tst .slide{flex:0 0 100%;padding:8px 10px 18px}
.px-tst .dlg{position:relative;max-width:820px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:24px;padding:clamp(20px,3vw,32px);background:var(--pn);border:4px solid var(--frame);box-shadow:8px 8px 0 #000}
.px-tst .slide.act .dlg{box-shadow:0 0 0 4px rgba(85,230,233,.35),8px 8px 0 #000}
.px-tst .av{width:92px;height:92px;display:grid;place-items:center;background:var(--slot);border:4px solid var(--purple)}
.px-tst .q{margin-bottom:12px}
.px-tst blockquote{margin:0;font-size:clamp(16px,1.5vw,18px);line-height:1.7;color:var(--tx)}
.px-tst .who{margin-top:16px;font-family:var(--pix);font-size:9px;line-height:1.7;color:var(--tgold)}
.px-tst .who small{display:block;font-family:var(--mono);font-size:12px;color:var(--tcyan)}
.px-tst .draft{display:inline-block;margin-bottom:12px;font-family:var(--pix);font-size:7px;line-height:1.6;color:var(--navy);background:var(--coral);padding:5px 7px}
.px-tst .cur{position:absolute;right:16px;bottom:12px;color:var(--tx);font-size:12px;animation:pxBlink .8s steps(1) infinite}
.px-tst .ctrl{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:18px}
.px-tst .dots{display:flex;gap:8px}
.px-tst .dots button{width:14px;height:14px;padding:0;border:3px solid var(--line);background:var(--slot);cursor:pointer}
.px-tst .dots button[aria-current=true]{background:var(--gold);border-color:#000}
.px-tst-soon{max-width:760px;margin:0 auto;padding:clamp(24px,4vw,40px);text-align:center}
.px-tst-soon h3{font-family:var(--pix);font-size:clamp(13px,2vw,18px);line-height:1.6;color:var(--tgold);margin:18px 0 12px}
.px-tst-soon p{color:var(--tx2)}
.px-tst-soon .slots{display:flex;justify-content:center;gap:12px;margin-top:22px}
.px-tst-soon .slots i{width:60px;height:60px;border:4px dashed var(--line);display:grid;place-items:center;font-style:normal;font-family:var(--pix);font-size:16px;color:var(--ln);animation:pxBlink 2s steps(1) infinite}
.px-tst-soon .slots i:nth-child(2){animation-delay:.6s}.px-tst-soon .slots i:nth-child(3){animation-delay:1.2s}

/* ===== FAQ ===== */
.px-faq-wrap{display:grid;grid-template-columns:1fr 200px;gap:28px;align-items:start}
.px-faq{display:grid;gap:14px}
.px-fq{background:#05070f;border:4px solid var(--ln);box-shadow:5px 5px 0 #000;transition:border-color .2s steps(2)}
.px-fq.open{border-color:var(--cyan)}
.px-fq h3{margin:0}
.px-fq button{position:relative;width:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:18px 18px 18px 46px;background:none;border:0;color:var(--tx);cursor:pointer;font-family:var(--pix);font-size:clamp(9px,1.1vw,11px);line-height:1.7}
.px-fq button:hover{color:var(--tcyan)}
.px-fq button:focus-visible{outline:3px solid var(--gold);outline-offset:-6px}
.px-fq .pt{position:absolute;left:16px;top:50%;margin-top:-6px;opacity:0;transform:translateX(-10px);transition:all .2s steps(3)}
.px-fq.open .pt,.px-fq button:hover .pt{opacity:1;transform:none}
.px-fq .sign{margin-left:auto;font-family:var(--mono);font-size:16px;color:var(--tgold)}
.px-fq .ans{padding:0 20px 20px 46px;font-size:16px;line-height:1.7;color:var(--tx2)}
.px-fq .ans .typed::after{content:"";display:inline-block;width:8px;height:14px;margin-left:4px;vertical-align:middle;background:var(--green);animation:pxBlink .8s steps(1) infinite}
.px-faq-side{position:sticky;top:100px;padding:18px;text-align:center}
.px-faq-side .sp{display:flex;justify-content:center;margin-bottom:12px}
.px-faq-side .sp.react{animation:pxHop .45s steps(3) 2}
.px-faq-side p{font-family:var(--pix);font-size:8px;line-height:1.8;color:var(--tcyan)}

/* ===== CONTACT V2 ===== */
.px-quest-panel{max-width:980px;margin:0 auto;padding:clamp(22px,4vw,40px);background:var(--pn);border:4px solid var(--frame);box-shadow:10px 10px 0 #000;position:relative}
.px-quest-panel .hdr{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;margin-bottom:26px}
.px-quest-panel .face{width:92px;height:92px;border:4px solid var(--gold);background:#0b0e1c;overflow:hidden;box-shadow:4px 4px 0 #000}
.px-quest-panel .face img{width:100%;height:100%;object-fit:cover;object-position:center top}
.px-quest-panel .hi{font-family:var(--pix);font-size:clamp(12px,2vw,17px);line-height:1.6;color:var(--tgold)}
.px-quest-panel .ch{margin-top:6px;font-family:var(--pix);font-size:clamp(8px,1.1vw,10px);line-height:1.6;color:var(--tcyan)}
.px-quest-panel .who{margin-top:8px;font-size:15px;color:var(--tx2)}
.px-quest-panel .sel{display:none;margin:-8px 0 20px;font-family:var(--pix);font-size:8px;line-height:1.7;color:var(--navy);background:var(--green);padding:8px 10px;width:max-content;max-width:100%}
.px-quest-panel .sel.show{display:block;animation:pxPop .3s steps(3)}
.pxv .px-book{position:relative;display:flex;align-items:center;gap:18px;width:100%;padding:20px 22px;text-decoration:none;color:var(--navy);background:var(--gold);box-shadow:inset -6px -6px 0 var(--gold-d),inset 6px 6px 0 rgba(255,255,255,.35),0 0 0 4px #000,8px 8px 0 4px #000;transition:transform .08s steps(1),box-shadow .2s steps(2);margin-bottom:22px}
.px-book:hover{box-shadow:inset -6px -6px 0 var(--gold-d),inset 6px 6px 0 rgba(255,255,255,.35),0 0 0 4px #000,0 0 0 10px rgba(255,218,120,.35),8px 8px 0 4px #000}
.px-book:active{transform:translate(6px,6px);box-shadow:inset 6px 6px 0 var(--gold-d),0 0 0 4px #000}
.px-book:focus-visible{outline:3px solid var(--frame);outline-offset:8px}
.px-book .cal{flex-shrink:0;animation:pxHop 1.8s steps(3) infinite}
.px-book .t{display:flex;flex-direction:column;gap:8px}
.px-book .t b{font-family:var(--pix);font-size:clamp(12px,1.8vw,16px);line-height:1.5;font-weight:400}
.px-book .t small{font-size:15px;font-weight:500}
.px-book .arr{margin-left:auto;font-family:var(--pix);font-size:18px;transition:transform .2s steps(2)}
.px-book:hover .arr{transform:translateX(8px)}
.px-book .gp i{position:absolute;width:8px;height:8px;background:var(--gold);opacity:0;pointer-events:none;transition:all .35s steps(4)}
.px-book .gp i:nth-child(1){left:-30px;top:-20px}.px-book .gp i:nth-child(2){right:-30px;top:-24px}.px-book .gp i:nth-child(3){left:20%;bottom:-34px}.px-book .gp i:nth-child(4){right:18%;bottom:-30px}.px-book .gp i:nth-child(5){right:-36px;top:50%}
.px-book:hover .gp i{opacity:1}
.px-book:hover .gp i:nth-child(1){left:-12px;top:-12px}.px-book:hover .gp i:nth-child(2){right:-12px;top:-12px}.px-book:hover .gp i:nth-child(3){bottom:-14px}.px-book:hover .gp i:nth-child(4){bottom:-14px}.px-book:hover .gp i:nth-child(5){right:-16px}
.px-copts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none;margin:0;padding:0}
.px-copts a{display:flex;flex-direction:column;gap:12px;align-items:flex-start;height:100%;padding:16px;background:var(--slot);border:3px solid var(--line);color:var(--tx);text-decoration:none;transition:border-color .15s steps(2),transform .15s steps(2)}
.px-copts a:hover,.px-copts a:focus-visible{border-color:var(--cyan);transform:translateY(-4px)}
.px-copts .lb{font-family:var(--pix);font-size:9px;color:var(--tgold)}
.px-copts .v{font-family:var(--mono);font-size:13px;color:var(--tx2);word-break:break-all}
.px-copts .ic{position:relative;height:40px;display:flex;align-items:center}
.px-copts .wa .art{animation:pxHop 1.4s steps(3) infinite}
.px-copts .wa .ic::after{content:"...";position:absolute;left:44px;top:0;font-family:var(--pix);font-size:9px;color:var(--tgreen);animation:pxBlink 1s steps(1) infinite}
.px-copts .gm .art{animation:pxFloat 2.4s steps(6) infinite}
.px-copts .fb .ic::after{content:"1";position:absolute;left:26px;top:0;font-family:var(--pix);font-size:7px;color:#fff;background:var(--coral);padding:3px 4px;animation:pxBounce 1.2s steps(3) infinite}
.px-copts .ig .art{animation:pxGlow 1.6s steps(4) infinite}
.px-quest-panel .note{margin-top:20px;font-size:14px;color:var(--tx3)}


/* ===== CERTIFICATES: TROPHY CASE ===== */
.px-ach{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:start}
.px-ach-list{display:flex;flex-direction:column;gap:8px}
.px-ach-list button{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;padding:12px 14px;text-align:left;background:var(--slot);border:3px solid var(--ln);color:var(--tx2);cursor:pointer;font:inherit;transition:border-color .15s steps(2),transform .15s steps(2),background .15s steps(2)}
.px-ach.in .px-ach-list button{animation:pxAchIn .45s steps(5) backwards}
@keyframes pxAchIn{from{opacity:0;transform:translateX(-30px)}}
.px-ach-list .ix{font-family:var(--mono);font-size:12px;color:var(--tcyan)}
.px-ach-list .nm{font-family:var(--pix);font-size:9px;line-height:1.6}
.px-ach-list .gem{width:10px;height:10px;background:var(--ln2);transform:rotate(45deg)}
.px-ach-list button:hover{border-color:var(--cyan);transform:translateX(4px)}
.px-ach-list button[aria-selected=true]{background:var(--sel);border-color:var(--gold);color:var(--tx);transform:translateX(8px);box-shadow:-6px 0 0 var(--gold)}
.px-ach-list button[aria-selected=true] .gem{background:var(--gold);animation:pxBlink 1s steps(1) infinite}
.px-ach-list button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.px-ach-stage{padding:18px;opacity:0;transform:scale(.96)}
.px-ach.in .px-ach-stage{opacity:1;transform:none;transition:opacity .4s steps(4) .15s,transform .4s steps(4) .15s}
.px-ach-stage .top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.px-ach-stage .ctr{font-family:var(--pix);font-size:9px;color:var(--tcyan)}
.px-ach-stage .badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--pix);font-size:8px;color:var(--navy);background:var(--gold);padding:6px 8px;box-shadow:3px 3px 0 #000}
.px-ach-stage .shot{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/10;max-height:470px;padding:12px;border:4px solid #000;background:#05070f;background-image:linear-gradient(45deg,#0b0e1c 25%,transparent 25%,transparent 75%,#0b0e1c 75%),linear-gradient(45deg,#0b0e1c 25%,transparent 25%,transparent 75%,#0b0e1c 75%);background-size:24px 24px;background-position:0 0,12px 12px;box-shadow:0 0 0 4px var(--gold-d);cursor:zoom-in;overflow:hidden;touch-action:pan-y}
.px-ach-stage .shot img{max-width:100%;max-height:100%;object-fit:contain}
.px-ach-stage .shot.pop img{animation:pxCertPop .45s steps(5)}
@keyframes pxCertPop{0%{transform:scale(.9)}60%{transform:scale(1.02)}100%{transform:scale(1)}}
.px-ach-stage .wipe{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(5,1fr);pointer-events:none}
.px-ach-stage .wipe i{background:var(--purple);transform:scale(0);transition:transform .12s steps(2)}
.px-ach-stage .wipe i:nth-child(3n){background:var(--purple-d)}
.px-ach-stage .shot.cover .wipe i{transform:scale(1.02)}
.px-ach-stage .tip{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-family:var(--pix);font-size:8px;color:var(--navy);background:var(--gold);padding:7px 9px;box-shadow:3px 3px 0 #000;opacity:0;transition:opacity .15s steps(2)}
.px-ach-stage .shot:hover .tip,.px-ach-stage .shot:focus-visible .tip{opacity:1;animation:pxFloat 1.2s steps(4) infinite}
.px-ach-stage .burst i{position:absolute;left:50%;top:50%;width:8px;height:8px;background:var(--gold);opacity:0}
.px-ach-stage .shot.pop .burst i{animation:pxBurst .6s steps(6)}
.px-ach-stage .burst i:nth-child(1){--bx:-140px;--by:-90px}.px-ach-stage .burst i:nth-child(2){--bx:150px;--by:-80px}.px-ach-stage .burst i:nth-child(3){--bx:-160px;--by:70px}
.px-ach-stage .burst i:nth-child(4){--bx:140px;--by:90px}.px-ach-stage .burst i:nth-child(5){--bx:0;--by:-130px;background:var(--cyan)}.px-ach-stage .burst i:nth-child(6){--bx:0;--by:130px;background:var(--cyan)}
@keyframes pxBurst{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(var(--bx),var(--by))}}
.px-ach-stage .nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin:16px 0 12px}
.px-ach-stage .ttl{font-family:var(--pix);font-size:clamp(11px,1.5vw,14px);line-height:1.6;color:var(--tgold);text-align:center}
.px-ach-stage .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.px-ach-stage .dots{display:flex;gap:4px}
.px-ach-stage .dots i{width:16px;height:8px;background:var(--ln2)}
.px-ach-stage .dots i.on{background:var(--cyan)}
.px-ach-stage .dots i.cur{background:var(--gold)}
.px-ach-stage .acts{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:900px){
  .px-ach{grid-template-columns:1fr}
  .px-ach-list{flex-direction:row;overflow-x:auto;padding:4px 4px 12px;scroll-snap-type:x mandatory}
  .px-ach-list button{flex:0 0 auto;width:auto;grid-template-columns:auto auto;scroll-snap-align:start}
  .px-ach-list .gem{display:none}
  .px-ach-list button:hover,.px-ach-list button[aria-selected=true]{transform:translateY(-3px);box-shadow:0 4px 0 var(--gold)}
}
@media (prefers-reduced-motion:reduce){.pxv .px-ach-stage{opacity:1!important;transform:none!important}}


/* ===== WEBSITES: MAINTENANCE ===== */
.px-maint{display:grid;grid-template-columns:1fr 1.1fr;gap:30px;align-items:center;padding:clamp(20px,4vw,40px)}
.px-maint .kick{font-family:var(--mono);font-size:12px;color:var(--tgreen);margin-bottom:10px}
.px-maint h3{font-family:var(--pix);font-size:clamp(15px,2.4vw,22px);line-height:1.6;color:var(--tgold)}
.px-maint p{margin-top:14px;color:var(--tx2)}
.px-maint .mini{font-family:var(--pix);font-size:8px;color:var(--tcyan);animation:pxBlink 1.2s steps(1) infinite}
.px-maint .load{margin-top:22px;display:flex;gap:4px;padding:5px;border:3px solid var(--frame);width:max-content}
.px-maint .load i{width:12px;height:14px;background:var(--ln2);animation:pxLoad 3s steps(1) infinite}
.px-maint .scene{position:relative;height:280px;background:#0c1020;border:4px solid #2e3566;overflow:hidden}
.px-maint .stripes{position:absolute;left:0;right:0;top:0;height:18px;background:repeating-linear-gradient(45deg,#FFDA78 0 14px,#101426 14px 28px);animation:pxStripe 1s steps(4) infinite;border-bottom:3px solid #000}
.px-maint .stripes.b{top:auto;bottom:26px;height:12px;border-bottom:0;border-top:3px solid #000;opacity:.85}
@keyframes pxStripe{to{background-position:28px 0}}
.px-maint .mon{position:absolute;left:50%;top:44px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.px-maint .scr{width:200px;height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#020308;border:6px solid #3a3f6e;box-shadow:0 0 0 4px #000}
.px-maint .err{font-family:var(--pix);font-size:10px;line-height:1.7;color:#FF7F91;text-align:center;animation:pxBlink 1s steps(1) infinite}
.px-maint .scr .bar{width:120px;height:10px;border:2px solid #F4F0E8;padding:1px}
.px-maint .scr .bar i{display:block;height:100%;width:0;background:#89F0A0;animation:pxFillBar 3s steps(10) infinite}
@keyframes pxFillBar{to{width:100%}}
.px-maint .mon .stand{width:40px;height:14px;background:#262a4d;border:3px solid #000;border-top:0}
.px-maint .bot{position:absolute;left:12%;bottom:38px}
.px-maint .tool{position:absolute;left:calc(12% + 54px);bottom:84px;transform-origin:bottom left;animation:pxHammer .6s steps(2) infinite}
.px-maint .sparks i{position:absolute;bottom:60px;width:6px;height:6px;background:#FFDA78;opacity:0;animation:pxSparkUp 1.5s steps(5) infinite}
@keyframes pxSparkUp{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-60px)}}
.px-maint .gnd{position:absolute;left:0;right:0;bottom:0;height:26px;background:repeating-linear-gradient(90deg,#2b3a2b 0 16px,#334a33 16px 32px);border-top:5px solid #4fb867}

/* ===== CONTACT: EMAILJS LAYOUT ===== */
.px-contact2{display:grid;grid-template-columns:.95fr 1.05fr;gap:26px;align-items:start}
.px-contact2 .px-quest-panel{max-width:none;margin:0}
.px-contact2 .px-copts{grid-template-columns:1fr 1fr}
.px-cp-label{font-family:var(--pix);font-size:9px;color:var(--tcyan);margin:0 0 12px}
.pxv .px-booklink{display:flex;align-items:center;gap:14px;margin-top:18px;padding:14px 16px;text-decoration:none;color:var(--tx);background:var(--slot);border:3px dashed var(--tgold);transition:border-color .15s steps(2),transform .15s steps(2)}
.pxv .px-booklink b{font-family:var(--pix);font-size:9px;font-weight:400;color:var(--tgold);display:block;margin-top:6px}
.pxv .px-booklink .arr{margin-left:auto;font-family:var(--pix);color:var(--tgold);transition:transform .2s steps(2)}
.pxv .px-booklink:hover{border-style:solid;transform:translateY(-3px)}
.pxv .px-booklink:hover .arr{transform:translateX(6px)}
.px-ejs{padding:clamp(20px,3vw,32px)}
.px-ejs .fhead{margin-bottom:20px}
.px-ejs .ft{font-family:var(--pix);font-size:clamp(12px,1.6vw,15px);line-height:1.6;color:var(--tgold)}
.px-ejs .fs{margin-top:8px;font-size:15px;color:var(--tx2)}
.px-ejs .sel{display:none;margin:0 0 16px;font-family:var(--pix);font-size:8px;line-height:1.7;color:var(--navy);background:var(--green);padding:8px 10px}
.px-ejs .sel.show{display:block;animation:pxPop .3s steps(3)}
.px-ejs .px-field{position:relative}
.px-ejs .count{position:absolute;right:8px;top:0;font-family:var(--mono);font-size:11px;color:var(--tx3)}
.px-ejs .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.px-ejs .submit:disabled{cursor:wait;filter:saturate(.7)}
.px-ejs .px-status b{font-family:var(--pix);font-size:9px;font-weight:400}
.px-ejs .px-status b.em{display:inline;margin:0;font-family:var(--body);font-size:inherit;font-weight:700}
.px-ejs .px-status.ok{border-color:var(--green);animation:pxPop .3s steps(3)}
.px-ejs .px-status.ok>b:first-child{color:var(--tgreen)}
.px-ejs .px-status.bad>b:first-child{color:var(--coral)}
.px-ejs .px-status a{color:var(--tcyan)}
.px-ejs .px-field select option{background:var(--slot);color:var(--tx)}
html[data-px-theme=light] .px-ejs .px-field input,html[data-px-theme=light] .px-ejs .px-field select,html[data-px-theme=light] .px-ejs .px-field textarea{background:#fff}
@media (max-width:1024px){.px-contact2{grid-template-columns:1fr}.px-maint{grid-template-columns:1fr}}
@media (max-width:520px){.px-contact2 .px-copts{grid-template-columns:1fr}.px-maint .scr{width:170px}}


/* ===== EDUCATION: SCHOOL LINKS ===== */
.px-degree .school{margin-top:10px;font-family:var(--body);font-size:16px;font-weight:700;color:var(--tx)}
.px-degree .school+.major{margin-top:4px}
.px-school-links{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pxv .px-school-links a{display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;color:var(--tx);background:var(--slot);border:3px solid var(--ln);box-shadow:4px 4px 0 #05070f;font-size:15px;font-weight:500;transition:border-color .15s steps(2),transform .15s steps(2)}
.pxv .px-school-links a small{display:block;font-family:var(--pix);font-size:7px;font-weight:400;color:var(--tcyan);margin-bottom:5px}
.pxv .px-school-links a .arr{margin-left:auto;color:var(--tgold);transition:transform .15s steps(2)}
.pxv .px-school-links a:hover,.pxv .px-school-links a:focus-visible{border-color:var(--tcyan);transform:translateY(-3px)}
.pxv .px-school-links a:hover .arr{transform:translate(3px,-3px)}
.px-edu.in .px-school-links a{animation:pxPop .4s steps(4) backwards}
.px-edu.in .px-school-links a:nth-child(2){animation-delay:.12s}
@media (max-width:520px){.px-school-links{grid-template-columns:1fr}}


/* ===== WORKFLOWS NAVIGATOR ===== */
.px-wfx .px-ach-list{max-height:680px;overflow-y:auto;padding-right:6px;scrollbar-width:thin}
.px-wfx .px-ach-list .gem.demo{background:var(--cyan)}
.px-wfx .shots{display:grid;gap:12px}
.px-wfx .shots.pair{grid-template-columns:1fr 1fr}
.px-wfx .shots .tag{position:absolute;left:8px;top:8px;z-index:3;font-family:var(--pix);font-size:7px;color:var(--navy);background:var(--gold);padding:4px 6px;box-shadow:2px 2px 0 #000}
.px-wfx .shots.pair .shot{aspect-ratio:4/5;max-height:440px}
.px-wfx .desc{margin:0 0 16px;font-size:16px;color:var(--tx2);text-align:center;max-width:62ch;margin-left:auto;margin-right:auto}
.px-wfx .badge{white-space:nowrap}

/* ===== FAQ 3 COLUMNS ===== */
.px-faq3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.px-fcol{padding:16px}
.px-fcol .fh{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:4px 4px 14px;margin-bottom:14px;border-bottom:3px dashed var(--ln)}
.px-fcol .fh .ic{width:44px;height:44px;display:grid;place-items:center;background:var(--slot);border:3px solid var(--ln)}
.px-fcol .fh h3{font-family:var(--pix);font-size:10px;line-height:1.6;color:var(--tgold)}
.px-fcol .fh small{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;color:var(--tcyan)}
.px-fcol .fh .sp.react{animation:pxHop .45s steps(3) 2}
.px-fcol .fl{display:grid;gap:10px}
.px-fcol .px-fq h4{margin:0}
.px-fcol .px-fq button{padding:14px 12px 14px 36px;font-size:9px;gap:10px}
.px-fcol .px-fq .pt{left:10px}
.px-fcol .px-fq .ans{padding:0 14px 16px 36px;font-size:15px}
.px-fcol .px-fq{box-shadow:4px 4px 0 #000}

/* ===== RESUME BUTTON ===== */
.px-hero .ctas .px-resume .art{margin-right:2px}
@media (max-width:1100px){.px-faq3{grid-template-columns:1fr}}
@media (max-width:900px){.px-wfx .px-ach-list{max-height:none;overflow-y:visible}}
@media (max-width:720px){.px-wfx .shots.pair{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.px-wfx .shots.pair .shot{flex:0 0 86%;scroll-snap-align:start}}


/* ===== TESTIMONIALS: 3 COLUMNS ===== */
.px-tst3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.px-tcard{position:relative;margin:0;display:flex;flex-direction:column;gap:14px;padding:26px 22px 22px;opacity:0;transition:border-color .2s steps(2),transform .2s steps(2)}
.px-tcard.in{opacity:1;animation:pxQuestIn .6s steps(6) backwards}
.px-tcard:hover{border-color:var(--tgold);transform:translateY(-6px)}
.px-tcard .tg{position:absolute;top:-14px;left:18px;font-family:var(--pix);font-size:8px;color:var(--navy);background:var(--gold);padding:6px 8px;box-shadow:3px 3px 0 #000}
.px-tcard:nth-child(2) .tg{background:var(--cyan)}
.px-tcard:nth-child(3) .tg{background:var(--green)}
.px-tcard .hd{display:flex;align-items:center;gap:12px}
.px-tcard .av{width:64px;height:64px;display:grid;place-items:center;background:var(--slot);border:4px solid var(--purple)}
.px-tcard .ic{width:40px;height:40px;display:grid;place-items:center;background:var(--slot);border:3px solid var(--ln)}
.px-tcard .q{margin-top:4px}
.px-tcard blockquote{margin:0;flex:1;font-size:16px;line-height:1.7;color:var(--tx)}
.px-tcard .hl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.px-tcard .hl li{font-family:var(--pix);font-size:7px;line-height:1.5;color:var(--tgreen);background:var(--slot);border:2px solid var(--ln);padding:6px 7px}
.px-tcard .hl li::before{content:"★ ";color:var(--tgold)}
.px-tcard figcaption{padding-top:14px;border-top:3px dashed var(--ln)}
.px-tcard figcaption b{display:block;font-family:var(--pix);font-size:9px;font-weight:400;line-height:1.6;color:var(--tgold)}
.px-tcard figcaption small{display:block;margin-top:4px;font-family:var(--mono);font-size:12px;color:var(--tcyan)}
.px-tcard .cur{position:absolute;right:14px;bottom:12px;font-size:11px;color:var(--tx);animation:pxBlink .8s steps(1) infinite}
@media (max-width:1024px){.px-tst3{grid-template-columns:1fr;gap:32px}}
@media (prefers-reduced-motion:reduce){.pxv .px-tcard{opacity:1!important}}


/* ===== TECH STACK: OFFICIAL LOGOS ===== */
.px-slot .mono.lgt,.px-equip .big.lgt{position:relative;background:#FBF8F2;box-shadow:inset -3px -3px 0 #d9d2c3,inset 3px 3px 0 #fff,3px 3px 0 #000}
.px-slot .mono.lgt{width:52px;height:52px}
.px-slot .mono.lgt .lg{width:34px;height:34px;object-fit:contain;display:block}
.px-equip .big.lgt{width:96px;height:96px}
.px-equip .big.lgt .lg{width:62px;height:62px;object-fit:contain;display:block}
.pxv .lgt .lg-code{font-family:var(--pix);font-size:10px;color:var(--navy)}
.px-equip .big.lgt .lg-code{font-size:16px}
.lgt .badge{position:absolute;right:-8px;bottom:-8px;font-family:var(--pix);font-size:7px;line-height:1;color:var(--navy);background:var(--green);padding:4px 4px;border:2px solid #000}
.px-equip .big.lgt .badge{font-size:9px;padding:5px 6px}
.px-slot:hover .mono.lgt{animation:pxHop .45s steps(3)}


/* ===== OTHER PROJECTS: BOOKING DEMO ===== */
.px-oproj{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;padding:clamp(18px,3vw,30px);opacity:0;transform:translateY(20px)}
.px-oproj.in{opacity:1;transform:none;transition:opacity .5s steps(5),transform .5s steps(5)}
.px-oproj .scr{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;border:6px solid #000;box-shadow:0 0 0 4px #3a3f6e,8px 8px 0 4px #000;cursor:pointer;padding:0;background:#7fd4f5}
.px-oproj .sky{position:absolute;inset:0 0 40% 0;background:linear-gradient(180deg,#5cc2ee,#a8e4f7)}
.px-oproj .sun{position:absolute;right:14%;top:16%;width:54px;height:54px;background:#FFDA78;box-shadow:0 0 0 6px rgba(255,218,120,.35);animation:pxBounce 3s steps(4) infinite}
.px-oproj .bird{position:absolute;width:14px;height:4px;background:#101426;animation:pxBirdFly 9s steps(36) infinite}
.px-oproj .bird.b1{top:20%;left:-10%}.px-oproj .bird.b2{top:30%;left:-20%;animation-delay:2.5s}
@keyframes pxBirdFly{to{transform:translateX(900px)}}
.px-oproj .sea{position:absolute;left:0;right:0;top:60%;bottom:18%;background:#2f8fd8;display:flex;flex-direction:column;justify-content:space-evenly;overflow:hidden}
.px-oproj .sea i{display:block;height:4px;width:140%;background:repeating-linear-gradient(90deg,#9fe3ff 0 18px,transparent 18px 40px);animation:pxWaves 2.4s steps(8) infinite}
@keyframes pxWaves{to{transform:translateX(-40px)}}
.px-oproj .sand{position:absolute;left:0;right:0;bottom:0;height:18%;background:repeating-linear-gradient(90deg,#f2d38f 0 16px,#e9c77d 16px 32px);border-top:5px solid #fff1c9}
.px-oproj .palm{position:absolute;left:8%;bottom:12%;transform-origin:bottom center;animation:pxSway 3s steps(4) infinite}
@keyframes pxSway{50%{transform:rotate(-4deg)}}
.px-oproj .url{position:absolute;left:10px;top:10px;font-family:var(--pix);font-size:8px;color:#101426;background:#F4F0E8;padding:6px 8px;box-shadow:3px 3px 0 #000}
.px-oproj .play{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:76px;height:76px;display:grid;place-items:center;background:#FFDA78;box-shadow:inset -5px -5px 0 #d9a93f,5px 5px 0 #000;animation:pxPulse 1.4s steps(3) infinite}
.px-oproj .lbl{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);font-family:var(--pix);font-size:9px;color:#F4F0E8;background:#101426;padding:6px 8px;opacity:0;transition:opacity .15s steps(2)}
.px-oproj .scr:hover .lbl,.px-oproj .scr:focus-visible .lbl{opacity:1}
.px-oproj .scr:focus-visible{outline:3px solid var(--gold);outline-offset:6px}
.px-oproj .bd{display:flex;flex-direction:column;gap:12px}
.px-oproj .kick{font-family:var(--mono);font-size:12px;color:var(--tgreen)}
.px-oproj h4{margin:0;font-family:var(--pix);font-size:clamp(12px,1.6vw,15px);line-height:1.6;color:var(--tgold)}
.px-oproj p{font-size:16px;color:var(--tx2)}
.px-oproj .steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.px-oproj .steps li{position:relative;padding-left:22px;font-size:15px;color:var(--tx2)}
.px-oproj .steps li::before{content:"■";position:absolute;left:0;top:0;color:var(--tcyan);font-size:11px}
.px-oproj .steps b{color:var(--tx)}
.px-oproj .wip{font-size:14px;color:var(--tx3);border-left:4px solid var(--gold);padding-left:10px}
.px-oproj .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
@media (max-width:900px){.px-oproj{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pxv .px-oproj{opacity:1!important;transform:none!important}}


/* ===== GITHUB LINKS ===== */


/* ===== GITHUB LINKS ===== */
.px-console .ic-gh{animation:pxHop 1.6s steps(4) infinite}
.px-contact2 .px-copts .gh{grid-column:1/-1}
.px-copts .gh .art{animation:pxFloat 2.2s steps(5) infinite}
.px-copts .gh .ic::after{content:"</>";position:absolute;left:52px;top:12px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--tgreen);animation:pxBlink 1.2s steps(1) infinite}



/* ===== WEBSITES: SMILEY ===== */
.px-site-card{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;padding:clamp(18px,3vw,30px);opacity:0;transform:translateY(24px)}
.px-site-card.in{opacity:1;transform:none;transition:opacity .5s steps(5),transform .5s steps(5)}
.px-site-card .mock{position:relative;display:flex;flex-direction:column;text-decoration:none;border:5px solid #000;box-shadow:0 0 0 4px #3a3f6e,10px 10px 0 4px #000;background:#fff;align-self:start;position:sticky;top:96px;transition:transform .2s steps(2)}
.px-site-card .mock:hover{transform:translate(-3px,-3px)}
.px-site-card .mock:focus-visible{outline:3px solid var(--gold);outline-offset:8px}
.px-site-card .chrome{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#262a4d;border-bottom:4px solid #000}
.px-site-card .chrome>i{width:10px;height:10px;background:#FF7F91}.px-site-card .chrome>i:nth-child(2){background:#FFDA78}.px-site-card .chrome>i:nth-child(3){background:#89F0A0}
.px-site-card .url{flex:1;margin-left:8px;min-height:22px;display:flex;align-items:center;padding:4px 8px;background:#101426;font-family:var(--mono);font-size:12px;color:#F4F0E8}
.px-site-card .url .caret{width:7px;height:13px;margin-left:2px;background:#55E6E9;animation:pxBlink .8s steps(1) infinite}
.px-site-card .screen{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px;min-height:330px;overflow:hidden;background:linear-gradient(180deg,#e9f7ff,#fff4f8)}
.px-site-card .screen .nav{display:flex;align-items:center;gap:8px;font-family:var(--pix);font-size:9px;color:#2f8fd8}
.px-site-card .screen .nav b{font-weight:400;margin-right:auto;color:#ff6fa0}
.px-site-card .screen .nav i{width:28px;height:6px;background:#cfe6f5}
.px-site-card .screen .nav em{font-style:normal;font-size:7px;color:#fff;background:#ff6fa0;padding:5px 7px;box-shadow:2px 2px 0 #c94d7c}
.px-site-card .hero{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;min-height:170px}
.px-site-card .hero .txt{display:flex;flex-direction:column;gap:8px;z-index:2}
.px-site-card .hero small{font-family:var(--pix);font-size:6px;color:#2f8fd8}
.px-site-card .hero strong{font-family:var(--pix);font-size:clamp(10px,1.3vw,13px);line-height:1.6;color:#1d2b5c}
.px-site-card .hero .btns{display:flex;gap:6px}
.px-site-card .hero u{text-decoration:none;font-family:var(--pix);font-size:6px;color:#fff;background:#ff6fa0;padding:6px 7px;box-shadow:2px 2px 0 #c94d7c}
.px-site-card .hero u.alt{background:#2fb7a5;box-shadow:2px 2px 0 #1e7d70}
.px-site-card .tooth{position:relative;z-index:2;margin-right:10px;filter:drop-shadow(3px 0 0 #1d2b5c) drop-shadow(-3px 0 0 #1d2b5c) drop-shadow(0 3px 0 #1d2b5c) drop-shadow(0 -3px 0 #1d2b5c);animation:pxToothBounce 1.4s steps(4) infinite}
@keyframes pxToothBounce{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-10px) rotate(-4deg)}75%{transform:translateY(-4px) rotate(4deg)}}
.px-site-card .sparks i{position:absolute;width:6px;height:6px;background:#FFDA78;box-shadow:0 0 0 2px rgba(255,218,120,.35);animation:pxTw 1.4s steps(3) infinite}
.px-site-card .germ{position:absolute;z-index:1;animation:pxGermMove 4s steps(16) infinite}
.px-site-card .germ .pop{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:3px dashed #89F0A0;opacity:0;animation:pxGermPop 4s steps(1) infinite}
.px-site-card .germ.g0{left:46%;top:8%}.px-site-card .germ.g1{left:88%;top:12%;animation-delay:1s}.px-site-card .germ.g2{left:56%;top:70%;animation-delay:2s}.px-site-card .germ.g3{left:92%;top:66%;animation-delay:3s}
.px-site-card .germ.g1 .pop{animation-delay:1s}.px-site-card .germ.g2 .pop{animation-delay:2s}.px-site-card .germ.g3 .pop{animation-delay:3s}
@keyframes pxGermMove{0%{transform:translate(0,0) scale(1);opacity:1}40%{transform:translate(-14px,8px) scale(1);opacity:1}60%{transform:translate(-14px,8px) scale(1.4);opacity:0}100%{transform:translate(0,0);opacity:0}}
@keyframes pxGermPop{0%,55%{opacity:0}56%,65%{opacity:1}66%,100%{opacity:0}}
.px-site-card .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;perspective:600px}
.px-site-card .fc{position:relative;height:58px;transform-style:preserve-3d;transition:transform .5s steps(6)}
.px-site-card .fc.flip{transform:rotateY(180deg)}
.px-site-card .fc .f,.px-site-card .fc .b{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:4px;font-family:var(--pix);font-size:6px;line-height:1.5;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:3px solid #1d2b5c}
.px-site-card .fc .f{background:#fff;color:#1d2b5c}
.px-site-card .fc .b{background:#ff6fa0;color:#fff;transform:rotateY(180deg)}
.px-site-card .fc:nth-child(2) .b{background:#2fb7a5}.px-site-card .fc:nth-child(3) .b{background:#2f8fd8}
.px-site-card .visit{position:absolute;right:12px;bottom:12px;font-family:var(--pix);font-size:8px;color:#101426;background:#FFDA78;padding:7px 9px;box-shadow:3px 3px 0 #000;opacity:0;transform:translateY(6px);transition:all .2s steps(3)}
.px-site-card .mock:hover .visit,.px-site-card .mock:focus-visible .visit{opacity:1;transform:none}
.px-site-card .bd{display:flex;flex-direction:column;gap:12px}
.px-site-card .kick{font-family:var(--mono);font-size:12px;color:var(--tgreen)}
.px-site-card h4{margin:0;font-family:var(--pix);font-size:clamp(16px,2.2vw,22px);line-height:1.4;color:var(--tgold);text-shadow:3px 3px 0 var(--purple-d)}
.px-site-card p{font-size:16px;color:var(--tx2)}
.px-site-card .feats{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.px-site-card .feats li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;font-size:15px;color:var(--tx2);opacity:0;transform:translateX(-12px)}
.px-site-card.in .feats li{opacity:1;transform:none;transition:opacity .35s steps(3),transform .35s steps(3)}
.px-site-card.in .feats li:nth-child(2){transition-delay:.1s}.px-site-card.in .feats li:nth-child(3){transition-delay:.2s}.px-site-card.in .feats li:nth-child(4){transition-delay:.3s}.px-site-card.in .feats li:nth-child(5){transition-delay:.4s}.px-site-card.in .feats li:nth-child(6){transition-delay:.5s}
.px-site-card .feats .ic{width:28px;height:28px;display:grid;place-items:center;background:var(--slot);border:2px solid var(--ln)}
.px-site-card .feats b{color:var(--tx)}
.px-site-card .tags{display:flex;flex-wrap:wrap;gap:8px}
.px-site-card .tags span{font-family:var(--pix);font-size:7px;color:var(--tcyan);background:var(--slot);border:2px solid var(--ln);padding:6px 7px}
.px-site-card .acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:auto}
.px-site-card .addr{font-family:var(--mono);font-size:12px;color:var(--tx3)}
@media (max-width:900px){.px-site-card{grid-template-columns:1fr}.px-site-card .mock{position:relative;top:0}}
@media (prefers-reduced-motion:reduce){.pxv .px-site-card,.pxv .px-site-card .feats li{opacity:1!important;transform:none!important}}


/* ===== WEBSITES: PURRFECT HOME ===== */
.px-site-card+.px-site-card{margin-top:40px}
.px-site-card.purr .mock{overflow:hidden}
.px-site-card.purr .screen{background:radial-gradient(ellipse at 80% 0%,#fff1d6,transparent 60%),linear-gradient(180deg,#FFF8EC,#f3fbef);min-height:420px;gap:9px}
.px-site-card.purr .nav{display:flex;align-items:center;gap:8px;font-family:var(--pix);font-size:8px}
.px-site-card.purr .nav b{display:flex;align-items:center;gap:6px;font-weight:400;margin-right:auto;color:#1F4A2C}
.px-site-card.purr .nav b .art{animation:pxBeat 1s steps(2) infinite}
@keyframes pxBeat{50%{transform:scale(1.3)}}
.px-site-card.purr .nav>i{width:24px;height:6px;background:#d8e8d2}
.px-site-card.purr .cart{position:relative;display:grid;place-items:center;width:24px;height:20px;background:#1F4A2C}
.px-site-card.purr .cart em{position:absolute;right:-7px;top:-7px;font-style:normal;font-family:var(--pix);font-size:6px;color:#fff;background:#FF7F91;padding:3px 4px}
.px-site-card.purr .cart em.bump{animation:pxBump .4s steps(3)}
@keyframes pxBump{50%{transform:scale(1.6) rotate(-10deg)}}
.px-site-card.purr .nav s{text-decoration:none;font-size:7px;color:#fff;background:#e0912f;padding:5px 7px;box-shadow:2px 2px 0 #9c6214}
.px-site-card.purr .hero{position:relative;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;min-height:150px}
.px-site-card.purr .hero .txt{display:flex;flex-direction:column;gap:8px;z-index:2}
.px-site-card.purr .hero small{display:flex;align-items:center;gap:6px;font-family:var(--pix);font-size:6px;color:#1F4A2C;background:#e3f2dc;border:2px solid #1F4A2C;padding:4px 6px;width:max-content}
.px-site-card.purr .hero .dot{width:6px;height:6px;background:#3ccf6e;animation:pxBlink .7s steps(1) infinite}
.px-site-card.purr .hero strong{font-family:var(--pix);font-size:clamp(10px,1.35vw,14px);line-height:1.6;color:#1F4A2C}
.px-site-card.purr .hero .hl{color:#e0912f;display:inline-block;animation:pxWobble 2.4s steps(4) infinite}
@keyframes pxWobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-2deg) translateY(-2px)}75%{transform:rotate(2deg)}}
.px-site-card.purr .hero .btns{display:flex;gap:6px}
.px-site-card.purr .hero u{text-decoration:none;font-family:var(--pix);font-size:6px;color:#fff;background:#1F4A2C;padding:6px 7px;box-shadow:2px 2px 0 #0d2516}
.px-site-card.purr .hero u.alt{background:#e0912f;box-shadow:2px 2px 0 #9c6214}
.px-site-card.purr .hero .stars{font-family:var(--pix);font-size:6px;color:#e0912f}
.px-site-card.purr .frame{position:relative;width:132px;height:112px;display:grid;place-items:center;background:#ffe9c7;border:4px solid #1F4A2C;box-shadow:4px 4px 0 #0d2516;margin-right:6px}
.px-site-card.purr .frame .sp{position:absolute;animation:pxSwapA 4s steps(1) infinite}
.px-site-card.purr .frame .sp.dog{animation-name:pxSwapB}
@keyframes pxSwapA{0%,49%{opacity:1;transform:scale(1)}50%,100%{opacity:0;transform:scale(.4)}}
@keyframes pxSwapB{0%,49%{opacity:0;transform:scale(.4)}50%,100%{opacity:1;transform:scale(1)}}
.px-site-card.purr .frame .ring{position:absolute;inset:-12px;border:3px dashed #e0912f;animation:pxSpin 6s steps(24) infinite}
.px-site-card.purr .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.px-site-card.purr .stats>span{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;background:#fff;border:2px solid #1F4A2C;font-family:var(--pix);font-size:5px;color:#4a6b55;text-align:center}
.px-site-card.purr .stats b{font-weight:400;font-size:10px;color:#1F4A2C}
.px-site-card.purr .filter{display:flex;gap:6px}
.px-site-card.purr .filter em{font-style:normal;font-family:var(--pix);font-size:6px;color:#1F4A2C;background:#fff;border:2px solid #1F4A2C;padding:4px 6px;transition:all .2s steps(2)}
.px-site-card.purr .filter em.on{color:#fff;background:#1F4A2C;transform:translateY(-2px)}
.px-site-card.purr .pets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.px-site-card.purr .pet{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 6px;background:#fff;border:2px solid #1F4A2C;box-shadow:3px 3px 0 #0d2516;min-height:74px}
.px-site-card.purr .pet .sp{display:none;height:20px}
.px-site-card.purr .pet.cat .sp.cat,.px-site-card.purr .pet.dog .sp.dog{display:block}
.px-site-card.purr .pet.swap{animation:pxPetIn .45s steps(4)}
@keyframes pxPetIn{0%{transform:rotateY(90deg) scale(.8)}100%{transform:none}}
.px-site-card.purr .pet b{font-family:var(--pix);font-size:6px;font-weight:400;color:#1F4A2C}
.px-site-card.purr .pet u{text-decoration:none;font-family:var(--pix);font-size:5px;color:#fff;background:#e0912f;padding:3px 5px}
.px-site-card.purr .ground{position:relative;height:46px;margin:0 -12px -12px;background:linear-gradient(180deg,transparent 60%,#bfe3a8 60%);border-bottom:6px solid #7cc35a;overflow:hidden}
.px-site-card.purr .paws i{position:absolute;opacity:0;animation:pxPaw 2.4s steps(1) infinite}
@keyframes pxPaw{0%{opacity:0}10%,60%{opacity:.55}61%,100%{opacity:0}}
.px-site-card.purr .yarn{position:absolute;bottom:6px;left:-20px;animation:pxRunYarn 6s linear infinite}
.px-site-card.purr .yarn .art{animation:pxSpin .8s steps(8) infinite}
.px-site-card.purr .runcat{position:absolute;bottom:6px;left:-70px;animation:pxRunYarn 6s linear infinite .35s}
.px-site-card.purr .rundog{position:absolute;bottom:6px;left:-120px;animation:pxRunYarn 6s linear infinite .8s}
@keyframes pxRunYarn{from{transform:translateX(0)}to{transform:translateX(calc(100cqw + 160px))}}
.px-site-card.purr .screen{container-type:inline-size}
.px-site-card.purr .hearts i{position:absolute;bottom:-20px;opacity:0;animation:pxHeartUp 3.6s steps(12) infinite;pointer-events:none}
@keyframes pxHeartUp{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.85}100%{transform:translateY(-440px) scale(1.2);opacity:0}}
.px-site-card.purr .burst{position:absolute;inset:0;pointer-events:none;z-index:6}
.px-site-card.purr .burst i{position:absolute;width:8px;height:8px;box-shadow:2px 2px 0 rgba(0,0,0,.25);animation:pxBurstOut .9s steps(9) forwards}
@keyframes pxBurstOut{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--bx),var(--by)) scale(.3);opacity:0}}
.px-site-card.purr .wipe{position:absolute;inset:0;z-index:7;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(6,1fr);pointer-events:none}
.px-site-card.purr .wipe i{background:#1F4A2C;transition:transform .2s steps(2)}
.px-site-card.purr .wipe i:nth-child(3n){background:#e0912f}.px-site-card.purr .wipe i:nth-child(5n){background:#7756D8}
.px-site-card.purr.in .wipe i{transform:scale(0)}
.px-site-card.purr.in .mock{animation:pxMockPop .8s steps(6) .2s backwards}
@keyframes pxMockPop{0%{transform:scale(.85) rotate(-2deg)}60%{transform:scale(1.03) rotate(1deg)}100%{transform:none}}
.px-site-card.purr h4{animation:pxWobble 3s steps(4) infinite}
@media (prefers-reduced-motion:reduce){.px-site-card.purr .wipe{display:none}}


/* ===== WEBSITES: PAGINATION ===== */
.px-pager{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 22px}
.px-pager .nums{display:flex;gap:6px}
.px-pager .pn{width:38px;height:38px;font-family:var(--pix);font-size:11px;color:var(--tx);background:var(--slot);border:3px solid var(--ln);cursor:pointer;box-shadow:3px 3px 0 #000;transition:transform .08s steps(1)}
.px-pager .pn:hover{border-color:var(--tcyan)}
.px-pager .pn.on{color:var(--navy);background:var(--gold);border-color:#000;animation:pxBump .35s steps(3)}
.px-pager .pn:active{transform:translate(3px,3px);box-shadow:none}
.px-pager .pn:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.px-pager .px-mini:disabled{opacity:.35;cursor:not-allowed;transform:none}
.px-pager .info{display:flex;align-items:center;gap:10px;margin-left:auto}
.px-pager .pg{font-family:var(--pix);font-size:9px;font-weight:400;color:var(--tcyan)}
.px-pager .bar{width:110px;height:10px;padding:2px;border:2px solid var(--ln);background:var(--slot)}
.px-pager .bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--green) 0 6px,var(--cyan) 6px 12px);transition:width .4s steps(6)}
.px-sites{position:relative}
.px-pagewipe{position:absolute;inset:-6px;z-index:9;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,1fr);pointer-events:none}
.px-pagewipe i{background:var(--purple);transform:scale(0);transition:transform .16s steps(2)}
.px-pagewipe i:nth-child(3n){background:var(--purple-d)}.px-pagewipe i:nth-child(7n){background:var(--cyan)}.px-pagewipe i:nth-child(11n){background:var(--gold)}
.px-pagewipe.cover i{transform:scale(1.02)}
.px-pagewipe .lbl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--pix);font-size:12px;font-weight:400;color:var(--navy);background:var(--gold);padding:10px 14px;box-shadow:4px 4px 0 #000;opacity:0;transition:opacity .1s steps(1)}
.px-pagewipe.cover .lbl{opacity:1;transition-delay:.2s;animation:pxBlink .4s steps(1) infinite .2s}
.px-site-card.pagein{animation:pxPageIn .5s steps(5)}
@keyframes pxPageIn{from{transform:translateX(40px);opacity:0}}
@media (max-width:600px){.px-pager .info{margin-left:0;width:100%}}

/* ===== TESTIMONIAL PHOTO (pixelated) ===== */
.px-tcard .av.photo{position:relative;overflow:hidden;padding:0;background:#0b0e1c}
.px-tcard .av.photo img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;image-rendering:crisp-edges;filter:contrast(1.12) saturate(1.2)}
.px-tcard .av.photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(16,20,38,.22) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 2px rgba(255,218,120,.35)}
.px-tcard:hover .av.photo img{animation:pxHop .45s steps(3)}
.px-tcard .av .lg-code{font-family:var(--pix);font-size:12px;color:var(--tgold)}

.pxv .px-tcard .fbl{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:7px 9px;text-decoration:none;font-family:var(--pix);font-size:7px;color:var(--tx);background:var(--slot);border:2px solid var(--ln);box-shadow:3px 3px 0 #000;transition:border-color .15s steps(2),transform .15s steps(2)}
.pxv .px-tcard .fbl:hover,.pxv .px-tcard .fbl:focus-visible{border-color:#1877f2;transform:translateY(-2px)}
.pxv .px-tcard .fbl .art{animation:pxHop 1.6s steps(3) infinite}
/* hidden pages must stay hidden even when a class sets display */
.pxv [hidden]{display:none!important}

/* ===== WEBSITES: SIPPORA ===== */
.px-site-card.sip .mock{overflow:hidden}
.px-site-card.sip .screen{background:radial-gradient(ellipse at 85% 10%,#f9e3c6,transparent 55%),linear-gradient(180deg,#f6ecdf,#efe0cc);min-height:420px;gap:9px;container-type:inline-size}
.px-site-card.sip .nav{display:flex;align-items:center;gap:8px;font-family:var(--pix);font-size:8px}
.px-site-card.sip .nav b{display:flex;align-items:center;gap:6px;font-weight:400;margin-right:auto;color:#3b2416}
.px-site-card.sip .nav>i{width:24px;height:6px;background:#e3cfb4}
.px-site-card.sip .cart{position:relative;font-family:var(--pix);font-size:6px;color:#f6ecdf;background:#3b2416;padding:5px 7px}
.px-site-card.sip .cart em{position:absolute;right:-7px;top:-7px;font-style:normal;color:#fff;background:#c8894b;padding:3px 4px}
.px-site-card.sip .cart em.bump{animation:pxBump .4s steps(3)}
.px-site-card.sip .hero{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;min-height:160px}
.px-site-card.sip .hero .txt{display:flex;flex-direction:column;gap:8px;z-index:2}
.px-site-card.sip .hero small{font-family:var(--pix);font-size:6px;color:#c8894b}
.px-site-card.sip .hero strong{font-family:var(--pix);font-size:clamp(10px,1.3vw,13px);line-height:1.6;color:#3b2416}
.px-site-card.sip .hero .hl{color:#c8894b;display:inline-block;animation:pxWobble 2.6s steps(4) infinite}
.px-site-card.sip .hero .btns{display:flex;gap:6px}
.px-site-card.sip .hero u{text-decoration:none;font-family:var(--pix);font-size:6px;color:#f6ecdf;background:#3b2416;padding:6px 7px;box-shadow:2px 2px 0 #1d1009}
.px-site-card.sip .hero u.alt{color:#3b2416;background:#e9c393;box-shadow:2px 2px 0 #a8743d}
.px-site-card.sip .hero .chips{display:flex;gap:6px}
.px-site-card.sip .hero .chips em{display:flex;align-items:center;gap:4px;font-style:normal;font-family:var(--pix);font-size:5px;color:#3b2416;background:#fff;border:2px solid #3b2416;padding:3px 5px}
.px-site-card.sip .hero .chips i{width:5px;height:5px;background:#3ccf6e;animation:pxBlink .7s steps(1) infinite}
.px-site-card.sip .cupwrap{position:relative;width:150px;height:170px;margin-right:8px}
.px-site-card.sip .glass{position:absolute;left:18px;bottom:28px;width:96px;height:112px;display:flex;flex-direction:column-reverse;background:rgba(255,255,255,.55);border:5px solid #3b2416;border-top-width:3px;overflow:hidden;box-shadow:4px 4px 0 rgba(59,36,22,.35)}
.px-site-card.sip .glass>span{display:block;width:100%;height:0}
.px-site-card.sip .esp{background:#3b2416}
.px-site-card.sip .milk{background:repeating-linear-gradient(90deg,#e2c6a2 0 8px,#e9d3b8 8px 16px)}
.px-site-card.sip .foam{position:relative;background:#fff6ea;display:grid;place-items:center}
.px-site-card.sip .glass.pour .esp{animation:pxPourE 1.2s steps(6) forwards}
.px-site-card.sip .glass.pour .milk{animation:pxPourM 1.2s steps(6) 1s forwards}
.px-site-card.sip .glass.pour .foam{animation:pxPourF .8s steps(4) 2s forwards}
@keyframes pxPourE{to{height:34%}}
@keyframes pxPourM{to{height:40%}}
@keyframes pxPourF{to{height:22%}}
.px-site-card.sip .glass.iced{background:rgba(180,225,255,.6)}
.px-site-card.sip .glass.iced::after{content:"";position:absolute;inset:10% 15% auto;height:30%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 10px,transparent 10px 22px);opacity:.8}
.px-site-card.sip .foam .art{position:absolute;opacity:0;transform:scale(.3);transition:all .35s steps(3) .2s}
.px-site-card.sip .glass.pour .foam .art.on{opacity:1;transform:none;transition-delay:2.6s}
.px-site-card.sip .foam .art .art>i,.px-site-card.sip .foam .art i{filter:none}
.px-site-card.sip .foam .a0 .art{filter:hue-rotate(0deg)}
.px-site-card.sip .handle{position:absolute;left:112px;bottom:62px;width:24px;height:40px;border:5px solid #3b2416;border-left:0}
.px-site-card.sip .saucer{position:absolute;left:4px;bottom:16px;width:126px;height:12px;background:#fff;border:3px solid #3b2416}
.px-site-card.sip .tap{position:absolute;left:0;bottom:-2px;width:140px;text-align:center;font-family:var(--pix);font-size:5px;color:#a8743d;animation:pxBlink 1.4s steps(1) infinite}
.px-site-card.sip .steam i{position:absolute;bottom:144px;width:8px;height:22px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.95) 0 4px,transparent 4px 8px);opacity:0;animation:pxSteam 2s steps(8) infinite}
@keyframes pxSteam{0%{opacity:0;transform:translate(0,10px)}30%{opacity:.9}100%{opacity:0;transform:translate(6px,-30px)}}
.px-site-card.sip .lab{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;padding:9px;background:#fff;border:3px solid #3b2416;box-shadow:3px 3px 0 #1d1009}
.px-site-card.sip .lab .lt{grid-column:1/-1;font-family:var(--pix);font-size:7px;color:#c8894b}
.px-site-card.sip .lab .row{display:flex;align-items:center;gap:6px}
.px-site-card.sip .lab em{font-style:normal;font-family:var(--pix);font-size:5px;color:#7a5a43;min-width:34px}
.px-site-card.sip .lab .opts,.px-site-card.sip .lab .shots{display:flex;gap:4px;align-items:center}
.px-site-card.sip .lab u{text-decoration:none;font-family:var(--pix);font-size:5px;color:#3b2416;background:#f6ecdf;border:2px solid #3b2416;padding:3px 4px;transition:all .15s steps(2)}
.px-site-card.sip .lab u.on{color:#f6ecdf;background:#3b2416;transform:translateY(-1px)}
.px-site-card.sip .lab .shots b{font-family:var(--pix);font-size:7px;font-weight:400;color:#3b2416}
.px-site-card.sip .lab .bars{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.px-site-card.sip .lab .bars>span{display:flex;flex-direction:column;gap:3px}
.px-site-card.sip .lab .bars i{display:block;height:6px;width:var(--w);background:repeating-linear-gradient(90deg,#c8894b 0 5px,#3b2416 5px 7px);transition:width .5s steps(5)}
.px-site-card.sip .lab .bars i.fill{animation:pxBarFill .5s steps(5)}
@keyframes pxBarFill{from{width:0}}
.px-site-card.sip .lab .price{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;border-top:2px dashed #e3cfb4;padding-top:6px}
.px-site-card.sip .lab .price b{font-family:var(--pix);font-size:10px;font-weight:400;color:#3b2416}
.px-site-card.sip .lab .price b.bump{animation:pxBump .4s steps(3)}
.px-site-card.sip .lab .price u{color:#f6ecdf;background:#c8894b;border-color:#a8743d}
.px-site-card.sip .counter{position:relative;height:44px;margin:0 -12px -12px;background:repeating-linear-gradient(90deg,#8a5a3a 0 18px,#7a4f32 18px 36px);border-top:6px solid #5a3a24;overflow:hidden}
.px-site-card.sip .bean{position:absolute;top:-12px;opacity:0;animation:pxBeanDrop 4.2s steps(14) infinite}
.px-site-card.sip .bean.b0{left:8%}.px-site-card.sip .bean.b1{left:22%}.px-site-card.sip .bean.b2{left:38%}.px-site-card.sip .bean.b3{left:55%}.px-site-card.sip .bean.b4{left:72%}.px-site-card.sip .bean.b5{left:88%}
@keyframes pxBeanDrop{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}60%{transform:translateY(22px) rotate(180deg);opacity:1}100%{transform:translateY(22px) rotate(360deg);opacity:0}}
.px-site-card.sip .scooter{position:absolute;bottom:4px;left:-120px;display:flex;align-items:flex-end;gap:2px;animation:pxRunYarn 7s linear infinite}
.px-site-card.sip .scooter .bub{position:absolute;left:0;top:-18px;white-space:nowrap;font-family:var(--pix);font-size:5px;color:#3b2416;background:#fff;border:2px solid #3b2416;padding:2px 4px}
.px-site-card.sip .burst{position:absolute;inset:0;pointer-events:none;z-index:6}
.px-site-card.sip .burst i{position:absolute;width:8px;height:8px;box-shadow:2px 2px 0 rgba(0,0,0,.25);animation:pxBurstOut .9s steps(9) forwards}
.px-site-card.sip .wipe{position:absolute;inset:0;z-index:7;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(6,1fr);pointer-events:none}
.px-site-card.sip .wipe i{background:#3b2416;transition:transform .2s steps(2)}
.px-site-card.sip .wipe i:nth-child(3n){background:#c8894b}.px-site-card.sip .wipe i:nth-child(5n){background:#f6ecdf}
.px-site-card.sip.in .wipe i{transform:scale(0)}
.px-site-card.sip.in .mock{animation:pxMockPop .8s steps(6) .2s backwards}
.px-site-card.sip h4{animation:pxWobble 3s steps(4) infinite}
@media (max-width:520px){.px-site-card.sip .cupwrap{transform:scale(.8);transform-origin:right center;margin-right:-10px}}
@media (prefers-reduced-motion:reduce){.px-site-card.sip .wipe{display:none}.px-site-card.sip .glass>span{height:auto}.px-site-card.sip .esp{height:34%!important}.px-site-card.sip .milk{height:40%!important}.px-site-card.sip .foam{height:22%!important}}


/* ===== HERO GIF (first frame, plays once on hover, holds last frame) ===== */
.px-portal .px-gifphoto .gifc{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;transition:opacity .2s steps(2)}
.px-portal .px-gifphoto.gif-ready .gifc{opacity:1}
.px-portal .par,.px-portal .corners,.px-portal .tagname{pointer-events:none}
.px-portal .px-gifphoto{cursor:pointer;pointer-events:auto}
.px-portal .px-gifphoto .gifhint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:4;font-family:var(--pix);font-size:8px;color:var(--navy);background:var(--gold);padding:6px 8px;box-shadow:3px 3px 0 #000;opacity:0;transition:opacity .2s steps(2);pointer-events:none;white-space:nowrap}
.px-portal .px-gifphoto.gif-ready:not(.playing):not(.done) .gifhint{opacity:1;animation:pxBlink 1.4s steps(1) infinite}
@media (hover:none){.px-portal .px-gifphoto .gifhint{font-size:7px}}


/* ===== HERO GIF: reset button ===== */
.px-portal .px-gifphoto .gifreset{position:absolute;right:10px;bottom:10px;z-index:5;font-family:var(--pix);font-size:9px;color:var(--navy);background:var(--cyan);border:0;padding:9px 11px;cursor:pointer;box-shadow:inset -3px -3px 0 var(--cyan-d),3px 3px 0 #000;animation:pxPop .3s steps(3)}
.px-portal .px-gifphoto .gifreset:active{transform:translate(3px,3px);box-shadow:inset 3px 3px 0 var(--cyan-d)}
.px-portal .px-gifphoto .gifreset:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ===== TESTIMONIAL PHOTO (plain, no pixel effect) ===== */
.px-tcard .av.photo img{image-rendering:auto;filter:none}
.px-tcard .av.photo::after{content:none}

/* ===== WEBSITES: AURORA BLOOMS ===== */
.px-site-card.aur .mock{overflow:hidden}
.px-site-card.aur .screen{background:radial-gradient(ellipse at 80% 0%,#f6dbe6,transparent 55%),linear-gradient(180deg,#fbf6f8,#f3e9f3);min-height:420px;gap:9px;container-type:inline-size}
.px-site-card.aur .nav{display:flex;align-items:center;gap:8px;font-family:var(--pix);font-size:8px}
.px-site-card.aur .nav b{display:flex;align-items:center;gap:6px;font-weight:400;margin-right:auto;color:#35172C}
.px-site-card.aur .nav b .art{animation:pxSpin 6s steps(12) infinite}
.px-site-card.aur .nav>i{width:24px;height:6px;background:#ead8e6}
.px-site-card.aur .nav s{text-decoration:none;font-size:6px;color:#fbf6f8;background:#35172C;padding:5px 7px;box-shadow:2px 2px 0 #1a0915}
.px-site-card.aur .hero{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;min-height:160px}
.px-site-card.aur .hero .txt{display:flex;flex-direction:column;gap:9px;z-index:2}
.px-site-card.aur .hero small{font-family:var(--pix);font-size:6px;color:#9a6fb8;letter-spacing:1px}
.px-site-card.aur .hero strong{font-family:var(--pix);font-size:clamp(10px,1.3vw,13px);line-height:1.6;color:#35172C}
.px-site-card.aur .hero .hl{color:#c9a86a;display:inline-block;font-style:italic;animation:pxWobble 2.6s steps(4) infinite}
.px-site-card.aur .hero .btns{display:flex;gap:6px;flex-wrap:wrap}
.px-site-card.aur .hero u{text-decoration:none;font-family:var(--pix);font-size:6px;color:#fbf6f8;background:#35172C;padding:6px 7px;box-shadow:2px 2px 0 #1a0915}
.px-site-card.aur .hero u.alt{color:#35172C;background:#f4d7e0;box-shadow:2px 2px 0 #b98aa0}
.px-site-card.aur .vase{position:relative;width:150px;height:160px;margin-right:6px}
.px-site-card.aur .vase .bl{position:absolute;z-index:2;transform:scale(0);animation:pxBloom 5s steps(5) infinite}
@keyframes pxBloom{0%{transform:scale(0) rotate(-30deg)}14%,80%{transform:scale(1) rotate(0)}90%,100%{transform:scale(1.08) rotate(6deg)}}
.px-site-card.aur .vase .stems{position:absolute;left:30%;right:30%;top:42%;bottom:38%;background:repeating-linear-gradient(90deg,#4fb867 0 4px,transparent 4px 12px)}
.px-site-card.aur .vase .pot{position:absolute;left:50%;bottom:0;transform:translateX(-50%)}
.px-site-card.aur .vase .ribbon{position:absolute;left:50%;bottom:30px;width:52px;height:8px;margin-left:-26px;background:#c9a86a;box-shadow:0 0 0 2px #35172C}
.px-site-card.aur .marq{display:block;overflow:hidden;white-space:nowrap;background:#35172C;margin:0 -12px;padding:6px 0}
.px-site-card.aur .marq .mt{display:inline-block;font-family:var(--pix);font-size:6px;color:#f4d7e0;animation:pxMarq 14s linear infinite}
@keyframes pxMarq{to{transform:translateX(-50%)}}
.px-site-card.aur .filter,.px-site-card.aur .seasons{display:flex;gap:6px;flex-wrap:wrap}
.px-site-card.aur .filter em,.px-site-card.aur .seasons em{font-style:normal;font-family:var(--pix);font-size:6px;color:#35172C;background:#fff;border:2px solid #35172C;padding:4px 6px;transition:all .2s steps(2)}
.px-site-card.aur .filter em.on{color:#fbf6f8;background:#35172C;transform:translateY(-2px)}
.px-site-card.aur .seasons em.on{color:#35172C;background:#c9a86a;transform:translateY(-2px)}
.px-site-card.aur .bqs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.px-site-card.aur .bq{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px 6px;background:#fff;border:2px solid #35172C;box-shadow:3px 3px 0 #1a0915;text-align:center}
.px-site-card.aur .bq .ph{display:grid;place-items:center;width:100%;height:34px;background:#f4e6f1}
.px-site-card.aur .bq b{font-family:var(--pix);font-size:5px;font-weight:400;line-height:1.5;color:#35172C}
.px-site-card.aur .bq u{text-decoration:none;font-family:var(--pix);font-size:5px;color:#fbf6f8;background:#9a6fb8;padding:3px 5px}
.px-site-card.aur .bq.swap{animation:pxPetIn .45s steps(4) backwards}
.px-site-card.aur .petals i{position:absolute;top:-10px;width:7px;height:7px;opacity:0;pointer-events:none;animation:pxPetal 4.5s linear infinite}
@keyframes pxPetal{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:.9}100%{transform:translate(-50px,460px) rotate(540deg);opacity:0}}
.px-site-card.aur .burst{position:absolute;inset:0;pointer-events:none;z-index:6}
.px-site-card.aur .burst i{position:absolute;width:8px;height:8px;box-shadow:2px 2px 0 rgba(0,0,0,.2);animation:pxBurstOut .9s steps(9) forwards}
.px-site-card.aur .wipe{position:absolute;inset:0;z-index:7;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(6,1fr);pointer-events:none}
.px-site-card.aur .wipe i{background:#35172C;transition:transform .2s steps(2)}
.px-site-card.aur .wipe i:nth-child(3n){background:#b48ad8}.px-site-card.aur .wipe i:nth-child(5n){background:#f4b6c9}
.px-site-card.aur.in .wipe i{transform:scale(0)}
.px-site-card.aur.in .mock{animation:pxMockPop .8s steps(6) .2s backwards}
.px-site-card.aur h4{animation:pxWobble 3s steps(4) infinite}
.px-site-card.aur .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.px-site-card.aur .facts span{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;background:var(--slot);border:2px solid var(--ln);text-align:center}
.px-site-card.aur .facts b{font-family:var(--pix);font-size:16px;font-weight:400;color:var(--tgold)}
.px-site-card.aur .facts small{font-family:var(--pix);font-size:6px;line-height:1.5;color:var(--tcyan)}
.px-site-card.aur .note{font-size:14px;color:var(--tx3);border-left:4px solid var(--gold);padding-left:10px}
@media (max-width:520px){.px-site-card.aur .facts{grid-template-columns:1fr 1fr}.px-site-card.aur .vase{transform:scale(.8);transform-origin:right center;margin-right:-12px}}
@media (prefers-reduced-motion:reduce){.px-site-card.aur .wipe{display:none}.px-site-card.aur .vase .bl{transform:none}}


/* ===== HERO: moving aura after the GIF finishes ===== */
.px-portal .px-gifphoto .aura{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .6s steps(6)}
.px-portal .px-gifphoto.done .aura{opacity:1}
.px-portal .px-gifphoto .aura .glow{position:absolute;left:50%;top:62%;width:130%;height:85%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(220,235,255,.16),rgba(140,160,255,.08) 38%,transparent 66%);mix-blend-mode:screen;animation:pxAuraPulse 2.6s ease-in-out infinite}
@keyframes pxAuraPulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.px-portal .px-gifphoto .aura .sweep{position:absolute;left:0;right:0;height:22%;top:-25%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.08),transparent);mix-blend-mode:screen;animation:pxAuraSweep 3.4s steps(20) infinite}
@keyframes pxAuraSweep{to{top:110%}}
.px-portal .px-gifphoto .aura .sq i{position:absolute;background:#fff;box-shadow:0 0 6px 2px rgba(200,225,255,.85),0 0 14px 4px rgba(140,170,255,.45);mix-blend-mode:screen;animation-name:pxAuraRise,pxAuraTwinkle;animation-timing-function:steps(14),steps(2);animation-iteration-count:infinite,infinite}
.px-portal .px-gifphoto .aura .sq i:nth-child(5n){background:#cfe0ff}
.px-portal .px-gifphoto .aura .sq i:nth-child(7n){background:transparent;border:2px solid #fff}
@keyframes pxAuraRise{0%{transform:translateY(14px) scale(.6)}50%{transform:translateY(-10px) scale(1)}100%{transform:translateY(-34px) scale(.5)}}
@keyframes pxAuraTwinkle{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.px-portal .px-gifphoto .aura *{animation:none!important}}

/* hidden pages and panels must never show, even when a component sets its own display */
.pxv [hidden]{display:none!important}
/* ===== V2 RESPONSIVE ===== */
@media (max-width:1024px){
  .px-wf{grid-template-columns:1fr 1fr}
  .px-ai{grid-template-columns:1fr 1fr}
  .px-dcards{grid-template-columns:repeat(3,1fr)}
  .px-xp-card{grid-template-columns:1fr}
  .px-a2p .viewer{grid-template-columns:1fr}
  .px-copts{grid-template-columns:1fr 1fr}
  .px-faq-wrap{grid-template-columns:1fr}
  .px-faq-side{display:none}
}
@media (max-width:860px){
  .px-feat,.px-build{grid-template-columns:1fr}
  .px-dash{grid-template-columns:1fr}
  .px-path{grid-template-columns:repeat(10,minmax(54px,1fr));overflow-x:auto;scroll-snap-type:x mandatory}
  .px-path button{scroll-snap-align:center}
}
@media (max-width:720px){
  .px-wf,.px-ai{grid-template-columns:1fr}
  .px-wfc.wide{grid-column:auto}
  .px-wfc .pair{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px}
  .px-wfc .pair .part{flex:0 0 88%;scroll-snap-align:start}
  .px-dcards{grid-template-columns:1fr 1fr}
  .px-brandhead{grid-template-columns:1fr}
  .px-tst .dlg{grid-template-columns:1fr}
  .px-copts{grid-template-columns:1fr}
  .px-quest-panel .hdr{grid-template-columns:1fr}
  .px-book{flex-wrap:wrap}
  .px-book .arr{display:none}
  .px-xp{padding-left:44px}
  .px-xp::before{left:14px}
  .px-xp-mark{left:-50px;width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .pxv .px-xp-item,.pxv .px-dcard,.pxv .px-wfc,.pxv .px-mon,.pxv .px-aic{opacity:1!important;transform:none!important}
  .pxv .px-crm .bot{clip-path:none!important}
  .pxv .px-term li{clip-path:none!important}
  .pxv .px-mon .scr{filter:none!important}
}

.pxv .art.blink>i.f1{animation:pxBl1 3.2s steps(1) infinite}
.pxv .art.blink>i.f2{opacity:0;animation:pxBl2 3.2s steps(1) infinite}
@keyframes pxBl1{0%{opacity:1}92%{opacity:0}100%{opacity:1}}
@keyframes pxBl2{0%{opacity:0}92%{opacity:1}100%{opacity:0}}
.px-hero h1 .w{display:inline-block;white-space:nowrap}
.px-quest:hover .scene .hero,.px-quest:focus-within .scene .hero{transform:translateX(64px)}
.px-hero-copy .jump{animation:pxHop .5s steps(3) 3}
.px-field.flash select{animation:pxPulse .6s steps(3) 3}