/* PagePlayer design tokens — shared by the site and (later) the real badge. */
:root,[data-theme="day"]{
  --paper:#F5F1E8;--paper-2:#EDE7DA;--paper-3:#E3DBC9;
  --ink:#1B1A17;--ink-2:#47433B;--ink-3:#676155;
  --rule:#CDC4B1;--pending:#CEC6B5;
  --accent:#E8462A;--accent-ink:#B3321B;--accent-wash:rgba(232,70,42,.11);--on-accent:#FFF8F0;
  --teal:#2B726C;--teal-wash:#D8E7E2;
  --hl:#ECDDB8;
  --surface:#FBF8F2;--border:rgba(27,26,23,.2);--focus:#B3321B;
  --term-bg:#141311;--term-fg:#E7E1D4;--term-dim:#968F82;--term-ok:#6DBDB2;
  --grain:.055;--grain-dot:rgba(27,26,23,.07);
  color-scheme:light;
}
[data-theme="night"]{
  --paper:#121110;--paper-2:#1A1917;--paper-3:#25231F;
  --ink:#EDE6D8;--ink-2:#C3BBAC;--ink-3:#9D9688;
  --rule:#36332D;--pending:#3D3A34;
  --accent:#E8462A;--accent-ink:#FF7A5E;--accent-wash:rgba(232,70,42,.17);--on-accent:#FFF8F0;
  --teal:#63B8AE;--teal-wash:#15302C;
  --hl:#2D231D;
  --surface:#1D1B19;--border:rgba(237,230,216,.22);--focus:#FF7A5E;
  --term-bg:#0B0A09;--term-fg:#E7E1D4;--term-dim:#968F82;--term-ok:#6DBDB2;
  --grain:.08;--grain-dot:rgba(237,230,216,.05);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="day"]){
    --paper:#121110;--paper-2:#1A1917;--paper-3:#25231F;
    --ink:#EDE6D8;--ink-2:#C3BBAC;--ink-3:#9D9688;
    --rule:#36332D;--pending:#3D3A34;
    --accent-ink:#FF7A5E;--accent-wash:rgba(232,70,42,.17);
    --teal:#63B8AE;--teal-wash:#15302C;--hl:#2D231D;
    --surface:#1D1B19;--border:rgba(237,230,216,.22);--focus:#FF7A5E;
    --term-bg:#0B0A09;--grain:.08;--grain-dot:rgba(237,230,216,.05);color-scheme:dark;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Geist",system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
body{background-image:radial-gradient(circle at 30% 40%,var(--grain-dot) .6px,transparent .9px),radial-gradient(circle at 70% 80%,var(--grain-dot) .5px,transparent .8px);background-size:5px 5px,7px 7px}
a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-ink)}
::selection{background:var(--accent-wash)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button{font:inherit;color:inherit}
@keyframes pp-spin{to{transform:rotate(360deg)}}
@keyframes pp-blink{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes pp-pulse-a{0%{box-shadow:0 0 0 0 var(--teal)}60%{box-shadow:0 0 0 5px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes pp-pulse-b{0%{box-shadow:0 0 0 0 var(--teal)}60%{box-shadow:0 0 0 5px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes pp-onair{0%,100%{box-shadow:0 0 0 0 rgba(232,70,42,.55)}70%{box-shadow:0 0 0 7px rgba(232,70,42,0)}}
@keyframes pp-stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(2.2)}60%{opacity:1;transform:translate(-50%,-50%) rotate(-9deg) scale(.95)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-9deg) scale(1)}}
@keyframes pp-caret{50%{opacity:0}}
@keyframes pp-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0s!important;animation-iteration-count:1!important;transition:none!important}
}