@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500&display=swap');
:root {
  color-scheme:dark;
  --ink:#f0f2ee;
  --muted:#a0abb3;
  --mint:#c5e5cf;
  --line:rgba(207,225,236,.16);
  font-family:'Manrope','Noto Sans KR',sans-serif;
  font-synthesis:none;
  background:#06090e;
  color:var(--ink)
}

* {
  box-sizing:border-box
}

html {
  min-width:320px
}

body {
  margin:0
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit
}

::selection {
  background:#a9d5b7;
  color:#071414
}

a,button {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible {
  outline:2px solid #c4edc9;
  outline-offset:6px;
  border-radius:3px
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip-link {
  position:fixed;
  top:14px;
  left:24px;
  padding:12px 18px;
  background:var(--ink);
  color:#06090e;
  transform:translateY(-150%);
  z-index:20
}

.skip-link:focus {
  transform:translateY(0)
}

.universe {
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  background:#06090e;
  z-index:-1
}

.universe canvas {
  width:100%;
  height:100%;
  display:block;
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.2s
}

.universe.is-ready canvas {
  opacity:1
}

.space-fallback {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 72% 51%,transparent 16%,#31545b33 22%,transparent 34%),radial-gradient(ellipse at 75% 88%,#153b5260,transparent 56%),#06090e
}

.is-ready .space-fallback {
  opacity:0
}

.grain {
  position:absolute;
  inset:0;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")
}

.page-shell {
  width:100%;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding:0 4.2vw
}

.site-header {
  min-height:110px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  border-bottom:1px solid var(--line)
}

.brand {
  display:flex;
  align-items:center;
  gap:13px
}

.brand img {
  object-fit:contain;
  transition:filter .3s ease
}

.brand:hover img,.brand:focus-visible img {
  filter:brightness(1.12)
}

.brand>span {
  font-size:15px;
  line-height:1.1;
  letter-spacing:.14em;
  font-weight:700
}

.brand-sub {
  display:block;
  font-size:8px;
  letter-spacing:.24em;
  font-weight:500;
  margin-top:7px;
  color:#b3c2c1
}

.site-nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:12px;
  font-weight:500
}

.site-nav a {
  position:relative;
  display:flex;
  gap:9px;
  align-items:center;
  min-height:44px;
  color:#b0bac0;
  transition:color .2s
}

.site-nav a:hover,.site-nav a[aria-current] {
  color:var(--ink)
}

.site-nav a[aria-current]:after {
  content:'';
  width:3px;
  height:3px;
  border-radius:100%;
  position:absolute;
  bottom:2px;
  left:50%;
  background:var(--mint)
}

.site-nav a>span[aria-hidden] {
  font-size:14px;
  color:#849796
}

.home-main {
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:650px;
  padding:55px 4.8vw 138px
}

.hero-copy {
  position:relative;
  z-index:1;
  max-width:650px;
  animation:hero-arrive .9s ease both
}

.home-page .hero-copy {
  animation:none
}

.home-page.is-entering .hero-copy>* {
  animation:hero-arrive .85s cubic-bezier(.2,.7,.3,1) backwards
}

.home-page.is-entering .hero-copy h1 { animation-delay:.08s }
.home-page.is-entering .hero-description { animation-delay:.16s }
.home-page.is-entering .pill-link { animation-delay:.24s }
.home-page.is-entering .star-trigger { animation-delay:.32s }
.home-page.is-entering .home-bottom { animation:hero-arrive .9s .4s ease both }

.star-trigger {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  width:max-content;
  margin-top:13px;
  padding:0 3px;
  border:0;
  background:none;
  color:var(--muted);
  font-size:12px;
  cursor:pointer;
  transition:color .25s
}

.star-trigger>span {
  color:var(--mint);
  font-size:16px;
  transition:transform .4s ease
}

.star-trigger:hover,.star-trigger:focus-visible { color:var(--ink) }
.star-trigger:hover>span,.star-trigger:focus-visible>span { transform:rotate(90deg) }
.star-trigger:disabled { opacity:.45; cursor:default }

.stardust {
  position:absolute;
  inset:0;
  pointer-events:none
}

.star-burst {
  position:absolute;
  width:0;
  height:0;
  animation:burst-life 1.2s linear both
}

.star-burst:before {
  content:'✦';
  position:absolute;
  left:-10px;
  top:-16px;
  color:#d5f4de;
  font-size:24px;
  text-shadow:0 0 16px #b2ead9;
  animation:star-flash 1.2s ease-out both
}

.stellar-spark {
  position:absolute;
  width:var(--spark-size);
  height:var(--spark-size);
  border-radius:50%;
  background:#d5f4de;
  box-shadow:0 0 7px #aadbd9;
  animation:spark-drift 1.1s cubic-bezier(.16,.7,.3,1) both
}

@keyframes burst-life {
  0%,70% { opacity:1 }
  100% { opacity:0 }
}

@keyframes star-flash {
  0% { opacity:0; transform:scale(.3) rotate(-25deg) }
  15% { opacity:1; transform:scale(1) rotate(0) }
  100% { opacity:0; transform:scale(.4) rotate(45deg) }
}

@keyframes spark-drift {
  from { opacity:.9; transform:translate(0,0) scale(1) }
  to { opacity:0; transform:translate(var(--spark-x),var(--spark-y)) scale(.3) }
}

.motion-paused *, .motion-paused *:before, .motion-paused *:after {
  animation-play-state:paused!important;
  transition:none!important
}

.motion-paused .hero-copy,.motion-paused .hero-copy>*,.motion-paused .home-bottom {
  animation:none!important
}

.eyebrow {
  font-size:10px;
  font-weight:500;
  letter-spacing:.19em;
  line-height:1.6;
  color:#b1c0c5;
  margin:0 0 30px
}

.tiny-star {
  display:inline-block;
  color:var(--mint);
  font-size:15px;
  margin-right:10px;
  vertical-align:-1px
}

.hero-copy h1 {
  font-size:clamp(76px,9.65vw,154px);
  line-height:.9;
  font-weight:500;
  letter-spacing:-.066em;
  margin:0 0 33px
}

.hero-copy h1>span {
  display:block;
  font-size:clamp(16px,1.6vw,24px);
  font-weight:400;
  letter-spacing:.54em;
  line-height:1.7;
  padding-left:5px;
  margin-top:19px
}

.hero-description {
  font-size:15px;
  line-height:1.8;
  letter-spacing:-.02em;
  color:#a7b7bc;
  margin:0 0 32px
}

.pill-link {
  display:inline-flex;
  min-height:49px;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  border:1px solid #c7e1d342;
  padding:0 22px;
  border-radius:30px;
  background:#b6d7cb08;
  font-size:12px;
  transition:background .25s,border-color .25s,transform .25s
}

.pill-link:hover {
  background:#b6d7cb18;
  border-color:#c7e1d3a0;
  transform:translateY(-2px)
}

.pill-link .arrow {
  font-size:20px;
  color:var(--mint);
  transition:transform .25s ease
}

.pill-link:hover .arrow,.pill-link:focus-visible .arrow {
  transform:translate(2px,-2px)
}

.scene-caption {
  position:absolute;
  right:4vw;
  top:66%;
  display:flex;
  align-items:center;
  gap:13px;
  font-size:8px;
  letter-spacing:.21em;
  color:#879ca6;
  writing-mode:vertical-rl
}

.caption-line {
  height:40px;
  width:1px;
  background:linear-gradient(transparent,#879ca6)
}

.home-bottom {
  position:absolute;
  left:4.8vw;
  right:4.8vw;
  bottom:35px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px
}

.intro-note {
  font-family:'Noto Sans KR',sans-serif;
  font-size:11px;
  line-height:1.9;
  color:#9cabb4;
  margin:0
}

.intro-note>span {
  font-family:'Manrope',sans-serif;
  font-size:10px;
  color:#748994;
  letter-spacing:.025em
}

.featured-link {
  padding:14px 0 14px 22px;
  border-left:1px solid #a4b9ba33;
  min-width:245px;
  transition:border-color .25s
}

.featured-link:hover {
  border-color:#c3e6cd
}

.link-meta {
  display:block;
  font-size:8px;
  letter-spacing:.2em;
  color:#91a8ae;
  margin-bottom:9px
}

.featured-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  font-size:16px;
  font-weight:400
}

.featured-title>span {
  color:var(--mint);
  font-size:21px
}

.site-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  min-height:64px;
  border-top:1px solid var(--line);
  font-size:8px;
  letter-spacing:.12em;
  color:#8a9ba6
}

