:root {
  color-scheme: dark;
  --bg: #061720;
  --panel: #0c2632;
  --panel-strong: #102e3b;
  --line: rgba(139, 229, 239, 0.2);
  --ink: #f6fbfd;
  --muted: #9fb4bd;
  --accent: #67d3e1;
  --accent-strong: #a5f4f7;
  --gold: #ffc72c;
  --danger: #ff5a5f;
  --flat-top-hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

html { background: transparent; }

body {
  background:
    radial-gradient(circle at 50% 32%, rgba(31, 105, 129, 0.3), transparent 34%),
    radial-gradient(circle at 10% 80%, rgba(79, 99, 193, 0.15), transparent 26%),
    linear-gradient(180deg, #071923 0%, #041018 100%);
  color: var(--ink);
}

body.shell-lab-active.shell-overlay-open {
  background: transparent !important;
}

body.shell-lab-active.shell-overlay-open::before,
body.shell-lab-active.shell-overlay-open #starfield,
body.shell-lab-active.shell-overlay-open #cursor-ebee,
body.shell-lab-active.shell-overlay-open #universe-app,
body.shell-lab-active.shell-overlay-open #toast {
  visibility: hidden;
}

button, input, select { font: inherit; }
button { color: inherit; }

#starfield {
  inset: 0;
  pointer-events: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.cursor-ebee {
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));
  left:0;
  opacity:0;
  pointer-events:none;
  position:fixed;
  top:0;
  transform:translate3d(-100px,-100px,0);
  transform-origin:50% 50%;
  transition:opacity .2s ease;
  width:clamp(38px,3.4vw,56px);
  will-change:transform;
  z-index:44;
}
.cursor-ebee.visible { opacity:.92; }

