/*! Chie Games site · base: reset, typography, layout utilities. Uses tokens.css only. */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font);font-weight:var(--fw-medium);
  font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
img{background:var(--surface-sunk)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
a{color:var(--link);text-decoration-thickness:2px;text-underline-offset:3px;font-weight:var(--fw-bold)}
a:hover{color:var(--link-hover)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:6px}
::selection{background:var(--sun-300);color:var(--ink-900)}
strong,b{font-weight:var(--fw-bold)}

/* ---------- text styles ---------- */
.t-display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--fw-bold)}
.t-h1{font-size:var(--fs-h1)}
.t-h2{font-size:var(--fs-h2)}
.t-h3{font-size:var(--fs-h3)}
.t-h4{font-size:var(--fs-h4);line-height:var(--lh-tight)}
.t-lead{font-size:var(--fs-lead);line-height:1.5;color:var(--text-muted)}
.t-body{font-size:var(--fs-body)}
.t-sm{font-size:var(--fs-sm)}
.t-xs{font-size:var(--fs-xs)}
.t-muted{color:var(--text-muted)}
.t-bold{font-weight:var(--fw-bold)}
.t-overline{font-size:var(--fs-overline);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-overline);color:var(--text-muted)}
.t-num{font-variant-numeric:tabular-nums}
/* Outlined "toy" text – same recipe as the games' .t-out. --sw stroke, --sd hard drop. */
.t-out{color:var(--white);-webkit-text-stroke:var(--sw,.07em) var(--border);paint-order:stroke fill;text-shadow:0 var(--sd,.08em) 0 var(--border)}
.t-out .hl,.t-out.hl{color:var(--highlight)}
.t-logo{display:inline-block;transform:rotate(-3deg)}
.prose{max-width:var(--measure)}
.prose>*+*{margin-top:1em}
.prose h2{font-size:var(--fs-h3);margin-top:1.8em}
.prose h3{font-size:var(--fs-h4);margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.35em}

/* ---------- layout ---------- */
.container{width:100%;max-width:calc(var(--w-content) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.container.wide{max-width:calc(var(--w-wide) + var(--gutter)*2)}
.container.narrow{max-width:calc(var(--w-prose) + var(--gutter)*2)}
.section{padding-block:var(--section-y)}
.section.tight{padding-block:calc(var(--section-y)*.6)}
.section.alt{background:var(--bg-alt)}
.section.ink{background:var(--bg-ink);color:var(--text-inverse)}
.stack{display:flex;flex-direction:column;gap:var(--gap,var(--s-4))}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,var(--s-3))}
.grid-cards{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.split{display:grid;gap:var(--s-7);align-items:center}
@media (min-width:1024px){.split{grid-template-columns:1fr 1fr}.split.wide-left{grid-template-columns:1.2fr .8fr}}
.center{text-align:center;margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--s-4);top:-100px;z-index:var(--z-toast);background:var(--primary);color:var(--on-primary);padding:var(--s-3) var(--s-4);border:var(--bw) solid var(--border);border-radius:var(--r-sm);text-decoration:none}
.skip-link:focus{top:var(--s-4)}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--d-slow) var(--ease-out),transform var(--d-slow) var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@keyframes cg-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes cg-float{50%{transform:translateY(-10px) rotate(var(--rot,0deg))}}
@keyframes cg-breathe{50%{transform:scale(1.06)}}
@keyframes cg-marquee{to{transform:translateX(-50%)}}
@keyframes cg-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}