:root {
  color-scheme: dark;
  --canvas: #211a15;
  --surface: #2b211a;
  --ink: #f6eee5;
  --muted: #c4ad99;
  --accent: #f2a66d;
  --line: #66503f;
  font-family: "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 50% 26%, #34261d 0, var(--canvas) 56%); }
.masthead { max-width: 1440px; margin: auto; padding: 30px 48px 0; display: flex; align-items: center; justify-content: space-between; }
.wordmark { font-size: 25px; font-weight: 650; letter-spacing: -.07em; }
.wordmark-dot { color: var(--accent); }
.address { font-size: 11px; letter-spacing: .12em; color: var(--muted); }
main { position: relative; }
.scene { width: min(100%, 1060px); height: 470px; position: relative; margin: 0 auto; isolation: isolate; perspective: 1100px; }
.atmosphere { position: absolute; inset: 4% 13% -5%; background: radial-gradient(ellipse, rgb(242 166 109 / 13%), transparent 65%); z-index: -2; }
.horizon { position: absolute; left: 6%; right: 6%; top: 82%; height: 1px; background: linear-gradient(90deg, transparent, rgb(196 173 153 / 18%), transparent); }
.horizon::after { content: ""; position: absolute; left: 25%; right: 25%; height: 38px; top: -12px; background: radial-gradient(ellipse, rgb(0 0 0 / 35%), transparent 70%); }
.geometry { position: absolute; inset: 0; transform-style: preserve-3d; z-index: -1; overflow: clip; }
.orbit { position: absolute; width: 76%; height: 76%; top: 12%; left: 12%; border: 1px solid rgb(242 166 109 / 23%); border-radius: 50%; transform-style: preserve-3d; }
.orbit-outer { transform: rotateX(66deg) rotateY(-15deg) rotateZ(-18deg); border-top-color: rgb(242 166 109 / 48%); }
.orbit-inner { width: 65%; height: 71%; top: 17%; left: 17.5%; transform: rotateX(63deg) rotateY(24deg) rotateZ(28deg); border-bottom-color: rgb(242 166 109 / 52%); }
.orbit-cross { width: 58%; height: 80%; left: 21%; top: 10%; transform: rotateX(22deg) rotateY(59deg) rotateZ(-28deg); border-color: rgb(242 166 109 / 12%); }
.orbit-traveler { position: absolute; inset: 0; transform: translate(50%, 0); }
.orbital-marker { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 50%; background: #f6eee5; box-shadow: 0 0 6px var(--accent), 0 0 16px rgb(242 166 109 / 70%); }
.orbit-inner .orbital-marker { width: 6px; height: 6px; background: var(--accent); }
.shell { position: absolute; width: 308px; height: 308px; left: calc(50% - 154px); top: 61px; border-radius: 50%; border: 1px solid rgb(242 166 109 / 25%); background: radial-gradient(circle at 28% 20%, rgb(255 253 249 / 8%), transparent 42%), radial-gradient(circle at 75% 75%, transparent 55%, rgb(242 166 109 / 7%)); box-shadow: inset 1px 2px 3px rgb(255 253 249 / 8%), inset -14px -18px 40px rgb(0 0 0 / 14%); }
.meridian { position: absolute; inset: 0 23%; border-radius: 50%; border: 1px solid rgb(242 166 109 / 12%); transform: rotate(-28deg); }
.latitude { position: absolute; inset: 28% 0; border: 1px solid rgb(242 166 109 / 10%); border-radius: 50%; transform: rotate(-28deg); }
.core { position: absolute; width: 174px; left: calc(50% - 87px); top: 119px; text-align: center; }
.core img { display: block; width: 174px; height: 174px; border: 0; box-shadow: 0 18px 32px rgb(0 0 0 / 28%); }
.core::before { content: ""; position: absolute; inset: -10px -10px 15px; border: 1px solid rgb(242 166 109 / 25%); pointer-events: none; }
.logo-frame { position: relative; display: block; }
.core .wink-eye { position: absolute; left: 44.921875%; top: 30.2734375%; width: 12.5%; height: 8.203125%; opacity: 0; box-shadow: none; mask-image: radial-gradient(ellipse at center, #000 45%, transparent 72%); pointer-events: none; }
.core-caption { display: block; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 7px; letter-spacing: .15em; margin-top: 19px; color: var(--muted); white-space: nowrap; }
.constellation { position: absolute; inset: 0; perspective: 1100px; }
.node { --radius: 22px; --period: 18s; --phase: 0s; position: absolute; transform: translate3d(-50%, -50%, var(--depth, 0px)); }
.node-face { min-width: 104px; min-height: 66px; padding: 13px 18px; display: flex; align-items: center; justify-content: center; gap: 11px; border-radius: 17px; background: linear-gradient(135deg, rgb(255 253 249 / 7%), rgb(43 33 26 / 94%) 65%); border: 1px solid rgb(196 173 153 / 24%); box-shadow: 0 14px 24px rgb(0 0 0 / 13%), inset 0 1px 0 rgb(255 253 249 / 5%); color: var(--ink); font-size: 13px; letter-spacing: -.01em; white-space: nowrap; }
.network-point { width: 16px; height: 16px; border: 1px solid var(--muted); border-radius: 50%; position: relative; flex-shrink: 0; }
.network-point::after { content: ""; position: absolute; inset: 5px; background: var(--accent); border-radius: 50%; }
.node img { object-fit: contain; flex-shrink: 0; }
.cursor { left: 24%; top: 35%; --depth: 60px; --period: 16s; --phase: -2s; }
.cline { left: 72%; top: 24%; --depth: 25px; --period: 20s; --phase: -8s; }
.zed { left: 81%; top: 52%; --depth: 65px; --period: 18s; --phase: -4s; }
.goose { left: 28%; top: 68%; --depth: 100px; --period: 22s; --phase: -12s; }
.opencode { left: 66%; top: 78%; --depth: 65px; --period: 19s; --phase: -6s; }
.roo { left: 43%; top: 10%; --depth: -140px; --radius: 12px; --period: 24s; --phase: -3s; }
.kilo { left: 4.5%; top: 56%; --depth: -130px; --radius: 12px; --period: 21s; --phase: -11s; }
.roo .node-face, .kilo .node-face { background: var(--surface); border-color: rgb(196 173 153 / 15%); color: var(--muted); }
.scene-label { position: absolute; top: 94%; width: 100%; text-align: center; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 9px; letter-spacing: .16em; color: var(--muted); }
.intro { text-align: center; margin: 21px auto 0; padding: 0 20px; }
.status { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 19px; color: var(--accent); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
h1 { margin: 0; font-size: clamp(36px, 4.6vw, 64px); font-weight: 400; letter-spacing: -.055em; line-height: 1.08; }
h1 span { display: block; }
.tagline { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7; margin: 22px 0 0; color: var(--muted); letter-spacing: -.015em; }
.tagline em { font-style: normal; color: var(--ink); }
.mobile-break { display: none; }
.motion-control { margin: 28px auto 0; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11px; color: var(--muted); }
.motion-control input { accent-color: var(--accent); width: 14px; height: 14px; margin: 0; }
.motion-control label { cursor: pointer; padding: 7px 0; }
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
footer { max-width: 1440px; margin: 28px auto 0; padding: 22px 48px 28px; border-top: 1px solid rgb(196 173 153 / 13%); display: flex; justify-content: space-between; gap: 25px; align-items: center; }
.domain { font-size: 12px; letter-spacing: .03em; }
footer p { font-size: 10px; line-height: 1.7; margin: 0; color: var(--muted); text-align: right; }
@keyframes wink {
  0% { opacity: 0; }
  8%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes node-orbit {
  from { transform: rotate(0deg) translateX(var(--radius)) rotate(0deg); }
  to { transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg); }
}
@keyframes marker-orbit {
  0% { transform: translate(50.000%, 0.000%); }
  6.25% { transform: translate(46.194%, 19.134%); }
  12.5% { transform: translate(35.355%, 35.355%); }
  18.75% { transform: translate(19.134%, 46.194%); }
  25% { transform: translate(0.000%, 50.000%); }
  31.25% { transform: translate(-19.134%, 46.194%); }
  37.5% { transform: translate(-35.355%, 35.355%); }
  43.75% { transform: translate(-46.194%, 19.134%); }
  50% { transform: translate(-50.000%, 0.000%); }
  56.25% { transform: translate(-46.194%, -19.134%); }
  62.5% { transform: translate(-35.355%, -35.355%); }
  68.75% { transform: translate(-19.134%, -46.194%); }
  75% { transform: translate(-0.000%, -50.000%); }
  81.25% { transform: translate(19.134%, -46.194%); }
  87.5% { transform: translate(35.355%, -35.355%); }
  93.75% { transform: translate(46.194%, -19.134%); }
  100% { transform: translate(50.000%, -0.000%); }
}
@keyframes breathe { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .core .wink-eye { animation: wink 1s linear 3s 1; }
  .node-face { animation: node-orbit var(--period) linear var(--phase) infinite; }
  .orbit-outer .orbit-traveler { animation: marker-orbit 16s linear -3s infinite; }
  .orbit-inner .orbit-traveler { animation: marker-orbit 20s linear -11s infinite reverse; }
  .atmosphere { animation: breathe 12s ease-in-out -3s infinite; }
}
main:has(#pause-motion:checked) .wink-eye,
main:has(#pause-motion:checked) .node-face,
main:has(#pause-motion:checked) .orbit-traveler,
main:has(#pause-motion:checked) .atmosphere { animation-play-state: paused; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.node img.brand-lockup { width: 88px; height: 34px; }
@media (max-width: 900px) { .kilo { display: none; } }
@media (max-width: 767px) {
  .node { --radius: 12px; }
  .masthead { padding: 24px 24px 0; }
  .address { font-size: 9px; letter-spacing: .06em; }
  .scene { height: 420px; }
  .shell { width: 260px; height: 260px; left: calc(50% - 130px); top: 72px; }
  .core { width: 142px; left: calc(50% - 71px); top: 122px; }
  .core img { width: 142px; height: 142px; }
  .core-caption { font-size: 6px; letter-spacing: .1em; }
  .node-face { min-width: 90px; min-height: 49px; padding: 10px 12px; gap: 7px; font-size: 11px; border-radius: 13px; }
  .network-point { width: 12px; height: 12px; }
  .network-point::after { inset: 4px; }
  .node img { width: 20px; height: 23px; }
  .cursor { left: 20%; top: 26%; --depth: 0px; }
  .cline { left: 77%; top: 18%; --depth: 0px; }
  .zed { left: 84%; top: 54%; --depth: 0px; }
  .goose { left: 20%; top: 74%; --depth: 0px; }
  .opencode { left: 74%; top: 83%; --depth: 0px; }
  .roo { left: 43%; top: 9%; --depth: -130px; }
  .kilo { display: none; }
  .scene-label { top: 97%; font-size: 7px; letter-spacing: .09em; }
  .intro { margin-top: 30px; }
  footer { padding: 20px 24px 24px; }
}
@media (max-width: 480px) {
  .scene { height: 380px; }
  .shell { width: 214px; height: 214px; left: calc(50% - 107px); top: 88px; }
  .core { width: 124px; left: calc(50% - 62px); top: 124px; }
  .core img { width: 124px; height: 124px; }
  .core-caption { font-size: 5.4px; letter-spacing: .03em; }
  .node-face { min-width: 76px; min-height: 42px; padding: 9px; font-size: 10px; gap: 6px; border-radius: 11px; }
  .cursor { left: 20%; top: 21%; }
  .cline { left: 77%; top: 20%; }
  .zed { left: 84%; top: 73%; }
  .goose { left: 19%; top: 76%; }
  .opencode { left: 51%; top: 92%; }
  .roo { display: none; }
  .scene-label { top: 101%; font-size: 6px; }
  .orbit { width: 75%; left: 12.5%; }
  .orbit-inner { width: 70%; left: 15%; }
  .orbit-cross { width: 75%; left: 12.5%; }
  .intro { margin-top: 42px; }
  h1 { font-size: clamp(32px, 8.8vw, 42px); }
  .status { margin-bottom: 17px; font-size: 10px; }
  .mobile-break { display: block; }
  .tagline { margin-top: 19px; }
  footer { flex-direction: column; gap: 12px; text-align: center; margin-top: 22px; }
  footer p { text-align: center; max-width: 320px; font-size: 9px; }
  .node { --radius: 8px; }
  .motion-control { margin-top: 20px; }
  .node img.brand-lockup { width: 60px; height: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .wink-eye, .node-face, .orbit-traveler, .atmosphere { animation: none; }
  .motion-control { display: none; }
}
@media (forced-colors: active) {
  .shell, .orbit, .node-face { border-color: CanvasText; }
  .node-face, .status, .scene-label { color: CanvasText; }
}