/* Pixel view skin (html.pixel-view). Mirrors the Amadeus Universe reels:
   pixel font in caps, dark violet panels, notched 2 px frames in the accent of
   the current object, filled CTA bars and corner brackets. Layout geometry is
   shared with the classic view (atlas-layout.css); this file only re-skins.
   Purchase dialogs intentionally keep the classic typography. */
@font-face {
  font-family: 'Amadeus Pixel';
  src: url('/fonts/amadeus-pixel.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Amadeus Pixel';
  src: url('/fonts/amadeus-pixel-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
html.pixel-view {
  --px-accent: #a99bff;
  --px-ink: #efeaff;
  --px-dim: #a39dcc;
  --px-faint: #6e6898;
  --px-bg: rgba(10, 8, 22, 0.94);
  --px-bg2: #151129;
  --px-btn: #15112b;
  --px-line: color-mix(in srgb, var(--px-accent) 62%, #08060f);
  --px-line-soft: color-mix(in srgb, var(--px-accent) 30%, #120f22);
  --px-wash: color-mix(in srgb, var(--px-accent) 16%, transparent);
  --px-frame: 0 -2px 0 0 var(--px-line), 0 2px 0 0 var(--px-line), -2px 0 0 0 var(--px-line),
    2px 0 0 0 var(--px-line);
  --px-frame-soft: 0 -2px 0 0 var(--px-line-soft), 0 2px 0 0 var(--px-line-soft),
    -2px 0 0 0 var(--px-line-soft), 2px 0 0 0 var(--px-line-soft);
  --px-frame-hot: 0 -2px 0 0 var(--px-accent), 0 2px 0 0 var(--px-accent),
    -2px 0 0 0 var(--px-accent), 2px 0 0 0 var(--px-accent);
  --px-drop: 6px 6px 0 0 rgba(0, 0, 0, 0.5);
  --accent: var(--px-accent);
  --muted: var(--px-dim);
  --border: var(--px-line-soft);
  --radius: 0px;
}
html.pixel-view body {
  background: #05040c;
  color: var(--px-ink);
}
html.pixel-view body,
html.pixel-view body button,
html.pixel-view body input,
html.pixel-view body select,
html.pixel-view body textarea,
html.pixel-view body summary {
  font-family: 'Amadeus Pixel', 'IBM Plex Mono', monospace !important;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-synthesis: none;
}
html.pixel-view .membership-dialog,
html.pixel-view .membership-dialog * {
  font-family: 'IBM Plex Mono', monospace !important;
  -webkit-font-smoothing: auto;
}
html.pixel-view body:after {
  box-shadow: none;
}
html.pixel-view ::selection {
  background: var(--px-accent);
  color: #0a0816;
}

/* ---------------------------------------------------------------- frames */
html.pixel-view .panel,
html.pixel-view dialog:not(.membership-dialog) {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--px-bg) !important;
  box-shadow: var(--px-frame), var(--px-drop) !important;
  backdrop-filter: none !important;
}
html.pixel-view .panel:before {
  display: none;
}
html.pixel-view body > header,
html.pixel-view body > footer {
  background: rgba(7, 5, 16, 0.92) !important;
  box-shadow: none !important;
  font-family: 'Amadeus Pixel', monospace;
}
html.pixel-view body > header {
  border-bottom: 2px solid var(--px-line-soft);
}
html.pixel-view body:not(.mobile-atlas) > footer {
  border-top: 2px solid var(--px-line-soft);
  background: rgba(7, 5, 16, 0.86) !important;
}

/* ---------------------------------------------------------------- controls */
html.pixel-view .navbtn,
html.pixel-view .iconbtn,
html.pixel-view .primary,
html.pixel-view .secondary,
html.pixel-view .tabs button,
html.pixel-view .layer-actions button,
html.pixel-view .nearest button,
html.pixel-view .related-objects button,
html.pixel-view .view-grid button,
html.pixel-view .pixel-size-row button,
html.pixel-view .zoom-dock button,
html.pixel-view .mobile-dock button,
html.pixel-view .scene-caption .scale-jumps > button,
html.pixel-view .scene-caption .atlas-secondary-actions > button,
html.pixel-view .scene-caption .view-options > summary,
html.pixel-view #retryCatalog,
html.pixel-view .travel-status button,
html.pixel-view .tour-actions button,
html.pixel-view .tour-next,
html.pixel-view .dialog-head button,
html.pixel-view #language,
html.pixel-view select {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--px-btn) !important;
  color: var(--px-ink) !important;
  box-shadow: var(--px-frame-soft) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px !important;
  text-shadow: none !important;
}
html.pixel-view .navbtn:hover,
html.pixel-view .iconbtn:hover,
html.pixel-view .secondary:hover,
html.pixel-view .scene-caption .scale-jumps > button:hover,
html.pixel-view .scene-caption .atlas-secondary-actions > button:hover,
html.pixel-view .scene-caption .view-options > summary:hover,
html.pixel-view .zoom-dock button:hover,
html.pixel-view .mobile-dock button:hover,
html.pixel-view .related-objects button:hover,
html.pixel-view .view-grid button:hover,
html.pixel-view select:hover {
  box-shadow: var(--px-frame-hot) !important;
  color: var(--px-accent) !important;
  background: var(--px-btn) !important;
}
html.pixel-view .navbtn.active,
html.pixel-view .primary,
html.pixel-view .tabs button[aria-selected='true'],
html.pixel-view .pixel-size-row button[aria-pressed='true'],
html.pixel-view .view-style .view-style-option[aria-pressed='true'],
html.pixel-view .travel-status button,
html.pixel-view .tour-next {
  background: var(--px-accent) !important;
  color: #0b0916 !important;
  box-shadow: var(--px-frame-hot) !important;
  font-weight: 700 !important;
}
html.pixel-view .primary::before {
  content: '› ';
}
html.pixel-view .primary:hover {
  background: color-mix(in srgb, var(--px-accent) 82%, #fff) !important;
}
html.pixel-view button:focus-visible,
html.pixel-view a:focus-visible,
html.pixel-view input:focus-visible,
html.pixel-view select:focus-visible,
html.pixel-view summary:focus-visible {
  outline: 2px dashed var(--px-accent);
  outline-offset: 4px;
}
html.pixel-view header nav {
  background: rgba(10, 8, 22, 0.9) !important;
  border: 0 !important;
  box-shadow: var(--px-frame-soft) !important;
  border-radius: 0 !important;
}
html.pixel-view header nav .navbtn {
  box-shadow: none !important;
  background: transparent !important;
}
html.pixel-view header nav .navbtn.active {
  background: var(--px-accent) !important;
  box-shadow: none !important;
}
html.pixel-view .header-actions > #discover {
  color: var(--px-accent) !important;
  box-shadow: var(--px-frame) !important;
}
html.pixel-view .view-style {
  border: 0 !important;
  background: rgba(10, 8, 22, 0.9) !important;
  box-shadow: var(--px-frame-soft);
}
html.pixel-view .view-style .view-style-option {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--px-dim);
}
html.pixel-view body > header.fit-1 :is(.navbtn, .view-style-option, #language) {
  letter-spacing: 0.02em;
}
html.pixel-view body > header.fit-4 :is(.navbtn, .view-style-option, #language) {
  letter-spacing: 0;
}
html.pixel-view .view-style .view-style-option svg {
  image-rendering: pixelated;
}
html.pixel-view select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--px-accent) 50%),
    linear-gradient(135deg, var(--px-accent) 50%, transparent 50%) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-position: right 15px center, right 10px center !important;
  background-repeat: no-repeat !important;
  background-color: var(--px-btn) !important;
}
html.pixel-view input[type='search'],
html.pixel-view input[type='text'],
html.pixel-view input[type='email'],
html.pixel-view .searchbox {
  border: 0 !important;
  border-radius: 0 !important;
  background: #0b0918 !important;
  color: var(--px-ink);
  box-shadow: var(--px-frame-soft) !important;
}
html.pixel-view .searchbox input {
  box-shadow: none !important;
  background: transparent !important;
  font-size: 12px;
}
html.pixel-view .searchbox input::placeholder {
  color: var(--px-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
html.pixel-view kbd {
  border: 0;
  border-radius: 0;
  box-shadow: var(--px-frame-soft);
  color: var(--px-dim);
  font-family: inherit;
}
html.pixel-view input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  background: #0b0918;
  box-shadow: var(--px-frame-soft);
  border-radius: 0 !important;
}
html.pixel-view input[type='checkbox']:checked {
  background: var(--px-accent);
  box-shadow: var(--px-frame-hot), inset 0 0 0 2px #0b0918;
}
html.pixel-view .filter input {
  width: 28px;
  height: 14px;
  border-radius: 0 !important;
}
html.pixel-view .filter input:after {
  border-radius: 0;
  width: 10px;
  height: 10px;
}
html.pixel-view input[type='range'] {
  appearance: none;
  -webkit-appearance: none;
  height: 16px;
  background: transparent;
}
html.pixel-view input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--px-line) 0 4px, transparent 4px 6px);
}
html.pixel-view input[type='range']::-moz-range-track {
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--px-line) 0 4px, transparent 4px 6px);
}
html.pixel-view input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 16px;
  margin-top: -6px;
  background: var(--px-accent);
  border: 0;
  border-radius: 0;
  box-shadow: 2px 2px 0 0 #000;
}
html.pixel-view input[type='range']::-moz-range-thumb {
  width: 10px;
  height: 16px;
  background: var(--px-accent);
  border: 0;
  border-radius: 0;
}
html.pixel-view progress {
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  border: 0;
  background: var(--px-line-soft);
}
html.pixel-view progress::-webkit-progress-bar {
  background: var(--px-line-soft);
}
html.pixel-view progress::-webkit-progress-value {
  background: var(--px-accent);
}
html.pixel-view * {
  scrollbar-color: var(--px-line) transparent;
}

