/* CROSSGEN base. Ink #E6EDF3 · Night #07090C · Panel #0B0F14 · Rule #1E2630 · Muted #8B98A8 · Signal #2DD4BF */
:root{--gx:32px;color-scheme:dark}
@media (max-width:640px){:root{--gx:20px}}
html{scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:#07090C;color:#E6EDF3;font-family:'Archivo',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#E6EDF3;text-decoration:none}a:hover{color:#2DD4BF}
input,button,textarea{font-family:inherit}
[hidden]{display:none!important}
::selection{background:#2DD4BF;color:#07090C}
:focus-visible{outline:2px solid #2DD4BF;outline-offset:2px}
input:focus-visible,textarea:focus-visible{outline:none}
.skip{position:absolute;left:-9999px;top:0;z-index:50;background:#2DD4BF;color:#07090C;padding:10px 14px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em}
.skip:focus{left:16px;top:16px;color:#07090C}

@keyframes cgDrop{from{opacity:0;transform:translateY(-60%) scale(.5)}to{opacity:1;transform:none}}
@keyframes cgFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Hero crossing grid */
.cell{background:#0B0F14;transition:background 1.4s ease-out}
.cell.mark{animation:cgDrop .55s cubic-bezier(.2,.9,.2,1) both}
.cell.blink{background:#8B98A8}
.cell:hover{background:#E6EDF3!important;transition:background 0s}

/* Filter / role chips */
.chip{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:10px 14px;cursor:pointer;transition:all .2s;border:1px solid #1E2630;background:transparent;color:#8B98A8}
.chip:hover{color:#E6EDF3}
.chip[aria-pressed="true"]{border-color:#E6EDF3;background:#E6EDF3;color:#07090C}

/* Pending image tiles (key art, portraits, screenshots) */
.slot{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background-color:#0B0F14;background-image:linear-gradient(#141B23 1px,transparent 1px),linear-gradient(90deg,#141B23 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px;color:#8B98A8;text-align:center;padding:16px}
.slot svg{opacity:.35}
.slot span{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;max-width:90%}

/* Form status */
[data-status].ok{color:#2DD4BF!important}
[data-status].err{color:#F87171!important}
form button[disabled]{opacity:.6;cursor:progress}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}

/* Phone header: logo + CTA on one row, nav scrolls sideways beneath */
@media (max-width:720px){
  header > div{min-height:0!important;gap:0 16px!important;padding-top:4px!important}
  .site-nav{order:3;flex:1 0 100%;flex-wrap:nowrap!important;overflow-x:auto;gap:24px!important;padding:2px 0 14px;scrollbar-width:none;white-space:nowrap}
  .site-nav::-webkit-scrollbar{display:none}
  .site-cta{padding:10px 12px!important;font-size:11px!important}
}

/* compiled style-hover / style-focus */
.hecf98a:hover{color:#E6EDF3!important}
.h2b24d5:hover{background:#5EEAD4!important;color:#07090C!important}
.h73d3aa:hover{border-color:#8B98A8!important;color:#E6EDF3!important}
.h226634:hover{border-color:#8B98A8!important;transform:translateY(-4px)!important}
.hea95bf:hover{color:#2DD4BF!important}
.h659c23:hover{color:#E6EDF3!important;background:#0B0F14!important}
.h238b78:hover{border-color:#2DD4BF!important;color:#E6EDF3!important}
.h7b1048:focus{border-color:#2DD4BF!important}
.h335f7a:hover{background:#5EEAD4!important}
.h6b94de:hover{background:#07090C!important}