/* Bumpy Keys printables — shared styles. Big Sky tokens, print-first. */
@font-face{font-family:Fredoka;src:url(/fonts/Fredoka-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Fredoka;src:url(/fonts/Fredoka-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Fredoka;src:url(/fonts/Fredoka-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Rubik;src:url(/fonts/Rubik-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Rubik;src:url(/fonts/Rubik-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Rubik;src:url(/fonts/Rubik-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Rubik;src:url(/fonts/Rubik-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--ink:#0F1B33;--muted:#5A6653;--sky:#B8E986;--sky2:#8FD16E;--ground:#5A3E2B;--accent:#2FA36B;--accent2:#F4C542;
  --pinky:#F472B6;--ring:#FB923C;--middle:#FACC15;--index:#4ADE80;--thumb:#60A5FA;--display:Fredoka,system-ui,sans-serif;--body:Rubik,system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#fff;color:var(--ink);font-family:var(--body);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.page{position:relative;width:11in;height:8.5in;overflow:hidden;background:#fff;page-break-after:always}
.page.portrait{width:8.5in;height:11in}
@page{size:letter landscape;margin:0}
@media screen{body{background:#e9ecef;padding:24px}.page{margin:0 auto 24px;box-shadow:0 20px 60px rgba(15,27,51,.25);border-radius:6px}}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02}
.sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 55%,#4C9A5C 100%)}
.hill{position:absolute;bottom:0;background:rgba(40,90,60,.25);clip-path:polygon(50% 0,100% 100%,0 100%)}
.ground{position:absolute;left:0;right:0;bottom:0;background:var(--ground)}
.ground::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:rgba(244,197,66,.85)}
.ground::after{content:"";position:absolute;left:0;right:0;top:50%;height:5px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 40px,transparent 40px 70px)}
.plate{background:rgba(255,255,255,.94);border-radius:28px;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.card{background:#fff;border-radius:32px;box-shadow:0 30px 80px rgba(15,27,51,.25)}
.badge{display:inline-flex;align-items:center;justify-content:center;border:2px solid #fff;border-radius:999px;box-shadow:0 2px 4px rgba(0,0,0,.2);color:var(--ink)}
.badge svg{width:55%;height:55%;fill:var(--ink)}
.chip{display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;color:rgba(15,27,51,.85);border-radius:10px}
.footer{position:absolute;left:0.5in;right:0.5in;bottom:0.22in;display:flex;align-items:center;gap:14px;font:600 12px var(--body);color:var(--muted);background:rgba(255,255,255,.94);border-radius:999px;padding:8px 18px 8px 10px;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.footer img.icon{width:34px;height:34px;border-radius:9px}
.footer .brand{font:700 18px var(--display);color:var(--ink)}
.footer .qr{margin-left:auto;display:flex;align-items:center;gap:8px}
.footer .qr img{width:52px;height:52px}
.footer .qr span{max-width:150px;line-height:1.25}
.pill{display:inline-block;background:var(--accent);color:#fff;font:700 15px var(--display);padding:6px 14px;border-radius:999px}