.ng-playground { isolation:isolate; }
.ng-playground::before { content:"";position:absolute;left:-160px;top:36%;width:210px;height:210px;border:28px solid var(--accent);transform:rotate(-12deg);pointer-events:none;opacity:.09; }
.ng-hero-copy { position:relative;z-index:2; }
.ng-hero-title { text-transform:uppercase; }
.ng-hero-title>span { display:block;position:relative;width:fit-content; }
.ng-hero-title>span::after { content:"";display:block;height:7px;width:78%;margin-top:15px;background:var(--accent-2);clip-path:polygon(0 0,100% 0,100% 50%,97% 50%,97% 100%,0 100%); }
.ng-scene { isolation:isolate;perspective:1100px;overflow:visible!important;clip-path:inset(-100px -60px 0 -60px); }
.ng-world { position:absolute;inset:7% -40px 0 10px;background:#071719;border:3px solid var(--line);overflow:hidden;clip-path:polygon(32px 0,100% 0,100% calc(100% - 32px),calc(100% - 32px) 100%,0 100%,0 32px); }
.ng-world>img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;image-rendering:pixelated;opacity:.7; }
.ng-world-word { position:absolute;top:20px;left:22px;writing-mode:vertical-rl;font:800 clamp(90px,9vw,132px)/.85 Handjet,monospace;letter-spacing:.02em;color:var(--accent-2); }
.ng-console-rig { z-index:2; }
.ng-hero-calculator { transform:translate(var(--ng-x,0px),var(--ng-y,0px)) rotate(-4deg);transform-origin:50% 75%;transition:transform .5s cubic-bezier(.16,1,.3,1); }
.ng-console-rig>div:first-child { transform:translateY(-16px) rotate(-7deg);transition:transform .5s cubic-bezier(.16,1,.3,1); }
.ng-scene:hover .ng-console-rig>div:first-child { transform:translateY(6px) rotate(-4deg); }
.ng-hero-mascot { position:absolute;width:150px;aspect-ratio:360/470;right:-42px;top:24px;z-index:3;transform:rotate(12deg);image-rendering:pixelated;animation:ng-companion-hop 8s ease-in-out infinite;pointer-events:none; }
.ng-spark { position:absolute;z-index:3;width:52px;height:52px;image-rendering:pixelated;pointer-events:none; }
.ng-spark-one { top:100px;left:-10px;transform:rotate(8deg); }
.ng-spark-two { width:30px;height:30px;bottom:90px;right:0; }
.ng-live-label { display:inline-flex;align-items:center;gap:6px; }
.ng-live-label::before { content:"";width:6px;height:6px;background:var(--ok); }
.ng-brand-strip { position:relative;z-index:4;background:var(--accent-2);color:#0B1416;box-shadow:0 -3px 0 var(--line); }
.ng-brand-strip>div { max-width:1280px;padding:12px 32px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;font:800 26px/1 Handjet,monospace;text-transform:uppercase; }
.ng-brand-strip img { width:52px;height:52px;object-fit:contain;image-rendering:pixelated; }
.ng-strip-mark { color:#B3205F;font-size:38px;letter-spacing:-.02em; }
.ng-how { position:relative; }
.ng-how>h2 { max-width:9ch;font-size:clamp(56px,8vw,88px)!important;text-transform:uppercase; }
.ng-steps { gap:0!important;border-top:3px solid var(--line);border-bottom:3px solid var(--line); }
.ng-steps>div { position:relative;background:transparent!important;box-shadow:none!important;padding:32px!important; }
.ng-steps>div+div { border-left:2px solid var(--shelf); }
.ng-steps>div>span { width:auto!important;height:auto!important;display:block!important;font-size:84px!important;background:transparent!important;color:var(--accent-text)!important;box-shadow:none!important; }
.ng-steps>div:nth-child(2)>span { color:var(--ink)!important; }
.ng-steps>div:nth-child(3)>span { color:var(--ok)!important; }
.ng-community { position:relative;overflow:hidden; }
.ng-community>div { position:relative;z-index:1;min-width:0; }
.ng-community>div:first-child { padding-top:110px; }
.ng-community h2 { max-width:11ch;font-size:clamp(52px,7vw,76px)!important; }
.ng-community-mascot { position:absolute;left:-18px;top:-82px;width:340px;max-width:100%;height:auto;image-rendering:pixelated; }
[data-theme="light"] .ng-community { background:#E5DECA!important; }
[data-theme="light"] .ng-steps>div:nth-child(3)>span { color:#21734A!important; }
button { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline-offset:6px; }
@keyframes ng-companion-hop { 0%,72%,100%{transform:translateY(0) rotate(12deg)} 79%{transform:translateY(-12px) rotate(7deg)} 86%{transform:translateY(0) rotate(12deg)} }
.ng-motion-paused *,[data-ng-motion="paused"] * { animation-play-state:paused!important; }
.ng-mascot-blink { display:block;width:100%;height:100%;background:url('./mascot-blink.svg') 0 0/600% 100% no-repeat;animation:ng-blink 8s steps(5,end) infinite; }
.ng-entered .ng-boot-cartridge { animation:ng-insert .8s cubic-bezier(.16,1,.3,1); }
.ng-entered .ng-hero-calculator canvas { animation:ng-screen-boot .9s steps(8,end); }
.ng-entered .ng-world-word { animation:ng-word-boot .65s steps(5,end); }
.ng-world>img { animation:ng-space-drift 24s steps(24,end) infinite alternate; }
.ng-boot-pixels { position:absolute;inset:0;z-index:4;pointer-events:none; }
.ng-boot-pixels i { position:absolute;left:48%;top:38%;width:8px;height:8px;background:var(--accent-2);opacity:0;--pixel-x:-100px;--pixel-y:-70px; }
.ng-boot-pixels i:nth-child(2) { --pixel-x:120px;--pixel-y:-90px;background:var(--accent); }
.ng-boot-pixels i:nth-child(3) { --pixel-x:-140px;--pixel-y:30px; }
.ng-boot-pixels i:nth-child(4) { --pixel-x:130px;--pixel-y:40px;background:var(--ok); }
.ng-boot-pixels i:nth-child(5) { --pixel-x:50px;--pixel-y:-130px;background:var(--accent); }
.ng-boot-pixels i:nth-child(6) { --pixel-x:-60px;--pixel-y:100px;background:var(--ok); }
.ng-entered .ng-boot-pixels i { animation:ng-boot-burst .6s .35s steps(6,end); }
.ng-motion-toggle { position:absolute;z-index:5;bottom:16px;right:12px;max-width:calc(100% - 24px);padding:8px 10px;border:1px solid #A7BDBA;background:#071719;color:#ECF3EF;font:600 12px/1.3 'DM Sans',sans-serif;cursor:pointer; }
.ng-motion-toggle:hover { color:#EBD24A;border-color:#EBD24A; }
.ng-shelf { position:relative; }
.ng-shelf h2,#ng-all h2 { text-transform:uppercase;font-size:clamp(50px,7vw,80px)!important; }
.ng-shelf-scroll { scrollbar-width:thin;scrollbar-color:var(--accent) var(--panel-3);scroll-snap-type:x proximity;scroll-padding-inline:16px; }
.ng-shelf-scroll>div>div { scroll-snap-align:start; }
.ng-cartridge { transform-origin:50% 100%;transition:transform .22s cubic-bezier(.16,1,.3,1)!important; }
.ng-cartridge::after { content:"";position:absolute;top:-24px;left:calc(50% - 6px);width:12px;height:12px;background:var(--accent-text);clip-path:polygon(0 0,100% 0,100% 50%,75% 50%,75% 75%,50% 100%,25% 75%,25% 50%,0 50%);opacity:0;transition:opacity .12s;pointer-events:none; }
.ng-cartridge:focus-visible::after { opacity:1; }
.ng-cartridge:focus-visible { transform:translateY(-14px) rotate(-3deg)!important; }
.ng-how { scroll-margin-top:110px; }
.ng-step-art { position:relative;height:144px;margin:0 0 28px;display:grid;place-items:center; }
.ng-step-art img { height:144px;width:144px;object-fit:contain;image-rendering:pixelated; }
.ng-step-pick::after { content:"";position:absolute;width:116px;height:12px;bottom:10px;background:var(--shelf);box-shadow:0 -4px 0 var(--shelf-top); }
.ng-step-pick img { position:relative;z-index:1; }
.ng-step-plug span { position:absolute;right:calc(50% - 63px);top:18px;width:9px;height:9px;background:var(--ink-3); }
.ng-step-play img { width:180px;height:164px;object-position:center bottom; }
.ng-entered .ng-step-pick img { animation:ng-pick 7s steps(8,end) infinite; }
.ng-entered .ng-step-plug img { animation:ng-plug 7s steps(8,end) infinite; }
.ng-entered .ng-step-plug span { animation:ng-connected 7s steps(1,end) infinite; }
.ng-entered .ng-step-play img { animation:ng-play 7s steps(6,end) infinite; }
.ng-game-monitor { position:relative;border-top:8px solid var(--shelf-top); }
.ng-game-monitor::after { content:"";display:block;width:80px;height:6px;margin:20px auto 0;background:var(--shelf);box-shadow:100px 0 0 var(--shelf),-100px 0 0 var(--shelf); }
.ng-game-screen { overflow:hidden; }
.ng-game-page h1 { text-transform:uppercase; }
.ng-game-page { animation:ng-open-cartridge .28s cubic-bezier(.16,1,.3,1); }
.ng-community::after { content:"";position:absolute;right:-20px;bottom:-60px;width:180px;height:180px;border:24px solid var(--shelf-top);transform:rotate(16deg);opacity:.35;pointer-events:none; }
.ng-community button { transition:transform .16s cubic-bezier(.16,1,.3,1); }
@media (hover:hover) and (pointer:fine) {
  .ng-cartridge:hover { transform:translateY(-16px) rotate(-3deg)!important; }
  .ng-cartridge:hover::after { opacity:1; }
  .ng-cartridge:active { transform:translateY(-4px)!important; }
  .ng-community button:hover { transform:translateX(5px); }
}
@keyframes ng-insert { from{transform:translateY(-72px) rotate(-11deg)} 65%{transform:translateY(9px) rotate(-4deg)} to{transform:translateY(-16px) rotate(-7deg)} }
@keyframes ng-screen-boot { 0%,25%{clip-path:inset(49% 0)} 65%{clip-path:inset(0)} 75%{opacity:.5} to{clip-path:inset(0);opacity:1} }
@keyframes ng-word-boot { from{clip-path:inset(0 0 100%)} to{clip-path:inset(0)} }
@keyframes ng-boot-burst { 0%{opacity:1;transform:translate(0,0)} 80%{opacity:1} to{opacity:0;transform:translate(var(--pixel-x),var(--pixel-y))} }
@keyframes ng-blink { 0%,80%{background-position:0 0} 94%,100%{background-position:100% 0} }
@keyframes ng-space-drift { to{transform:translateY(-16px) scale(1.04)} }
@keyframes ng-pick { 0%,8%,38%,100%{transform:translateY(0) rotate(0)} 16%,30%{transform:translateY(-20px) rotate(-8deg)} }
@keyframes ng-plug { 0%,32%,66%,100%{transform:translateX(0)} 42%,58%{transform:translateX(15px)} }
@keyframes ng-connected { 0%,41%,68%,100%{background:var(--ink-3)} 42%,67%{background:var(--ok)} }
@keyframes ng-play { 0%,66%,88%,100%{transform:rotate(0)} 72%{transform:rotate(-7deg)} 80%{transform:rotate(7deg)} }
@keyframes ng-open-cartridge { from{clip-path:inset(0 0 12%)} to{clip-path:inset(0)} }
@media (min-width:1000px) { .ng-hero-copy { padding-top:64px!important;padding-bottom:64px!important; } .ng-hero-layout { gap:0 64px!important; } }
@media (min-width:1180px) {
  .ng-site-header>div { gap:16px!important;flex-wrap:nowrap!important; }
  .ng-site-header nav { gap:14px!important;flex-wrap:nowrap!important; }
  .ng-site-header nav button { font-size:20px!important;white-space:nowrap; }
  .ng-site-header label { min-width:160px!important;width:180px; }
}
@media (max-width:999px) { .ng-world { right:0; } .ng-hero-mascot { right:0; } }
@media (max-width:760px) {
  .ng-hero-layout { grid-template-columns:minmax(0,1fr)!important; }
  .ng-hero-copy { padding:36px 0 28px!important; }
  .ng-hero-copy>span { font-size:16px!important; }
  .ng-hero-title { font-size:clamp(64px,15vw,96px)!important;line-height:.88!important;margin-top:24px!important; }
  .ng-hero-copy>p { font-size:17px!important; }
  .ng-hero-copy>div:last-child { gap:10px!important;margin-top:24px!important;font-size:13px!important; }
  .ng-scene { margin:0 10px; }
  .ng-world { inset:20px -10px 0; }
  .ng-world-word { left:12px;top:32px;font-size:84px; }
  .ng-hero-mascot { width:110px;right:-16px;top:0; }
  .ng-spark-one { width:35px;height:35px;left:0;top:160px; }
  .ng-brand-strip>div { flex-wrap:wrap;justify-content:center;gap:8px 16px;padding:14px 16px;font-size:20px; }
  .ng-strip-mark { display:none; }
  .ng-brand-strip img { width:32px;height:32px; }
  .ng-shelf>div:first-child>div { flex-wrap:wrap; }
  .ng-shelf h2 { flex-basis:100%; }
  .ng-how { padding:64px 20px 0!important; }
  .ng-steps { grid-template-columns:1fr!important; }
  .ng-steps>div { padding:24px 0!important; }
  .ng-steps>div+div { border-left:0;border-top:2px solid var(--shelf); }
  .ng-steps>div>span { float:left;margin-right:22px;font-size:64px!important; }
  .ng-step-art { float:right;width:94px;height:100px;margin:0 0 12px 16px; }
  .ng-step-art img { width:94px;height:100px; }
  .ng-step-play img { height:110px;width:110px; }
  .ng-step-pick::after { width:80px;bottom:0; }
  .ng-step-plug span { right:0;top:8px; }
  .ng-steps>div { display:flow-root; }
  .ng-steps>div>p { clear:both; }
  .ng-steps>div>h3 { margin:2px 0 10px!important; }
  .ng-steps>div>p { margin-left:48px!important; }
  .ng-community { grid-template-columns:1fr!important; }
  .ng-community-mascot { top:-52px;left:0;width:290px; }
}
@media (hover:none) {
  .ng-cartridge:hover { transform:none!important; }
  .ng-cartridge:active { transform:translateY(3px)!important; }
}
@media (max-width:600px) {
  #ng-all { padding-left:20px!important;padding-right:20px!important; }
  #ng-all>div:last-child>div { grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:36px 24px!important; }
  #ng-all>div:last-child>div>div { width:100%!important;min-width:0; }
  #ng-all .ng-cartridge { width:100%!important;height:208px!important; }
  #ng-all .ng-cartridge>span:first-child>span:nth-child(2) { left:10px!important;right:10px!important;height:130px!important; }
  #ng-all .ng-cartridge img { height:88px!important; }
  #ng-all .ng-cartridge>span:first-child>span:nth-child(3) { top:164px!important;font-size:11px!important; }
  #ng-all>div:last-child>div>div>span { top:208px!important;left:-12px!important;right:-12px!important; }
  #ng-all .ng-cartridge+div { margin-top:28px!important; }
}
@media (prefers-reduced-motion:reduce) {
  .ng-playground *, .ng-community *, .ng-how *, .ng-game-page { animation:none!important;transition:none!important; }
  .ng-cartridge,.ng-cartridge:hover,.ng-cartridge:focus-visible,.ng-cartridge:active { transition:none!important;transform:none!important; }
  .ng-scene:hover .ng-console-rig>div:first-child { transform:translateY(-16px) rotate(-7deg); }
  .ng-hero-calculator { transform:rotate(-4deg); }
  .ng-motion-toggle { display:none; }
}