/* Arcade ending: every glyph and cursor pixel is generated in version-j.html. */
.arcade-header{position:absolute;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;pointer-events:none}
.arcade-logo,.arcade-topnav,.arcade-topnav a{pointer-events:auto}
.arcade-topnav{display:flex;align-items:center;margin-left:auto}
.arcade-skip{position:absolute;left:50%;top:50%;padding:10px 18px;color:#fff;border:0;background:none;text-decoration:none;font:400 clamp(12px,1.15vw,17px)/1 'Press Start 2P',monospace;letter-spacing:.16em;text-shadow:0 0 14px rgba(255,255,255,.3);transform:translate(-50%,-50%);transition:color .16s,text-shadow .16s,transform .16s}
.arcade-skip:hover,.arcade-skip:focus-visible{color:#fff;background:none;outline:none;text-shadow:0 0 16px rgba(239,32,47,.95);transform:translate(-50%,-50%) scale(1.08)}
.arcade-socials{display:flex;align-items:center;gap:9px}
.arcade-socials a{display:grid;place-items:center;width:39px;height:39px;color:#fff;border:1px solid rgba(255,255,255,.32);background:rgba(6,5,10,.72);clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);transition:color .16s,background .16s,border-color .16s,transform .16s}
.arcade-socials svg{width:20px;height:20px;fill:currentColor}
.arcade-socials a:hover,.arcade-socials a:focus-visible{color:#08060b;background:#fff;border-color:#fff;outline:none;transform:translateY(-2px)}
.python-hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:#080510}
.python-bg{position:absolute;z-index:-3;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.python-hero .story-shade{background:linear-gradient(90deg,rgba(5,3,13,.58),rgba(5,3,13,.16) 75%,rgba(5,3,13,.22)),linear-gradient(0deg,rgba(5,3,13,.36),transparent 62%)}
.python-hero .story-copy{position:relative;z-index:4;width:100%;max-width:none;min-height:100svh;padding:0}
.python-hero .story-phrase{position:absolute;left:50%;top:50%;width:min(92vw,1380px);max-width:none;text-align:center;transform:translate(-50%,-50%)}
.python-hero .story-actions{display:none}

/* Final state: it appears once and stays visible while only the video loops. */
.final-arcade{position:absolute;z-index:6;inset:0;display:grid;place-items:center;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility .16s ease}
.show-final .story-phrase{opacity:0;visibility:hidden}
.show-final .final-arcade{opacity:1;visibility:visible;pointer-events:auto}
.arcade-lockup{position:relative;z-index:2;width:min(92vw,1420px);display:grid;justify-items:center;gap:clamp(34px,5vh,58px);padding-top:4vh}
.final-arcade::after{position:absolute;z-index:3;inset:0;content:"";background:#fff;opacity:0;pointer-events:none}
.show-final .final-arcade::after{animation:screenFlash .52s steps(4,end) both}

/* Pixel typography: each active cell is an individual DOM element, never a clipped image. */
.arcade-ready,.arcade-buy-text{position:relative;display:block;width:100%;height:calc(var(--px) * 7);isolation:isolate}
.arcade-ready{--px:clamp(10px,1.16vw,21px);overflow:visible}
.arcade-ready::after{position:absolute;z-index:6;inset:-16% -8%;content:"";background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,0) 43%,rgba(255,255,255,.96) 50%,rgba(255,80,80,.38) 54%,transparent 63%);mix-blend-mode:screen;transform:translateX(-120%) skewX(-15deg);opacity:0;pointer-events:none}
.show-final .arcade-ready::after{animation:readyFlash 2.35s steps(9,end) 1s infinite}
.arcade-buy-text{--px:clamp(5px,.57vw,10px)}
.pixel-layer{position:absolute;top:0;left:50%;display:flex;justify-content:center;gap:calc(var(--px) * .08);width:max-content;height:calc(var(--px) * 7);transform:translateX(-50%);pointer-events:none}
.pixel-layer.cyan{transform:translate(calc(-50% - var(--px) * .55),calc(var(--px) * .55));opacity:.96}
.pixel-layer.magenta{transform:translate(calc(-50% + var(--px) * .55),calc(var(--px) * -.55));opacity:.96}
.pixel-layer.main{z-index:3}
.pixel-word{display:flex;gap:calc(var(--px) * .22)}
.pixel-space{display:block;width:calc(var(--px) * 1.5)}
.pixel-glyph{display:grid;grid-template-columns:repeat(5,var(--px));grid-template-rows:repeat(7,var(--px));width:calc(var(--px) * 5);height:calc(var(--px) * 7)}
.pixel-cell{display:block;width:var(--px);height:var(--px);opacity:0}
.pixel-layer.cyan .pixel-cell{background:#00eaff}
.pixel-layer.magenta .pixel-cell{background:#ff18d4}
.pixel-layer.main .pixel-cell{background:linear-gradient(180deg,#fff52e 0%,#ffd51a 48%,#f18d0b 100%);box-shadow:inset 0 0 0 1px rgba(255,255,225,.58),3px 3px 0 #080610}
.arcade-ready .pixel-layer.cyan .pixel-cell{background:#080610}
.arcade-ready .pixel-layer.magenta .pixel-cell{background:#ef202f}
.arcade-buy-text .pixel-layer.main .pixel-cell{background:#18101b;box-shadow:inset 0 0 0 1px #fff,2px 2px 0 #070610}
.arcade-buy-text .pixel-layer.cyan .pixel-cell{background:#ef202f}
.arcade-buy-text .pixel-layer.magenta .pixel-cell{background:#080610}
.show-final .pixel-cell{animation:pixelCellIn .34s steps(4,end) calc(var(--i) * 12ms) both}
.show-final .pixel-layer.cyan .pixel-cell{animation-delay:calc(var(--i) * 12ms - 34ms)}
.show-final .pixel-layer.magenta .pixel-cell{animation-delay:calc(var(--i) * 12ms - 18ms)}

/* Gold arcade CTA. The hand is a sibling of the link so clip-path never cuts it. */
.arcade-cta-wrap{position:relative;width:min(880px,72vw);height:clamp(104px,12vw,180px)}
.arcade-buy{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;clip-path:polygon(2.8% 0,97.2% 0,100% 15%,100% 85%,97.2% 100%,2.8% 100%,0 85%,0 15%);background:linear-gradient(180deg,#fff82b 0%,#ffdc1e 48%,#f18c0b 100%);border:0;text-decoration:none;box-shadow:inset 0 0 0 9px #070610,0 15px 0 #070610,0 0 0 7px #ff18d4,0 0 0 12px #00eaff;isolation:isolate;cursor:pointer}
.arcade-buy:focus-visible{outline:5px solid #fff;outline-offset:14px}
.arcade-buy::before{position:absolute;content:"";inset:10px 3%;background:linear-gradient(180deg,rgba(255,255,232,.95) 0 16%,transparent 17% 56%,rgba(255,246,111,.54) 57% 62%,transparent 63%);pointer-events:none;z-index:-1}
.arcade-buy::after{position:absolute;content:"";top:10px;bottom:10px;left:-32%;width:13%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);transform:skewX(-18deg);animation:none;pointer-events:none}
.show-final .arcade-buy::after{animation:coinShine 2.8s steps(8,end) infinite}
.arcade-buy-text{transform:scaleY(1.05)}

/* External pixel pointer: 13x15 cells, separate from the button plane. */
.arcade-hand{--cpx:clamp(8px,1.05vw,18px);position:absolute;right:-2%;top:57%;z-index:8;width:calc(var(--cpx) * 13);height:calc(var(--cpx) * 15);pointer-events:none;filter:drop-shadow(8px 9px 0 #070610) drop-shadow(0 0 14px rgba(239,32,47,.48));animation:none}
.cursor-layer{position:absolute;inset:0;display:grid;grid-template-columns:repeat(13,var(--cpx));grid-template-rows:repeat(15,var(--cpx));width:calc(var(--cpx) * 13);height:calc(var(--cpx) * 15)}
.cursor-layer.cursor-orange{transform:translate(calc(var(--cpx) * .9),calc(var(--cpx) * .9));z-index:1}.cursor-layer.cursor-orange .cursor-cell{background:#080610}
.cursor-layer.cursor-cyan{transform:translate(calc(var(--cpx) * -.9),calc(var(--cpx) * .9));z-index:2}.cursor-layer.cursor-cyan .cursor-cell{background:#ef202f}
.cursor-layer.cursor-black{transform:translate(calc(var(--cpx) * .25),calc(var(--cpx) * .25));z-index:3}.cursor-layer.cursor-black .cursor-cell{background:#080610}
.cursor-layer.cursor-main{z-index:4}.cursor-layer.cursor-main .cursor-cell{background:#fff}
.cursor-cell{display:block;width:var(--cpx);height:var(--cpx)}
.show-final .arcade-hand{animation:cursorClick 1.8s steps(4,end) 1.2s infinite}
.arcade-click-lines{position:absolute;z-index:9;right:-22%;top:54%;width:90px;height:70px}.arcade-click-lines i{position:absolute;display:block;width:30px;height:7px;background:#fff52b;transform-origin:right center;animation:none}.show-final .arcade-click-lines i{animation:clickSpark 1.8s steps(3,end) 1.2s infinite}.arcade-click-lines i:nth-child(1){right:20px;top:10px;transform:rotate(-32deg)}.arcade-click-lines i:nth-child(2){right:10px;top:30px}.arcade-click-lines i:nth-child(3){right:19px;top:50px;transform:rotate(32deg)}
.python-combos{padding-top:94px}

@keyframes pixelCellIn{0%{opacity:0;transform:translate(8px,-5px);filter:brightness(2)}45%{opacity:1;transform:translate(-3px,2px)}100%{opacity:1;transform:none}}
@keyframes coinShine{0%,24%{left:-32%;opacity:0}32%{opacity:1}68%,100%{left:132%;opacity:0}}
@keyframes cursorClick{0%,45%,100%{transform:translate(0,0)}52%{transform:translate(calc(var(--cpx) * -1),var(--cpx))}60%{transform:translate(0,0)}}
@keyframes clickSpark{0%,42%,100%{opacity:0;transform:scaleX(.2)}52%,72%{opacity:1;transform:scaleX(1)}}
@keyframes screenFlash{0%{opacity:0}22%{opacity:.7}46%,100%{opacity:0}}
@keyframes readyFlash{0%,30%{opacity:0;transform:translateX(-120%) skewX(-15deg)}42%{opacity:1}68%,100%{opacity:0;transform:translateX(120%) skewX(-15deg)}}
@media(max-width:780px){.python-bg{object-position:62% center}.python-hero .story-phrase{left:50%;width:calc(100vw - 48px)}.arcade-lockup{width:94vw;gap:40px}.arcade-cta-wrap{width:88vw;height:120px}.arcade-hand{right:-1%;top:61%;--cpx:10px}.arcade-click-lines{right:-6%;top:57%}.arcade-ready{--px:clamp(7px,2.2vw,13px)}.arcade-buy-text{--px:clamp(4px,1.1vw,8px)}}
@media(max-width:780px){.arcade-header{padding:16px 14px;gap:10px}.arcade-skip{padding:9px 12px;font-size:10px}.arcade-socials{gap:6px}.arcade-socials a{width:34px;height:34px}.arcade-socials svg{width:17px;height:17px}}
@media(max-width:520px){.arcade-skip{font-size:8.5px;letter-spacing:.12em}.arcade-socials a{width:31px;height:31px}}