/* Static documents share the v5 chrome and fan; no SPA router is required. */
@view-transition { navigation: auto; }
.console-header { view-transition-name: studio-header; }
.world-stage { view-transition-name: studio-world; }
.site-footer { view-transition-name: studio-footer; }
html { overflow-y: auto; }
body[data-static-route] { height: auto; min-height: 100dvh; overflow: visible; }
body[data-static-route] .console-shell { height: auto; min-height: 100dvh; overflow: visible; }
body[data-static-route] .screen-stack { position: relative; height: auto; min-height: calc(100dvh - var(--header-height)); padding-top: var(--header-height); overflow: visible; }
body[data-static-route] .game-screen { position: relative; inset: auto; height: auto; min-height: calc(100dvh - var(--header-height)); visibility: visible; opacity: 1; transform: none; overflow: visible; }
body[data-static-route] .game-screen .screen-inner { min-height: calc(100dvh - var(--header-height)); }
body[data-static-route] .screen-home { min-height: 850px; }
body[data-static-route] .screen-home .home-copy { min-height: 0; }
body[data-static-route] .screen-how { overflow: clip; }
body[data-static-route] .console-header a,
body[data-static-route] .mobile-dock a { text-decoration: none; }
a.primary-action, a.header-cta, a.inquire-action, a.text-action { text-decoration: none; cursor: pointer; }
.route-heading { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.route-copy { position: relative; z-index: 3; max-width: 1080px; margin: 0 auto; padding: clamp(30px, 6vw, 80px) clamp(20px, 5vw, 64px); color: #f6f4ff; background: rgba(7,7,10,.94); border-radius: 24px; }
.route-copy h1 { margin: 0 0 32px; max-width: 900px; font: 900 clamp(36px, 6vw, 76px)/1 var(--display); letter-spacing: -.045em; overflow-wrap: anywhere; }
.route-copy h2 { margin: 36px 0 12px; font: 800 clamp(22px, 3vw, 32px)/1.15 var(--display); letter-spacing: -.02em; }
.route-copy p, .route-copy li { max-width: 76ch; font: 500 clamp(16px, 1.5vw, 19px)/1.65 var(--utility); color: rgba(255,255,255,.8); }
.route-copy a, .site-footer a { color: #cbbaff; text-underline-offset: 5px; }
.route-copy .primary-action { margin-top: 20px; color: #08090f; }
.definition { font-size: clamp(18px, 2vw, 24px) !important; }
.route-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; padding: 0; list-style: none; }
.route-cards li { border: 1px solid rgba(190,165,255,.3); border-radius: 18px; padding: 22px; background: rgba(124,77,255,.1); }
.route-cards a { display: block; }
.breadcrumbs { margin-bottom: 28px; color: rgba(255,255,255,.65); font: 600 12px/1.7 var(--utility); }
.comparison-wrap { overflow-x: auto; }
.route-copy table { width: 100%; min-width: 560px; border-collapse: collapse; font: 500 16px/1.5 var(--utility); }
.route-copy caption { padding: 12px; text-align: left; }
.route-copy th, .route-copy td { padding: 18px; border: 1px solid rgba(255,255,255,.15); text-align: left; vertical-align: top; }
.route-copy thead { background: rgba(124,77,255,.22); }
.site-footer { position: relative; z-index: 3; padding: 36px clamp(20px, 5vw, 80px); color: rgba(255,255,255,.65); background: #07070a; font: 500 13px/1.65 var(--utility); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 18px 0; max-width: 1150px; }
.site-footer [aria-current=page] { color: white; }
.site-footer code { font: inherit; }
@media (max-width: 760px) {
  body[data-static-route] .screen-stack { padding-top: calc(var(--header-height) + 49px); }
  body[data-static-route] .game-screen { padding-bottom: 32px; }
  body[data-static-route] .screen-home { min-height: 950px; }
  body[data-static-route] .screen-home .home-copy { height: auto; }
  body[data-static-route] .library-zone { position: relative; inset: auto; margin-top: 24px; }
  .site-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .route-cards { grid-template-columns: 1fr; }
  .mobile-dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 4px; border-radius: 12px; color: rgba(255,255,255,.65); font: 650 8px var(--utility); text-align: center; line-height: 1.15; }
  .mobile-dock a i { display: grid; place-items: center; min-width: 27px; height: 27px; border-radius: 9px; font-style: normal; }
  .mobile-dock a[aria-current=page] { color: white; }
  .mobile-dock a[aria-current=page] i { background: linear-gradient(135deg,var(--ember),var(--pink),var(--violet)); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}

/* AEO/SEO asides stay in the HTML for crawlers but off the page (Nov 3). */
.screen-stack > aside.route-copy:not(.legal-note) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Footer link farm is crawler plumbing, not furniture (Nov 3). */
.site-footer { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* "Who you can hire" stays in the HTML for crawlers and pinned checks, off the page (Nov 3). */
.hire-section { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Claude Code / ChatGPT shown as their app icons inside the hero sentence (Nov 3). */
.app-chip { display: inline-flex; align-items: center; gap: .32em; white-space: nowrap; color: #fff; font-weight: 600; }
.app-chip img { width: 1.15em; height: 1.15em; border-radius: 26%; box-shadow: 0 2px 8px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12); transform: translateY(.06em); }
/* Wordmark lockup: supakid studios */
.logo-studios { margin-left: .26em; }

/* Chat popup in the theme of the card that opened it; no stock photo (Nov 3). */
.consultation-art { background: #7c4dff; }
.consultation-art::before { content: ""; position: absolute; inset: 0; background: url('/art/own/agent-team.jpg') center 72% / cover no-repeat; }
.consultation-dialog[data-theme] .consultation-art::before { display: none; }
.consultation-dialog[data-theme="c-yellow"] .consultation-art { background: #ffd93b; }
.consultation-dialog[data-theme="c-red"] .consultation-art { background: #ff4f5e; }
.consultation-dialog[data-theme="c-purple"] .consultation-art { background: #7c4dff; }
.consultation-dialog[data-theme="c-mint"] .consultation-art { background: #19c79a; }
.consultation-dialog[data-theme="c-pink"] .consultation-art { background: #ff3ea5; }
.consultation-art .dlg-card-art, .consultation-art .dlg-card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.consultation-art .dlg-card-art img { object-position: center 70%; }
.consultation-dialog[data-theme="c-pink"] .consultation-art .dlg-card-art img { object-position: center; }
.consultation-dialog[open] { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 140px -30px var(--dlg-glow, #7c4dff); }
.consultation-dialog .booking-link { background: var(--dlg-accent, #f4f1ea); color: #111; }
.consultation-dialog[open] .consultation-art { animation: dlg-art-in 560ms cubic-bezier(.2,1,.3,1) both; }
.consultation-dialog[open] .consultation-art .dlg-card-art img, .consultation-dialog[open] .consultation-art::before { animation: dlg-blob-in 700ms cubic-bezier(.2,1.25,.3,1) 90ms both; }
.consultation-dialog[open] .consultation-art span { animation: dlg-label-in 520ms cubic-bezier(.2,1,.3,1) 160ms both; }
@keyframes dlg-art-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dlg-blob-in { from { opacity: 0; transform: scale(1.14) translateY(26px); } }
@keyframes dlg-label-in { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .consultation-dialog[open] .consultation-art, .consultation-dialog[open] .consultation-art .dlg-card-art img, .consultation-dialog[open] .consultation-art::before, .consultation-dialog[open] .consultation-art span { animation: none; } }

/* Page-to-page motion: the old page lifts away, the new one rises in; the header stays put (Nov 3). */
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px) scale(.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(28px) scale(.985); } }
::view-transition-old(root) { animation: vt-out 200ms cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-in 420ms cubic-bezier(.2,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }