@font-face{font-family:"Bagel Fat One";src:url(/fonts/bagel-fat-one.woff2) format("woff2");font-display:swap}
@font-face{font-family:Atkinson;src:url(/fonts/atkinson-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:Atkinson;font-weight:700;src:url(/fonts/atkinson-700.woff2) format("woff2");font-display:swap}

:root{--blue:#2b2fd9;--night:#11123f;--yellow:#ffd23f;--pink:#ff6fb5;--bone:#f4f2ff;--c:var(--yellow);--spring:cubic-bezier(.23,1,.32,1)}
*{box-sizing:border-box}
html{scrollbar-color:var(--yellow) var(--night);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blue);color:var(--bone);font:1.125rem/1.6 Atkinson,Verdana,sans-serif}
::selection{background:var(--pink);color:var(--night)}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em}
h1,h2,h3{font-family:"Bagel Fat One",Verdana,sans-serif;font-weight:400;line-height:1.05;margin:0;text-wrap:balance}
[hidden]{display:none!important}
html[lang=es] span[lang=en],html[lang=en] span[lang=es]{display:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}

.top{background:var(--night)}
.top .wrap{display:flex;align-items:center;gap:14px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;font:1.65rem "Bagel Fat One",sans-serif;color:var(--yellow);text-decoration:none}
.top nav{display:flex;align-items:center;gap:16px}
.top nav a{text-decoration:none;font-weight:700}
.top nav .patreon{background:var(--pink);color:var(--night);padding:6px 14px;border-radius:999px;transition:transform .16s var(--spring)}
.lang{display:flex;background:#fff2;border-radius:999px;padding:3px}
.lang button{border:0;background:none;color:var(--bone);font:700 .9rem Atkinson,sans-serif;min-width:40px;padding:6px 8px;border-radius:999px;cursor:pointer}
.lang button[aria-pressed=true]{background:var(--yellow);color:var(--night)}

.hero{padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(8px,1.5vw,16px)}
.hero h1{font-size:clamp(3rem,8.5vw,6.25rem);line-height:1;color:var(--yellow);max-width:11em}
.hero p{font-size:clamp(1.2rem,2.2vw,1.4rem);max-width:40em;margin:24px 0 0}

/* Cartridges stand in the shelf with their pins hidden; lifting one shows the pins. */
.shelf{overflow:hidden;padding-top:26px}
.shelf-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:40px 0}
.slot{display:flex;flex-direction:column}
.slot>p{margin:0;padding:12px 24px 0 8px}
.slot::after{content:"";order:1;height:22px;margin:0 -1px;background:var(--yellow);border-top:4px solid var(--night);position:relative;z-index:1}
.slot>p{order:2}
.cart{--w:4px;position:relative;display:block;width:min(100%,240px);margin:0 auto;padding:30px 14px 16px;background:var(--c);color:var(--night);border:var(--w) solid var(--night);border-radius:16px 16px 6px 6px;text-decoration:none;transition:transform .24s var(--spring)}
.cart::before{content:"";position:absolute;inset:7px 14px auto;height:12px;background:repeating-linear-gradient(90deg,var(--night) 0 4px,transparent 4px 11px);opacity:.55}
.cart::after{content:"";position:absolute;left:18%;right:18%;bottom:-22px;height:18px;background:repeating-linear-gradient(90deg,var(--yellow) 0 6px,var(--night) 6px 9px);border:var(--w) solid var(--night);border-top:0}
.cart img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--night);border:var(--w) solid var(--night);border-radius:6px}
.cart b{display:block;margin-top:10px;font:400 1.4rem/1.1 "Bagel Fat One",sans-serif}
.cart small{display:block;margin-top:2px;font-size:1rem;font-weight:700}
.shelf .cart{animation:drop .6s var(--spring) backwards}
.slot:nth-child(2) .cart{animation-delay:.07s}
.slot:nth-child(3) .cart{animation-delay:.14s}
@keyframes drop{from{transform:translateY(-34px)}}
.cart.empty{background:none;color:var(--bone);border:4px dashed var(--bone);display:flex;flex-direction:column;justify-content:center;min-height:318px}
.cart.empty::before,.cart.empty::after{display:none}
.cart.empty b{margin:0;color:var(--yellow);font-size:1.7rem}
.cart.empty small{margin-top:8px;font-weight:400;font-size:1.0625rem}

