.latent_wrap {--ink: #f3f2ee; --mute: rgba(243, 242, 238, 0.56); --faint: rgba(243, 242, 238, 0.32); --hair: rgba(243, 242, 238, 0.16); --bg: #050505;
  --sans: 'LT Sans', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; --mono: 'LT Mono', 'JetBrains Mono', ui-monospace, monospace;
  --gut: clamp(16px, 2.2vw, 32px); --frame: clamp(10px, 1.1vw, 16px);
  position: relative; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01' 1, 'cv11' 1; }
.latent_wrap ::selection {background: var(--ink); color: var(--bg); }
.latent_wrap .latent_canvas {position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.latent_wrap .latent_canvas canvas {position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ── loader ── */
.latent_wrap .latent_loader {position: fixed; inset: 0; z-index: 80; background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gut); transition: opacity 0.9s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.9s; }
.latent_wrap .latent_loader.is-done {opacity: 0; visibility: hidden; }
.latent_wrap .latent_load_word {margin: 0; font: 300 clamp(56px, 13.6vw, 236px) / 0.8 var(--sans); letter-spacing: -0.065em; white-space: nowrap; display: flex; align-items: flex-end; min-height: 0.8em; }
.latent_wrap .latent_caret {display: inline-block; width: 0.06em; height: 0.72em; margin-left: 0.06em; background: var(--ink); animation: latent-blink 1.06s steps(1) infinite; }
.latent_wrap .latent_caret.is-mono {width: 0.5em; height: 0.08em; align-self: center; }
@keyframes latent-blink {50% {opacity: 0; } }
.latent_wrap .latent_load_meta {position: absolute; left: var(--gut); right: var(--gut); bottom: calc(var(--gut) + var(--frame)); margin: 0; display: flex; justify-content: space-between; gap: 24px; font: 400 11px / 1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); font-variant-numeric: tabular-nums; }

/* ── chrome (fixed, inverts over paper) ── */
.latent_wrap .latent_chrome {position: fixed; inset: 0; z-index: 60; pointer-events: none; mix-blend-mode: difference; color: #fff; font: 400 11px / 1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0; transition: opacity 0.8s; }
.latent_wrap .latent_chrome.is-on {opacity: 1; }
.latent_wrap .latent_cross {position: absolute; width: 13px; height: 13px; }
.latent_wrap .latent_cross::before, .latent_wrap .latent_cross::after {content: ''; position: absolute; background: currentColor; }
.latent_wrap .latent_cross::before {left: 6px; top: 0; width: 1px; height: 13px; }
.latent_wrap .latent_cross::after {top: 6px; left: 0; height: 1px; width: 13px; }
.latent_wrap .latent_cross.is-tl {left: calc(var(--frame) - 6px); top: calc(var(--frame) - 6px); }
.latent_wrap .latent_cross.is-tr {right: calc(var(--frame) - 6px); top: calc(var(--frame) - 6px); }
.latent_wrap .latent_cross.is-bl {left: calc(var(--frame) - 6px); bottom: calc(var(--frame) - 6px); }
.latent_wrap .latent_cross.is-br {right: calc(var(--frame) - 6px); bottom: calc(var(--frame) - 6px); }
.latent_wrap .latent_logo {position: absolute; left: var(--gut); top: calc(var(--frame) + 14px); pointer-events: auto; color: inherit; text-decoration: none; font: 600 15px / 1 var(--sans); letter-spacing: 0.16em; }
.latent_wrap .latent_logo sup {font: 400 9px var(--mono); letter-spacing: 0.04em; margin-left: 4px; vertical-align: top; }
.latent_wrap .latent_where {position: absolute; left: 50%; top: calc(var(--frame) + 14px); margin: 0; transform: translateX(-50%); display: flex; gap: 0; white-space: nowrap; font: 400 11px / 1.3 var(--mono); font-variant-numeric: tabular-nums; }
.latent_wrap .latent_where_sep {opacity: 0.5; margin-right: 12px; }
.latent_wrap .latent_index_btn, .latent_wrap .latent_sound {position: absolute; pointer-events: auto; background: none; border: 0; padding: 4px 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.latent_wrap .latent_index_btn {right: var(--gut); top: calc(var(--frame) + 10px); }
.latent_wrap .latent_index_btn::before {content: ''; display: inline-block; width: 6px; height: 6px; background: currentColor; margin-right: 8px; vertical-align: 1px; }
.latent_wrap .latent_sound {right: var(--gut); bottom: calc(var(--frame) + 10px); }
.latent_wrap .latent_pill {position: absolute; left: 50%; bottom: calc(var(--frame) + 4px); transform: translateX(-50%); pointer-events: auto; display: flex; align-items: center; gap: 10px; width: min(560px, calc(100vw - 2 * var(--gut) - 340px)); padding: 6px 6px 6px 12px; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(0, 0, 0, 0.001); }
.latent_wrap .latent_pill[hidden] {display: none; }
.latent_wrap .latent_pill_tag {flex: none; background: #fff; color: #000; padding: 3px 5px 2px; font-size: 10px; }
.latent_wrap .latent_pill_input {flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: inherit; font: 400 13px / 1.2 var(--sans); letter-spacing: 0; text-transform: none; text-overflow: ellipsis; }
.latent_wrap .latent_pill_go {flex: none; background: #fff; color: #000; border: 0; padding: 7px 10px 6px; font: inherit; cursor: pointer; }

/* ── index (Obys scale) ── */
.latent_wrap .latent_index {position: fixed; inset: 0; z-index: 70; background: #e9e8e4; color: #0b0b0b; overflow: auto; clip-path: inset(0 0 100% 0); transition: clip-path 0.8s cubic-bezier(0.76, 0, 0.24, 1); }
.latent_wrap .latent_index.is-open {clip-path: inset(0 0 0 0); }
.latent_wrap .latent_index[hidden] {display: block; visibility: hidden; }
.latent_wrap .latent_index.is-open[hidden] {visibility: visible; }
.latent_wrap .latent_index_inner {padding: calc(var(--frame) + 56px) var(--gut) 40px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.latent_wrap .latent_index_meta {grid-column: 1 / 4; margin: 0; display: flex; flex-direction: column; gap: 6px; font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.latent_wrap .latent_index_list {grid-column: 4 / 13; list-style: none; margin: 0; padding: 0; counter-reset: ix; }
.latent_wrap .latent_index_list li {border-bottom: 1px solid rgba(11, 11, 11, 0.18); }
.latent_wrap .latent_index_list a {display: flex; align-items: baseline; gap: 18px; color: inherit; text-decoration: none; font: 400 clamp(30px, 4.4vw, 76px) / 1.04 var(--sans); letter-spacing: -0.045em; padding: 4px 0 2px; transition: color 0.3s, padding 0.4s cubic-bezier(0.65, 0, 0.35, 1); }
.latent_wrap .latent_index_list a span {font: 400 11px var(--mono); letter-spacing: 0.04em; min-width: 3ch; }
.latent_wrap .latent_index_list a:hover {padding-left: 16px; color: #6c6b68; }
.latent_wrap .latent_index_close {position: fixed; right: var(--gut); top: calc(var(--frame) + 10px); background: #0b0b0b; color: #e9e8e4; border: 0; padding: 7px 10px 6px; font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }

/* ── runs: held stages ── */
.latent_wrap .latent_run {position: relative; }
.latent_wrap .latent_run.is-hero {height: 230vh; }
.latent_wrap .latent_run.is-tokens {height: 280vh; margin-top: -100vh; }
.latent_wrap .latent_run.is-embed {height: 360vh; margin-top: -100vh; }
.latent_wrap .latent_stage {position: sticky; top: 0; height: 100vh; overflow: clip; transform: translateY(var(--hold, 0px)); visibility: hidden; }
.latent_wrap .latent_tag {position: absolute; left: var(--gut); top: calc(var(--frame) + 56px); margin: 0; display: flex; gap: 1px; font: 400 11px / 1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; opacity: var(--in, 1); }
.latent_wrap .latent_tag span {background: var(--ink); color: var(--bg); padding: 4px 6px 3px; }
.latent_wrap .latent_tag span + span {background: none; color: var(--ink); border: 1px solid var(--hair); padding: 3px 6px 2px; }

/* hero */
.latent_wrap .latent_prompt {position: absolute; left: var(--gut); right: var(--gut); top: 31vh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.latent_wrap .latent_prompt_label {grid-column: 1 / 6; font: 400 15px / 1.4 var(--sans); color: var(--mute); margin-bottom: 22px; }
.latent_wrap .latent_prompt_line {grid-column: 1 / 13; display: flex; align-items: center; gap: 0.35em; border-bottom: 1px solid var(--hair); padding-bottom: 10px; font: 300 clamp(30px, min(4.4vw, 7.4vh), 76px) / 1.1 var(--sans); letter-spacing: -0.035em; }
.latent_wrap .latent_prompt_mark {color: var(--faint); }
.latent_wrap .latent_prompt_input {flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: inherit; letter-spacing: inherit; caret-color: var(--ink); padding: 0; }
.latent_wrap .latent_prompt_input::placeholder {color: rgba(243, 242, 238, 0.24); }
.latent_wrap .latent_prompt_input.is-gone {color: transparent; }
.latent_wrap .latent_prompt_go {flex: none; width: 1.1em; height: 1.1em; border: 1px solid var(--hair); background: none; color: var(--ink); font: 300 0.5em var(--sans); cursor: pointer; transition: background 0.3s, color 0.3s; }
.latent_wrap .latent_prompt_go:hover, .latent_wrap .latent_prompt_go:focus-visible {background: var(--ink); color: var(--bg); }
.latent_wrap .latent_prompt_count {grid-column: 1 / 13; margin: 12px 0 0; font: 400 11px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); font-variant-numeric: tabular-nums; }
.latent_wrap .latent_cue {grid-column: 1 / 13; margin: 26px 0 0; font: 400 11px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity 0.6s; }
.latent_wrap .latent_cue.is-on {opacity: 1; }
.latent_wrap .latent_word {position: absolute; left: 0; right: 0; bottom: calc(var(--frame) + 70px); margin: 0; padding: 0 calc(var(--gut) - 0.04em); font: 300 22.6vw / 0.74 var(--sans); letter-spacing: -0.075em; white-space: nowrap; overflow: hidden; pointer-events: none; }
.latent_wrap .latent_word_in {display: block; transform: translateY(var(--rise, 0%)); }

/* tokens + embedding */
.latent_wrap .latent_head {position: absolute; left: var(--gut); right: var(--gut); top: calc(var(--frame) + 96px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); opacity: var(--in, 1); transform: translateY(calc((1 - var(--in, 1)) * 18px)); }
.latent_wrap .latent_h {grid-column: 1 / 8; margin: 0; font: 300 clamp(34px, min(4.6vw, 7.6vh), 82px) / 0.98 var(--sans); letter-spacing: -0.05em; }
.latent_wrap .latent_h em {font-style: normal; }
.latent_wrap .latent_sub {grid-column: 9 / 13; align-self: end; margin: 0; font: 400 15px / 1.45 var(--sans); color: var(--mute); max-width: 38ch; }
.latent_wrap .latent_tiles {position: absolute; left: var(--gut); right: var(--gut); top: 50vh; display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.latent_wrap .latent_tile {position: relative; min-width: 64px; padding: 26px 16px 12px; border: 1px solid transparent; cursor: default; transition: background 0.25s, color 0.25s; }
.latent_wrap .latent_tile.is-special {border-style: dashed; }
.latent_wrap .latent_tile_i {position: absolute; left: 7px; top: 6px; font: 400 9.5px var(--mono); color: var(--faint); letter-spacing: 0.04em; }
.latent_wrap .latent_tile_p {display: block; font: 300 clamp(26px, min(3.1vw, 5.2vh), 54px) / 1 var(--sans); letter-spacing: -0.04em; white-space: pre; opacity: var(--tin, 0); }
.latent_wrap .latent_tile_id {display: block; margin-top: 10px; font: 400 11px var(--mono); letter-spacing: 0.02em; color: var(--mute); font-variant-numeric: tabular-nums; opacity: var(--tin, 0); }
.latent_wrap .latent_tile:hover, .latent_wrap .latent_tile.is-hot {background: var(--ink); color: var(--bg); }
.latent_wrap .latent_tile:hover .latent_tile_id, .latent_wrap .latent_tile.is-hot .latent_tile_id, .latent_wrap .latent_tile:hover .latent_tile_i, .latent_wrap .latent_tile.is-hot .latent_tile_i {color: rgba(5, 5, 5, 0.6); }
.latent_wrap .latent_read {position: absolute; left: var(--gut); bottom: calc(var(--frame) + 88px); margin: 0; max-width: 60ch; font: 400 12px / 1.5 var(--mono); letter-spacing: 0.02em; color: var(--mute); min-height: 1.5em; opacity: var(--in, 1); }
.latent_wrap .latent_read b {font-weight: 400; color: var(--ink); }
.latent_wrap .latent_code {position: absolute; left: var(--gut); right: var(--gut); top: 47vh; height: 30vh; opacity: var(--in, 1); }
.latent_wrap .latent_bars {position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 26px); display: block; cursor: crosshair; }
.latent_wrap .latent_axis {position: absolute; left: 0; right: 0; bottom: 0; margin: 0; display: flex; justify-content: space-between; font: 400 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--mute); }
.latent_wrap .latent_axis span:nth-child(2) {color: var(--ink); }
.latent_wrap .latent_vec {position: absolute; right: var(--gut); bottom: calc(var(--frame) + 88px); margin: 0; max-width: 52ch; text-align: right; font: 400 11px / 1.6 var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.latent_wrap .latent_read.is-embed {max-width: 44ch; }

@media (max-width: 767px) {
  .latent_wrap .latent_where {display: none; }
  .latent_wrap .latent_pill {width: calc(100vw - 2 * var(--gut) - 92px); left: var(--gut); transform: none; }
  .latent_wrap .latent_prompt {top: 26vh; }
  .latent_wrap .latent_prompt_label {grid-column: 1 / 13; font-size: 14px; }
  .latent_wrap .latent_prompt_line {font-size: clamp(26px, 8vw, 40px); }
  .latent_wrap .latent_head {top: calc(var(--frame) + 84px); }
  .latent_wrap .latent_h {grid-column: 1 / 13; font-size: clamp(30px, 9vw, 44px); }
  .latent_wrap .latent_sub {grid-column: 1 / 13; margin-top: 14px; font-size: 14px; }
  .latent_wrap .latent_tiles {top: 52vh; gap: 6px; }
  .latent_wrap .latent_tile {padding: 20px 9px 8px; min-width: 44px; }
  .latent_wrap .latent_tile_p {font-size: 22px; }
  .latent_wrap .latent_tile_id {margin-top: 6px; font-size: 10px; }
  .latent_wrap .latent_code {top: 52vh; height: 22vh; }
  .latent_wrap .latent_vec {display: none; }
  .latent_wrap .latent_read {bottom: calc(var(--frame) + 84px); right: var(--gut); font-size: 11px; }
  .latent_wrap .latent_index_meta {grid-column: 1 / 13; margin-bottom: 24px; }
  .latent_wrap .latent_index_list {grid-column: 1 / 13; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .latent_wrap .latent_h {grid-column: 1 / 13; }
  .latent_wrap .latent_sub {grid-column: 1 / 9; margin-top: 16px; }
  .latent_wrap .latent_pill {width: min(420px, calc(100vw - 2 * var(--gut) - 260px)); }
}
@media (prefers-reduced-motion: reduce) {
  .latent_wrap .latent_caret {animation: none; }
}

.latent_wrap .latent_contain {position: relative; }
