/* Skin B: full pixel art (junior.dareshub.com), as drawn in B.png. One fixed cream look:
   prefers-color-scheme is ignored on purpose (owner ruling). Headings and buttons in
   Pixelify Sans, body in Atkinson Hyperlegible (owner ruling Q18). */

@font-face{font-family:"Pixelify Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/pixelify-sans-700.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/atkinson-hyperlegible-400.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/atkinson-hyperlegible-700.woff2) format("woff2")}

:root{--bg:#FFF3C4;--sf:#FFFBEA;--fg:#2B2350;--dim:#5B5478;--co:#FF7A59;--sky:#58C4DD;--sun:#FFD23F;--li:#7BD389;--lav:#B784F5;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--fg);font:17px/1.6 "Atkinson Hyperlegible",system-ui,"Segoe UI",Roboto,sans-serif;background-color:var(--bg);background-image:linear-gradient(rgba(43,35,80,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(43,35,80,.07) 1px,transparent 1px);background-size:32px 32px}
a{color:inherit}
:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--sun);color:var(--fg);padding:8px 12px;font-weight:700;border:3px solid var(--fg);z-index:9}
.skip:focus{left:16px;top:16px}
.wrap{max-width:1040px;margin:0 auto;padding:0 28px}
svg.pix{shape-rendering:crispEdges;flex:none;display:block}
.px{font-family:"Pixelify Sans",system-ui,sans-serif;font-weight:700}

.strip{background:var(--sun);border-bottom:4px solid var(--fg);font:700 14px/1.4 "Pixelify Sans",system-ui,sans-serif;padding:7px 0}
.strip p{margin:0}

.top{display:flex;align-items:center;gap:10px 20px;padding:14px 0;border-bottom:4px solid var(--fg);flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 22px/1 "Pixelify Sans",system-ui,sans-serif}
.top nav{margin-left:auto}
.top ul{list-style:none;margin:0;padding:0;display:flex;gap:6px 18px;align-items:center;flex-wrap:wrap;font-weight:700;font-size:15px}
.top ul a{text-decoration:none;display:inline-block;padding:10px 0}
.top ul a:hover{text-decoration:underline;text-underline-offset:4px}
.acts a{display:inline-block;text-decoration:none;font-weight:700;font-size:15px;background:var(--sun);border:4px solid var(--fg);box-shadow:4px 4px 0 var(--fg);padding:6px 12px}

.hero{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:34px 0 6px}
h1{font:700 40px/1.2 "Pixelify Sans",system-ui,sans-serif;margin:0 0 14px;max-width:20ch}
.lead{margin:0 0 22px;max-width:56ch;font-size:18px}
.cta{display:flex;gap:18px;flex-wrap:wrap;margin:6px 0}
.bp,.bs{display:inline-block;border:4px solid var(--fg);box-shadow:6px 6px 0 var(--fg);padding:13px 22px;font:700 19px/1.2 "Pixelify Sans",system-ui,sans-serif;text-decoration:none;color:var(--fg);min-height:52px}
.bp{background:var(--co)}
.bs{background:var(--sky)}
.bp:hover,.bs:hover{background:var(--sun)}
.bp:active,.bs:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--fg)}
.bt{display:inline-block;background:var(--sun);border:3px solid var(--fg);box-shadow:3px 3px 0 var(--fg);padding:8px 12px;font-weight:700;font-size:15px;text-decoration:none;min-height:44px}
.note{font-size:15px;color:var(--dim);margin:14px 0 0}
.rainbow{height:12px;border:3px solid var(--fg);background:repeating-linear-gradient(90deg,#FF7A59 0 12px,#FFD23F 12px 24px,#7BD389 24px 36px,#58C4DD 36px 48px,#B784F5 48px 60px);margin:26px 0 0}

h2{font:700 22px/1.3 "Pixelify Sans",system-ui,sans-serif;margin:46px 0 14px}
h3{font:700 18px/1.3 "Pixelify Sans",system-ui,sans-serif;margin:0 0 8px}
p{margin:0 0 12px}
.dim{color:var(--dim)}
.steps{list-style:none;margin:0;padding:0;counter-reset:n;max-width:62ch}
.steps li{counter-increment:n;position:relative;padding-left:46px;margin:12px 0;min-height:32px}
.steps li::before{content:counter(n);position:absolute;left:0;top:-2px;width:32px;height:32px;background:var(--sun);border:3px solid var(--fg);font:700 17px/26px "Pixelify Sans",system-ui,sans-serif;text-align:center}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.box{background:var(--sf);border:4px solid var(--fg);box-shadow:6px 6px 0 var(--fg);padding:18px}
.box p:last-child{margin-bottom:0}
.box.kid{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.pb{display:inline-block;font:700 13px/1.4 "Pixelify Sans",system-ui,sans-serif;padding:2px 7px;margin-bottom:8px;color:var(--fg)}
.pb.li{background:var(--li)}.pb.lav{background:var(--lav)}.pb.sky{background:var(--sky)}

footer{margin-top:56px;border-top:4px solid var(--fg);padding:14px 0 40px;font-size:15px;color:var(--dim)}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 18px}
footer a{text-decoration:none;display:inline-block;padding:8px 0}
footer a:hover{text-decoration:underline}
footer p{margin:8px 0 0}

@media (max-width:900px){.grid3{grid-template-columns:1fr}}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .acts{margin-left:auto}
  .top nav{margin-left:0;width:100%;order:3}
  .top ul{gap:0 16px;font-size:14px}
  .hero{grid-template-columns:1fr;gap:6px;padding-top:24px}
  .hero .owlbig{order:-1}
  .hero .owlbig svg{width:112px;height:112px}
  h1{font-size:29px}
  .lead{font-size:17px}
  .bp,.bs{width:100%;text-align:center}
  .box.kid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.bp:active,.bs:active{transform:none}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.top.sub{display:block}
.top.sub .row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.top.sub .row a{text-decoration:none;font-weight:700;display:inline-block;padding:10px 0}
.top.sub .row span{font:700 15px/1 "Pixelify Sans",system-ui,sans-serif;color:var(--dim)}
.soonlist{display:grid;gap:22px;margin-top:8px}
.soonlist section{scroll-margin-top:16px}
.soonlist section:target{box-shadow:6px 6px 0 var(--co)}
.soonlist h2{margin:0 0 8px;font-size:20px}
.top.sub h1{font-size:28px;margin:2px 0 10px;max-width:none}