.space-page { position: relative; min-height: 100svh; overflow: hidden; background: #02050a; }
.space-stage { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 58% 46%, rgba(24,72,132,.18), transparent 33%), radial-gradient(circle at 82% 14%, rgba(80,38,126,.15), transparent 29%), #02050a; }
#space-canvas,.space-scanlines { position: absolute; inset: 0; width: 100%; height: 100%; }
#space-canvas { z-index: 1; display: block; outline: 0; cursor: crosshair; }
#space-canvas:focus-visible { box-shadow: inset 0 0 0 1px var(--neon); }
.space-scanlines { z-index: 2; background: linear-gradient(90deg,rgba(0,240,255,.035) 1px,transparent 1px),repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.014) 5px 6px); background-size: 7.5vw 100%,100% 6px; mask-image: linear-gradient(to bottom,transparent 8%,black 26%,black 85%,transparent); pointer-events: none; }
.space-identity,.space-preview,.space-telemetry,.space-console,.space-load,.space-fallback { position: absolute; z-index: 5; }
.space-identity { top: 152px; left: 4%; width: min(33vw,430px); pointer-events: none; }
.space-kicker { color: var(--cyan); font: 700 9px/1.3 var(--font-mono); letter-spacing: .18em; }
.space-identity h1 { margin-top: 18px; color: #f5f8f5; font-size: clamp(52px,6.2vw,88px); font-weight: 760; line-height: .9; letter-spacing: -.09em; text-shadow: 0 20px 50px rgba(0,0,0,.58); }
.space-role { margin-top: 17px; color: var(--neon); font: 700 clamp(14px,1.6vw,22px)/1 var(--font-mono); letter-spacing: .04em; text-shadow: 0 0 25px rgba(204,255,0,.2); }
.space-statement { max-width: 390px; margin-top: 22px; color: rgba(235,245,241,.72); font-size: clamp(15px,1.4vw,19px); line-height: 1.75; }
.space-primary-actions,.space-preview-actions,.space-console-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.space-primary-actions { margin-top: 29px; pointer-events: auto; }
.space-launch,.space-skip,.space-preview-actions button,.space-console-actions button,.space-touch button { min-height: 42px; padding: 9px 15px; color: var(--ink); background: rgba(5,12,18,.76); border: 1px solid rgba(0,240,255,.34); border-radius: 1px; font: 700 10px/1 var(--font-mono); letter-spacing: .06em; text-decoration: none; backdrop-filter: blur(13px); transition: color 160ms ease,border-color 160ms ease,box-shadow 160ms ease,transform 160ms ease; }
.space-launch,.space-preview-actions button:first-child { color: #07100b; background: var(--neon); border-color: var(--neon); box-shadow: 0 0 28px rgba(204,255,0,.19); }
.space-skip { display: inline-flex; align-items: center; }
.space-launch:hover,.space-skip:hover,.space-preview-actions button:hover,.space-console-actions button:hover,.space-touch button:hover { border-color: var(--neon); box-shadow: 0 0 24px rgba(204,255,0,.2); transform: translateY(-1px); }
.space-identity-meta { display: flex; gap: 16px; margin-top: 22px; color: rgba(217,234,235,.4); font: 600 8px/1.3 var(--font-mono); letter-spacing: .11em; }
.space-preview { top: 158px; right: 4%; width: min(24vw,330px); min-height: 380px; padding: 22px 22px 19px; background: linear-gradient(145deg,rgba(6,14,22,.84),rgba(8,17,27,.52)); border-top: 1px solid rgba(0,240,255,.5); border-right: 1px solid rgba(0,240,255,.16); border-bottom: 1px solid rgba(204,255,0,.2); backdrop-filter: blur(17px); clip-path: polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%); }
.space-preview::after { position: absolute; right: 0; bottom: 17px; width: 24px; height: 1px; background: var(--neon); content: ""; transform: rotate(-45deg); transform-origin: right; }
.space-preview-index { display: flex; align-items: baseline; gap: 6px; margin-top: 29px; color: var(--neon); font: 500 50px/.9 var(--font-mono); letter-spacing: -.09em; }
.space-preview-index small { color: rgba(229,239,235,.4); font-size: 12px; letter-spacing: 0; }
.space-preview-sector { margin-top: 16px; color: var(--cyan); font: 600 9px/1.4 var(--font-mono); letter-spacing: .11em; }
.space-preview h2 { margin-top: 6px; font-size: clamp(28px,2.7vw,38px); line-height: 1.05; letter-spacing: -.06em; }
#space-preview-copy { margin-top: 16px; color: rgba(228,239,237,.66); font-size: 12px; line-height: 1.75; }
.space-project-preview { padding: 0; margin: 18px 0 0; list-style: none; counter-reset: project; }
.space-project-preview li { display: flex; gap: 10px; align-items: center; padding: 6px 0; color: rgba(238,247,243,.75); border-top: 1px solid rgba(255,255,255,.08); font: 600 10px/1.4 var(--font-mono); counter-increment: project; }
.space-project-preview li::before { color: var(--neon); content: "0" counter(project); }
.space-preview-actions { margin-top: 21px; }
.space-preview-actions button:disabled { color: rgba(220,232,229,.28); background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); box-shadow: none; }
.space-planet-links { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.space-planet-links button { position: absolute; top: 0; left: 0; display: grid; grid-template-columns: 14px auto; gap: 1px 7px; align-items: center; padding: 6px 9px; color: rgba(239,248,246,.72); background: rgba(2,8,13,.56); border: 1px solid rgba(0,240,255,.15); border-radius: 1px; font: 600 9px/1.2 var(--font-mono); text-align: left; pointer-events: auto; backdrop-filter: blur(8px); transform-origin: left top; }
.space-planet-links button[aria-pressed="true"] { color: var(--neon); border-color: rgba(204,255,0,.72); box-shadow: 0 0 24px rgba(204,255,0,.16); }
.space-planet-marker { grid-row: 1/3; width: 8px; height: 8px; border: 1px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 9px rgba(0,240,255,.62); }
.space-planet-links button[aria-pressed="true"] .space-planet-marker { background: var(--neon); border-color: var(--neon); box-shadow: 0 0 12px rgba(204,255,0,.78); }
.space-planet-links small { color: rgba(214,232,231,.38); font-size: 7px; }
.space-telemetry { bottom: 56px; left: 4%; display: grid; grid-template-columns: repeat(2,minmax(110px,1fr)); gap: 8px 18px; padding: 12px 14px; color: rgba(205,226,226,.45); background: rgba(2,8,13,.42); border-left: 1px solid rgba(0,240,255,.35); font: 600 8px/1.2 var(--font-mono); letter-spacing: .1em; backdrop-filter: blur(8px); }
.space-telemetry strong { margin-left: 7px; color: var(--cyan); font-weight: 500; }
.space-console { right: 4%; bottom: 42px; width: min(54vw,740px); padding: 13px 14px; background: linear-gradient(90deg,rgba(3,9,15,.7),rgba(3,9,15,.36)); border-top: 1px solid rgba(204,255,0,.22); backdrop-filter: blur(10px); }
.space-console>p { color: rgba(231,241,238,.63); font: 500 10px/1.5 var(--font-mono); }
.space-console-actions { margin-top: 9px; }
.space-console-actions button { min-height: 31px; padding: 6px 9px; color: rgba(226,241,237,.72); font-size: 8px; }
kbd { color: var(--neon); font: inherit; }
.space-touch { display: none; }
.space-load,.space-fallback { z-index: 8; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.space-load { color: var(--cyan); font: 700 10px/1.5 var(--font-mono); letter-spacing: .12em; }
.space-fallback { width: min(88vw,420px); padding: 22px; color: var(--ink); background: rgba(4,12,18,.94); border: 1px solid var(--neon); text-align: center; }
.space-fallback p { margin-top: 8px; color: var(--muted); font-size: 13px; }
.space-stage[data-render="fallback"] .space-planet-links { top: 390px; right: 37%; bottom: auto; left: 38%; display: grid; grid-template-columns: repeat(2,minmax(120px,1fr)); gap: 8px; }
.space-stage[data-render="fallback"] .space-planet-links button { position: relative; width: 100%; transform: none!important; }
.space-stage[data-mode="pulse"] #space-canvas { filter: saturate(1.2) contrast(1.07); }
.space-stage[data-mode="orbit"] .space-preview { border-color: rgba(204,255,0,.66); box-shadow: -20px 22px 70px rgba(0,0,0,.3),0 0 34px rgba(204,255,0,.08); }
@media (max-width:980px) { .space-identity{width:42vw}.space-preview{width:30vw}.space-console{width:50vw} }
@media (max-width:600px) {
  .space-page,.space-stage{min-height:1160px;overflow:visible}
  #space-canvas{position:sticky;top:0;height:844px}.space-scanlines{height:844px}
  .space-identity{top:126px;right:16px;left:16px;width:auto}.space-identity h1{margin-top:12px;font-size:53px}.space-role{margin-top:12px;font-size:14px}.space-statement{margin-top:13px;font-size:13px;line-height:1.55}.space-primary-actions{margin-top:17px}
  .space-identity-meta,.space-telemetry,.space-console-actions{display:none}
  .space-planet-links{z-index:7;top:348px;right:16px;bottom:auto;left:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;pointer-events:auto}
  .space-planet-links button{position:relative;width:100%;min-height:42px;transform:none!important}
  .space-stage[data-render="fallback"] .space-planet-links{top:348px;right:16px;left:16px}
  .space-preview{z-index:6;top:486px;right:16px;left:16px;width:auto;min-height:0;padding:15px 16px}.space-preview-index{margin-top:8px;font-size:36px}.space-preview-sector{margin-top:9px}.space-preview h2{margin-top:3px;font-size:27px}#space-preview-copy{margin-top:9px;font-size:11px;line-height:1.55}.space-project-preview{margin-top:9px}.space-project-preview li{padding:2px 0}.space-preview-actions{margin-top:11px}.space-preview-actions button{min-height:36px;padding:7px 10px}
  .space-touch{position:absolute;z-index:7;top:842px;right:16px;left:16px;display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.space-touch button{background:rgba(5,13,20,.9)}
  .space-console{z-index:7;right:16px;bottom:82px;left:16px;width:auto}
  .space-load,.space-fallback{position:fixed}
}
@media (prefers-reduced-motion:reduce) { .space-launch,.space-skip,.space-preview-actions button,.space-console-actions button{transition:none}.space-stage[data-mode="pulse"] #space-canvas{filter:none} }