@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   Laser Tinkerer — friendly content theme
   Same class + variable names as before, so every existing page
   re-skins automatically. Direction: warm, light, readable, human.
   Mono is used ONLY for real numbers. Headings get a soft serif
   for warmth; everything you read is a clean sans.
   ============================================================ */

:root {
  /* — Warm "paper" surfaces — never pure white — */
  --ink-900:#FBF8F3;   /* page background (warm off-white) */
  --ink-850:#FFFFFF;   /* nav surface */
  --ink-800:#FFFFFF;   /* card surface */
  --ink-700:#F5F0E8;   /* hover / subtle fill */
  --paper-2:#F7F2EA;   /* footer / soft section band */
  --line-600:#ECE5D8;  /* hairline border */
  --line-500:#DED5C5;  /* stronger divider / hover border */

  /* — Text — warm near-blacks, high readability — */
  --muted-500:#8B8475; /* captions, units, metadata */
  --muted-400:#6B6357; /* secondary text */
  --text-200:#2F2B26;  /* body text */
  --text-100:#241F1A;  /* primary text */
  --text-000:#1A1612;  /* headlines */

  /* — Accent + semantic — */
  --laser:#D9531E;     /* THE accent: CTAs, links, kickers. Used with intent, not everywhere. */
  --laser-dim:#B23F12; /* hover of the accent */
  --laser-soft:#FBEDE3;/* soft accent tint (pill / button-ghost bg) */
  --laser-ink:#FFFFFF; /* text on a --laser fill */
  --conf-high:#2E7D54; /* confidence high / verified / safe */
  --conf-med:#A9750F;  /* confidence medium / single-source */
  --conf-low:#9A6646;  /* confidence low / community-only */
  --danger:#BE3B2B;    /* never-laser / banned / safety stop */

  /* — Burn ramp: charcoal → ember. Heat-meaning data-viz ONLY. — */
  --burn-0:#F0E9DE; --burn-1:#E8C9A0; --burn-2:#E0A064; --burn-3:#D97A33;
  --burn-4:#C2541A; --burn-5:#9C3B12; --burn-6:#6E2A0E;

  /* — geometry — */
  --maxw:1080px; --rail:160px; --radius:10px; --radius-lg:16px;
  --hair:1px;
  --shadow-1:0 1px 2px rgba(40,30,18,.05), 0 1px 3px rgba(40,30,18,.04);
  --shadow-2:0 4px 12px rgba(40,30,18,.07), 0 1px 3px rgba(40,30,18,.05);
  --ease:140ms cubic-bezier(0.2,0,0,1);

  /* — type — */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,"SF Mono",monospace;

  --fs-display:42px; --fs-h1:32px; --fs-h2:25px; --fs-h3:19px;
  --fs-body:17px; --fs-data:15px; --fs-meta:13px;

  /* — spacing — */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:36px; --s7:56px; --s8:84px;
}

*{ box-sizing:border-box; }

body{
  font-family:var(--font-sans); font-size:var(--fs-body); line-height:1.7;
  color:var(--text-200); background:var(--ink-900);
  -webkit-font-smoothing:antialiased; margin:0;
}

h1,h2,h3,h4{ color:var(--text-000); margin:0 0 var(--s4); }
h1,h2,.display{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.4px; }
h1{ font-size:var(--fs-h1); line-height:1.18; }
h2{ font-size:var(--fs-h2); line-height:1.25; margin-top:var(--s7); }
h3{ font-family:var(--font-sans); font-size:var(--fs-h3); font-weight:600; line-height:1.35; letter-spacing:-0.2px; }
.display{ font-size:var(--fs-display); line-height:1.08; }
p{ max-width:68ch; margin:0 0 var(--s4); }
strong{ color:var(--text-100); font-weight:600; }
img{ max-width:100%; height:auto; }

a{ color:var(--laser); text-decoration:none; text-underline-offset:3px; }
a:hover{ color:var(--laser-dim); text-decoration:underline; }
hr{ border:0; border-top:var(--hair) solid var(--line-600); margin:var(--s7) 0; }

/* Numbers (and only numbers) get the precise mono face */
.num,code,kbd,.metric .v,.stat .v,.spec-table td,.spec-table th{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
code,kbd{ font-size:.9em; background:var(--ink-700); padding:2px 6px; border-radius:6px; color:var(--text-100); }

/* The kicker above a heading — friendly, not a terminal prompt */
.eyebrow{ display:inline-block; font-size:var(--fs-meta); font-weight:600;
  letter-spacing:.2px; color:var(--laser); margin-bottom:var(--s2); }
.meta{ font-size:var(--fs-meta); color:var(--muted-500); line-height:1.6; }

a,.btn,.nav-links a,.spec-rail a,.foot a,.spec-table tr,.conf-pill,.machine-chip,.card{
  transition:var(--ease); transition-property:color,background-color,border-color,box-shadow,transform; }

/* Layout */
.shell{ max-width:var(--maxw); margin:0 auto; padding:0 var(--s5); }
.page{ display:grid; grid-template-columns:var(--rail) 1fr; gap:var(--s7); }
@media(max-width:760px){ .page{ grid-template-columns:1fr; } .spec-rail{ position:static; } }
.spec-rail{ position:sticky; top:var(--s7); align-self:start; font-size:var(--fs-meta);
  color:var(--muted-500); display:flex; flex-direction:column; gap:var(--s3); }
.spec-rail a{ color:var(--muted-400); }
.spec-rail a:hover{ color:var(--laser); }

/* A faint, warm grid — a whisper of "workshop". The grid + its fade live on a
   background pseudo-layer ONLY; content sits above and is never masked. */
.blueprint{ position:relative; }
.blueprint > *{ position:relative; z-index:1; }
.blueprint::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line-600) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-600) 1px, transparent 1px);
  background-size:32px 32px; background-position:center top;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 80%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 80%);
}

/* Buttons */
.btn{ font-family:var(--font-sans); font-size:15px; font-weight:600; letter-spacing:0;
  display:inline-flex; align-items:center; gap:var(--s2); padding:11px 18px;
  border:1.5px solid var(--line-500); border-radius:var(--radius); background:#fff;
  color:var(--text-100); cursor:pointer; line-height:1.1; }
.btn:hover{ border-color:var(--text-100); color:var(--text-000); text-decoration:none; }
.btn-primary{ background:var(--laser); border-color:var(--laser); color:var(--laser-ink); box-shadow:var(--shadow-1); }
.btn-primary:hover{ background:var(--laser-dim); border-color:var(--laser-dim); color:#fff; }

/* Confidence pills — soft, friendly chips */
.conf-pill{ font-family:var(--font-sans); font-size:12px; font-weight:600; letter-spacing:.2px;
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  border:1px solid transparent; }
.conf-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.conf-high{ color:var(--conf-high); background:#E7F2EA; }
.conf-med { color:var(--conf-med);  background:#FaF1DC; }
.conf-low { color:var(--conf-low);  background:#F4EBE2; }

.src-tag{ font-size:var(--fs-meta); color:var(--muted-500); }
.src-tag a{ color:var(--muted-400); text-decoration:underline; }

/* Cards */
.card{ background:var(--ink-800); border:var(--hair) solid var(--line-600);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-1); }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s4) var(--s5); border-bottom:var(--hair) solid var(--line-600); }
.card-head .title{ font-weight:600; color:var(--text-000); }
.card-head .sub{ font-size:var(--fs-meta); color:var(--muted-500); }

/* Card grid (homepage + indexes) */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:var(--s5); }
.card-grid > a{ text-decoration:none; }
.card-grid .card{ height:100%; }
.card-body{ padding:var(--s5); display:flex; flex-direction:column; gap:var(--s2); height:100%; }
.card-body h3{ margin:0; }
.card-body h3 a{ color:var(--text-000); }
.card-body h3 a:hover{ color:var(--laser); }
.card-body p{ color:var(--muted-400); font-size:15.5px; margin:0; }
.card-cat{ font-size:12px; font-weight:600; letter-spacing:.2px; color:var(--laser);
  text-transform:none; margin:0; }
.card-grid .card:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); border-color:var(--line-500); }

