/* A full-window map with small, on-demand control surfaces. */
:root { color-scheme: dark; --mono: "Cascadia Code", Consolas, monospace; --text: #e1e7ef; --muted: #91a0b2; --line: #ffffff16; --panel: #10161ef5; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #070a0f; color: var(--text); font: 13px "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button, select, input[type=date] { color: var(--text); background: #ffffff06; border: 1px solid var(--line); border-radius: 7px; }
button:hover { background: #ffffff0d; }
button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid #a4ccd3; outline-offset: 3px; }
[hidden] { display: none !important; }
.catalog-loading { position: fixed; z-index: 10020; left: 50%; bottom: 14px; width: min(176px, calc(100vw - 36px)); height: 2px; overflow: hidden; border-radius: 2px; background: #ffffff18; opacity: 1; pointer-events: none; transform: translateX(-50%); transition: opacity .24s ease; }
.catalog-loading::after { position: absolute; top: 0; bottom: 0; left: -38%; width: 38%; border-radius: inherit; background: linear-gradient(90deg, transparent, #c7a66f, #f0d9a0, #c7a66f, transparent); content: ""; animation: catalog-loading-sweep 1.15s ease-in-out infinite; }
.catalog-loading.is-done { opacity: 0; }
@keyframes catalog-loading-sweep { to { transform: translateX(364%); } }
@media (prefers-reduced-motion: reduce) { .catalog-loading { transition: none; }.catalog-loading::after { left: 0; width: 34%; animation: none; } }
.catalog-zoom-warning { position: fixed; z-index: 10019; left: 50%; bottom: 28px; width: min(360px, calc(100vw - 28px)); padding: 8px 11px; border: 1px solid #d6b16e45; border-radius: 8px; background: #111922f2; box-shadow: 0 8px 28px #0008; color: #dfc58f; font-size: 10px; line-height: 1.45; text-align: center; pointer-events: none; transform: translateX(-50%); }
.app-shell, .main-layout, .map-panel { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; }
.map-panel { overflow: hidden; background: #070a0f; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#space-canvas { cursor: grab; touch-action: none; }
#space-canvas.is-dragging { cursor: grabbing; }
#star-canvas, #overlay-canvas { pointer-events: none; }
.map-toolbar { position: fixed; top: 16px; left: 16px; z-index: 20; display: flex; align-items: center; gap: 3px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: #10161eeb; box-shadow: 0 4px 20px #0003; }
.map-toolbar button { border: 0; min-width: 34px; height: 34px; padding: 0 10px; background: transparent; font-size: 16px; border-radius: 7px; }
.map-toolbar button[data-panel=navigation-panel] { font-size: 12px; }
.map-toolbar button[aria-expanded=true] { background: #ffffff10; color: #f0ce98; }
.map-toolbar .home-button { color: #e8c48f; font-size: 22px; }
.toolbar-divider { height: 17px; width: 1px; margin: 0 3px; background: var(--line); }
.floating-panel { position: fixed; z-index: 19; width: 304px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 94px); overflow-y: auto; overscroll-behavior: contain; top: 72px; left: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 12px 45px #0005; scrollbar-width: thin; }
.floating-panel h2, .section-heading { margin: 0 0 14px; font-size: 12px; font-weight: 500; color: #c6d1df; }
.inspector { width: 330px; }
.panel-close { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border: 0; background: transparent; font-size: 21px; color: var(--muted); }
.inspector-section { padding: 0; border: 0; }
.selected-section > .section-heading { padding-right: 30px; }
.object-card { padding: 0; border: 0; background: transparent; }
.presets { display: grid; gap: 3px; }
.preset-button { text-align: left; padding: 10px 12px; border: 0; background: transparent; }
.preset-button.is-active { background: #ffffff09; color: #efcf9b; }
.time-controls { display: grid; grid-template-columns: 1fr auto; gap: 12px 8px; align-items: center; }
.control-caption, .calendar-glyph { display: none; }
.date-field input { width: 100%; height: 36px; padding: 0 8px; }
.play-button { height: 36px; min-width: 38px; }
.play-label { display: none; }
.play-button.is-playing { color: #f0ce98; background: #c89d5820; }
.map-toolbar button.is-playing { color: #f0ce98; }
.speed-field { grid-column: 1 / -1; }
.speed-field select { width: 100%; padding: 8px; }
.more-details { margin-top: 16px; color: var(--muted); font-size: 11px; }
.more-details summary { cursor: pointer; padding: 9px 0; border-top: 1px solid var(--line); color: #aab7c7; }
.more-details[open] summary { margin-bottom: 8px; }
.help-keys { display: grid; grid-template-columns: auto 1fr; gap: 11px; margin: 0; font-size: 11px; }
.help-keys dt { color: #aab7c7; }.help-keys dd { margin: 0; text-align: right; color: #e0e6ee; }
.map-topline { position: absolute; bottom: 20px; left: 20px; display: flex; align-items: baseline; gap: 12px; pointer-events: none; text-shadow: 0 1px 5px #000; }
.scale-label strong { font: 10px var(--mono); font-weight: 400; letter-spacing: .09em; color: #94a2b4; }
.focus-readout, .scale-chip-dot, .north-indicator { display: none; }
.scale-chip { font: 10px var(--mono); color: #bdc7d4; }
.zoom-controls { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 2px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 4px; background: #10161ed9; }
.zoom-controls button { width: 32px; height: 30px; border: 0; background: transparent; font-size: 19px; }
.zoom-controls input { width: 0; opacity: 0; margin: 0; height: 25px; accent-color: #d7b77d; pointer-events: none; }
.zoom-controls:hover input, .zoom-controls:focus-within input { width: 110px; opacity: 1; margin: 0 8px; pointer-events: auto; }
.zoom-readout { display: none; }
.galaxy-legend { position: absolute; bottom: 58px; right: 18px; display: flex; gap: 8px; font: 9px var(--mono); color: #93a0b1; pointer-events: none; }
.galaxy-legend span { display: flex; align-items: center; gap: 4px; }.galaxy-legend i { width: 5px; height: 5px; border-radius: 50%; background: #ac9bc4; }
.statusbar { position: fixed; bottom: 58px; left: 16px; z-index: 30; background: #24191af2; padding: 10px 14px; border: 1px solid #805452; border-radius: 8px; font-size: 11px; max-width: calc(100vw - 32px); }
.statusbar > span { display: flex; align-items: center; gap: 8px; }.status-dot { width: 6px; height: 6px; border-radius: 50%; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.object-eyebrow { display: flex; align-items: center; gap: 7px; color: #dda967; font: 8px var(--mono); letter-spacing: .1em; }
.object-kind-dot { width: 6px; height: 6px; border-radius: 50%; background: #efa859; box-shadow: 0 0 7px #efa85977; }
.object-id { margin-left: auto; color: #718096; }
.object-card h1 { margin: 11px 0 3px; color: #edf1f6; font-weight: 550; font-size: 22px; letter-spacing: -.035em; }
.object-description { margin: 0 0 8px; color: #8b97a9; font-size: 10px; line-height: 1.5; }
.wikipedia-link { display: inline-block; margin: 0 0 12px; color: #9fc8dc; font: 8px var(--mono); letter-spacing: .08em; text-decoration: none; }
.wikipedia-link:hover { color: #d2eaf4; text-decoration: underline; }
.wikipedia-link[hidden] { display: none; }
.focus-object-button { margin: 0 0 11px; padding: 7px 9px; border: 1px solid #344454; border-radius: 4px; background: #17202b; color: #a8c8cf; font: 8px var(--mono); letter-spacing: .09em; cursor: pointer; }
.focus-object-button:hover:not(:disabled) { border-color: #57818a; background: #1d2c35; color: #d0eaeb; }
.focus-object-button:disabled { opacity: .55; cursor: default; }
.object-stats { padding-top: 5px; border-top: 1px solid #293241; }
.stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; padding: 7px 0 2px; color: #7c899a; font-size: 9px; }
.stat-row[hidden] { display: none; }
.stat-row strong { color: #c7d0dc; text-align: right; font: 9px var(--mono); overflow-wrap: anywhere; }
.uncertainty-note { display: flex; gap: 7px; margin-top: 12px; padding: 8px; border-radius: 4px; background: #201d19; color: #b09a7c; font-size: 9px; line-height: 1.45; }
.layers-section { padding-bottom: 12px; }
.layers-section .section-heading { margin-bottom: 9px; }
.layer-row { display: flex; align-items: center; justify-content: space-between; min-height: 34px; color: #a9b3c1; font-size: 10px; cursor: pointer; }
.layer-name { display: flex; align-items: center; gap: 8px; }
.layer-dot { width: 7px; height: 7px; border-radius: 50%; }
.layer-planets { background: #eab16b; box-shadow: 0 0 6px #eab16b66; }.layer-stars { background: #7bc7d2; box-shadow: 0 0 6px #7bc7d266; }.layer-galaxies { background: #b8a1d9; box-shadow: 0 0 6px #b8a1d966; }.layer-guides { background: #56687d; }
.layer-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle { position: relative; width: 27px; height: 15px; border: 1px solid #384354; border-radius: 9px; background: #212a36; transition: .18s ease; }
.toggle i { position: absolute; top: 2px; left: 2px; width: 9px; height: 9px; border-radius: 50%; background: #718096; transition: .18s ease; }
.layer-row input:checked + .toggle { background: #594932; border-color: #806b48; }.layer-row input:checked + .toggle i { left: 14px; background: #ecc17c; box-shadow: 0 0 6px #ecc17c66; }
.layer-row input:focus-visible + .toggle { outline: 2px solid #9bd5db; outline-offset: 2px; }
.dataset-section { padding-top: 16px; }
.dataset-section .section-heading { margin-bottom: 11px; }
.dataset-card { padding: 11px; border: 1px solid #26313d; border-radius: 6px; background: #0d131b; }
.dataset-status { display: flex; align-items: center; gap: 7px; color: #8ac3a9; font: 8px var(--mono); letter-spacing: .04em; }
.status-check { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #1c382f; color: #89c6a7; font-size: 10px; }
.dataset-counts { display: flex; justify-content: space-between; padding: 14px 3px 10px; }
.dataset-counts div { display: grid; gap: 4px; }
.dataset-counts strong { color: #dbe1ea; font: 15px var(--mono); font-weight: 400; }
.dataset-counts span { color: #69788c; font: 7px var(--mono); letter-spacing: .08em; }
.dataset-card p { border-top: 1px solid #252e3a; margin: 0; padding-top: 9px; color: #768397; font-size: 9px; line-height: 1.5; }
.dataset-card code { color: #b5c0cf; font: 8px var(--mono); }

/* Panel typography stays legible without adding a second frame around its contents. */
.object-card h1 { font-size: 21px; overflow-wrap: anywhere; }.object-id { max-width: 155px; overflow-wrap: anywhere; font-size: 8px; }
.object-description { font-size: 12px; margin: 8px 0 12px; }.stat-row, .stat-row strong { font-size: 11px; line-height: 1.5; }
.more-details .stat-row { display: block; }.more-details .stat-row strong { display: block; text-align: left; margin-top: 4px; }
.focus-object-button { font: 11px "Segoe UI", sans-serif; padding: 8px 12px; }.layer-row { font-size: 12px; min-height: 38px; }
.dataset-card { border: 0; padding: 0; background: transparent; }.dataset-section .section-heading, .dataset-status { display: none; }
@media (max-width: 480px) { .map-toolbar { left: 10px; top: 10px; }.floating-panel { top: 65px; left: 10px; max-width: calc(100vw - 20px); max-height: calc(100dvh - 82px); }.map-topline { left: 12px; bottom: 17px; gap: 8px; }.scale-label strong, .scale-chip { font-size: 9px; }.zoom-controls { right: 10px; bottom: 10px; }.zoom-controls:hover input, .zoom-controls:focus-within input { width: 70px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

.galaxy-legend { position: static; flex-wrap: wrap; margin-top: 16px; pointer-events: auto; }
.galaxy-legend .morphology-e { background: #e7bd82; }.galaxy-legend .morphology-s0 { background: #b9a0d9; }.galaxy-legend .morphology-s0a { background: #c7a6cf; }.galaxy-legend .morphology-spiral { background: #91b9dc; }.galaxy-legend .morphology-irregular { background: #8fceb8; }.galaxy-legend .morphology-peculiar { background: #df9b89; }.galaxy-legend .morphology-agn { background: #d5a17a; }.galaxy-legend .morphology-unknown { background: #aeb6c2; }

/* Object information: identity, actions, key facts, then optional provenance. */
.inspector { padding: 20px; }
.selected-section > .section-heading { margin-bottom: 20px; color: #8493a5; font-size: 11px; }
.object-card .object-eyebrow { font: 10px "Segoe UI", sans-serif; letter-spacing: .08em; }
.object-card h1 { margin: 8px 0 0; font-size: 25px; font-weight: 550; line-height: 1.2; }
.object-card .object-description { margin: 9px 0 18px; line-height: 1.55; color: #9aa8ba; }
.object-actions { display: flex; gap: 8px; margin-bottom: 20px; }
.object-actions .focus-object-button, .object-actions .wikipedia-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1; min-height: 36px; margin: 0; padding: 8px 10px; border-radius: 7px; border: 1px solid #ffffff18; font: 12px "Segoe UI", sans-serif; letter-spacing: 0; text-decoration: none; white-space: nowrap; }
.object-actions .focus-object-button { background: #b5d6df16; color: #c1e2e8; border-color: #9cc5d32e; }
.object-actions .focus-object-button:disabled { background: #ffffff04; color: #a6b8c1; border-color: #ffffff0d; opacity: 1; }
.object-actions .wikipedia-link { background: transparent; color: #b5c1d1; }
.object-actions .wikipedia-link:hover { background: #ffffff09; color: #eff5fc; border-color: #ffffff30; }
.object-actions .wikipedia-link span[aria-hidden] { color: #7f91a8; }
.object-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px 0 2px; border-color: #ffffff10; }
.object-stats .stat-row { display: block; padding: 0; }
.object-stats .stat-row > span { display: block; margin-bottom: 6px; font-size: 10px; color: #8493a5; }
.object-stats .stat-row strong { display: block; text-align: left; font: 12px/1.65 "Segoe UI", sans-serif; color: #e0e6ef; }
.object-card .more-details { margin-top: 20px; }
.object-card .more-details .stat-row { padding: 0 0 14px; }
.object-card .more-details .stat-row > span { font-size: 10px; color: #8493a5; }
.object-card .more-details .stat-row strong { margin-top: 5px; font: 11px/1.65 "Segoe UI", sans-serif; color: #aab7c8; }
.object-card .uncertainty-note { margin-top: 0; padding: 12px; background: #ffffff04; color: #91a0b2; font-size: 11px; line-height: 1.6; }

.panel-subtitle { margin: -5px 0 18px; color: #8b9aac; font-size: 11px; line-height: 1.45; }
.render-setting { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 10px; padding: 0 0 13px; margin-bottom: 13px; border-bottom: 1px solid var(--line); }
.render-setting label { font-size: 12px; color: #c5d0df; }
.render-setting input[type=number] { width: 96px; background: #ffffff06; border: 1px solid var(--line); border-radius: 6px; padding: 7px; color: var(--text); }
.render-setting input[type=range] { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: #d7b77d; }
.render-setting select { grid-column: 1 / -1; padding: 8px; width: 100%; }
.render-setting p, .setting-hint { margin: 0; color: #8898ac; font-size: 11px; line-height: 1.5; }
.render-setting p { grid-column: 1 / -1; }.setting-hint { margin-bottom: 14px; }
.sensitivity-settings { min-width: 0; margin: 1px 0 16px; padding: 0; border: 0; }
.sensitivity-settings legend { margin-bottom: 10px; padding: 0; color: #b6c2d1; font-size: 11px; }
.sensitivity-setting { gap: 5px 10px; padding-bottom: 10px; margin-bottom: 10px; }
.sensitivity-setting output { color: #d9b777; font: 10px var(--mono); }
.sensitivity-setting p { color: #77879b; font-size: 10px; }
.render-setting-toggle { grid-template-columns: 1fr auto; }
.render-setting-toggle label { cursor: pointer; }
.render-setting-toggle input[type=checkbox] { width: 17px; height: 17px; margin: 0; accent-color: #d7b77d; }
.advanced-render-settings { margin: 1px 0 16px; border-bottom: 1px solid var(--line); }
.advanced-render-settings > summary { display: flex; justify-content: space-between; padding: 10px 0 12px; color: #b6c2d1; cursor: pointer; font-size: 11px; }
.advanced-render-settings > summary span { color: #7d8da1; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.advanced-render-settings .render-setting { padding-bottom: 12px; margin-bottom: 12px; }
.setting-note { margin: -2px 0 14px; color: #7c8ca0; font-size: 10px; line-height: 1.4; }
.render-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.render-actions > span { color: #728197; font-size: 9px; }
.reset-settings { margin-top: 2px; padding: 7px 10px; font-size: 10px; color: #b7c4d4; }
.help-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0; color: #8797aa; font-size: 10px; }
kbd { padding: 2px 5px; border: 1px solid #ffffff1a; border-radius: 4px; background: #ffffff08; color: #d2dbe7; font: 9px var(--mono); }
.help-catalog-details { margin: 0 0 12px; }
.documentation-launch, .documentation-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid #d6b16e3b; background: #d6b16e0d; color: #e9cb91; font-size: 11px; text-align: left; }
.documentation-launch:hover, .documentation-action:hover { border-color: #d6b16e70; background: #d6b16e18; }
.documentation-window { position: fixed; z-index: 10001; top: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; width: min(560px, calc(100vw - 32px)); overflow: hidden; border: 1px solid #8897aa3b; border-radius: 12px; background: linear-gradient(155deg, #111a25fa, #0a1018f8 72%); box-shadow: 0 18px 60px #000a, inset 0 1px #ffffff0c; backdrop-filter: blur(16px); }
.documentation-header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 58px 17px 22px; border-bottom: 1px solid var(--line); }
.documentation-kicker { color: #d9b777; font: 9px var(--mono); letter-spacing: .14em; }
.documentation-header h2 { margin: 7px 0 4px; color: #edf2f8; font-size: 19px; font-weight: 500; }
.documentation-header p { margin: 0; color: #8c9bae; font-size: 11px; }
.documentation-header .panel-close { right: 14px; top: 18px; }
.documentation-content { min-height: 0; overflow: auto; padding: 8px 22px 22px; scrollbar-width: thin; }
.documentation-section { padding: 14px 0; border-bottom: 1px solid #ffffff12; }
.documentation-section > summary { display: flex; align-items: center; gap: 8px; color: #d1dae6; cursor: pointer; font-size: 12px; font-weight: 500; }
.documentation-section > summary::marker { color: #c5a66f; }
.documentation-section > p { margin: 10px 0 0; color: #9aa9ba; font-size: 11px; line-height: 1.6; }
.documentation-section > p strong { color: #c8d3e0; font-weight: 500; }
.documentation-keys { display: grid; grid-template-columns: 1fr auto; gap: 7px 20px; margin: 13px 0 0; padding: 0; font-size: 11px; }
.documentation-keys dt { color: #8f9fb2; }
.documentation-keys dd { margin: 0; color: #d1dae6; text-align: right; }
.documentation-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 13px; }
.documentation-presets button { padding: 8px 10px; color: #c5d0df; font-size: 10px; text-align: left; }
.documentation-presets button:hover { border-color: #d6b16e55; color: #efcf9b; }
.documentation-action { display: inline-flex; width: auto; margin-top: 12px; }
.documentation-section .documentation-action + .documentation-action { margin-left: 6px; }
.documentation-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.documentation-counts > div { display: grid; gap: 3px; padding: 9px 10px; border: 1px solid #ffffff12; border-radius: 7px; background: #ffffff04; }
.documentation-counts strong { color: #e7c882; font: 500 15px var(--mono); }
.documentation-counts span { color: #8090a4; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.documentation-sources { display: grid; gap: 7px; margin: 12px 0 0; padding-left: 17px; color: #9aa9ba; font-size: 10px; line-height: 1.5; }
.documentation-window[hidden] { display: none !important; }
@media (max-width: 380px) { .map-toolbar { gap: 1px; padding: 4px; }.map-toolbar button { min-width: 30px; padding: 0 8px; } }

/* Compact performance HUD: pinned to the map's right edge, with severity color on timings. */
.render-perf-panel {
  position: fixed;
  z-index: 10000;
  top: 12px;
  right: 12px;
  display: grid;
  gap: 12px;
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 14px;
  border: 1px solid #7e91a637;
  border-radius: 10px;
  background: linear-gradient(145deg, #101823f5, #080d14f2 75%);
  box-shadow: 0 12px 38px #0009, inset 0 1px #ffffff0c;
  color: #cbd5e1;
  font: 11px/1.4 var(--mono);
  pointer-events: auto;
  backdrop-filter: blur(12px);
}
.perf-header { display: grid; gap: 5px; padding-bottom: 9px; border-bottom: 1px solid #ffffff13; }
.perf-heading, .perf-context { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.perf-kicker { color: #e2e9f2; font: 600 10px/1.2 var(--mono); letter-spacing: .13em; }
.perf-build { padding: 3px 6px; border: 1px solid #ffffff12; border-radius: 4px; background: #ffffff06; color: #8fa0b4; font-size: 9px; }
.perf-context { color: #8e9daf; font-size: 10px; }
.perf-renderer { padding: 2px 6px; border-radius: 4px; background: #ffffff0a; color: #aab6c5; font-size: 8px; letter-spacing: .08em; }
.perf-renderer--gpu { background: #55bf8b18; color: #80d9a8; }
.perf-renderer--canvas { background: #d9a44a1c; color: #e4b76d; }
.perf-summary { display: grid; grid-template-columns: 1fr 1.2fr; gap: 9px; }
.perf-total, .perf-percentiles, .perf-count, .perf-phase { border: 1px solid #ffffff0b; border-radius: 6px; background: #ffffff04; }
.perf-total { display: grid; align-content: center; gap: 2px; padding: 9px 11px; border-left: 2px solid #ffffff27; }
.perf-total > span { color: #8e9daf; font-size: 9px; }
.perf-total > strong { color: #e5edf6; font: 600 25px/1.1 var(--mono); letter-spacing: -.05em; }
.perf-total > small { color: #78889b; font-size: 9px; }
.perf-percentiles { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; padding: 6px 3px; }
.perf-percentiles > div { display: grid; justify-items: center; gap: 4px; }
.perf-percentiles > div + div { border-left: 1px solid #ffffff10; }
.perf-percentiles span { color: #78889b; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.perf-percentiles strong { color: #d3deea; font: 500 13px var(--mono); }
.perf-featured-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.perf-featured-time { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 8px; min-width: 0; padding: 6px 8px; border: 1px solid #b89bda1c; border-left: 2px solid #b89bda66; border-radius: 6px; background: #b89bda08; }
.perf-featured-time > span { overflow: hidden; color: #a99ac0; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.perf-featured-time > strong { color: #e0d1f4; font: 500 11px var(--mono); white-space: nowrap; }
.perf-featured-time > small { grid-column: 1 / -1; color: #78889b; font-size: 8px; }
.perf-featured-time > small b { color: #a99ac0; font: 500 8px var(--mono); }
.perf-counts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.perf-count { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 7px 6px 6px; border-top: 2px solid #61708455; }
.perf-count > span { overflow: hidden; color: #8695a8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.perf-count > strong { color: #dbe4ef; font: 500 15px/1.2 var(--mono); }
.perf-count > small { min-height: 10px; overflow: hidden; color: #6f7f92; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.perf-count--stars { border-top-color: #d6b16e; }.perf-count--stars > strong { color: #f0cc83; }
.perf-count--galaxies { border-top-color: #b89bda; }.perf-count--galaxies > strong { color: #d1b8ef; }
.perf-count--planets { border-top-color: #71bac9; }.perf-count--planets > strong { color: #95d4df; }
.perf-count--other { border-top-color: #8592a2; }
.perf-count--total { border-top-color: #e7edf7; background: #ffffff09; }
.perf-count--total > strong { color: #f4f7fc; }
.perf-memory { display: grid; gap: 6px; padding: 8px 9px 7px; border: 1px solid #60bf981c; border-left: 2px solid #60bf9880; border-radius: 6px; background: #49b77a08; }
.perf-memory-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #8da394; font-size: 9px; }
.perf-memory-heading > strong { color: #86d9aa; font: 500 13px/1.2 var(--mono); }
.perf-memory-details { display: grid; gap: 6px; }
.perf-memory-details > summary, .perf-breakdown > summary, .perf-sample-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #8292a6; cursor: pointer; font-size: 9px; list-style: none; }
.perf-memory-details > summary::-webkit-details-marker, .perf-breakdown > summary::-webkit-details-marker, .perf-sample-details > summary::-webkit-details-marker { display: none; }
.perf-memory-details > summary::after, .perf-breakdown > summary::after, .perf-sample-details > summary::after { content: "+"; color: #d5b474; font: 11px var(--mono); }
.perf-memory-details[open] > summary::after, .perf-breakdown[open] > summary::after, .perf-sample-details[open] > summary::after { content: "−"; }
.perf-memory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; color: #718196; font-size: 8px; }
.perf-memory-grid > span { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px; }
.perf-memory-grid strong { color: #b4c4b8; font: 400 8px var(--mono); }
.perf-memory-details > small { color: #63766b; font-size: 8px; line-height: 1.4; }
.perf-breakdown { display: grid; gap: 8px; padding-top: 1px; }
.perf-breakdown > summary > span { color: #66768a; font-size: 8px; }
.perf-section { display: grid; gap: 6px; }
.perf-section-heading { display: flex; justify-content: space-between; color: #9eacbd; font-size: 10px; }
.perf-section-heading > span + span { color: #66768a; font-size: 8px; }
.perf-phase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.perf-phase { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; padding: 5px 6px; }
.perf-phase > span { overflow: hidden; color: #8291a4; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.perf-phase > strong { color: #dce5ef; font: 500 10px var(--mono); white-space: nowrap; }
.perf-phase-p95 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: #718196; font-size: 9px; }
.perf-phase-p95 > span { color: #8a99ac; }
.perf-phase-p95 strong { color: #d5deea; font: 500 9px var(--mono); }
.perf-footer { display: grid; gap: 5px; padding-top: 8px; border-top: 1px solid #ffffff12; }
.perf-sample-details { display: grid; gap: 5px; }
.perf-sample-details > div:not(.perf-base-detail) { display: flex; justify-content: space-between; gap: 8px; }
.perf-sample-details > div > span { flex: 0 0 auto; color: #718196; font-size: 9px; }
.perf-sample-details > div > strong { color: #b3c0d0; font: 400 9px/1.4 var(--mono); text-align: right; overflow-wrap: anywhere; }
.perf-base-detail { color: #66768a; font-size: 8px; line-height: 1.45; }
.render-perf-panel .perf-time--good { color: #80d9a8 !important; text-shadow: 0 0 9px #55bf8b30; }
.render-perf-panel .perf-time--warn { color: #efbd68 !important; text-shadow: 0 0 9px #efbd6822; }
.render-perf-panel .perf-time--bad { color: #ff817b !important; text-shadow: 0 0 9px #ff817b26; }
@media (max-width: 520px) {
  .render-perf-panel { top: 8px; right: 8px; width: calc(100vw - 16px); max-height: min(60dvh, 470px); padding: 9px; gap: 8px; }
  .perf-counts { gap: 3px; }
  .perf-count { padding: 6px 4px 5px; }.perf-count > strong { font-size: 12px; }
}
@media (max-width: 620px) {
  .documentation-window { top: 64px; right: 8px; bottom: 8px; left: 8px; width: auto; }
  .documentation-header { padding: 18px 52px 14px 16px; }
  .documentation-content { padding: 6px 16px 16px; }
}