/* ---------------------------------------------------------------- header & brand */
html.pixel-view .brand {
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 16px;
}
html.pixel-view .brand small {
  font-weight: 400;
  font-size: 8px;
  letter-spacing: 0.3em;
  color: var(--px-dim);
}
html.pixel-view .brandmark {
  color: var(--px-accent) !important;
  text-shadow: none !important;
  font-size: 24px !important;
  font-weight: 400;
}

/* ---------------------------------------------------------------- scene caption */
html.pixel-view .scene-caption .eyebrow,
html.pixel-view .eyebrow {
  color: var(--px-accent) !important;
  font: 12px 'Amadeus Pixel', monospace !important;
  letter-spacing: 0.18em;
}
html.pixel-view .scene-caption h1 {
  font-family: 'Amadeus Pixel', monospace;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--px-ink);
  text-shadow: 3px 3px 0 #000 !important;
  line-height: 1.1;
}
html.pixel-view .scene-caption > p {
  font-size: 12px;
  color: var(--px-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
html.pixel-view .scene-caption .view-options[open] > :not(summary) {
  background: var(--px-bg) !important;
  border-color: var(--px-line-soft) !important;
}
html.pixel-view .view-options label,
html.pixel-view .view-options p,
html.pixel-view .pixel-size legend {
  font-size: 12px;
  color: var(--px-dim);
}
html.pixel-view .pixel-size {
  border: 0;
  box-shadow: none;
}
html.pixel-view .pixel-size legend {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--px-accent);
}

/* ---------------------------------------------------------------- 3D labels */
html.pixel-view .label {
  font: 12px 'Amadeus Pixel', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--px-ink);
  text-shadow: 2px 2px 0 #000;
  padding: 0 3px;
  transform: translate(12px, -50%);
}
html.pixel-view .label:before {
  width: 4px;
  height: 4px;
  border: 0;
  border-radius: 0;
  background: var(--px-accent);
  left: -10px;
  top: 6px;
}
html.pixel-view .label.selected {
  color: #0b0916;
  background: var(--px-accent);
  text-shadow: none;
  box-shadow: 2px 2px 0 0 #000;
  border: 0;
  padding: 0 5px;
}