/* The metric strip on spec cards */
.metric-strip{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
.metric{ padding:var(--s4) var(--s5); border-right:var(--hair) solid var(--line-600); }
.metric:last-child{ border-right:0; }
.metric .k{ font-size:12px; font-weight:600; color:var(--muted-500); display:block; margin-bottom:6px; }
.metric .v{ font-size:26px; color:var(--text-000); line-height:1; }
.metric .v.hot{ color:var(--laser); }
.metric .v .u{ font-family:var(--font-sans); font-size:12px; font-weight:500; color:var(--muted-500); }
.card-foot{ padding:var(--s3) var(--s5); border-top:var(--hair) solid var(--line-600);
  display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; }
.card-note{ font-size:var(--fs-meta); color:var(--muted-500); margin-top:var(--s3); }

/* Data tables */
.spec-table{ width:100%; border-collapse:collapse; font-size:var(--fs-data); }
.spec-table thead th{ background:var(--paper-2); text-align:left; padding:10px var(--s3);
  font-family:var(--font-sans); font-size:12px; font-weight:600; color:var(--muted-400);
  border-bottom:1.5px solid var(--line-500); white-space:nowrap; }
.spec-table td{ padding:11px var(--s3); border-bottom:var(--hair) solid var(--line-600); color:var(--text-200);
  font-variant-numeric:tabular-nums; }
.spec-table td.numcol{ text-align:right; }
.spec-table tbody tr{ border-left:3px solid transparent; }
.spec-table tr.c-high{ border-left-color:var(--conf-high); }
.spec-table tr.c-med { border-left-color:var(--conf-med); }
.spec-table tr.c-low { border-left-color:var(--conf-low); }
.spec-table tr:hover td{ background:var(--ink-700); }
.gauge{ display:inline-block; width:48px; height:6px; background:var(--ink-700);
  border-radius:3px; position:relative; vertical-align:middle; }
.gauge>i{ position:absolute; top:0; bottom:0; border-radius:3px; background:var(--laser); }
@media(max-width:640px){
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table td{ display:block; width:100%; }
  .spec-table thead{ display:none; }
  .spec-table td{ display:flex; justify-content:space-between; border-bottom:var(--hair) solid var(--line-600); }
  .spec-table td::before{ content:attr(data-k); color:var(--muted-500); font-family:var(--font-sans); }
}

.heatmap{ border:var(--hair) solid var(--line-600); border-radius:var(--radius-lg);
  background:#fff; box-shadow:var(--shadow-1); padding:var(--s5); }
.heatmap svg{ display:block; width:100%; height:auto; }

/* Stat strip */
.stat-strip{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  border:var(--hair) solid var(--line-600); border-radius:var(--radius-lg); overflow:hidden;
  background:#fff; box-shadow:var(--shadow-1); }
.stat{ padding:var(--s5); border-right:var(--hair) solid var(--line-600); }
.stat:last-child{ border-right:0; }
.stat .v, .stat .val{ font-size:28px; color:var(--text-000); font-weight:500; }
.stat .k{ font-size:13px; color:var(--muted-500); margin-top:4px; }
@media(max-width:640px){ .stat-strip{ grid-auto-flow:row; } .stat{ border-right:0; border-bottom:var(--hair) solid var(--line-600);} }

/* Nav */
.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.2) blur(6px); border-bottom:var(--hair) solid var(--line-600); }
.nav-in{ max-width:var(--maxw); margin:0 auto; padding:14px var(--s5);
  display:flex; align-items:center; gap:var(--s5); }
.brand{ display:flex; align-items:center; gap:var(--s2); font-family:var(--font-display);
  font-weight:600; font-size:19px; color:var(--text-000); }
.brand:hover{ text-decoration:none; color:var(--text-000); }
.brand .tld{ color:var(--laser); }
.nav-links{ display:flex; gap:var(--s5); margin-left:auto; font-size:15px; font-weight:500; flex-wrap:wrap; }
.nav-links a{ color:var(--muted-400); padding-bottom:3px; border-bottom:2px solid transparent; }
.nav-links a:hover{ color:var(--text-000); text-decoration:none; }
.nav-links a[aria-current="page"]{ color:var(--text-000); border-bottom-color:var(--laser); }
.machine-chip{ font-family:var(--font-mono); font-size:12px; color:var(--muted-400);
  border:1px solid var(--line-500); border-radius:999px; padding:3px 10px; }

/* Footer */
.foot{ background:var(--paper-2); border-top:var(--hair) solid var(--line-600); margin-top:var(--s8); }
.foot-in{ max-width:var(--maxw); margin:0 auto; padding:var(--s7) var(--s5) var(--s6);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--s6); }
.foot a{ color:var(--muted-400); font-size:15px; display:block; margin-bottom:8px; }
.foot a:hover{ color:var(--laser); text-decoration:none; }
.foot h4{ font-family:var(--font-sans); font-size:13px; font-weight:700; letter-spacing:.3px;
  color:var(--text-100); margin-bottom:var(--s3); }
.methodology-note{ grid-column:1/-1; border-top:var(--hair) solid var(--line-600); padding-top:var(--s4);
  font-size:var(--fs-meta); color:var(--muted-500); }

/* Banners + callouts */
.safety-banner{ border:1px solid #E7C6BF; border-left:4px solid var(--danger);
  border-radius:var(--radius); background:#FBEDEA; padding:var(--s4) var(--s5);
  display:flex; gap:var(--s3); }
.safety-banner .label{ font-weight:700; font-size:13px; letter-spacing:.3px; color:var(--danger); }
.callout{ border:var(--hair) solid var(--line-600); border-left:4px solid var(--laser);
  border-radius:var(--radius); background:#fff; padding:var(--s4) var(--s5); box-shadow:var(--shadow-1); }
.callout.ok{ border-left-color:var(--conf-high); }
.callout.warn{ border-left-color:var(--conf-med); }
.callout .label{ font-size:12px; font-weight:700; letter-spacing:.3px; text-transform:none; color:var(--muted-400); }

/* Photo gallery / figures */
figure{ margin:var(--s5) 0; }
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--s4); }
.gallery figure{ margin:0; border:var(--hair) solid var(--line-600); border-radius:var(--radius-lg);
  overflow:hidden; background:#fff; box-shadow:var(--shadow-1); }
.gallery img, figure img{ display:block; width:100%; height:auto; }
figure img{ border-radius:var(--radius-lg); }
.gallery figcaption, figure figcaption{ font-size:12px; color:var(--muted-500);
  padding:8px var(--s3); line-height:1.5; }

/* Hero */
.hero{ padding:var(--s8) 0 var(--s7); }
.hero-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--s7); align-items:center; }
@media(max-width:820px){ .hero-grid{ grid-template-columns:1fr; gap:var(--s6); } }
.hero .display{ margin:0 0 var(--s4); }

/* ---- Robustness fixes ---- */

/* Equal-height cards with trailing buttons pinned to the bottom of the card */
.card{ display:flex; flex-direction:column; }
.card-body{ flex:1 1 auto; }
.card > .btn:last-child, .card-body > .btn:last-child{ margin-top:auto; align-self:flex-start; }
/* Cards that hold content directly (no .card-body / .card-head) need their own padding */
.card:not(:has(.card-body)):not(:has(.card-head)){ padding:var(--s5); }
.card:not(:has(.card-body)) > h3{ margin-top:0; }
/* Card heading links read as dark headings, not orange body links */
.card h3 a{ color:var(--text-000); }
.card h3 a:hover{ color:var(--laser); }

/* Hide JS warning slots when they have no message */
.callout:empty{ display:none; }

/* Stat strip: keep the number off the label in inline variants ("7 materials", not "7materials") */
.stat .v, .stat .val{ margin-right:.4em; }

