/* Hallmark · Multi-theme: Default Light & Universe Dark Space */
:root,
[data-theme="default"] {
  --color-paper: oklch(98.5% 0.004 250);
  --color-paper-2: oklch(96% 0.008 250);
  --color-paper-3: oklch(92% 0.01 250);
  --color-canvas: oklch(94.5% 0.008 250);
  --color-rule: oklch(86% 0.012 252);
  --color-rule-2: oklch(72% 0.018 254);
  --color-muted: oklch(48% 0.022 256);
  --color-ink-2: oklch(34% 0.018 257);
  --color-ink: oklch(24% 0.02 258);
  --color-graphite: oklch(20% 0.016 260);
  --color-accent: oklch(58% 0.2 256);
  --color-accent-soft: oklch(92% 0.035 256);
  --color-accent-ink: oklch(98.5% 0.004 250);
  --color-focus: oklch(45% 0.18 256);
  --color-danger: oklch(52% 0.18 28);
  --color-danger-soft: oklch(94% 0.035 28);
  --color-success: oklch(42% 0.12 155);
  --color-warning: oklch(58% 0.12 75);
  --color-overlay: oklch(20% 0.016 260 / 0.46);
  --color-shadow: oklch(24% 0.02 258 / 0.12);
  --color-canvas-major: oklch(67% 0.018 254);
  --color-canvas-minor: oklch(82% 0.012 252);
  --color-axis-x: oklch(52% 0.15 25);
  --color-axis-y: oklch(45% 0.12 155);
  --color-axis-z: oklch(52% 0.16 256);
  --color-glass: oklch(99% 0.003 250 / 0.82);
  --color-label: oklch(99% 0.003 250 / 0.9);
}

[data-theme="universe"] {
  --color-paper: oklch(12% 0.02 260);
  --color-paper-2: oklch(16% 0.025 260);
  --color-paper-3: oklch(20% 0.02 258);
  --color-canvas: oklch(6% 0.015 260);
  --color-rule: oklch(24% 0.02 258);
  --color-rule-2: oklch(35% 0.025 256);
  --color-muted: oklch(55% 0.02 256);
  --color-ink-2: oklch(78% 0.015 252);
  --color-ink: oklch(90% 0.008 250);
  --color-graphite: oklch(95% 0.006 250);
  --color-accent: oklch(65% 0.22 256);
  --color-accent-soft: oklch(25% 0.06 256);
  --color-accent-ink: oklch(98% 0.004 250);
  --color-focus: oklch(55% 0.22 256);
  --color-danger: oklch(58% 0.18 28);
  --color-danger-soft: oklch(18% 0.06 28);
  --color-success: oklch(55% 0.15 155);
  --color-warning: oklch(62% 0.14 75);
  --color-overlay: oklch(5% 0.02 260 / 0.72);
  --color-shadow: oklch(4% 0.02 258 / 0.5);
  --color-canvas-major: oklch(25% 0.03 270);
  --color-canvas-minor: oklch(18% 0.02 265);
  --color-axis-x: oklch(65% 0.2 25);
  --color-axis-y: oklch(60% 0.18 155);
  --color-axis-z: oklch(65% 0.22 256);
  --color-glass: oklch(10% 0.02 260 / 0.78);
  --color-label: oklch(12% 0.02 260 / 0.86);
}

:root {
  --font-display: "Space Grotesk", "IBM Plex Sans", sans-serif;
  --font-body: "Space Grotesk", "IBM Plex Sans", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", monospace;

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.9531rem;

  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --rule-thin: 1px;

  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 20rem;
  min-height: 100%;
  margin: 0;
  overflow-x: clip;
}

body {
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
}

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

button {
  white-space: nowrap;
}

button,
input,
label {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.topbar {
  position: relative;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 4rem;
  border-block-end: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
}

.brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-sm);
  padding-inline: var(--space-md);
}

.brand__mark {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  place-items: center;
  border: var(--rule-thin) solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: 0 0 8px oklch(65% 0.22 256 / 0.4);
}

.brand__copy {
  min-width: 0;
}

.brand h1 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand p {
  display: none;
  margin: var(--space-3xs) 0 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.topbar__tools {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-inline: var(--space-sm);
}

.search-pill,
.icon-button,
.tool-button,
.view-button,
.result-button,
.lang-toggle {
  min-height: 2.75rem;
  border: var(--rule-thin) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
  color: var(--color-ink-2);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.search-pill {
  display: none;
  min-width: 13rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-inline: var(--space-sm);
  color: var(--color-muted);
}

.search-pill__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

kbd {
  display: inline-grid;
  min-width: 1.5rem;
  min-height: 1.5rem;
  place-items: center;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-xs);
  background: var(--color-paper-3);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
}

.icon-button {
  display: inline-grid;
  min-width: 2.75rem;
  padding: 0;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
}

.icon-button__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tool-button,
.view-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding-inline: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
}

.tool-button--primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

/* Language toggle button */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-inline: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
}

.lang-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

button:active {
  transform: translateY(1px);
}

button:disabled,
button[aria-disabled="true"],
input:disabled,
input[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

button[data-state="loading"]::before {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  content: "";
  animation: spin 800ms linear infinite;
}

button[data-state="success"]::before {
  color: var(--color-success);
  content: "✓";
}

button[data-state="error"] {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.app-shell {
  position: relative;
  display: grid;
  height: calc(100dvh - 6rem);
  min-height: 32rem;
  grid-template-areas: "stage";
  grid-template-columns: minmax(0, 1fr);
  overflow: clip;
}

.panel {
  position: fixed;
  z-index: var(--z-dropdown);
  top: 4rem;
  bottom: 2rem;
  display: flex;
  width: min(21rem, calc(100% - 2.5rem));
  flex-direction: column;
  overflow: auto;
  border-inline: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
  transition: transform var(--dur-long) var(--ease-out);
}

.panel--filters {
  inset-inline-start: 0;
  transform: translateX(-102%);
}

.panel--inspector {
  inset-inline-end: 0;
  transform: translateX(102%);
}

.panel.is-open {
  transform: translateX(0);
}

.panel__head {
  position: sticky;
  z-index: var(--z-raised);
  top: 0;
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
}

.panel__head h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.panel__close {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 1.2rem;
  transition: color var(--dur-micro) var(--ease-out);
}

.panel__close:hover {
  color: var(--color-ink);
}

.panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-md);
}

.readout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: var(--rule-thin) solid var(--color-rule);
}

.readout__item {
  min-width: 0;
  padding-block: var(--space-sm);
}

.readout__item+.readout__item {
  padding-inline-start: var(--space-sm);
  border-inline-start: var(--rule-thin) solid var(--color-rule);
}

.readout strong {
  display: block;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.readout span {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.filter-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.filter-group legend,
.filter-label {
  margin-block-end: var(--space-xs);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.filter-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.check-row {
  display: grid;
  min-height: 2.75rem;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-2xs);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  cursor: pointer;
}

.check-row input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--color-accent);
}

.check-row__shape {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border: var(--rule-thin) solid var(--color-ink-2);
  background: var(--shape-color, var(--color-paper-3));
  box-shadow: 0 0 6px var(--shape-color, rgba(255, 255, 255, 0.2));
  flex-shrink: 0;
}

.check-row__shape[data-shape="round"] {
  border-radius: 50%;
}

.check-row__shape[data-shape="diamond"] {
  transform: rotate(45deg) scale(0.78);
}

.check-row__shape[data-shape="soft"] {
  border-radius: var(--radius-xs);
}

