:root {
  --void: #020309;
  --night-0: #04061a;
  --night-1: #0a0f2e;
  --night-2: #1a1748;
  --night-3: #2f1f5a;
  --night-4: #4a2865;
  --ember: #ffad8a;
  --ember-hi: #ffc4a8;
  --text: #eceaff;
  --muted: #b0acdc;
  --faint: #8e8bbf;
  --line: rgba(196, 190, 255, .16);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: dark;
  font-family: var(--mono);
  color: var(--text);
  background: var(--night-0);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--night-0); }
html.is-locked { overflow: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }
:where(a, button):focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; border-radius: 6px; }

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


.night {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  grid-template-areas: "column pad";
  align-items: center;
  column-gap: clamp(2rem, 5vw, 6rem);
  padding: clamp(2rem, 7vh, 5rem) clamp(1.5rem, 7vw, 8rem);
  background:
    radial-gradient(120% 55% at 80% 110%, rgba(255, 146, 112, .26) 0%, rgba(150, 64, 128, .2) 32%, transparent 62%),
    linear-gradient(180deg, var(--night-0) 0%, var(--night-1) 34%, var(--night-2) 62%, var(--night-3) 84%, var(--night-4) 100%);
}

.night::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(90% 70% at 70% 40%, #05050f 0%, var(--void) 70%);
  opacity: 0;
  transition: opacity 1.3s ease;
}

.night::after {
  content: "";
  position: absolute;
  inset: -240px 0 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18px 31px, rgba(255,255,255,.55) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 96px 140px, rgba(255,255,255,.45) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 171px 62px, rgba(220,215,255,.55) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 210px 199px, rgba(255,255,255,.4) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 57px 207px, rgba(255,240,230,.5) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 61px 88px, rgba(255,255,255,.8) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 233px 19px, rgba(210,215,255,.75) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 318px 265px, rgba(255,255,255,.7) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 141px 302px, rgba(255,235,225,.7) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 402px 121px, #fff 0 1.3px, rgba(200,205,255,.18) 2px, transparent 4.5px),
    radial-gradient(circle at 97px 444px, #fff 0 1.2px, rgba(255,220,200,.16) 2px, transparent 4px),
    radial-gradient(circle at 530px 380px, #fff 0 1.4px, rgba(200,205,255,.2) 2px, transparent 5px);
  background-size:
    241px 233px, 241px 233px, 241px 233px, 241px 233px, 241px 233px,
    397px 371px, 397px 371px, 397px 371px, 397px 371px,
    613px 587px, 613px 587px, 613px 587px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 96%);
}

.night.is-away::before { opacity: 1; }
.night.is-away::after {
  -webkit-mask-image: none;
  mask-image: none;
  animation: drift 3.6s cubic-bezier(.5, 0, .3, 1) both;
}


.column {
  grid-area: column;
  max-width: 36rem;
  position: relative;
  z-index: 1;
}

.title {
  margin: 0;
  font-size: clamp(2.6rem, 5.2vw, 5.1rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--text);
  transition: opacity 1.2s ease;
}
.title em {
  font-style: normal;
  font-weight: 500;
  color: var(--ember);
}
.is-away .title { opacity: .3; }

.status-line {
  margin: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1.1rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--muted);
}
.tap-note { font-size: .8125rem; color: var(--faint); }
.tap-note.is-quiet { visibility: hidden; }

.terminal {
  margin-top: 2rem;
  max-width: 30rem;
  min-height: 3.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .55rem .6rem .55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(5, 7, 26, .58);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.terminal-line {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}
.terminal-caret { color: var(--ember); margin-right: .75rem; font-weight: 700; }
.mint { min-width: 0; overflow-wrap: anywhere; }
.cursor {
  flex: none;
  width: .58em;
  height: 1.15em;
  margin-left: .2rem;
  background: var(--ember);
  animation: blink 1.1s steps(1, end) infinite;
}
.mint-copy {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 500;
  text-align: left;
  overflow-wrap: anywhere;
  text-decoration: underline dotted rgba(236, 234, 255, .45);
  text-underline-offset: .32em;
  cursor: copy;
}
.mint-copy:hover { text-decoration-color: var(--ember); }
.buy-link {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: 0 1.05rem;
  border-radius: 8px;
  background: var(--ember);
  color: #1b1030;
  font-weight: 700;
  font-size: .9375rem;
  text-decoration: none;
  transition: background .15s ease;
}
.buy-link:hover { background: var(--ember-hi); }
.buy-link[hidden] { display: none; }

.keyrow {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.minikey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .95rem;
  border: 1px solid rgba(196, 190, 255, .2);
  border-radius: 8px;
  background: linear-gradient(180deg, #1f1d4d 0%, #151339 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 3px 0 #070618;
  color: var(--text);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform .1s ease, box-shadow .1s ease, border-color .15s ease;
}
.minikey:hover { border-color: rgba(196, 190, 255, .4); }
.minikey:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 #070618; }
.minikey-count { font-size: .75rem; color: var(--faint); }

.small-print {
  list-style: none;
  margin: 2rem 0 0;
  padding: 1rem 0 0;
  max-width: 30rem;
  border-top: 1px solid var(--line);
  font-size: .75rem;
  line-height: 1.75;
  color: var(--faint);
}


.pad {
  grid-area: pad;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.pad::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(95%, 34rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(150, 160, 255, .2) 0%, rgba(120, 90, 220, .08) 42%, transparent 68%);
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.is-away .pad::before { opacity: 0; }

.keycap {
  position: relative;
  display: block;
  height: clamp(18rem, 74svh, 40rem);
  aspect-ratio: 3 / 4;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.keycap:focus-visible { outline-offset: .5rem; border-radius: 2rem; }
.keycap[aria-disabled="true"] { cursor: default; }
.keycap-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  transform-origin: 50% 40%;
  filter: drop-shadow(0 0 1.6rem rgba(170, 180, 255, .26)) drop-shadow(0 1.8rem 2.2rem rgba(2, 3, 15, .55));
  transition: transform .3s cubic-bezier(.3, .7, .4, 1), filter .3s ease;
}
.keycap:hover:not([aria-disabled="true"]) .keycap-art {
  transform: translateY(-.6rem) rotate(3deg);
  filter: drop-shadow(0 0 2.2rem rgba(170, 180, 255, .36)) drop-shadow(0 2.4rem 2.6rem rgba(2, 3, 15, .55));
}
.keycap:active:not([aria-disabled="true"]) .keycap-art { transform: translateY(.3rem) scale(.97); }
.keycap-art.is-ascending { animation: ascend 3.6s both; }

@keyframes ascend {
  0%   { transform: none; opacity: 1; }
  7%   { transform: translateY(.8rem) scale(.97); animation-timing-function: ease-in; }
  20%  { transform: translate(-.5rem, -2rem) rotate(-3deg) scale(.96); animation-timing-function: cubic-bezier(.55, 0, 1, 1); }
  54%  { transform: translate(6vw, -115vh) rotate(10deg) scale(.32); opacity: 1; }
  55%, 75% { transform: translate(6vw, -115vh) rotate(10deg) scale(.32); opacity: 0; }
  76%  { transform: translateY(3rem) scale(.94); opacity: 0; animation-timing-function: ease-out; }
  100% { transform: none; opacity: 1; }
}
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(220px); } }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }


.viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 1.25rem clamp(1rem, 4vw, 3.5rem) max(1.25rem, env(safe-area-inset-bottom));
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--text);
  background:
    radial-gradient(80% 50% at 50% 115%, rgba(120, 70, 160, .22), transparent 70%),
    #04051af7;
}
.viewer::backdrop { background: rgba(2, 3, 12, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 1rem; }

.viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.viewer-bar h2 { margin: 0; font-size: .9375rem; font-weight: 500; }
.viewer-index { margin-left: 1rem; font-size: .8125rem; font-weight: 400; color: var(--faint); }

.viewer-frame {
  margin: 0;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
}
.viewer-frame > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - 16rem);
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--line), 0 2rem 4rem rgba(0, 0, 0, .5);
}
.viewer-frame figcaption { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; line-height: 1.5; }
#scene-name { font-size: .9375rem; font-weight: 500; }
#scene-note { font-size: .8125rem; color: var(--muted); }

