/* Shared "science lab" theme for every page (home, Formula Library, Unit Converter, Graph Plotter).
   Link it AFTER the page's own <style>: these tokens and component rules then win over the page defaults, and the
   page keeps only its layout. Animated background: /web/sci_bg.js. --accent, --ink and --muted stay plain hex
   because the 3D viewers read them into THREE.Color. */

:root {
  --bg: #eef3fb; --panel: rgba(255,255,255,.78); --panel-solid: #ffffff; --ink: #0f1b2d; --muted: #4f6079;
  --line: rgba(30,64,140,.15); --accent: #0a84d6; --accent-2: #7c3aed; --accent-3: #059669; --accent-ink: #ffffff;
  --btn-a: #0a6fc2; --btn-b: #6d28d9; --glow: rgba(10,132,214,.22); --grid: rgba(10,60,140,.07);
  --soft: rgba(10,132,214,.09); --hl: #fff1a8; --drop: rgba(10,132,214,.05); --sig-hot: #06b6d4; --sig-spark: #0ea5e9;
  --ok: #1a7f37; --warn: #9a6700; --err: #cf222e; --err-bg: #ffebe9; --warn-bg: #fff8c5;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 12px 32px rgba(16,40,90,.08);
  --f-head: "Space Grotesk", system-ui, "Segoe UI", sans-serif; --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #050a16; --panel: rgba(13,21,40,.72); --panel-solid: #0d1528; --ink: #e6f0ff; --muted: #93a6c4;
    --line: rgba(120,170,255,.15); --accent: #38bdf8; --accent-2: #a78bfa; --accent-3: #34d399; --accent-ink: #03101d;
    --btn-a: #0284c7; --btn-b: #7c3aed; --glow: rgba(56,189,248,.28); --grid: rgba(120,170,255,.06);
    --soft: rgba(56,189,248,.12); --hl: #5a4a00; --drop: rgba(56,189,248,.05); --sig-hot: #f0f9ff; --sig-spark: #e0f2fe;
    --ok: #3fb950; --warn: #d29922; --err: #f85149; --err-bg: #3a1618; --warn-bg: #352a0c;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 40px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --bg: #050a16; --panel: rgba(13,21,40,.72); --panel-solid: #0d1528; --ink: #e6f0ff; --muted: #93a6c4;
  --line: rgba(120,170,255,.15); --accent: #38bdf8; --accent-2: #a78bfa; --accent-3: #34d399; --accent-ink: #03101d;
  --btn-a: #0284c7; --btn-b: #7c3aed; --glow: rgba(56,189,248,.28); --grid: rgba(120,170,255,.06);
  --soft: rgba(56,189,248,.12); --hl: #5a4a00; --drop: rgba(56,189,248,.05); --sig-hot: #f0f9ff; --sig-spark: #e0f2fe;
  --ok: #3fb950; --warn: #d29922; --err: #f85149; --err-bg: #3a1618; --warn-bg: #352a0c;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 40px rgba(0,0,0,.35);
}

@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* ---------------------------------------------------------------- page backdrop */
html { scroll-behavior: smooth; }
body { background: var(--bg); overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: -20%; z-index: -3; pointer-events: none;
  background: radial-gradient(38% 34% at 22% 18%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
              radial-gradient(34% 32% at 82% 12%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 70%),
              radial-gradient(40% 36% at 70% 88%, color-mix(in srgb, var(--accent-3) 12%, transparent), transparent 70%);
  animation: lab-nebula 26s ease-in-out infinite alternate; }
body::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse at 50% 20%, #000 30%, transparent 85%); }
.sci-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
@keyframes lab-nebula { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(3%, 4%, 0) scale(1.08); } }

/* ---------------------------------------------------------------- header: glass, sticky */
header { position: sticky; top: 0; z-index: 8; padding: 12px 28px; gap: 18px;
         background: color-mix(in srgb, var(--bg) 68%, transparent); border-bottom: 1px solid var(--line);
         -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
/* Same header on every page: brand block of fixed width, then the tabs, then the page's own controls on the right.
   The long page description is not shown in the header (it would push the tabs to the middle); the element stays
   for scripts that translate it. */
header { flex-wrap: nowrap; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; flex: 0 0 272px; min-width: 0; }
.brand h1 { font: 700 20px/1.15 var(--f-head); letter-spacing: -.01em; margin: 0; white-space: nowrap; }
.brand .sub { display: none; }
header > .spacer { flex: 1; }
header nav { flex: 0 0 auto; }
.brand .kicker { display: block; font: 600 10.5px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.logo { width: 42px; height: 42px; flex: none; filter: drop-shadow(0 0 10px var(--glow)); }
.lg-orbits, .lg-core { transform-box: fill-box; transform-origin: center; }
.lg-orbits { animation: lab-spin 14s linear infinite; }
.lg-core { animation: lab-pulse 2.4s ease-in-out infinite; }
.grad { background: linear-gradient(100deg, var(--accent), var(--accent-2) 55%, var(--accent)); background-size: 200% auto;
        -webkit-background-clip: text; background-clip: text; color: transparent; animation: lab-sheen 6s linear infinite; }

header nav { background: color-mix(in srgb, var(--panel-solid) 55%, transparent); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
header nav a { position: relative; border-radius: 8px; color: var(--muted); transition: color .2s, background .2s; }
header nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px;
                      background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transition: transform .25s; }
header nav a:hover { color: var(--ink); }
header nav a:hover::after, header nav a.on::after { transform: scaleX(1); }
header nav a.on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); font-weight: 600; }
#themeBtn { border-radius: 999px; width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
            background: color-mix(in srgb, var(--panel-solid) 55%, transparent); }
.lang { border-radius: 10px; }
.lang button[aria-pressed="true"], .fc-lang button[aria-pressed="true"] { background: linear-gradient(120deg, var(--btn-a), var(--btn-b)); color: #fff; }

/* use the full screen width on every page (no centred max-width column); a small side margin only */
body > main { max-width: none; padding-left: clamp(16px, 1.8vw, 36px); padding-right: clamp(16px, 1.8vw, 36px); }
header { padding-left: clamp(16px, 1.8vw, 36px); padding-right: clamp(16px, 1.8vw, 36px); }

/* sticky sidebars sit below the sticky header */
body > main > aside, .controls { top: 88px; }

/* ---------------------------------------------------------------- glass cards with instrument corner marks */
.card { position: relative; background: var(--panel); border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow);
        -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.card::after { content: ""; position: absolute; inset: 7px; pointer-events: none; border-radius: 10px; opacity: .7;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 14px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 2px 14px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 2px 14px no-repeat; }
.card h2, .card h3 { font-family: var(--f-head); }

/* ---------------------------------------------------------------- buttons, toggles, fields */
.btn { border-radius: 10px; transition: transform .15s, box-shadow .2s, border-color .2s, background .2s; position: relative; overflow: hidden; }
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn.primary, .btn.on, .fc-primary, .seg button.on, .seg button[aria-pressed="true"], .chip[aria-pressed="true"] {
  background: linear-gradient(120deg, var(--btn-a), var(--btn-b)); border-color: transparent; color: #fff;
  box-shadow: 0 8px 24px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.18); }
.btn.primary:hover:not(:disabled), .fc-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -8px var(--glow); }
.btn.primary::before, .fc-primary::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .6s; }
.btn.primary:hover:not(:disabled)::before, .fc-primary:hover::before { left: 120%; }
.seg { border-radius: 10px; }
select { border-radius: 9px; background-color: color-mix(in srgb, var(--panel-solid) 70%, transparent); color: var(--ink); }
select option { background: var(--panel-solid); color: var(--ink); }
input[type=range] { accent-color: var(--accent); }

/* ---------------------------------------------------------------- surfaces that must stay opaque */
.drawer { background: var(--panel-solid); }
#plotWrap { background: var(--panel-solid); border-radius: 12px; }   /* graph.js paints the plot with --panel on top */
.toast { color: var(--panel-solid); box-shadow: 0 10px 30px -10px var(--glow); }

