:root{
    --bg:#04060e; --panel:#0a1420; --panel2:#0e1a28; --line:#153044;
    --ink:#eafaff; --mut:#6c98b0; --acc:#00d4ff; --acc2:#00ff9d; --acc3:#ff6090; --onacc:#001018;
    --wood1:#eccea4; --wood2:#dab68c; --wood3:#c69a6c; --wood4:#a87c50;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; color:var(--ink); background:var(--bg);
    font:16px/1.6 Inter, system-ui, sans-serif; overflow-x:hidden;
    transition:background-color .3s, color .3s;
  }
  /* atmospheric brand backdrop: the store bg, tinted by the active theme */
  body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
    background:url('/img/paleto-bg.png') center/cover no-repeat fixed; opacity:.16;}
  body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(120% 75% at 50% -8%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 55%),
      linear-gradient(color-mix(in srgb,var(--line) 55%,transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb,var(--line) 55%,transparent) 1px, transparent 1px);
    background-size:auto, 46px 46px, 46px 46px; background-position:center;}
  a{color:inherit;text-decoration:none;}
  img{image-rendering:pixelated;}
  .wrap{max-width:1140px;margin:0 auto;padding:0 22px;}
  .px{font-family:'Press Start 2P', monospace; line-height:1.5;}
  .pop{color:var(--acc);}

  .btn{display:inline-block;font-family:'Press Start 2P',monospace;font-size:11px;padding:14px 18px;cursor:pointer;
    background:var(--panel);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
    transition:transform .06s, box-shadow .06s;}
  .btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink);}
  .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
  .btn.pri{background:var(--acc);color:var(--onacc);border-color:var(--acc);box-shadow:4px 4px 0 var(--acc3);}
  .btn.pri:hover{box-shadow:6px 6px 0 var(--acc3);}
  .btn.sm{font-size:9px;padding:10px 12px;box-shadow:3px 3px 0 var(--ink);}

  .strip{height:8px;background:linear-gradient(90deg,var(--acc),var(--acc2),var(--acc3),var(--acc));}

  header{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--bg) 86%, transparent);backdrop-filter:blur(7px);border-bottom:3px solid var(--line);}
  .nav{display:flex;align-items:center;gap:16px;height:64px;}
  .logo{display:flex;align-items:center;gap:12px;}
  .logo .grid{display:grid;grid-template-columns:repeat(3,7px);grid-auto-rows:7px;gap:2px;flex:0 0 auto;}
  .logo b{font-family:'Press Start 2P',monospace;font-size:15px;letter-spacing:1px;}
  .links{display:flex;gap:18px;margin-left:auto;font-family:'Press Start 2P',monospace;font-size:9px;color:var(--mut);}
  .links a:hover{color:var(--ink);}

  /* PALETTE BOARDS */
  .pal-stack{position:relative;width:100%;max-width:520px;aspect-ratio:520/360;margin:0 auto;}
  .pal-card{position:absolute;top:0;left:0;width:calc(100% - 160px);transition:filter .2s;pointer-events:none;}
  /* hit area = the painted palette shape only; clicks in the transparent
     corners of the box fall through to the card behind */
  .pal-card .pal-body,.pal-card .blob,.pal-card .pal-brush{pointer-events:auto;cursor:pointer;}
  .pal-card svg{width:100%;height:auto;display:block;}
  .pal-card.pal-top{filter:drop-shadow(10px 14px 0 color-mix(in srgb,var(--acc) 55%,transparent));cursor:pointer;}
  .pal-card.pal-top svg{animation:bob 6s ease-in-out infinite;}
  .pal-card:not(.pal-top){filter:drop-shadow(3px 5px 8px rgba(0,0,0,.6));}
  .pal-card .blob{transition:fill .35s;}

  section{padding:58px 0;}
  .sect-h{display:flex;align-items:center;gap:14px;margin-bottom:26px;}
  .sect-h h2{font-family:'Press Start 2P',monospace;font-size:18px;margin:0;}
  .sect-h .bar{flex:1;height:4px;background:var(--line);}
  .sect-h .n{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--mut);}

  /* HERO */
  .hero{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:52px 0 30px;}
  .kicker{display:inline-flex;align-items:center;gap:8px;font-family:'Press Start 2P',monospace;font-size:9px;color:var(--acc2);border:2px solid var(--line);padding:8px 12px;margin-bottom:22px;}
  .kicker i{width:8px;height:8px;background:var(--acc2);display:inline-block;}
  .hero h1{font-family:'Press Start 2P',monospace;font-size:clamp(34px,7vw,68px);line-height:1;margin:0 0 18px;letter-spacing:2px;text-shadow:5px 5px 0 var(--acc3);}
  .hero .tag{font-size:19px;color:var(--ink);max-width:520px;margin:0 0 8px;font-weight:600;}
  .hero .sub{font-size:15.5px;color:var(--mut);max-width:520px;margin:0 0 24px;}
  .cta{display:flex;gap:14px;flex-wrap:wrap;}
  .stats{display:flex;gap:26px;margin-top:28px;flex-wrap:wrap;}
  .stat b{font-family:'Press Start 2P',monospace;font-size:17px;color:var(--acc);}
  .stat span{display:block;font-size:12px;color:var(--mut);margin-top:5px;}

  /* ARTIST PALETTE motif */
  .palettewrap{display:flex;flex-direction:column;align-items:center;gap:14px;}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
  .nowplaying{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--mut);text-align:center;}
  .nowplaying b{color:var(--ink);}

  /* VOLUMES */
  .vols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;}
  .vol{border:3px solid var(--line);background:var(--panel);transition:transform .1s,box-shadow .1s;overflow:hidden;display:flex;flex-direction:column;}
  .vol:hover{transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--acc);border-color:var(--ink);}
  .vol .board{width:100%;display:block;border-bottom:3px solid var(--line);background:#0d0d12;}
  .vol .body{padding:16px 16px 18px;flex:1;display:flex;flex-direction:column;}
  .vol .vnum{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--acc2);margin-bottom:8px;}
  .vol h3{font-family:'Press Start 2P',monospace;font-size:13px;margin:0 0 8px;}
  .vol p{color:var(--mut);font-size:13.5px;margin:0 0 14px;flex:1;}
  .vol .row{display:flex;gap:10px;align-items:center;}
  .vol .free{font-family:'Press Start 2P',monospace;font-size:8px;background:var(--acc2);color:var(--onacc);padding:5px 8px;}

  /* palette cards */
  .vol-group{display:grid;grid-template-columns:220px 1fr;gap:16px;margin-bottom:36px;align-items:start;}
  .pals{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;}
  .palcard{border:3px solid var(--line);background:var(--panel);cursor:pointer;transition:transform .08s,box-shadow .08s;}
  .palcard:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--acc);border-color:var(--ink);}
  .palcard .sw{display:flex;height:58px;} .palcard .sw i{flex:1;}
  .palcard .lbl{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;}
  .palcard .lbl b{font-family:'Press Start 2P',monospace;font-size:9px;}
  .palcard .lbl span{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--acc2);}

  /* ABOUT */
  .about{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center;border:3px solid var(--line);background:var(--panel);padding:30px;box-shadow:9px 9px 0 var(--acc3);}
  .about h3{font-family:'Press Start 2P',monospace;font-size:17px;margin:0 0 14px;line-height:1.5;}
  .about p{color:var(--mut);margin:0 0 14px;}
  .about .cc0{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--acc2);border:2px solid var(--acc2);padding:9px 12px;display:inline-block;}
  .fmts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 0;padding:0;}
  .fmts li{font-family:'Press Start 2P',monospace;font-size:8px;border:2px solid var(--line);padding:6px 8px;color:var(--mut);}

  .stores{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
  .store{border:3px solid var(--line);background:var(--panel);padding:18px;transition:transform .08s,box-shadow .08s;position:relative;}
  .store:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--acc);border-color:var(--ink);}
  .store h4{font-family:'Press Start 2P',monospace;font-size:11px;margin:0 0 8px;}
  .store p{color:var(--mut);font-size:13px;margin:0 0 12px;}
  .store .go{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--acc2);}
  .store .free{position:absolute;top:14px;right:14px;font-family:'Press Start 2P',monospace;font-size:7px;background:var(--acc2);color:var(--onacc);padding:4px 6px;}

  /* PLAY CAROUSEL */
  .play-wrap{overflow:hidden;}
  .play-track{display:flex;transition:transform .35s ease;}
  .play-slide{min-width:100%;flex-shrink:0;}
  .play-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;}
  .play-btn{font-family:'Press Start 2P',monospace;font-size:10px;padding:10px 16px;border:2px solid var(--line);background:var(--panel);color:var(--mut);cursor:pointer;transition:border-color .1s,color .1s;}
  .play-btn:hover{border-color:var(--acc);color:var(--acc);}
  .play-dot{width:9px;height:9px;border-radius:50%;background:var(--line);border:none;cursor:pointer;padding:0;transition:background .15s;}
  .play-dot.on{background:var(--acc);}
  .play-slide .ng-head{border:3px solid var(--line);background:var(--panel);border-bottom:none;}
  .play-slide .ng-frame{border:3px solid var(--line);border-top:none;border-bottom:none;}
  .play-slide .ng-hint{border:3px solid var(--line);border-top:2px solid var(--line);background:var(--panel);}
  .ng-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:16px 20px;border-bottom:3px solid var(--line);}
  .ng-head h3{font-family:'Press Start 2P',monospace;font-size:12px;margin:0;}
  .ng-head .ng-sub{font-size:13px;color:var(--mut);margin:0;}
  .ng-head a{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--acc2);white-space:nowrap;}
  .ng-frame{width:100%;aspect-ratio:16/9;border:none;display:block;background:#000;}
  .ng-hint{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--mut);padding:10px 20px;border-top:2px solid var(--line);line-height:1.8;}

  footer{border-top:3px solid var(--line);margin-top:26px;}
  .bannerbox{border:3px solid var(--line);margin:26px 0 22px;box-shadow:6px 6px 0 var(--acc);}
  .bannerbox img{width:100%;display:block;}
  .foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;font-size:13px;color:var(--mut);padding:6px 0 34px;}
  .foot .socials{display:flex;gap:16px;flex-wrap:wrap;font-family:'Press Start 2P',monospace;font-size:8px;}
  .foot a:hover{color:var(--ink);}

  /* RUBIK CUBE */
  .rk{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;border:3px solid var(--line);background:var(--panel);padding:28px;box-shadow:9px 9px 0 var(--acc);}
  .rk .scene{width:300px;height:300px;perspective:950px;margin:auto;touch-action:none;cursor:grab;}
  .rk .scene:active{cursor:grabbing;}
  .rk-cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;}
  .rk-layer{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:center;}
  .rk-cubie{position:absolute;top:calc(50% - 31px);left:calc(50% - 31px);width:62px;height:62px;transform-style:preserve-3d;transform-origin:center;}
  .rk-face{position:absolute;width:62px;height:62px;border:2px solid #0006;border-radius:7px;background:#141414;}
  .rk-U{transform:rotateX(-90deg) translateZ(31px)} .rk-D{transform:rotateX(90deg) translateZ(31px)}
  .rk-F{transform:translateZ(31px)} .rk-B{transform:rotateY(180deg) translateZ(31px)}
  .rk-R{transform:rotateY(90deg) translateZ(31px)} .rk-L{transform:rotateY(-90deg) translateZ(31px)}
  .rk .panel h3{font-family:'Press Start 2P',monospace;font-size:14px;margin:0 0 10px;}
  .rk .panel .desc{color:var(--mut);font-size:13.5px;margin:0 0 18px;max-width:260px;}
  .rk .moves{display:grid;grid-template-columns:repeat(3,54px);gap:8px;margin-bottom:16px;}
  .rk .mv{font-family:'Press Start 2P',monospace;font-size:13px;padding:13px 0;text-align:center;cursor:pointer;background:var(--panel2);color:var(--ink);border:2px solid var(--line);}
  .rk .mv:hover{border-color:var(--acc);color:var(--acc);} .rk .mv:active{transform:translateY(1px);}
  .rk .act{display:flex;gap:10px;flex-wrap:wrap;}
  .rk .win{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--acc2);margin-top:14px;min-height:14px;}
  .rk .hint{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--mut);margin-top:12px;line-height:1.8;}
  @media(max-width:820px){
    .links{display:none;}
    .hero{grid-template-columns:1fr;} .palettewrap{order:-1;}
    .about{grid-template-columns:1fr;}
    .rk{grid-template-columns:1fr;} .rk .scene{width:260px;height:260px;}
    .vol-group{grid-template-columns:1fr;}
  }


  /* Paleto Studio additions. Tokens only, never a literal colour. */
  .anims{display:flex;gap:10px;align-items:flex-end;justify-content:center;}
  .anims figure{margin:0;flex:1;max-width:200px;border:3px solid var(--line);background:var(--panel);overflow:hidden;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;}
  .anims .mobsprite{transform:scale(1.6);}
  .anims img{image-rendering:pixelated;width:100%;height:auto;transform:scale(1.45);}
  .showcase{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px;}
  main section{scroll-margin-top:92px;}
  .sp{margin:0;border:3px solid var(--line);background:var(--panel);padding:14px 8px 10px;text-align:center;transition:transform .08s,box-shadow .08s;}
  .sp:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--acc);border-color:var(--ink);}
  .sp img{image-rendering:pixelated;height:96px;width:auto;display:block;margin:0 auto 10px;}
  .sp figcaption{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--mut);}
  .packrow{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:stretch;}
  .mock{border:3px solid var(--line);background:var(--panel2);box-shadow:9px 9px 0 var(--acc3);}
  .mock-h{font-family:'Press Start 2P',monospace;font-size:10px;padding:14px;border-bottom:3px solid var(--line);color:var(--acc);}
  .mock-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:18px;}
  .mock-grid img{image-rendering:pixelated;height:72px;width:auto;margin:0 auto;display:block;}
  .mock-grid .mobsprite{margin:0 auto;transform:scale(.8);}
  .mock-side{border:3px solid var(--line);background:var(--panel);padding:22px;display:flex;flex-direction:column;}
  .mock-side h3{font-family:'Press Start 2P',monospace;font-size:12px;margin:0 0 12px;line-height:1.6;}
  .mock-side p{color:var(--mut);margin:0;font-size:14px;}
  .gamerow{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
  .gcard{border:3px solid var(--line);background:var(--panel);padding:22px;transition:transform .08s,box-shadow .08s;display:flex;flex-direction:column;}
  .gcard .gcover{display:block;width:calc(100% + 44px);margin:-22px -22px 14px;border-bottom:3px solid var(--line);image-rendering:auto;}
  .gcard .act{margin-top:14px;}
  .gcard p{flex:1;}
  .gcard:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--acc);border-color:var(--ink);}
  .gcard .vnum{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--acc2);margin-bottom:10px;}
  .gcard h3{font-family:'Press Start 2P',monospace;font-size:14px;margin:0 0 10px;}
  .gcard p{color:var(--mut);font-size:14px;margin:0;}
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
  .step{border:3px solid var(--line);background:var(--panel);padding:18px;}
  .step b{font-family:'Press Start 2P',monospace;font-size:16px;color:var(--acc);}
  .step h4{font-family:'Press Start 2P',monospace;font-size:9px;margin:10px 0 8px;}
  .step p{color:var(--mut);font-size:13px;margin:0;}
  @media(max-width:820px){
    .packrow,.gamerow{grid-template-columns:1fr;}
    .showcase{grid-template-columns:repeat(2,1fr);}
    .anims{order:-1;}
  }

  /* multi-page additions */
  .intro{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;}
  .icard{border:3px solid var(--line);background:var(--panel);padding:22px;display:flex;flex-direction:column;transition:transform .08s,box-shadow .08s;}
  .icard:hover{transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--acc);border-color:var(--ink);}
  .icard h3{font-family:'Press Start 2P',monospace;font-size:13px;margin:0 0 12px;}
  .icard p{color:var(--mut);font-size:14px;margin:0 0 18px;flex:1;}
  .icard .go{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--acc2);}
  .icard:hover .go{color:var(--acc);}
  .ipreview{display:flex;gap:8px;justify-content:center;align-items:flex-end;height:110px;margin-bottom:16px;}
  .ipreview img{image-rendering:pixelated;height:96px;width:auto;}
  .hpals{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:16px;align-content:start;}
  .hpal{display:flex;width:100%;height:12px;border:2px solid var(--line);background:none;padding:0;cursor:pointer;}
  .hpal:hover{border-color:var(--acc);}
  .hpal i{flex:1;}
  .backlink{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--mut);display:inline-block;margin-bottom:22px;}
  .backlink:hover{color:var(--acc);}
  .pagehead{padding:46px 0 10px;}
  .pagehead h1{font-family:'Press Start 2P',monospace;font-size:clamp(24px,5vw,40px);margin:0 0 16px;line-height:1.3;text-shadow:4px 4px 0 var(--acc3);}
  .pagehead p{color:var(--mut);font-size:16px;max-width:640px;margin:0;}
  @media(max-width:820px){ .intro{grid-template-columns:1fr;} }

  /* tools */
  .toolprev{align-items:center;}
  .wave{display:flex;align-items:flex-end;gap:5px;height:96px;}
  .wave i{width:9px;background:var(--acc);animation:vu 1.1s ease-in-out infinite;}
  .wave i:nth-child(odd){background:var(--acc2);}
  .wave i:nth-child(1){height:24%;animation-delay:0s}   .wave i:nth-child(2){height:58%;animation-delay:.08s}
  .wave i:nth-child(3){height:36%;animation-delay:.16s} .wave i:nth-child(4){height:82%;animation-delay:.24s}
  .wave i:nth-child(5){height:48%;animation-delay:.32s} .wave i:nth-child(6){height:96%;animation-delay:.4s}
  .wave i:nth-child(7){height:40%;animation-delay:.48s} .wave i:nth-child(8){height:70%;animation-delay:.56s}
  .wave i:nth-child(9){height:30%;animation-delay:.64s} .wave i:nth-child(10){height:62%;animation-delay:.72s}
  .wave i:nth-child(11){height:44%;animation-delay:.8s} .wave i:nth-child(12){height:26%;animation-delay:.88s}
  @keyframes vu{0%,100%{transform:scaleY(.55);transform-origin:bottom}50%{transform:scaleY(1);transform-origin:bottom}}
  @media (prefers-reduced-motion: reduce){ .wave i{animation:none} }

  .tool{border:3px solid var(--line);background:var(--panel);margin-bottom:18px;}
  .tool-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 22px;border-bottom:3px solid var(--line);}
  .tool-h h3{font-family:'Press Start 2P',monospace;font-size:15px;margin:0;}
  .tool-h .tagline{color:var(--mut);font-size:14px;margin:0;}
  .tool-h .badge{font-family:'Press Start 2P',monospace;font-size:7px;padding:6px 8px;margin-left:auto;}
  .badge.live{background:var(--acc2);color:var(--onacc);}
  .badge.soon{border:2px solid var(--acc3);color:var(--acc3);}
  .tool-b{padding:22px;display:grid;grid-template-columns:1.15fr .85fr;gap:26px;}
  .tool-b p{color:var(--mut);margin:0 0 14px;font-size:14.5px;}
  .tool-b p:last-child{margin-bottom:0;}
  .tool-b h4{font-family:'Press Start 2P',monospace;font-size:9px;margin:0 0 12px;color:var(--acc);}
  .featlist{list-style:none;margin:0;padding:0;}
  .featlist li{color:var(--mut);font-size:13.5px;padding:8px 0 8px 18px;border-bottom:2px solid var(--line);position:relative;}
  .featlist li:last-child{border-bottom:none;}
  .featlist li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;background:var(--acc2);}
  .proof{border-left:4px solid var(--acc);padding:12px 0 12px 16px;margin-top:18px;}
  .proof b{color:var(--ink);}
  @media(max-width:820px){ .tool-b{grid-template-columns:1fr;} }

  /* product page */
  .prodtop{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding:20px 0 40px;}
  .boxwrap img{width:100%;height:auto;display:block;image-rendering:auto;}
  .prodinfo h1{font-family:'Press Start 2P',monospace;font-size:clamp(22px,4vw,38px);line-height:1.25;margin:0 0 16px;text-shadow:4px 4px 0 var(--acc3);}
  .prodinfo .tag{font-size:18px;color:var(--ink);font-weight:600;margin:0 0 10px;}
  .prodinfo .sub{font-size:15px;color:var(--mut);margin:0 0 22px;}
  .pricerow{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:20px;}
  .price{font-family:'Press Start 2P',monospace;font-size:22px;color:var(--acc);}

  .mobrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
  .mob{margin:0;border:3px solid var(--line);background:var(--panel);padding:14px 10px 12px;text-align:center;}
  .mob:hover{border-color:var(--acc);}
  /* the sprite sheets are one horizontal strip: step through it frame by frame */
  .mobsprite{width:92px;height:92px;margin:0 auto 12px;image-rendering:pixelated;
    background-image:var(--strip);background-repeat:no-repeat;background-size:calc(92px * var(--frames)) 92px;
    animation:strip calc(var(--frames) * 0.16s) steps(var(--frames)) infinite;}
  .mobsprite.walk{animation-duration:calc(var(--frames) * 0.11s);}
  @keyframes strip{from{background-position:0 0}to{background-position:calc(-92px * var(--frames)) 0}}
  @media (prefers-reduced-motion: reduce){ .mobsprite{animation:none} }
  .mob figcaption b{display:block;font-family:'Press Start 2P',monospace;font-size:9px;margin-bottom:6px;}
  .mob figcaption span{font-size:12px;color:var(--mut);}

  .sheet{border:3px solid var(--line);background:var(--panel2);padding:16px;margin-bottom:18px;}
  .sheet img{width:100%;height:auto;display:block;image-rendering:pixelated;}
  .iconrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:12px;}
  .ic{margin:0;border:3px solid var(--line);background:var(--panel);padding:14px 6px 10px;text-align:center;}
  .ic img{image-rendering:pixelated;width:48px;height:48px;display:block;margin:0 auto 10px;}
  .ic figcaption{font-family:'Press Start 2P',monospace;font-size:7px;color:var(--mut);}

  .prodcard{display:block;border:3px solid var(--line);background:var(--panel);overflow:hidden;transition:transform .1s,box-shadow .1s;}
  .prodcard:hover{transform:translate(-2px,-3px);box-shadow:8px 9px 0 var(--acc);border-color:var(--ink);}
  .prodcard img{width:100%;height:auto;display:block;border-bottom:3px solid var(--line);}
  .prodcard .body{padding:18px;}
  .prodcard h3{font-family:'Press Start 2P',monospace;font-size:13px;margin:0 0 10px;}
  .prodcard p{color:var(--mut);font-size:14px;margin:0 0 14px;}
  .prodcard .go{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--acc2);}
  .featured{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:center;margin-bottom:34px;}
  @media(max-width:820px){ .prodtop,.featured{grid-template-columns:1fr;} }

  /* legal */
  .legal{max-width:760px;}
  .legal h2{font-family:'Press Start 2P',monospace;font-size:11px;margin:34px 0 14px;color:var(--acc);}
  .legal h2:first-child{margin-top:0;}
  .legal p{color:var(--mut);font-size:15px;line-height:1.75;margin:0 0 14px;}
  .legal p b{color:var(--ink);}
  .legal-foot{border-top:2px solid var(--line);padding-top:18px;margin-top:34px !important;}

  /* cuentas y biblioteca */
  .authbox{max-width:440px;margin:0 auto;padding:8px 0 60px;}
  .authbtn{width:100%;text-align:center;}
  .authsep{display:flex;align-items:center;gap:14px;margin:26px 0;color:var(--mut);font-size:13px;}
  .authsep::before,.authsep::after{content:"";flex:1;height:2px;background:var(--line);}
  .authform label{display:block;font-family:'Press Start 2P',monospace;font-size:8px;color:var(--mut);margin-bottom:10px;}
  .authrow{display:flex;gap:10px;margin-bottom:10px;}
  .authrow input{flex:1;min-width:0;border:3px solid var(--line);background:var(--bg);color:var(--ink);padding:13px 14px;font:inherit;font-size:14px;}
  .authrow input:focus{outline:none;border-color:var(--acc);}
  .authmore{margin-top:24px;border-top:2px solid var(--line);padding-top:18px;}
  .authmore summary{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--mut);cursor:pointer;margin-bottom:16px;}
  .authmore summary:hover{color:var(--acc);}
  .authnote{color:var(--mut);font-size:13.5px;margin-top:18px;min-height:20px;}
  .authnote.bad{color:var(--acc3);}
  .libgrid{display:grid;gap:16px;}
  .libitem{display:grid;grid-template-columns:200px 1fr;gap:20px;border:3px solid var(--line);background:var(--panel);padding:18px;align-items:center;}
  .libitem img{width:100%;height:auto;display:block;}
  .libbody h3{font-family:'Press Start 2P',monospace;font-size:12px;margin:0 0 10px;}
  .libbody p{color:var(--mut);font-size:14px;margin:0 0 16px;}
  .libempty{border:3px solid var(--line);background:var(--panel);padding:32px;}
  .libempty p{color:var(--mut);margin:0 0 14px;}
  @media(max-width:700px){ .libitem{grid-template-columns:1fr;} }