/* ---------------------------------------------------------------- side panels */
html.pixel-view .panel-heading h2 {
  font-family: 'Amadeus Pixel', monospace;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--px-accent);
}
html.pixel-view .detail .panel-heading {
  margin: -16px -16px 12px;
  padding: 6px 12px 6px 16px;
  background: var(--px-wash);
  border-bottom: 2px solid var(--px-line);
}
html.pixel-view .detail .panel-heading > span {
  color: var(--px-accent);
  font-size: 12px;
  letter-spacing: 0.14em;
}
html.pixel-view .detail .panel-heading > span::before {
  content: '■ ';
}
html.pixel-view .detail .panel-heading .iconbtn,
html.pixel-view #catalog .panel-heading .iconbtn {
  box-shadow: none !important;
  background: transparent !important;
}
html.pixel-view .detail h2 {
  font-family: 'Amadeus Pixel', monospace;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--px-ink);
}
html.pixel-view .badge {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--px-accent);
  box-shadow: var(--px-frame-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  margin-left: 2px;
}
html.pixel-view .detail p,
html.pixel-view .panel p {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: #cfc9ee;
}
html.pixel-view .detail dl div {
  border-bottom: 2px dotted var(--px-line-soft);
  padding: 7px 0;
}
html.pixel-view .detail dt {
  font-size: 12px;
  color: var(--px-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
html.pixel-view .detail dd {
  font-size: 12px;
  color: var(--px-ink);
}
html.pixel-view .detail small,
html.pixel-view .panel small {
  font-size: 12px !important;
  color: var(--px-faint) !important;
}
html.pixel-view .detail a,
html.pixel-view #sourceLink {
  color: var(--px-accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
html.pixel-view .related-objects h3,
html.pixel-view .nearest h3 {
  font-family: 'Amadeus Pixel', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--px-accent);
}
html.pixel-view .result {
  border-radius: 0;
}
html.pixel-view .result strong {
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
html.pixel-view .result small,
html.pixel-view .results-head,
html.pixel-view .catalog-footer {
  font-size: 12px !important;
  color: var(--px-dim);
}
html.pixel-view .result:hover,
html.pixel-view .result.active {
  background: var(--px-wash) !important;
  box-shadow: inset 2px 0 0 0 var(--px-accent);
}
html.pixel-view .object-icon {
  border-radius: 0;
  border: 0;
  box-shadow: var(--px-frame-soft);
  background: #0b0918;
  font-size: 14px;
}
html.pixel-view .tabs {
  border-bottom: 2px solid var(--px-line-soft);
  gap: 6px;
}
html.pixel-view .tabs button {
  box-shadow: none !important;
  padding: 0 10px !important;
}
html.pixel-view .filter {
  font-size: 12px !important;
  text-transform: uppercase;
}
html.pixel-view .dot {
  border-radius: 0;
}

/* ---------------------------------------------------------------- footer */
html.pixel-view .scale-info small,
html.pixel-view #focusText,
html.pixel-view .gesture,
html.pixel-view .gesture small,
html.pixel-view .zoom-track > div,
html.pixel-view .mobile-gesture-hint {
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--px-dim) !important;
}
html.pixel-view .scale-info strong {
  font-family: 'Amadeus Pixel', monospace;
  font-weight: 700;
  font-size: 16px !important;
  color: var(--px-accent) !important;
  letter-spacing: 0.06em;
}
html.pixel-view .zoom-dock,
html.pixel-view .mobile-dock {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--px-bg) !important;
  box-shadow: var(--px-frame), var(--px-drop) !important;
}

/* ---------------------------------------------------------------- floating bits */
html.pixel-view #toast,
html.pixel-view .travel-status,
html.pixel-view .first-exploration,
html.pixel-view .tour-panel,
html.pixel-view .offline-notice,
html.pixel-view .graphics-notice {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--px-bg) !important;
  box-shadow: var(--px-frame), var(--px-drop) !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
html.pixel-view .first-exploration h2,
html.pixel-view dialog h2 {
  font-family: 'Amadeus Pixel', monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
html.pixel-view dialog p,
html.pixel-view dialog li {
  font-size: 12px;
  line-height: 1.6;
}
html.pixel-view #loading {
  background: #05040c;
}
html.pixel-view .loader {
  border-radius: 0 !important;
}

/* ---------------------------------------------------------------- mobile tools sheet */
html.pixel-view body.mobile-atlas.mobile-tools-open .scene-caption {
  background: var(--px-bg) !important;
  border: 0 !important;
  box-shadow: var(--px-frame), var(--px-drop) !important;
}
html.pixel-view body.mobile-atlas .scene-caption h1 {
  font-size: 24px;
}
html.pixel-view body.mobile-atlas .panel-heading {
  background: rgba(10, 8, 22, 0.98) !important;
}
html.pixel-view body.mobile-atlas #language {
  padding: 0 22px 0 8px !important;
}

