:root {
  color-scheme:dark;
  --ink:#080f20;
  --paper:#eef5f1;
  --mint:#a2f9d2;
  --muted:#7f93a3;
  --pink:#f5a7bc;
  --gold:#f1c582;
  --line:rgba(174, 212, 210, .16);
  font-family:Inter, "Segoe UI", Arial, sans-serif
}
* {
  box-sizing:border-box
}
html, body {
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:var(--ink);
  color:var(--paper)
}
body {
  overscroll-behavior:none
}
button, a {
  -webkit-tap-highlight-color:transparent
}
button {
  font:inherit;
  cursor:pointer;
  color:inherit;
  background:none;
  border:0
}
button:disabled {
  cursor:default;
  opacity:.34
}
button:focus-visible, a:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:5px
}
button:hover:not(:disabled) {
  filter:brightness(1.12)
}
[hidden] {
  display:none!important
}
canvas {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  touch-action:none;
  outline:none
}.vignette {
  pointer-events:none;
  position:fixed;
  inset:0;
  background:radial-gradient(ellipse at 60% 45%, transparent 30%, rgba(4, 10, 22, .45) 100%)
} .topbar {
  position:fixed;
  top:max(27px, env(safe-area-inset-top));
  left:4.5%;
  right:4.5%;
  height:38px;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between
}.brand {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--paper);
  font-size:13px;
  font-weight:700;
  letter-spacing:4px
}.brand img {
  width:31px;
  height:31px
}.top-actions {
  display:flex;
  align-items:center;
  gap:17px
}.offline {
  font-family:monospace;
  font-size:10px;
  letter-spacing:1.4px;
  color:#a4b9c3
}.offline i {
  display:inline-block;
  width:5px;
  height:5px;
  margin-right:8px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 10px var(--mint)
}.version {
  opacity:.5
}.icon-button {
  width:37px;
  height:37px;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:19px;
  display:grid;
  place-items:center
}.icon-button[aria-pressed=false] {
  color:#7d8b9c
}.menu {
  position:absolute;
  inset:0;
  padding:14vh 8% 70px;
  pointer-events:none;
  display:flex;
  align-items:center
}.hero-copy {
  max-width:560px;
  pointer-events:auto
}.eyebrow {
  font:10px/1.5 monospace;
  letter-spacing:2.2px;
  color:var(--mint);
  display:flex;
  align-items:center;
  gap:12px
}.tiny-line {
  height:1px;
  width:28px;
  background:var(--mint)
}
h1 {
  font-size:clamp(80px, 10vw, 156px);
  letter-spacing:-.065em;
  font-weight:650;
  line-height:1;
  margin:24px 0 15px
}.title-dot {
  color:var(--mint)
}.subtitle {
  font-size:clamp(24px, 2.5vw, 37px);
  line-height:1.16;
  font-weight:300;
  letter-spacing:-.8px;
  margin:0 0 21px
}.subtitle em {
  font-family:Georgia, serif;
  font-weight:400;
  color:var(--mint)
}.intro {
  font-size:14px;
  line-height:1.7;
  color:#9badb9;
  margin-bottom:26px
}.mode-select {
  display:flex;
  gap:19px;
  margin-bottom:21px
}.mode {
  text-align:left;
  font-size:12px;
  padding:0 0 8px;
  border-bottom:1px solid transparent
}.mode small {
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:9px
}.mode.active {
  color:var(--mint);
  border-bottom-color:var(--mint)
}.primary {
  color:#0c2222;
  background:var(--mint);
  padding:16px 23px;
  min-height:51px;
  border-radius:5px;
  font-weight:650;
  font-size:14px;
  transition:background .2s, transform .2s
}.primary:hover {
  transform:translateY(-1px)
}.start-button {
  width:290px;
  display:flex;
  justify-content:space-between;
  align-items:center
}.start-button span:last-child {
  font-size:23px;
  line-height:15px
}.secondary-links {
  display:flex;
  gap:30px;
  margin-top:18px
}.secondary-links button {
  font-size:11px;
  padding:4px 0;
  color:#b2c2cb
}.secondary-links span {
  color:var(--muted);
  font-family:monospace;
  font-size:10px;
  margin-left:7px
}.record {
  font:9px monospace;
  letter-spacing:1.6px;
  color:var(--muted);
  margin:27px 0 0
}.record strong {
  font-size:15px;
  letter-spacing:2px;
  color:#c6d8d8;
  margin-left:15px;
  font-weight:400
}.hero-note {
  position:absolute;
  bottom:19%;
  right:8%;
  width:220px;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none
}.hero-note .coordinate {
  font:8px monospace;
  letter-spacing:1.5px;
  color:var(--muted);
  margin-bottom:14px
}.note-line {
  height:1px;
  width:35px;
  background:var(--mint)
}.hero-note strong {
  font-size:14px;
  font-weight:400
}.hero-note>span:last-child {
  font:10px/1.5 monospace;
  color:var(--muted)
}.menu-footer {
  position:absolute;
  bottom:30px;
  left:4.5%;
  right:4.5%;
  display:flex;
  justify-content:space-between;
  font:9px monospace;
  letter-spacing:1.4px;
  color:#617b8e
}.menu-footer i {
  font-style:normal;
  color:var(--mint);
  margin-left:10px
}
#hud {
  position:fixed;
  z-index:5;
  top:91px;
  left:4.5%;
  right:4.5%;
  display:grid;
  grid-template-columns:1fr 1.4fr 1fr;
  align-items:start;
  pointer-events:none
}.label {
  display:block;
  font:9px/1.5 monospace;
  letter-spacing:1.5px;
  color:var(--muted);
  margin-bottom:6px
}.hud-score>strong {
  font-size:31px;
  font-weight:400;
  letter-spacing:2px;
  font-variant-numeric:tabular-nums
}.combo {
  color:var(--mint);
  font:15px monospace;
  margin-left:12px
}.hud-objective {
  text-align:center
}.hud-objective>strong {
  display:block;
  font-size:16px;
  font-weight:500;
  letter-spacing:.1px
}.hud-objective>span:last-child {
  display:block;
  font-size:10px;
  color:#9bafbd;
  margin-top:7px
}.hud-vitals {
  width:170px;
  justify-self:end
}.vital-label {
  display:flex;
  justify-content:space-between;
  font:9px monospace;
  letter-spacing:1px;
  color:var(--muted)
}.vital-label b {
  color:#d7e7e7;
  font-weight:400
}.meter {
  height:3px;
  background:rgba(159, 207, 201, .12);
  margin-top:7px
}.meter i {
  display:block;
  height:100%;
  width:100%;
  background:var(--mint);
  transition:width .15s
}.tension-label {
  margin-top:14px
}.tension i {
  background:var(--gold);
  width:0
}.tutorial {
  position:fixed;
  z-index:5;
  left:50%;
  transform:translateX(-50%);
  bottom:111px;
  max-width:490px;
  width:calc(100% - 30px);
  background:rgba(9, 24, 37, .94);
  border:1px solid #355554;
  border-radius:7px;
  display:flex;
  align-items:center;
  gap:17px;
  padding:15px 17px;
  box-shadow:0 12px 70px #050a1788;
  pointer-events:auto
}.tutorial .step {
  font:9px monospace;
  color:var(--mint);
  white-space:nowrap
}.tutorial strong {
  font-size:12px;
  font-weight:550
}.tutorial p {
  font-size:11px;
  line-height:1.5;
  color:#9fb2be;
  margin:6px 0 0
}.tutorial button {
  align-self:start;
  font-size:18px;
  color:var(--muted);
  padding:0 2px
}.tutorial>div {
  flex:1
}
#toast {
  position:fixed;
  z-index:30;
  left:50%;
  top:188px;
  transform:translate(-50%, -8px);
  background:#102c32f5;
  border:1px solid #a2f9d244;
  border-radius:4px;
  padding:13px 22px;
  color:var(--mint);
  font-size:12px;
  line-height:1.5;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s, transform .2s;
  text-align:center;
  max-width:90%;
  width:max-content
}
#toast.visible {
  opacity:1;
  transform:translate(-50%, 0)
}
#game-bottom {
  position:fixed;
  bottom:max(24px, env(safe-area-inset-bottom));
  left:4.5%;
  right:4.5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:6;
  pointer-events:none
}.bottom-hint {
  display:flex;
  flex-direction:column;
  gap:7px;
  max-width:50%
}.bottom-hint b {
  font:10px monospace;
  letter-spacing:1.6px;
  color:var(--mint)
}.bottom-hint span {
  color:#7f99ac;
  font-size:10px
}.ability-controls {
  display:flex;
  gap:10px;
  pointer-events:auto
}.ability {
  touch-action:none;
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(9, 23, 37, .93);
  border:1px solid var(--line);
  border-radius:5px;
  padding:10px 14px;
  text-align:left
}.ability>span {
  color:var(--mint);
  font-size:26px
}.ability div {
  font-size:11px
}.ability small {
  display:block;
  font:8px monospace;
  color:var(--muted);
  margin-top:5px;
  letter-spacing:.5px
}.ability b {
  color:var(--mint);
  margin-left:6px
}.ability.held {
  border-color:var(--gold);
  color:var(--gold)
} .modal {
  position:fixed;
  inset:0;
  z-index:20;
  background:rgba(3, 10, 20, .72);
  backdrop-filter:blur(12px);
  display:grid;
  place-items:center;
  padding:22px
}.dialog {
  position:relative;
  width:min(580px, 100%);
  max-height:90dvh;
  overflow:auto;
  border:1px solid #25413f;
  border-radius:12px;
  background:linear-gradient(140deg, #112a30, #091522 80%);
  padding:37px;
  box-shadow:0 30px 140px #0008
}.close {
  position:absolute;
  right:17px;
  top:11px;
  color:var(--muted);
  font-size:25px
}.dialog h2 {
  font-size:37px;
  letter-spacing:-1.5px;
  font-weight:400;
  margin:16px 0 25px
}.dialog p {
  font-size:13px;
  line-height:1.7;
  color:#a4bac4
}.dialog .eyebrow {
  font:9px monospace;
  color:var(--mint)
}
#dialog-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:25px
}
#dialog-actions button:not(.primary) {
  border:1px solid var(--line);
  border-radius:5px;
  padding:12px 16px;
  font-size:12px
}.help-grid {
  display:grid;
  grid-template-columns:36px 1fr;
  gap:16px 12px
}.help-grid>span {
  font:22px Georgia, serif;
  color:var(--mint)
}.help-grid b {
  font-size:13px;
  font-weight:500
}.help-grid p {
  margin:5px 0 0;
  font-size:12px
}.keys {
  border-top:1px solid var(--line);
  padding-top:15px;
  font-size:11px!important
}
kbd {
  font:10px monospace;
  color:var(--mint)
}.achievement {
  padding:12px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:13px
}.achievement>span {
  font-size:20px;
  color:var(--mint)
}.achievement b {
  font-size:12px;
  font-weight:500
}.achievement p {
  margin:4px 0 0;
  font-size:11px
}.achievement.locked {
  opacity:.4
}.result-score {
  font-size:56px;
  color:var(--mint);
  font-weight:300;
  font-variant-numeric:tabular-nums
}.result-grid {
  display:flex;
  gap:25px;
  margin:20px 0
}.result-grid span {
  font:9px monospace;
  letter-spacing:1px;
  color:var(--muted)
}.result-grid b {
  display:block;
  font:24px "Segoe UI", sans-serif;
  color:var(--paper);
  margin-bottom:5px
}.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
}
@media(max-width:800px) {
  .menu {
    padding:105px 7% 60px
  }.hero-copy {
    max-width:440px
  }.hero-note {
    right:6%;
    bottom:16%;
    width:180px;
    opacity:.75
  }.offline {
    font-size:8px;
    letter-spacing:1px
  }
  h1 {
    font-size:100px
  }.subtitle {
    font-size:31px
  }.hud-vitals {
    width:135px
  }
  #hud {
    grid-template-columns:1fr 1.3fr 1fr
  }.hud-objective>strong {
    font-size:13px
  }.hud-objective>span:last-child {
    font-size:9px
  }.bottom-hint {
    max-width:39%
  }
}
@media(max-width:600px) {
  .topbar {
    top:max(17px, env(safe-area-inset-top));
    left:6%;
    right:6%
  }.top-actions {
    gap:9px
  }.offline {
    display:none
  }.menu {
    padding:100px 8% 56px;
    align-items:center;
    background:linear-gradient(90deg, rgba(8, 15, 32, .5), transparent)
  }
  h1 {
    font-size:91px;
    margin:18px 0
  }.eyebrow {
    font-size:8px;
    letter-spacing:1.5px
  }.subtitle {
    font-size:28px
  }.intro {
    font-size:12px;
    max-width:280px;
    margin-bottom:22px
  }.hero-note {
    display:none
  }.mode-select {
    gap:16px
  }.mode {
    font-size:11px
  }.mode small {
    font-size:8px
  }.start-button {
    width:270px
  }.record {
    margin-top:24px
  }.menu-footer {
    bottom:19px;
    font-size:7px
  }.menu-footer>span:last-child {
    display:none
  }.hero-copy {
    z-index:1
  }
  #hud {
    top:70px;
    left:6%;
    right:6%;
    grid-template-columns:1fr 1fr;
    row-gap:17px
  }.hud-score>strong {
    font-size:25px
  }.label {
    font-size:8px
  }.hud-vitals {
    width:135px
  }.hud-objective {
    grid-row:2;
    grid-column:1/3;
    order:3
  }.hud-objective>strong {
    font-size:14px
  }.hud-objective>.label {
    margin-bottom:4px;
    font-size:8px
  }.hud-objective>span:last-child {
    font-size:10px;
    margin-top:4px
  }.vital-label {
    font-size:8px
  }.tension-label {
    margin-top:9px
  }.combo {
    font-size:12px
  }.meter {
    margin-top:5px
  }
  #toast {
    top:205px;
    padding:10px 15px;
    font-size:11px
  }
  #game-bottom {
    left:5%;
    right:5%;
    bottom:max(17px, env(safe-area-inset-bottom));
    align-items:end
  }.bottom-hint {
    gap:4px;
    max-width:37%
  }.bottom-hint b {
    font-size:9px
  }.bottom-hint span {
    font-size:9px;
    line-height:1.5
  }.ability {
    padding:9px 11px;
    gap:7px
  }.ability>span {
    font-size:23px
  }.ability small {
    font-size:6px;
    letter-spacing:0
  }.ability div {
    font-size:10px
  }.ability-controls {
    gap:7px
  }.tutorial {
    bottom:94px;
    padding:12px;
    gap:12px
  }.tutorial p {
    font-size:10px
  }.tutorial strong {
    font-size:11px
  }.tutorial .step {
    font-size:8px
  }.dialog {
    padding:27px 23px
  }.dialog h2 {
    font-size:31px
  }.result-score {
    font-size:46px
  }
}
@media(max-height:700px) and (min-width:601px) {
  .menu {
    padding-top:72px
  }.hero-copy {
    transform:scale(.85);
    transform-origin:left center
  }
  h1 {
    margin-top:12px
  }.hero-note {
    bottom:14%
  }.menu-footer {
    bottom:18px
  }
  #hud {
    top:74px
  }.tutorial {
    bottom:90px
  }
  #toast {
    top:170px
  }
}
@media(max-height:600px) and (max-width:600px) {
  .menu {
    padding:62px 7% 34px
  }.hero-copy {
    transform:scale(.8);
    transform-origin:left center
  }
  h1 {
    font-size:74px
  }.subtitle {
    font-size:22px
  }.intro {
    margin:12px 0
  }.record {
    display:none
  }.menu-footer {
    bottom:10px
  }
}
@media(max-height:500px) and (min-width:601px) {
  .menu {
    padding:45px 7% 20px
  }.hero-copy {
    transform:scale(.65)
  }.hero-note {
    bottom:18%
  }.topbar {
    top:12px
  }.menu-footer {
    bottom:10px
  }
  #hud {
    top:57px;
    grid-template-columns:1fr 2fr 1fr
  }.hud-score>strong {
    font-size:22px
  }.hud-objective>strong {
    font-size:12px
  }.hud-vitals {
    width:125px
  }.tension-label {
    margin-top:6px
  }
  #toast {
    top:120px
  }.tutorial {
    bottom:75px;
    padding:9px 12px;
    max-width:420px
  }
  #game-bottom {
    bottom:12px
  }.ability {
    padding:7px 12px
  }.dialog {
    max-height:94dvh;
    padding:24px 30px
  }
}
@media(max-height:500px) and (min-width:601px) {
  .menu {
    padding:60px 7% 30px
  }.hero-copy {
    transform:none;
    max-width:390px
  }.hero-copy>.eyebrow {
    display:none
  }
  h1 {
    font-size:58px;
    margin:4px 0 9px
  }.subtitle {
    font-size:20px;
    line-height:1.15;
    margin:0 0 15px
  }.intro, .record {
    display:none
  } .mode-select {
    margin-bottom:13px;
    gap:20px
  }.mode {
    font-size:10px;
    padding-bottom:5px
  }.mode small {
    font-size:8px;
    margin-top:3px
  } .start-button {
    min-height:43px;
    padding:12px 20px;
    width:255px;
    font-size:12px
  }.secondary-links {
    margin-top:10px;
    gap:25px
  }.secondary-links button {
    font-size:10px
  } .hero-note {
    bottom:16%;
    right:8%;
    width:180px
  }.hero-note .coordinate {
    font-size:7px;
    margin-bottom:7px
  }.hero-note>span:last-child {
    font-size:8px
  }
  #game-bottom {
    bottom:max(12px, env(safe-area-inset-bottom))
  }
}