@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@300;400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --bg: #03050a;
  --text: #eef5ff;
  --muted: #94a8c1;
  --dim: #5f748d;
  --blue: #9bd8ff;
  --blue-strong: #4eaaff;
  --line: rgba(167, 209, 255, .34);
  --panel: rgba(3, 8, 17, .80);
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
  --sans: 'Manrope', Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
/* html keeps the base colour; body must stay transparent so the fixed
   negative-z sky layers (.meteor-sky at -3, .cosmos at -2) paint above it. */
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100svh; margin: 0; color: var(--text); background: transparent; font-family: var(--sans); overflow-x: hidden; }
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }

/* Photographic galaxy backdrop. Sized to fill the frame with the photo's own
   black space; the image already contains black at its edges, so no colour
   is added on top. */
.backdrop { position: fixed; inset: 0; z-index: -4; pointer-events: none; overflow: hidden; background: var(--bg); }
.backdrop picture { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.5); display: block; width: 100%; height: 100%;
  /* Fade the photo's own edges to fully transparent so the rectangular trim
     disappears into the black behind it. Alpha only — no colour is added.
     Masking the picture (not the img) keeps the ellipse aligned with the
     scaled box, and the ramp ends inside the frame so no step remains. */
  -webkit-mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 18%, rgba(0, 0, 0, .88) 36%, rgba(0, 0, 0, .58) 52%, rgba(0, 0, 0, .28) 68%, rgba(0, 0, 0, .07) 84%, transparent 100%);
  mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 18%, rgba(0, 0, 0, .88) 36%, rgba(0, 0, 0, .58) 52%, rgba(0, 0, 0, .28) 68%, rgba(0, 0, 0, .07) 84%, transparent 100%);
}
.backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Feather only the outer edge into pure black — no tint, no colour shift. */
.backdrop::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 48%, transparent 0 46%, rgba(0, 0, 0, .28) 72%, rgba(0, 0, 0, .70) 92%, var(--bg) 100%); }