body::before {
  background:
    linear-gradient(rgba(98, 204, 218, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(98, 204, 218, 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  content: "";
  inset: 76px 0 0;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 78%);
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

.app-bar {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgba(4, 18, 27, 0.9);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
  display: flex;
  gap: 22px;
  height: 76px;
  padding: 10px clamp(16px, 2.6vw, 44px);
  position: relative;
  z-index: 30;
}

.brand {
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  gap: 13px;
  min-width: 0;
  padding: 0;
  text-align: left;
}

.brand-copy { display: grid; gap: 1px; }
.brand-copy strong {
  font-size: clamp(15px, 1.25vw, 20px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.brand-copy small { color: var(--muted); font-size: 11px; }

.brand-logo { display:block; flex:0 0 auto; height:52px; object-fit:contain; width:52px; }

.campaign-chip {
  align-items: center;
  background: rgba(255, 199, 44, 0.08);
  border: 1px solid rgba(255, 199, 44, 0.35);
  border-radius: 999px;
  color: #ffe49a;
  display: flex;
  font-size: 12px;
  font-weight: 750;
  gap: 8px;
  letter-spacing: 0.05em;
  max-width: min(38vw, 520px);
  overflow: hidden;
  padding: 8px 13px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.campaign-chip[hidden] { display: none; }
.campaign-chip:not(:disabled) { cursor:pointer; }
.campaign-chip:focus-visible { border-color:var(--gold); outline:2px solid rgba(255,199,44,.25); outline-offset:2px; }

.app-actions {
  display: flex;
  gap: 9px;
  margin-left: auto;
}
.plugin-actions, .plugin-menu-icon { display:contents; }

.app-actions :is(button,a) {
  align-items: center;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(174, 222, 229, 0.24);
  border-radius: 9px;
  color:inherit;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-weight: 800;
  gap: 8px;
  letter-spacing: 0.09em;
  min-height: 42px;
  padding: 9px 14px;
  text-decoration:none;
  text-transform: uppercase;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.app-actions :is(button,a):hover,
.app-actions :is(button,a):focus-visible,
.app-actions button[aria-expanded="true"] {
  background: rgba(103, 211, 225, 0.16);
  border-color: rgba(103, 211, 225, 0.65);
  outline: none;
  transform: translateY(-1px);
}
.app-actions button:disabled { cursor:wait; opacity:.45; transform:none; }
.app-action-icon { fill:none; flex:0 0 auto; height:19px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:19px; }
.app-actions .profile-action { gap:9px; padding:5px 11px 5px 6px; }
.profile-avatar { align-items:center; background:rgba(103,211,225,.12); border:1px solid rgba(103,211,225,.35); border-radius:50%; display:flex; height:31px; justify-content:center; overflow:hidden; width:31px; }
.profile-avatar img { height:38px; object-fit:contain; transform:translateY(5px) scale(1.28); transform-origin:50% 28%; width:38px; }
.profile-action.recognized .profile-avatar img { height:100%; object-fit:cover; transform:none; width:100%; }
.profile-avatar span { align-items:center; background:linear-gradient(145deg,#77dce6,#277c91); color:#04171f; display:flex; font-size:13px; font-weight:900; height:100%; justify-content:center; width:100%; }
.profile-avatar :is(img,span)[hidden] { display:none; }
.profile-action.recognized .profile-avatar { border-color:rgba(139,227,143,.7); box-shadow:0 0 0 2px rgba(139,227,143,.1); }
.active-lab-actions { background:rgba(255,255,255,.055); border:1px solid rgba(174,222,229,.24); border-radius:9px; display:flex; gap:0; overflow:hidden; }
.active-lab-actions[hidden], .active-lab-actions [hidden] { display:none; }
.app-actions .active-lab-actions button { background:transparent; border:0; border-radius:0; min-height:40px; transform:none; }
.app-actions .resume-lab-action { color:#8be8f1; }
.app-actions .resume-lab-action:hover, .app-actions .resume-lab-action:focus-visible { background:rgba(103,211,225,.16); }
.app-actions .stop-lab-action { border-left:1px solid rgba(174,222,229,.2); color:#ff9da1; }
.app-actions .stop-lab-action:hover, .app-actions .stop-lab-action:focus-visible { background:rgba(255,90,95,.16); }
.app-actions .active-lab-actions.stop-only .stop-lab-action { border-left:0; }

#universe-app {
  height: calc(100vh - 76px);
  position: relative;
  z-index: 2;
}

.view { height: 100%; position: relative; }
.view[hidden], .loading-view[hidden] { display: none; }

.loading-view {
  inset: 0;
  position: absolute;
}

.overview-view {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(520px, 1.18fr);
  gap: clamp(12px, 3vw, 54px);
  margin: 0 auto;
  max-width: 1580px;
  padding: 24px clamp(22px, 4vw, 70px) 20px;
  transition:margin-right .28s cubic-bezier(.2,.8,.2,1),max-width .28s cubic-bezier(.2,.8,.2,1);
}

.overview-space { inset:0; overflow:hidden; pointer-events:none; position:absolute; z-index:0; }
.overview-heading { align-self:center; max-width:490px; position:relative; z-index:2; }
.overview-planet {
  animation:planet-drift var(--planet-drift-duration,42s) ease-in-out infinite;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.34),transparent 12%),radial-gradient(circle at 40% 38%,var(--planet-light),var(--planet-dark) 68%);
  border:1px solid rgba(190,235,245,.14);
  border-radius:50%;
  box-shadow:inset -12px -10px 22px rgba(0,0,0,.28),0 0 35px color-mix(in srgb,var(--planet-light) 20%,transparent);
  opacity:.28;
  position:absolute;
}
.overview-planet::after { border:2px solid rgba(178,224,235,.18); border-radius:50%; content:""; inset:42% -35%; position:absolute; transform:rotate(-13deg); }
.overview-planet-one { --planet-dark:#173c67; --planet-drift-duration:28s; --planet-light:#4e91c4; --planet-rotate:5deg; --planet-scale:1.04; --planet-x-a:26px; --planet-x-b:-14px; --planet-y-a:-20px; --planet-y-b:11px; animation-delay:-9s; height:82px; right:18%; top:9%; width:82px; }
.overview-planet-two { --planet-dark:#58355f; --planet-drift-duration:34s; --planet-light:#a66ba5; --planet-rotate:-6deg; --planet-scale:1.05; --planet-x-a:-20px; --planet-x-b:13px; --planet-y-a:24px; --planet-y-b:-10px; animation-delay:-21s; height:48px; left:7%; top:16%; width:48px; }
.overview-planet-three { --planet-dark:#495b2d; --planet-drift-duration:39s; --planet-light:#c7df6a; --planet-rotate:5deg; --planet-scale:1.035; --planet-x-a:24px; --planet-x-b:-13px; --planet-y-a:18px; --planet-y-b:-15px; animation-delay:-30s; bottom:10%; height:62px; right:4%; width:62px; }
.overview-astronaut-orbit {
  animation:astronaut-orbit 15s ease-in-out infinite;
  left:40%;
  position:absolute;
  top:4%;
}
.overview-astronaut {
  animation:astronaut-roll 7.5s ease-in-out infinite;
  display:block;
  filter:drop-shadow(0 22px 25px rgba(0,0,0,.4));
  opacity:.86;
  transform-origin:55% 50%;
  width:clamp(144px,min(12vw,19.5vh),222px);
}
@keyframes planet-drift {
  0%,100% { transform:translate3d(0,0,0) rotate(0) scale(1); }
  38% { transform:translate3d(var(--planet-x-a),var(--planet-y-a),0) rotate(var(--planet-rotate)) scale(var(--planet-scale)); }
  72% { transform:translate3d(var(--planet-x-b),var(--planet-y-b),0) rotate(0) scale(1); }
}
@keyframes astronaut-orbit {
  0%,100% { transform:translate3d(2vw,1vw,0); }
  30% { transform:translate3d(.4vw,-1.6vh,0); }
  62% { transform:translate3d(-1vw,-.5vh,0); }
  82% { transform:translate3d(.5vw,1.1vh,0); }
}
@keyframes astronaut-roll {
  0%,100% { transform:rotate(14deg); }
  45% { transform:rotate(9deg); }
  72% { transform:rotate(17deg); }
}
.eyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  margin: 0 0 7px;
  text-transform: uppercase;
}
.overview-heading h1, .zone-toolbar h1 {
  font-size: clamp(36px, 4vw, 64px);
  letter-spacing: -.035em;
  line-height: .98;
  margin: 0;
}
.overview-heading > .overview-intro,
.zone-toolbar > div > p:last-child {
  color: var(--muted);
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.6;
  margin: 20px 0 0;
}
.overview-inline-link { background:none; border:0; color:#77dcef; cursor:pointer; font:inherit; padding:0; text-decoration-line:underline; text-decoration-style:dotted; text-decoration-thickness:1px; text-underline-offset:4px; }
.overview-inline-link:hover, .overview-inline-link:focus-visible { color:#b5f7ff; text-decoration-style:solid; }
.overview-inline-link:focus-visible { border-radius:2px; outline:2px solid rgba(103,211,225,.28); outline-offset:3px; }
.overview-inline-link:disabled { color:var(--muted); cursor:wait; opacity:.6; }

.achievement-slot { margin-top:26px; }
.achievement-slot[hidden] { display:none; }
.achievement-card {
  align-items:center;
  background:linear-gradient(120deg,rgba(255,255,255,.055),rgba(103,211,225,.025));
  border:1px solid rgba(149,213,222,.2);
  border-radius:14px;
  color:inherit;
  display:grid;
  gap:14px;
  grid-template-columns:72px minmax(0,1fr) auto;
  max-width:455px;
  padding:11px 14px 11px 10px;
  text-decoration:none;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.achievement-card.linked { cursor:pointer; }
.achievement-card.linked:hover { background:linear-gradient(120deg,rgba(255,199,44,.09),rgba(103,211,225,.045)); border-color:rgba(255,199,44,.45); transform:translateY(-2px); }
.achievement-visual { height:72px; position:relative; width:72px; }
.achievement-visual img { height:100%; object-fit:contain; width:100%; }
.achievement-visual b { align-items:center; background:#b8ccfb; border:2px solid #eef3ff; border-radius:50%; bottom:2px; box-shadow:0 3px 9px rgba(0,0,0,.4); color:#171a3a; display:flex; font-size:13px; height:27px; justify-content:center; position:absolute; right:0; width:27px; }
.achievement-card.explorer .achievement-visual b { background:var(--gold); border-color:#fff0b2; color:#14212a; }
.achievement-copy { min-width:0; }
.achievement-copy small { color:var(--accent); display:block; font-size:8px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.achievement-copy strong { display:block; font-size:15px; margin-top:3px; }
.achievement-copy > span { color:var(--muted); display:block; font-size:10px; margin-top:4px; }
.achievement-action { color:var(--gold); font-size:9px; font-weight:800; white-space:nowrap; }

.zone-constellation {
  --tilt-x:0deg;
  --tilt-y:0deg;
  aspect-ratio: 760 / 690;
  justify-self: center;
  max-height: min(710px, calc(100vh - 105px));
  max-width: 782px;
  perspective:1100px;
  position: relative;
  z-index:2;
  width: 100%;
}
.constellation-tilt {
  inset:0;
  position:absolute;
  transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style:preserve-3d;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.zone-constellation:hover .constellation-tilt { transition-duration:.12s; }
.overview-view:not([hidden]) .zone-constellation,
.zone-view:not([hidden]) .logo-navigator { view-transition-name:cilium-navigation; }
::view-transition-group(cilium-navigation) {
  animation-duration:.62s;
  animation-timing-function:cubic-bezier(.22,.8,.26,1);
}

.constellation-lines { height: 100%; inset: 0; pointer-events:none; position: absolute; width: 100%; }
.constellation-lines path {
  fill: none;
  filter: drop-shadow(0 0 6px rgba(103, 211, 225, .35));
  stroke: rgba(103, 211, 225, 0.26);
  stroke-width: 4;
}

.zone-card {
  --zone-color: #67d3e1;
  background: transparent;
  border: 0;
  cursor: pointer;
  filter: drop-shadow(0 10px 11px rgba(0,0,0,.3));
  height: 33.8%;
  left: calc(var(--x) * 1%);
  padding: 24px 20px;
  position: absolute;
  top: calc(var(--y) * 1%);
  transform: translate(-50%, -50%);
  transition: filter .2s ease, transform .2s ease;
  width: 35.42%;
}

.zone-card::before {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--zone-color) 72%, white) 0%,
    var(--zone-color) 68%,
    color-mix(in srgb, var(--zone-color) 42%, #241d19) 68%,
    color-mix(in srgb, var(--zone-color) 32%, #171818) 100%
  );
  clip-path: var(--flat-top-hex);
  content: "";
  inset: 0;
  position: absolute;
  z-index: -2;
}
.zone-card::after {
  background:
    radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--zone-color) 28%, transparent), transparent 44%),
    #09222d;
  clip-path: var(--flat-top-hex);
  content: "";
  inset: 5px 5px 13px;
  position: absolute;
  z-index: -1;
}
.zone-card-copy { display:block; position:relative; z-index:1; }
.zone-card.has-art { background:transparent; }
.zone-card.has-art::before { display:none; }
.zone-card.has-art::after {
  background:var(--zone-image) center / cover no-repeat;
  inset:0;
}
.zone-card-animation {
  clip-path:var(--flat-top-hex);
  inset:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  position:absolute;
  transition:opacity .18s ease;
  z-index:0;
}
.zone-card-animation img { display:block; height:100%; object-fit:cover; width:100%; }
.zone-card.animation-active .zone-card-animation { opacity:1; }
.zone-card.has-art .zone-card-copy {
  backdrop-filter:blur(7px);
  background:rgba(4,20,28,.68);
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  bottom:11%;
  box-shadow:0 7px 18px rgba(0,0,0,.3);
  left:16%;
  padding:9px 10px 8px;
  position:absolute;
  right:16%;
}
.zone-card.has-art .zone-icon { display:none; }
.zone-card.has-art strong { text-shadow:0 2px 5px rgba(0,0,0,.75); }
.zone-card.has-art small { color:rgba(238,248,251,.85); margin-top:4px; }
.zone-card.has-art .zone-progress-track { margin-top:6px; width:82%; }
.zone-card:hover, .zone-card:focus-visible {
  filter:
    drop-shadow(0 10px 11px rgba(0,0,0,.3))
    drop-shadow(0 0 19px color-mix(in srgb, var(--zone-color) 75%, transparent));
  outline: none;
  transform: translate(-50%, -50%) scale(1.07);
  z-index: 5;
}
.zone-card .zone-icon { display: block; font-size: clamp(24px, 2.4vw, 38px); margin-bottom: 7px; }
.zone-card strong { display: block; font-size: clamp(13px, 1.1vw, 17px); line-height: 1.12; }
.zone-card small { color: var(--muted); display: block; font-size: 10px; margin-top: 7px; }
.zone-card .zone-progress-track {
  background: rgba(255,255,255,.1);
  border-radius: 8px;
  display: block;
  height: 4px;
  margin: 9px auto 0;
  overflow: hidden;
  width: 65%;
}
.zone-card .zone-progress-track i {
  background: var(--zone-color);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.zone-view { padding: 26px clamp(18px, 3vw, 48px) 26px; }
.zone-toolbar {
  align-items: flex-start;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  margin: 0 auto 17px;
  max-width: 1540px;
}
.zone-toolbar h1 { font-size: clamp(30px, 3.2vw, 52px); }
.zone-toolbar > div > p:last-child { margin-top: 8px; }
.journey-context {
  align-items:center;
  background:rgba(6,25,34,.78);
  border:1px solid rgba(103,211,225,.25);
  border-radius:14px;
  display:grid;
  gap:18px;
  grid-template-columns:minmax(320px,1fr) auto;
  max-width:560px;
  padding:15px 16px;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.journey-context[hidden] { display:none; }
.journey-context-summary { align-items:center; background:transparent; border:0; cursor:pointer; display:grid; gap:14px; grid-template-columns:64px minmax(0,1fr); min-width:0; padding:0; text-align:left; }
.journey-context-summary:hover strong { color:var(--accent); }
.journey-context-image { height:64px; object-fit:contain; width:64px; }
.journey-context-summary > span > span { color:var(--accent); display:block; font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.journey-context strong { display:block; font-size:16px; line-height:1.2; margin-top:3px; }
.journey-context small { color:var(--muted); display:block; font-size:12px; line-height:1.35; margin-top:4px; }
.journey-context-actions { display:flex; gap:7px; }
.journey-context-actions button { background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:8px; cursor:pointer; font-size:14px; font-weight:750; min-height:42px; min-width:42px; padding:9px 11px; }
.journey-context-actions button:disabled { cursor:default; opacity:.3; }
.journey-context-actions button:hover:not(:disabled) { background:rgba(103,211,225,.13); }
.journey-context-actions .journey-exit { color:#ffc9cc; font-size:12px; padding-inline:13px; }
.journey-context-actions .journey-exit:hover { background:rgba(255,90,99,.13); border-color:rgba(255,110,118,.34); }
.journey-context.traveling { box-shadow:0 0 24px color-mix(in srgb,var(--journey-color,#67d3e1) 24%,transparent); pointer-events:none; }
.back-button {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  padding: 10px 13px;
}
.back-button:hover { background: rgba(103,211,225,.14); }

.zone-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: 214px minmax(0, 1fr);
  height: calc(100% - 108px);
  margin: 0 auto;
  max-width: 1540px;
  position: relative;
}

.logo-navigator {
  align-self: start;
  background: rgba(6, 25, 34, .7);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 14px 12px 18px;
}
.logo-nav-label { color: var(--muted); display: block; font-size: 10px; letter-spacing:.11em; text-align:center; text-transform:uppercase; }
.logo-nav-hint { color:var(--text); display:block; font-size:10px; font-weight:750; margin-top:6px; text-align:center; }
#logo-nav-buttons { height: 195px; margin: 8px auto 0; position: relative; transform:scale(1.12); transform-origin:top center; width:166px; }
.journey-nav-route { height:100%; inset:0; overflow:visible; pointer-events:none; position:absolute; width:100%; z-index:2; }
.journey-nav-route path { animation:journey-nav-flow .48s linear infinite; fill:none; filter:drop-shadow(0 0 5px var(--journey-color,#67d3e1)); stroke:var(--journey-color,#67d3e1); stroke-dasharray:7 6; stroke-linecap:round; stroke-width:4; }
.journey-nav-pulse { fill:#fff; filter:drop-shadow(0 0 7px var(--journey-color,#67d3e1)); }
@keyframes journey-nav-flow { to { stroke-dashoffset:-13; } }
.logo-nav-cell {
  --zone-color:#67d3e1;
  background:#343638;
  border: 0;
  clip-path: var(--flat-top-hex);
  cursor: pointer;
  height:52px;
  left: calc(var(--x) * 1px);
  opacity:.72;
  padding:0;
  position: absolute;
  top: calc(var(--y) * 1px);
  transition: filter .18s ease, opacity .18s ease, transform .18s ease;
  width:60px;
  z-index:3;
}
.logo-nav-cell::before {
  background:var(--zone-color);
  clip-path:inherit;
  content:'';
  inset:5px;
  position:absolute;
}
.logo-nav-cell:hover, .logo-nav-cell:focus-visible, .logo-nav-cell.active {
  filter: drop-shadow(0 0 9px var(--zone-color));
  opacity: 1;
  outline: none;
  transform: scale(1.08);
}
.logo-nav-cell.journey-destination { animation:journey-destination-pulse .52s ease-in-out infinite alternate; opacity:1; }
@keyframes journey-destination-pulse { to { filter:drop-shadow(0 0 16px var(--journey-color,#67d3e1)); transform:scale(1.14); } }
.logo-nav-tooltip {
  border-top:1px solid var(--line);
  margin-top:10px;
  min-height:70px;
  padding:11px 4px 0;
  text-align:center;
}
.logo-nav-tooltip strong { display:block; font-size:13px; }
.logo-nav-tooltip span { color:var(--muted); display:block; font-size:10px; line-height:1.35; margin-top:5px; }

.zone-scene.journey-active .lab-node:not(.journey-member) { filter:grayscale(.42); opacity:.34; }
.zone-scene.journey-active .lab-node:not(.journey-member):hover,
.zone-scene.journey-active .lab-node:not(.journey-member):focus-visible { filter:drop-shadow(0 0 13px var(--node-color)); opacity:1; }
.zone-scene.journey-active .lab-node.journey-member { filter:drop-shadow(0 0 10px var(--node-color)); }
.zone-scene .lab-node.journey-current { animation:journey-pulse 1.4s ease-in-out infinite; z-index:8; }
@keyframes journey-pulse { 50% { filter:drop-shadow(0 0 20px #fff); transform:translate(-50%,-50%) scale(1.16); } }

.journey-route-layer { height:100%; inset:0; overflow:visible; pointer-events:none; position:absolute; width:100%; z-index:3; }
.journey-route-segment path { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.journey-route-cable { filter:drop-shadow(0 3px 4px rgba(0,0,0,.72)); opacity:.9; stroke:#06131a; stroke-width:10; }
.journey-route-main { stroke:var(--journey-color,#67d3e1); stroke-width:5; transition:opacity .25s ease,stroke .25s ease; }
.journey-route-flow { opacity:0; stroke:#fff; stroke-dasharray:3 17; stroke-width:3; }
.journey-route-segment.route-past .journey-route-main { opacity:.58; }
.journey-route-segment.route-upcoming .journey-route-main { opacity:.38; stroke:#84969e; }
.journey-route-segment.route-upcoming .journey-route-cable { opacity:.56; }
.journey-route-segment.route-current .journey-route-main { filter:drop-shadow(0 0 7px var(--journey-color,#67d3e1)); }
.journey-route-segment.route-current .journey-route-flow { animation:journey-cable-flow .82s linear infinite; filter:drop-shadow(0 0 5px #fff); opacity:.9; }
@keyframes journey-cable-flow { to { stroke-dashoffset:-20; } }
.journey-route-pulse { fill:#fff; filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 11px var(--journey-color,#67d3e1)); stroke:var(--journey-color,#67d3e1); stroke-width:3; }
.journey-gateway-halo { animation:journey-gateway-pulse 1.2s ease-in-out infinite; fill:color-mix(in srgb,var(--journey-color,#67d3e1) 16%,transparent); stroke:var(--journey-color,#67d3e1); stroke-width:2; }
.journey-gateway-core { fill:#fff; filter:drop-shadow(0 0 7px var(--journey-color,#67d3e1)); }
.journey-gateway-muted { opacity:.42; }
.journey-gateway-muted .journey-gateway-halo { animation:none; }
.journey-gateway-label { fill:#effcff; font-size:12px; font-weight:800; paint-order:stroke; stroke:#061923; stroke-linejoin:round; stroke-width:5px; }
@keyframes journey-gateway-pulse { 50% { opacity:.45; r:19px; } }

.zone-scene {
  --zone-color:#67d3e1;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--zone-color) 13%, transparent), transparent 36%),
    rgba(5, 20, 29, 0.56);
  border: 1px solid color-mix(in srgb, var(--zone-color) 35%, transparent);
  border-radius: 28px;
  box-shadow: inset 0 0 70px rgba(0,0,0,.32), 0 18px 60px rgba(0,0,0,.22);
  min-height: 500px;
  overflow: hidden;
  position: relative;
}
.zone-scene::before {
  border: 1px solid color-mix(in srgb, var(--zone-color) 18%, transparent);
  border-radius: 50%;
  content:"";
  height: 78%;
  left: 12%;
  position:absolute;
  top: 10%;
  width: 76%;
}
.zone-scene.has-detail-art {
  background:#05141d;
}
.zone-scene-parallax {
  --scene-shift-x:0px;
  --scene-shift-y:0px;
  --scene-tilt-x:0deg;
  --scene-tilt-y:0deg;
  display:none;
  inset:-2%;
  pointer-events:none;
  position:absolute;
  transform:perspective(1200px) translate3d(var(--scene-shift-x),var(--scene-shift-y),0) rotateX(var(--scene-tilt-x)) rotateY(var(--scene-tilt-y));
  transform-origin:center;
  transition:transform .36s cubic-bezier(.2,.75,.25,1);
  will-change:transform;
  z-index:0;
}
.zone-scene.has-detail-art .zone-scene-parallax { display:block; }
.zone-scene-art {
  animation:scene-breathe 9.5s ease-in-out infinite alternate;
  background:var(--zone-scene-image) center 54% / auto 100% no-repeat;
  inset:0;
  position:absolute;
  transform-origin:center;
  will-change:transform;
}
@keyframes scene-breathe { to { transform:scale(1.03); } }
.zone-scene-glow {
  animation:scene-glow-pulse 3.4s ease-in-out infinite;
  aspect-ratio:1;
  background:radial-gradient(circle, color-mix(in srgb,var(--scene-glow-color,var(--zone-color)) 72%,white) 0 3%, color-mix(in srgb,var(--scene-glow-color,var(--zone-color)) 32%,transparent) 22%, transparent 67%);
  filter:blur(6px);
  left:var(--scene-glow-x,50%);
  mix-blend-mode:screen;
  opacity:.2;
  position:absolute;
  top:var(--scene-glow-y,42%);
  transform:translate(-50%,-50%);
  width:min(130px,13%);
  will-change:opacity,transform;
}
@keyframes scene-glow-pulse {
  50% { opacity:.48; transform:translate(-50%,-50%) scale(1.16); }
}
.zone-scene.has-detail-art::before {
  background:
    linear-gradient(90deg, rgba(2, 12, 19, .18), transparent 16%, transparent 84%, rgba(2, 12, 19, .18)),
    linear-gradient(180deg, rgba(2, 12, 19, .04), transparent 22%, transparent 74%, rgba(2, 12, 19, .22));
  border: 0;
  border-radius: inherit;
  height: auto;
  inset: 0;
  pointer-events: none;
  width: auto;
  z-index:1;
}
.zone-scene.has-detail-art .zone-aurora,
.zone-scene.has-detail-art .zone-world { display:none; }
.zone-scene.has-detail-art .scene-progress {
  backdrop-filter:blur(8px);
  background:rgba(3,18,26,.72);
  border:1px solid rgba(255,255,255,.16);
  border-radius:11px;
  padding:10px 12px;
}
.zone-aurora {
  animation: aurora 8s ease-in-out infinite alternate;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--zone-color) 22%, transparent), transparent 68%);
  filter: blur(25px);
  inset: 12% 18%;
  position:absolute;
}
@keyframes aurora { to { opacity:.55; transform:scale(1.15) rotate(7deg); } }

.zone-world {
  align-items:center;
  display:flex;
  height: 230px;
  justify-content:center;
  left:50%;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:230px;
}
.zone-world::before {
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--zone-color) 82%, white), var(--zone-color) 30%, #09232e 72%);
  border: 2px solid color-mix(in srgb, var(--zone-color) 75%, white);
  border-radius: 50%;
  box-shadow: 0 0 36px color-mix(in srgb, var(--zone-color) 55%, transparent), inset -22px -26px 44px rgba(0,0,0,.5);
  content:"";
  inset:35px;
  position:absolute;
}
.world-ring { border:1px solid color-mix(in srgb, var(--zone-color) 45%, transparent); border-radius:50%; position:absolute; }
.world-ring-one { height:100%; transform:rotate(20deg) scaleY(.36); width:100%; }
.world-ring-two { height:112%; transform:rotate(-32deg) scaleY(.24); width:112%; }
.zone-world-icon { filter: drop-shadow(0 8px 8px rgba(0,0,0,.4)); font-size:64px; position:relative; z-index:2; }

.lab-node {
  --node-color:#78909a;
  align-items:center;
  background:transparent;
  border:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  height:108px;
  justify-content:center;
  left:calc(var(--x) * 1%);
  padding:5px 10px 9px;
  position:absolute;
  top:calc(var(--y) * 1%);
  transform:translate(-50%,-50%);
  transition:filter .18s ease, opacity .18s ease, transform .18s ease;
  width:124px;
  z-index:4;
}
.lab-node::before {
  background:var(--node-color);
  clip-path:var(--flat-top-hex);
  content:"";
  inset:0;
  position:absolute;
  z-index:-2;
}
.lab-node::after {
  background:#0b2631;
  clip-path:var(--flat-top-hex);
  content:"";
  inset:4px;
  position:absolute;
  z-index:-1;
}
.lab-node:hover, .lab-node:focus-visible {
  animation:none !important;
  filter:drop-shadow(0 0 13px var(--node-color));
  outline:none;
  transform:translate(-50%,-50%) scale(1.58);
  z-index:10;
}
.lab-node.selected { filter:drop-shadow(0 0 13px var(--node-color)); transform:translate(-50%,-50%) scale(1.16); z-index:9; }
.lab-node.selected:hover,
.lab-node.selected:focus-visible { transform:translate(-50%,-50%) scale(1.58); z-index:10; }
.lab-node-badge { filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)); height:90px; object-fit:contain; position:relative; width:90px; z-index:1; }
.lab-node-label {
  background:rgba(3,18,27,.96);
  border:1px solid color-mix(in srgb,var(--node-color) 70%,white);
  border-radius:7px;
  box-shadow:0 8px 20px rgba(0,0,0,.42);
  color:#fff;
  font-size:12px;
  font-weight:750;
  left:50%;
  line-height:1.25;
  max-width:220px;
  opacity:0;
  padding:7px 9px;
  pointer-events:none;
  position:absolute;
  top:calc(100% + 4px);
  transform:translate(-50%,-4px) scale(.65);
  transform-origin:top center;
  transition:opacity .14s ease,transform .14s ease;
  width:max-content;
  z-index:5;
}
.lab-node:hover .lab-node-label,
.lab-node:focus-visible .lab-node-label,
.lab-node.selected .lab-node-label,
.lab-node.journey-current .lab-node-label { opacity:1; transform:translate(-50%,0) scale(.65); }
.lab-node-label.above { bottom:calc(100% + 4px); top:auto; transform:translate(-50%,4px) scale(.65); transform-origin:bottom center; }
.lab-node:hover .lab-node-label.above,
.lab-node:focus-visible .lab-node-label.above,
.lab-node.selected .lab-node-label.above,
.lab-node.journey-current .lab-node-label.above { transform:translate(-50%,0) scale(.65); }
.lab-node .node-state { align-items:center; background:var(--node-color); border-radius:50%; color:#06202a; display:flex; font-size:9px; font-weight:900; height:17px; justify-content:center; position:absolute; right:19%; top:11%; width:17px; z-index:2; }
.lab-node .node-state:empty { display:none; }
.lab-node-new { background:#67d3e1; border-radius:999px; color:#06202a; display:none; font-size:8px; font-weight:950; left:9%; letter-spacing:.05em; padding:3px 5px; position:absolute; top:8%; z-index:2; }
.lab-node.new .lab-node-new { display:block; }
.lab-node.complete { --node-color:#67d47c; }
.lab-node.recommended { --node-color:var(--gold); animation:node-pulse 1.8s ease-in-out infinite; }
.lab-node.incoming { opacity:.78; }
.lab-node.incoming:hover, .lab-node.incoming:focus-visible, .lab-node.incoming.selected { opacity:1; }
.lab-node.incoming .lab-node-badge { filter:grayscale(.18) drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.lab-node.incoming .node-state { height:26px; right:10%; top:7%; width:26px; }
.lab-node.maintenance { opacity:.68; }
.lab-node.maintenance:hover, .lab-node.maintenance:focus-visible, .lab-node.maintenance.selected { opacity:1; }
.lab-node.maintenance .lab-node-badge { filter:grayscale(.7) drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.lab-node.maintenance .node-state { height:26px; right:10%; top:7%; width:26px; }
.lab-status-icon { align-items:center; display:inline-flex; height:14px; justify-content:center; width:14px; }
.lab-status-icon svg { fill:none; height:100%; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2.2; width:100%; }
.lab-node .node-state .lab-status-icon { height:19px; width:19px; }
@keyframes node-pulse { 50% { filter:drop-shadow(0 0 16px var(--gold)); } }

.scene-progress {
  bottom:18px;
  left:22px;
  position:absolute;
  width:min(260px, 38%);
  z-index:5;
}
.scene-progress strong { font-size:18px; }
.scene-progress span { color:var(--muted); font-size:11px; margin-left:5px; }
.progress-track { background:rgba(255,255,255,.1); border-radius:8px; height:5px; margin-top:8px; overflow:hidden; }
.progress-track i { background:var(--zone-color); display:block; height:100%; transition:width .5s ease; }

.inspector {
  background: rgba(9, 31, 41, .97);
  border-left: 1px solid rgba(134, 220, 232, .28);
  box-shadow: -24px 0 70px rgba(0,0,0,.38);
  display:flex;
  flex-direction:column;
  height:calc(100vh - 76px);
  position:fixed;
  right:0;
  top:76px;
  transform:translateX(102%);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  width:min(440px, 94vw);
  z-index:50;
}
.inspector.open { transform:translateX(0); }
.inspector-header {
  align-items:flex-start;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  padding:22px 22px 17px;
}
.inspector-header h2 { font-size:24px; line-height:1.1; margin:0; }
.inspector-back { background:transparent; border:0; color:var(--accent); cursor:pointer; display:block; font-size:10px; font-weight:800; margin:0 0 9px; padding:0; }
.inspector-back:hover, .inspector-back:focus-visible { text-decoration:underline; text-underline-offset:3px; }
.inspector-back[hidden] { display:none; }
.inspector-context { background:rgba(103,211,225,.025); border-bottom:1px solid var(--line); flex:0 0 auto; padding:16px 22px 18px; }
.inspector-context[hidden] { display:none; }
.inspector-close {
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:8px;
  cursor:pointer;
  font-size:25px;
  height:38px;
  line-height:1;
  width:38px;
}
.inspector-content { flex:1; min-height:0; overflow:auto; overscroll-behavior-y:contain; padding:20px 22px 30px; -webkit-overflow-scrolling:touch; }
.inspector-scrim { background:rgba(0,0,0,.42); border:0; inset:76px 0 0; position:fixed; z-index:45; }

.filter-stack { display:grid; gap:10px; }
.search-field { position:relative; }
.search-field span { color:var(--muted); left:13px; position:absolute; top:11px; }
.search-field input, .filter-row select {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(149,213,222,.24);
  border-radius:9px;
  color:var(--ink);
  min-height:42px;
  outline:none;
  width:100%;
}
.search-field input { padding:9px 12px 9px 38px; }
.search-field input:focus, .filter-row select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(103,211,225,.12); }
.filter-row { display:grid; gap:9px; grid-template-columns:1fr 1fr; }
.progress-filter-row { grid-template-columns:1fr; }
.filter-row select { color-scheme:dark; padding:8px 10px; }
.filter-row select option { background:#102832; color:var(--ink); }
.result-count { color:var(--muted); font-size:11px; margin:12px 0 18px; }
.lab-group-title { color:var(--accent); font-size:11px; letter-spacing:.1em; margin:20px 0 8px; text-transform:uppercase; }
.lab-list { display:grid; gap:8px; }
.lab-list-item {
  align-items:center;
  background:rgba(255,255,255,.035);
  border:1px solid transparent;
  border-radius:10px;
  cursor:pointer;
  display:grid;
  gap:11px;
  grid-template-columns:48px minmax(0,1fr) auto;
  padding:10px;
  text-align:left;
  transition:background .15s ease,border-color .15s ease;
}
.lab-list-item:hover { background:rgba(103,211,225,.08); border-color:rgba(103,211,225,.3); }
.lab-list-item img { filter:drop-shadow(0 3px 4px rgba(0,0,0,.32)); height:48px; object-fit:contain; width:48px; }
.lab-list-item strong { display:block; font-size:13px; line-height:1.25; }
.lab-list-item small { color:var(--muted); display:block; font-size:10px; margin-top:3px; }
.lab-list-item .complete-mark { color:#67d47c; font-size:17px; }
.lab-list-item.updated { border-color:rgba(255,199,44,.28); }
.lab-list-item.updated .complete-mark { color:var(--gold); }
.lab-list-item.recommended .complete-mark { color:var(--gold); }
.lab-list-item.incoming { border-color:rgba(145,164,173,.25); }
.lab-list-item.incoming .complete-mark { color:#b9c8ce; }
.lab-list-item.maintenance { border-color:rgba(145,164,173,.34); opacity:.78; }
.lab-list-item.maintenance .complete-mark { color:#b9c8ce; }
.lab-list-item .complete-mark .lab-status-icon { height:17px; width:17px; }
.lab-update-label { color:#ffe07a; display:block; font-size:9px; font-weight:750; margin-top:5px; }
.lab-new-label { color:#67d3e1; display:block; font-size:9px; font-weight:900; letter-spacing:.08em; margin-top:5px; }

.journey-list { display:grid; gap:11px; }
.journey-entry { border:1px solid transparent; border-radius:13px; overflow:hidden; }
.journey-entry.active { border-color:var(--accent); box-shadow:0 0 18px rgba(103,211,225,.08); }
.journey-card {
  align-items:center;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(149,213,222,.13);
  border-radius:12px;
  cursor:pointer;
  display:grid;
  gap:13px;
  grid-template-columns:58px minmax(0,1fr) auto;
  padding:13px;
  text-align:left;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.journey-card:hover { background:rgba(103,211,225,.08); border-color:rgba(103,211,225,.38); transform:translateY(-1px); }
.journey-entry.active .journey-card { border-color:transparent; }
.journey-card img { height:58px; object-fit:contain; width:58px; }
.journey-card strong { display:block; font-size:14px; }
.journey-card small { color:var(--muted); display:block; font-size:10px; line-height:1.4; margin-top:4px; }
.journey-card .journey-percent { color:var(--accent); font-size:12px; font-weight:850; }
.journey-card .journey-track { background:rgba(255,255,255,.1); border-radius:9px; display:block; height:4px; margin-top:9px; overflow:hidden; }
.journey-card .journey-track i { background:var(--accent); display:block; height:100%; }
.journey-labs { background:rgba(1,13,20,.38); display:grid; gap:1px; list-style:none; margin:0; padding:5px; }
.journey-lab-button { align-items:center; background:transparent; border:0; border-radius:8px; cursor:pointer; display:grid; gap:10px; grid-template-columns:28px minmax(0,1fr) auto; padding:9px 8px; text-align:left; width:100%; }
.journey-lab-button:hover { background:rgba(103,211,225,.08); }
.journey-lab-button.current { background:rgba(103,211,225,.12); }
.journey-lab-number { align-items:center; background:rgba(255,255,255,.07); border:1px solid var(--line); border-radius:50%; color:var(--muted); display:flex; font-size:10px; font-weight:850; height:25px; justify-content:center; width:25px; }
.journey-lab-button.complete .journey-lab-number { background:rgba(103,212,124,.16); border-color:#67d47c; color:#8bef9d; }
.journey-lab-button strong { display:block; font-size:12px; line-height:1.25; }
.journey-lab-button small { color:var(--muted); display:block; font-size:9px; margin-top:2px; }
.journey-lab-arrow { color:var(--accent); font-size:15px; }
.journey-intro { color:var(--muted); font-size:12px; line-height:1.55; margin:0 0 18px; }

.quest-list { display:grid; gap:12px; }
.quest-card { background:rgba(255,255,255,.035); border:1px solid rgba(149,213,222,.16); border-radius:13px; display:grid; gap:15px; padding:15px; }
.quest-card.selected { background:linear-gradient(135deg,rgba(255,199,44,.09),rgba(103,211,225,.06)); border-color:rgba(255,199,44,.58); box-shadow:0 0 20px rgba(255,199,44,.07); }
.quest-card:is(.upcoming,.ended):not(.selected) { opacity:.58; }
.quest-card-heading { padding-right:88px; position:relative; }
.quest-card-heading h3 { font-size:16px; line-height:1.25; margin:7px 0 0; }
.quest-card-heading p { color:var(--muted); font-size:10px; margin:6px 0 0; }
.quest-status { color:var(--accent); font-size:9px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.quest-card.selected .quest-status { color:var(--gold); }
.quest-copy-action { align-items:center; background:rgba(103,211,225,.06); border:1px solid rgba(149,213,222,.2); border-radius:7px; color:var(--muted); cursor:pointer; display:flex; font-size:9px; font-weight:800; gap:5px; min-height:28px; padding:5px 7px; position:absolute; right:0; top:0; }
.quest-copy-action svg { fill:none; height:13px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:13px; }
.quest-copy-action:is(:hover,:focus-visible), .quest-copy-action.copied { background:rgba(103,211,225,.14); border-color:rgba(103,211,225,.5); color:var(--accent-strong); }
.quest-actions { display:grid; gap:8px; grid-template-columns:1fr 1fr; }
.quest-actions button { border-radius:8px; cursor:pointer; font-size:11px; font-weight:850; min-height:39px; padding:9px 11px; }
.quest-actions button:disabled { cursor:not-allowed; opacity:.55; }
.quest-primary-action { background:var(--accent); border:0; color:#06202a; grid-column:1 / -1; }
.quest-primary-action:not(:disabled):hover, .quest-primary-action:not(:disabled):focus-visible { background:var(--accent-strong); }
.quest-retry-action { border-radius:8px; cursor:pointer; display:block; font-size:11px; font-weight:850; margin:0 auto; min-height:39px; padding:9px 18px; }
.quest-secondary-action { background:rgba(103,211,225,.08); border:1px solid var(--line); color:var(--accent-strong); }
.quest-leave-action { background:rgba(255,90,95,.1); border:1px solid rgba(255,90,95,.38); color:#ffb7ba; }
.quest-leave-action:hover, .quest-leave-action:focus-visible { background:rgba(255,90,95,.2); border-color:rgba(255,90,95,.7); color:#ffe1e2; }
.quest-joining { align-items:center; background:linear-gradient(145deg,rgba(103,211,225,.07),rgba(255,199,44,.055)); border:1px solid rgba(103,211,225,.2); border-radius:16px; display:flex; flex-direction:column; padding:30px 24px 26px; text-align:center; }
.quest-joining-visual { height:150px; margin-bottom:15px; position:relative; width:170px; }
.quest-joining-visual::before { animation:quest-orbit 3.8s linear infinite; border:1px dashed rgba(103,211,225,.45); border-radius:50%; content:''; inset:16px 26px; position:absolute; }
.quest-joining-visual img { animation:quest-ebee-float 2.3s ease-in-out infinite; filter:drop-shadow(0 12px 16px rgba(0,0,0,.42)); height:146px; inset:2px 12px; object-fit:contain; position:absolute; width:146px; }
.quest-joining-visual > span { animation:quest-pulse 1.5s ease-in-out infinite; background:var(--gold); border-radius:50%; box-shadow:0 0 12px var(--gold); height:8px; position:absolute; width:8px; }
.quest-joining-visual > span:nth-child(1) { left:18px; top:70px; }
.quest-joining-visual > span:nth-child(2) { animation-delay:.35s; background:var(--accent); box-shadow:0 0 12px var(--accent); right:27px; top:25px; }
.quest-joining-visual > span:nth-child(3) { animation-delay:.7s; bottom:19px; right:37px; }
.quest-joining h3 { font-size:19px; margin:0 0 9px; }
.quest-joining p { color:#c5d9de; font-size:12px; line-height:1.6; margin:0; max-width:390px; }
.quest-joining small { color:var(--muted); font-size:10px; line-height:1.5; margin-top:13px; max-width:330px; }
.quest-joining-track { background:rgba(255,255,255,.09); border-radius:999px; height:5px; margin-top:21px; overflow:hidden; width:min(300px,88%); }
.quest-joining-track span { animation:quest-progress 1.65s ease-in-out infinite; background:linear-gradient(90deg,var(--accent),var(--gold)); border-radius:inherit; display:block; height:100%; width:38%; }
@keyframes quest-orbit { to { transform:rotate(360deg); } }
@keyframes quest-ebee-float { 50% { transform:translateY(-8px) rotate(1.5deg); } }
@keyframes quest-pulse { 50% { opacity:.35; transform:scale(.65); } }
@keyframes quest-progress { from { transform:translateX(-110%); } 50% { width:58%; } to { transform:translateX(270%); width:38%; } }

.lab-detail-hero { align-items:center; display:grid; gap:16px; grid-template-columns:96px minmax(0,1fr); }
.lab-detail-hero img { filter:drop-shadow(0 4px 6px rgba(0,0,0,.34)); height:96px; object-fit:contain; width:96px; }
.lab-detail-hero h3 { font-size:21px; line-height:1.15; margin:0; }
.lab-meta { align-items:center; color:var(--muted); display:flex; flex-wrap:wrap; font-size:11px; gap:8px; margin-top:9px; }
.lab-meta > * + *::before { color:var(--muted); content:'·'; margin-right:8px; }
.lab-update-notice { background:rgba(255,199,44,.08); border:1px solid rgba(255,199,44,.25); border-radius:10px; color:#ffe9a6; display:grid; font-size:11px; gap:3px; margin-top:20px; padding:11px 13px; }
.lab-update-notice strong { color:var(--gold); font-size:12px; }
.lab-rating-button { align-items:center; background:transparent; border:0; color:inherit; cursor:pointer; display:inline-flex; padding:2px 0; }
.lab-rating-button:hover .review-rating-stars, .lab-rating-button:focus-visible .review-rating-stars { filter:drop-shadow(0 0 5px rgba(255,199,44,.65)); text-decoration:underline; text-decoration-color:#ffc72c; text-decoration-thickness:1px; text-underline-offset:3px; }
.lab-rating-button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.review-rating-stars { --percent:0%; color:#52646a; display:inline-block; font-size:14px; letter-spacing:1px; line-height:1; position:relative; white-space:nowrap; }
.review-rating-stars::after { color:#ffc72c; content:'★★★★★'; height:100%; left:0; overflow:hidden; position:absolute; top:0; white-space:nowrap; width:var(--percent); }
.review-rating-stars-large { font-size:19px; margin-top:7px; }
.lab-teaser { color:#d8e8ec; font-size:15px; font-style:italic; font-weight:650; line-height:1.5; margin:23px 0 0; }
.lab-description { color:#b7c9cf; font-size:13px; line-height:1.65; margin-top:18px; }
.lab-description > :first-child { margin-top:0; }
.lab-description > :last-child { margin-bottom:0; }
.lab-description p { margin:0 0 12px; }
.lab-description h1,
.lab-description h2,
.lab-description h3,
.lab-description h4 { color:#eef9fb; line-height:1.25; margin:18px 0 8px; }
.lab-description h1 { font-size:19px; }
.lab-description h2 { font-size:17px; }
.lab-description h3,
.lab-description h4 { font-size:15px; }
.lab-description ul,
.lab-description ol { margin:9px 0 14px; padding-left:22px; }
.lab-description li + li { margin-top:5px; }
.lab-description blockquote { border-left:3px solid var(--accent); color:#d8e8ec; margin:14px 0; padding:2px 0 2px 13px; }
.lab-description a { color:#75e3ed; overflow-wrap:anywhere; text-decoration-thickness:1px; text-underline-offset:2px; }
.lab-description code { background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08); border-radius:4px; color:#dffcff; font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; padding:1px 4px; }
.lab-description pre { background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.09); border-radius:8px; margin:13px 0; overflow:auto; padding:11px 12px; }
.lab-description pre code { background:none; border:0; padding:0; white-space:pre; }
.lab-description hr { border:0; border-top:1px solid var(--line); margin:18px 0; }
.lab-description img { border-radius:8px; height:auto; max-width:100%; }
.tag-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.tag-list span { background:rgba(103,211,225,.09); border:1px solid rgba(103,211,225,.2); border-radius:999px; color:#bceff3; font-size:10px; padding:5px 8px; }
.primary-button, .secondary-button {
  align-items:center;
  border-radius:9px;
  cursor:pointer;
  display:flex;
  font-size:12px;
  font-weight:850;
  justify-content:center;
  letter-spacing:.09em;
  min-height:48px;
  text-transform:uppercase;
  width:100%;
}
.primary-button { background:var(--accent); border:0; color:#06202a; margin-top:24px; }
.primary-button:hover { background:var(--accent-strong); }
.primary-button.incoming-lab-button, .primary-button.incoming-lab-button:hover,
.primary-button.maintenance-lab-button, .primary-button.maintenance-lab-button:hover { background:rgba(145,164,173,.18); border:1px solid rgba(145,164,173,.35); color:#c9d5da; cursor:default; }
.secondary-button { background:transparent; border:1px solid var(--line); margin-top:9px; }
.small-screen-lab-notice { display:none; }
.active-session-intro { color:#c5d9de; font-size:13px; line-height:1.6; margin:0 0 16px; }
.active-session-list { display:grid; gap:10px; }
.active-session-card { background:rgba(255,255,255,.04); border:1px solid rgba(149,213,222,.18); border-radius:12px; padding:15px; }
.active-session-card strong { display:block; font-size:14px; line-height:1.35; }
.active-session-card small { color:var(--muted); display:block; font-size:10px; margin-top:5px; }
.active-session-actions { display:grid; gap:8px; margin-top:14px; }
.active-session-actions button { border-radius:8px; cursor:pointer; font-size:11px; font-weight:850; min-height:42px; padding:9px 12px; }
.active-session-actions button:disabled { cursor:wait; opacity:.55; }
.active-session-resume { background:var(--accent); border:0; color:#06202a; }
.active-session-stop { background:rgba(255,90,95,.1); border:1px solid rgba(255,90,95,.38); color:#ffd7d9; }
.active-session-status { color:var(--muted); font-size:11px; line-height:1.5; margin-top:12px; }
.active-session-checking { align-items:center; display:flex; flex-direction:column; padding:24px 12px; text-align:center; }
.active-session-checking img { animation:quest-ebee-float 2.3s ease-in-out infinite; filter:drop-shadow(0 10px 14px rgba(0,0,0,.4)); height:130px; object-fit:contain; width:130px; }
.active-session-checking strong { font-size:16px; margin-top:8px; }
.active-session-checking p { color:var(--muted); font-size:12px; line-height:1.5; margin:7px 0 0; }
.active-session-checking-track { background:rgba(255,255,255,.09); border-radius:999px; height:5px; margin-top:20px; overflow:hidden; width:min(280px,88%); }
.active-session-checking-track span { animation:quest-progress 1.65s ease-in-out infinite; background:linear-gradient(90deg,var(--accent),var(--gold)); border-radius:inherit; display:block; height:100%; width:38%; }

.reviews-summary { align-items:center; display:grid; gap:14px; grid-template-columns:52px minmax(0,1fr); }
.reviews-summary img { filter:drop-shadow(0 3px 4px rgba(0,0,0,.32)); height:52px; object-fit:contain; width:52px; }
.reviews-summary strong { display:block; font-size:13px; line-height:1.3; overflow-wrap:anywhere; }
.reviews-summary small { color:var(--muted); display:block; font-size:10px; margin-top:6px; }
.review-list { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); margin-top:18px; min-width:0; width:100%; }
.review-card { background:rgba(255,255,255,.035); border:1px solid rgba(149,213,222,.13); border-radius:11px; max-width:100%; min-width:0; overflow:hidden; padding:13px; }
.review-card > div { align-items:center; display:flex; justify-content:space-between; }
.review-card time { color:var(--muted); font-size:9px; }
.review-card p { color:#c7d8dc; font-size:12px; line-height:1.55; margin:10px 0 0; max-width:100%; overflow-wrap:anywhere; white-space:pre-line; word-break:break-word; }
.review-content.collapsed { -webkit-box-orient:vertical; -webkit-line-clamp:8; display:-webkit-box; overflow:hidden; white-space:pre-wrap; }
.review-content.expanded { display:block; }
.review-expand { background:transparent; border:0; color:var(--accent); cursor:pointer; font-size:10px; font-weight:800; margin-top:10px; padding:0; }
.review-expand:hover, .review-expand:focus-visible { text-decoration:underline; text-underline-offset:3px; }
.review-list-end { color:var(--muted); font-size:10px; margin:17px 0 0; text-align:center; }
.review-list-end[hidden] { display:none; }
.reviews-empty { padding-top:28px; }

.leaderboard-view { color:inherit; display:block; outline:none; text-decoration:none; }
.leaderboard-view-empty { min-height:220px; }
.leaderboard-view:focus-visible { border-radius:12px; box-shadow:0 0 0 3px rgba(103,211,225,.22); }
.leaderboard-controls { align-items:start; display:grid; gap:10px; justify-items:end; margin-bottom:15px; }
.leaderboard-names-toggle { align-items:center; background:rgba(103,211,225,.08); border:1px solid rgba(103,211,225,.3); border-radius:8px; color:var(--accent); cursor:pointer; display:flex; font:inherit; font-size:11px; font-weight:850; gap:6px; padding:8px 10px; }
.leaderboard-names-toggle[aria-pressed="true"] { background:var(--accent); color:#071923; }
.leaderboard-names-toggle:disabled { cursor:wait; opacity:.78; }
.leaderboard-names-toggle i,.leaderboard-names-loading::before { animation:leaderboard-name-spin .75s linear infinite; border:2px solid currentColor; border-radius:50%; border-right-color:transparent; content:""; height:12px; width:12px; }
.leaderboard-names-loading { align-items:center; display:flex; gap:9px; justify-content:center; }
@keyframes leaderboard-name-spin { to { transform:rotate(360deg); } }
.leaderboard-token-form { background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:10px; display:grid; gap:6px; padding:11px; width:100%; }
.leaderboard-token-form[hidden] { display:none; }
.leaderboard-token-form label { color:var(--muted); font-size:10px; font-weight:800; }
.leaderboard-token-form > div { display:grid; gap:7px; grid-template-columns:minmax(0,1fr) auto; }
.leaderboard-token-form input { background:#071c26; border:1px solid rgba(153,220,229,.3); border-radius:7px; color:var(--ink); font:inherit; min-width:0; padding:8px 9px; }
.leaderboard-token-form button { background:var(--accent); border:0; border-radius:7px; color:#071923; cursor:pointer; font:inherit; font-size:10px; font-weight:900; padding:8px 10px; }
.leaderboard-token-error { color:#ffb7ba; font-size:10px; margin:0; }
.leaderboard-list { display:grid; gap:13px; padding-top:3px; }
.leaderboard-row { align-items:center; display:grid; gap:9px; grid-template-columns:42px minmax(0,1fr); }
.leaderboard-rank {
  align-items:center;
  background:var(--rank-color);
  border-radius:50%;
  color:#071923;
  display:flex;
  font-size:21px;
  height:42px;
  justify-content:center;
  width:42px;
}
.leaderboard-line { align-items:center; background:color-mix(in srgb,var(--rank-color) 78%,transparent); border-radius:0 999px 999px 0; display:flex; height:32px; justify-content:space-between; min-width:0; padding:0 12px 0 6px; }
.leaderboard-avatars { align-items:center; display:flex; min-width:0; }
.leaderboard-avatar {
  align-items:center;
  border:2px solid rgba(255,255,255,.8);
  border-radius:50%;
  box-shadow:0 2px 5px rgba(0,0,0,.35);
  color:#fff;
  display:flex;
  font-size:10px;
  font-weight:850;
  height:34px;
  justify-content:center;
  margin-left:-6px;
  text-shadow:0 1px 2px #000;
  width:34px;
}
.leaderboard-avatar:first-child { margin-left:0; }
.leaderboard-avatar.overflow { background:#29404a; font-size:9px; }
.leaderboard-user { align-items:center; display:flex; min-width:0; }
.leaderboard-user .leaderboard-avatar { flex:0 0 auto; margin-left:0; }
.leaderboard-name { color:#071923; font-size:11px; margin-left:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard-count { color:#071923; font-size:11px; font-weight:900; margin-left:9px; white-space:nowrap; }
.leaderboard-line { transition:filter .16s ease,transform .16s ease; }
.leaderboard-view:hover .leaderboard-line { filter:brightness(1.12); transform:translateX(3px); }
.leaderboard-open-label { color:var(--accent); display:block; font-size:11px; font-weight:800; margin-top:20px; text-align:right; }
.leaderboard-view:hover .leaderboard-open-label, .leaderboard-view:focus-visible .leaderboard-open-label { text-decoration:underline; text-underline-offset:3px; }
.panel-state { color:var(--muted); line-height:1.55; padding:42px 10px; text-align:center; }

.profile-intro { align-items:center; display:grid; gap:15px; grid-template-columns:76px minmax(0,1fr); }
.profile-intro img { height:76px; object-fit:contain; width:76px; }
.profile-intro h3 { font-size:19px; line-height:1.2; margin:0; }
.profile-intro p, .profile-copy { color:var(--muted); font-size:12px; line-height:1.6; margin:6px 0 0; }
.profile-form-status { background:rgba(103,211,225,.08); border:1px solid var(--line); border-radius:9px; color:var(--accent-strong); font-size:12px; line-height:1.5; margin-top:20px; padding:11px 12px; }
.profile-form-status[hidden] { display:none; }
.profile-form-status.error { background:rgba(255,90,95,.08); border-color:rgba(255,90,95,.28); color:#ffb7ba; }
.profile-hubspot-form { background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:11px; margin-top:14px; min-height:190px; overflow:hidden; padding:18px; }
.profile-hubspot-form[hidden] { display:none; }
.profile-hubspot-form :is(form,fieldset) { max-width:none !important; }
.profile-hubspot-form fieldset { margin:0 !important; padding:0 !important; }
.profile-hubspot-form .hs-form-field { margin:0 0 14px; }
.profile-native-grid { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.profile-honeypot { height:0; left:-10000px; overflow:hidden; position:absolute; width:1px; }
.profile-processing-consent { color:var(--muted); font-size:11px; line-height:1.5; margin:12px 0 0; }
.profile-hubspot-form .hs-form-field > label { color:#dcebef !important; display:block; font-size:12px; font-weight:800; line-height:1.35; margin:0 0 6px; }
.profile-hubspot-form .hs-form-required { color:#ff9da1; }
.profile-hubspot-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),select,textarea) {
  background:#071c26 !important;
  border:1px solid rgba(153,220,229,.3) !important;
  border-radius:8px !important;
  box-shadow:none !important;
  color:var(--ink) !important;
  font-family:inherit !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  min-height:42px;
  padding:10px 12px !important;
  width:100% !important;
}
.profile-hubspot-form :is(input,select,textarea):focus { border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(103,211,225,.13) !important; outline:none; }
.profile-hubspot-form input::placeholder, .profile-hubspot-form textarea::placeholder { color:#718993 !important; opacity:1; }
.profile-hubspot-form select option { background:#071c26; color:var(--ink); }
.profile-hubspot-form :is(.inputs-list,.hs-error-msgs) { list-style:none; margin:0 !important; padding:0 !important; }
.profile-hubspot-form .hs-form-booleancheckbox-display { align-items:start; color:var(--muted) !important; display:grid !important; font-size:11px; gap:9px; grid-template-columns:18px minmax(0,1fr); line-height:1.5; margin:2px 0 0; }
.profile-hubspot-form input[type="checkbox"] { accent-color:var(--accent); height:17px !important; margin:1px 0 0 !important; width:17px !important; }
.profile-hubspot-form .hs-form-booleancheckbox-display > span { color:var(--muted) !important; margin:0 !important; }
.profile-hubspot-form a { color:var(--accent-strong) !important; text-underline-offset:2px; }
.profile-hubspot-form .hs-error-msgs label { color:#ffb7ba !important; display:block; font-size:11px; line-height:1.4; margin:5px 0 0; }
.profile-hubspot-form .hs_submit { margin-top:17px; }
.profile-hubspot-form .hs-button {
  background:var(--accent) !important;
  border:0 !important;
  border-radius:8px !important;
  color:#06202a !important;
  cursor:pointer;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.08em;
  min-height:42px;
  padding:10px 18px !important;
  text-transform:uppercase;
  width:100%;
}
.profile-hubspot-form .hs-button:hover, .profile-hubspot-form .hs-button:focus-visible { background:var(--accent-strong) !important; }
.profile-hubspot-form .hs-button:disabled { cursor:wait; opacity:.6; }
.profile-hubspot-form :is(.legal-consent-container,.hs-richtext,.submitted-message) { color:var(--muted) !important; font-size:11px; line-height:1.5; }
.profile-hubspot-form :is(.legal-consent-container,.hs-richtext) p { color:inherit !important; margin:8px 0; }
.profile-primary-action, .profile-secondary-action { border-radius:9px; cursor:pointer; font-size:12px; font-weight:800; padding:11px 14px; width:100%; }
.profile-primary-action { background:var(--accent); border:0; color:#06202a; margin-top:20px; }
.profile-secondary-action { background:transparent; border:1px solid var(--line); color:var(--accent); margin-top:12px; }
.profile-secondary-action:disabled { cursor:wait; opacity:.55; }
@media (max-width:520px) { .profile-native-grid { grid-template-columns:1fr; gap:0; } }
.profile-credly { align-items:center; background:rgba(255,199,44,.055); border:1px solid rgba(255,199,44,.24); border-radius:13px; display:grid; gap:11px; grid-template-columns:36px minmax(0,1fr) auto; margin-top:18px; padding:12px; }
.profile-credly[hidden] { display:none; }
.profile-credly a { color:var(--gold); flex:0 0 auto; font-size:10px; font-weight:850; text-decoration:none; }
.profile-credly a:hover, .profile-credly a:focus-visible { text-decoration:underline; text-underline-offset:3px; }
.profile-invites { background:rgba(103,211,225,.035); border:1px solid rgba(103,211,225,.18); border-radius:13px; margin-top:12px; padding:13px; }
.profile-invites[hidden] { display:none; }
.profile-invites > header { align-items:center; display:grid; gap:11px; grid-template-columns:36px minmax(0,1fr); }
.profile-section-icon { align-items:center; border:1px solid rgba(103,211,225,.26); border-radius:9px; color:var(--accent); display:flex; height:36px; justify-content:center; width:36px; }
.profile-section-icon.credentials { background:rgba(255,199,44,.09); border-color:rgba(255,199,44,.3); color:var(--gold); }
.profile-section-icon.invites { background:rgba(103,211,225,.08); }
.profile-section-icon svg { fill:none; height:19px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; width:19px; }
.profile-section-copy { min-width:0; }
.profile-section-copy strong { display:block; font-size:12px; line-height:1.3; }
.profile-section-copy small { color:var(--muted); display:block; font-size:9px; line-height:1.4; margin-top:3px; }
.profile-invites-loading { align-items:center; color:var(--muted); display:flex; font-size:10px; gap:9px; padding:9px 0; }
.profile-invites-loading i { animation:profile-invite-spin .85s linear infinite; border:2px solid rgba(103,211,225,.2); border-radius:50%; border-top-color:var(--accent); display:block; height:15px; width:15px; }
@keyframes profile-invite-spin { to { transform:rotate(360deg); } }
.profile-invite-list { display:grid; gap:7px; margin-top:10px; }
.profile-invite-card { align-items:center; background:rgba(255,255,255,.035); border:1px solid rgba(149,213,222,.14); border-radius:9px; color:inherit; display:grid; gap:10px; grid-template-columns:minmax(0,1fr) auto; padding:10px 11px; text-decoration:none; }
.profile-invite-card strong { display:block; font-size:11px; line-height:1.3; }
.profile-invite-card small { color:var(--muted); display:block; font-size:9px; margin-top:3px; }
.profile-invite-card b { color:var(--accent); font-size:15px; }
.profile-invite-card.active:hover, .profile-invite-card.active:focus-visible { background:rgba(103,211,225,.1); border-color:rgba(103,211,225,.48); outline:none; }
.profile-invite-card.inactive { opacity:.52; }
.profile-past-invites { margin-top:11px; }
.profile-past-invites summary { color:#91a6ae; cursor:pointer; font-size:9px; font-weight:750; }
.profile-past-invites[open] summary { color:var(--accent); }
.profile-signout-action { background:transparent; border:0; color:#91a6ae; cursor:pointer; display:block; font-size:10px; font-weight:750; margin:15px auto 0; padding:6px 9px; text-decoration:underline; text-decoration-color:rgba(145,166,174,.45); text-underline-offset:3px; }
.profile-signout-action:hover, .profile-signout-action:focus-visible { color:#ffb7ba; text-decoration-color:#ff8b90; }
.profile-privacy { color:#78909a; font-size:10px; line-height:1.5; margin:14px 4px 0; text-align:center; }
.profile-panel-content { display:flex; flex-direction:column; }
.profile-panel-content > * { flex-shrink:0; }
.profile-site-link { margin-top:auto; padding-top:24px; }
.profile-site-link a { align-items:center; background:rgba(103,211,225,.055); border:1px solid rgba(103,211,225,.2); border-radius:11px; color:inherit; display:grid; gap:11px; grid-template-columns:40px minmax(0,1fr) auto; padding:10px 12px 10px 9px; text-decoration:none; transition:background .16s ease,border-color .16s ease,transform .16s ease; }
.profile-site-link img { height:40px; object-fit:contain; width:40px; }
.profile-site-link span { display:grid; gap:2px; }
.profile-site-link strong { color:#dffbff; font-size:12px; }
.profile-site-link small { color:#91a6ae; font-size:10px; }
.profile-site-link b { color:var(--accent); font-size:16px; }
.profile-site-link a:hover, .profile-site-link a:focus-visible { background:rgba(103,211,225,.11); border-color:rgba(103,211,225,.52); outline:none; transform:translateY(-1px); }
.profile-summary { align-items:center; background:linear-gradient(120deg,rgba(103,211,225,.1),rgba(255,199,44,.05)); border:1px solid var(--line); border-radius:13px; display:grid; gap:16px; grid-template-columns:62px minmax(0,1fr); padding:15px; }
.profile-summary-avatar { align-items:center; background:linear-gradient(145deg,#77dce6,#277c91); border:2px solid rgba(215,250,252,.65); border-radius:50%; color:#04171f; display:flex; font-size:24px; font-weight:900; height:62px; justify-content:center; width:62px; }
.profile-summary-avatar img { border-radius:inherit; height:100%; object-fit:cover; width:100%; }
.profile-summary-label { color:var(--accent); display:block; font-size:9px; font-weight:800; letter-spacing:.07em; margin-bottom:5px; text-transform:uppercase; }
.profile-summary strong { display:block; font-size:28px; line-height:1; }
.profile-summary div span { color:var(--muted); display:block; font-size:12px; margin-top:5px; }
.profile-progress-link { background:none; border:0; color:var(--muted); cursor:pointer; display:block; font:inherit; font-size:12px; margin-top:5px; padding:0; text-decoration:underline; text-decoration-color:rgba(145,166,174,.5); text-underline-offset:3px; }
.profile-progress-link:hover, .profile-progress-link:focus-visible { color:var(--accent); text-decoration-color:currentColor; }

.ai-hero { align-items:center; display:grid; gap:14px; grid-template-columns:74px minmax(0,1fr); }
.ai-hero img { height:74px; object-fit:contain; width:74px; }
.ai-hero h3 { font-size:19px; line-height:1.2; margin:0; }
.ai-hero p { color:var(--muted); font-size:12px; margin:5px 0 0; }
.copy-block { background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:10px; margin-top:18px; padding:12px; }
.copy-block label { color:var(--accent); display:block; font-size:10px; font-weight:800; letter-spacing:.1em; margin-bottom:8px; text-transform:uppercase; }
.copy-value { align-items:center; display:grid; gap:9px; grid-template-columns:minmax(0,1fr) auto; }
.copy-value code, .copy-value p { color:#d9ebee; font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; margin:0; overflow-wrap:anywhere; }
.copy-value button { background:var(--accent); border:0; border-radius:7px; color:#06202a; cursor:pointer; font-size:11px; font-weight:800; padding:9px 10px; }
.setup-link { color:var(--accent); display:inline-block; font-size:12px; font-weight:750; margin-top:16px; }

.completion-celebration { align-items:center; background:radial-gradient(circle at 50% 44%,rgba(255,199,44,.2),rgba(3,15,23,.94) 68%); display:flex; inset:0; justify-content:center; overflow:auto; padding:32px; position:fixed; z-index:100; }
.completion-celebration[hidden] { display:none; }
.completion-card { align-items:center; animation:completion-arrive .65s cubic-bezier(.18,.9,.25,1.18) both; backdrop-filter:blur(18px); background:linear-gradient(145deg,rgba(11,43,55,.98),rgba(4,20,30,.98)); border:2px solid #ffe585; border-radius:28px; box-shadow:0 34px 100px rgba(0,0,0,.7),0 0 70px rgba(255,199,44,.25); color:#f5fcff; display:grid; gap:34px; grid-template-columns:minmax(210px,280px) minmax(300px,520px); max-width:900px; padding:40px 48px; position:relative; width:100%; z-index:2; }
.completion-close { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:50%; color:#d8e9ed; cursor:pointer; font:300 28px/1 system-ui,sans-serif; height:38px; position:absolute; right:18px; top:18px; width:38px; }
.completion-close:hover,.completion-close:focus-visible { background:rgba(255,255,255,.14); color:#fff; }
.completion-badge-wrap { align-items:center; display:flex; justify-content:center; min-height:280px; position:relative; }
.completion-badge-wrap > span { animation:completion-ring 1.7s ease-out infinite; border:2px solid #ffe585; border-radius:50%; box-shadow:0 0 38px rgba(255,199,44,.42); height:220px; position:absolute; width:220px; }
.completion-badge-wrap img { animation:completion-badge 1.1s .12s cubic-bezier(.2,.9,.3,1.15) both,completion-float 2.5s 1.2s ease-in-out infinite; filter:drop-shadow(0 18px 22px rgba(0,0,0,.5)); height:245px; object-fit:contain; position:relative; width:270px; }
.completion-copy .eyebrow { color:#ffe06b; font-size:13px; letter-spacing:.2em; margin:0 0 7px; }
.completion-copy h2 { font-size:clamp(38px,5vw,66px); line-height:1; margin:0 0 12px; }
.completion-lab-title { color:#fff; font-size:20px; font-weight:850; margin:0 0 16px; }
.completion-email-note { color:#b9cdd3; font-size:14px; line-height:1.55; margin:0 0 14px; max-width:480px; }
.completion-credly { color:#ffe06b; display:inline-block; font-size:13px; font-weight:850; margin-bottom:18px; text-decoration:none; }
.completion-credly[hidden] { display:none; }
.completion-credly:hover,.completion-credly:focus-visible { text-decoration:underline; text-underline-offset:4px; }
.completion-next { border-top:1px solid rgba(255,255,255,.12); margin-top:4px; padding-top:16px; }
.completion-next[hidden] { display:none; }
.completion-next h3 { color:#d8e9ed; font-size:12px; letter-spacing:.12em; margin:0 0 10px; text-transform:uppercase; }
#completion-next-actions { display:flex; flex-wrap:wrap; gap:8px; }
#completion-next-actions button { background:rgba(103,211,225,.1); border:1px solid rgba(103,211,225,.32); border-radius:9px; color:#dffbff; cursor:pointer; font-size:12px; font-weight:800; padding:10px 12px; text-align:left; }
#completion-next-actions button:hover,#completion-next-actions button:focus-visible { background:rgba(103,211,225,.2); border-color:#67d3e1; }
.completion-done { background:#ffc72c; border:0; border-radius:9px; color:#09232d; cursor:pointer; font-size:12px; font-weight:900; margin-top:18px; padding:11px 16px; }
.completion-confetti { inset:0; overflow:hidden; pointer-events:none; position:absolute; }
.completion-confetti i { --angle:0deg; --confetti:#ffc72c; animation:completion-confetti 1.9s ease-out both; background:var(--confetti); border-radius:2px; height:19px; left:50%; position:absolute; top:50%; width:9px; }
.completion-confetti i:nth-child(1) { --angle:0deg; }.completion-confetti i:nth-child(2) { --angle:30deg; --confetti:#67d3e1; animation-delay:.08s; }.completion-confetti i:nth-child(3) { --angle:60deg; --confetti:#f47421; animation-delay:.16s; }.completion-confetti i:nth-child(4) { --angle:90deg; --confetti:#fff; animation-delay:.05s; }.completion-confetti i:nth-child(5) { --angle:120deg; --confetti:#93c832; animation-delay:.2s; }.completion-confetti i:nth-child(6) { --angle:150deg; --confetti:#8062a8; animation-delay:.1s; }.completion-confetti i:nth-child(7) { --angle:180deg; }.completion-confetti i:nth-child(8) { --angle:210deg; --confetti:#67d3e1; animation-delay:.04s; }.completion-confetti i:nth-child(9) { --angle:240deg; --confetti:#ed1c2b; animation-delay:.13s; }.completion-confetti i:nth-child(10) { --angle:270deg; --confetti:#fff; animation-delay:.22s; }.completion-confetti i:nth-child(11) { --angle:300deg; --confetti:#c7df6a; animation-delay:.09s; }.completion-confetti i:nth-child(12) { --angle:330deg; --confetti:#f47421; animation-delay:.17s; }
@keyframes completion-arrive { from { opacity:0; transform:translateY(32px) scale(.9); } to { opacity:1; transform:none; } }
@keyframes completion-ring { from { opacity:.75; transform:scale(.72); } to { opacity:0; transform:scale(1.35); } }
@keyframes completion-badge { from { opacity:0; transform:scale(.25) rotate(-18deg); } 70% { opacity:1; transform:scale(1.12) rotate(4deg); } to { opacity:1; transform:scale(1); } }
@keyframes completion-float { 50% { transform:translateY(-9px) rotate(1.5deg); } }
@keyframes completion-confetti { 0% { opacity:0; transform:rotate(var(--angle)) translateY(-45px) scale(.2); } 18% { opacity:1; } 100% { opacity:0; transform:rotate(var(--angle)) translateY(-440px) rotate(500deg); } }

.toast { background:#d7f8f4; border-radius:8px; bottom:22px; color:#09232d; font-size:12px; font-weight:750; left:50%; opacity:0; padding:10px 14px; pointer-events:none; position:fixed; transform:translate(-50%,15px); transition:opacity .18s ease,transform .18s ease; z-index:80; }
.toast.visible { opacity:1; transform:translate(-50%,0); }

.small-screen-notice {
  align-items:center;
  background:rgba(8,31,42,.96);
  border:1px solid rgba(103,211,225,.42);
  border-radius:14px;
  bottom:12px;
  box-shadow:0 14px 38px rgba(0,0,0,.42);
  display:grid;
  gap:11px;
  grid-template-columns:auto minmax(0,1fr) auto;
  left:12px;
  padding:12px 12px 12px 14px;
  position:fixed;
  right:12px;
  z-index:38;
}
.small-screen-notice[hidden] { display:none; }
.small-screen-notice-icon { align-items:center; background:rgba(103,211,225,.13); border-radius:50%; color:var(--accent); display:flex; font-size:18px; height:34px; justify-content:center; width:34px; }
.small-screen-notice div { display:grid; gap:2px; }
.small-screen-notice strong { color:#e9fcff; font-size:13px; }
.small-screen-notice div > span { color:var(--muted); font-size:11px; line-height:1.35; }
.small-screen-notice button { align-items:center; background:transparent; border:0; border-radius:7px; color:var(--muted); cursor:pointer; display:flex; font-size:22px; height:32px; justify-content:center; padding:0; width:32px; }
.small-screen-notice button:hover,.small-screen-notice button:focus-visible { background:rgba(103,211,225,.12); color:var(--ink); outline:none; }

@media (min-width:1051px) {
  .overview-heading { transform:translateX(clamp(-32px,-1.6vw,-16px)); }
  .zone-constellation { transform:translateX(clamp(-150px,-8vw,-80px)); }
  body:has(.inspector.open) .journey-context { transform:translateX(-452px); }
  body:has(.inspector.open) .overview-view { margin-left:0; margin-right:440px; max-width:none; }
}

@media (min-width:1600px) and (min-height:850px) {
  body::before { inset:84px 0 0; }
  .app-bar { height:84px; padding-inline:clamp(28px,2.8vw,58px); }
  .brand-logo { height:58px; width:58px; }
  .brand-copy strong { font-size:22px; }
  .brand-copy small { font-size:12px; }
  .app-actions { gap:11px; }
  .app-actions :is(button,a) { font-size:13px; min-height:47px; padding:10px 16px; }
  #universe-app { height:calc(100vh - 84px); }
  .overview-view { gap:clamp(36px,4vw,76px); grid-template-columns:minmax(420px,.78fr) minmax(720px,1.22fr); max-width:1760px; padding:30px clamp(36px,4vw,82px) 26px; }
  .overview-heading { max-width:560px; }
  .overview-heading h1 { font-size:clamp(68px,4vw,78px); }
  .overview-heading > .overview-intro { font-size:20px; line-height:1.55; }
  .eyebrow { font-size:12px; }
  .achievement-slot { margin-top:30px; }
  .achievement-card { gap:16px; grid-template-columns:82px minmax(0,1fr) auto; max-width:520px; padding:13px 16px 13px 11px; }
  .achievement-visual { height:82px; width:82px; }
  .achievement-visual b { font-size:14px; height:30px; width:30px; }
  .achievement-copy small { font-size:9px; }
  .achievement-copy strong { font-size:17px; }
  .achievement-copy > span { font-size:11px; }
  .achievement-action { font-size:10px; }
  .zone-constellation { max-height:min(840px,calc(100vh - 120px)); max-width:925px; }
  .zone-card { padding:28px 23px; }
  .zone-card .zone-icon { font-size:44px; margin-bottom:9px; }
  .zone-card strong { font-size:20px; }
  .zone-card small { font-size:12px; }
  .zone-card .zone-progress-track { height:5px; margin-top:11px; }
  .zone-toolbar, .zone-layout { max-width:1760px; }
  .zone-layout { grid-template-columns:210px minmax(0,1fr); }
  .zone-world { height:270px; width:270px; }
  .zone-world-icon { font-size:72px; }
  .lab-node { height:122px; width:140px; }
  .lab-node-badge { height:104px; width:104px; }
  body:has(.inspector.open) .overview-view { margin-right:500px; }
  body:has(.inspector.open) .journey-context { transform:translateX(-512px); }
  .inspector { height:calc(100vh - 84px); top:84px; width:min(500px,94vw); }
  .inspector-header { padding:25px 26px 20px; }
  .inspector-header h2 { font-size:27px; }
  .inspector-context { padding:18px 26px 20px; }
  .inspector-content { padding:23px 26px 34px; }
  .inspector-scrim { inset:84px 0 0; }
}

@media (max-width: 1050px) {
  .brand-copy small { display:none; }
  .overview-view { grid-template-columns:1fr; overflow:auto; padding-top:30px; }
  .overview-astronaut-orbit {
    left:clamp(22px,4vw,46px);
    top:clamp(24px,5vh,50px);
  }
  .overview-astronaut {
    opacity:.7;
    width:clamp(132px,min(21vw,24vh),198px);
  }
  .overview-heading { justify-self:center; max-width:720px; text-align:center; }
  .achievement-card { margin-inline:auto; text-align:left; }
  .zone-constellation { max-height:none; max-width:740px; }
  .zone-view { position:relative; }
  .zone-layout { grid-template-columns:1fr; position:static; }
  .zone-toolbar { grid-template-columns:auto minmax(0,1fr); min-height:98px; }
  .zone-toolbar > div { padding-right:130px; }
  .journey-context { grid-column:1 / -1; justify-self:stretch; max-width:none; }
  .logo-navigator { left:auto; padding:6px; position:absolute; right:clamp(18px,3vw,34px); top:4px; width:112px; z-index:7; }
  .logo-nav-label { display:none; }
  .logo-nav-hint { font-size:8px; line-height:1.15; margin:0 0 3px; }
  #logo-nav-buttons { height:102px; left:50%; margin:0; transform:translateX(-50%) scale(.58); transform-origin:top center; width:166px; }
  .logo-nav-tooltip { display:none; }
}

@media (max-width: 1050px) {
  .app-bar { gap:8px; padding-inline:10px; }
  .brand-copy { display:none; }
  .app-actions { gap:5px; }
  .app-actions :is(button,a) { padding-inline:9px; }
  .app-actions .app-action-label { display:none; }
  .app-actions .profile-action .app-action-label { display:inline; }
}

@media (max-width: 900px) {
  .campaign-chip { display:none; }
}

@media (max-width: 720px) {
  .app-bar { gap:10px; height:64px; padding:8px 12px; }
  #universe-app { height:calc(100vh - 64px); }
  .brand-logo { height:42px; width:42px; }
  .brand-copy strong { font-size:12px; }
  .campaign-chip { display:none; }
  .app-actions { gap:5px; }
  .app-actions :is(button,a) { min-height:39px; padding:8px 10px; }
  .app-actions .profile-action { padding:4px; }
  .profile-avatar { height:31px; width:31px; }
  .app-action-label { display:none; }
  .app-actions .profile-action .app-action-label { display:none; }
  .overview-view { display:block; padding:24px 10px 80px; }
  .overview-space { display:none; }
  .overview-heading { padding:0 13px; }
  .overview-heading h1 { font-size:35px; }
  .zone-constellation { margin:20px auto 0; min-width:0; transform:none; width:min(473px, calc(100vw - 20px)); }
  .zone-card small, .zone-card .zone-progress-track { display:none; }
  .zone-view { padding:16px 10px; }
  .zone-toolbar { gap:10px; grid-template-columns:1fr; }
  .zone-toolbar > div { padding-right:116px; }
  .zone-toolbar h1 { font-size:31px; }
  .back-button { width:max-content; }
  .journey-context { gap:10px; grid-template-columns:minmax(0,1fr) auto; padding:11px 12px; }
  .journey-context-summary { gap:10px; grid-template-columns:52px minmax(0,1fr); }
  .journey-context-image { height:52px; width:52px; }
  .journey-context strong { font-size:14px; }
  .journey-context small { font-size:10px; }
  .journey-context-actions { gap:5px; }
  .journey-context-actions button { font-size:12px; min-height:36px; min-width:36px; padding:7px 8px; }
  .journey-context-actions .journey-exit { font-size:10px; padding-inline:9px; }
  .zone-layout { height:calc(100% - 135px); }
  .logo-navigator { padding:6px; right:10px; top:16px; width:106px; }
  .logo-nav-hint { font-size:8px; line-height:1.15; }
  #logo-nav-buttons { height:102px; transform:translateX(-50%) scale(.58); transform-origin:top center; }
  .zone-scene { border-radius:18px; min-height:440px; }
  .zone-world { transform:translate(-50%,-50%) scale(.7); }
  .lab-node { height:76px; width:88px; }
  .lab-node-badge { height:58px; width:58px; }
  .inspector { height:calc(100vh - 64px); height:calc(100dvh - 64px); top:64px; width:100vw; }
  .inspector-scrim { inset:64px 0 0; }
  .small-screen-lab-notice {
    align-items:start;
    background:rgba(103,211,225,.08);
    border:1px solid rgba(103,211,225,.32);
    border-radius:12px;
    color:var(--ink);
    display:grid;
    gap:10px;
    grid-template-columns:30px minmax(0,1fr);
    margin-top:20px;
    padding:11px 12px;
  }
  .small-screen-lab-notice > span { align-items:center; background:rgba(103,211,225,.13); border-radius:50%; color:var(--accent); display:flex; font-size:16px; height:30px; justify-content:center; width:30px; }
  .small-screen-lab-notice strong { display:block; font-size:12px; line-height:1.3; }
  .small-screen-lab-notice p { color:var(--muted); font-size:10px; line-height:1.4; margin:2px 0 0; }
  .small-screen-lab-notice + .primary-button { margin-top:10px; }
  body:has(.inspector.open .small-screen-lab-notice) .small-screen-notice { display:none; }
  .completion-celebration { align-items:flex-start; padding:18px 12px; }
  .completion-card { gap:10px; grid-template-columns:1fr; padding:30px 22px 26px; text-align:center; }
  .completion-badge-wrap { min-height:175px; }
  .completion-badge-wrap > span { height:145px; width:145px; }
  .completion-badge-wrap img { height:170px; width:190px; }
  .completion-copy h2 { font-size:42px; }
  .completion-lab-title { font-size:17px; }
  #completion-next-actions { justify-content:center; }
}

@media (max-width:420px) {
  .app-bar { gap:5px; padding-inline:8px; }
  .brand-logo { height:34px; width:34px; }
  .app-actions { gap:3px; }
  .app-actions :is(button,a) { min-height:34px; padding:6px 5px; }
  .app-action-icon { height:18px; width:18px; }
  .app-actions .profile-action { padding:3px; }
  .profile-avatar { height:28px; width:28px; }
  .small-screen-notice { bottom:8px; left:8px; right:8px; }
}

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

@media (pointer:coarse) {
  .cursor-ebee { display:none; }
  .zone-constellation { perspective:none; }
  .constellation-tilt { transform:none; transform-style:flat; will-change:auto; }
  .zone-card { touch-action:manipulation; }
}