.about{padding-top:clamp(44px,7vw,80px);padding-bottom:clamp(44px,7vw,80px)}
.about h2{font-size:clamp(2rem,5vw,3.4rem);color:var(--yellow)}
.about p{max-width:62ch;margin:14px 0 0}

.band{background:var(--c);color:var(--night)}
.band-in{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;padding-top:clamp(28px,5vw,56px);padding-bottom:clamp(44px,5vw,64px)}
.band .cart{--c:var(--bone);margin:0;transform:rotate(-3deg)}
.band h1{font-size:clamp(2.8rem,8vw,5.6rem);line-height:1}
.lead{font-size:clamp(1.15rem,2.2vw,1.35rem);max-width:58ch;margin:14px 0 0}
.get{display:inline-block;margin-top:22px;padding:14px 28px;background:var(--night);color:var(--yellow);border-radius:12px;font:1.35rem/1.15 "Bagel Fat One",sans-serif;text-decoration:none;transition:transform .16s var(--spring)}
.get:active,.top nav .patreon:active{transform:scale(.97)}
.facts{margin:14px 0 0;font-size:1rem}
#count{font-family:"Bagel Fat One",sans-serif;font-weight:400;font-size:1.3em;font-variant-numeric:tabular-nums}

.sheet{background:var(--bone);color:var(--night);padding:clamp(28px,5vw,56px) 0}
.screen{background:var(--night);padding:clamp(6px,1vw,12px);border-radius:14px;margin-bottom:clamp(32px,5vw,56px)}
.screen iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:6px}
.maps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:clamp(32px,5vw,56px)}
.maps img{border-radius:14px;width:100%;aspect-ratio:1;object-fit:cover}
.lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(28px,4vw,48px)}
.lists h2,.guide h2,.prose h2{font-size:clamp(1.7rem,3.4vw,2.2rem);color:var(--blue)}
dl{margin:12px 0 0}
dt{font-weight:700;margin-top:12px}
dd{margin:0}
.guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,4vw,48px);margin-top:clamp(32px,5vw,56px)}
.band+.sheet .guide:first-child{margin-top:0}
.guide ul{margin:12px 0 0;padding-left:20px}
.guide li{margin-top:6px}
.guide h3{font-size:1.3rem;margin-top:22px;color:var(--blue)}
.guide p{margin:6px 0 0}
.steps{list-style:none;margin:12px 0 0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;align-items:start;margin-top:10px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;background:var(--yellow);border:3px solid var(--night);border-radius:8px;font:1rem "Bagel Fat One",sans-serif}

.ad{max-width:1140px;margin:clamp(32px,5vw,56px) auto 0;padding:0 16px}
.ad p{margin:0 0 4px;font-size:.875rem;text-align:center}

.prose{max-width:760px}
.prose h1{font-size:clamp(2.6rem,7vw,4rem);color:var(--blue)}
.prose h2{margin-top:30px}
.prose p{margin:10px 0 0}

.end{background:var(--night);padding:26px 0 32px;font-size:1rem}
.end p{margin:0;max-width:70ch}
.end p+p{margin-top:8px}

@media(hover:hover) and (pointer:fine){
  a.cart:hover{transform:translateY(-26px) rotate(-1.5deg)}
  a.cart.empty:hover{transform:translateY(-6px)}
  .get:hover,.top nav .patreon:hover{transform:translateY(-2px)}
}
@media(max-width:700px){
  .band-in{grid-template-columns:minmax(0,1fr)}
  .band .cart{width:170px}
  .band .cart b,.band .cart small{display:none}
  .slot>p{padding-right:8px}
}
@media(max-width:460px){.top nav a:first-child{display:none}.brand{font-size:1.4rem}}
@media(prefers-reduced-motion:reduce){.cart,.get,.top nav .patreon{transition:none}.shelf .cart{animation:none}a.cart:hover,a.cart.empty:hover,.get:hover,.get:active{transform:none}}