@font-face { font-family: Manrope; src: url('./fonts/manrope-regular.ttf') format('truetype'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: Manrope; src: url('./fonts/manrope-bold.ttf') format('truetype'); font-weight: 600 800; font-display: swap; }
:root { --reading: #c3cec7; --quiet: #9eaea4; }
body { font-family: Manrope, sans-serif; }
::selection { background: #b7ff45; color: #10180c; }
* { scrollbar-color: #64786b #101713; scrollbar-width: thin; }
.grain { display: none; }
.intro-title, .project-tab strong, .satellite-dialog h2 { text-wrap: balance; letter-spacing: -.03em; }
.intro-lead { color: var(--reading); }
.intro-title { font-weight: 700; }
.project-tab span, .project-tab.is-active span { color: var(--reading); }
.project-tab.is-active::after { display: none; }
.project-tab b { font-size: 0; width: 22px; height: 22px; }
.project-tab b::before { content: ''; position: absolute; width: 12px; height: 12px; right: 3px; top: 3px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.project-tab b::after { content: ''; position: absolute; width: 17px; height: 1.5px; top: 9px; right: 1px; background: currentColor; transform: rotate(-45deg); }
.project-tab:focus-visible { outline-color: var(--agent-accent); outline-offset: 7px; }
.nav-cta, .magnetic-cta { font-weight: 700; }
.magnetic-cta { box-shadow: none; }
.magnetic-cta:focus-visible, .nav-cta:focus-visible, .satellite-link:focus-visible { outline: 2px solid #eef5ef; outline-offset: 5px; }
.satellite-dialog { background: rgba(9,19,15,.94); border: 1px solid #627c6c; box-shadow: none; backdrop-filter: blur(32px); }
.satellite-dialog::backdrop { background: rgba(1,6,4,.62); backdrop-filter: blur(9px); }
.satellite-dialog h2 { font-size: clamp(26px,3vw,36px); line-height: 1.16; margin: 0 0 24px; }
.satellite-description { color: #d5dfd8; line-height: 1.65; }
.satellite-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; }
.satellite-close { min-width: 44px; min-height: 44px; color: #eef5ef; }
.world-footer, .cookie-note { color: #aabbb0; }
@media (min-width:981px) {
  .intro-title { font-size: clamp(30px,2.65vw,43px); line-height: 1.12; }
  .intro-lead { font-size: clamp(17px,1.28vw,20px); line-height: 1.55; }
  .project-console { isolation: isolate; }
  .project-console::before { content: ''; position: absolute; inset: -30px -20px -50px -40px; z-index: -1; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; background: radial-gradient(ellipse,#050c09e8 0%,#050c09a6 45%,transparent 74%); pointer-events: none; }
  .project-tab strong { font-size: clamp(21px,1.8vw,30px); line-height: 1.25; }
  .project-tab span { font-size: 15px; line-height: 1.5; }
  .project-tab:not(.is-active) { color: #d4ded8; }
  .kinetic-title { opacity: .8; }
}
@media (max-width:980px) {
  .intro-title { font-size: clamp(30px,7.8vw,44px); line-height: 1.14; max-width: 18ch; }
  .intro-lead { font-size: 17px; line-height: 1.65; }
  .magnetic-cta { min-height: 52px; margin-top: 24px; }
  .project-console { margin-top: 36px; }
  .project-console.has-highlight .project-tab:not(.is-active) { opacity: 1; }
  .project-tab { padding: 24px 32px 26px 0; }
  .project-tab strong { font-size: clamp(21px,5.6vw,27px); font-weight: 600; text-wrap: pretty; }
  .project-tab span { margin-top: 10px; font-size: 15px; line-height: 1.6; max-width: 36ch; }
  .project-tab b { top: 28px; color: var(--agent-accent); }
  .satellite-dialog { padding: 40px 22px 24px; max-height: calc(100dvh - 32px); }
  .satellite-description { font-size: 16px; }
  .satellite-dialog h2 { font-size: 27px; margin-bottom: 20px; }
  .world-footer { font-size: 11px; line-height: 1.7; }
}
@media (min-width:981px) and (max-height:680px) { .project-console { top: 12%; } }
.satellite-thrusters { display: none; }
.orbit-agent .agent-label, .reflection-plaque .agent-label {
  padding: 0 14px;
  height: 48px;
  place-content: center;
  text-align: center;
}
.orbit-agent.opens-left::before, .reflection-plaque.opens-left::before { left: calc(48px - var(--plaque-width)); clip-path: inset(0 0 0 calc(var(--plaque-width) - 48px) round 24px); }
.orbit-agent.opens-left::after, .reflection-plaque.opens-left::after { left: calc(49px - var(--plaque-width)); clip-path: inset(0 0 0 calc(var(--plaque-width) - 48px) round 23px); }
.orbit-agent.opens-left.is-expanded::before, .reflection-plaque.opens-left.is-expanded::before { clip-path: inset(0 0 0 0 round 24px); }
.orbit-agent.opens-left.is-expanded::after, .reflection-plaque.opens-left.is-expanded::after { clip-path: inset(0 0 0 0 round 23px); }
.orbit-agent.opens-left .agent-label, .reflection-plaque.opens-left .agent-label { left: auto; right: 48px; }
@media (max-width: 980px) {
  .orbit-agent .agent-label, .reflection-plaque .agent-label { max-width: calc(50vw - 36px); white-space: normal; }
  .orbit-agent { transition: opacity 200ms ease; }
  .orbit-agent.is-active .agent-core { box-shadow: 0 0 14px color-mix(in srgb, var(--agent-accent) 45%, transparent), inset 0 0 7px #ffffff24; border-color: #e8f5ff; }
  .orbit-agent .satellite-thrusters { display: block; position: absolute; left: 24px; top: 24px; width: 0; height: 0; pointer-events: none; z-index: 0; }
  .satellite-thrusters::before, .satellite-thrusters::after { content: ''; position: absolute; left: 20px; top: -13px; width: 19px; height: 5px; border-radius: 50%; background: linear-gradient(90deg, #efffff, #a6e6ff80 40%, transparent); transform-origin: left center; opacity: 0; }
  .satellite-thrusters::after { top: 8px; }
  .is-active .satellite-thrusters::before, .is-active .satellite-thrusters::after { animation: maneuver-pulse 8s linear infinite; }
  .is-active .satellite-thrusters::after { animation-delay: .12s; }
}
@keyframes maneuver-pulse {
  0%, 3%, 5%, 7%, 100% { opacity: 0; transform: scaleX(.55); }
  1%, 6% { opacity: .65; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .is-active .satellite-thrusters::before, .is-active .satellite-thrusters::after { animation: none; }
}
.satellite-dialog { padding: 0; overflow: hidden; border: 1px solid #536a5d; border-radius: 16px; background: rgba(8,19,14,.96); }
.satellite-dialog[open] { display: flex; flex-direction: column; }
.satellite-dialog h2 { flex: none; margin: 0; padding: 32px 64px 22px 28px; color: var(--dialog-accent,#eef5ef); font-size: clamp(26px,3vw,34px); }
.satellite-description { min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0 28px 24px; font-size: 16px; line-height: 1.7; }
.satellite-link { flex: none; display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 20px 28px; min-height: 64px; background: #182c21; color: var(--dialog-accent,#b7ff45); text-decoration: none; font-size: 16px; font-weight: 700; border-top: 1px solid #334b3d; }
.satellite-link::after { content: ''; flex: none; width: 10px; height: 10px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); margin-right: 4px; }
.satellite-link:hover { background: #233c2d; }
.satellite-close { top: 18px; right: 14px; border: 1px solid #50675a; border-radius: 50%; background: #14251c; font-size: 0; }
.satellite-close::before, .satellite-close::after { content: ''; position: absolute; width: 16px; height: 1.5px; background: #eef5ef; left: 13px; top: 21px; transform: rotate(45deg); }
.satellite-close::after { transform: rotate(-45deg); }
@media (max-width:980px) {
  .satellite-dialog { padding: 0; max-height: calc(100dvh - 40px); }
  .satellite-dialog h2 { padding: 28px 62px 20px 22px; font-size: 26px; }
  .satellite-description { padding: 0 22px 22px; }
  .satellite-link { padding: 18px 22px; font-size: 15px; }
}
.carousel-controls { display: none; }
.orbit-control { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
.orbit-control[hidden] { display: none; }
.orbit-control span { width: 12px; height: 13px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; opacity: .65; }
.orbit-control[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid currentColor; }
.orbit-control:focus-visible { outline: 1px solid #b7ff45; outline-offset: -4px; }
.satellite-dialog::backdrop { transition: opacity 280ms ease; }
.satellite-dialog.is-closing::backdrop { opacity: 0; }
@media (max-width:980px) {
  .hero-stage .intro-block { order: 2; }
  .project-console { order: 1; margin: 16px auto 32px; height: calc(var(--mobile-slide-height, 210px) + 30px); overflow: clip; touch-action: pan-y pinch-zoom; scroll-margin-top: 90px; }
  .project-console .project-tab { position: absolute; top: 0; left: 44px; width: calc(100% - 88px); margin: 0; border: 0; padding: 12px 4px 20px; transform: translateX(calc(var(--slot) * 160%)); opacity: 0; transition: transform .4s cubic-bezier(.22,.8,.2,1), opacity .25s; }
  .project-console .project-tab::after { display: none; }
  .project-console .project-tab b { display: none; }
  .project-console .project-tab.is-active { opacity: 1; }
  .project-console.has-highlight .project-tab:not(.is-active) { opacity: 0; }
  .project-console .project-tab strong { color: var(--agent-accent); }
  .carousel-controls { display: block; position: absolute; inset: 0; pointer-events: none; border: 0; padding: 0; }
  .carousel-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid #63776b; border-radius: 50%; cursor: pointer; }
  .carousel-controls button { position: absolute; top: calc((100% - 74px) / 2); pointer-events: auto; border: 0; }
  .carousel-controls [data-carousel-prev] { left: 0; }
  .carousel-controls [data-carousel-next] { right: 0; }
  .carousel-controls button:active { background: #263a2d; }
  .carousel-controls button:focus-visible { outline: 2px solid #b7ff45; outline-offset: 2px; }
  .carousel-controls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .carousel-position { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--reading); font-variant-numeric: tabular-nums; }
}
@media (prefers-reduced-motion:reduce) { .project-console .project-tab { transition: none; } }