/* Skin B inside skin C: the Junior-facing pixel panel on dareshub.com (design §3.3, C.png).
   One fixed cream look in both C modes; a plum border makes the boundary visible.
   Headings Pixelify Sans, body 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")}

svg.pix{shape-rendering:crispEdges;flex:none;display:block}
.jr{--plum:#2B2350;--cream:#FFF3C4;background:var(--cream);color:var(--plum);border:4px solid var(--plum);box-shadow:10px 10px 0 var(--plum);padding:26px 26px 28px;margin:56px 0 0;font:17px/1.55 "Atkinson Hyperlegible",system-ui,"Segoe UI",Roboto,sans-serif;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}
.jr :focus-visible{outline-color:var(--plum)}
.jr-in{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
.jr h2{font:700 24px/1.3 "Pixelify Sans",system-ui,sans-serif;text-transform:none;letter-spacing:0;border:0;padding:0;margin:0 0 10px;color:var(--plum)}
.jr p{margin:0 0 12px;max-width:62ch}
.jr .kick{font:700 14px/1.3 "Pixelify Sans",system-ui,sans-serif;margin:0 0 6px}
.jr .rainbow{height:12px;border:3px solid var(--plum);background:repeating-linear-gradient(90deg,#FF7A59 0 12px,#FFD23F 12px 24px,#7BD389 24px 36px,#58C4DD 36px 48px,#B784F5 48px 60px);margin:20px 0}
.jr .bj{display:inline-block;background:#FF7A59;color:var(--plum);border:4px solid var(--plum);box-shadow:6px 6px 0 var(--plum);padding:12px 18px;font:700 17px/1.2 "Atkinson Hyperlegible",system-ui,sans-serif;text-decoration:none;min-height:48px}
.jr .bj:hover{background:#FFD23F}
.jr-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:6px}
.jr-card{position:relative;background:#FFFBEA;border:4px solid var(--plum);box-shadow:6px 6px 0 var(--plum);padding:14px 16px;font-size:15px}
.jr-card h3{font:700 17px/1.3 "Pixelify Sans",system-ui,sans-serif;margin:6px 0}
.jr-card p{margin:0 0 6px;color:#5B5478}
.jr-card .tag{display:inline-flex;align-items:center;gap:6px;color:var(--plum);font-weight:700;font-size:14px}
.pb{display:inline-block;font:700 12px/1.4 "Pixelify Sans",system-ui,sans-serif;padding:2px 6px;color:var(--plum)}
.pb.li{background:#7BD389}.pb.lav{background:#B784F5}.pb.sun{background:#FFD23F}
.jr-card .sample{border-color:#5B5478;color:#5B5478}
@media (max-width:900px){.jr-cards{grid-template-columns:1fr}}
@media (max-width:640px){.jr{padding:18px 16px 22px;box-shadow:6px 6px 0 var(--plum)}.jr-in{grid-template-columns:1fr;gap:12px}.jr h2{font-size:21px}.jr .bj{width:100%;text-align:center}}