:root {
  --void: #080808;
  --steel: #2a2c30;
  --steel-2: #3a3d42;
  --mist: #8d9198;
  --chrome: #dfe2e7;
  --ice: #a9d8ff;
  --danger: #ff8f8f;

  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --chrome-grad: linear-gradient(180deg, #ffffff 0%, #c9ccd2 38%, #6f737a 52%, #e9ebee 64%, #9a9ea5 100%);
  --pad: clamp(1.25rem, 4vw, 3rem);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: calc(5rem + env(safe-area-inset-top, 0px)); background: var(--void); }
body {
  margin: 0; color: var(--chrome); background: var(--void);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 4px; }

#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; background: var(--void); }
.grain {
  position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
.bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .9rem var(--pad);
  background: linear-gradient(180deg, rgba(8,8,8,.85), rgba(8,8,8,.4));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(223,226,231,.06);
}
.mark { display: flex; align-items: center; gap: .6rem; text-decoration: none; font: 500 1rem/1 var(--display); letter-spacing: .04em; }
.mark svg { width: 26px; height: 26px; fill: none; stroke: var(--chrome); stroke-width: 6; }
.mark .core { fill: var(--chrome); stroke: none; }
.links { display: flex; gap: 1.75rem; margin-left: auto; }
.links a { text-decoration: none; color: var(--mist); font-size: .95rem; transition: color .2s; }
.links a:hover { color: var(--chrome); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.9rem; padding: 0 1.4rem; border-radius: 999px;
  font: 600 .95rem/1 var(--body); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap; transition: transform .15s, background .2s, border-color .2s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-chrome { color: #0b0b0c; background: var(--chrome-grad); border-color: rgba(255,255,255,.6); box-shadow: inset 0 1px 0 #fff, 0 6px 30px -10px rgba(223,226,231,.45); }
.btn-ghost { color: var(--chrome); background: rgba(223,226,231,.04); border-color: rgba(223,226,231,.22); }
.btn-ghost:hover { border-color: rgba(223,226,231,.5); }
.btn-small { min-height: 2.2rem; padding: 0 1rem; font-size: .85rem; color: var(--chrome); background: var(--steel); border-color: var(--steel-2); }
.bar .btn { min-height: 2.4rem; }

/* ---------- hero ---------- */
.hero {
  min-height: calc(100svh - 4.5rem);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 4rem var(--pad) 3rem; gap: 1.6rem;
}
.pill {
  margin: 0; padding: .4rem .95rem; border-radius: 999px; font-size: .85rem; color: var(--mist);
  border: 1px solid rgba(223,226,231,.14); background: rgba(8,8,8,.5);
}
.wordmark {
  position: relative; margin: 0;
  font: 800 clamp(1.9rem, 8.6vw, 8.8rem)/.9 var(--display); letter-spacing: -.035em;
  background: var(--chrome-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.6));
  animation: settle 1.6s cubic-bezier(.2,.7,.1,1) both;
}
/* a faint, misaligned ghost copy — the "unobserved" state */
.wordmark::after {
  content: attr(data-text); position: absolute; inset: 0;
  background: none; color: transparent; -webkit-text-stroke: 1px rgba(169,216,255,.35);
  transform: translate(.04em, .03em); pointer-events: none;
  animation: drift 7s ease-in-out infinite alternate;
}
@keyframes settle { from { opacity: 0; letter-spacing: .12em; filter: blur(14px); } to { opacity: 1; } }
@keyframes drift { to { transform: translate(-.03em, -.02em); opacity: .4; } }

.lede { max-width: 38rem; margin: 0; color: #b9bdc4; font-size: clamp(1.02rem, 1.6vw, 1.2rem); }

.term {
  width: min(40rem, 100%); text-align: left;
  border: 1px solid rgba(223,226,231,.18); border-radius: 1.1rem;
  background: rgba(10,10,11,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px -30px #000, inset 0 1px 0 rgba(255,255,255,.05);
  font-family: var(--mono); font-size: .9rem;
}
.term-log { max-height: 14rem; overflow-y: auto; padding: 0 1.1rem; white-space: pre-wrap; color: var(--mist); }
.term-log:not(:empty) { padding-top: .9rem; }
.term-log .me { color: var(--chrome); }
.term-log .hit { color: var(--ice); }
.term-log .agent { color: #cfd3d9; }
.term-log .thinking { color: var(--mist); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .3; } }
.term-row { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem; }
.prompt { color: var(--ice); }
.term input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--chrome); font: inherit; }
.term input::placeholder { color: #5f636a; }
.term:focus-within { border-color: rgba(169,216,255,.45); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ---------- contract strip ---------- */
.ca-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .9rem 1.2rem;
  margin: 0 var(--pad); padding: 1rem 1.25rem;
  border-block: 1px solid rgba(223,226,231,.1); background: rgba(8,8,8,.6);
}
.ca-label { color: var(--mist); font-size: .9rem; }
#ca { font: 500 clamp(.78rem, 1.8vw, .95rem)/1.3 var(--mono); color: var(--chrome); word-break: break-all; }

/* ---------- panels ---------- */
.panel { max-width: 76rem; margin: 0 auto; padding: clamp(4.5rem, 10vw, 8rem) var(--pad); }
.panel h2 { margin: 0 0 1.6rem; font: 500 clamp(1.8rem, 4.2vw, 3.2rem)/1.08 var(--display); letter-spacing: -.02em; max-width: 22ch; }
.lore-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.5rem 3rem; max-width: 62rem; }
.lore-cols p { margin: 0; color: #b9bdc4; max-width: 34rem; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 0; border-top: 1px solid rgba(223,226,231,.14); }
.facts div { padding: 1.4rem 1.2rem 1.4rem 0; border-bottom: 1px solid rgba(223,226,231,.14); }
.facts dt { color: var(--mist); font-size: .9rem; margin-bottom: .35rem; }
.facts dd { margin: 0; font: 500 clamp(1.2rem, 2.4vw, 1.6rem)/1.2 var(--display); }
.fine { color: var(--mist); font-size: .95rem; max-width: 40rem; margin: 1.5rem 0 0; }

/* ---------- vault ---------- */
.vault-head p { color: #b9bdc4; max-width: 40rem; margin: 0 0 3rem; }
.vault-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.rings { position: sticky; top: 6rem; margin: 0; aspect-ratio: 1; }
.rings svg { width: 100%; height: 100%; overflow: visible; }
.rings circle { fill: none; transition: stroke .8s, stroke-width .8s, opacity .8s; }
.rings .r-off { stroke: var(--steel-2); stroke-width: 1; stroke-dasharray: 2 6; }
.rings .r-on { stroke: var(--chrome); stroke-width: 2.2; filter: drop-shadow(0 0 6px rgba(169,216,255,.55)); }
.rings .r-now { stroke: var(--ice); stroke-width: 1.4; stroke-dasharray: 40 10; animation: spin 18s linear infinite; transform-origin: 160px 160px; }
.rings .core { fill: var(--chrome); filter: drop-shadow(0 0 18px rgba(223,226,231,.6)); }
@keyframes spin { to { transform: rotate(360deg); } }
.rings figcaption { position: absolute; inset: auto 0 -2.2rem; text-align: center; font: 500 1rem/1 var(--display); color: var(--mist); }

.lock-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.4rem; }
.lock-list button {
  width: 100%; min-height: 3rem; border-radius: .7rem; cursor: pointer;
  font: 500 .95rem/1 var(--display); color: var(--mist);
  background: rgba(20,20,22,.7); border: 1px solid var(--steel-2);
}
.lock-list button[aria-current="true"] { color: var(--chrome); border-color: var(--ice); }
.lock-list button.open { color: #0b0b0c; background: var(--chrome-grad); border-color: transparent; }
.lock-list button:disabled { cursor: not-allowed; opacity: .4; }

.lock-panel {
  padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 1.4rem;
  background: rgba(12,12,13,.82); border: 1px solid rgba(223,226,231,.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lock-panel h3 { margin: 0 0 1rem; font: 500 1.25rem/1.25 var(--display); }
.clue {
  margin: 0 0 1.6rem; padding: 1.2rem; border-radius: .8rem; overflow-x: auto;
  background: rgba(0,0,0,.45); border: 1px solid rgba(223,226,231,.07);
  font: 400 .95rem/1.7 var(--mono); color: #cfd3d9; white-space: pre-wrap;
}
.key-form label { display: block; margin-bottom: .45rem; font-size: .9rem; color: var(--mist); }
.key-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.key-form input {
  flex: 1 1 14rem; min-width: 0; min-height: 2.9rem; padding: 0 1rem; border-radius: .8rem;
  background: rgba(0,0,0,.5); border: 1px solid var(--steel-2); color: var(--chrome);
  font: 500 1rem var(--mono); letter-spacing: .04em;
}
.key-form input:focus { border-color: var(--ice); outline: none; }
.recover { margin-top: 1rem; color: var(--mist); font-size: .9rem; }
.recover summary { cursor: pointer; }
.recover label { margin-top: .8rem; }
.recover input { width: 100%; font-size: .8rem; }
.status { min-height: 1.5em; margin: 1rem 0 0; font-size: .95rem; color: var(--mist); }
.status.ok { color: var(--ice); }
.status.err { color: var(--danger); }
.lock-panel.final { border-color: rgba(169,216,255,.45); box-shadow: 0 0 80px -30px rgba(169,216,255,.5); }

/* ---------- the bottom ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.boss-intro { color: #b9bdc4; max-width: 40rem; margin: 0 0 2rem; }
.room {
  --wall: #b8a556; --wall-2: #a8964a; --ink: #2b2410;
  position: relative; height: clamp(15rem, 34vw, 19rem); overflow: hidden;
  border-radius: .6rem; border: 1px solid #4a4220;
  background:
    repeating-linear-gradient(90deg, var(--wall) 0 26px, var(--wall-2) 26px 28px, var(--wall) 28px 54px),
    var(--wall);
  box-shadow: inset 0 0 120px rgba(40,30,0,.65), 0 30px 80px -40px rgba(184,165,86,.35);
  animation: hum 7s infinite;
}
.room::after { /* vanishing-point gloom: the hallway keeps going */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(30,22,0,.55) 100%);
}
.lights { position: absolute; top: 0; left: 8%; right: 8%; height: 10px; display: flex; gap: 12%; justify-content: center; }
.lights::before, .lights::after { content: ""; flex: 0 0 28%; height: 6px; margin-top: 10px; border-radius: 2px; background: #fffbe0; box-shadow: 0 0 30px 8px rgba(255,250,210,.55); }
.carpet { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: repeating-linear-gradient(0deg, #7d6c2e 0 2px, #857432 2px 4px); border-top: 2px solid #5e5122; }
.room-label { position: absolute; top: 1.6rem; left: 1rem; z-index: 2; font: 500 .8rem/1 var(--mono); color: var(--ink); opacity: .75; }
.room.flicker { animation: flicker .9s steps(1) 1; }
@keyframes hum { 0%, 96%, 100% { filter: none; } 97% { filter: brightness(.6); } 98% { filter: brightness(1.1); } }
@keyframes flicker { 0% { filter: brightness(.2); } 20% { filter: brightness(1); } 35% { filter: brightness(.35); } 50% { filter: brightness(1); } 70% { filter: brightness(.5); } 100% { filter: none; } }

.figure {
  position: absolute; left: 0; bottom: 14%; z-index: 3;
  padding: .3rem; margin: 0; border: 0; background: none; cursor: pointer; color: var(--ink);
  transition: opacity .3s;
}
.figure pre { margin: 0; font: 700 clamp(1.2rem, 2.8vw, 1.65rem)/1.02 var(--mono); }
.figure:focus-visible { outline-color: var(--ink); }
.figure.wiggle pre { animation: wiggle .5s ease-in-out 2; }
.figure.shake pre { animation: shake .35s linear 2; }
@keyframes wiggle { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.bubble {
  position: absolute; z-index: 4; bottom: calc(14% + 7.4rem); max-width: 15rem;
  padding: .45rem .7rem; border-radius: .6rem; background: #fffbe8; color: var(--ink);
  font: 500 .85rem/1.35 var(--body); box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

.boss-log {
  max-height: 28rem; overflow-y: auto; margin-top: 1.2rem; padding: 0 .2rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.boss-log:empty { display: none; }
.boss-log .q { align-self: flex-end; max-width: 80%; padding: .6rem .9rem; border-radius: .9rem .9rem .2rem .9rem; background: var(--steel); }
.boss-log .a { max-width: 44rem; padding: 1rem 1.1rem; border-radius: .9rem; background: rgba(184,165,86,.08); border: 1px solid rgba(184,165,86,.25); white-space: pre-wrap; color: #e8e2c8; }
.boss-log .a b { display: block; margin-bottom: .35rem; font: 600 .8rem/1 var(--mono); color: #b8a556; }
.boss-log .a.far { font-style: italic; opacity: .85; }
.boss-form { display: flex; gap: .6rem; margin-top: 1.2rem; flex-wrap: wrap; }
.boss-form input {
  flex: 1 1 16rem; min-width: 0; min-height: 2.9rem; padding: 0 1rem; border-radius: .8rem;
  background: rgba(0,0,0,.5); border: 1px solid var(--steel-2); color: var(--chrome); font: inherit;
}
.boss-form input:focus { border-color: #b8a556; outline: none; }

/* ---------- buy ---------- */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem; }
.steps li { counter-increment: s; border-top: 1px solid rgba(223,226,231,.18); padding-top: 1.2rem; }
.steps li::before { content: counter(s); display: block; font: 300 2.6rem/1 var(--display); color: var(--steel-2); margin-bottom: .8rem; }
.steps h3 { margin: 0 0 .4rem; font: 500 1.1rem/1.3 var(--display); }
.steps p { margin: 0; color: #b9bdc4; }
.buy .actions { justify-content: flex-start; }

/* ---------- footer ---------- */
.foot { padding: 3rem var(--pad) 4rem; border-top: 1px solid rgba(223,226,231,.08); background: rgba(8,8,8,.8); text-align: center; color: var(--mist); font-size: .9rem; }
.foot p { max-width: 40rem; margin: 0 auto 1.2rem; }
.social { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; }
.social a { text-decoration: none; color: var(--chrome); }
.ghost { color: #121213; font: 400 .7rem var(--mono); user-select: all; letter-spacing: .3em; }

.toast {
  position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); z-index: 20;
  transform: translate(-50%, 150%); padding: .8rem 1.2rem; border-radius: .8rem; max-width: calc(100% - 2rem);
  background: #151517; border: 1px solid var(--steel-2); color: var(--chrome); font-size: .92rem;
  opacity: 0; visibility: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s, visibility .35s;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .links { display: none; }
  .bar .btn { margin-left: auto; }
  .vault-body { grid-template-columns: 1fr; }
  .rings { position: relative; top: 0; max-width: 18rem; margin: 0 auto 2.5rem; }
}
@media (max-width: 480px) {
  .bar { gap: .75rem; }
  .mark { font-size: .85rem; }
  .bar .btn { padding: 0 .9rem; font-size: .85rem; }
  .lock-list { grid-template-columns: repeat(3, 1fr); }
  .ca-strip { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}