:root {
  color-scheme: light;
  --paper: #f6f5ef;
  --ink: #152d29;
  --muted: #56665f;
  --accent: #186e5c;
  --line: #cdd4ca;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
.studio-home, .studio-home * { box-sizing: border-box; }
.studio-home { margin: 0; font-size: 16px; line-height: 1.65; }
.studio-home a { color: inherit; text-underline-offset: 5px; }
.studio-home a:focus-visible, .studio-home summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.studio-home p, .studio-home h1, .studio-home h2, .studio-home h3 { margin: 0; }
.studio-home .content-width, .studio-home .site-header, .studio-home .hero-inner { width: min(100% - 128px, 1152px); margin-inline: auto; }
.studio-home .skip-link { position: absolute; z-index: 2; top: 12px; left: 24px; padding: 12px 20px; background: var(--ink); color: var(--paper); transform: translateY(-150%); }
.studio-home .skip-link:focus { transform: translateY(0); }
.studio-home .site-header { display: flex; align-items: center; justify-content: space-between; min-height: 100px; border-bottom: 1px solid var(--line); }
.studio-home .brand { min-height: 44px; display: inline-flex; align-items: center; font-size: 25px; line-height: 1; font-weight: 800; letter-spacing: -.07em; text-decoration: none; }
.studio-home .brand-dot, .studio-home .title-dot { color: var(--accent); }
.studio-home nav { display: flex; gap: 32px; }
.studio-home nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.studio-home nav a:hover, .studio-home .quiet-link:hover { color: var(--accent); }
.studio-home .hero { padding-block: 68px 62px; }
.studio-home .eyebrow { font-size: 14px; line-height: 1.4; letter-spacing: .12em; font-weight: 650; }
.studio-home .hero .eyebrow { color: var(--accent); margin-bottom: 20px; }
.studio-home h1 { font-size: clamp(80px, 12vw, 160px); font-weight: 750; line-height: .95; letter-spacing: -.075em; }
.studio-home h1 > span { display: inline-block; }
.studio-home .hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: 42px; }
.studio-home .intro { font-size: 21px; line-height: 1.65; letter-spacing: -.035em; }
.studio-home .text-link { display: inline-flex; align-items: center; gap: 32px; min-height: 48px; border-bottom: 1px solid var(--ink); text-decoration: none; }
.studio-home .text-link span { font-size: 25px; transition: transform 180ms ease; }
.studio-home .text-link:hover span { transform: translate(3px, 3px); }
.studio-home .games { padding-block: 30px 0; border-top: 1px solid var(--line); }
.studio-home .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.studio-home .quiet-link { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; font-size: 15px; text-decoration: none; }
.studio-home .game-link { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-block: 22px 35px; border-bottom: 1px solid var(--line); text-decoration: none; }
.studio-home .game-link h3 { font-size: clamp(32px, 4vw, 48px); line-height: 1.2; letter-spacing: -.04em; }
.studio-home .game-link p { margin-top: 6px; color: var(--muted); }
.studio-home .game-action { display: inline-flex; align-items: center; gap: 32px; }
.studio-home .game-arrow { font-size: 34px; line-height: 1; transition: transform 180ms ease; }
.studio-home .game-link:hover .game-arrow { transform: translate(4px, -4px); }
.studio-home .game-link:hover h3 { color: var(--accent); }
.studio-home .game-support-links { flex-wrap: wrap; column-gap: 28px; row-gap: 0; padding-top: 10px; color: var(--muted); }
.studio-home .game-support-links a { text-decoration: underline; }
.studio-home .contact { padding-block: 44px 48px; }
.studio-home .contact-email { display: inline-flex; align-items: center; gap: 20px; min-height: 48px; margin-block: 12px 4px; font-size: clamp(22px, 3vw, 32px); letter-spacing: -.025em; text-decoration: none; }
.studio-home .contact-email:hover { text-decoration: underline; }
.studio-home .contact p { color: var(--muted); }
.studio-home .site-footer { border-top: 1px solid var(--line); padding-block: 28px 40px; color: var(--muted); font-size: 14px; }
.studio-home .footer-top { display: flex; justify-content: space-between; gap: 20px; }
.studio-home .footer-top span { margin-left: 12px; }
.studio-home summary { width: fit-content; min-height: 44px; padding-block: 12px; cursor: pointer; }
.studio-home dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 20px; margin-block: 12px 0; max-width: 760px; }
.studio-home dd { margin: 0; overflow-wrap: anywhere; }
.studio-home dt { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .studio-home .hero-inner { animation: studio-arrive 500ms ease-out both; }
  @keyframes studio-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 700px) {
  .studio-home .content-width, .studio-home .site-header, .studio-home .hero-inner { width: calc(100% - 48px); }
  .studio-home .site-header { min-height: 82px; }
  .studio-home nav { gap: 24px; }
  .studio-home .hero { padding-block: 48px 40px; }
  .studio-home .hero .eyebrow { margin-bottom: 24px; }
  .studio-home h1 { font-size: clamp(72px, 23vw, 120px); }
  .studio-home h1 > span { display: block; }
  .studio-home .hero-bottom { align-items: flex-start; flex-direction: column; gap: 24px; margin-top: 32px; }
  .studio-home .intro { font-size: 18px; }
  .studio-home .text-link { gap: 48px; }
  .studio-home .games { padding-top: 22px; }
  .studio-home .game-link { align-items: flex-start; flex-direction: column; gap: 22px; padding-block: 20px 28px; }
  .studio-home .game-action { justify-content: space-between; width: 100%; }
  .studio-home .game-arrow { font-size: 28px; }
  .studio-home .contact { padding-block: 34px; }
  .studio-home .contact-email { gap: 10px; font-size: clamp(20px, 5.7vw, 26px); }
  .studio-home .contact p { max-width: 25ch; }
  .studio-home .footer-top { flex-direction: column; gap: 8px; }
  .studio-home dl { grid-template-columns: 1fr; gap: 2px; }
  .studio-home dd { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-home .text-link span, .studio-home .game-arrow { transition: none; }
}