.cosmos { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: transparent; }
.cosmos::before { content: ''; position: absolute; inset: 0; opacity: .78; background: radial-gradient(ellipse at 50% 48%, transparent 0 24%, rgba(1, 3, 8, .22) 53%, #03050a 100%); z-index: 4; }
/* With the photo backdrop behind, soften the vignette so the galaxy stays visible. */
.has-backdrop .cosmos::before { opacity: .22; background: radial-gradient(ellipse at 50% 48%, transparent 0 34%, rgba(1, 3, 8, .08) 60%, rgba(3, 5, 10, .95) 94%); }
/* The photo already carries its own black space and colour, so the CSS
   nebula gradients and the blue-tinted vignette are switched off — they were
   adding a blue cast that is not in the original image. */
.has-backdrop .nebula { display: none; }
/* With the photo present, the canvas already draws the stars, so the CSS
   dot layers are redundant (and their blue #9dcfff/#b4d7ff tint would shift
   the photo's colour). */
.has-backdrop .star-layer { display: none; }
.has-backdrop .cosmos::before { opacity: .16; background: radial-gradient(ellipse at 50% 48%, transparent 0 40%, rgba(0, 0, 0, .10) 70%, rgba(0, 0, 0, .55) 100%); }
.nebula { position: absolute; left: 50%; top: 49%; width: min(112vw, 1400px); height: min(68vw, 760px); border-radius: 50%; transform: translate(-50%, -50%) rotate(-19deg); filter: blur(30px); opacity: .72; }
.nebula-a { background: conic-gradient(from 24deg at 50% 50%, transparent 0deg, rgba(35, 84, 149, .02) 15deg, rgba(69, 131, 203, .27) 28deg, transparent 48deg, rgba(25, 72, 132, .13) 84deg, transparent 112deg, rgba(184, 134, 103, .18) 153deg, transparent 174deg, rgba(67, 116, 191, .26) 210deg, transparent 236deg, rgba(40, 77, 143, .2) 275deg, transparent 308deg, rgba(95, 153, 222, .17) 334deg, transparent 360deg); mask-image: radial-gradient(ellipse at center, #000 8%, transparent 69%); animation: galaxyDrift 95s linear infinite; }
.nebula-b { width: min(98vw, 1190px); height: min(48vw, 560px); opacity: .8; filter: blur(22px); background: radial-gradient(ellipse at 49% 49%, rgba(3, 5, 10, .1) 0 15%, transparent 16% 24%, rgba(77, 140, 207, .22) 28%, transparent 42%), radial-gradient(ellipse at 58% 57%, rgba(208, 159, 111, .16), transparent 25%), radial-gradient(ellipse at 38% 42%, rgba(47, 105, 181, .23), transparent 35%); mask-image: radial-gradient(ellipse, #000 12%, transparent 70%); transform: translate(-50%, -50%) rotate(-19deg); }
.star-layer { position: absolute; inset: -20%; background-repeat: repeat; }
.star-layer-a { opacity: .75; background-image: radial-gradient(1px 1px at 30px 40px, #d7eaff 99%, transparent), radial-gradient(1px 1px at 147px 91px, #c2dfff 99%, transparent), radial-gradient(1.2px 1.2px at 233px 173px, #fff 99%, transparent), radial-gradient(1px 1px at 350px 65px, #b4d7ff 99%, transparent), radial-gradient(1px 1px at 421px 210px, #e4f1ff 99%, transparent), radial-gradient(1px 1px at 516px 125px, #fff 99%, transparent); background-size: 560px 290px; }
.star-layer-b { opacity: .43; background-image: radial-gradient(1px 1px at 62px 80px, #fff 99%, transparent), radial-gradient(1px 1px at 190px 211px, #9dcfff 99%, transparent), radial-gradient(1.5px 1.5px at 307px 31px, #fff 99%, transparent), radial-gradient(1px 1px at 390px 146px, #d9ebff 99%, transparent); background-size: 430px 250px; transform: rotate(17deg); }
.star-layer-c { opacity: .32; background-image: radial-gradient(1px 1px at 80px 60px, #fff 99%, transparent), radial-gradient(1px 1px at 244px 174px, #d7eaff 99%, transparent), radial-gradient(1px 1px at 366px 93px, #fff 99%, transparent); background-size: 510px 310px; transform: rotate(-9deg); }
.meteor { position: absolute; width: 170px; height: 1px; border-radius: 100%; transform: rotate(-34deg); transform-origin: right center; opacity: 0; background: linear-gradient(90deg, transparent, rgba(113, 187, 255, .2) 52%, rgba(216, 239, 255, .95)); filter: drop-shadow(0 0 4px rgba(96, 174, 255, .65)); animation: meteorFall 8.8s ease-in infinite; }
.meteor::after { content: ''; position: absolute; right: 0; top: -1.5px; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(139, 205, 255, .65); }
.meteor-one { top: 23%; left: 14%; animation-delay: 1.6s; }
.meteor-two { top: 12%; left: 83%; animation-delay: 4.2s; animation-duration: 10.5s; }
.meteor-three { top: 72%; left: 6%; animation-delay: 6.4s; animation-duration: 12s; transform: rotate(-34deg) scale(.68); }
.meteor-four { top: 83%; left: 93%; animation-delay: 2.7s; animation-duration: 11s; transform: rotate(-34deg) scale(.8); }

.topbar, .footerbar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding-inline: clamp(22px, 4vw, 62px); }
.topbar { min-height: 96px; padding-top: 8px; }
.brand { display: inline-flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text); }
.brand-name { font-size: clamp(1.35rem, 2.05vw, 2rem); font-weight: 400; letter-spacing: .34em; line-height: 1; }
.brand-period { color: var(--blue); }
.brand-tagline { color: #9aafc7; font-family: var(--mono); font-size: 9px; letter-spacing: .30em; }
.topbar-meta { display: flex; align-items: center; gap: 13px; color: #9eb2ca; font: 9px var(--mono); letter-spacing: .22em; }
.topbar-meta i { display: block; width: 3px; height: 3px; border-radius: 50%; background: #6e91b7; }
.mobile-menu-toggle { display: none; }

/* Two-column split: left = all writing, right = the orbit wheel. */
.universe { position: relative; min-height: calc(100svh - 155px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(16px, 3vw, 56px); padding-inline: clamp(20px, 4vw, 66px); isolation: isolate; }

.writing-pane { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 22px; min-width: 0; padding-inline-start: clamp(0px, 2vw, 34px); }

/* Orbit wheel, anchored to the bottom-right corner of the page.
   No rings, no hub — just the six nodes on an invisible circle. */
.orbit-stage { position: relative; width: 100%; max-width: min(46vh, 486px); aspect-ratio: 1; justify-self: end; align-self: end; }

.orbit-menu { position: absolute; inset: 0; z-index: 4; }
.orbit-node { position: absolute; width: clamp(101px, 22%, 139px); height: clamp(101px, 22%, 139px); aspect-ratio: 1; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(154, 201, 250, .39); border-radius: 50%; background: radial-gradient(circle at 50% 28%, rgba(22, 44, 68, .68), rgba(3, 9, 18, .9) 68%); box-shadow: inset 0 0 18px rgba(88, 149, 215, .055); cursor: pointer; transform: translate(-50%, -50%); transition: border-color .25s, box-shadow .25s, background .25s, scale .25s; text-align: center; padding: 10px 6px; }
.orbit-node:hover, .orbit-node:focus-visible, .orbit-node.is-active { border-color: rgba(150, 214, 255, .92); background: radial-gradient(circle at 50% 27%, rgba(32, 77, 116, .77), rgba(3, 9, 18, .96) 70%); box-shadow: 0 0 30px rgba(54, 148, 235, .17), inset 0 0 20px rgba(88, 174, 244, .11); }
.orbit-node.is-active { scale: 1.035; }
/* Six nodes spaced exactly 60° apart on a circle of radius 34% of the stage.
   Positions generated from polar coordinates:
     angle = i × 60°   (0° = 12 o'clock, clockwise)
     left  = 50 + 34·sin(angle)
     top   = 50 − 34·cos(angle)
   Verified: every neighbouring chord measures 34.000 units. */
.node-downloads { left: 50%;       top: 16%; }  /*   0° */
.node-paia      { left: 79.4449%;  top: 33%; }  /*  60° */
.node-srm       { left: 79.4449%;  top: 67%; }  /* 120° */
.node-contact   { left: 50%;       top: 84%; }  /* 180° */
.node-about     { left: 20.5551%;  top: 67%; }  /* 240° */
.node-eos       { left: 20.5551%;  top: 33%; }  /* 300° */

/* Summary + detail text, sitting directly on the galaxy backdrop.
   No border, no panel fill — just typography with a soft shadow for contrast. */
.center-panel { position: relative; z-index: 3; width: 100%; max-width: 430px; display: flex; flex-direction: column; align-items: flex-start; padding: 0; text-align: left; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
.panel-content { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin-top: 20px; }
.center-panel::before, .center-panel::after { content: none; }
.panel-topline { position: static; display: flex; align-items: center; gap: 7px; width: 100%; color: #9fb6ce; font: 8px var(--mono); letter-spacing: .16em; white-space: nowrap; text-shadow: 0 1px 10px rgba(0, 0, 0, .85); }
.status-dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: #8bd5ff; box-shadow: 0 0 8px rgba(88, 185, 255, .85); }
.panel-index { margin-left: auto; opacity: .8; }
.panel-symbol { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; color: var(--blue); opacity: .95; filter: none; }
.panel-symbol svg { width: 100%; height: 100%; }
/* Favicon used as the Cognika mark: square art, so round it to sit like an icon. */
.panel-symbol .panel-logo { display: block; width: 100%; height: 100%; border-radius: 9px; }
.center-panel h1 { margin: 0 0 14px; font-size: clamp(2.1rem, 4.4vmin, 3.1rem); line-height: 1; font-weight: 400; letter-spacing: .05em; text-shadow: 0 2px 24px rgba(0, 0, 0, .9), 0 0 40px rgba(30, 110, 190, .35); }
.panel-teaser { max-width: 330px; margin: 0; color: #c3d2e2; font-size: 13px; font-weight: 300; line-height: 1.75; text-shadow: 0 1px 12px rgba(0, 0, 0, .9); }

/* Detail block for the hovered circle. Borderless. Once revealed it stays
   put so the topic links and explore button remain clickable. */
.hover-info { position: relative; left: auto; top: auto; z-index: 6; width: 100%; max-width: 560px; min-height: 210px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility .22s; }
.hover-info.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.hover-info-topline { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; color: #9fb6ce; font: 8px var(--mono); letter-spacing: .16em; white-space: nowrap; text-shadow: 0 1px 10px rgba(0, 0, 0, .85); }
.hover-info-dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: #8bd5ff; box-shadow: 0 0 8px rgba(88, 185, 255, .85); }
.hover-info-index { margin-left: auto; opacity: .8; }
.hover-info-kicker { margin: 0 0 8px; color: #a8c1d8; font: 8px var(--mono); letter-spacing: .2em; line-height: 1.7; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
.hover-info-title { margin: 0; color: #f2f8ff; font-size: clamp(1.5rem, 2.6vmin, 1.95rem); font-weight: 400; line-height: 1.1; letter-spacing: .03em; text-shadow: 0 2px 22px rgba(0, 0, 0, .9), 0 0 34px rgba(30, 110, 190, .3); }
.hover-info-rule { height: 1px; width: 84px; margin: 14px 0 14px; background: linear-gradient(90deg, rgba(135, 204, 255, .75), transparent); }
.hover-info-description { margin: 0 0 16px; color: #c6d4e3; font-size: 12.5px; font-weight: 300; line-height: 1.75; text-shadow: 0 1px 12px rgba(0, 0, 0, .9); }
.hover-info-topics { display: flex; flex-wrap: wrap; gap: 7px; }
/* Text links rather than filled pills, so nothing reads as a "card". */
.hover-info-topics button { border: 0; border-bottom: 1px solid rgba(141, 186, 235, .35); background: none; color: #a9c8e6; padding: 3px 0; font: 8.5px var(--mono); letter-spacing: .04em; cursor: pointer; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); transition: color .2s, border-color .2s; }
.hover-info-topics button span { margin-left: 4px; color: #7bc6ff; }
.hover-info-topics button:hover, .hover-info-topics button:focus-visible { color: #fff; border-color: rgba(125, 199, 255, .9); }
.hover-info-detail { min-height: 30px; margin: 12px 0 0; color: #9fb2c6; font-size: 11px; line-height: 1.55; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
.hover-info-action { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 6px 0; border: 0; border-bottom: 1px solid rgba(123, 190, 248, .45); background: none; color: #cfe6fb; font: 9px var(--mono); letter-spacing: .18em; cursor: pointer; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); transition: color .2s, border-color .2s; }
.hover-info-action span { font-size: 13px; transition: transform .2s; }
.hover-info-action:hover, .hover-info-action:focus-visible { color: #fff; border-color: var(--blue); }
.hover-info-action:hover span { transform: translate(3px, -2px); }

.node-icon { display: grid; place-items: center; width: clamp(24px, 3.3vw, 36px); height: clamp(24px, 3.3vw, 36px); color: #d9efff; }
.node-icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(133, 205, 255, .18)); }
.icon-cognika { font-size: 35px; font-weight: 300; line-height: 1; letter-spacing: -.09em; }
.icon-cognika span { display: inline-block; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; width: 29px; height: 29px; line-height: 25px; padding-right: 2px; text-align: center; }
.node-label { margin-top: 2px; color: #e4f3ff; font-size: clamp(10px, 1.28vmin, 12px); font-weight: 500; letter-spacing: .08em; }
.node-caption { color: #7893af; font: 7px var(--mono); letter-spacing: .13em; }
.orbit-node.is-active .node-caption { color: #a5ccec; }
.stage-coordinate { position: absolute; color: rgba(133, 164, 195, .51); font: 7px/1.8 var(--mono); letter-spacing: .17em; }
/* Lives in the left writing pane now. */
.coordinate-one { left: 0; bottom: 2%; }
.coordinate-two { right: 0; bottom: 31%; text-align: right; }

/* The card occupies the left margin, so fade the left coordinate readout
   out of the way while it is open. */
body.card-open .coordinate-one { opacity: 0; }
.stage-coordinate { transition: opacity .22s ease; }

.footerbar { min-height: 59px; color: #849db7; font: 8px var(--mono); letter-spacing: .2em; }
.footer-note, .footer-right { display: flex; align-items: center; gap: 18px; }
.footer-line { display: block; width: 32px; height: 1px; background: #b0cee8; opacity: .8; }
.footer-status { color: #657d96; }
.footer-orb { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #b9d9f8; border-radius: 50%; }
.footer-orb span { width: 4px; height: 4px; border-radius: 50%; background: #c5e4ff; box-shadow: 0 0 8px #75bcff; }

.detail-dialog { width: min(520px, calc(100% - 32px)); padding: 38px; color: var(--text); border: 1px solid rgba(139, 197, 250, .35); border-radius: 18px; background: radial-gradient(ellipse at top, rgba(22, 51, 83, .96), rgba(3, 7, 14, .98) 66%); box-shadow: 0 20px 100px rgba(0, 0, 0, .7), 0 0 60px rgba(50, 130, 220, .16); }
.detail-dialog::backdrop { background: rgba(0, 2, 8, .78); backdrop-filter: blur(7px); }
.dialog-close { position: absolute; top: 12px; right: 16px; border: 0; color: #9ebbd9; background: transparent; font-size: 28px; cursor: pointer; }
.dialog-eyebrow { color: #7eacda; font: 10px var(--mono); letter-spacing: .2em; }
.detail-dialog h2 { margin: 18px 0 12px; font-size: clamp(28px, 5vw, 40px); font-weight: 400; }
.detail-dialog #dialogDescription { color: #c0d0e0; line-height: 1.8; }
.dialog-rule { height: 1px; margin: 24px 0; background: linear-gradient(90deg, rgba(135, 204, 255, .65), transparent); }
.dialog-note { color: #7f95ad; font-size: 12px; line-height: 1.8; }

@keyframes galaxyDrift { to { transform: translate(-50%, -50%) rotate(341deg); } }
@keyframes meteorFall {
  0%, 62% { opacity: 0; translate: 0 0; }
  64% { opacity: .95; }
  69% { opacity: 0; translate: -270px 175px; }
  100% { opacity: 0; translate: -270px 175px; }
}

.meteor-sky { position: fixed; inset: 0; z-index: -3; display: block; width: 100%; height: 100%; pointer-events: none; background: transparent; }
/* The canvas draws the streaks, so the CSS .meteor spans must never render.
   Hidden unconditionally — not gated on the JS-added .sky-active class — so
   the large 170px streaks cannot appear if the canvas fails to initialise. */
.meteor-sky ~ * .meteor,
.cosmos > .meteor { display: none; }
html.sky-active .cosmos { background: transparent; }
html.sky-active .cosmos::before { background: radial-gradient(ellipse at 50% 48%, transparent 0 30%, rgba(1, 3, 8, .18) 58%, #03050a 100%); }

/* Tablet / small laptop: keep the split, just tighten the typography. */
@media (min-width: 761px) and (max-width: 1180px) {
  .universe { gap: clamp(12px, 2vw, 32px); padding-inline: clamp(16px, 3vw, 40px); }
  .center-panel, .hover-info { padding: 20px 20px 18px; }
  .hover-info-description { font-size: 11px; }
  .center-panel h1 { font-size: clamp(1.7rem, 3.4vmin, 2.3rem); }
}

@media (max-width: 760px) {
  .topbar { min-height: 78px; padding-inline: 20px; }
  .brand-name { font-size: 1.3rem; letter-spacing: .25em; }
  .brand-tagline { font-size: 7px; letter-spacing: .19em; }
  .topbar-meta { display: none; }
  .mobile-menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 40px; height: 40px; padding: 8px; border: 1px solid rgba(152, 197, 241, .25); border-radius: 50%; background: rgba(6, 14, 26, .65); }
  .mobile-menu-toggle span { height: 1px; width: 100%; background: #bddcf8; }
  /* Single column: writing on top, orbit below. */
  .universe { grid-template-columns: minmax(0, 1fr); min-height: calc(100svh - 124px); gap: 20px; padding: 12px clamp(14px, 4vw, 24px) 22px; }
  .writing-pane { order: 1; }
  .orbit-stage { order: 2; width: min(96vw, 620px); max-width: none; justify-self: center; align-self: center; margin: 0; }
  .coordinate-one { display: none; }
  .center-panel, .hover-info { max-width: none; }
  .center-panel { padding: 20px 20px 20px; }
  .panel-content { margin-top: 20px; }
  .center-panel h1 { font-size: clamp(1.7rem, 7vw, 2.3rem); }
  .panel-teaser { font-size: 12px; }
  .hover-info { padding: 18px 20px 16px; }
  .hover-info-title { font-size: 1.3rem; }
  .hover-info-description { font-size: 11.5px; }
  .panel-topline { gap: 5px; font-size: 6px; letter-spacing: .08em; }
  .panel-symbol { width: 27px; height: 27px; margin-bottom: 10px; }
  .orbit-node { width: clamp(64px, 22%, 100px); height: clamp(64px, 22%, 100px); gap: 4px; padding: 6px 4px; }
  /* Same exact 60° ring as desktop, at this size. */
  .node-downloads { left: 50%;    top: 16%; }
  .node-paia      { left: 79.44%; top: 33%; }
  .node-srm       { left: 79.44%; top: 67%; }
  .node-contact   { left: 50%;    top: 84%; }
  .node-about     { left: 20.56%; top: 67%; }
  .node-eos       { left: 20.56%; top: 33%; }
  .node-icon { width: 25px; height: 25px; }
  .icon-cognika { font-size: 27px; }
  .icon-cognika span { width: 23px; height: 23px; line-height: 19px; border-width: 1.5px; }
  .node-label { font-size: 8px; }
  .node-caption { font-size: 5px; letter-spacing: .06em; }
  .coordinate-one, .coordinate-two { display: none; }
  .footerbar { min-height: 46px; padding-inline: 20px; font-size: 7px; letter-spacing: .12em; }
  .footer-note, .footer-right { gap: 8px; }
  .footer-line { width: 18px; }
  .footer-status { display: none; }
}

@media (max-width: 460px) {
  .universe { min-height: auto; display: block; padding: 6px 0 28px; }
  .orbit-stage { width: 100%; aspect-ratio: auto; display: block; padding: 0 16px; }
  .center-panel { padding: 22px 20px; }
  .panel-symbol { width: 34px; height: 34px; margin-bottom: 12px; }
  .center-panel h1 { font-size: 2.25rem; margin-bottom: 12px; }
  .panel-teaser { max-width: 320px; font-size: 12.5px; line-height: 1.7; }
  .orbit-menu { position: relative; inset: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .orbit-node, .node-about, .node-eos, .node-paia, .node-srm, .node-downloads, .node-contact { position: relative; inset: auto; width: 100%; max-width: 116px; height: auto; aspect-ratio: 1; justify-self: center; transform: none; padding: 10px 4px; gap: 6px; }
  .orbit-node.is-active { scale: 1.02; }
  .node-icon { width: 27px; height: 27px; }
  .node-label { font-size: 9px; }
  .node-caption { font-size: 6px; letter-spacing: .08em; }
  .footerbar { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}