/* Form controls — generic, and the tool pages' .tool-wrap/.panel/.fg/.fl/.fc/.axis-blk */
input,select,textarea,button{ font:inherit; color:var(--text-100); }
select,textarea,
input[type=text],input[type=number],input[type=email],input[type=search]{
  padding:9px 11px; border:1px solid var(--line-500); border-radius:8px; background:#fff; }
select:focus,textarea:focus,input:focus{ outline:2px solid var(--laser); outline-offset:1px; border-color:var(--laser); }

.tool-wrap{ display:flex; flex-direction:column; gap:var(--s5); max-width:780px; }
.panel{ background:#fff; border:1px solid var(--line-600); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1); padding:var(--s5) var(--s6); }
.panel-hd{ font-family:var(--font-display); font-size:20px; font-weight:600;
  color:var(--text-000); margin:0 0 var(--s4); }
.fg{ display:flex; align-items:center; gap:var(--s3); margin:0 0 var(--s3); flex-wrap:wrap; }
.fl{ flex:0 0 150px; font-size:14px; font-weight:500; color:var(--text-100); }
.fc{ flex:1 1 180px; min-width:0; max-width:360px; padding:9px 11px;
  border:1px solid var(--line-500); border-radius:8px; background:#fff;
  font-size:15px; color:var(--text-100); }
.fc[type=number]{ flex:0 0 110px; }
.axis-blk{ border-top:1px solid var(--line-600); margin-top:var(--s4); padding-top:var(--s4); }
.axis-blk > :first-child{ display:block; font-weight:600; color:var(--text-000); margin-bottom:var(--s3); }

@media (prefers-reduced-motion: reduce){
  *,::before,::after{ animation:none !important; transition:none !important; }
}

/* ── Tool-page components ────────────────────────────────────────────────── */
/* Row-of-three inputs (min/max/steps) */
.row3{ display:flex; gap:var(--s3); flex-wrap:wrap; }
.row3 > div{ flex:1 1 90px; min-width:80px; }
.sub-lbl{ font-size:13px; font-weight:500; color:var(--muted-400); display:block; margin-bottom:4px; }
.hint{ font-size:13px; color:var(--muted-500); margin-top:4px; flex-basis:100%; }

/* Preview box */
.prev-box{ min-height:220px; border:1.5px dashed var(--line-500); border-radius:var(--radius);
  background:var(--ink-700); display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--s3); overflow:auto; padding:var(--s2); }
.prev-ph{ font-size:var(--fs-meta); color:var(--muted-500); text-align:center; max-width:28ch; }
.grid-inf{ font-size:var(--fs-meta); color:var(--muted-500); margin-bottom:var(--s3); }

/* Download buttons */
.btn-row{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s4); }
.tbtn{ font-size:14px; font-weight:600; padding:10px 20px; border-radius:var(--radius);
  cursor:pointer; border:1.5px solid var(--line-500); background:#fff; color:var(--text-100); line-height:1.1; }
.tbtn:hover:not([disabled]){ border-color:var(--text-100); color:var(--text-000); }
.tbtn[disabled]{ opacity:.4; cursor:not-allowed; }
.tbtn-primary{ background:var(--laser); border-color:var(--laser); color:#fff; }
.tbtn-primary:hover:not([disabled]){ background:var(--laser-dim); border-color:var(--laser-dim); }
.tbtn-outline{ background:#fff; border-color:var(--laser); color:var(--laser); }
.tbtn-outline:hover:not([disabled]){ background:var(--laser-soft); }

/* G-code collapsible section */
.gc-sect{ border-top:var(--hair) solid var(--line-600); margin-top:var(--s5); padding-top:var(--s4); }
.gc-toggle{ background:none; border:none; padding:0; font-size:15px; font-weight:600;
  color:var(--text-100); cursor:pointer; display:flex; align-items:center; gap:var(--s2);
  margin-bottom:0; transition:color var(--ease); }
.gc-toggle:hover{ color:var(--laser); }
.gc-body{ display:none; margin-top:var(--s4); }
.gc-body.open{ display:block; }

/* Callout semantic variants (danger / warning) */
.callout.danger{ border-left-color:var(--danger); background:#FBEDEA; }
.callout.warning{ border-left-color:var(--conf-med); background:#FBF7E8; }
.callout.danger strong{ color:var(--danger); }
.callout.warning strong{ color:var(--conf-med); }

/* Code / snippet block */
pre.code-block{ background:var(--paper-2); border:var(--hair) solid var(--line-600);
  border-radius:var(--radius); padding:var(--s4) var(--s5); overflow-x:auto;
  font-family:var(--font-mono); font-size:13.5px; line-height:1.65; color:var(--text-100);
  white-space:pre; }
pre.code-block code{ background:none; padding:0; border-radius:0; font-size:inherit; color:inherit; }

/* Embed widget chrome */
.embed-bar{ display:flex; align-items:center; justify-content:space-between;
  padding:var(--s2) var(--s4); border-bottom:var(--hair) solid var(--line-600); background:#fff; }
.embed-credit{ text-align:center; margin-top:var(--s4); padding-top:var(--s3);
  border-top:var(--hair) solid var(--line-600); font-size:var(--fs-meta); color:var(--muted-500); }

/* Affiliate gear list */
.gear-list{ list-style:none; padding:0; display:grid; gap:var(--s3); }
.gear-list li{ padding:var(--s3) var(--s4); background:#fff; border:var(--hair) solid var(--line-600);
  border-radius:var(--radius); font-size:15px; }
.gear-list li strong{ display:block; color:var(--text-000); margin-bottom:4px; }
.affiliate-note{ font-size:var(--fs-meta); color:var(--muted-500); margin-top:var(--s2); }