:root {
  color-scheme: light;
}

body {
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.stario-textured {
  background-color: var(--color-base-100);
  background-image:
    radial-gradient(circle at top, color-mix(in oklab, var(--color-base-100) 90%, var(--color-primary) 10%), var(--color-base-100) 58%),
    linear-gradient(180deg, color-mix(in oklab, var(--color-base-100) 97%, var(--color-base-content) 3%), var(--color-base-100)),
    linear-gradient(color-mix(in oklab, var(--color-base-content) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--color-base-content) 6%, transparent) 1px, transparent 1px);
  background-blend-mode: normal, normal, multiply, multiply;
  background-size: auto, auto, 56px 56px, 56px 56px;
  background-attachment: fixed, fixed, fixed, fixed;
}

/* Engineering-style project diagrams: legible type, clear hierarchy */
.project-drawing-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  --svg-ink: oklch(0.26 0.03 255);
  --svg-muted: oklch(0.5 0.02 255);
  --svg-faint: oklch(0.72 0.015 255);
  --svg-dim: oklch(0.44 0.11 252);
  --svg-force: oklch(0.48 0.14 250);
  --svg-water: oklch(0.52 0.12 240);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.project-drawing-svg .svg-schematic-title {
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--svg-muted);
}

.project-drawing-svg .svg-panel-title {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--svg-ink);
}

.project-drawing-svg .svg-panel-key {
  font-size: 9.5px;
  font-weight: 500;
  fill: var(--svg-muted);
}

.project-drawing-svg .svg-panel-val {
  font-size: 11px;
  font-weight: 500;
  fill: var(--svg-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.project-drawing-svg .svg-dim-text {
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  fill: var(--svg-dim);
}

.project-drawing-svg .svg-force-text {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  fill: var(--svg-force);
}

.project-drawing-svg .svg-note {
  font-size: 9.5px;
  font-weight: 500;
  fill: var(--svg-muted);
}

.project-drawing-svg .svg-legend {
  font-size: 9px;
  fill: var(--svg-muted);
  font-weight: 500;
}

.project-drawing-svg .svg-layer-label {
  font-size: 10px;
  font-weight: 550;
  fill: var(--svg-muted);
}

.project-drawing-svg .svg-gl-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  fill: var(--svg-ink);
}

.project-drawing-svg line.svg-panel-rule {
  stroke: var(--svg-faint);
  stroke-width: 1;
}