/* ---------------------------------------------------------------- entry screen */
html.pixel-view .entry-wordmark,
html.pixel-view .entry-wordmark-sub,
html.pixel-view #entryStatus {
  font-family: 'Amadeus Pixel', monospace !important;
  -webkit-font-smoothing: none;
}
html.pixel-view .entry-wordmark {
  font-weight: 700;
  letter-spacing: 0.14em;
}
html.pixel-view .entry-pulsar {
  image-rendering: pixelated;
}
@media (prefers-reduced-motion: reduce) {
  html.pixel-view * {
    transition: none !important;
  }
}

/* Pixel text is wider: tighten tracking where space is scarce. */
html.pixel-view .scene-caption .scale-jumps > button,
html.pixel-view .scene-caption .atlas-secondary-actions > button,
html.pixel-view .scene-caption .view-options > summary {
  letter-spacing: 0.02em;
  padding: 0 10px !important;
}
html.pixel-view body.mobile-atlas > header .brand {
  font-size: 12px;
  letter-spacing: 0.06em;
}
html.pixel-view body.mobile-atlas > header .brandmark {
  font-size: 16px !important;
}
html.pixel-view body.mobile-atlas .navbtn,
html.pixel-view body.mobile-atlas .mobile-dock button,
html.pixel-view body.mobile-atlas .zoom-dock button,
html.pixel-view body.mobile-atlas #language {
  letter-spacing: 0.01em;
  white-space: nowrap;
}
html.pixel-view body.mobile-atlas > header nav button {
  padding: 0 8px !important;
}
html.pixel-view body.mobile-atlas .mobile-dock button {
  padding: 0 2px !important;
  text-overflow: clip;
}
html.pixel-view body.mobile-atlas > footer .scale-info strong {
  font-size: 12px !important;
  white-space: nowrap;
}
html.pixel-view body.mobile-atlas .mobile-gesture-hint {
  letter-spacing: 0;
}
html.pixel-view body.mobile-atlas.mobile-tools-open .scene-caption .scale-jumps > button,
html.pixel-view body.mobile-atlas.mobile-tools-open .scene-caption .atlas-secondary-actions > button,
html.pixel-view body.mobile-atlas.mobile-tools-open .scene-caption .view-options > summary {
  letter-spacing: 0.01em;
}
html.pixel-view body.mobile-atlas .mobile-dock {
  padding: 3px;
  gap: 3px;
}
@media (orientation: portrait) {
  html.pixel-view body.mobile-atlas .mobile-dock {
    left: 6px;
    right: 6px;
  }
}
html.pixel-view body.mobile-atlas .mobile-dock button {
  letter-spacing: 0;
}
/* Dock auto-fit steps in the pixel font: 4/3 and 1 css px per font pixel
   (crisp on 3x and on every integer-density screen respectively). */