.motion-toggle {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:0 2px;
  border:0;
  background:none;
  color:#9eb0b9;
  cursor:pointer;
  font-size:9px;
  letter-spacing:.02em
}

.motion-toggle:hover {
  color:var(--ink)
}

.motion-icon {
  font-size:11px;
  min-width:12px;
  letter-spacing:-.15em
}

.games-page .universe:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#06090e66,#06090e77)
}

.games-main {
  flex:1;
  max-width:1240px;
  width:100%;
  margin:0 auto;
  padding:65px 32px 75px
}

.games-heading {
  margin-bottom:42px
}

.games-heading .eyebrow {
  margin-bottom:18px;
  font-size:9px
}

.games-heading h1 {
  font-size:clamp(42px,4.6vw,68px);
  font-weight:400;
  letter-spacing:-.05em;
  line-height:1.05;
  margin:0 0 21px
}

.games-heading>p:last-child {
  font-size:13px;
  line-height:1.8;
  color:#a2b2b9
}

.game-card {
  display:grid;
  grid-template-columns:1.22fr 1fr;
  overflow:hidden;
  border:1px solid #9eb4c02e;
  border-radius:3px;
  background:#0c1520aa;
  min-height:356px;
  transition:border-color .3s,transform .3s
}

.game-card+.game-card {
  margin-top:24px
}