.viewer-nav { display: flex; justify-content: center; align-items: center; gap: clamp(1rem, 4vw, 3rem); }
.viewer-step {
  min-height: 44px;
  min-width: 4.5rem;
  padding: 0 .4rem;
  border: 0;
  background: none;
  font-size: .875rem;
  color: var(--muted);
}
.viewer-step:hover { color: var(--text); }
.viewer-thumbs { display: flex; gap: .7rem; }
.viewer-thumbs button {
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: none;
  opacity: .45;
  transition: opacity .2s ease;
}
.viewer-thumbs button:hover, .viewer-thumbs button[aria-pressed="true"] { opacity: 1; }
.viewer-thumbs button[aria-pressed="true"] { outline: 2px solid var(--ember); outline-offset: 3px; }
.viewer-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }

.viewer-files { display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem 1.75rem; }
.viewer-files a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  font-size: .8125rem;
  color: var(--muted);
  text-decoration: none;
}
.viewer-files a::before { content: "↓"; color: var(--ember); }
.viewer-files a:hover { color: var(--text); }


@media (max-width: 760px) {
  .night {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "pad" "column";
    align-items: start;
    align-content: start;
    row-gap: .75rem;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom));
  }
  .night::after,
  .night.is-away::after {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 52%);
    mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 52%);
  }
  .keycap { height: clamp(9.5rem, calc(100svh - 29rem), 21rem); }
  .pad::before { width: min(90%, 22rem); }
  .title { font-size: clamp(1.9rem, 9.6vw, 2.75rem); }
  .status-line { margin-top: .8rem; font-size: .875rem; }
  .terminal { margin-top: 1.1rem; padding-left: .9rem; }
  .terminal-line { font-size: .875rem; }
  .terminal-caret { margin-right: .55rem; }
  .keyrow { margin-top: .8rem; }
  .small-print { margin-top: 1.25rem; padding-top: .8rem; line-height: 1.65; }

  .viewer[open] { gap: .8rem; }
  .viewer-frame > img { max-height: calc(100dvh - 17rem); }
  .viewer-nav { flex-wrap: wrap; gap: .5rem .8rem; }
  .viewer-thumbs button { width: 2.75rem; height: 2.75rem; }
  .viewer-step { min-width: 3.7rem; }
}

@media (max-width: 360px) {
  .buy-link { padding: 0 .8rem; }
  .small-print { font-size: .6875rem; }
}

@media (max-height: 640px) and (min-width: 761px) {
  .title { font-size: clamp(2.3rem, 4.4vw, 3.8rem); }
  .status-line { margin-top: 1rem; }
  .terminal { margin-top: 1.25rem; }
  .small-print { margin-top: 1.25rem; }
  .keycap { height: clamp(14rem, 78svh, 30rem); }
  .viewer-frame > img { max-height: 48vh; }
  .viewer[open] { grid-template-rows: auto auto auto auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .keycap:hover .keycap-art, .keycap:active .keycap-art { transform: none; }
}

.footage{margin:1.4rem 0 0;max-width:22rem;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#05060f;box-shadow:0 18px 50px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,173,138,.06)}
.footage-video{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.footage-cap{display:flex;align-items:center;gap:.5rem;padding:.55rem .8rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(232,230,255,.62)}
.footage-dot{width:.45rem;height:.45rem;border-radius:50%;background:#ff5d5d;box-shadow:0 0 8px #ff5d5d;animation:footage-rec 1.4s steps(2) infinite}
@keyframes footage-rec{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.footage-dot{animation:none}}
@media (max-width:640px){.footage{max-width:none}}
.kicker{margin:0 0 .9rem;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;opacity:.72}