/* Shared palette, typography and page composition. */
:root {
  color-scheme: light;
  --bg: #f4f4ef; --panel: #fdfdfb; --panel-2: #f0f1ec; --line: #dddfd7;
  --text: #242823; --muted: #656e63; --accent: #3659d9; --accent-soft: #e9edfd;
  --on-accent: #fff; --danger: #b43f35; --danger-soft: #fbeeea;
  --supply: #4e777d; --signal: #986016; --wire: #7e897c; --metal: #d2d6ce;
  --mono: "Space Mono", monospace; --sans: "Manrope", sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171a18; --panel: #1f2320; --panel-2: #272d28; --line: #3b433c;
  --text: #eceee7; --muted: #a5aea2; --accent: #a4b6ff; --accent-soft: #2d374e;
  --on-accent: #17213d; --danger: #f69c8e; --danger-soft: #432d29;
  --supply: #92b6bb; --signal: #e9bb78; --wire: #8c998d; --metal: #737e72;
}
:root {
  --lab-glow: rgba(54,89,217,.16);
  --lab-grid: rgba(126,137,124,.16);
  --lab-grid-major: rgba(126,137,124,.22);
}
:root[data-theme="dark"] {
  --lab-glow: rgba(164,182,255,.12);
  --lab-grid: rgba(140,153,141,.18);
  --lab-grid-major: rgba(140,153,141,.26);
}
* { box-sizing: border-box; }
html { zoom: 1.15; scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; min-width: 0; background: radial-gradient(circle at 12% 0%, var(--lab-glow), transparent 24%), radial-gradient(circle at 92% 18%, rgba(177,118,28,.08), transparent 26%), linear-gradient(var(--lab-grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--lab-grid-major) 1px, transparent 1px), linear-gradient(var(--lab-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lab-grid) 1px, transparent 1px), var(--bg); background-size: auto, auto, 128px 128px, 128px 128px, 32px 32px, 32px 32px; color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body, .workspace, .modal, .lock-stage, .schematic-scroll { transition: background-color .25s, color .25s, border-color .25s; }
button, input, select { font: inherit; }
button { color: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--accent); color: var(--on-accent); }
h1, h2, p { margin-top: 0; }
.app-shell { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.topbar { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); position: relative; }
.topbar::after { content: "LAB / INSTRUMENT CONTROL"; position: absolute; right: 0; bottom: 7px; color: var(--muted); font: 7px var(--mono); letter-spacing: .16em; opacity: .65; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 36px; color: var(--accent); }
.brand-mark svg { width: 28px; height: 32px; }
.brand i { font: 10px var(--mono); color: var(--muted); padding-left: 12px; border-left: 1px solid var(--line); }
.brand-mark { filter: drop-shadow(0 0 8px var(--lab-glow)); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.hero { display: grid; grid-template-columns: 1fr 310px; gap: 32px; align-items: end; padding: 64px 0 46px; }
.eyebrow, .panel-kicker { margin: 0; font: 10px/1.6 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.hero h1 { margin: 16px 0 0; font-size: clamp(30px, 4.4vw, 64px); font-weight: 500; line-height: 1.08; letter-spacing: -.065em; text-shadow: 0 12px 34px var(--lab-glow); }
.hero-title__suffix { color: var(--accent); font-size: .72em; font-weight: 600; letter-spacing: -.04em; white-space: nowrap; }
.hero h1 span { color: var(--accent); }
.hero-copy { margin: 0 0 4px; color: var(--muted); font-size: 13px; line-height: 1.85; }
.hero-meta { display: flex; align-items: center; gap: 8px; margin-top: 18px; font: 9px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.hero-meta i { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.hero-meta i { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 12px var(--accent); }
footer { display: flex; justify-content: space-between; gap: 16px; padding: 26px 0 36px; color: var(--muted); font: 9px/1.8 var(--mono); }
@media (max-width: 1000px) { .app-shell { width: calc(100% - 48px); } .hero { grid-template-columns: 1fr 260px; } }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; gap: 22px; padding-block: 38px 30px; } .hero-copy { max-width: 440px; } .hero-meta { margin-top: 12px; } .topbar-actions > .button--ghost { display: none; } }
@media (max-width: 480px) { .app-shell { width: calc(100% - 32px); } .topbar { min-height: 76px; gap: 8px; } .brand i { display: none; } .brand { gap: 6px; font-size: 12px; } .topbar-actions { gap: 2px; } .hero h1 { font-size: clamp(28px, 8vw, 38px); } footer { flex-direction: column; gap: 4px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }