/* DotCraft Lab skin: gives the standalone demos the Mesa abierta look.
   Loaded after each demo's own <style>, so equal-specificity rules here win.
   The <html> element carries data-theme="dark" and dc-lab-weld or dc-lab-larmon. */
:root[data-theme="dark"]{
  --bg:#1a1a1a; --surface:#222; --sunk:#292929; --fg:#fafafa; --muted:#b8b8b8; --line:#444;
  --stage:#1a1a1a; --stage-fg:#fafafa;
  --f-display:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --dc-accent:#FF6600; --dc-accent-hover:#E85F00;
  color-scheme:dark;
}
/* Interface accents only; data colours (temperatures, soils, candidates) keep each demo's dark palette. */
:root.dc-lab-weld[data-theme="dark"]{ --heat:#FF6600; --arc:#fafafa; }
:root.dc-lab-larmon[data-theme="dark"]{ --ink:#FF6600; }

body{ background:var(--bg); }
h1{ font-weight:550; letter-spacing:-.055em; line-height:.95; }
h2{ font-weight:550; letter-spacing:-.04em; }
h3{ font-weight:600; letter-spacing:-.01em; }
.mark,.eyebrow,.tag{ font-family:var(--f-mono); font-weight:550; font-size:.72rem; letter-spacing:.045em; text-transform:none; color:var(--muted); }

.stage,.panel,.macro,.plot,.tablewrap,.pill,.chip,select,button{ border-radius:2px; }
.stage{ background-color:var(--stage); background-image:radial-gradient(var(--line) .7px,transparent .7px); background-size:19px 19px; }

a{ color:var(--fg); text-decoration-color:var(--dc-accent); text-underline-offset:.25em; }
:focus-visible{ outline:2px solid var(--dc-accent); outline-offset:2px; }

.dc-lab-weld button.strike{ color:#1a1a1a; background:var(--dc-accent); }
.dc-lab-weld button.strike:hover{ background:var(--dc-accent-hover); }

/* Lab bar: the studio's mark, the path, and the way back. */
.dc-labbar{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; max-width:1240px; margin:0 auto 28px; padding:6px 0 14px; border-bottom:1px solid var(--line); font:550 .72rem/1.4 var(--f-mono); letter-spacing:.045em; color:var(--muted); }
.dc-labbar__brand{ color:var(--fg); font:600 1.05rem/1 var(--f-body); letter-spacing:-.03em; text-decoration:none; }
.dc-labbar__brand span{ color:var(--dc-accent); }
.dc-labbar__back{ margin-left:auto; color:var(--fg); text-decoration:none; }
.dc-labbar__back:hover{ text-decoration:underline; text-decoration-color:var(--dc-accent); text-decoration-thickness:2px; }

.dc-lab-note{ max-width:68ch; margin:8px 0 0; padding:.55rem .85rem; border-left:2px solid var(--dc-accent); background:var(--surface); color:var(--fg); font-size:.88rem; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }