:root {
  --bg: #02090b;
  --text: #edf7f7;
  --muted: #789396;
  --accent: #83e0e3;
  --line: rgba(131, 224, 227, .13);
  --line-strong: rgba(151, 239, 241, .42);
  --glow: rgba(88, 214, 220, .23);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: var(--bg); }
html { color-scheme: dark; }
body {
  min-height: 100svh;
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(18, 66, 70, .18), transparent 36rem),
    linear-gradient(180deg, #030b0d 0%, #02090b 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: soft-light;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
}
a { color: inherit; }
::selection { background: rgba(131,224,227,.22); }

.universe-frame {
  position: fixed;
  inset: 6px;
  z-index: 100;
  pointer-events: none;
}
.uf-line { position: absolute; background: var(--line-strong); opacity: .55; }
.uf-top,.uf-bottom { left: 36px; right: 36px; height: 1px; }
.uf-left,.uf-right { top: 36px; bottom: 36px; width: 1px; }
.uf-top { top: 0; }
.uf-bottom { bottom: 0; }
.uf-left { left: 0; }
.uf-right { right: 0; }
.uf-corner { position: absolute; width: 34px; height: 34px; border-color: rgba(204,245,246,.78); }
.uf-tl { top:0; left:0; border-top:1px solid; border-left:1px solid; }
.uf-tr { top:0; right:0; border-top:1px solid; border-right:1px solid; }
.uf-bl { bottom:0; left:0; border-bottom:1px solid; border-left:1px solid; }
.uf-br { bottom:0; right:0; border-bottom:1px solid; border-right:1px solid; }
.uf-ticks {
  position: absolute;
  left: 50%;
  width: 200px;
  height: 9px;
  transform: translateX(-50%);
  opacity: .52;
  background: repeating-linear-gradient(90deg, var(--accent) 0 1px, transparent 1px 18px);
}
.uf-ticks-top { top: -4px; }
.uf-ticks-bottom { bottom: -4px; }

