:root {
  --canvas: #030711;
  --surface: #071426;
  --surface-2: #0a1b31;
  --ink: #f5f8fc;
  --soft: #8da8bf;
  --line: rgba(71, 143, 194, .24);
  --blue: #27a9ff;
  --orange: #ff7618;
  --yellow: #ffd15a;
  --green: #7ef480;
  --red: #ff5d67;
  --story-p: 0;
  --scene-p: 0;
}
* { box-sizing: border-box; }
html { background: var(--canvas); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #030711; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; z-index: 999; top: 10px; left: 10px; transform: translateY(-160%); padding: 9px 12px; background: white; color: black; }
.skip-link:focus { transform: none; }
.space-field, .space-field i { position: fixed; inset: 0; pointer-events: none; }
.space-field { z-index: 0; background: radial-gradient(circle at 12% 14%, rgba(255,118,24,.12), transparent 24rem), radial-gradient(circle at 86% 18%, rgba(39,169,255,.13), transparent 30rem), #030711; }
.space-field::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.5px); background-size: 92px 92px; }
.space-field i:nth-child(1) { background: radial-gradient(circle at calc(50% + var(--mx, 0px)) calc(50% + var(--my, 0px)), rgba(39,169,255,.11), transparent 36rem); }
.space-field i:nth-child(2) { opacity: .22; background-image: linear-gradient(rgba(39,169,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(39,169,255,.13) 1px, transparent 1px); background-size: 80px 80px; transform: perspective(800px) rotateX(65deg) translateY(58%); transform-origin: bottom; }
.story { position: relative; z-index: 1; min-height: 1080vh; }
.story-spacer { height: 1080vh; }
.mission-console { position: fixed; inset: 16px; max-width: 1600px; margin: auto; height: calc(100vh - 32px); overflow: hidden; display: grid; grid-template-rows: 62px 1fr 30px; background: rgba(4, 12, 25, .96); border: 1px solid rgba(63, 141, 198, .33); border-radius: 18px; box-shadow: 0 40px 120px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.018); backdrop-filter: blur(16px); }
.console-topbar { display: flex; align-items: center; gap: 18px; padding: 0 18px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(255,118,24,.04), rgba(39,169,255,.04)); }
.console-brand { display: flex; align-items: center; gap: 11px; min-width: 255px; }
.console-brand img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,118,24,.45); }
.console-brand strong, .console-brand span { display:block; line-height: 1.05; }
.console-brand strong { letter-spacing: .14em; font-size: .85rem; }
.console-brand span { margin-top: 5px; color: var(--orange); font-size: .58rem; letter-spacing: .22em; }
.console-status { margin-left: auto; display: flex; align-items:center; gap: 8px; color: var(--soft); font: 700 .68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.console-status em { font-style: normal; color: var(--blue); padding-left: 8px; border-left: 1px solid var(--line); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }
.github-link { color: var(--ink); text-decoration: none; border: 1px solid var(--line); padding: 8px 11px; border-radius: 7px; font: 800 .66rem/1 ui-monospace, monospace; letter-spacing: .1em; }
.console-body { min-height: 0; display: grid; grid-template-columns: 190px 1fr; }
.console-nav { min-height: 0; padding: 18px 12px 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; background: rgba(4, 14, 28, .76); }
.nav-identity { padding: 0 9px 18px; }
.nav-identity span, .nav-identity small { display:block; color: var(--soft); font: 650 .61rem/1.45 ui-monospace, monospace; }
.nav-identity strong { display:block; margin: 9px 0; font-size: 1.05rem; line-height: .96; letter-spacing: -.02em; }
.console-nav nav { display:grid; gap: 3px; }
.console-nav button { appearance:none; border:0; background:transparent; color:var(--soft); min-height: 45px; padding: 0 8px; display:grid; grid-template-columns: 30px 1fr; align-items:center; text-align:left; cursor:pointer; border-left: 2px solid transparent; }
.console-nav button span { font: 650 .58rem/1 ui-monospace, monospace; }
.console-nav button b { font-size: .69rem; letter-spacing: .11em; }
.console-nav button.is-active { color: var(--ink); border-left-color: var(--orange); background: linear-gradient(90deg, rgba(255,118,24,.11), transparent); }
.console-nav button.is-active span { color: var(--orange); }
.nav-progress { margin-top:auto; padding: 14px 9px 4px; border-top:1px solid var(--line); }
.nav-progress > span { font: 800 1.65rem/1 ui-monospace, monospace; color:var(--orange); }
.nav-progress div { height:2px; margin:10px 0; background:rgba(255,255,255,.07); }
.nav-progress i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--orange),var(--blue)); }
.nav-progress small { color:var(--soft); font:600 .54rem/1 ui-monospace, monospace; letter-spacing:.12em; }
.console-surface { position: relative; min-width:0; min-height:0; overflow:hidden; background: radial-gradient(circle at 75% 18%, rgba(39,169,255,.075), transparent 30rem), #061224; }
.scene { position:absolute; inset:0; padding: clamp(22px, 3.5vw, 56px); opacity:0; pointer-events:none; transform: translateY(18px) scale(.995); transition: opacity .18s linear; overflow:hidden; }
.scene.is-active { opacity:1; pointer-events:auto; }
.console-label { margin:0 0 14px; color:var(--blue); font: 800 .65rem/1 ui-monospace, monospace; letter-spacing:.16em; }
.scene h1, .scene h2, .scene h3 { margin:0; line-height:.96; letter-spacing:-.045em; text-wrap:balance; }
.scene h1 { font-size:clamp(2.5rem,5.8vw,6rem); }
.scene h2 { font-size:clamp(2.4rem,5vw,5.3rem); }
.scene p { color:#b2c4d3; }
.identity-banner { height: min(42vh, 360px); border:1px solid rgba(255,118,24,.34); border-radius: 14px; overflow:hidden; transform-origin:center; will-change:transform,opacity; }
.identity-banner img { width:100%; height:100%; object-fit:cover; }
.identity-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:24px; margin-top:24px; }
.identity-copy p:last-child { max-width: 760px; font-size:clamp(.95rem,1.4vw,1.15rem); }
.identity-readout { display:grid; align-content:start; gap:9px; }
.identity-readout span { display:grid; grid-template-columns:80px 1fr; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font:650 .67rem/1.3 ui-monospace, monospace; opacity:.15; transform:translateX(22px); }
.identity-readout b { color:var(--orange); }
.identity-readout em { color:#cfe2f2; font-style:normal; }
.terminal-head { display:flex; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--line); color:var(--soft); font:700 .66rem/1 ui-monospace, monospace; letter-spacing:.12em; }
.profile-layout { display:grid; grid-template-columns:1fr .9fr; gap:clamp(24px,6vw,90px); height:calc(100% - 30px); align-items:center; }
.profile-terminal { padding:20px; border:1px solid rgba(39,169,255,.28); background:rgba(2,9,19,.66); border-radius:12px; }
.prompt { color:var(--yellow)!important; font:700 .76rem/1.4 ui-monospace, monospace; }
.profile-terminal dl { margin:20px 0 0; display:grid; gap:11px; }
.profile-terminal dl div { display:grid; grid-template-columns:130px 1fr; gap:14px; opacity:0; transform:translateX(-14px); }
.profile-terminal dt, .profile-terminal dd { font:650 .72rem/1.4 ui-monospace, monospace; }
.profile-terminal dt { color:var(--orange); }
.profile-terminal dd { margin:0; color:#dceaf4; }
.profile-manifesto h2 { font-size:clamp(2.6rem,5vw,5rem); }
.profile-manifesto h2 span { color:var(--orange); }
.profile-manifesto p:last-child { max-width:600px; font-size:1.04rem; }
.arsenal-heading { display:flex; justify-content:space-between; gap:30px; align-items:end; }
.arsenal-heading h2 { font-size:clamp(2.8rem,5vw,5.4rem); }
.arsenal-heading > p { max-width:440px; margin:0; font-size:.9rem; }
.arsenal-window { position:absolute; left:clamp(22px,3.5vw,56px); right:0; top:42%; overflow:hidden; }
.arsenal-rail { display:flex; gap:14px; width:max-content; will-change:transform; }
.arsenal-rail article { width:230px; height:190px; flex:none; padding:16px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid rgba(39,169,255,.28); border-radius:12px; background:linear-gradient(145deg,rgba(39,169,255,.08),rgba(255,118,24,.025)); }
.arsenal-rail article:nth-child(3n+1) { border-color:rgba(255,118,24,.38); }
.arsenal-rail article span { margin-bottom:auto; color:var(--soft); font:650 .62rem/1 ui-monospace, monospace; }
.arsenal-rail article b { font-size:1.22rem; letter-spacing:.04em; }
.arsenal-rail article small { margin-top:5px; color:var(--blue); font:600 .64rem/1.2 ui-monospace, monospace; }
.arsenal-counts { position:absolute; left:clamp(22px,3.5vw,56px); right:clamp(22px,3.5vw,56px); bottom:26px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.arsenal-counts span { padding-top:14px; }
.arsenal-counts b { display:block; font:800 1.65rem/1 ui-monospace, monospace; color:var(--orange); }
.arsenal-counts small { color:var(--soft); font:600 .58rem/1 ui-monospace, monospace; letter-spacing:.1em; }
.scene-doctrine { display:grid; place-items:center; text-align:center; }
.doctrine-quiet { max-width:950px; transform:scale(calc(.94 + var(--scene-p) * .06)); }
.doctrine-quiet h2 span { color:var(--orange); }
.doctrine-quiet > p:last-child { opacity:calc(.2 + var(--scene-p) * .8); }
.doctrine-lines { position:absolute; inset:auto 4% 8%; display:flex; justify-content:space-between; gap:8px; }
.doctrine-lines span { color:var(--soft); font:700 clamp(.52rem,.9vw,.72rem)/1 ui-monospace, monospace; letter-spacing:.1em; opacity:.15; }
.scene-missions { display:grid; grid-template-columns:.72fr 1.28fr; gap:30px; align-items:center; }
.missions-copy { position:relative; z-index:4; }
.missions-copy h2 { font-size:clamp(2.8rem,5.4vw,5.8rem); }
.mission-detail { margin-top:30px; padding:18px 0 0; border-top:1px solid var(--line); max-width:470px; }
.mission-detail > span { color:var(--orange); font:800 .66rem/1 ui-monospace, monospace; letter-spacing:.12em; }
.mission-detail h3 { margin-top:10px; font-size:clamp(1.4rem,2.4vw,2.2rem); }
.mission-detail p { margin-bottom:10px; }
.mission-detail small, .mission-detail b { display:block; font:700 .62rem/1.35 ui-monospace, monospace; letter-spacing:.08em; }
.mission-detail small { color:var(--blue); }
.mission-detail b { margin-top:7px; color:var(--green); }
.constellation { position:relative; width:min(66vh,650px); aspect-ratio:1; margin:auto; outline:none; transform:perspective(1000px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)); transition:transform .16s ease-out; }
.orbit { position:absolute; border-radius:50%; border:1px solid rgba(39,169,255,.24); left:50%; top:50%; translate:-50% -50%; }
.orbit-one { width:78%; height:78%; }
.orbit-two { width:52%; height:52%; border-color:rgba(255,118,24,.27); }
.constellation-core { position:absolute; left:50%; top:50%; translate:-50% -50%; width:30%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:#020811; border:1px solid rgba(255,118,24,.5); box-shadow:0 0 calc(30px + var(--dock,0) * 70px) rgba(255,118,24,calc(.15 + var(--dock,0)*.22)); z-index:2; }
.constellation-core img { width:78%; aspect-ratio:1; border-radius:50%; object-fit:cover; }
.constellation-core span { position:absolute; top:102%; color:var(--soft); font:700 .58rem/1 ui-monospace, monospace; letter-spacing:.12em; white-space:nowrap; }
.project-node { position:absolute; width:88px; height:88px; border-radius:50%; border:1px solid rgba(39,169,255,.56); background:#07162b; color:var(--ink); display:grid; place-items:center; align-content:center; gap:3px; cursor:pointer; z-index:3; transform:translate(-50%,-50%); transition:border-color .15s, box-shadow .15s; }
.project-node b { color:var(--orange); font:800 .62rem/1 ui-monospace, monospace; }
.project-node span { font:750 .58rem/1 ui-monospace, monospace; letter-spacing:.06em; }
.project-node.is-selected { border-color:var(--orange); box-shadow:0 0 24px rgba(255,118,24,.25); }
.dock-line { position:absolute; left:50%; top:50%; width:24%; height:1px; transform-origin:left center; background:linear-gradient(90deg,var(--orange),transparent); opacity:var(--dock,0); }
.contact-grid { height:calc(100% - 40px); display:grid; grid-template-columns:1fr .9fr; gap:clamp(28px,7vw,100px); align-items:center; }
.contact-copy h2 { font-size:clamp(2.7rem,5vw,5.2rem); }
.contact-copy p { max-width:680px; }
.service-lines { display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; }
.service-lines span { padding:8px 10px; border:1px solid var(--line); border-radius:5px; color:var(--blue); font:700 .6rem/1 ui-monospace, monospace; letter-spacing:.08em; opacity:0; transform:translateY(12px); }
.command-form { padding:20px; border:1px solid rgba(255,118,24,.34); background:rgba(2,8,17,.78); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.25); opacity:.18; transform:translateY(28px) scale(.97); }
.command-form label { color:var(--green); font:800 .68rem/1 ui-monospace, monospace; }
.command-form > div { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; margin-top:14px; border-bottom:1px solid var(--line); }
.command-form > div > span { color:var(--orange); font-family:ui-monospace, monospace; }
.command-form input { min-width:0; padding:13px 0; border:0; outline:0; background:transparent; color:var(--ink); font:650 .82rem/1 ui-monospace, monospace; }
.command-form button { border:1px solid var(--line); border-radius:5px; padding:7px 10px; background:rgba(39,169,255,.08); color:var(--ink); cursor:pointer; font:750 .61rem/1 ui-monospace, monospace; }
.command-form p, .command-form output { font:600 .62rem/1.45 ui-monospace, monospace; }
.command-form p { color:var(--soft); }
.command-form output { display:block; min-height:42px; padding:10px; background:rgba(255,255,255,.025); color:#dbe8f2; }
.console-footer { position:absolute; left:clamp(22px,3.5vw,56px); right:clamp(22px,3.5vw,56px); bottom:17px; display:flex; justify-content:space-between; gap:16px; color:var(--soft); font:600 .55rem/1 ui-monospace, monospace; letter-spacing:.08em; }
.console-bottom { display:flex; justify-content:space-between; align-items:center; padding:0 14px; border-top:1px solid var(--line); background:#030b17; color:var(--soft); font:650 .56rem/1 ui-monospace, monospace; letter-spacing:.1em; }
@media (max-width: 900px) {
  .mission-console { inset:8px; height:calc(100vh - 16px); grid-template-rows:54px 1fr 28px; }
  .console-brand { min-width:unset; }
  .console-brand span, .console-status span { display:none; }
  .console-status { margin-left:auto; }
  .console-body { grid-template-columns:1fr; }
  .console-nav { position:absolute; z-index:20; left:8px; right:8px; bottom:34px; height:45px; padding:0; border:1px solid var(--line); border-radius:9px; background:rgba(3,11,23,.92); display:block; }
  .nav-identity, .nav-progress { display:none; }
  .console-nav nav { height:100%; display:grid; grid-template-columns:repeat(6,1fr); }
  .console-nav button { min-height:0; padding:0; grid-template-columns:1fr; text-align:center; border-left:0; border-bottom:2px solid transparent; }
  .console-nav button span { display:none; }
  .console-nav button b { font-size:.48rem; }
  .console-nav button.is-active { border-bottom-color:var(--orange); background:rgba(255,118,24,.08); }
  .scene { padding:22px 18px 82px; }
  .identity-banner { height:31vh; }
  .identity-grid, .profile-layout, .scene-missions, .contact-grid { grid-template-columns:1fr; }
  .identity-readout { display:none; }
  .profile-layout { align-content:center; gap:24px; }
  .profile-manifesto { order:-1; }
  .profile-terminal dl { gap:7px; }
  .profile-terminal dl div { grid-template-columns:96px 1fr; }
  .arsenal-heading > p { display:none; }
  .arsenal-window { top:35%; left:18px; }
  .arsenal-rail article { width:180px; height:160px; }
  .arsenal-counts { left:18px; right:18px; bottom:74px; }
  .doctrine-lines { bottom:80px; flex-wrap:wrap; justify-content:center; }
  .scene-missions { align-content:center; }
  .missions-copy { z-index:5; pointer-events:none; }
  .mission-detail { max-width:100%; }
  .constellation { width:min(48vh,390px); margin-top:-20px; }
  .project-node { width:66px; height:66px; }
  .contact-grid { align-content:center; }
  .console-footer { bottom:70px; left:18px; right:18px; display:block; }
  .console-footer span:last-child { display:none; }
}
@media (max-width: 560px) {
  .console-topbar { padding:0 10px; }
  .console-brand img { width:34px; height:34px; }
  .console-brand strong { font-size:.69rem; }
  .github-link { font-size:.53rem; padding:7px 8px; }
  .console-status em { display:none; }
  .identity-banner { height:26vh; }
  .scene h1 { font-size:clamp(2rem,10vw,3rem); }
  .scene h2 { font-size:clamp(2rem,10vw,3.2rem); }
  .profile-terminal { padding:13px; }
  .profile-terminal dl div { grid-template-columns:1fr; gap:1px; }
  .profile-terminal dd { margin-bottom:4px; }
  .arsenal-counts small { font-size:.45rem; }
  .arsenal-counts b { font-size:1.25rem; }
  .constellation { width:min(42vh,320px); }
  .project-node { width:58px; height:58px; }
  .project-node span { font-size:.48rem; }
  .service-lines span { font-size:.49rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:.01ms!important; animation-duration:.01ms!important; }
  .scene { transform:none!important; }
  .constellation { transform:none!important; }
}