.space_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; z-index: 2; margin-top: -100vh; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; pointer-events: none; }
.space_wrap .space_run {position: relative; margin-top: -100vh; }
.space_wrap .space_run.is-space {height: 520vh; margin-top: 0; }
.space_wrap .space_run.is-layers {height: 440vh; }
.space_wrap .space_run.is-attn {height: 400vh; }
.space_wrap .space_stage {position: sticky; top: 0; height: 100vh; overflow: clip; transform: translateY(var(--hold, 0px)); visibility: hidden; pointer-events: auto; }
.space_wrap .space_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); }
.space_wrap .space_tag span {background: var(--ink); color: var(--bg); padding: 4px 6px 3px; }
.space_wrap .space_tag span + span {background: none; color: var(--ink); border: 1px solid var(--hair); padding: 3px 6px 2px; }
.space_wrap .space_drag {position: absolute; inset: 0; cursor: grab; touch-action: pan-y; }
.space_wrap .space_drag.is-down {cursor: grabbing; }
.space_wrap .space_head, .space_wrap .space_ahead {position: absolute; left: var(--gut); top: calc(var(--frame) + 96px); width: min(46vw, 640px); opacity: var(--in, 1); transform: translateY(calc((1 - var(--in, 1)) * 18px)); pointer-events: none; }
.space_wrap .space_h {margin: 0; font: 300 clamp(34px, min(4.6vw, 7.6vh), 82px) / 0.98 var(--sans); letter-spacing: -0.05em; }
.space_wrap .space_sub {margin: 20px 0 0; font: 400 15px / 1.45 var(--sans); color: var(--mute); max-width: 40ch; }
.space_wrap .space_labels {position: absolute; inset: 0; pointer-events: none; }
.space_wrap .space_label {position: absolute; left: 0; top: 0; font: 400 10px / 1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); white-space: nowrap; padding-left: 9px; will-change: transform; }
.space_wrap .space_label::before {content: ''; position: absolute; left: 0; top: 3px; width: 3px; height: 3px; background: var(--ink); }
.space_wrap .space_lines {position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.space_wrap .space_lines line {stroke: rgba(243, 242, 238, 0.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.space_wrap .space_you {position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; will-change: transform; }
.space_wrap .space_you_x {position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; }
.space_wrap .space_you_x::before, .space_wrap .space_you_x::after {content: ''; position: absolute; background: var(--ink); }
.space_wrap .space_you_x::before {left: 21.5px; top: 0; width: 1px; height: 44px; background: linear-gradient(var(--ink) 0 14px, transparent 14px 30px, var(--ink) 30px); }
.space_wrap .space_you_x::after {top: 21.5px; left: 0; height: 1px; width: 44px; background: linear-gradient(90deg, var(--ink) 0 14px, transparent 14px 30px, var(--ink) 30px); }
.space_wrap .space_you_tag {position: absolute; left: 28px; top: -30px; background: var(--ink); color: var(--bg); font: 400 10px / 1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 6px 3px; white-space: nowrap; }
.space_wrap .space_near {position: absolute; right: var(--gut); top: calc(var(--frame) + 96px); width: min(32vw, 440px); margin: 0; padding: 0; list-style: none; opacity: var(--nin, 0); pointer-events: none; }
.space_wrap .space_near li {position: relative; padding: 9px 0 10px 54px; border-top: 1px solid var(--hair); font: 400 13.5px / 1.35 var(--sans); color: var(--ink); opacity: var(--li, 1); }
.space_wrap .space_near li:last-child {border-bottom: 1px solid var(--hair); }
.space_wrap .space_near_s {position: absolute; left: 0; top: 11px; font: 400 11px var(--mono); color: var(--mute); font-variant-numeric: tabular-nums; }
.space_wrap .space_near_t {display: block; margin-top: 4px; font: 400 10px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.space_wrap .space_tip {position: absolute; left: 0; top: 0; margin: 0; max-width: 34ch; padding: 9px 11px 10px; background: var(--ink); color: var(--bg); font: 400 13px / 1.35 var(--sans); pointer-events: none; opacity: 0; transition: opacity 0.2s; will-change: transform; }
.space_wrap .space_tip.is-on {opacity: 1; }
.space_wrap .space_tip small {display: block; margin-top: 5px; font: 400 10px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.6; }
.space_wrap .space_cue {position: absolute; left: 50%; bottom: calc(var(--frame) + 88px); transform: translateX(-50%); margin: 0; font: 400 11px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); white-space: nowrap; opacity: var(--cue, 0); pointer-events: none; }

/* layers */
.space_wrap .space_lhead {position: absolute; left: var(--gut); top: calc(var(--frame) + 96px); width: min(30vw, 400px); opacity: var(--in, 1); pointer-events: none; }
.space_wrap .space_lnum {margin: 0; font: 200 clamp(90px, min(13vw, 22vh), 220px) / 1.04 var(--sans); letter-spacing: -0.07em; font-variant-numeric: tabular-nums; }
.space_wrap .space_lnum small {font-size: 0.28em; letter-spacing: -0.02em; color: var(--faint); margin-left: 0.1em; }
.space_wrap .space_lname {margin: 30px 0 0; font: 400 clamp(20px, 1.9vw, 30px) / 1.1 var(--sans); letter-spacing: -0.03em; }
.space_wrap .space_ltext {margin: 10px 0 0; font: 400 14.5px / 1.45 var(--sans); color: var(--mute); max-width: 36ch; min-height: 4.4em; }
.space_wrap .space_lstats {margin: 18px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font: 400 11px / 1.3 var(--mono); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.space_wrap .space_lstats dt {color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em; }
.space_wrap .space_lstats dd {margin: 0; color: var(--ink); }
.space_wrap .space_rail {position: absolute; right: var(--gut); top: calc(var(--frame) + 96px); bottom: calc(var(--frame) + 134px); width: 210px; margin: 0; padding: 0; list-style: none; overflow: hidden; display: flex; flex-direction: column; gap: 1px; opacity: var(--in, 1); }
.space_wrap .space_rail li {background: rgba(5, 5, 5, 0.72); display: flex; align-items: center; gap: 10px; padding: 5px 8px; font: 400 12px / 1.2 var(--mono); color: var(--mute); cursor: default; border: 1px solid transparent; flex: none; }
.space_wrap .space_rail li span:last-child {margin-left: auto; color: var(--faint); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.space_wrap .space_rail li:hover, .space_wrap .space_rail li.is-hot {background: var(--ink); color: var(--bg); }
.space_wrap .space_rail li:hover span:last-child, .space_wrap .space_rail li.is-hot span:last-child {color: rgba(5, 5, 5, 0.6); }
.space_wrap .space_note {position: absolute; left: var(--gut); bottom: calc(var(--frame) + 88px); margin: 0; max-width: 52ch; font: 400 11px / 1.5 var(--mono); color: var(--faint); opacity: var(--in, 1); }

/* attention */
.space_wrap .space_h.is-attn {font-size: clamp(34px, min(4.6vw, 7.6vh), 82px); }
.space_wrap .space_arcs {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; opacity: var(--in, 1); }
.space_wrap .space_heads {position: absolute; right: var(--gut); top: calc(var(--frame) + 96px); display: grid; grid-template-columns: repeat(12, var(--hs)); gap: 3px; --hs: clamp(22px, 2.3vw, 34px); opacity: var(--in, 1); }
.space_wrap .space_head_c {width: var(--hs); height: var(--hs); display: block; cursor: pointer; outline: 1px solid transparent; outline-offset: 1px; image-rendering: pixelated; }
.space_wrap .space_head_c.is-on {outline-color: var(--ink); }
.space_wrap .space_head_c.is-row {outline-color: var(--hair); }
.space_wrap .space_aread {position: absolute; left: var(--gut); bottom: calc(var(--frame) + 88px); margin: 0; max-width: 70ch; font: 400 12px / 1.5 var(--mono); color: var(--mute); }
.space_wrap .space_aread b {font-weight: 400; color: var(--ink); }

@media (max-width: 1100px) {
  .space_wrap .space_head, .space_wrap .space_ahead {width: calc(100vw - 2 * var(--gut)); }
  .space_wrap .space_near {top: auto; bottom: calc(var(--frame) + 84px); width: calc(100vw - 2 * var(--gut)); }
  .space_wrap .space_near li:nth-child(n+5) {display: none; }
  .space_wrap .space_near li {background: rgba(5, 5, 5, 0.78); }
  .space_wrap .space_heads {top: auto; bottom: calc(var(--frame) + 124px); left: var(--gut); right: auto; --hs: clamp(18px, calc((100vw - 2 * var(--gut) - 33px) / 12), 34px); }
  .space_wrap .space_rail {top: auto; bottom: calc(var(--frame) + 144px); height: 26vh; left: auto; width: 180px; }
  .space_wrap .space_lhead {width: calc(100vw - 2 * var(--gut)); }
}
@media (max-width: 767px) {
  .space_wrap .space_h {font-size: clamp(30px, 9vw, 44px); }
  .space_wrap .space_sub {font-size: 14px; margin-top: 12px; }
  .space_wrap .space_head, .space_wrap .space_ahead, .space_wrap .space_lhead {top: calc(var(--frame) + 84px); }
  .space_wrap .space_near li {padding-left: 46px; font-size: 12.5px; }
  .space_wrap .space_near li:nth-child(n+4) {display: none; }
  .space_wrap .space_cue {display: none; }
  .space_wrap .space_lnum {font-size: 84px; }
  .space_wrap .space_ltext {font-size: 13.5px; min-height: 0; }
  .space_wrap .space_lstats {display: none; }
  .space_wrap .space_rail {bottom: calc(var(--frame) + 134px); height: 22vh; width: 150px; }
  .space_wrap .space_note {display: none; }
  .space_wrap .space_aread {bottom: calc(var(--frame) + 84px); right: var(--gut); font-size: 11px; }
  .space_wrap .space_heads {bottom: calc(var(--frame) + 154px); }
}

.space_wrap .space_contain {position: relative; }