.game-card:hover {
  border-color:#bfe3cf75;
  transform:translateY(-3px)
}

.game-art {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:360px;
  background:radial-gradient(ellipse at 45% 50%,#354e535c,transparent 65%),linear-gradient(130deg,#16252d,#121922 60%,#0c1720);
  border-right:1px solid var(--line)
}

.game-art:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#09131be6,transparent 27%);
  pointer-events:none
}

.game-art-label {
  position:absolute;
  bottom:24px;
  left:27px;
  z-index:2;
  color:#bac9c9;
  font-size:8px;
  letter-spacing:.23em
}

.game-detail {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:38px 48px
}

.game-tag {
  font-size:8px;
  letter-spacing:.15em;
  color:var(--mint);
  border:1px solid #badaca33;
  border-radius:30px;
  padding:7px 10px
}

.game-detail h2 {
  font-size:clamp(26px,2.5vw,38px);
  line-height:1.2;
  letter-spacing:-.04em;
  font-weight:500;
  margin:23px 0 20px
}

.game-detail h2>span {
  display:block;
  font-family:'Noto Sans KR',sans-serif;
  color:#91a6b2;
  font-size:12px;
  font-weight:400;
  letter-spacing:.04em;
  margin-top:9px
}

.game-detail p {
  font-family:'Noto Sans KR',sans-serif;
  color:#9eafb8;
  font-size:12px;
  line-height:1.9;
  margin:0 0 27px
}

.game-play {
  display:flex;
  align-items:center;
  gap:48px;
  font-size:12px
}

.game-play>span {
  font-size:22px;
  color:var(--mint)
}

