@font-face {
  font-family: "Martian Grotesk";
  src: url("https://nooks.place/brand/MartianGrotesk.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Martian Mono";
  src: url("https://nooks.place/brand/MartianMono-Regular.woff2") format("woff2");
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #111310; }
button { border-radius: 0; }
[hidden] { display: none !important; }

.surface {
  --background: #111310;
  --paper: #e9ebe7;
  --muted: #a1a49c;
  --faint: #777b73;
  --line: #30332e;
  --line-soft: #272a25;
  --signal: #7da5ff;
  width: 100%;
  min-height: 100svh;
  overflow-x: hidden;
  padding: clamp(1.4rem, 4vw, 3.2rem) clamp(1.25rem, 5vw, 5rem) 4rem;
  color: var(--paper);
  background: var(--background);
  font-family: "Martian Grotesk", Arial, sans-serif;
}

.header { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); font-size: .75rem; }
.wordmark { font-weight: 500; }
.nav { display: flex; gap: .35rem; }
.nav button, .record, .choices button, .ending button { appearance: none; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.nav button { min-width: 4.9rem; min-height: 44px; padding: .75rem .45rem; color: var(--faint); font-family: "Martian Mono", monospace; font-size: .69rem; transition: color 150ms ease-out, scale 150ms ease-out; }
.nav button:hover, .nav button:focus-visible, .nav button[aria-pressed="true"], .record:hover, .record:focus-visible, .record[aria-pressed="true"], .choices button:hover, .choices button:focus-visible { color: var(--signal); outline: none; }
.nav button:focus-visible, .record:focus-visible, .choices button:focus-visible, .ending button:focus-visible { outline: 1px solid var(--signal); outline-offset: 4px; }
.nav button:active, .record:active, .choices button:active, .ending button:active { scale: .96; }
.view { animation: reveal-view 360ms cubic-bezier(.2,0,0,1) both; }
.intro, .inquiry-intro { max-width: 41rem; padding: clamp(3.25rem,7vw,5.75rem) 0 clamp(2.5rem,5vw,3.7rem); }
.intro h1, .inquiry-intro h1 { margin: 0 0 1.15rem; font-size: clamp(2.3rem,5vw,3.65rem); font-weight: 400; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.intro p, .inquiry-intro p { max-width: 35rem; margin: 0; color: #b3b6ae; font-size: .94rem; line-height: 1.58; text-wrap: pretty; }
.note { margin-top: 1.1rem; color: #85887f; font-family: "Martian Mono", monospace; font-size: .68rem; line-height: 1.55; }
.archive { display: grid; grid-template-columns: minmax(16rem,.78fr) minmax(21rem,1.22fr); border-top: 1px solid var(--line); }
.record-list { min-width: 0; border-right: 1px solid var(--line); }
.label { padding: .9rem 1.25rem .9rem 0; color: #8e9189; font-family: "Martian Mono", monospace; font-size: .69rem; }
.record { width: 100%; display: block; min-height: 64px; padding: .95rem 1.4rem .95rem 0; border-top: 1px solid var(--line-soft); text-align: left; transition: color 150ms ease-out, scale 150ms ease-out; }
.record-name, .record-meta { display: block; }
.record-name { overflow-wrap: anywhere; font-family: "Martian Mono", monospace; font-size: .75rem; line-height: 1.5; }
.record-meta { margin-top: .4rem; color: #7f827a; font-size: .68rem; }
.detail { min-width: 0; padding: .9rem 0 1.25rem 2.1rem; font-family: "Martian Mono", monospace; animation: reveal-detail 260ms cubic-bezier(.2,0,0,1) both; }
.detail-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1.2rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line-soft); color: #8e9189; font-size: .69rem; }
.detail-file, .field span:last-child { overflow-wrap: anywhere; }
.fields { padding: 1.1rem 0 1rem; border-bottom: 1px solid var(--line-soft); }
.field { display: grid; grid-template-columns: 5.75rem minmax(0,1fr); gap: .9rem; margin: .45rem 0; font-size: .69rem; line-height: 1.55; }
.key { color: #85887f; }
.state, .annotation strong, .ending strong { color: var(--signal); }
.record-body { max-width: 38rem; padding: 1.45rem 0 .45rem; font-size: .75rem; line-height: 1.75; }
.record-body p { margin: 0 0 1rem; text-wrap: pretty; }
.annotation { margin-top: 1.5rem; padding-top: .95rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .69rem; line-height: 1.7; }
.annotation strong, .ending strong { display: block; margin-bottom: .5rem; font-weight: 400; }
.inquiry-view { max-width: 50rem; }
.inquiry-intro { padding-bottom: 2.5rem; }
.terminal { border-top: 1px solid var(--line); font-family: "Martian Mono", monospace; }
.terminal-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .65rem 1.25rem; padding: .9rem 0; border-bottom: 1px solid var(--line-soft); color: #8e9189; font-size: .69rem; }
.terminal-state { display: inline-flex; align-items: center; gap: .45rem; font-variant-numeric: tabular-nums; }
.cursor { width: .45rem; height: .75rem; display: inline-block; background: var(--signal); animation: cursor-blink 1.15s steps(2,start) infinite; }
.history { padding-top: 1.1rem; color: #92958d; font-size: .69rem; line-height: 1.65; }
.history-item { display: grid; grid-template-columns: 3.75rem minmax(0,1fr); gap: .9rem; margin-bottom: .7rem; }
.history-item span:first-child { color: var(--signal); }
.dialogue { opacity: 1; transform: translateY(0); filter: blur(0); transition: opacity 220ms cubic-bezier(.2,0,0,1), transform 220ms cubic-bezier(.2,0,0,1), filter 220ms cubic-bezier(.2,0,0,1); }
.dialogue.transitioning { opacity: 0; transform: translateY(-6px); filter: blur(3px); transition-duration: 140ms; transition-timing-function: ease-in; }
.question { max-width: 43rem; padding: 1.5rem 0 1.35rem; font-size: .94rem; line-height: 1.68; text-wrap: pretty; }
.choices { max-width: 43rem; border-top: 1px solid var(--line-soft); }
.choices button { width: 100%; display: grid; grid-template-columns: .75rem 1.75rem minmax(0,1fr); gap: .65rem; min-height: 48px; padding: .82rem 0; border-bottom: 1px solid var(--line-soft); font-size: .75rem; line-height: 1.6; text-align: left; transition: color 150ms ease-out, scale 150ms ease-out; }
.choice-marker { color: var(--signal); opacity: 0; transform: translateX(-4px); transition: opacity 160ms cubic-bezier(.2,0,0,1), transform 160ms cubic-bezier(.2,0,0,1); }
.choices button:hover .choice-marker, .choices button:focus-visible .choice-marker { opacity: 1; transform: translateX(0); }
.choice-index { color: #85887f; }
.ending { max-width: 43rem; padding: 1.5rem 0; font-size: .75rem; line-height: 1.75; }
.ending span { text-wrap: pretty; }
.ending button { display: block; min-height: 44px; margin-top: 1rem; padding: .7rem 0; border-bottom: 1px solid currentColor; color: var(--signal); font-size: .69rem; transition: scale 150ms ease-out, color 150ms ease-out; }
@keyframes reveal-view { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes reveal-detail { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes cursor-blink { 50% { opacity: 0; } }
@media (max-width: 700px) {
  .surface { padding: 1.25rem 1.1rem 3rem; }
  .header { align-items: center; }
  .nav { gap: 0; }
  .nav button { min-width: auto; padding-inline: .55rem; }
  .intro, .inquiry-intro { padding-top: 3rem; }
  .archive { grid-template-columns: minmax(0,1fr); }
  .record-list { border-right: 0; }
  .detail { margin-top: 1.5rem; padding: 1.2rem 0 0; border-top: 1px solid var(--line); }
  .field { grid-template-columns: 4.65rem minmax(0,1fr); }
  .history-item { grid-template-columns: 2.6rem minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .view, .detail, .cursor { animation: none; }
  .nav button, .record, .choices button, .choice-marker, .dialogue, .ending button { transition: none; }
}