:root {
  color-scheme:dark;
  --bg:#090d14;
  --panel:#111721;
  --ink:#f0eee6;
  --muted:#919ba9;
  --line:#28303a;
  --mint:#b9f2cb
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--ink)
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  cursor:pointer
}
button:disabled {
  cursor:wait;
  opacity:.6
}
button:focus-visible,a:focus-visible,canvas:focus-visible {
  outline:3px solid var(--accent,var(--mint));
  outline-offset:5px
}
.shell {
  max-width:1392px;
  margin:auto;
  padding:0 56px
}
header {
  height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  letter-spacing:2.5px;
  font-size:16px;
  font-weight:800
}
.brandmark {
  display:flex;
  gap:3px;
  transform:skew(-14deg)
}
.brandmark i {
  width:7px;
  height:25px;
  display:block;
  background:#a4e8da
}
.brandmark i:nth-child(2) {
  background:#d3b5f3
}
.brandmark i:nth-child(3) {
  background:#e6af79
}
.navlinks {
  display:flex;
  gap:28px;
  align-items:center;
  font-size:12px;
  color:#b6bec7
}
.pill {
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:30px;
  padding:10px 14px;
  font-size:11px;
  color:#c3cbd3
}
.status-dot {
  width:5px;
  height:5px;
  background:var(--mint);
  border-radius:50%;
  margin-right:8px
}
.hero {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:44px;
  align-items:center;
  padding:62px 0 52px
}
.eyebrow {
  font:10px monospace;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--mint);
  margin:0 0 22px
}
h1 {
  font-size:clamp(42px,5vw,70px);
  line-height:1.04;
  letter-spacing:-3.6px;
  margin:0 0 24px;
  font-weight:750
}
h1 span {
  color:#9eabb7
}
.lede {
  font-size:15px;
  line-height:1.75;
  color:#a2adbb;
  max-width:410px;
  margin:0 0 28px
}
.button {
  border:0;
  display:inline-flex;
  gap:28px;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background:var(--mint);
  color:#122219;
  font-size:12px;
  font-weight:700;
  padding:16px 22px
}
.button:hover {
  filter:brightness(1.08)
}
.button.secondary {
  background:#171f2b;
  color:var(--ink);
  border:1px solid #354050
}
.hero-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.feature {
  position:relative;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #3b314c;
  aspect-ratio:1.5;
  box-shadow:0 22px 70px #0005
}
.feature img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.feature-label {
  position:absolute;
  bottom:18px;
  left:18px;
  right:18px;
  padding:14px 17px;
  background:#080d16ce;
  backdrop-filter:blur(10px);
  border:1px solid #ffffff24;
  border-radius:6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px
}
.feature-label strong {
  font-size:14px;
  display:block;
  margin-top:5px
}
.feature-label .arrow {
  font-size:22px
}
.spec-strip {
  display:flex;
  justify-content:space-between;
  gap:16px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:19px 0;
  font:10px monospace;
  letter-spacing:1.1px;
  color:#99a6b4
}
.spec-strip b {
  color:#e4e9e5;
  font-weight:normal
}
.library {
  padding:50px 0
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:24px
}
h2 {
  font-size:23px;
  letter-spacing:-.5px;
  margin:0
}
.section-head h2 small {
  font:11px monospace;
  margin-left:12px;
  color:var(--muted)
}
.filters {
  display:flex;
  gap:6px
}
.filters button {
  background:none;
  border:1px solid transparent;
  padding:9px 13px;
  border-radius:30px;
  color:#9ba8b5;
  font-size:11px
}
.filters button[aria-pressed=true] {
  color:var(--ink);
  border-color:#44505b;
  background:#1a2430
}
.games {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px 23px
}
.card {
  min-width:0
}
.card[hidden] {
  display:none
}
.card-art {
  display:block;
  aspect-ratio:1.5;
  border-radius:8px;
  overflow:hidden;
  border:1px solid #ffffff1c;
  background:#111927;
  position:relative
}
.card-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .25s
}
.card-art:hover img {
  transform:scale(1.025)
}
.card-art .play-tag {
  position:absolute;
  right:11px;
  bottom:11px;
  background:#060b12ce;
  border:1px solid #ffffff32;
  padding:9px 12px;
  border-radius:5px;
  font-size:10px
}
.card-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:17px 0 7px
}
.card-title h3 {
  font-size:18px;
  letter-spacing:-.35px;
  margin:0
}
.card-title span {
  font:10px monospace;
  color:var(--accent)
}
.card p {
  font-size:12px;
  color:#94a1b0;
  line-height:1.5;
  margin:0
}
.info-band {
  border-top:1px solid var(--line);
  padding:46px 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px
}
.info-band h2 {
  margin-bottom:14px;
  font-size:21px
}
.info-band p {
  color:#98a5b3;
  font-size:13px;
  line-height:1.8;
  max-width:480px
}
.info-band a {
  color:var(--mint);
  text-decoration:underline;
  text-underline-offset:4px
}
.tiny-label {
  font:9px monospace;
  letter-spacing:1px;
  color:#778493
}
.footer {
  border-top:1px solid var(--line);
  padding:25px 0 35px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:10px;
  color:#7f8b98;
  line-height:1.6
}
.footer a {
  text-decoration:underline;
  text-underline-offset:3px
}
.game-page {
  --accent:#b9f2cb
}
.breadcrumb {
  font-size:11px;
  color:#8f9eaf;
  margin:25px 0 34px
}
.game-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  align-items:start;
  padding:0 0 55px
}
.game-info h1 {
  font-size:52px;
  letter-spacing:-2.6px;
  line-height:1.05
}
.game-info .eyebrow {
  color:var(--accent)
}
.mini-cover {
  width:100%;
  aspect-ratio:1.5;
  object-fit:cover;
  border-radius:8px;
  margin-bottom:27px;
  border:1px solid #ffffff21
}
.game-info .lede {
  font-size:14px;
  margin:0 0 22px
}
.controls {
  border-top:1px solid var(--line);
  margin-top:28px;
  padding-top:23px
}
.controls h2 {
  font-size:13px;
  margin-bottom:17px
}
.control-row {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin:13px 0;
  color:#a0adbb;
  font-size:12px
}
.control-row kbd {
  font:11px monospace;
  color:#e8ebe5
}
.goal {
  font-size:12px;
  color:#9daab7;
  line-height:1.75;
  margin-top:22px
}
.device {
  background:#202834;
  padding:18px 20px 14px;
  border:1px solid #3d4653;
  border-radius:14px 14px 35px 14px;
  box-shadow:0 25px 65px #0006;
  max-width:590px;
  margin:auto
}
.device-top {
  display:flex;
  justify-content:space-between;
  color:#9aa6b5;
  font:9px monospace;
  letter-spacing:1.5px;
  padding-bottom:13px
}
.screen-wrap {
  position:relative;
  border:7px solid #111720;
  border-radius:4px;
  overflow:hidden;
  background:#080a11
}
.screen-wrap canvas {
  display:block;
  width:100%;
  aspect-ratio:160/144;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  outline:none
}
.screen-wrap:fullscreen {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  border:0
}
.screen-wrap:fullscreen canvas {
  width:auto;
  height:100vh;
  max-width:100vw;
  object-fit:contain
}
.launch {
  position:absolute;
  inset:0;
  background:#070d18c9;
  border:0;
  width:100%;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:16px
}
.launch[hidden] {
  display:none
}
.launch .play-circle {
  background:var(--accent);
  color:#131e25;
  border-radius:50%;
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  font-size:24px;
  padding-left:4px;
  box-shadow:0 0 0 9px #ffffff08
}
.launch strong {
  font-size:19px
}
.launch small {
  font-size:10px;
  color:#afbdc9
}
.device-bar {
  display:flex;
  justify-content:space-between;
  gap:6px;
  margin-top:14px;
  align-items:center
}
#status {
  font:8px monospace;
  color:#8d9cae;
  max-width:150px
}
.device-tools {
  display:flex;
  gap:5px
}
.device-tools button {
  background:#303b4b;
  border:0;
  color:#ccd6df;
  padding:9px 10px;
  border-radius:4px;
  font:9px monospace
}
.game-caption {
  text-align:center;
  font-size:10px;
  color:#7f8d9e;
  margin:18px 0
}
.touch-controls {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:27px 25px 0
}
.dpad {
  display:grid;
  grid-template-columns:repeat(3,40px);
  grid-template-rows:repeat(3,35px)
}
.dpad button {
  border:0;
  background:#293747;
  color:#dce6ee;
  font-size:22px;
  touch-action:none;
  border-radius:5px
}
.dpad button:first-child {
  grid-column:2
}
.dpad button:nth-child(2) {
  grid-column:1
}
.dpad span {
  background:#293747
}
.dpad button:last-child {
  grid-column:2
}
.action-buttons {
  display:flex;
  gap:19px;
  transform:rotate(-12deg)
}
.action-buttons button {
  background:none;
  border:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  touch-action:none;
  color:#92a1b2;
  font:9px monospace;
  letter-spacing:1px
}
.action-buttons b {
  display:grid;
  place-items:center;
  border-radius:50%;
  width:49px;
  height:49px;
  background:var(--accent);
  color:#112016;
  box-shadow:0 4px 0 #536873;
  font-size:20px
}
.action-buttons button:first-child b {
  background:#b3a3ca
}
.touch-controls button:active {
  filter:brightness(.7)
}
.screenshots {
  display:flex;
  gap:22px;
  align-items:center;
  margin-top:28px;
  padding-top:25px;
  border-top:1px solid var(--line)
}
.screenshots img {
  width:120px;
  image-rendering:pixelated;
  border-radius:4px
}
.screenshots p {
  font-size:11px;
  color:#8898a8;
  line-height:1.6
}
.game-extra {
  padding:35px 0;
  border-top:1px solid var(--line);
  color:#9ba8b7;
  font-size:12px;
  line-height:1.8
}
.game-extra h2 {
  font-size:16px;
  color:#e0e7ed;
  margin-bottom:10px
}
@media(max-width:1000px) {
  .shell {
  padding:0 30px
}
.hero {
  gap:28px
}
h1 {
  font-size:52px
}
.game-layout {
  gap:35px;
  grid-template-columns:.85fr 1.15fr
}
.game-info h1 {
  font-size:42px
}
.device {
  padding:15px
}
.device-tools button {
  padding:8px 6px
}
.games {
  gap:25px 17px
}

}
@media(max-width:720px) {
  .shell {
  padding:0 21px
}
header {
  height:78px
}
.brand {
  font-size:13px;
  letter-spacing:2px
}
.navlinks {
  gap:15px;
  font-size:10px
}
.navlinks .pill {
  display:none
}
.hero {
  grid-template-columns:1fr;
  gap:32px;
  padding:38px 0 32px
}
h1 {
  font-size:55px;
  letter-spacing:-3px
}
.hero .lede {
  max-width:440px
}
.spec-strip {
  flex-wrap:wrap;
  font-size:9px;
  gap:16px 8px
}
.spec-strip span {
  width:47%
}
.section-head {
  align-items:flex-start;
  flex-direction:column;
  gap:18px
}
.library {
  padding-top:32px
}
.games {
  grid-template-columns:1fr 1fr;
  gap:27px 14px
}
.card-title {
  align-items:flex-start;
  gap:6px;
  flex-direction:column
}
.card-title h3 {
  font-size:16px
}
.card p {
  font-size:11px
}
.card-art .play-tag {
  font-size:9px;
  padding:6px 8px;
  right:7px;
  bottom:7px
}
.info-band {
  grid-template-columns:1fr;
  gap:25px;
  padding:30px 0
}
.footer {
  flex-direction:column;
  gap:8px
}
.game-layout {
  display:flex;
  flex-direction:column;
  gap:30px
}
.game-info {
  display:contents
}
.game-info .mini-cover {
  display:none
}
.game-info h1 {
  margin-bottom:0;
  font-size:42px
}
.game-info .eyebrow {
  margin-bottom:-12px
}
.game-info .lede {
  margin:0
}
.game-info .button {
  align-self:flex-start
}
.controls {
  order:3;
  width:100%;
  margin-top:0
}
.game-player {
  width:100%;
  order:2
}
.device {
  max-width:500px
}
.breadcrumb {
  margin-bottom:27px
}
.game-info .goal {
  order:4
}
.screenshots {
  order:5;
  width:100%
}
.device-tools button {
  font-size:8px
}
.filters button {
  padding:8px 11px
}
.game-extra {
  margin-top:-25px
}
.screen-wrap {
  border-width:5px
}

}
@media(prefers-reduced-motion:reduce) {
  * {
  transition:none!important
}

}

.card-art[href="/games/hello-dot/"] img,
body[data-game="hello-dot"] .mini-cover {
  object-fit:contain;
  background:#f3eddf;
}