/* ---------------------------------------------------------------- shared footer (site.js) */
.site-foot { display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; margin-top: 8px;
             padding: 18px clamp(16px, 1.8vw, 36px) 22px; border-top: 1px solid var(--line);
             background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.site-foot .sf-brand { display: flex; flex-direction: column; }
.site-foot .sf-brand b { font: 700 16px var(--f-head); }
.site-foot .sf-tag { font: 600 10.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.site-foot .sf-mid { flex: 1; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.site-foot .sf-contact { display: inline-flex; gap: 6px; align-items: center; padding: 8px 16px; border-radius: 999px; text-decoration: none; font-weight: 600;
                         color: #fff; background: linear-gradient(120deg, var(--btn-a), var(--btn-b)); box-shadow: 0 8px 22px -10px var(--glow); }
.site-foot .sf-contact:hover { transform: translateY(-1px); }
.site-foot .sf-end { display: flex; gap: 12px; align-items: center; font: 12.5px var(--f-mono); color: var(--muted); }
.site-foot .sf-top { color: var(--muted); text-decoration: none; }
.site-foot .sf-top:hover { color: var(--accent); }
/* author signature (site.js): handwriting that "writes itself" + an underline swoosh, once, when first seen */
.site-foot .sf-sign { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 8px; text-decoration: none; color: var(--muted); }
.site-foot .sf-by { font: 600 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.sig-wrap { position: relative; display: inline-block; padding: 0 4px 6px 0; }
.sig { display: inline-block; font: 700 25px/1 "Dancing Script", "Segoe Script", "Brush Script MT", cursive;
       background: linear-gradient(110deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text;
       color: transparent; clip-path: inset(-80% 100% -80% -12%); transition: clip-path 1.6s cubic-bezier(.6, .1, .3, 1); }
.sig-swoosh { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 10px; overflow: visible; }
.sig-swoosh path { fill: none; stroke: var(--accent-2); stroke-width: 2.2; stroke-linecap: round; opacity: .75;
                   stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset .9s ease-out 1.4s; }
.sf-sign.on .sig { clip-path: inset(-80% -20% -80% -12%); }       /* room for the glow to fade out */
.sf-sign.on .sig-swoosh path { stroke-dashoffset: 0; }

/* electricity: once written, a white-hot current runs through the letters and a spark travels the underline
   (text stays crisp — no glow or blur) */
.sig { background: linear-gradient(100deg, #1e40af 0%, #2563eb 30%, #38bdf8 42%, var(--sig-hot) 50%, #38bdf8 58%, #2563eb 70%, #1e40af 100%);
       background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; }
.sig-swoosh path { stroke: #38bdf8; }
.sig-swoosh .spark { stroke: var(--sig-spark); stroke-width: 3; opacity: 0; stroke-dasharray: 16 220; stroke-dashoffset: 16;
                     filter: drop-shadow(0 0 3px #38bdf8) drop-shadow(0 0 6px #0ea5e9); transition: none; }
.sf-sign.on .sig { animation: sig-current 2.8s linear 1.7s infinite; }
.sf-sign.on .sig-swoosh .spark { animation: sig-spark 2.2s ease-in-out 2.3s infinite; }
.sf-sign:hover .sig { animation-duration: 1.1s; }                    /* hover: more voltage */
@keyframes sig-current { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@keyframes sig-spark { 0% { stroke-dashoffset: 16; opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; }
                       100% { stroke-dashoffset: -205; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sig-swoosh .spark { display: none; } }
.site-foot .sf-role { font: 600 12.5px var(--f-head, inherit); color: var(--ink); margin-top: 2px; }
.site-foot .sf-reach { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 12.5px; }
.site-foot .sf-reach a { color: var(--muted); text-decoration: none; }
.site-foot .sf-reach a:hover { color: var(--accent); text-decoration: underline; }
.site-foot .sf-role[hidden], .site-foot .sf-reach[hidden] { display: none; }
@media print { .sig { clip-path: none; color: #0f1b2d; background: none; } }
/* social links (site.js): round icons in the footer, named buttons in a [data-social] block */
.social-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted);
               text-decoration: none; transition: color .15s, transform .15s, border-color .15s, background .15s; }
.social-link svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.social-link:hover { color: var(--brand-hover, var(--accent)); transform: translateY(-2px); }
.social-link:hover svg { fill: var(--brand, currentColor); }
.site-foot .sf-social { display: flex; gap: 6px; align-items: center; }
.site-foot .sf-social[hidden] { display: none; }
.site-foot .sf-social .social-link { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
                                     background: color-mix(in srgb, var(--panel-solid) 60%, transparent); }
.site-foot .sf-social .social-link:hover { border-color: currentColor; }
.social-title { display: block; font: 600 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.social-row { display: flex; flex-wrap: wrap; gap: 10px; }
.social-row .social-link { padding: 9px 16px 9px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink);
                           font-weight: 600; font-size: 14px; background: color-mix(in srgb, var(--panel-solid) 70%, transparent); }
.social-row .social-link svg { fill: var(--brand, currentColor); width: 20px; height: 20px; }
.social-row .social-link:hover { border-color: var(--brand, var(--accent)); color: var(--ink);
                                 box-shadow: 0 10px 24px -14px var(--brand, var(--glow)); }
@media (max-width: 640px) {                                  /* phones: brand, message + button, then icons row */
  .site-foot .sf-mid { flex-basis: 100%; justify-content: flex-start; }
  .site-foot .sf-end { flex-basis: 100%; justify-content: space-between; }
}
@media print { .site-foot { display: none; } }

/* ---------------------------------------------------------------- keyframes */
@keyframes lab-spin { to { transform: rotate(360deg); } }
@keyframes lab-pulse { 50% { transform: scale(1.25); opacity: .8; } }
@keyframes lab-sheen { to { background-position: 200% center; } }

@media (max-width: 1100px) {
  header { flex-wrap: wrap; }
  .brand { flex-basis: auto; }
  header nav { order: 3; flex: 1 1 100%; flex-wrap: wrap; }       /* tabs get their own full-width row and wrap */
}
@media (max-width: 860px) {
  header { position: static; padding: 12px 16px; }
  body > main > aside, .controls { top: 12px; }
}
@media print {
  :root:not(#print) { --bg: #fff; --panel: #fff; --panel-solid: #fff; --ink: #0f1b2d; --muted: #4f6079; --line: #d0d7e2; }
  body::before, body::after, .sci-bg { display: none !important; }
  header { position: static; }
  .card { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .card::after { display: none; }
}
/* ---------------------------------------------------------------- keyboard
   One clear focus ring for every control on every page (wins over page-level `outline: none`); only shown for
   keyboard focus, so mouse clicks look unchanged. */
html { scroll-padding-top: 96px; scroll-padding-bottom: 24px; }   /* focused items never hide under the sticky header */
:focus-visible { outline: 3px solid var(--accent) !important; outline-offset: 2px !important; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0 !important; }
main[tabindex="-1"]:focus, main[tabindex="-1"]:focus-visible { outline: none !important; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 1000; padding: 10px 18px; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 30px -10px var(--glow, rgba(0,0,0,.4)); transition: top .15s; }
.skip-link:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}