.check-row__count {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.stage {
  position: relative;
  grid-area: stage;
  min-width: 0;
  min-height: 0;
  overflow: clip;
  background: var(--color-canvas);
}

#viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

#viewport canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.stage__toolbar {
  position: absolute;
  z-index: var(--z-raised);
  inset-block-end: var(--space-xl);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  max-width: min(46rem, calc(100% - 3rem));
  gap: var(--space-xs);
  overflow-x: auto;
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-glass);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px var(--color-shadow);
  scrollbar-width: none;
}

.stage__toolbar::-webkit-scrollbar {
  display: none;
}

.stage__toolbar .view-button {
  border-radius: 999px;
}

.view-button {
  min-height: 2.5rem;
  background: var(--color-paper);
  border-color: var(--color-rule);
  font-size: var(--text-xs);
  box-shadow: 0 1px 0 var(--color-shadow);
}

.view-button[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  box-shadow: 0 0 8px oklch(65% 0.22 256 / 0.3);
}

.axis-key {
  position: absolute;
  z-index: var(--z-raised);
  inset-block-end: var(--space-sm);
  inset-inline-start: var(--space-sm);
  display: grid;
  max-width: min(31rem, calc(100% - 1.5rem));
  gap: var(--space-2xs);
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-glass);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  pointer-events: none;
}

.axis-key span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-xs);
}

.axis-key i {
  width: 1rem;
  height: 2px;
  flex: 0 0 auto;
  background: var(--axis-color);
  box-shadow: 0 0 6px var(--axis-color);
}

.axis-key__x {
  --axis-color: var(--color-axis-x);
}

.axis-key__y {
  --axis-color: var(--color-axis-y);
}

.axis-key__z {
  --axis-color: var(--color-axis-z);
}

.axis-label {
  position: absolute;
  z-index: var(--z-raised);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-md);
  background: var(--color-glass);
  backdrop-filter: blur(12px);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  pointer-events: none;
  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) translate(-50%, -50%);
  white-space: nowrap;
  box-shadow: 0 4px 16px var(--color-shadow);
  letter-spacing: 0.02em;
}

.hover-card {
  position: fixed;
  z-index: var(--z-tooltip);
  display: none;
  max-width: 17rem;
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  background: var(--color-label);
  backdrop-filter: blur(12px);
  color: var(--color-ink-2);
  box-shadow: 0 0.25rem 1.25rem var(--color-shadow);
  pointer-events: none;
}

.hover-card.is-visible {
  display: block;
}

.hover-card strong {
  display: block;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.2;
}

.hover-card span {
  display: block;
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.loading-screen {
  position: absolute;
  z-index: var(--z-raised);
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-canvas);
  color: var(--color-muted);
  text-align: center;
}

.loading-screen[hidden] {
  display: none;
}

.loading-screen__mark {
  width: 2.5rem;
  height: 2.5rem;
  margin-inline: auto;
  border: 2px solid var(--color-rule-2);
  border-inline-end-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

.loading-screen h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-style: normal;
}

.loading-screen p {
  max-width: 56ch;
  margin: 0;
}

