/* One glass layer over the model; the stage has a single flat color. */
@property --glass-reveal {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
body[data-layout="observatory"].glass-ui {
  --r-xl: 30px;
  --r-lg: 26px;
  --glass-x: 50%;
  --glass-y: 25%;
  --panel-tint: rgb(255 255 255 / .30);
  --selection-tint: rgb(255 255 255 / .72);
  --row-hover: rgb(210 230 255 / .48);
  --glass-halo: 30 30 30;
  --glass-edge: rgb(255 255 255 / .76);
  --glass-rim: inset 0 1px 0 rgb(255 255 255 / .88), inset 0 -2px 4px rgb(0 0 0 / .13), inset 2px 0 2px rgb(255 255 255 / .65), inset -2px 0 2px rgb(0 0 0 / .08), inset 0 0 2px rgb(0 0 0 / .36);
  background: #f1f1f1;
}
body[data-layout="observatory"].dark.glass-ui {
  --panel-tint: rgb(34 34 34 / .42);
  --selection-tint: rgb(255 255 255 / .12);
  --row-hover: rgb(255 255 255 / .09);
  --glass-halo: 255 255 255;
  --glass-edge: rgb(255 255 255 / .22);
  --glass-rim: inset 0 1px 0 rgb(255 255 255 / .32), inset 0 -2px 4px rgb(0 0 0 / .45), inset 2px 0 2px rgb(255 255 255 / .12), inset -2px 0 2px rgb(0 0 0 / .3), inset 0 0 2px rgb(0 0 0 / .55);
  --bg: #181818;
  --surface: #242424;
  --ink: #e8e8e8;
  --ink-strong: #f4f4f4;
  --muted: #aaa;
  --faint: #888;
  --accent: #dedede;
  --accent-soft: #2c2c2c;
  --accent-line: #454545;
  background: #181818;
}
/* Keep the light palette's luminance while giving its washes a cool blue hue. */
body[data-layout="observatory"].glass-ui:not(.dark) {
  --bg: #eef2f8;
  --panel-tint: rgb(235 244 255 / .30);
  --glass-halo: 90 145 225;
  --glass-ui-fill: linear-gradient(135deg,rgb(255 255 255 / .46),rgb(182 218 255 / .08) 52%,rgb(225 238 255 / .30));
  background: #eef2f8;
}
body[data-layout="observatory"] .shell { position: relative; z-index: 1; }
body[data-layout="observatory"] .site-header { z-index: 10; }
body[data-layout="observatory"].glass-ui .workbench {
  border: 0; background: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; isolation: auto;
}
body[data-layout="observatory"].glass-ui :is(.workbench,.view-header,.playback)::before,
body[data-layout="observatory"].glass-ui :is(.workbench,.view-header,.playback)::after { display: none; }
body[data-layout="observatory"].glass-ui .view-header {
  border: 0; margin: 0 12px 8px; background: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-layout="observatory"].glass-ui :is(.site-header,.side-panel,.inspector) {
  --glass-reveal: 0;
  --pane-base: transparent;
  border: 1px solid var(--glass-edge); border-radius: var(--r-lg);
  background: radial-gradient(400px circle at var(--glass-x) var(--glass-y),rgb(var(--glass-halo) / calc(.10 * var(--glass-reveal))),transparent 72%),var(--glass-ui-fill);
  background-color: var(--pane-base);
  color: var(--ink);
  box-shadow: var(--glass-rim);
  backdrop-filter: var(--glass-ui-blur); -webkit-backdrop-filter: var(--glass-ui-blur);
  transition: --glass-reveal 220ms ease,background-color 240ms ease,color 240ms ease,transform 320ms var(--ease-drawer),opacity 220ms ease,visibility 320ms;
}
body[data-layout="observatory"].glass-ui :is(small,p,.eyebrow,.phase-time,.phase-index,.observation-index).model-ink { --ink-rest: var(--muted); }
body[data-layout="observatory"].glass-ui :is(.legend-note,.orbit-hint span,.view-meta small).model-ink { --ink-rest: var(--faint); }
body[data-layout="observatory"].glass-ui .pen-click-control .model-ink { --ink-rest: var(--muted); }
body[data-layout="observatory"].glass-ui .scene-title-word.model-ink { --ink-rest: var(--ink-strong); }
body[data-layout="observatory"].glass-ui .scene-title-index.model-ink { --ink-rest: var(--domain); }
body[data-layout="observatory"].glass-ui :is(.site-header,.side-panel,.inspector):is(:hover,:focus-within) {
  --glass-reveal: 1;
}
/* Draw the sheen in the pane background so it cannot scroll out as a second card. */
body[data-layout="observatory"].glass-ui :is(.site-header,.side-panel,.inspector)::before,
body[data-layout="observatory"].glass-ui :is(.site-header,.side-panel,.inspector)::after {
  content: none; display: none;
}
body[data-layout="observatory"].glass-ui .viewport {
  border: 0; border-radius: 0; background: transparent; box-shadow: none; pointer-events: none;
}
body[data-layout="observatory"].glass-ui :is(.header-spec,.header-tools,.header-actions .text-button) {
  background: transparent; border: 0; box-shadow: none;
}
body[data-layout="observatory"].glass-ui .header-tools { gap: 12px; }
body[data-layout="observatory"] .side-panel { padding: 22px 14px 14px; overflow-y: auto; }
body[data-layout="observatory"] :is(.side-panel,.inspector) { scrollbar-width: auto; scrollbar-color: auto; }
body[data-layout="observatory"] :is(.side-panel,.inspector)::-webkit-scrollbar { width: 5px; }
body[data-layout="observatory"] :is(.side-panel,.inspector)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
body[data-layout="observatory"] :is(.side-panel,.inspector)::-webkit-scrollbar-track { margin-block: 24px; }
body[data-layout="observatory"] :is(.side-panel,.inspector)::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 9px; }
body[data-layout="observatory"] .panel-heading { padding: 0 12px 15px; }
body[data-layout="observatory"] #system-list { padding: 0 2px 0 0; max-height: none; flex: 0 0 auto; overflow: visible; }
/* The sliding selection plate lives in suite-ui.css / suite-ui.js and is shared by every page. */
body[data-layout="observatory"] :is(#system-list,#phase-list,#observation-list,.speed-control) { position: relative; isolation: isolate; }
body[data-layout="observatory"].glass-ui :is(.system-item,.phase-item,.observation) {
  border: 0; background: transparent; box-shadow: none; border-radius: 18px;
  transition: background 220ms var(--ease),color 220ms,transform 220ms var(--ease);
}
body[data-layout="observatory"].glass-ui .system-item { min-height: 54px; padding: 9px 12px; margin: 0 0 3px; gap: 8px; }
body[data-layout="observatory"] .system-index { display: none; }
body[data-layout="observatory"] .system-copy { gap: 5px; }
body[data-layout="observatory"] .system-copy strong { font-size: 12px; font-weight: 600; }
body[data-layout="observatory"] .system-copy small { font-size: 9px; color: var(--muted); }
body[data-layout="observatory"].glass-ui :is(.system-item,.phase-item,.observation,.speed-button).active { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-strong); }
body[data-layout="observatory"] .system-item.active > svg { color: var(--accent); opacity: 1; }
body[data-layout="observatory"] .phase-item { min-height: 35px; padding: 7px 11px; margin-bottom: 3px; }
body[data-layout="observatory"] #phase-list { flex: 0 0 auto; overflow: visible; }
body[data-layout="observatory"] .phase-index { font-family: var(--font-ui); opacity: .55; }
body[data-layout="observatory"] .side-divider { margin: 16px 11px; opacity: .5; }
body[data-layout="observatory"] .section-toggle { padding-inline: 11px; }
body[data-layout="observatory"] .sidebar-footer { margin: 22px 11px 0; flex-shrink: 0; }
body[data-layout="observatory"] .inspector { padding: 22px 22px 15px; }
body[data-layout="observatory"] .chapter-sub { display: none; }
body[data-layout="observatory"] .inspector h2 { font-family: var(--font-ui); font-size: 19px; font-weight: 600; line-height: 1.55; letter-spacing: -.03em; }
body[data-layout="observatory"] #chapter-body { font-size: 11px; line-height: 1.9; }
body[data-layout="observatory"] #chapter-copy { max-height: none; overflow: visible; }
body[data-layout="observatory"] .chapter-links { margin-bottom: 4px; }
body[data-layout="observatory"] .pen-materials { margin: 12px 0 20px; padding-top: 18px; border-top-color: rgb(128 128 128 / .17); }
body[data-layout="observatory"] .observation-list { min-height: 0; flex: 0 0 auto; overflow: visible; }
body[data-layout="observatory"].glass-ui .observation { padding: 12px 9px; margin: 0; min-height: 66px; }
body[data-layout="observatory"] .observation-index { font-family: var(--font-ui); opacity: .45; }
body[data-layout="observatory"] .observation-copy strong { font-size: 11px; }
body[data-layout="observatory"] .observation-copy small { font-size: 9px; line-height: 1.75; }
body[data-layout="observatory"] .live-readouts { background: transparent; box-shadow: none; border: 0; }
body[data-layout="observatory"].glass-ui .transport { border: 0; background: transparent; box-shadow: none; padding-inline: 20px; }
body[data-layout="observatory"].glass-ui .playback { border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-layout="observatory"].glass-ui :is(.step-button,.speed-button) { border: 0; background: transparent; box-shadow: none; }
body[data-layout="observatory"].glass-ui :is(.view-tools,.selection-chip,.context-control,.light-popover,.segmented,.footer-tools .small-button) {
  background: linear-gradient(135deg,rgb(255 255 255 / .18),transparent),var(--panel-tint);
  border-color: var(--glass-edge); box-shadow: var(--glass-rim);
  backdrop-filter: var(--glass-ui-blur); -webkit-backdrop-filter: var(--glass-ui-blur);
}
body[data-layout="observatory"].glass-ui :is(.view-tools,.selection-chip,.context-control,.light-popover)::before,
body[data-layout="observatory"].glass-ui :is(.view-tools,.selection-chip,.context-control,.light-popover)::after { display: none; }
/* The dock is one glass face; its icons do not stack a second frosted surface. */
body[data-layout="observatory"].glass-ui :is(.view-tools,.footer-tools .small-button) {
  --pane-base: transparent;
  background: var(--glass-ui-fill);
  background-color: var(--pane-base);
  color: var(--ink);
  transition: background-color 240ms ease,color 240ms ease,box-shadow 220ms ease,transform 220ms var(--ease);
}
body[data-layout="observatory"].glass-ui .view-tools .icon-button {
  background: transparent; border-color: transparent; box-shadow: none;
  color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-layout="observatory"].glass-ui .view-tools .icon-button:not(:disabled):is(:hover,:focus-visible,.active) {
  background: var(--glass-ui-fill),var(--row-hover);
  border-color: var(--glass-edge); box-shadow: var(--glass-ui-rim);
}
/* Fade only the boundary wash; the page itself keeps its flat background. */
body[data-layout="observatory"].glass-ui .site-header {
  border-color: transparent; border-radius: 0; box-shadow: none;
  background: transparent; overflow: visible;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-layout="observatory"].glass-ui .site-header::before {
  content: ""; display: block; position: absolute; inset: -24px 0 -28px;
  border: 0; border-radius: 0; filter: none; opacity: 1; pointer-events: none;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  background: radial-gradient(ellipse at 50% 0,rgb(var(--glass-halo) / .10),transparent 75%);
}
body[data-layout="observatory"] #mode-control .segmented-thumb {
  background: var(--glass-ui-fill),var(--selection-tint);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-ui-rim);
  transition: transform 400ms var(--ease);
}
body[data-layout="observatory"] .speed-control { background: transparent; border-color: transparent; box-shadow: none; }
body[data-layout="observatory"] .view-caption h2 { font-family: var(--font-ui); font-size: 36px; font-weight: 300; letter-spacing: -.065em; }
body[data-layout="observatory"] .view-caption h2 .scene-title-word { margin: 0; font-size: inherit; letter-spacing: inherit; vertical-align: baseline; }
body[data-layout="observatory"] .view-caption p { line-height: 1.8; }
body[data-layout="observatory"] .pen-click-control { top: 160px; flex-wrap: wrap; max-width: 155px; gap: 9px; }
body[data-layout="observatory"] .pen-click-control button { flex: 0 0 auto; }
body[data-layout="observatory"] .pen-click-control #stroke-value { opacity: .7; }
body[data-layout="observatory"].glass-ui :is(.system-item,.phase-item,.observation,.speed-button):not(:disabled):not(.active):hover { background: var(--row-hover); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2); transform: none; }
body[data-layout="observatory"].glass-ui :is(.system-item,.phase-item,.observation,.speed-button).active:hover { background: transparent; box-shadow: none; transform: none; }
body[data-layout="observatory"].glass-ui :is(.system-item,.phase-item,.observation):active { transform: scale(.98); }
@supports (corner-shape: squircle) {
  body[data-layout="observatory"] :is(.system-item,.phase-item,.observation,.context-control,.light-popover),
  body[data-layout="observatory"] :is(#system-list,#phase-list,#observation-list,.speed-control)::before { corner-shape: squircle; }
}
@media(max-width:1280px) {
  body[data-layout="observatory"] .side-panel { padding: 17px 10px 12px; }
  body[data-layout="observatory"] .inspector { padding: 20px 17px 14px; }
  body[data-layout="observatory"] .system-copy strong { font-size: 11px; }
}
@media(max-width:1080px) {
  body[data-layout="observatory"].glass-ui .inspector { --pane-base: rgb(255 255 255 / .56); }
  body[data-layout="observatory"].dark.glass-ui .inspector { --pane-base: transparent; }
}
@media(max-width:720px) {
  body[data-layout="observatory"].glass-ui { --r-lg: 24px; }
  body[data-layout="observatory"].glass-ui .view-header { margin: 0 0 4px; }
  body[data-layout="observatory"] .bench-body { padding: 0; }
  body[data-layout="observatory"].glass-ui .system-panel { --pane-base: rgb(255 255 255 / .56); }
  body[data-layout="observatory"].dark.glass-ui .system-panel { --pane-base: transparent; }
  body[data-layout="observatory"] .pen-click-control { top: 112px; left: 15px; max-width: 110px; }
  body[data-layout="observatory"] .pen-click-control button { padding: 8px 12px; }
  body[data-layout="observatory"] .pen-click-control #pen-state { font-size: 9px; padding-left: 7px; }
  body[data-layout="observatory"] .view-caption h2 { font-size: 29px; }
  body[data-layout="observatory"] .view-caption p { display: none; }
  body[data-layout="observatory"].glass-ui .transport { padding-inline: 4px; }
  body[data-layout="observatory"] .inspector { padding-inline: 20px; }
}
/* The dock is one glass face; its icons do not stack a second frosted surface. */
body[data-layout="observatory"].glass-ui :is(.view-tools,.footer-tools .small-button) {
  --pane-base: transparent;
  background: var(--glass-ui-fill);
  background-color: var(--pane-base);
  color: var(--ink);
  transition: background-color 240ms ease,color 240ms ease,box-shadow 220ms ease,transform 220ms var(--ease);
}
body[data-layout="observatory"].glass-ui .view-tools .icon-button {
  background: transparent; border-color: transparent; box-shadow: none;
  color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-layout="observatory"].glass-ui .view-tools .icon-button:not(:disabled):is(:hover,:focus-visible,.active) {
  background: var(--glass-ui-fill),var(--row-hover);
  border-color: var(--glass-edge); box-shadow: var(--glass-ui-rim);
}
/* Fade only the boundary wash; the page itself keeps its flat background. */
body[data-layout="observatory"].glass-ui .site-header {
  border-color: transparent; border-radius: 0; box-shadow: none;
  background: transparent; overflow: visible;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-layout="observatory"].glass-ui .site-header::before {
  content: ""; display: block; position: absolute; inset: -24px 0 -28px;
  border: 0; border-radius: 0; filter: none; opacity: 1; pointer-events: none;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  background: radial-gradient(ellipse at 50% 0,rgb(var(--glass-halo) / .10),transparent 75%);
}
@media(prefers-reduced-motion:reduce) {
  body[data-layout="observatory"] :is(#system-list,#phase-list,#observation-list,.speed-control)::before,
  body[data-layout="observatory"] :is(#system-list,#phase-list,#observation-list,.speed-control)::after,
  body[data-layout="observatory"].glass-ui :is(.view-tools,.footer-tools .small-button),
  body[data-layout="observatory"] #mode-control .segmented-thumb { transition: none; }
  body[data-layout="observatory"].glass-ui :is(.system-item,.phase-item,.observation):is(:hover,:active) { transform: none; }
}
@media(prefers-reduced-transparency:reduce) {
  body[data-layout="observatory"].glass-ui :is(.site-header,.side-panel,.inspector) { --pane-base: #f5f5f5; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body[data-layout="observatory"].dark.glass-ui :is(.site-header,.side-panel,.inspector) { --pane-base: #242424; }
}

body[data-layout="observatory"] #canvas-host {
  z-index: 0; inset: 0;
  mask-image: linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent),linear-gradient(to bottom,transparent,#000 48px,#000 calc(100% - 48px),transparent);
  mask-composite: intersect;
}
body[data-layout="observatory"] .viewport :is(button,input,.view-tools,.selection-chip,.explode-control,.light-popover,.pen-click-control) { pointer-events: auto; }


/* An exploded stack expresses deconstruction without a surrounding app tile. */
body[data-layout="observatory"].glass-ui .brand-mark {
  padding: 1px; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; stroke-width: 1.7; overflow: visible;
}
/* Documents sit on a bounded card; the backdrop belongs to the page behind it. */
body[data-layout="observatory"].glass-ui :is(#sources-dialog,#document-dialog) {
  width: min(720px,calc(100vw - 64px)); height: auto;
  max-width: none; max-height: min(800px,calc(100dvh - 80px));
  margin: auto; border-radius: 28px; overflow: hidden;
  border: 1px solid rgb(255 255 255 / .65);
  background: #f5f9ff;
  box-shadow: 0 20px 70px rgb(0 0 0 / .18);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
body[data-layout="observatory"].dark.glass-ui :is(#sources-dialog,#document-dialog) {
  background: #222; border-color: rgb(255 255 255 / .18);
}
body[data-layout="observatory"].glass-ui :is(#sources-dialog,#document-dialog)[open] { display: flex; flex-direction: column; }
body[data-layout="observatory"].glass-ui :is(#sources-dialog,#document-dialog)::before,
body[data-layout="observatory"].glass-ui :is(#sources-dialog,#document-dialog)::after { content: none; display: none; }
body[data-layout="observatory"].glass-ui :is(#sources-dialog,#document-dialog) .dialog-header { flex: 0 0 auto; padding: 24px 28px 20px; }
body[data-layout="observatory"].glass-ui :is(#sources-dialog,#document-dialog) .dialog-header h2 { font-family: var(--font-ui); font-weight: 600; font-size: 23px; }
body[data-layout="observatory"].glass-ui :is(#sources-dialog,#document-dialog) .dialog-body { min-height: 0; max-height: none; overflow-y: auto; padding: 4px 28px 28px; }
body[data-layout="observatory"].glass-ui dialog.sheet::backdrop {
  background: rgb(25 35 50 / .25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body[data-layout="observatory"].dark.glass-ui dialog.sheet::backdrop { background: rgb(0 0 0 / .42); }
@media(max-width:720px) {
  body[data-layout="observatory"].glass-ui :is(#sources-dialog,#document-dialog) { width: calc(100vw - 32px); max-height: calc(100dvh - 48px); border-radius: 24px; }
  body[data-layout="observatory"].glass-ui :is(#sources-dialog,#document-dialog) .dialog-header { padding: 20px; }
  body[data-layout="observatory"].glass-ui :is(#sources-dialog,#document-dialog) .dialog-body { padding: 4px 20px 24px; }
}

/* ==========================================================================
   Canonical header for pages that opt into the observatory layout without
   loading shell.css (mechanical-watch keeps its own bench grid). Same metrics
   as shell.css so all three pages read as one header.
   ========================================================================== */
body[data-layout="observatory"] .brand {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  color: inherit; text-decoration: none;
}
body[data-layout="observatory"] .brand-mark {
  width: 34px; height: 34px; padding: 7px; flex: 0 0 auto;
  border: 1px solid var(--accent-line); border-radius: 11px;
  background: var(--accent-soft); color: var(--accent); stroke-width: 1.15;
}
body[data-layout="observatory"] .brand-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body[data-layout="observatory"] .brand-line { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
body[data-layout="observatory"] .brand h1,
body[data-layout="observatory"] .brand-line h1 {
  margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
body[data-layout="observatory"] .brand-sub {
  font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--muted); white-space: nowrap;
}
body[data-layout="observatory"] .series-line {
  display: flex; align-items: center; gap: 7px;
  font-size: 8px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap;
}
body[data-layout="observatory"] .series-line i { width: 14px; height: 1px; background: var(--line-strong); }
body[data-layout="observatory"] .header-actions { display: flex; align-items: center; gap: 6px; min-width: 0; }
body[data-layout="observatory"] .header-spec {
  display: flex; align-items: center; gap: 8px; margin-right: 2px; padding: 5px 9px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper);
  color: var(--muted); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .03em; white-space: nowrap;
}
body[data-layout="observatory"] .header-spec span { color: var(--line-strong); }
body[data-layout="observatory"] .header-actions .text-button {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--muted); font-size: 9px; white-space: nowrap;
}
body[data-layout="observatory"] .header-tools {
  display: flex; align-items: center; gap: 1px; padding: 2px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper);
}
body[data-layout="observatory"] .header-tools .icon-button { width: 28px; height: 28px; border-radius: 50%; }

/* Same responsive header behaviour as shell.css, for pages that do not load it. */
@media (max-width: 1100px) {
  body[data-layout="observatory"] .header-spec { display: none; }
  body[data-layout="observatory"] .brand-sub { display: none; }
}
@media (max-width: 720px) {
  body[data-layout="observatory"] .site-header { gap: 8px; }
  body[data-layout="observatory"] .brand { gap: 8px; }
  body[data-layout="observatory"] .brand-mark { width: 28px; height: 28px; padding: 6px; border-radius: 9px; }
  body[data-layout="observatory"] .brand h1,
  body[data-layout="observatory"] .brand-line h1 { font-size: 13px; }
  body[data-layout="observatory"] .series-line { display: none; }
  body[data-layout="observatory"] .header-actions { gap: 4px; }
  body[data-layout="observatory"] .header-actions .text-button { padding: 5px 8px; font-size: 8.5px; }
  body[data-layout="observatory"] .header-tools .icon-button { width: 26px; height: 26px; }
}

/* ==========================================================================
   Liquid glass for the two large panes only.
   Same recipe as the floating tool pill: a thin sheen over a nearly transparent
   base, with a strong defocus so the model behind reads as soft colour masses
   instead of detailed parts. Everything floating over the model keeps the stock
   glass untouched.
   ========================================================================== */
body[data-layout="observatory"].suite-ui.glass-ui :is(.side-panel, .inspector) {
  background:
    radial-gradient(400px circle at var(--glass-x, 50%) var(--glass-y, 25%), rgb(var(--glass-halo, 90 145 225) / .05), transparent 72%),
    linear-gradient(135deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .05) 52%, rgba(255, 255, 255, .16)),
    rgba(255, 255, 255, .12);
  backdrop-filter: blur(34px) saturate(1.5) brightness(1.03);
  -webkit-backdrop-filter: blur(34px) saturate(1.5) brightness(1.03);
}
body[data-layout="observatory"].suite-ui.glass-ui.dark :is(.side-panel, .inspector) {
  background:
    radial-gradient(400px circle at var(--glass-x, 50%) var(--glass-y, 25%), rgb(255 255 255 / .05), transparent 72%),
    linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 52%, rgba(255, 255, 255, .09)),
    rgba(18, 20, 26, .62);
  backdrop-filter: blur(34px) saturate(1.3) brightness(.97);
  -webkit-backdrop-filter: blur(34px) saturate(1.3) brightness(.97);
}
@media (max-width: 1080px) {
  body[data-layout="observatory"].suite-ui.glass-ui :is(.side-panel, .inspector) { background-color: rgba(255, 255, 255, .24); }
  body[data-layout="observatory"].suite-ui.glass-ui.dark :is(.side-panel, .inspector) { background-color: rgba(18, 20, 26, .72); }
}