.nearby-row { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border: 0; border-bottom: 1px solid var(--noxa-line); background: transparent; color: #d3deeb; font: 10px var(--noxa-font); text-align: left; cursor: pointer; transition: color .2s ease; }.nearby-row:hover { color: var(--noxa-cyan); }.nearby-row span:last-child { color: var(--noxa-cyan); font-variant-numeric: tabular-nums; }.nearby-detail { display: grid; gap: 5px; padding: 12px 10px; border-bottom: 1px solid var(--noxa-line); background: rgba(114, 231, 224, .035); }.nearby-detail strong { color: #dce5ef; font-size: 10px; font-weight: 500; }.nearby-detail span { color: #8290a3; font: 9px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }.nearby-empty { margin: 15px 0; color: #718096; font-size: 11px; }.nearby-error { color: #e5a597; font-size: 11px; }
:root {
  --noxa-bg: #080b12;
  --noxa-panel: rgba(15, 20, 31, 0.86);
  --noxa-line: rgba(157, 181, 214, 0.15);
  --noxa-text: #edf3fc;
  --noxa-muted: #8390a6;
  --noxa-cyan: #72e7e0;
  --noxa-gold: #e4c27d;
  --noxa-font: "Avenir Next", "Segoe UI", sans-serif;
  color-scheme: dark;
}

html, body { min-height: 100%; background: var(--noxa-bg); color: var(--noxa-text); font-family: var(--noxa-font); }
body { overflow-x: hidden; background: radial-gradient(ellipse at 52% 8%, #142033 0, #0a0e18 42%, #070910 100%); }
.bg-mesh { background: radial-gradient(ellipse at 50% 5%, rgba(33, 70, 94, .22), transparent 58%), radial-gradient(ellipse at 88% 60%, rgba(82, 54, 88, .10), transparent 44%), #080b12; }
.app { max-width: none; width: 100%; min-height: 100dvh; margin: 0; padding: 0 0 28px; }
.app > :not(.bg-mesh):not(#noxaApp) { display: none !important; }
.noxa-app { min-height: 100dvh; }
.noxa-header { height: 76px; padding: 0 clamp(20px, 5vw, 84px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(161, 182, 210, .11); background: rgba(8, 11, 18, .68); backdrop-filter: blur(18px); position: relative; z-index: 4; }
.noxa-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--noxa-text); width: fit-content; }
.brand-mark { width: 27px; height: 27px; display: block; position: relative; transform: rotate(-24deg); }
.brand-mark i { position: absolute; inset: 2px 8px; border: 1px solid var(--noxa-cyan); border-radius: 50%; box-shadow: 0 0 12px rgba(114, 231, 224, .25); }
.brand-mark i:nth-child(2) { transform: rotate(60deg); }.brand-mark i:nth-child(3) { transform: rotate(-60deg); }
.brand-word { font-size: 18px; font-weight: 700; letter-spacing: .17em; }.brand-period { color: var(--noxa-cyan); }
.noxa-nav { align-self: stretch; display: flex; align-items: stretch; gap: 34px; }
.nav-link { position: relative; display: flex; align-items: center; color: #8490a3; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: color .2s ease; }
.nav-link:hover, .nav-link.active { color: var(--noxa-text); }.nav-link.active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--noxa-cyan); box-shadow: 0 0 12px rgba(114, 231, 224, .6); }
.header-status { justify-self: end; display: flex; align-items: center; gap: 9px; color: #91a19f; font-size: 9px; letter-spacing: .15em; }
.status-dot, .live-pulse { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--noxa-cyan); box-shadow: 0 0 10px rgba(114, 231, 224, .8); }
.noxa-main { width: min(1360px, calc(100% - 64px)); margin: 0 auto; }
.welcome-row { min-height: 170px; padding: 37px 4px 26px; display: flex; justify-content: space-between; align-items: end; animation: reveal .65s both; }
.eyebrow { margin: 0; display: flex; align-items: center; gap: 9px; color: var(--noxa-cyan); font-size: 9px; line-height: 1.4; letter-spacing: .17em; font-weight: 600; }
.eyebrow-line { width: 18px; height: 1px; background: var(--noxa-cyan); }
.welcome-row h1 { margin: 11px 0 7px; font-size: clamp(34px, 4vw, 51px); line-height: 1.05; font-weight: 500; letter-spacing: 0; }
.welcome-row h1 span { color: #9eafc6; font-weight: 300; }
.welcome-copy { margin: 0; color: var(--noxa-muted); font-size: 13px; }
.level-block { display: grid; grid-template-columns: auto auto; column-gap: 11px; align-items: center; border-left: 1px solid var(--noxa-line); padding: 5px 0 5px 20px; }
.level-label { grid-column: 1 / -1; color: var(--noxa-muted); font-size: 9px; letter-spacing: .14em; }.level-block strong { color: var(--noxa-gold); font-size: 28px; font-weight: 500; line-height: 1.15; }.level-xp { color: var(--noxa-muted); font-size: 11px; }
.universe-layout { display: grid; grid-template-columns: minmax(0, 1fr) 284px; gap: 15px; animation: reveal .72s .08s both; }
.universe-stage { height: clamp(390px, 42vw, 530px); min-width: 0; position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(139, 170, 205, .18); background: radial-gradient(ellipse at 50% 47%, rgba(36, 66, 91, .37), transparent 48%), linear-gradient(145deg, #101a29, #0a0e18 68%); }
.stage-grid { position: absolute; inset: 0; z-index: -1; opacity: .17; background-image: linear-gradient(rgba(125, 157, 191, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(125, 157, 191, .14) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(ellipse, black, transparent 74%); }
.stage-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 38%, rgba(7, 10, 17, .34) 100%); }
.universe-canvas { position: absolute; inset: 0; z-index: 0; touch-action: none; cursor: grab; }.universe-canvas:active { cursor: grabbing; }.universe-canvas canvas { width: 100%; height: 100%; display: block; }
.stage-topline, .stage-bottomline { position: absolute; z-index: 2; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; color: #8b9ab0; font-size: 8px; letter-spacing: .16em; pointer-events: none; }.stage-topline { top: 17px; }.stage-topline > span:first-child { display: flex; align-items: center; gap: 8px; }.stage-bottomline { bottom: 16px; color: #657286; }.stage-coordinates { position: absolute; z-index: 2; left: 20px; bottom: 43px; font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; color: rgba(174, 193, 214, .62); pointer-events: none; }
.scene-controls { position: absolute; z-index: 3; top: 50%; right: 16px; display: grid; gap: 6px; transform: translateY(-50%); }.scene-controls button { width: 31px; height: 31px; padding: 0; border: 1px solid rgba(163, 186, 215, .2); border-radius: 3px; color: #a8b8cb; background: rgba(10, 16, 26, .72); font: 18px var(--noxa-font); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }.scene-controls button:hover { border-color: var(--noxa-cyan); color: var(--noxa-cyan); background: rgba(23, 46, 57, .8); }
.load-state { position: absolute; z-index: 3; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; background: rgba(8, 12, 20, .75); backdrop-filter: blur(5px); text-align: center; transition: opacity .3s, visibility .3s; }.load-state.hidden { display: flex !important; visibility: hidden; opacity: 0; }.load-state strong { font-size: 14px; font-weight: 500; }.load-state > span:not(.loader-orbit) { color: var(--noxa-muted); font-size: 11px; }.load-state.error { background: rgba(8, 12, 20, .91); }.load-state.error strong { color: #f0ad9e; }.retry-button { margin-top: 9px; padding: 10px 16px; border: 1px solid rgba(114, 231, 224, .5); border-radius: 2px; background: rgba(37, 82, 86, .35); color: var(--noxa-cyan); font: 11px var(--noxa-font); letter-spacing: .04em; cursor: pointer; }.loader-orbit { width: 39px; height: 39px; margin-bottom: 8px; border: 1px solid rgba(114, 231, 224, .17); border-top-color: var(--noxa-cyan); border-radius: 50%; animation: orbit .9s linear infinite; position: relative; }.loader-orbit i { position: absolute; width: 5px; height: 5px; right: 2px; top: 4px; border-radius: 50%; background: var(--noxa-gold); box-shadow: 0 0 8px var(--noxa-gold); }
.system-rail { min-height: 390px; padding: 22px 21px 17px; display: flex; flex-direction: column; border: 1px solid var(--noxa-line); background: linear-gradient(160deg, rgba(17, 24, 37, .96), rgba(11, 15, 24, .96)); }.rail-heading { display: flex; align-items: center; justify-content: space-between; }.rail-heading .eyebrow { color: #93a2b7; }.resource-glyph, .system-sigil { color: var(--noxa-gold); font-size: 18px; }.resource-primary { display: flex; align-items: center; gap: 14px; margin: 22px 0 18px; }.resource-primary > div { display: grid; gap: 2px; }.resource-primary strong { font-size: 27px; font-weight: 500; font-variant-numeric: tabular-nums; }.resource-primary span:not(.resource-icon) { color: var(--noxa-muted); font-size: 11px; }.resource-icon { position: relative; width: 31px; height: 31px; flex: 0 0 31px; }.shard-icon::before { content: ""; position: absolute; inset: 4px; transform: rotate(45deg); border: 1px solid var(--noxa-cyan); background: linear-gradient(135deg, rgba(114, 231, 224, .26), transparent 70%); box-shadow: 0 0 14px rgba(114, 231, 224, .18); }.resource-progress > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--noxa-muted); font-size: 10px; }.resource-progress strong { color: #c3d0de; font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }.progress-track { height: 3px; margin-top: 10px; background: rgba(160, 180, 203, .12); }.progress-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #69d8d0, #d1c185); box-shadow: 0 0 8px rgba(114, 231, 224, .42); transition: width .5s ease; }.rail-divider { margin: 23px 0 18px; border-top: 1px solid var(--noxa-line); }.system-facts { display: grid; gap: 12px; margin: 19px 0 20px; }.system-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }.system-facts span { color: var(--noxa-muted); font-size: 10px; }.system-facts strong { color: #dce5ef; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }.explore-button { min-height: 41px; display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 0 11px; border: 1px solid rgba(114, 231, 224, .42); border-radius: 2px; background: linear-gradient(100deg, rgba(53, 114, 116, .18), rgba(21, 43, 52, .2)); color: #bceae4; text-align: left; font: 11px var(--noxa-font); cursor: pointer; transition: background .2s, border-color .2s; }.explore-button:hover { border-color: var(--noxa-cyan); background: rgba(55, 112, 113, .28); }.explore-button > span { font-size: 17px; }.explore-button i { margin-left: auto; color: var(--noxa-cyan); font-style: normal; }.explore-button:disabled { opacity: .58; cursor: wait; }.rail-note { margin: 10px 0 0; color: #69768a; font-size: 9px; line-height: 1.5; }
.lower-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 48px; padding: 35px 4px 18px; animation: reveal .8s .16s both; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 17px; }.section-heading .eyebrow { color: #8090a5; }.section-heading h2 { margin: 6px 0 0; color: #e4eaf2; font-size: 19px; font-weight: 500; }.section-meta { color: #68768b; font-size: 8px; letter-spacing: .12em; }.object-list { display: grid; gap: 1px; border-top: 1px solid var(--noxa-line); }.object-row { min-height: 59px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--noxa-line); }.object-symbol { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid rgba(228, 194, 125, .45); border-radius: 50%; color: var(--noxa-gold); font-size: 12px; }.object-symbol.planet { border-color: rgba(114, 231, 224, .44); color: var(--noxa-cyan); }.object-name { display: grid; gap: 3px; }.object-name strong { overflow: hidden; color: #d9e1eb; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }.object-name span, .object-coordinate { color: #748197; font-size: 9px; }.object-coordinate { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; text-align: right; }.nearby-results { min-height: 62px; border-top: 1px solid var(--noxa-line); }.nearby-empty { margin: 15px 0; color: #718096; font-size: 11px; }.nearby-row { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--noxa-line); color: #d3deeb; font-size: 10px; }.nearby-row span:last-child { color: var(--noxa-cyan); font-variant-numeric: tabular-nums; }.nearby-error { color: #e5a597; font-size: 11px; }
.noxa-footer { min-height: 48px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--noxa-line); color: #5e6a7c; font-size: 8px; letter-spacing: .13em; }
@keyframes orbit { to { transform: rotate(360deg); } } @keyframes reveal { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1500px) { .noxa-main { width: min(1460px, calc(100% - 96px)); } }
@media (max-width: 760px) {
  .noxa-header { height: 63px; padding: 0 19px; grid-template-columns: 1fr auto; }.brand-word { font-size: 16px; }.noxa-nav { display: none; }.header-status { font-size: 8px; }.noxa-main { width: calc(100% - 32px); }.welcome-row { min-height: 144px; padding: 27px 1px 19px; }.welcome-row h1 { font-size: 35px; }.welcome-copy { max-width: 240px; font-size: 11px; }.level-block { padding-left: 13px; }.level-block strong { font-size: 24px; }.level-xp { font-size: 9px; }.universe-layout { grid-template-columns: 1fr; gap: 10px; }.universe-stage { height: min(112vw, 470px); min-height: 335px; }.system-rail { min-height: 0; padding: 17px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }.system-rail > .rail-heading:nth-of-type(1) { grid-column: 1 / -1; }.resource-primary { margin: 13px 0 8px; }.resource-primary strong { font-size: 23px; }.resource-progress { align-self: center; }.rail-divider { grid-column: 1 / -1; margin: 12px 0 15px; }.system-rail > .rail-heading:nth-of-type(2), .system-facts, .explore-button, .rail-note { grid-column: 1 / -1; }.system-facts { grid-template-columns: 1fr 1fr; gap: 11px 17px; margin: 13px 0 17px; }.system-facts > div:last-child { grid-column: 1 / -1; }.lower-layout { grid-template-columns: 1fr; gap: 30px; padding: 31px 2px 15px; }.section-heading h2 { font-size: 17px; }.section-meta { max-width: 100px; text-align: right; line-height: 1.5; }.noxa-footer { flex-wrap: wrap; gap: 8px; padding: 12px 0; }.noxa-footer span:nth-child(2) { order: 3; width: 100%; }.stage-topline, .stage-bottomline { left: 13px; right: 13px; }.stage-coordinates { left: 13px; bottom: 39px; font-size: 8px; }.scene-controls { right: 10px; }.scene-controls button { width: 29px; height: 29px; }
}
@media (max-width: 380px) { .noxa-main { width: calc(100% - 24px); }.welcome-row h1 { font-size: 31px; }.welcome-copy { max-width: 190px; }.header-status { letter-spacing: .08em; }.system-rail { column-gap: 12px; padding: 14px; }.stage-topline, .stage-bottomline { font-size: 7px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }