/* Orbit / midnight. Monochrome surfaces, controlled light, physical motion. */
:root {
  --ink: #050506;
  --paper: #e7e7e9;
  --paper-dark: #bcbcc3;
  --muted: #92929b;
  --blue: #c6c6ce;
  --lime: #e7e7e9;
  --line-dark: rgb(255 255 255 / 12%);
  --line-light: rgb(255 255 255 / 12%);
  color-scheme: dark;
}
html, body { background: #050506; }
::selection { color: #050506; background: #d6d6dc; }
.header { background: rgb(5 5 6 / 94%); border-color: rgb(255 255 255 / 9%); }
.brand img { filter: grayscale(1); }
.header nav a { color: #aaaab2; }
.header-cta { border-color: #35353b; background: #111113; }
.hero { min-height: 690px; background: #050506; isolation: isolate; }
.hero::before, .arrival::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image: radial-gradient(circle at 9% 23%, #ffffff36 0 1px, transparent 1.5px), radial-gradient(circle at 76% 18%, #ffffff57 0 1px, transparent 1.5px), radial-gradient(circle at 56% 73%, #ffffff36 0 1px, transparent 1.5px), radial-gradient(circle at 85% 67%, #ffffff24 0 1px, transparent 1.5px), radial-gradient(circle at 36% 13%, #ffffff2c 0 1px, transparent 1.5px), radial-gradient(circle at 18% 81%, #ffffff40 0 1px, transparent 1.5px);
  animation: night-stars 9s ease-in-out infinite alternate;
}
.hero-lines { opacity: .3; }
.hero-copy { padding-top: 68px; padding-bottom: 70px; }
h1 { font-size: clamp(64px, 6.05vw, 88px); font-weight: 490; letter-spacing: -.07em; line-height: 1.02; }
h1 em { color: #9b9ba6; }
#hero-title:focus { outline: none; }
.hero-copy > .eyebrow, .closing-top > .eyebrow { color: #a2a2ad; }
.hero-description { color: #93939d; }
.hero-count, .hero-bottom, .scene-tag, .scene-control, .collection-controls > .mono { color: #85858f; }
.hero-tools, .scroll-cue, .drag-icon, .scene-coordinates b { color: #bcbcc5; }
.hero-tools i { color: #53535d; }
.hero-bottom { border-color: #202024; }
.status-dot { box-shadow: 0 0 10px #ffffff35; }
.scene-mount { min-width: 0; align-self: center; }
.scene-wrap { height: 595px; }
.scene-halo { background: radial-gradient(ellipse, rgb(178 178 196 / 6%), rgb(79 79 89 / 2%) 40%, transparent 67%); }
.fallback-core { background: radial-gradient(circle at 31% 26%, #e1e1e9 0, #898995 10%, #494952 27%, #202025 53%, #09090c 78%, #030304 100%); box-shadow: inset -14px -12px 20px #030304, inset 2px 1px 7px #e5e5ed70, 5px 42px 50px #0009; }
.fallback-ring { border-color: #676770; border-top-color: #dbdbe2; border-left-color: #b6b6c0; border-right-color: #373740; border-bottom-color: #323239; box-shadow: 0 1px 0 #e1e1e8, inset 1px 0 0 #e1e1e8; }
.ticker, .collection-switch, .closing-word { display: none !important; }
.button { position: relative; overflow: hidden; border: 1px solid transparent; border-radius: 2px; }
.button-lime, #enter-orbit { background: #e7e7e9; color: #09090b; }
.button::after { content: ""; position: absolute; inset: -30% auto -30% -100%; width: 45%; transform: skewX(-22deg); background: linear-gradient(90deg, transparent, #ffffff85, transparent); transition: left .85s var(--ease); pointer-events: none; }
.collection, .faq { color: #e7e7e9; background: #0b0b0d; color-scheme: dark; border-block: 1px solid #1d1d22; }
.collection { padding-top: 76px; padding-bottom: 60px; }
.section-top { color: #8f8f99; }
h2, .faq-heading h2 { font-size: clamp(43px, 4.15vw, 60px); font-weight: 480; line-height: 1.04; letter-spacing: -.06em; }
.collection-heading { margin-block: 44px 45px; }
.collection-heading h2 span { color: #858590; }
.collection-heading p, .tool-info p, .faq-heading > p, .faq-answer, .flow-copy p, .step p { color: #92929e; }
.collection-controls { justify-content: space-between; margin-bottom: 22px; }
.tool-list, .tool-row { border-color: #292930; }
.tool-row { min-height: 145px; }
.tool-row::before { background: radial-gradient(ellipse 350px 180px at var(--pointer-x, 50%) var(--pointer-y, 50%), #ffffff09, transparent 85%), linear-gradient(90deg, #ffffff02, #ffffff04 46%, #ffffff02); }
.tool-row::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 24%; background: linear-gradient(90deg, transparent, #c4c4d1, transparent); opacity: 0; pointer-events: none; transform: translateX(-40%); }
.tool-number, .tool-file .mono, .tool-file .filename { color: #83838f; }
.tool-info h3 { font-weight: 480; }
.tool-info h3 small { color: #a9a9b4; border-color: #393941; }
.tool-type { color: #9898a4; border-color: #33333c; background: #101014; }
.tool-symbol { filter: drop-shadow(0 10px 10px #0006); }
.symbol-multi i { border-color: #c3c3ce; box-shadow: inset 1px 1px #ffffff30, 1px 1px #ffffff25; }
.symbol-multi i:nth-child(2) { border-color: #686874; }
.symbol-multi i:nth-child(3) { border-color: #92929f; }
.symbol-jjs i { background: linear-gradient(115deg, #e0e0e7, #73737f 47%, #b1b1be); }
.symbol-jjs i:nth-child(2) { background: linear-gradient(115deg, #a6a6b2, #454550 65%, #767683); }
.symbol-jjs i:nth-child(3) { background: linear-gradient(115deg, #838391, #373741); }
.symbol-solara i { border-color: #c1c1cd #7a7a87 #8e8e9b; box-shadow: 0 1px #ffffff3a; }
.symbol-solara i:nth-child(2) { border-color: #63636f #92929f #63636f; }
.symbol-xeno i { background: linear-gradient(160deg, #c9c9d5, #656572); }
.symbol-xeno i:nth-child(2) { background: linear-gradient(100deg, #e3e3ea, #9595a1 35%, #484853); }
.download-button { border-color: #3b3b44; background: #111115; border-radius: 2px; color: #dedee4; }
.download-button.is-downloading { color: #080809; background: #d0d0d8; border-color: #d0d0d8; }
.collection-note { color: #868690; }
.collection-note b { color: #b2b2bc; }
.dark-dot { background: #aaaab7; }
.flow { background: #050506; }
.flow .section-top, .step-index, .flow-foot { color: #878792; }
.flow-copy h2 { font-size: clamp(42px, 4vw, 57px); }
.flow-copy h2 em { color: #aaaab5; }
.text-link { color: #d2d2da; border-color: #53535e; }
.step-mark i { border-color: #777785; }
.step-mark i:nth-child(2) { border-color: #b6b6c4; }
.mark-target i:nth-child(2) { background: #aaaab6; }
.mark-arrow { color: #c3c3cd; }
.flow-path { background: #303039; overflow: visible; }
.flow-path i { background: #858593; }
.flow-path i:nth-child(2) { background: #c8c8d4; box-shadow: 0 0 0 4px #ffffff07; animation-name: night-pulse; }
.faq-plus::before, .faq-plus::after { background: #aaaab8; }
.faq-items summary { color: #cacad3; }
.closing { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 37px; padding-bottom: 30px; background: #050506; }
.night-closing-copy > .eyebrow { display: block; color: #777780; margin-bottom: 14px; }
.closing-top { min-height: 78px; }
.night-closing-copy h2 { font-size: clamp(26px, 2.7vw, 38px); letter-spacing: -.045em; }
.night-closing-copy p { color: #888893; font-size: 12px; margin-top: 10px; }
.footer-line { margin-top: 28px; padding-top: 19px; color: #72727e; }
.footer { color: #858591; background: #050506; min-height: 74px; }
.footer > a { color: #b6b6c2; }
.scroll-progress { height: 1px; background: #b7b7c4; opacity: .6; }
.download-status { background: #e0e0e6; color: #101014; border: 1px solid #ffffff; border-radius: 3px; }

/* The same live 3D scene moves from this entrance into the hero. */
body.arrival-open { overflow: hidden; }
.arrival { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; color: #e7e7e9; background: #050506; isolation: isolate; }
.arrival[open] { display: grid; grid-template-rows: 78px minmax(230px, 1fr) auto 62px; }
.arrival::backdrop { background: #050506; }
.arrival-header { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); border-bottom: 1px solid #ffffff0a; z-index: 3; }
.arrival-header .brand { font-size: 27px; }
#arrival-motion { display: inline-flex; align-items: center; gap: 12px; padding: 12px 0 12px 15px; min-height: 44px; color: #92929e; border: 0; background: transparent; font: 9px/1.5 Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.arrival-orbit-code { position: absolute; top: 112px; left: var(--gutter); color: #656572; font: 9px/1.6 Consolas, monospace; letter-spacing: .1em; z-index: 3; }
.arrival-planet { grid-row: 2; position: relative; width: min(750px, 94vw); height: 100%; min-height: 0; max-height: 570px; align-self: center; justify-self: center; }
.arrival .scene-wrap { width: 100%; height: 100%; min-height: 230px; margin: 0; animation: arrival-planet-enter 1.6s var(--ease) both; }
.arrival .scene-tag, .arrival .scene-control { display: none; }
.arrival .scene-halo { inset: -10%; background: radial-gradient(ellipse, #a0a0b210, transparent 58%); }
.arrival-copy { position: relative; z-index: 4; text-align: center; padding: 6px 24px 36px; animation: intro-enter 1s .2s var(--ease) both; }
.arrival-copy .eyebrow { justify-content: center; color: #7f7f8e; font-size: 9px; letter-spacing: .16em; margin-bottom: 17px; }
.arrival-copy h2 { font-size: clamp(30px, 3vw, 43px); letter-spacing: -.055em; font-weight: 440; line-height: 1.15; }
.arrival-copy > p:not(.eyebrow) { color: #858592; font-size: 12px; line-height: 1.7; margin-top: 12px; }
#enter-orbit { min-width: 186px; min-height: 51px; margin-top: 25px; padding-inline: 21px; gap: 40px; cursor: pointer; }
#enter-orbit:focus-visible { outline: 1px solid #777780; outline-offset: 6px; }
.arrival-footer { display: flex; justify-content: space-between; align-items: center; margin-inline: var(--gutter); border-top: 1px solid #ffffff12; color: #646471; font: 9px/1.5 Consolas, monospace; letter-spacing: .055em; }
.arrival.is-leaving { animation: arrival-exit 1s cubic-bezier(.6, 0, .2, 1) both; pointer-events: none; }
.arrival.is-leaving .arrival-planet { animation: departure-planet 1s cubic-bezier(.6, 0, .2, 1) both; }
.arrival.is-leaving .arrival-copy, .arrival.is-leaving .arrival-header, .arrival.is-leaving .arrival-footer, .arrival.is-leaving .arrival-orbit-code { transition: opacity .3s ease, transform .5s ease; opacity: 0; transform: translateY(-12px); }
body.site-entered .hero-copy > .eyebrow { animation: intro-enter .95s .12s var(--ease) both; }
body.site-entered .hero-copy .title-line > span { animation: title-enter 1.05s .17s var(--ease) both; }
body.site-entered .hero-copy .title-line:nth-child(2) > span { animation-delay: .27s; }
body.site-entered .hero-description { animation: intro-enter 1s .37s var(--ease) both; }
body.site-entered .hero-actions { animation: intro-enter 1s .47s var(--ease) both; }
body.site-entered .scene-mount .scene-wrap { animation: scene-enter 1.3s .12s var(--ease) both; }
body.motion-ready .tool-row { transition-duration: .9s; }
body.motion-ready .tool-row:nth-child(2) { transition-delay: .07s; }
body.motion-ready .tool-row:nth-child(3) { transition-delay: .14s; }
body.motion-ready .tool-row:nth-child(4) { transition-delay: .21s; }
body.motion-ready .tool-row.is-visible .tool-symbol { animation: symbol-drift 6s ease-in-out infinite; }
body.motion-ready .tool-row:nth-child(2) .tool-symbol { animation-delay: -2s; }
body.motion-ready .tool-row:nth-child(3) .tool-symbol { animation-delay: -4s; }
body.motion-ready .tool-row:nth-child(4) .tool-symbol { animation-delay: -1s; }
@media (hover: hover) and (pointer: fine) {
  .header nav a:hover { color: #eeeeF1; }
  .header-cta:hover { color: #fff; border-color: #747480; background: #19191e; }
  .button-lime:hover, #enter-orbit:hover { background: #fff; color: #050506; box-shadow: 0 0 30px #ffffff12; }
  .button:hover::after { left: 140%; }
  .download-button:hover { background: #e1e1e7; color: #09090d; border-color: #e1e1e7; }
  .faq-items summary:hover { color: #fff; }
  .tool-row:hover::after, .tool-row:focus-within::after { animation: row-scan 1.8s var(--ease) both; }
  .text-link:hover { border-color: #e7e7e9; }
}
@keyframes night-stars { from { opacity: .35; transform: translateY(0); } to { opacity: .85; transform: translateY(-8px); } }
@keyframes night-pulse { 0%, 100% { box-shadow: 0 0 0 3px #ffffff08; } 50% { box-shadow: 0 0 0 7px #ffffff12; } }
@keyframes symbol-drift { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -5px; rotate: 4deg; } }
@keyframes row-scan { 0% { transform: translateX(-40%); opacity: 0; } 15% { opacity: .6; } 100% { transform: translateX(420%); opacity: 0; } }
@keyframes arrival-planet-enter { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes departure-planet { to { transform: scale(2.9); filter: blur(8px); opacity: 0; } }
@keyframes arrival-exit { 0%, 65% { opacity: 1; } 100% { opacity: 0; } }
@media (min-width: 1700px) {
  .hero { min-height: 750px; }
  .scene-wrap { height: 650px; }
  .arrival-planet { max-height: 620px; width: min(820px, 94vw); }
}
@media (max-width: 900px) {
  .hero { min-height: 600px; }
  .hero-copy { padding-top: 45px; padding-bottom: 45px; }
  h1 { font-size: clamp(58px, 7.4vw, 72px); }
  .scene-wrap { height: 510px; }
  .collection { padding-top: 60px; padding-bottom: 50px; }
  h2, .faq-heading h2 { font-size: 50px; }
  .flow-copy h2 { font-size: 42px; }
  .arrival[open] { grid-template-rows: 72px minmax(210px, 1fr) auto 56px; }
  .arrival-orbit-code { top: 96px; }
}
@media (max-width: 600px) {
  .hero { min-height: 0; }
  .hero-copy { padding: 42px 0 0; }
  h1 { font-size: clamp(57px, 14vw, 79px); }
  .hero-description { font-size: 12px; }
  .scene-wrap { height: min(100vw, 440px); }
  .collection { padding-top: 45px; padding-bottom: 42px; }
  h2, .faq-heading h2 { font-size: clamp(41px, 10.8vw, 55px); }
  .collection-heading { margin-block: 32px 29px; }
  .collection-controls > .mono { margin-top: 0; }
  .tool-row { min-height: 151px; }
  .flow-copy h2 { font-size: clamp(40px, 10.7vw, 53px); }
  .closing { padding-top: 27px; padding-bottom: 22px; }
  .night-closing-copy h2 { font-size: 25px; }
  .night-closing-copy p { font-size: 10px; max-width: 175px; line-height: 1.6; }
  .closing > .button { min-height: 46px; padding-inline: 14px; gap: 16px; font-size: 11px; flex-shrink: 0; }
  .closing-top { gap: 18px; min-height: 65px; }
  .closing-top .button { flex-shrink: 0; }
  .footer-line { font-size: 8px; margin-top: 22px; }
  .arrival[open] { grid-template-rows: 66px minmax(210px, 1fr) auto 55px; }
  .arrival-header .brand { font-size: 25px; }
  .arrival-orbit-code { top: 91px; font-size: 8px; }
  .arrival-planet { width: 100%; max-height: 410px; }
  .arrival-copy { padding: 8px 24px 26px; }
  .arrival-copy h2 { font-size: 34px; }
  .arrival-copy .eyebrow { font-size: 8px; margin-bottom: 14px; }
  .arrival-copy > p:not(.eyebrow) { font-size: 11px; }
  #enter-orbit { margin-top: 22px; min-width: 182px; }
  .arrival-footer { font-size: 7px; gap: 20px; }
  .arrival-footer > :last-child { text-align: right; }
}
@media (max-height: 680px) and (min-width: 601px) {
  .arrival { overflow-y: auto; }
  .arrival[open] { grid-template-rows: 60px minmax(140px, 1fr) auto 40px; }
  .arrival-copy { padding-bottom: 22px; }
  .arrival-copy h2 { font-size: 30px; }
  .arrival-copy .eyebrow { margin-bottom: 10px; }
  #enter-orbit { margin-top: 17px; min-height: 46px; }
  .arrival .scene-wrap { min-height: 140px; }
}
@media (max-height: 600px) and (min-width: 601px) {
  .arrival[open] { grid-template-columns: 1fr 1fr; grid-template-rows: 56px minmax(220px, 1fr) 40px; }
  .arrival-header { grid-column: 1 / -1; grid-row: 1; }
  .arrival-planet { grid-column: 1; grid-row: 2; width: 100%; }
  .arrival-copy { grid-column: 2; grid-row: 2; align-self: center; padding: 18px 25px 18px 0; }
  .arrival-footer { grid-column: 1 / -1; grid-row: 3; }
  .arrival-orbit-code { top: 72px; }
}
@media (max-height: 600px) and (max-width: 600px) {
  .arrival { overflow-y: auto; }
  .arrival[open] { grid-template-rows: 56px minmax(150px, 1fr) auto 44px; }
  .arrival .scene-wrap { min-height: 150px; }
  .arrival-copy { padding-bottom: 18px; }
  .arrival-copy .eyebrow { margin-bottom: 10px; }
  .arrival-copy h2 { font-size: 28px; }
  .arrival-copy > p:not(.eyebrow) { margin-top: 8px; }
  #enter-orbit { margin-top: 16px; min-height: 46px; }
}
body.motion-paused *, body.motion-paused *::before, body.motion-paused *::after { animation: none !important; transition-duration: .01ms !important; }
body.motion-paused .arrival-copy, body.motion-paused .arrival .scene-wrap, body.motion-paused .hero-copy > *, body.motion-paused .hero-copy .title-line > span { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-ready) *, body:not(.motion-ready) *::before, body:not(.motion-ready) *::after { animation: none !important; transition-duration: .01ms !important; }
  body:not(.motion-ready) .arrival-copy, body:not(.motion-ready) .arrival .scene-wrap, body:not(.motion-ready) .hero-copy > *, body:not(.motion-ready) .hero-copy .title-line > span { opacity: 1; transform: none; }
}