html.pixel-view body.mobile-atlas .mobile-dock.fit-1 button {
  white-space: normal;
  line-height: 1.15;
}
html.pixel-view body.mobile-atlas .mobile-dock.fit-2 button {
  font-size: 10.667px !important;
}
html.pixel-view body.mobile-atlas .mobile-dock.fit-3 button {
  font-size: 8px !important;
}

/* ================================================================ labs
   Comparison, pulsar lab, world lab, Earth sky, impact 3D, cosmic lab and the
   research panel share one pixel skin: violet panels, pixel type, notched
   frames and the accent of the selected object. The 3D views themselves are
   drawn by the same pixel pipeline as the atlas (renderWithViewStyle). */
html.pixel-view dialog:not(.membership-dialog) :where(*:not(svg, svg *)) {
  font-family: 'Amadeus Pixel', 'IBM Plex Mono', monospace !important;
  border-radius: 0 !important;
  border-color: var(--px-line-soft) !important;
  text-shadow: none !important;
  -webkit-font-smoothing: none;
}
html.pixel-view :is(#compareDialog, #pulsarDialog, #worldLabDialog, #earthSkyLab, #impact3dDialog, #cosmicLabDialog, #researchDialog) {
  background: #07050f !important;
  color: var(--px-ink) !important;
}
html.pixel-view :is(#compareDialog, #pulsarDialog, #worldLabDialog, #earthSkyLab, #impact3dDialog, #cosmicLabDialog)::backdrop {
  background: rgba(3, 2, 8, 0.82);
}
/* Bars: headings, toolbars, tab strips and playback rows. */
html.pixel-view :is(.lab-heading, .i3-header, .world-header, .sky-header, #cosmicLabDialog > header, .compact-heading, .world-toolbar, .i3-playback, .i3-panel-tabs, .cosmic-tabs) {
  background: rgba(10, 8, 22, 0.96) !important;
  background-image: none !important;
  box-shadow: inset 0 -2px 0 0 var(--px-line-soft) !important;
}
html.pixel-view .i3-playback {
  box-shadow: inset 0 2px 0 0 var(--px-line-soft) !important;
}
/* Side panels and cards. */
html.pixel-view :is(aside.i3-panel, aside.world-controls, aside.sky-sidebar, section.cosmic-panel, #pulsarDialog .compact-panels > section) {
  background: var(--px-bg) !important;
  background-image: none !important;
  box-shadow: inset 2px 0 0 0 var(--px-line-soft) !important;
}
html.pixel-view :is(.i3-metric, .world-metrics > div, #compareDialog .lab-heading ~ * div:has(> strong), .cosmic-panel dl, .compact-panels dl) {
  background: var(--px-bg2) !important;
  box-shadow: var(--px-frame-soft) !important;
  border: 0 !important;
}
html.pixel-view .world-metrics {
  background: rgba(10, 8, 22, 0.96) !important;
}
/* Stages behind the 3D or 2D views. */
html.pixel-view :is(.lab-viewport, .compact-stage, .i3-stage, .i3-loading, .world-stage, .cosmic-stage, .sky-status.sky-loading) {
  background: radial-gradient(ellipse at 50% 40%, #140e2c, #05040c 72%) !important;
  border: 0 !important;
  box-shadow: var(--px-frame-soft) !important;
}
/* Readouts floating over the views. */
html.pixel-view :is(.world-view-readout, .i3-attribution, .i3-phase, .world-message, .i3-hint) {
  background: rgba(10, 8, 22, 0.88) !important;
  box-shadow: var(--px-frame-soft) !important;
  border: 0 !important;
}
/* Type hierarchy. */
html.pixel-view :is(.i3-kicker, .world-kicker, .compact-kicker, #compareDialog .eyebrow, #cosmicLabDialog .eyebrow, .sky-header small, .world-section-title) {
  color: var(--px-accent) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
html.pixel-view dialog:not(.membership-dialog) :is(h1, h2, h3) {
  color: var(--px-ink) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
html.pixel-view :is(#compareDialog, #pulsarDialog, #worldLabDialog, #earthSkyLab, #impact3dDialog, #cosmicLabDialog) :is(strong, dd, .i3-asteroid-name) {
  color: var(--px-ink) !important;
}
html.pixel-view :is(#compareDialog, #pulsarDialog, #worldLabDialog, #earthSkyLab, #impact3dDialog, #cosmicLabDialog) :is(output, .pulse-counter, .i3-time) {
  color: var(--px-accent) !important;
}
html.pixel-view :is(#compareDialog, #pulsarDialog, #worldLabDialog, #earthSkyLab, #impact3dDialog, #cosmicLabDialog) :is(small, label, dt, legend, .i3-muted, .world-small, .world-note, .world-gesture, .compact-note, .compact-scale, .lab-scale-note, .lab-basis, .lab-explanation, .cosmic-note, .cosmic-caption, .cinema-legend, p) {
  color: var(--px-dim) !important;
}
html.pixel-view :is(#compareDialog, #pulsarDialog, #worldLabDialog, #earthSkyLab, #impact3dDialog, #cosmicLabDialog) label :is(strong, output) {
  color: var(--px-ink) !important;
}
html.pixel-view dialog:not(.membership-dialog) a {
  color: var(--px-accent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Buttons: one pixel button everywhere inside labs. */
html.pixel-view :is(#compareDialog, #pulsarDialog, #worldLabDialog, #earthSkyLab, #impact3dDialog, #cosmicLabDialog, #researchDialog) :is(button, summary):not(.view-style-option) {
  border: 0 !important;
  background: var(--px-btn) !important;
  background-image: none !important;
  color: var(--px-ink) !important;
  box-shadow: var(--px-frame-soft) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 400;
}
html.pixel-view :is(#compareDialog, #pulsarDialog, #worldLabDialog, #earthSkyLab, #impact3dDialog, #cosmicLabDialog, #researchDialog) :is(button, summary):not(:disabled):hover {
  color: var(--px-accent) !important;
  box-shadow: var(--px-frame-hot) !important;
}
html.pixel-view :is(#compareDialog, #pulsarDialog, #worldLabDialog, #earthSkyLab, #impact3dDialog, #cosmicLabDialog, #researchDialog) :is(button.active, button.selected, button[aria-pressed='true'], button[aria-selected='true'], [role='tab'][aria-selected='true'], .i3-primary, .world-primary, .primary) {
  background: var(--px-accent) !important;
  color: #0b0916 !important;
  box-shadow: var(--px-frame-hot) !important;
  font-weight: 700 !important;
}
html.pixel-view :is(#compareDialog, #pulsarDialog, #worldLabDialog, #earthSkyLab, #impact3dDialog, #cosmicLabDialog) :is(.lab-close, .i3-close, .sky-back, .compact-heading > button, #cosmicLabDialog > header button) {
  outline: 2px dashed var(--px-accent);
  outline-offset: -5px;
}
html.pixel-view :is(#compareDialog, #pulsarDialog, #worldLabDialog, #earthSkyLab, #impact3dDialog, #cosmicLabDialog) button:disabled {
  opacity: 0.45;
}
html.pixel-view dialog:not(.membership-dialog) :is(input[type='text'], input[type='search'], input[type='number'], input[type='datetime-local'], input[type='date'], input[type='time'], textarea) {
  border: 0 !important;
  background: #0b0918 !important;
  color: var(--px-ink) !important;
  box-shadow: var(--px-frame-soft) !important;
}
/* 2D canvases (sky chart, pulse traces) are drawn at art resolution. */
html.pixel-view :is(#earthSkyLab, #pulsarDialog, #compareDialog) canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* Text drawn over a 3D view keeps a hard 2 px pixel shadow for contrast. */
html.pixel-view :is(.i3-stage, .world-stage, .cosmic-stage, .compact-stage, .lab-viewport, .sky-stage) :where(h1, h2, h3, p, span, small, strong, label, div, output) {
  text-shadow: 2px 2px 0 rgba(5, 4, 12, 0.92) !important;
}
html.pixel-view dialog:not(.membership-dialog) select {
  letter-spacing: 0 !important;
  text-overflow: ellipsis;
}
/* Narrow phones: the pixel type is wider than the classic one. */
@media (max-width: 760px) {
  html.pixel-view #impact3dDialog .i3-header :is(.i3-kicker, .i3-close),
  html.pixel-view :is(#compareDialog, #pulsarDialog, #worldLabDialog, #earthSkyLab, #cosmicLabDialog) :is(.lab-close, .sky-back, .compact-heading > button, #cosmicLabDialog > header button) {
    font-size: 10.667px !important;
    letter-spacing: 0 !important;
  }
  html.pixel-view #impact3dDialog .i3-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html.pixel-view #impact3dDialog :is(.i3-header, .i3-brand, .i3-panel, .i3-playback) {
    min-width: 0;
  }
  html.pixel-view #impact3dDialog .i3-brand .i3-kicker {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.pixel-view #impact3dDialog .i3-close {
    flex-shrink: 0;
  }
  html.pixel-view #impact3dDialog .i3-metric {
    overflow: hidden;
  }
  html.pixel-view #impact3dDialog .i3-metric :is(small, strong) {
    letter-spacing: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.pixel-view #impact3dDialog .i3-metric strong {
    font-size: 10.667px !important;
  }
  html.pixel-view #impact3dDialog .i3-metric small {
    font-size: 8px !important;
  }
}

/* Theory Lab launcher and dialog in the pixel skin. */
html.pixel-view .theory-launch {
  background: var(--px-btn) !important;
  border-color: var(--px-line) !important;
  border-radius: 0;
  box-shadow: var(--px-frame-soft);
}
html.pixel-view .theory-launch svg {
  color: var(--px-accent);
}
html.pixel-view .theory-launch svg {
  shape-rendering: crispEdges;
}
html.pixel-view .theory-launch small {
  border-radius: 0;
  font-family: 'Amadeus Pixel', monospace;
  letter-spacing: 0;
}
html.pixel-view .theory-launch:hover {
  border-color: var(--px-accent) !important;
  box-shadow: var(--px-frame-hot);
}
html.pixel-view .theory-toolbar,
html.pixel-view .theory-toolbar button,
html.pixel-view .theory-loading {
  font-family: 'Amadeus Pixel', monospace;
  letter-spacing: 0;
}
html.pixel-view .theory-toolbar button,
html.pixel-view .theory-loading button {
  border-radius: 0;
}

/* Pulsar radio chip in the pixel skin. */
html.pixel-view .pulsar-radio {
  border-radius: 0;
  border-color: var(--px-line);
  background: var(--px-bg);
  box-shadow: var(--px-frame-soft), var(--px-drop);
  backdrop-filter: none;
  font-family: 'Amadeus Pixel', monospace;
  letter-spacing: 0;
}
html.pixel-view .pulsar-radio b {
  font-weight: 700;
}
html.pixel-view .pulsar-radio-bars i {
  width: 4px;
  height: calc(4px * round(down, calc(1 + 3 * var(--radio-level, 0)), 1));
  background: var(--px-accent);
}