.site-header {
  position: fixed;
  z-index: 80;
  left: 25px;
  right: 30px;
  top: 20px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.brand, .enter-button { pointer-events: auto; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: #e7f1f2;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .12em;
  white-space: nowrap;
}
.brand b { color: var(--accent); font-weight: 650; }
.brand-mark {
  width: 19px;
  height: 19px;
  display: block;
  border: 3px solid var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 13px rgba(131,224,227,.16);
}
.enter-button {
  min-width: 101px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #e6eef0;
  text-decoration: none;
  border: 1px solid rgba(131,224,227,.35);
  background: rgba(4, 12, 14, .4);
  font: 600 14px/1 var(--mono);
  letter-spacing: .16em;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.enter-button:hover,
.enter-button:focus-visible {
  background: rgba(131,224,227,.08);
  border-color: rgba(151,239,241,.7);
  box-shadow: 0 0 24px rgba(88,214,220,.08);
  outline: none;
}
.enter-button.is-active,
.enter-button[aria-current="page"] {
  background: rgba(131,224,227,.16);
  border-color: rgba(151,239,241,.82);
  color: #f4ffff;
  box-shadow:
    inset 0 0 18px rgba(131,224,227,.08),
    0 0 20px rgba(88,214,220,.1);
  transform: translateY(1px);
}

.universe-landing {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
}
.cosmos, .stars, .nebula, .grid-haze {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cosmos {
  z-index: -3;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(12,41,44,.23) 0, rgba(2,11,13,.12) 38%, transparent 67%),
    #02090b;
}
.stars { inset: -8%; background-repeat: repeat; }
.stars-a {
  opacity: .27;
  background-image:
    radial-gradient(circle, rgba(221,244,245,.86) 0 1.4px, transparent 1.8px),
    radial-gradient(circle, rgba(131,224,227,.62) 0 1px, transparent 1.4px);
  background-size: 106px 106px, 168px 168px;
  background-position: 12px 10px, 31px 56px;
  transform: translate(var(--px1, 0), var(--py1, 0));
}
.stars-b {
  opacity: .16;
  background-image:
    radial-gradient(circle, rgba(159,203,205,.8) 0 1.3px, transparent 1.8px),
    radial-gradient(circle, rgba(73,139,143,.72) 0 1px, transparent 1.4px);
  background-size: 213px 213px, 129px 129px;
  background-position: 34px 18px, 80px 64px;
  transform: translate(var(--px2, 0), var(--py2, 0));
}
.nebula { filter: blur(35px); opacity: .2; }
.nebula-a { background: radial-gradient(ellipse at 38% 48%, rgba(14,80,84,.28), transparent 35%); }
.nebula-b { background: radial-gradient(ellipse at 67% 62%, rgba(16,70,81,.2), transparent 33%); }
.grid-haze {
  opacity: .035;
  background-image:
    linear-gradient(rgba(131,224,227,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(131,224,227,.2) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(circle at center, #000, transparent 72%);
}

.system-stage {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(78vw, 720px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}
.orbit, .scan-ring, .axis { position:absolute; pointer-events:none; }
.orbit {
  border: 1px solid rgba(131,224,227,.12);
  border-radius: 50%;
  box-shadow: inset 0 0 40px rgba(40,165,173,.02);
}
.orbit::after {
  content: "";
  position:absolute;
  top: 50%;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #98f0f0;
  box-shadow: 0 0 9px rgba(131,224,227,.85);
}
.orbit-outer { inset: 0; animation: spin 52s linear infinite; }
.orbit-middle { inset: 14%; border-style: dotted; animation: spin 38s linear infinite reverse; }
.orbit-inner { inset: 24%; border-color: rgba(131,224,227,.2); animation: spin 25s linear infinite; }
.scan-ring {
  inset: 31%;
  border-radius: 50%;
  border: 1px solid rgba(131,224,227,.08);
  box-shadow: 0 0 70px rgba(78,201,207,.055);
}
.axis-x {
  left: -2%;
  right: -2%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(131,224,227,.08), rgba(131,224,227,.18), rgba(131,224,227,.08), transparent);
}
.axis-y {
  top: -2%;
  bottom: -2%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(131,224,227,.08), rgba(131,224,227,.18), rgba(131,224,227,.08), transparent);
}

.world-node {
  position: absolute;
  text-decoration: none;
  cursor: pointer;
  z-index: 5;
  min-width: 105px;
  display: grid;
  gap: 3px;
  color: #d9e6e7;
  font-family: var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
.world-node b {
  width: 11px;
  height: 11px;
  display: block;
  margin-bottom: 6px;
  border: 1px solid var(--accent);
  background: rgba(131,224,227,.14);
  box-shadow: 0 0 10px rgba(131,224,227,.28);
}
.world-node span { font-size: 11px; font-weight: 700; }
.world-node small { color: #688185; font-size: 8px; letter-spacing: .18em; }
.world-node:hover,
.world-node:focus-visible {
  color: var(--accent);
  outline: none;
}
.world-node:hover b,
.world-node:focus-visible b {
  background: rgba(131,224,227,.28);
  box-shadow: 0 0 16px rgba(131,224,227,.5);
}
.node-play { left:50%; top:8%; transform:translateX(-50%); text-align:center; justify-items:center; }
.node-social { left:9%; top:40%; }
.node-content { right:8%; top:33%; text-align:right; justify-items:end; }
.node-options { right:14%; bottom:21%; text-align:right; justify-items:end; }
.node-information { left:18%; bottom:13%; }

.universe-core {
  position: relative;
  width: 365px;
  height: 365px;
  display: grid;
  place-items: center;
  transform: translate(var(--core-x,0), var(--core-y,0));
  transition: transform .12s linear;
}
.core-halo {
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(131,224,227,.13);
}
.halo-a { inset: 0; box-shadow: 0 0 80px rgba(71,190,197,.1); }
.halo-b { inset: 10%; border-style: dotted; animation: spin 28s linear infinite reverse; }
.core-planet {
  position: absolute;
  width: 258px;
  height: 258px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(151,239,241,.12);
  background: radial-gradient(circle at 34% 28%, #a5dfdd 0%, #4d989b 20%, #1b4c51 48%, #07181c 76%);
  box-shadow:
    0 0 28px rgba(102,221,225,.18),
    0 0 95px rgba(53,154,161,.13),
    inset -35px -38px 55px rgba(0,0,0,.57);
}
.planet-grid {
  position: absolute;
  inset: -36%;
  opacity: .17;
  background-image:
    linear-gradient(rgba(255,255,255,.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.36) 1px, transparent 1px);
  background-size: 28px 28px;
  transform: rotate(17deg);
}
.planet-shine {
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,.28), transparent 34%, transparent 69%, rgba(0,0,0,.4));
}
.continent { position:absolute; border:1px solid rgba(210,255,255,.17); background:rgba(7,49,54,.19); }
.continent-a { width:95px; height:52px; left:36px; top:64px; border-radius:54% 46% 62% 38%; transform:rotate(-18deg); }
.continent-b { width:72px; height:104px; right:37px; top:77px; border-radius:40% 60% 45% 55%; transform:rotate(24deg); }
.continent-c { width:78px; height:35px; left:89px; bottom:43px; border-radius:60% 40%; transform:rotate(9deg); }

.core-copy {
  position: relative;
  z-index: 3;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0,0,0,.94);
}
.core-kicker {
  color: #9ed9dc;
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .17em;
}
.core-copy h1 {
  margin: 12px 0 7px;
  color: #eef8f8;
  font-size: 48px;
  line-height: .9;
  font-weight: 260;
  letter-spacing: .07em;
}
.core-copy h1 span {
  display: inline-block;
  margin-left: .24em;
  color: #d7e8e9;
  font-size: .58em;
  letter-spacing: .25em;
}
.core-copy p {
  margin: 0 0 21px;
  color: #d6e4e5;
  font-size: 15px;
}
.core-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid rgba(131,224,227,.24);
  background: rgba(2,10,12,.72);
  color: #9bc1c4;
  font: 700 8px/1 var(--mono);
  letter-spacing: .12em;
}
.core-status i {
  width: 5px;
  height: 5px;
  border-radius:50%;
  background:#a7fff1;
  box-shadow:0 0 9px #a7fff1;
}

.platform-line {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 27px;
  transform: translateX(-50%);
  margin: 0;
  color: var(--accent);
  font: 700 14px/1 var(--mono);
  letter-spacing: .15em;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(131,224,227,.12);
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-height: 760px) and (min-width: 681px) {
  .system-stage { width: min(70vh, 660px); top: 51%; }
  .site-header { top: 16px; }
  .platform-line { bottom: 20px; font-size: 11px; }
}

@media (max-width: 680px) {
  body { overflow: hidden; }
  .universe-frame { inset: 7px; }
  .uf-top,.uf-bottom { left:25px; right:25px; }
  .uf-left,.uf-right { top:25px; bottom:25px; }
  .uf-corner { width:23px; height:23px; }
  .uf-ticks { width:120px; }
  .site-header { left:22px; right:22px; top:17px; height:42px; }
  .brand { gap:12px; font-size:13px; letter-spacing:.1em; }
  .brand-mark { width:15px; height:15px; border-width:2px; }
  .enter-button { min-width:82px; height:42px; font-size:11px; }
  .universe-landing { min-height: 540px; }
  .system-stage { width: 104vw; top: 50%; }
  .universe-core { width: 310px; height:310px; }
  .core-planet { width:215px; height:215px; }
  .core-copy h1 { font-size:40px; }
  .core-copy p { font-size:13px; }
  .world-node { transform: scale(.9); }
  .node-play { transform:translateX(-50%) scale(.9); top:7%; }
  .node-social { left:11%; }
  .node-content { right:11%; }
  .node-options { right:15%; }
  .node-information { left:18%; }
  .platform-line { bottom:22px; font-size:8.5px; letter-spacing:.09em; }
}

@media (max-width: 440px) {
  .brand span:last-child { font-size: 11px; }
  .enter-button { min-width: 70px; }
  .system-stage { width: 114vw; }
  .world-node small { display:none; }
  .world-node span { font-size:9px; }
  .universe-core { width:280px; height:280px; }
  .core-planet { width:196px; height:196px; }
  .core-kicker { font-size:8px; }
  .core-copy h1 { font-size:36px; }
  .core-copy p { font-size:12px; margin-bottom:15px; }
  .core-status { padding:6px 8px; font-size:6.7px; }
  .platform-line { font-size:7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   PROJECT E.R.A.S. : UNIVERSE — INFORMATION SCREEN
   ========================================================= */
.info-page .site-header { z-index: 90; }
.info-landing {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
}
.info-stage {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 49%;
  width: min(70vw, 650px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  filter: drop-shadow(0 26px 54px rgba(0,0,0,.35));
}
.info-axis {
  position: absolute;
  pointer-events: none;
  opacity: .42;
}
.info-axis-x {
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(131,224,227,.13), transparent);
}
.info-axis-y {
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(131,224,227,.13), transparent);
}
.info-center-mark {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(131,224,227,.16);
  transform: rotate(45deg);
  opacity: .24;
}
.info-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(131,224,227,.13);
  border-radius: 50%;
  box-shadow: inset 0 0 38px rgba(40,165,173,.018), 0 0 24px rgba(60,178,184,.02);
  transform-origin: center;
  pointer-events: none;
}
.info-orbit::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border-top: 1px solid rgba(178,241,242,.27);
  border-left-color: transparent;
  border-right-color: transparent;
  opacity: .55;
}
.info-orbit-a {
  width: 82%;
  height: 82%;
  transform: translate(-50%, -50%) rotate(-12deg) scaleY(.57);
}
.info-orbit-b {
  width: 66%;
  height: 66%;
  border-style: dotted;
  transform: translate(-50%, -50%) rotate(31deg) scaleY(.62);
}
.info-orbit-c {
  width: 48%;
  height: 48%;
  transform: translate(-50%, -50%) rotate(-48deg) scaleY(.68);
}
.info-orbiter {
  position: absolute;
  inset: 0;
  animation: infoOrbit 20s linear infinite;
}
.info-orbiter-b { animation-duration: 14s; animation-direction: reverse; }
.info-orbiter-c { animation-duration: 10s; }
.asteroid {
  position: absolute;
  left: 50%;
  top: -11px;
  width: 22px;
  height: 18px;
  transform: translateX(-50%) scaleY(1.65) rotate(13deg);
  border: 1px solid rgba(190,234,235,.32);
  background:
    radial-gradient(circle at 31% 32%, rgba(223,248,248,.26) 0 9%, transparent 10%),
    radial-gradient(circle at 68% 66%, rgba(2,9,11,.52) 0 14%, transparent 15%),
    linear-gradient(145deg, #536b6e, #1a2b2e 62%, #0b1517);
  clip-path: polygon(18% 0, 70% 5%, 100% 32%, 86% 77%, 52% 100%, 11% 86%, 0 42%);
  box-shadow: 0 0 14px rgba(131,224,227,.09), inset -6px -5px 8px rgba(0,0,0,.4);
}
.asteroid-b {
  width: 16px;
  height: 14px;
  top: -8px;
  transform: translateX(-50%) scaleY(1.55) rotate(-19deg);
}
.asteroid-c {
  width: 12px;
  height: 11px;
  top: -6px;
  transform: translateX(-50%) scaleY(1.45) rotate(28deg);
}
.comet::after {
  content: "";
  position: absolute;
  right: 74%;
  top: 44%;
  width: 62px;
  height: 2px;
  transform: translateY(-50%) rotate(-8deg);
  transform-origin: right center;
  background: linear-gradient(90deg, transparent, rgba(131,224,227,.08) 35%, rgba(193,245,245,.52));
  filter: blur(.25px);
  box-shadow: 0 0 8px rgba(131,224,227,.12);
}
.info-readouts {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 30px;
  width: min(860px, calc(100vw - 78px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(131,224,227,.14);
  border-bottom: 1px solid rgba(131,224,227,.10);
  background: linear-gradient(90deg, transparent, rgba(4,15,17,.62) 12%, rgba(4,15,17,.7) 50%, rgba(4,15,17,.62) 88%, transparent);
  backdrop-filter: blur(3px);
}
.info-readout {
  position: relative;
  min-width: 0;
  padding: 14px 20px 13px;
  text-align: center;
}
.info-readout + .info-readout::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(131,224,227,.12);
}
.info-readout span {
  display: block;
  margin-bottom: 6px;
  color: #668387;
  font: 700 8px/1 var(--mono);
  letter-spacing: .22em;
}
.info-readout strong {
  display: block;
  color: #d8e8e9;
  font: 650 15px/1 var(--mono);
  letter-spacing: .11em;
  white-space: nowrap;
}
.info-readout strong b {
  color: var(--accent);
  font: inherit;
}
.version-readout strong {
  color: #58a9ff;
  text-shadow: 0 0 12px rgba(88,169,255,.20);
}
.server-status.status-online,
.server-status[data-server-status="online"] {
  color: #63e69a;
  text-shadow: 0 0 12px rgba(99,230,154,.20);
}
.server-status.status-offline,
.server-status[data-server-status="offline"] {
  color: #ff626d;
  text-shadow: 0 0 12px rgba(255,98,109,.20);
}
@keyframes infoOrbit { to { transform: rotate(360deg); } }

@media (max-height: 760px) and (min-width: 681px) {
  .info-stage { width: min(66vh, 580px); top: 48%; }
  .info-readouts { bottom: 20px; }
}
@media (max-width: 680px) {
  .info-landing { min-height: 540px; }
  .info-stage { width: 92vw; top: 47%; }
  .info-readouts {
    bottom: 19px;
    width: calc(100vw - 52px);
  }
  .info-readout { padding: 11px 8px 10px; }
  .info-readout span { font-size: 6.5px; letter-spacing: .13em; }
  .info-readout strong { font-size: 10px; letter-spacing: .06em; }
}
@media (max-width: 440px) {
  .info-stage { width: 105vw; top: 46%; }
  .info-readouts { width: calc(100vw - 38px); }
  .info-readout { padding-left: 4px; padding-right: 4px; }
  .info-readout strong { font-size: 8.4px; }
  .info-readout span { font-size: 5.8px; }
  .comet::after { width: 40px; }
}

/* =========================================================
   PROJECT E.R.A.S. : UNIVERSE — OPTIONS SCREEN
   ========================================================= */
.options-page .site-header { z-index: 90; }
.options-landing {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
}
.options-ring-field {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(62vw, 590px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  perspective: 900px;
  transform-style: preserve-3d;
  opacity: .72;
  filter: drop-shadow(0 0 24px rgba(91,205,210,.08));
}
.hollow-ring {
  position: absolute;
  inset: 11%;
  border: 1px solid rgba(151,239,241,.22);
  border-radius: 50%;
  transform-style: preserve-3d;
  box-shadow:
    inset 0 0 22px rgba(131,224,227,.025),
    0 0 18px rgba(131,224,227,.035);
}
.hollow-ring::before,
.hollow-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hollow-ring::before {
  inset: 8%;
  border: 1px dashed rgba(131,224,227,.11);
}
.hollow-ring::after {
  left: 50%;
  top: -4px;
  width: 7px;
  height: 7px;
  transform: translateX(-50%);
  background: #b6ffff;
  box-shadow: 0 0 11px rgba(131,224,227,.75);
}
.hollow-ring span {
  position: absolute;
  inset: 20%;
  border: 1px solid rgba(131,224,227,.09);
  border-radius: 50%;
}
.ring-a { animation: erasRingA 17s linear infinite; }
.ring-b { inset: 19%; animation: erasRingB 13s linear infinite reverse; border-style: dotted; }
.ring-c { inset: 27%; animation: erasRingC 11s linear infinite; }
.ring-d { inset: 35%; animation: erasRingD 8s linear infinite reverse; border-color: rgba(151,239,241,.28); }
.ring-core-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(131,224,227,.18);
  box-shadow: 0 0 16px rgba(131,224,227,.06);
}
@keyframes erasRingA {
  from { transform: rotateX(66deg) rotateY(12deg) rotateZ(0deg); }
  to   { transform: rotateX(426deg) rotateY(192deg) rotateZ(360deg); }
}
@keyframes erasRingB {
  from { transform: rotateX(18deg) rotateY(73deg) rotateZ(35deg); }
  to   { transform: rotateX(198deg) rotateY(433deg) rotateZ(-325deg); }
}
@keyframes erasRingC {
  from { transform: rotateX(78deg) rotateY(41deg) rotateZ(-28deg); }
  to   { transform: rotateX(-282deg) rotateY(221deg) rotateZ(332deg); }
}
@keyframes erasRingD {
  from { transform: rotateX(39deg) rotateY(82deg) rotateZ(61deg); }
  to   { transform: rotateX(399deg) rotateY(-278deg) rotateZ(241deg); }
}
.options-panel {
  position: relative;
  z-index: 5;
  width: min(620px, calc(100vw - 80px));
  padding: 28px 32px 30px;
  border-top: 1px solid rgba(131,224,227,.20);
  border-bottom: 1px solid rgba(131,224,227,.14);
  background: linear-gradient(90deg, transparent, rgba(2,10,12,.70) 12%, rgba(3,13,15,.84) 50%, rgba(2,10,12,.70) 88%, transparent);
  backdrop-filter: blur(5px);
}
.options-heading {
  margin-bottom: 25px;
  text-align: center;
}
.options-heading > span {
  color: #668b8e;
  font: 700 8px/1 var(--mono);
  letter-spacing: .24em;
}
.options-heading h1 {
  margin: 8px 0 0;
  color: #dcebec;
  font: 500 25px/1 var(--mono);
  letter-spacing: .25em;
}
.option-stack { display: grid; gap: 20px; }
.option-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
}
.option-label {
  color: #a8bdbf;
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .14em;
}
.range-shell {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
}
.range-shell output {
  color: var(--accent);
  text-align: right;
  font: 700 9px/1 var(--mono);
  letter-spacing: .08em;
}
.options-page input[type="range"] {
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.options-page input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(90deg, rgba(131,224,227,.78) var(--fill, 100%), rgba(131,224,227,.14) var(--fill, 100%));
  box-shadow: 0 0 8px rgba(131,224,227,.08);
}
.options-page input[type="range"]::-webkit-slider-thumb {
  width: 10px;
  height: 18px;
  margin-top: -8px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #a4f3f3;
  border-radius: 0;
  background: #102426;
  box-shadow: 0 0 10px rgba(131,224,227,.28);
}
.options-page input[type="range"]::-moz-range-track {
  height: 2px;
  background: rgba(131,224,227,.14);
}
.options-page input[type="range"]::-moz-range-progress {
  height: 2px;
  background: rgba(131,224,227,.78);
}
.options-page input[type="range"]::-moz-range-thumb {
  width: 9px;
  height: 17px;
  border: 1px solid #a4f3f3;
  border-radius: 0;
  background: #102426;
  box-shadow: 0 0 10px rgba(131,224,227,.28);
}
.options-page input[type="range"]:focus-visible {
  outline: 1px solid rgba(151,239,241,.55);
  outline-offset: 5px;
}
.graphics-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #49666a;
  font: 700 10px/1 var(--mono);
}
.graphics-choice {
  min-width: 70px;
  height: 34px;
  border: 1px solid rgba(131,224,227,.18);
  background: rgba(2,10,12,.58);
  color: #6d898c;
  font: 700 9px/1 var(--mono);
  letter-spacing: .14em;
  cursor: pointer;
}
.graphics-choice:hover,
.graphics-choice:focus-visible {
  border-color: rgba(151,239,241,.48);
  color: #d7f0f1;
  outline: none;
}
.graphics-choice.is-selected,
.graphics-choice[aria-pressed="true"] {
  border-color: rgba(151,239,241,.64);
  background: rgba(131,224,227,.11);
  color: var(--accent);
  box-shadow: inset 0 0 15px rgba(131,224,227,.035), 0 0 12px rgba(131,224,227,.06);
}
@media (max-height: 760px) and (min-width: 681px) {
  .options-ring-field { width: min(66vh, 520px); }
  .options-panel { padding-top: 20px; padding-bottom: 22px; }
  .options-heading { margin-bottom: 18px; }
  .option-stack { gap: 15px; }
}
@media (max-width: 680px) {
  .options-landing { min-height: 560px; }
  .options-ring-field { width: 92vw; opacity: .58; }
  .options-panel { width: calc(100vw - 50px); padding: 23px 16px 25px; }
  .option-row { grid-template-columns: 1fr; gap: 9px; }
  .option-stack { gap: 18px; }
  .option-label { font-size: 8.5px; }
  .graphics-toggle { justify-content: flex-start; }
}
@media (max-width: 440px) {
  .options-ring-field { width: 110vw; }
  .options-panel { width: calc(100vw - 36px); }
  .options-heading h1 { font-size: 20px; }
  .graphics-choice { min-width: 62px; }
}

/* =========================================================
   PROJECT E.R.A.S. : UNIVERSE — SOCIAL SCREEN
   ========================================================= */
.social-page { overflow: hidden; }
.social-page .site-header { z-index: 90; }
.social-landing {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 86px 34px 28px;
}
.social-network-field {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(72vw, 820px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: .42;
  pointer-events: none;
}
.network-orbit {
  position: absolute;
  border: 1px solid rgba(131,224,227,.10);
  border-radius: 50%;
  transform-origin: center;
}
.network-orbit::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(182,255,255,.78);
  box-shadow: 0 0 10px rgba(131,224,227,.45);
}
.network-orbit-a { inset: 3%; animation: socialOrbit 46s linear infinite; }
.network-orbit-b { inset: 17%; border-style: dotted; animation: socialOrbit 31s linear infinite reverse; }
.network-orbit-c { inset: 31%; animation: socialOrbit 23s linear infinite; }
.network-point {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(151,239,241,.55);
  background: #071416;
  transform: rotate(45deg);
  box-shadow: 0 0 13px rgba(131,224,227,.24);
}
.np-a { left: 15%; top: 29%; }
.np-b { right: 18%; top: 19%; }
.np-c { right: 12%; bottom: 28%; }
.np-d { left: 23%; bottom: 18%; }
.network-link {
  position: absolute;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(131,224,227,.08), rgba(131,224,227,.26), rgba(131,224,227,.05));
}
.nl-a { width: 57%; left: 17%; top: 31%; transform: rotate(-10deg); }
.nl-b { width: 55%; left: 28%; top: 62%; transform: rotate(12deg); }
.nl-c { width: 43%; left: 22%; top: 48%; transform: rotate(67deg); }
@keyframes socialOrbit { to { transform: rotate(360deg); } }

.social-console {
  position: relative;
  z-index: 5;
  width: min(1060px, calc(100vw - 72px));
  max-height: calc(100svh - 112px);
  overflow: auto;
  padding: 18px 24px 17px;
  border-top: 1px solid rgba(131,224,227,.24);
  border-bottom: 1px solid rgba(131,224,227,.16);
  background:
    linear-gradient(90deg, transparent, rgba(2,10,12,.76) 5%, rgba(3,13,15,.91) 50%, rgba(2,10,12,.76) 95%, transparent);
  backdrop-filter: blur(7px);
  scrollbar-width: thin;
  scrollbar-color: rgba(131,224,227,.28) transparent;
}
.social-console::-webkit-scrollbar { width: 5px; }
.social-console::-webkit-scrollbar-thumb { background: rgba(131,224,227,.24); }
.social-console-heading { text-align: center; margin-bottom: 12px; }
.social-console-heading > span {
  color: #5e7d80;
  font: 700 7px/1 var(--mono);
  letter-spacing: .25em;
}
.social-console-heading h1 {
  margin: 6px 0 0;
  color: #dcebec;
  font: 500 22px/1 var(--mono);
  letter-spacing: .28em;
}
.social-section {
  position: relative;
  min-width: 0;
  padding: 13px 0 14px;
  border-top: 1px solid rgba(131,224,227,.12);
}
.social-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.social-section-title > span {
  color: rgba(131,224,227,.33);
  font: 800 8px/1 var(--mono);
  letter-spacing: .12em;
}
.social-section-title h2 {
  margin: 0;
  color: #9cb8ba;
  font: 700 10px/1 var(--mono);
  letter-spacing: .22em;
}
.community-table { display: grid; gap: 3px; }
.community-row {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: .75fr 1.75fr 1.25fr 1.05fr .65fr;
  align-items: center;
  gap: 12px;
  padding: 7px 11px;
  border: 1px solid rgba(131,224,227,.09);
  background: rgba(5,16,18,.52);
  color: #8fa9ab;
  text-align: left;
  font: 650 8px/1.1 var(--mono);
  letter-spacing: .08em;
}
button.community-row { cursor: pointer; }
button.community-row:hover,
button.community-row:focus-visible {
  border-color: rgba(151,239,241,.32);
  background: rgba(131,224,227,.055);
  outline: none;
}
.community-row strong { color: #d1e1e2; font: inherit; }
.community-head {
  min-height: 23px;
  border: 0;
  padding-top: 1px;
  padding-bottom: 3px;
  color: #4f6e71;
  background: transparent;
  font-size: 6.6px;
  letter-spacing: .15em;
}
.social-split {
  display: grid;
  grid-template-columns: .9fr 1.35fr;
  gap: 28px;
  border-top: 1px solid rgba(131,224,227,.12);
}
.social-split .social-section { border-top: 0; }
.social-split .connections-section::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: rgba(131,224,227,.10);
}
.account-fields { display: grid; gap: 8px; }
.account-field {
  display: grid;
  grid-template-columns: 108px minmax(0,1fr) 68px;
  align-items: center;
  gap: 8px;
}
.account-field > span {
  color: #789597;
  font: 700 7.6px/1 var(--mono);
  letter-spacing: .13em;
}
.account-field input {
  min-width: 0;
  height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(131,224,227,.16);
  border-radius: 0;
  background: rgba(2,10,12,.68);
  color: #d7e7e8;
  font: 650 9px/1 var(--mono);
  letter-spacing: .08em;
  outline: none;
}
.account-field input:focus {
  border-color: rgba(151,239,241,.50);
  box-shadow: inset 0 0 14px rgba(131,224,227,.04);
}
.account-field-locked input { color: #667f82; border-style: dashed; cursor: not-allowed; }
.account-field small {
  color: #506c6f;
  font: 700 6px/1 var(--mono);
  letter-spacing: .11em;
  text-align: right;
}
.connections-list { display: grid; gap: 6px; }
.connection-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(125px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 5px 8px 5px 10px;
  border: 1px solid rgba(131,224,227,.09);
  background: rgba(5,16,18,.46);
}
.connection-identity { min-width: 0; display: flex; align-items: center; gap: 8px; }
.connection-identity i {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #63e69a;
  box-shadow: 0 0 8px rgba(99,230,154,.45);
}
.connection-identity strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #c6d9da;
  font: 700 8.4px/1 var(--mono);
  letter-spacing: .09em;
  white-space: nowrap;
}
.connection-actions { display: flex; align-items: center; gap: 5px; }
.connection-actions button,
.connection-actions a,
.request-row button {
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid rgba(131,224,227,.14);
  background: rgba(2,10,12,.58);
  color: #78989a;
  font: 700 6.8px/1 var(--mono);
  letter-spacing: .10em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.connection-actions button:hover,
.connection-actions button:focus-visible,
.connection-actions a:hover,
.connection-actions a:focus-visible,
.request-row button:hover,
.request-row button:focus-visible {
  color: var(--accent);
  border-color: rgba(151,239,241,.42);
  background: rgba(131,224,227,.06);
  outline: none;
}
.requests-list { display: grid; gap: 4px; }
.request-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 34px;
  padding: 4px 8px 4px 11px;
  border: 1px solid rgba(131,224,227,.08);
  background: rgba(5,16,18,.42);
  transition: opacity .18s ease, transform .18s ease;
}
.request-row strong {
  color: #c7d9da;
  font: 700 8.5px/1 var(--mono);
  letter-spacing: .09em;
}
.request-row > span {
  color: #718c8f;
  font: 700 7px/1 var(--mono);
  letter-spacing: .12em;
}
.request-row > div { display: flex; align-items: center; gap: 6px; color: #405c5f; }
.request-row .request-accept { color: #63e69a; }
.request-row .request-reject { color: #ff7b84; }
.request-row.is-resolved { opacity: 0; transform: translateX(10px); }
.social-feedback {
  min-height: 15px;
  margin-top: 7px;
  text-align: right;
  color: #4f7275;
  font: 700 6.5px/1 var(--mono);
  letter-spacing: .14em;
}

@media (max-height: 780px) and (min-width: 761px) {
  .social-landing { padding-top: 76px; padding-bottom: 20px; }
  .social-console { max-height: calc(100svh - 98px); padding-top: 13px; padding-bottom: 12px; }
  .social-console-heading { margin-bottom: 8px; }
  .social-section { padding-top: 9px; padding-bottom: 10px; }
  .social-section-title { margin-bottom: 7px; }
}
@media (max-width: 760px) {
  .social-page { overflow: auto; }
  .social-landing {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    padding: 82px 24px 28px;
  }
  .social-network-field { width: 120vw; position: fixed; }
  .social-console {
    width: 100%;
    max-height: none;
    overflow: visible;
    padding-left: 14px;
    padding-right: 14px;
  }
  .social-split { grid-template-columns: 1fr; gap: 0; }
  .social-split .connections-section { border-top: 1px solid rgba(131,224,227,.12); }
  .social-split .connections-section::before { display: none; }
  .community-row { grid-template-columns: .8fr 1.7fr 1.2fr .9fr .55fr; gap: 7px; font-size: 6.6px; }
  .community-head { font-size: 5.4px; }
  .account-field { grid-template-columns: 92px minmax(0,1fr) 62px; }
  .connection-card { grid-template-columns: 1fr; }
  .connection-actions { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .social-landing { padding-left: 17px; padding-right: 17px; }
  .social-console { padding-left: 9px; padding-right: 9px; }
  .social-console-heading h1 { font-size: 18px; }
  .community-table { overflow-x: auto; padding-bottom: 3px; }
  .community-row { min-width: 560px; }
  .account-field { grid-template-columns: 1fr; gap: 5px; }
  .account-field small { text-align: left; }
  .request-row { grid-template-columns: 1fr; gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .request-row > div { justify-content: flex-start; }
}

/* =========================================================
   PROJECT E.R.A.S. : UNIVERSE — CONTENT CREATOR
   DAI-inspired runtime authoring layout over the Universe field.
   ========================================================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.creator-page{overflow:hidden}
.creator-landing{
  position:relative;
  width:100%;
  height:100svh;
  min-height:680px;
  overflow:hidden;
  padding:78px 22px 20px;
  isolation:isolate;
}
.creator-universe-field{
  display:none;
  position:absolute;
  left:50%;
  top:50%;
  z-index:-1;
  width:min(79vw,900px);
  aspect-ratio:1;
  transform:translate(-50%,-49%);
  opacity:.72;
  pointer-events:none;
}
.creator-orbit,.creator-axis{position:absolute;pointer-events:none}
.creator-orbit{border:1px solid rgba(131,224,227,.105);border-radius:50%;box-shadow:inset 0 0 42px rgba(131,224,227,.018)}
.creator-orbit::before,.creator-orbit::after{content:"";position:absolute;width:6px;height:6px;border:1px solid rgba(151,239,241,.44);background:#031012;box-shadow:0 0 8px rgba(131,224,227,.20)}
.creator-orbit::before{left:50%;top:-4px}.creator-orbit::after{right:8%;bottom:18%}
.creator-orbit-outer{inset:0;animation:spin 70s linear infinite}
.creator-orbit-middle{inset:14%;border-style:dashed;animation:spin 48s linear infinite reverse}
.creator-orbit-inner{inset:29%;border-color:rgba(131,224,227,.15);animation:spin 33s linear infinite}
.creator-axis-x{left:-6%;right:-6%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(131,224,227,.08),rgba(131,224,227,.18),rgba(131,224,227,.08),transparent)}
.creator-axis-y{top:-6%;bottom:-6%;left:50%;width:1px;background:linear-gradient(180deg,transparent,rgba(131,224,227,.08),rgba(131,224,227,.18),rgba(131,224,227,.08),transparent)}
.creator-center-reticle{position:absolute;left:50%;top:50%;width:122px;height:122px;transform:translate(-50%,-50%);border:1px solid rgba(131,224,227,.10);border-radius:50%}
.creator-center-reticle::before,.creator-center-reticle::after{content:"";position:absolute;background:rgba(131,224,227,.13)}
.creator-center-reticle::before{left:50%;top:-20px;bottom:-20px;width:1px}.creator-center-reticle::after{top:50%;left:-20px;right:-20px;height:1px}
.creator-center-reticle i{position:absolute;width:6px;height:6px;border:1px solid rgba(151,239,241,.30)}
.creator-center-reticle i:nth-child(1){left:-3px;top:50%}.creator-center-reticle i:nth-child(2){right:-3px;top:50%}.creator-center-reticle i:nth-child(3){top:-3px;left:50%}.creator-center-reticle i:nth-child(4){bottom:-3px;left:50%}

.creator-workspace{
  position:relative;
  z-index:2;
  width:min(1440px,calc(100vw - 44px));
  height:calc(100svh - 98px);
  min-height:580px;
  margin:0 auto;
  display:grid;
  grid-template-rows:52px minmax(0,1fr) 124px;
  border:1px solid rgba(131,224,227,.18);
  background:linear-gradient(180deg,rgba(2,10,12,.38),rgba(2,8,10,.28));
  box-shadow:0 24px 75px rgba(0,0,0,.30),inset 0 0 80px rgba(131,224,227,.012);
  backdrop-filter:blur(3px);
}
.creator-workspace::before,.creator-workspace::after{content:"";position:absolute;z-index:4;pointer-events:none;width:38px;height:38px;border-color:rgba(151,239,241,.38)}
.creator-workspace::before{left:-1px;top:-1px;border-left:1px solid;border-top:1px solid}
.creator-workspace::after{right:-1px;bottom:-1px;border-right:1px solid;border-bottom:1px solid}
.creator-toolbar{
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto minmax(260px,1fr);
  align-items:center;
  gap:18px;
  padding:0 12px 0 16px;
  border-bottom:1px solid rgba(131,224,227,.16);
  background:rgba(3,12,14,.76);
}
.creator-title-block{min-width:0;display:flex;align-items:center;gap:13px;white-space:nowrap}
.creator-title-block>span{color:#557579;font:700 6.5px/1 var(--mono);letter-spacing:.16em}
.creator-title-block h1{margin:0;color:#cfe2e3;font:650 11px/1 var(--mono);letter-spacing:.20em}
.creator-view-tabs{display:flex;align-items:center;border:1px solid rgba(131,224,227,.12)}
.creator-tab,.creator-toolbar-actions button,.creator-library-heading button,.viewport-tools button{
  min-height:28px;
  padding:0 10px;
  border:0;
  border-right:1px solid rgba(131,224,227,.10);
  background:rgba(4,14,16,.64);
  color:#607f82;
  font:700 6.8px/1 var(--mono);
  letter-spacing:.12em;
  cursor:pointer;
}
.creator-tab:last-child{border-right:0}
.creator-tab.is-active,.creator-tab:hover,.creator-tab:focus-visible,.creator-toolbar-actions button:hover,.creator-toolbar-actions button:focus-visible,.creator-library-heading button:hover,.creator-library-heading button:focus-visible,.viewport-tools button:hover,.viewport-tools button:focus-visible{
  color:var(--accent);
  background:rgba(131,224,227,.065);
  outline:none;
}
.creator-tab.is-active{box-shadow:inset 0 -1px 0 var(--accent)}
.creator-toolbar-actions{justify-self:end;display:flex;align-items:center;border:1px solid rgba(131,224,227,.12)}
.creator-toolbar-actions button:last-of-type{border-right:0}
.creator-file-input{display:none}

.creator-grid{min-height:0;display:grid;grid-template-columns:226px minmax(360px,1fr) 258px}
.creator-panel{min-width:0;min-height:0;background:rgba(3,12,14,.68);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(131,224,227,.18) transparent}
.creator-browser{border-right:1px solid rgba(131,224,227,.13)}
.creator-inspector{border-left:1px solid rgba(131,224,227,.13)}
.creator-panel-heading{height:39px;display:flex;align-items:center;gap:9px;padding:0 12px;border-bottom:1px solid rgba(131,224,227,.10)}
.creator-panel-heading span{color:rgba(131,224,227,.32);font:800 7px/1 var(--mono);letter-spacing:.13em}
.creator-panel-heading h2{margin:0;color:#91abad;font:700 8px/1 var(--mono);letter-spacing:.18em}
.creator-search{display:block;padding:10px 10px 7px}
.creator-search input{width:100%;height:29px;padding:0 9px;border:1px solid rgba(131,224,227,.11);border-radius:0;background:rgba(1,8,10,.62);color:#b8ccce;font:650 7.5px/1 var(--mono);letter-spacing:.09em;outline:none}
.creator-search input:focus{border-color:rgba(151,239,241,.34)}
.creator-types{display:grid;padding:0 10px 9px}
.creator-types button{min-height:29px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;border:0;border-bottom:1px solid rgba(131,224,227,.065);background:transparent;color:#5a777a;font:700 7px/1 var(--mono);letter-spacing:.11em;cursor:pointer}
.creator-types button b{color:#3b595c;font-weight:700}
.creator-types button:hover,.creator-types button:focus-visible,.creator-types button.is-active{color:#b6cbcd;background:rgba(131,224,227,.045);outline:none}
.creator-types button.is-active{box-shadow:inset 2px 0 0 var(--accent)}
.creator-types button.is-active b{color:var(--accent)}
.creator-definition-zone{border-top:1px solid rgba(131,224,227,.10);padding-top:7px}
.creator-subheading{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;color:#526f72;font:700 6.5px/1 var(--mono);letter-spacing:.14em}
.creator-subheading button{width:24px;height:22px;border:1px solid rgba(131,224,227,.12);background:transparent;color:#769699;cursor:pointer}
.creator-subheading button:hover,.creator-subheading button:focus-visible{color:var(--accent);border-color:rgba(151,239,241,.36);outline:none}
.creator-definition-list{padding:0 10px 10px}
.creator-empty-list{margin:12px 0;color:#38575a;text-align:center;font:700 6.3px/1.4 var(--mono);letter-spacing:.13em}
.creator-definition{width:100%;min-height:34px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:0 8px;border:1px solid rgba(131,224,227,.09);background:rgba(4,14,16,.48);color:#718d90;text-align:left;cursor:pointer}
.creator-definition i{width:7px;height:7px;border:1px solid rgba(131,224,227,.4);transform:rotate(45deg)}
.creator-definition strong{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#b9cdcf;font:700 7.3px/1 var(--mono);letter-spacing:.08em;white-space:nowrap}
.creator-definition small{color:#466568;font:700 5.8px/1 var(--mono);letter-spacing:.10em}
.creator-definition.is-active{border-color:rgba(151,239,241,.28);background:rgba(131,224,227,.045)}

.creator-viewport{position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(7,31,34,.08),transparent 45%)}
.creator-viewport::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(131,224,227,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(131,224,227,.025) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(circle at center,#000,transparent 78%)}
.viewport-telemetry{position:absolute;z-index:4;top:12px;display:grid;gap:3px;color:#426267;font:700 5.7px/1 var(--mono);letter-spacing:.12em;pointer-events:none}
.viewport-telemetry-left{left:14px}.viewport-telemetry-right{right:14px;text-align:right}
.creator-preview-mode,.creator-json-mode{position:absolute;inset:0}
.creator-preview-mode{display:grid;place-items:center}
.creator-preview-origin{position:absolute;left:50%;top:50%;width:74px;height:74px;transform:translate(-50%,-50%);opacity:.56}
.creator-preview-origin i{position:absolute;display:block;transform-origin:left center}
.origin-x{left:50%;top:50%;width:65px;height:1px;background:linear-gradient(90deg,rgba(255,114,114,.55),transparent);transform:rotate(8deg)}
.origin-y{left:50%;top:50%;width:56px;height:1px;background:linear-gradient(90deg,rgba(110,230,157,.50),transparent);transform:rotate(-92deg)}
.origin-z{left:50%;top:50%;width:58px;height:1px;background:linear-gradient(90deg,rgba(100,164,255,.50),transparent);transform:rotate(142deg)}
.creator-preview-empty{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);display:grid;gap:5px;text-align:center;color:#436266;font-family:var(--mono);letter-spacing:.15em;pointer-events:none}
.creator-preview-empty span{font-size:7.2px;font-weight:800}.creator-preview-empty small{font-size:5.7px}
.creator-json-mode{padding:42px 14px 45px;background:rgba(1,7,9,.50)}
.creator-code-heading{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;border:1px solid rgba(131,224,227,.11);border-bottom:0;background:rgba(3,12,14,.78);color:#58777a;font:700 6.4px/1 var(--mono);letter-spacing:.12em}
.creator-code-heading b{color:#62d997;font-weight:700}
.creator-json-mode textarea{width:100%;height:calc(100% - 28px);resize:none;padding:13px;border:1px solid rgba(131,224,227,.11);border-radius:0;background:rgba(0,6,8,.76);color:#a9c5c7;font:500 9px/1.55 var(--mono);outline:none;tab-size:2}
.creator-json-mode textarea:focus{border-color:rgba(151,239,241,.28)}
.viewport-tools{position:absolute;z-index:4;left:50%;bottom:10px;transform:translateX(-50%);display:flex;border:1px solid rgba(131,224,227,.10)}
.viewport-tools button{min-height:25px;font-size:5.8px}

.inspector-state{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:20px;text-align:center;color:#4a686b}
.inspector-empty-mark{display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(131,224,227,.12);border-radius:50%;color:#617f82;font-size:21px;box-shadow:inset 0 0 28px rgba(131,224,227,.025)}
.inspector-state strong{color:#6f8d90;font:700 7.4px/1 var(--mono);letter-spacing:.13em}
.inspector-state span{max-width:170px;font:650 6px/1.5 var(--mono);letter-spacing:.10em}
.inspector-form{padding:8px 10px 14px}
.inspector-group{display:grid;gap:7px;padding:9px 0 12px;border-bottom:1px solid rgba(131,224,227,.08)}
.inspector-group-title{color:#5b797c;font:800 6.2px/1 var(--mono);letter-spacing:.15em}
.inspector-group label{display:grid;grid-template-columns:66px minmax(0,1fr);align-items:center;gap:7px}
.inspector-group label>span,.inspector-triplet>span{color:#506e71;font:700 6px/1 var(--mono);letter-spacing:.09em}
.inspector-group input,.inspector-group select,.inspector-triplet input{min-width:0;height:27px;padding:0 7px;border:1px solid rgba(131,224,227,.10);border-radius:0;background:rgba(1,8,10,.64);color:#9eb8ba;font:650 7px/1 var(--mono);outline:none}
.inspector-group select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#66878a 50%),linear-gradient(135deg,#66878a 50%,transparent 50%);background-position:calc(100% - 10px) 11px,calc(100% - 7px) 11px;background-size:3px 3px,3px 3px;background-repeat:no-repeat}
.inspector-group input:focus,.inspector-group select:focus,.inspector-triplet input:focus{border-color:rgba(151,239,241,.34)}
.inspector-triplet{display:grid;grid-template-columns:66px repeat(3,minmax(0,1fr));align-items:center;gap:4px}
.inspector-triplet input{text-align:center;padding:0 3px}

.creator-library{min-width:0;display:grid;grid-template-columns:1fr auto;grid-template-rows:30px minmax(0,1fr);border-top:1px solid rgba(131,224,227,.14);background:rgba(3,12,14,.78)}
.creator-library-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 13px;border-bottom:1px solid rgba(131,224,227,.08);color:#536f72;font:700 6.5px/1 var(--mono);letter-spacing:.14em}
.creator-library-heading>div{height:100%;display:flex;border-left:1px solid rgba(131,224,227,.08)}
.creator-library-heading button{min-height:29px;font-size:5.8px}
.creator-library-slots{min-width:0;display:grid;grid-template-columns:repeat(6,minmax(78px,1fr));gap:6px;padding:7px 10px 9px;overflow:hidden}
.resource-slot{min-width:0;display:grid;place-items:center;align-content:center;gap:4px;border:1px solid rgba(131,224,227,.075);background:rgba(1,8,10,.38);color:#375659;font:700 5.7px/1 var(--mono);letter-spacing:.11em}
.resource-slot b{color:#4e6e71;font-size:13px;font-weight:400}.resource-slot-add{cursor:pointer}.resource-slot-add:hover,.resource-slot-add:focus-visible{border-color:rgba(151,239,241,.25);color:#6f9598;outline:none}.resource-slot-add:hover b{color:var(--accent)}
.creator-status{min-width:190px;display:grid;align-content:center;gap:6px;padding:0 14px;border-left:1px solid rgba(131,224,227,.10);text-align:right;font-family:var(--mono);letter-spacing:.11em}
.creator-status span{color:#3f6265;font-size:5.8px;font-weight:700}.creator-status b{color:#78a0a3;font-size:6.3px;font-weight:700}

@media(max-height:760px) and (min-width:901px){
  .creator-landing{padding-top:72px;padding-bottom:14px}
  .creator-workspace{height:calc(100svh - 86px);grid-template-rows:46px minmax(0,1fr) 104px}
  .creator-toolbar{grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr)}
  .creator-library{grid-template-rows:27px minmax(0,1fr)}
}
@media(max-width:1100px){
  .creator-grid{grid-template-columns:190px minmax(320px,1fr) 225px}
  .creator-title-block>span{display:none}
  .creator-toolbar{grid-template-columns:1fr auto 1fr}
  .creator-library-slots{grid-template-columns:repeat(4,minmax(76px,1fr))}
  .creator-library-slots .resource-slot:nth-child(n+5){display:none}
}
@media(max-width:900px){
  .creator-page{overflow:auto}
  .creator-landing{height:auto;min-height:100svh;overflow:visible;padding:80px 18px 22px}
  .creator-universe-field{position:fixed;width:112vw}
  .creator-workspace{width:100%;height:auto;min-height:calc(100svh - 102px);grid-template-rows:auto auto auto}
  .creator-toolbar{grid-template-columns:1fr auto;min-height:54px;padding:7px 9px 7px 12px}
  .creator-view-tabs{grid-column:1;grid-row:2;justify-self:start}
  .creator-toolbar-actions{grid-column:2;grid-row:1/3}
  .creator-grid{grid-template-columns:170px minmax(0,1fr)}
  .creator-inspector{grid-column:1/-1;border-left:0;border-top:1px solid rgba(131,224,227,.13);max-height:none}
  .creator-viewport{min-height:470px}
  .inspector-state{min-height:150px}
  .inspector-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.inspector-group{border-bottom:0}
  .creator-library{min-height:118px}
}
@media(max-width:620px){
  .creator-landing{padding-left:12px;padding-right:12px}
  .creator-workspace{border-left-color:rgba(131,224,227,.10);border-right-color:rgba(131,224,227,.10)}
  .creator-toolbar{grid-template-columns:1fr;gap:6px;padding:8px}
  .creator-title-block{justify-content:center}.creator-title-block h1{font-size:9px}
  .creator-view-tabs{grid-column:1;grid-row:auto;justify-self:center}
  .creator-toolbar-actions{grid-column:1;grid-row:auto;justify-self:center}
  .creator-grid{grid-template-columns:1fr}
  .creator-browser{border-right:0;border-bottom:1px solid rgba(131,224,227,.13);max-height:280px}
  .creator-types{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}.creator-types button{border:1px solid rgba(131,224,227,.06)}
  .creator-viewport{min-height:390px}
  .creator-inspector{grid-column:1}
  .inspector-form{grid-template-columns:1fr}
  .creator-library{grid-template-columns:1fr;grid-template-rows:30px auto auto}
  .creator-library-heading{grid-column:1}.creator-library-heading>div{display:none}
  .creator-library-slots{grid-template-columns:repeat(3,minmax(70px,1fr));min-height:96px}.creator-library-slots .resource-slot:nth-child(n+4){display:none}
  .creator-status{min-height:52px;border-left:0;border-top:1px solid rgba(131,224,227,.10);text-align:left}
}

/* Content Creator orbital definition editor */
.creator-viewport{
  background:transparent;
}
.creator-viewport::before{
  opacity:.30;
}
.creator-preview-mode{
  overflow:hidden;
}
.creator-preview-system{
  position:absolute;
  left:50%;
  top:50%;
  width:min(82%,62svh,680px);
  max-width:90%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 18px 42px rgba(0,0,0,.25));
}
.preview-ring,.preview-axis,.property-orbit{
  position:absolute;
  pointer-events:none;
}
.preview-ring{
  border:1px solid rgba(131,224,227,.13);
  border-radius:50%;
  box-shadow:inset 0 0 38px rgba(131,224,227,.018),0 0 18px rgba(131,224,227,.025);
}
.preview-ring-outer{inset:3%;border-style:dashed;animation:creatorRingSpin 64s linear infinite}
.preview-ring-middle{inset:17%;border-color:rgba(131,224,227,.10);animation:creatorRingSpinReverse 47s linear infinite}
.preview-ring-inner{inset:31%;border-color:rgba(131,224,227,.16);animation:creatorRingSpin 32s linear infinite}
.preview-axis-x{left:1%;right:1%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(131,224,227,.07),rgba(131,224,227,.16),rgba(131,224,227,.07),transparent)}
.preview-axis-y{top:1%;bottom:1%;left:50%;width:1px;background:linear-gradient(180deg,transparent,rgba(131,224,227,.07),rgba(131,224,227,.16),rgba(131,224,227,.07),transparent)}
.creator-content-preview{
  position:absolute;
  left:50%;
  top:50%;
  width:28%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(131,224,227,.055);
  box-shadow:0 0 70px rgba(66,185,191,.035),inset 0 0 45px rgba(131,224,227,.018);
  pointer-events:none;
}
.creator-content-preview::before,.creator-content-preview::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:rgba(131,224,227,.075);
  transform:translate(-50%,-50%);
}
.creator-content-preview::before{width:1px;height:134%}
.creator-content-preview::after{width:134%;height:1px}
.property-orbit{
  border-radius:50%;
  pointer-events:none;
}
.property-orbit-a{inset:5%;animation:creatorNodeOrbitA 54s linear infinite}
.property-orbit-b{inset:18%;animation:creatorNodeOrbitB 43s linear infinite}
.property-orbit-c{inset:31%;animation:creatorNodeOrbitA 34s linear infinite}
.property-node-anchor{
  position:absolute;
  width:1px;
  height:1px;
  pointer-events:auto;
}
.property-node-top{left:50%;top:0;transform:translate(-50%,-50%)}
.property-node-bottom{left:50%;bottom:0;transform:translate(-50%,50%)}
.property-node-left{left:0;top:50%;transform:translate(-50%,-50%)}
.property-node-right{right:0;top:50%;transform:translate(50%,-50%)}
.property-node{
  position:absolute;
  left:50%;
  top:50%;
  width:44px;
  height:44px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  background:transparent;
  color:#b8d6d8;
  cursor:pointer;
  pointer-events:auto;
}
.property-orbit-a .property-node,.property-orbit-c .property-node{animation:creatorNodeCounterA 54s linear infinite}
.property-orbit-c .property-node{animation-duration:34s}
.property-orbit-b .property-node{animation:creatorNodeCounterB 43s linear infinite}
.property-node i{
  width:12px;
  height:12px;
  display:block;
  border:1px solid rgba(151,239,241,.68);
  border-radius:50%;
  background:rgba(2,12,14,.92);
  box-shadow:0 0 11px rgba(131,224,227,.35),inset 0 0 6px rgba(131,224,227,.12);
  transition:transform .14s ease,background-color .14s ease,box-shadow .14s ease;
}
.property-node span{
  position:absolute;
  left:50%;
  top:39px;
  transform:translateX(-50%) translateY(3px);
  opacity:0;
  visibility:hidden;
  white-space:nowrap;
  padding:5px 7px;
  border:1px solid rgba(131,224,227,.18);
  background:rgba(2,10,12,.90);
  color:#c7dcde;
  font:750 6.5px/1 var(--mono);
  letter-spacing:.13em;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
  pointer-events:none;
  transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
}
.property-node:hover i,.property-node:focus-visible i,.property-node.is-selected i{
  transform:scale(1.35);
  background:rgba(131,224,227,.18);
  box-shadow:0 0 16px rgba(131,224,227,.55),inset 0 0 8px rgba(131,224,227,.18);
}
.property-node:hover span,.property-node:focus-visible span{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.property-node:focus-visible{outline:none}
.property-orbit:has(.property-node:hover),.property-orbit:has(.property-node:focus-visible){animation-play-state:paused}
.property-orbit:has(.property-node:hover) .property-node,.property-orbit:has(.property-node:focus-visible) .property-node{animation-play-state:paused}
.inspector-color{
  width:100%;
  padding:2px!important;
  cursor:pointer;
}
@keyframes creatorRingSpin{to{transform:rotate(360deg)}}
@keyframes creatorRingSpinReverse{to{transform:rotate(-360deg)}}
@keyframes creatorNodeOrbitA{to{transform:rotate(360deg)}}
@keyframes creatorNodeOrbitB{to{transform:rotate(-360deg)}}
@keyframes creatorNodeCounterA{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes creatorNodeCounterB{to{transform:translate(-50%,-50%) rotate(360deg)}}

@media(max-width:900px){
  .creator-preview-system{width:min(86%,58svh,610px);max-width:94%}
}
@media(max-width:620px){
  .creator-preview-system{height:auto;width:92%;max-width:none;aspect-ratio:1}
  .property-node span{font-size:6px}
}
@media(prefers-reduced-motion:reduce){
  .preview-ring,.property-orbit,.property-node{animation:none!important}
}