@font-face {
  font-family: "Departure Mono";
  src: url(../DepartureMono.woff2) format("woff2");
  font-display: block;
}
:root {
  --space: #000207;
  --cyan: #50ecfc;
  --blue: #1ea9e7;
  --mid: #0d78c6;
  --deep: #0a4a8e;
  --navy: #0b2544;
  --ink: #020d20;
  --coral: #f23e42;
  --text: #b8dcf8;
  --soft: #8fb4d8;
  --dim: #5d84ad;
  --line: #0b3a74;
  --p: 6px;
  --mono: "Departure Mono", ui-monospace, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
/* the page only ever moves up and down, and stops at its own top and bottom */
html, body { overflow-x: hidden; overflow-x: clip; overscroll-behavior: none; }
html { scroll-behavior: smooth; background: #020a18; }
body {
  margin: 0; background: #020a18; color: var(--text); overflow-x: hidden;
  font: 16.5px/1.5 var(--mono); -webkit-font-smoothing: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
canvas.px { image-rendering: pixelated; display: block; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* notched pixel corners, one grid step deep */
.notch {
  --n: 4px;
  clip-path: polygon(0 var(--n), var(--n) var(--n), var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)));
}

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; background: var(--space); overflow: hidden; }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; }

.top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 22px 32px; }
.brand { display: flex; align-items: center; gap: 11px; color: #f2fbff; }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.links { display: flex; align-items: center; gap: 20px; }
.xme { display: inline-flex; align-items: center; gap: 8px; color: #e8f5ff; font-size: 16.5px; }
.xme img { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(80, 236, 252, .25); }
.xme .vb { margin-left: -3px; }
.xme:hover span { color: #fff; }
.gh {
  display: inline-flex; align-items: center; gap: 9px; color: #f2fbff; padding: 7px 13px 7px 12px;
  background: #06244a; box-shadow: inset 0 -3px 0 #041a37, inset 0 3px 0 var(--line);
}
.gh:hover { background: #0a3267; }
.gh .n { color: var(--cyan); }
.gh .n:empty { display: none; }

.lift { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 9vh 24px 0; }
h1 { margin: 0; line-height: 0; margin-top: calc(var(--p) * -4); }
.sub { margin: calc(var(--p) * 4) 0 0; line-height: 0; }

.panel {
  --n: var(--p);
  margin-top: calc(var(--p) * 8); width: min(calc(var(--p) * 136), 100%);
  background: var(--ink); padding: calc(var(--p) * 2.5) calc(var(--p) * 3) calc(var(--p) * 2.5);
  box-shadow: inset 0 0 0 var(--p) var(--deep), inset 0 calc(var(--p) * 2) 0 calc(var(--p) * -1) var(--mid);
}
.phead { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.os { display: flex; gap: 6px; }
.os button {
  all: unset; cursor: pointer; padding: 7px 9px 6px; background: #071c3b; box-shadow: inset 0 -2px 0 #04122a;
}
.os button:hover { background: #0a2851; }
.os button[aria-selected="true"] { background: var(--mid); box-shadow: inset 0 2px 0 var(--blue), inset 0 -2px 0 var(--deep); }
.os button canvas, .all canvas { display: block; }
.all { padding: 6px 2px; opacity: .8; }
.all:hover { opacity: 1; }
.cmd { display: flex; align-items: center; gap: 14px; background: #000814; padding: 13px 13px 13px 18px; box-shadow: inset 0 0 0 2px #0a2347; }
.cmd code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: inherit; color: #f0faff; scrollbar-width: none;
}
.cmd code::-webkit-scrollbar { display: none; }
.cmd code i { font-style: normal; color: var(--cyan); margin-right: 11px; user-select: none; }
.cmd code em { font-style: normal; color: #6e95bf; }
.cmd code b { font-weight: inherit; white-space: nowrap; }
.copy {
  all: unset; cursor: pointer; flex: none; color: #fff; padding: 8px 15px; background: var(--coral);
  box-shadow: inset 0 3px 0 #ff7469, inset 0 -3px 0 #a3192a;
}
.copy:hover { background: #ff4b4e; }
.copy:active { box-shadow: inset 0 3px 0 #a3192a; padding: 9px 15px 7px; }
.copy.done { background: #10a46a; box-shadow: inset 0 3px 0 #5be3a6, inset 0 -3px 0 #0a6a44; }
.note { margin: 14px 2px 0; font-size: 11px; line-height: 1.6; color: var(--dim); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.note a, .sys a, .faq a { color: var(--text); box-shadow: inset 0 -1px 0 #2b5683; }
.note a:hover, .sys a:hover, .faq a:hover { color: var(--cyan); box-shadow: inset 0 -1px 0 var(--cyan); }

/* ---------- under the sea ---------- */
.deep { position: relative; padding: 260px 0 0; overflow: hidden; }
#deep { position: absolute; left: 0; top: 0; }
.block { position: relative; z-index: 1; width: min(1080px, calc(100% - 48px)); margin: 0 auto 170px; }
.block h2 { margin: 0 0 28px; font: 400 33px/1.2 var(--mono); color: #f2fbff; width: fit-content; }
.intro { width: fit-content; max-width: 860px; }
.intro p, .block > p { font: 400 18px/1.55 var(--sans); color: var(--soft); margin: 0; -webkit-font-smoothing: antialiased; }
.intro h2 { margin-bottom: 18px; }

.app .intro { margin: 0 auto 56px; text-align: center; }
.app .intro h2 { margin-left: auto; margin-right: auto; }
.app .intro p { max-width: 640px; margin: 0 auto; }
.app h2 { max-width: 760px; }
.window {
  --n: var(--p); margin: 0; background: #0b0d12;
  box-shadow: inset 0 0 0 var(--p) var(--line), 0 30px 80px rgba(0, 0, 0, .45);
  padding: var(--p);
}
.window .bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #111318; font-size: 11px; color: #6f7785; }
.window .bar i { width: 10px; height: 10px; background: #2a2e37; }
.window .bar span { margin-left: 10px; }
.window img { display: block; width: 100%; height: auto; }

.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line);
  box-shadow: 0 0 0 2px var(--line);
}
.grid article { background: rgba(2, 13, 32, .94); padding: 26px 26px 28px; }
.grid canvas { margin-bottom: 18px; }
.grid h3 { margin: 0 0 8px; font: 400 16.5px/1.3 var(--mono); color: #f2fbff; }
.grid p { margin: 0; font: 400 15px/1.55 var(--sans); color: var(--soft); -webkit-font-smoothing: antialiased; }

.zeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.z { background: rgba(2, 13, 32, .9); box-shadow: inset 0 0 0 2px var(--line); padding: 26px 24px 26px; }
.z canvas { margin-bottom: 20px; }
.z b { display: block; font: 400 16.5px/1.3 var(--mono); color: #f2fbff; margin-bottom: 8px; }
.z span { display: block; font: 400 15px/1.5 var(--sans); color: var(--soft); -webkit-font-smoothing: antialiased; }

#download .intro { margin-bottom: 36px; }
.systems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sys { min-width: 0; background: rgba(2, 13, 32, .94); box-shadow: inset 0 0 0 2px var(--line); padding: 22px 22px 18px; display: flex; flex-direction: column; }
.sys.yours { box-shadow: inset 0 0 0 2px var(--mid), inset 0 4px 0 0 var(--blue); }
.sys header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.sys h3 { margin: 0; font: 400 22px/1 var(--mono); color: #f2fbff; }
.sys .tag { font-size: 11px; color: var(--cyan); }
.cmd.small { padding: 10px 10px 10px 13px; gap: 10px; }
.cmd.small code { font-size: 11px; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 18px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
.cmd.small code i { margin-right: 8px; }
.cmd.small .copy { font-size: 11px; padding: 6px 11px; }
.sys .hint { margin: 10px 0 16px; font-size: 11px; color: var(--dim); }
.sys ul { list-style: none; margin: auto 0 0; padding: 14px 0 0; border-top: 2px solid #0a2347; display: grid; gap: 8px; font-size: 11px; }
.sys li[hidden] { display: none; }
.sys li { display: flex; justify-content: space-between; gap: 12px; color: var(--dim); }
.sys li span:first-child { color: var(--soft); }
.popup { margin-top: 26px !important; font: 400 14px/1.55 var(--sans) !important; color: var(--dim) !important; max-width: 640px; }

.faq { display: grid; gap: 2px; background: var(--line); box-shadow: 0 0 0 2px var(--line); max-width: 820px; }
.faq details { background: rgba(2, 13, 32, .94); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 24px; display: flex; justify-content: space-between; gap: 16px;
  color: #f2fbff; font: 400 16.5px/1.4 var(--mono);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cyan); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { background: rgba(10, 74, 142, .18); }
.faq p { margin: 0; padding: 0 24px 22px; font: 400 15.5px/1.6 var(--sans); color: var(--soft); max-width: 680px; -webkit-font-smoothing: antialiased; }

.foot { position: relative; z-index: 1; width: min(1080px, calc(100% - 48px)); margin: 0 auto; padding: 70px 0 56px; }
.foot .row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.credit { display: inline-flex; align-items: center; gap: 10px; font: 400 15px var(--sans); color: #d6ebff; -webkit-font-smoothing: antialiased; }
.credit img { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(80, 236, 252, .2); }
.credit b { color: #fff; font-weight: 600; }
.credit .badge { margin: 0 1px 0 -4px; vertical-align: -2px; }
.credit .handle { color: var(--soft); }
.credit:hover .handle { color: var(--soft); }
.foot nav { display: flex; gap: 22px; font-size: 11px; flex-wrap: wrap; }
.foot nav a { color: var(--soft); }
.foot nav a:hover { color: #fff; }
.fine { margin: 22px 0 0; font-size: 11px; color: #7f9fc4; width: fit-content; }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .zeros { grid-template-columns: 1fr 1fr; }
  .systems { grid-template-columns: 1fr; }
}
/* On a phone the page reads as one column: lists inside a single panel instead of a stack of cards. */
@media (max-width: 760px) {
  .all { display: none; }
  .top { padding: 14px 16px; }
  .xme span, .xme .vb, .gh > span:not(.n) { display: none; }
  .lift { padding: 15vh 16px 0; }

  .panel { margin-top: calc(var(--p) * 7); padding: 12px 12px 14px; }
  .phead { margin-bottom: 10px; }
  .os { flex: 1; }
  .os button { flex: 1; display: flex; justify-content: center; padding: 9px 0 8px; }
  .cmd { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 14px 12px; }
  .cmd code { font-size: 14px; line-height: 1.5; white-space: normal; overflow: visible; }
  .cmd code i { margin-right: 8px; }
  .copy { align-self: flex-end; font-size: 14px; padding: 7px 16px; }
  .copy:active { padding: 8px 16px 6px; }
  .note { flex-direction: column; gap: 4px; margin: 12px 2px 0; }

  .deep { padding-top: 150px; }
  .block { width: calc(100% - 32px); margin-bottom: 104px; }
  .block h2 { font-size: 22px; margin-bottom: 18px; }
  .intro p, .block > p { font-size: 16px; }
  .app .intro, .app .intro p { text-align: left; margin-left: 0; margin-right: 0; }
  .app .intro { margin-bottom: 28px; }
  .app .intro h2 { margin-left: 0; }

  .grid, .zeros, .systems {
    grid-template-columns: 1fr; gap: 0; padding: 0 18px;
    background: rgba(2, 13, 32, .94); box-shadow: inset 0 0 0 2px var(--line);
  }
  .grid article, .z, .sys { background: none; box-shadow: none; border-top: 1px solid #0c2c58; }
  .grid article:first-child, .z:first-child, .sys:first-child { border-top: 0; }

  .grid article { display: grid; grid-template-columns: 24px 1fr; column-gap: 16px; padding: 18px 0; }
  .grid canvas { grid-row: span 2; margin: 1px 0 0; }
  .grid h3 { margin-bottom: 5px; }
  .grid p { font-size: 14.5px; }

  .z { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; padding: 16px 0; }
  .z canvas { grid-row: span 2; margin: 0; }
  .z b { margin-bottom: 3px; }
  .z span { font-size: 14.5px; }

  #download .intro { margin-bottom: 22px; }
  .sys, .sys.yours { padding: 20px 0 18px; box-shadow: none; }
  .sys header { margin-bottom: 12px; }
  .sys h3 { font-size: 16.5px; }
  .cmd.small { flex-direction: row; align-items: center; padding: 10px 10px 10px 12px; }
  .cmd.small code { font-size: 12px; -webkit-mask: none; mask: none; }
  .cmd.small .copy { align-self: center; font-size: 11px; padding: 6px 11px; }
  .sys .hint { margin: 8px 0 12px; }
  .sys ul { padding-top: 12px; border-top-width: 1px; }
  .popup { margin-top: 18px !important; font-size: 13.5px !important; }

  .faq { gap: 0; padding: 0 18px; background: rgba(2, 13, 32, .94); box-shadow: inset 0 0 0 2px var(--line); }
  .faq details { background: none; border-top: 1px solid #0c2c58; }
  .faq details:first-child { border-top: 0; }
  .faq summary { padding: 17px 0; font-size: 15px; }
  .faq summary:hover { background: none; }
  .faq p { padding: 0 0 18px; font-size: 14.5px; }

  .foot { width: calc(100% - 32px); padding-top: 56px; }
  .foot .row { gap: 18px; }
}
@media (max-width: 380px) {
  .grid, .zeros, .systems, .faq { padding: 0 14px; }
  .cmd.small { padding: 10px 8px 10px 10px; gap: 8px; }
  .cmd.small code { font-size: 11px; }
}