.not-found {
  display:grid;
  place-items:center;
  min-height:100svh;
  text-align:center;
  background:radial-gradient(ellipse at 50% 100%,#12354055,transparent 60%),#06090e
}

.not-found main {
  padding:32px
}

.not-found img {
  margin-bottom:34px
}

.not-found h1 {
  font-size:clamp(24px,4vw,40px);
  font-weight:400
}

.not-found main>p:not(.eyebrow) {
  color:var(--muted);
  font-size:13px;
  margin-bottom:35px
}

@keyframes hero-arrive {
  from { opacity:0; transform:translateY(12px) }
  to { opacity:1; transform:translateY(0) }
}

.game-preview {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:62% 50%;
  transition:transform .5s
}

.game-card:hover .game-preview {
  transform:scale(1.035)
}

@media(min-width:1700px) {
  .page-shell {
    padding:0 max(4.2vw,calc((100vw - 1700px)/2))
  }
  .home-main {
    min-height:800px
  }
  .hero-copy h1 {
    font-size:170px
  }
}

@media(max-width:1000px) {
  .site-header {
    min-height:96px;
    gap:20px
  }
  .site-nav {
    gap:23px
  }
  .home-main {
    padding-left:2vw;
    padding-right:2vw
  }
  .home-bottom {
    left:2vw;
    right:2vw
  }
  .hero-copy h1 {
    font-size:11.8vw
  }
  .scene-caption {
    right:1vw
  }
  .games-main {
    padding-left:8px;
    padding-right:8px
  }
  .game-detail {
    padding:30px
  }
  .game-art {
    min-height:340px
  }
}

@media(max-width:640px) {
  .page-shell {
    padding:0 23px
  }
  .site-header {
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    padding:23px 0 15px
  }
  .brand img {
    width:34px;
    height:34px
  }
  .brand>span {
    font-size:13px
  }
  .brand-sub {
    font-size:7px
  }
  .site-nav {
    justify-content:space-between;
    width:100%;
    gap:10px;
    font-size:11px
  }
  .site-nav a {
    min-height:34px
  }
  .site-nav a[aria-current]:after {
    bottom:0
  }
  .home-main {
    min-height:650px;
    justify-content:flex-start;
    padding:68px 5px 220px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:.14em;
    margin-bottom:28px
  }
  .tiny-star {
    font-size:12px
  }
  .hero-copy h1 {
    font-size:clamp(78px,22.5vw,135px);
    margin-bottom:26px
  }
  .hero-copy h1>span {
    font-size:14px;
    letter-spacing:.5em;
    margin-top:15px
  }
  .hero-description {
    font-size:12px;
    margin-bottom:28px
  }
  .pill-link {
    min-height:46px;
    padding:0 20px;
    font-size:11px;
    gap:33px
  }
  .scene-caption {
    display:none
  }
  .home-bottom {
    left:5px;
    right:5px;
    bottom:31px;
    flex-direction:column;
    align-items:flex-start;
    gap:27px
  }
  .intro-note {
    font-size:10px
  }
  .intro-note>span {
    font-size:9px
  }
  .featured-link {
    align-self:stretch;
    padding:13px 0 3px;
    border-left:0;
    border-top:1px solid var(--line);
    min-width:0
  }
  .featured-title {
    font-size:15px
  }
  .link-meta {
    font-size:7px;
    margin-bottom:6px
  }
  .site-footer {
    min-height:62px;
    font-size:7px;
    letter-spacing:.06em
  }
  .motion-toggle {
    font-size:8px
  }
  .games-main {
    padding:49px 5px 55px
  }
  .games-heading {
    margin-bottom:31px
  }
  .games-heading h1 {
    font-size:43px
  }
  .games-heading>p:last-child {
    font-size:11px
  }
  .game-card {
    grid-template-columns:1fr
  }
  .game-art {
    min-height:285px;
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .game-detail {
    padding:29px
  }
  .game-detail h2 {
    font-size:30px;
    margin:20px 0 18px
  }
  .game-detail p {
    font-size:11px
  }
  .game-art-label {
    font-size:7px
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}