.loading-screen code {
  color: var(--color-accent);
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.inspector-empty {
  padding-block: var(--space-lg);
  border-block: var(--rule-thin) solid var(--color-rule);
  color: var(--color-muted);
}

.compound-title {
  display: grid;
  gap: var(--space-xs);
}

.compound-title__formula {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  overflow-wrap: anywhere;
}

.compound-title__name {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.property-list {
  display: grid;
  margin: 0;
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.property-list>div {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(6.5rem, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.property-list dt {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.property-list dd {
  min-width: 0;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.sample-color {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  margin-inline-end: var(--space-xs);
  vertical-align: -0.1rem;
  border: var(--rule-thin) solid var(--color-rule-2);
  border-radius: 50%;
  background: var(--sample-color);
}

.hazard-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.hazard-tag {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  padding-inline: var(--space-xs);
  border: var(--rule-thin) solid var(--color-danger);
  border-radius: var(--radius-xs);
  background: var(--color-danger-soft);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.hazard-tag--none {
  border-color: var(--color-rule);
  background: var(--color-paper-2);
  color: var(--color-muted);
}

.notes {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.statusbar {
  display: grid;
  min-height: 2rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding-inline: var(--space-sm);
  border-block-start: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.statusbar__message {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statusbar__help {
  display: none;
  white-space: nowrap;
}

.search-dialog {
  position: fixed;
  inset: 0;
  width: min(40rem, calc(100% - 2rem));
  max-height: min(80dvh, 38rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: var(--rule-thin) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  color: var(--color-ink-2);
  box-shadow: 0 1rem 4rem var(--color-shadow), 0 0 40px oklch(65% 0.22 256 / 0.1);
}

.search-dialog::backdrop {
  background: var(--color-overlay);
}

.search-dialog__field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.search-dialog__field span {
  font-family: var(--font-mono);
}

.search-dialog input {
  min-width: 0;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  outline: 2px solid transparent;
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-base);
}

.search-dialog input:active {
  background: var(--color-paper-2);
}

.search-dialog input:focus-visible {
  outline-color: var(--color-focus);
  outline-offset: 1px;
}

.search-dialog input[aria-invalid="true"],
.search-dialog input[data-state="error"] {
  outline-color: var(--color-danger);
  background: var(--color-danger-soft);
}

.search-dialog input[data-state="success"] {
  outline-color: var(--color-success);
}

.search-dialog input[data-state="loading"] {
  color: var(--color-muted);
  cursor: progress;
}

.search-results {
  display: flex;
  max-height: min(60dvh, 29rem);
  flex-direction: column;
  overflow-y: auto;
  padding: var(--space-xs);
}

.result-button {
  display: grid;
  min-height: 3.5rem;
  grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding-inline: var(--space-sm);
  border-color: transparent;
  text-align: start;
}

.result-button.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.result-button__formula {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
}

.result-button__name {
  min-width: 0;
  overflow: hidden;
  color: var(--color-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-button__meta {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.search-dialog__list:empty {
  display: none;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-rule-2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-muted);
}

/* Edge Toggles */
.edge-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 4rem;
  background: var(--color-paper-2);
  border: var(--rule-thin) solid var(--color-rule);
  color: var(--color-muted);
  cursor: pointer;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  border-radius: 0;
  transition: background-color var(--dur-short), color var(--dur-short);
}

.edge-toggle:hover {
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.edge-toggle::after {
  font-size: 0.75rem;
}

.edge-toggle--left {
  left: 0;
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.edge-toggle--left::after {
  content: "▶";
}

.edge-toggle--right {
  right: 0;
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.edge-toggle--right::after {
  content: "◀";
}

.app-shell:not(.is-collapsed-left) .edge-toggle--left {
  display: none;
}

.app-shell:not(.is-collapsed-right) .edge-toggle--right {
  display: none;
}

.search-dialog__foot {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  border-block-start: var(--rule-thin) solid var(--color-rule);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.search-empty {
  padding: var(--space-xl) var(--space-md);
  color: var(--color-muted);
  text-align: center;
}

.panel-scrim {
  position: fixed;
  z-index: calc(var(--z-dropdown) - 1);
  inset: 4rem 0 2rem;
  display: none;
  border: 0;
  background: var(--color-overlay);
}

.panel-scrim.is-visible {
  display: block;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

@media (hover: hover) and (pointer: fine) {

  .search-pill:hover,
  .icon-button:hover,
  .tool-button:hover,
  .view-button:hover,
  .result-button:hover {
    background: var(--color-paper-3);
    color: var(--color-ink);
    border-color: var(--color-rule-2);
  }

  .tool-button--primary:hover {
    background: var(--color-focus);
    color: var(--color-accent-ink);
  }

  .check-row:hover {
    color: var(--color-ink);
  }

  .search-dialog input:hover {
    background: var(--color-paper-2);
  }
}

@media (min-width: 40rem) {
  .brand {
    padding-inline: var(--space-lg);
  }

  .brand p,
  .search-pill,
  .search-dialog__foot,
  .statusbar__help {
    display: flex;
  }

  #openSearchCompact {
    display: none;
  }

  .axis-key {
    grid-template-columns: repeat(3, minmax(0, auto));
    gap: var(--space-md);
  }
}

@media (min-width: 60rem) {
  .topbar {
    grid-template-columns: minmax(17rem, 15rem) minmax(0, 1fr) minmax(19rem, 20rem);
  }

  .topbar__tools {
    grid-column: 2 / 4;
    justify-content: space-between;
  }

  .app-shell {
    grid-template-areas: "filters stage inspector";
    grid-template-columns: 15rem minmax(0, 1fr) 20rem;
  }

  .panel {
    position: relative;
    top: auto;
    bottom: auto;
    width: auto;
    transform: none;
  }

  .panel--filters {
    grid-area: filters;
    border-inline-start: 0;
  }

  .panel--inspector {
    grid-area: inspector;
    border-inline-end: 0;
  }

  .panel__close,
  .panel-scrim,
  [data-mobile-panel] {
    display: none;
  }

  .panel__body {
    padding-block-end: var(--space-xl);
  }
}

.toolbar-divider {
  display: inline-block;
  width: 1px;
  height: 1.5rem;
  align-self: center;
  background: var(--color-rule-2);
  margin-inline: var(--space-2xs);
  opacity: 0.6;
}

/* Desktop Sidebar Collapsing & 3D Fullscreen Mode */
@media (min-width: 60rem) {
  .app-shell {
    transition: grid-template-columns var(--dur-long) var(--ease-out);
  }

  .app-shell.is-collapsed-left {
    grid-template-columns: 0rem minmax(0, 1fr) 20rem;
  }

  .app-shell.is-collapsed-right {
    grid-template-columns: 15rem minmax(0, 1fr) 0rem;
  }

  .app-shell.is-collapsed-left.is-collapsed-right,
  .app-shell.is-fullscreen {
    grid-template-columns: 0rem minmax(0, 1fr) 0rem !important;
  }

  .app-shell.is-collapsed-left .panel--filters,
  .app-shell.is-fullscreen .panel--filters {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
  }

  .app-shell.is-collapsed-right .panel--inspector,
  .app-shell.is-fullscreen .panel--inspector {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
  }
}

@media (min-width: 90rem) {
  .topbar {
    grid-template-columns: minmax(18rem, 17rem) minmax(0, 1fr) minmax(22rem, 23rem);
  }

  .app-shell {
    grid-template-columns: 17rem minmax(0, 1fr) 23rem;
  }

  .stage__toolbar {
    inset-block-end: var(--space-2xl);
  }

  .axis-key {
    inset-block-end: var(--space-md);
    inset-inline-start: var(--space-md);
  }
}

@media (pointer: coarse) {

  button,
  .check-row {
    min-height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }

  .panel {
    transition-property: opacity;
  }
}

/* --- Redesign 3D Overlay Labels, Projection Badges & Floating Callout Card --- */
.compound-labels-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: var(--z-raised);
}

.compound-tag {
  position: absolute;
  transform: translate3d(var(--label-x, 0), var(--label-y, 0), 0) translate(-50%, -50%) scale(var(--label-scale, 1));
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-xs);
  background: var(--color-label);
  backdrop-filter: blur(4px);
  border: 1px solid var(--color-rule-2);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 1px 4px var(--color-shadow);
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
  user-select: none;
}

.compound-tag:hover {
  background: var(--color-paper-2);
  border-color: var(--color-accent);
  --label-scale: 1.08;
  z-index: 10;
}

.compound-tag.is-selected {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
  box-shadow: 0 0 16px oklch(65% 0.22 256 / 0.5);
  font-weight: 700;
  z-index: 20;
}

.compound-tag__dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--dot-color, var(--color-accent));
  flex-shrink: 0;
  box-shadow: 0 0 4px var(--dot-color, var(--color-accent));
}

/* Projection line axis badges on X, Y, Z axes */
.projection-badge {
  position: absolute;
  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  pointer-events: none;
  z-index: var(--z-raised);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  animation: badgePopIn 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(6px);
}

.projection-badge--x {
  background: oklch(45% 0.18 25 / 0.9);
  color: #fff;
  border: 1px solid oklch(65% 0.2 25 / 0.6);
  text-shadow: 0 0 8px oklch(65% 0.2 25 / 0.4);
}

.projection-badge--y {
  background: oklch(38% 0.15 155 / 0.9);
  color: #fff;
  border: 1px solid oklch(60% 0.18 155 / 0.6);
  text-shadow: 0 0 8px oklch(60% 0.18 155 / 0.4);
}

.projection-badge--z {
  background: oklch(38% 0.18 256 / 0.9);
  color: #fff;
  border: 1px solid oklch(65% 0.22 256 / 0.6);
  text-shadow: 0 0 8px oklch(65% 0.22 256 / 0.4);
}

/* 3D Floating Compound Callout Card */
.floating-callout {
  position: absolute;
  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) translate(-50%, -120%);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  width: 15rem;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-label);
  backdrop-filter: blur(12px);
  border: 1.5px solid var(--color-accent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 24px oklch(65% 0.22 256 / 0.2);
  z-index: var(--z-tooltip);
  pointer-events: auto;
  animation: calloutSlideUp 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-callout[hidden] {
  display: none !important;
}

.floating-callout__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 0.35rem;
}

.floating-callout__formula {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-ink);
}

.floating-callout__badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 0.15rem 0.35rem;
  border-radius: var(--radius-xs);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.floating-callout__close {
  display: inline-grid;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: oklch(20% 0.02 260 / 0.8);
  color: var(--color-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

.floating-callout__close:hover {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.floating-callout__name {
  font-size: 0.8rem;
  color: var(--color-ink-2);
  font-weight: 500;
}

.floating-callout__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-muted);
}

.floating-callout__btn {
  margin-top: 0.25rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-xs);
  background: var(--color-accent);
  color: #fff;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.floating-callout__btn:hover {
  background: var(--color-focus);
}

@keyframes badgePopIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

[data-quality="low"] .stage__toolbar,
[data-quality="low"] .axis-key,
[data-quality="low"] .axis-label,
[data-quality="low"] .compound-tag,
[data-quality="low"] .hover-card,
[data-quality="low"] .floating-callout {
  backdrop-filter: none;
}

[data-quality="low"] .compound-tag {
  box-shadow: none;
}

@keyframes calloutSlideUp {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Axis Ion Badges along X, Y, Z coordinate lines */
.axis-ion-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: var(--z-raised);
}

.axis-ion-badge {
  position: absolute;
  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) translate(-50%, -50%) scale(var(--badge-scale, 1));
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  pointer-events: auto;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px var(--color-shadow);
  backdrop-filter: blur(4px);
  transition: transform var(--dur-short) var(--ease-out), z-index 0s;
  z-index: 10;
}

.axis-ion-badge:hover {
  --badge-scale: 1.15;
  z-index: 15;
  box-shadow: 0 4px 12px var(--color-shadow);
}

.axis-ion-badge--x {
  background: var(--color-axis-x);
  color: #ffffff;
  border: 1px solid oklch(100% 0 0 / 0.2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.axis-ion-badge--y {
  background: var(--color-axis-y);
  color: #ffffff;
  border: 1px solid oklch(100% 0 0 / 0.2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.axis-ion-badge--z {
  background: var(--color-axis-z);
  color: #ffffff;
  border: 1px solid oklch(100% 0 0 / 0.2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}