@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --fm-bg:#191B1D;
  --fm-panel:#202326;
  --fm-panel-2:#25292B;
  --fm-ink:#F3EFE5;
  --fm-muted:#B6B5AE;
  --fm-dim:#8A8C88;
  --fm-rule:#383C3F;
  --fm-amber:#F2B654;
  --fm-serif:'Newsreader','Iowan Old Style',Georgia,serif;
  --fm-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --fm-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- ferronato.me labs identity: extended tokens ----
     Every lab maps its own chrome onto these. Plot/trace semantics stay
     per-lab, but draw from the shared data palette where possible. */
  --fm-sunk:#141618;            /* plot wells, inputs, recessed areas */
  --fm-rule-strong:#4A4E50;     /* hover borders, dividers on panels */
  --fm-amber-ink:#191B1D;       /* text on an amber fill */
  --fm-amber-hi:#F5C36F;        /* primary button hover */
  --fm-amber-soft:rgba(242,182,84,.11);
  --fm-amber-line:rgba(242,182,84,.55);
  --fm-d1:#F2B654;              /* data palette: amber  */
  --fm-d2:#92BED8;              /*               blue   */
  --fm-d3:#9BD5B4;              /*               mint   */
  --fm-d4:#E39A86;              /*               coral  */
  --fm-d5:#B9A7E3;              /*               violet */
  --fm-d6:#A8AAA5;              /*               grey   */
  --fm-ok:#9BD5B4;--fm-warn:#F2B654;--fm-bad:#E3826F;
  --fm-r-ctl:6px;               /* buttons, inputs, tabs */
  --fm-r-panel:8px;             /* cards, panels, instruments */
  --fm-h-ctl:30px;              /* control height */
  --fm-bar-h:56px;              /* app header bar */
  --fm-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px rgba(0,0,0,.18);
}

/* Light variant for labs that have a theme toggle. A lab enables it by
   adding its own light-state selector to this list in its theme.css, e.g.
   html[data-theme="light"] body[data-fm-project="x"]{ ...same values... }. */
.fm-light{
  --fm-bg:#F4F1EA;--fm-panel:#FFFFFF;--fm-panel-2:#F8F6F1;--fm-sunk:#ECE8DF;
  --fm-ink:#1E2022;--fm-muted:#55575A;--fm-dim:#7A7C7E;
  --fm-rule:#D9D5CC;--fm-rule-strong:#BDB8AD;
  --fm-amber:#B57A12;--fm-amber-hi:#9A6810;--fm-amber-ink:#FFFFFF;--fm-amber-soft:rgba(181,122,18,.10);--fm-amber-line:rgba(181,122,18,.5);
  --fm-d1:#B57A12;--fm-d2:#2F6E93;--fm-d3:#2E8460;--fm-d4:#B4513A;--fm-d5:#6A55B0;--fm-d6:#6F726F;
  --fm-ok:#2E8460;--fm-warn:#B57A12;--fm-bad:#B4513A;
  --fm-shadow:0 1px 2px rgba(30,32,34,.06),0 8px 24px rgba(30,32,34,.06);
}

/* Shared portfolio breadcrumb. It deliberately participates in layout instead
   of floating over controls, including the full-screen benches. */
.fm-breadcrumb-bar{
  min-height:38px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 18px;
  border-bottom:1px solid var(--fm-rule);
  background:var(--fm-bg);
  color:var(--fm-dim);
  font:500 11px/1 var(--fm-mono);
  letter-spacing:.015em;
  position:relative;
  z-index:10000;
}
.fm-breadcrumb-bar a{
  color:var(--fm-amber);
  text-decoration:none;
}
.fm-breadcrumb-bar a:hover{text-decoration:underline;text-underline-offset:4px}
.fm-breadcrumb-bar .fm-sep{color:#5f625f}
.fm-breadcrumb-bar .fm-project{color:var(--fm-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.fm-footer-links{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--fm-rule);
  color:var(--fm-dim);
  font:500 11px/1.45 var(--fm-mono);
  font-style:normal;
}
.fm-footer-links a{color:var(--fm-amber);text-decoration:none}
.fm-footer-links a:hover{text-decoration:underline;text-underline-offset:4px}
.fm-footer-links .fm-name{color:var(--fm-muted);margin-right:auto}

/* Compact version for instrument status bars that cannot grow vertically. */
.fm-footer-links.fm-inline{
  margin:0 0 0 auto;
  padding:0 0 0 14px;
  border-top:0;
  border-left:1px solid var(--fm-rule);
  flex-wrap:nowrap;
  white-space:nowrap;
  min-height:18px;
}

/* ---------- Shared portfolio surface palette ---------- */
body[data-fm-project]{background:var(--fm-bg);color:var(--fm-ink)}

body[data-fm-project="bus_protocols"]{
  --paper:var(--fm-bg);--figure:var(--fm-panel);--band:var(--fm-panel-2);
  --rule:var(--fm-rule);--ink:var(--fm-ink);--ink-2:var(--fm-muted);--ink-3:var(--fm-dim);
  --man:#92BED8;--event:#9BD5B4;--clock:#A8AAA5;
}
body[data-fm-project="scope"]{
  --panel:var(--fm-panel);--panel-hi:#2A2E30;--panel-lo:var(--fm-bg);--groove:var(--fm-rule);
  --ink:var(--fm-ink);--ink-2:var(--fm-muted);--ink-3:var(--fm-dim);--ch-a:var(--fm-amber);
}
body[data-fm-project="em-fields"]{
  --ink:var(--fm-bg);--panel:var(--fm-panel);--panel-2:var(--fm-panel-2);
  --line:rgba(182,181,174,.16);--line-strong:rgba(242,182,84,.42);
  --text:var(--fm-ink);--muted:var(--fm-muted);--accent:var(--fm-amber);--amber:var(--fm-amber);
}
body[data-fm-project="fft"]{
  --ink:var(--fm-bg);--ink-2:#17191B;--panel:var(--fm-panel);--panel-hi:var(--fm-panel-2);
  --rule:var(--fm-rule);--rule-soft:#303436;--text:var(--fm-ink);--dim:var(--fm-muted);--dimmer:var(--fm-dim);--iir:var(--fm-amber);
}
body[data-fm-project="high_speed_pcb"]{
  --bg:var(--fm-bg);--bg-2:#1C1F21;--panel:var(--fm-panel);--panel-2:#232729;--panel-3:#272B2D;--panel-4:#2B3032;
  --line:var(--fm-rule);--line-2:#4A4E50;--line-soft:#303436;--text:var(--fm-ink);--text-2:#D5D1C8;
  --muted:var(--fm-muted);--muted-2:var(--fm-dim);--amber:var(--fm-amber);
}
body[data-fm-project="optics"]{
  --ink:var(--fm-bg);--panel:var(--fm-panel);--panel2:var(--fm-panel-2);--rule:var(--fm-rule);
  --txt:var(--fm-ink);--dim:var(--fm-muted);--teal:#92BED8;--amber:var(--fm-amber);
}
body[data-fm-project="rf-filters"]{
  --chassis:var(--fm-bg);--panel:var(--fm-panel);--panel-2:var(--fm-panel-2);--rail:var(--fm-rule);--rail-hi:#4A4E50;
  --screen:#111416;--ink:#E9E5DC;--ink-dim:var(--fm-muted);--ink-faint:var(--fm-dim);--amber:var(--fm-amber);--ch1:var(--fm-amber);
}
body[data-fm-project="smith-charts"]{
  --bg:var(--fm-bg);--bg2:#1C1F21;--panel:var(--fm-panel);--panel2:var(--fm-panel-2);
  --line:var(--fm-rule);--line2:#4A4E50;--ink:var(--fm-ink);--ink2:var(--fm-muted);--ink3:var(--fm-dim);--mark:var(--fm-amber);
}
body[data-fm-project="fpga-timing"]{
  --paper:var(--fm-bg);--panel:var(--fm-panel);--plot:#111416;--ink:var(--fm-ink);--muted:var(--fm-muted);--faint:var(--fm-dim);
  --rule:var(--fm-rule);--grid:#303436;--clk:var(--fm-amber);
}

body[data-fm-project="quantum"]{
  --paper:var(--fm-bg);--plate:var(--fm-panel);--ink:var(--fm-ink);--muted:var(--fm-muted);--faint:var(--fm-rule);--grid:#303436;
  --accent:var(--fm-amber);--pot:#52575A;--detector:#0B0E10;
  --t1:#F2B654;--t2:#92BED8;--t3:#9BD5B4;
  background:radial-gradient(1050px 520px at 78% -12%,rgba(242,182,84,.055),transparent 64%),var(--fm-bg);
}
body[data-fm-project="turbulence"]{
  --bg:var(--fm-bg);--bg2:#17191B;--panel:var(--fm-panel);--panel2:var(--fm-panel-2);
  --rule:var(--fm-rule);--rule2:#4A4E50;--text:var(--fm-ink);--dim:var(--fm-muted);--faint:var(--fm-dim);--beam:var(--fm-amber);
}

/* Keep the compact UI typography, but use the same display face as the CV for
   the project identity and major section titles. */
body[data-fm-project] .wordmark,
body[data-fm-project] .brand h1,
body[data-fm-project] .brand-name,
body[data-fm-project] .hero h1,
body[data-fm-project] .lab-heading h2,
body[data-fm-project] header h1,
body[data-fm-project] .bezel h1{
  font-family:var(--fm-serif);
  font-weight:400;
  letter-spacing:-.015em;
}

/* Full-screen instrument pages need to give the breadcrumb its 38 px. */
body[data-fm-project="rf-filters"] .app{height:calc(100vh - 38px)}
body[data-fm-project="high_speed_pcb"] .app-shell{min-height:calc(100vh - 38px)}

/* Project-specific status/footer integration. */
body[data-fm-project="optics"] footer{gap:16px}
body[data-fm-project="optics"] footer .fm-footer-links{font-size:10px}
body[data-fm-project="optics"] #readout{flex:1;min-width:0}
body[data-fm-project="rf-filters"] .fm-links-card{min-width:285px;display:flex;align-items:center;padding:7px 12px;gap:14px;font:500 10px var(--fm-mono)}
body[data-fm-project="rf-filters"] .fm-links-card a{color:var(--fm-amber);text-decoration:none;white-space:nowrap}
body[data-fm-project="rf-filters"] .fm-links-card a:hover{text-decoration:underline;text-underline-offset:3px}

/* New simple footer used by the EM bench. */
.fm-standalone-footer{margin:28px 20px 0;padding:18px 0 30px;border-top:1px solid var(--fm-rule)}
.fm-standalone-footer .fm-footer-links{margin:0;padding:0;border:0}

@media(max-width:700px){
  .fm-breadcrumb-bar{padding:0 12px;font-size:10px}
  .fm-footer-links{gap:8px 12px}
  body[data-fm-project="rf-filters"] .fm-links-card{min-width:220px}
}

/* Bring each application's chrome onto the same charcoal/amber portfolio shell
   while leaving plot/trace semantics untouched. */
body[data-fm-project="em-fields"]{
  background:radial-gradient(900px 420px at 12% -8%,rgba(242,182,84,.055),transparent 70%),var(--fm-bg);
}
body[data-fm-project="fft"] .topbar{background:rgba(25,27,29,.92);border-bottom-color:var(--fm-rule)}
body[data-fm-project="fft"] .brand b,
body[data-fm-project="fft"] .navlinks a.on{color:var(--fm-amber)}
body[data-fm-project="fft"] .navlinks a.on{background:rgba(242,182,84,.09)}

body[data-fm-project="high_speed_pcb"] .sidebar{
  inset:38px auto 0 0;
  background:linear-gradient(180deg,var(--fm-panel),var(--fm-bg));
  border-right-color:var(--fm-rule);
}
body[data-fm-project="high_speed_pcb"] .workspace-bar{background:rgba(25,27,29,.92);border-bottom-color:var(--fm-rule)}
body[data-fm-project="high_speed_pcb"] .brand-block{border-bottom-color:var(--fm-rule)}
body[data-fm-project="high_speed_pcb"] footer{height:auto;min-height:50px;background:var(--fm-bg);gap:18px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
body[data-fm-project="high_speed_pcb"] footer .fm-footer-links{margin:0 0 0 auto;padding:0 0 0 16px;border-top:0;border-left:1px solid var(--fm-rule);flex-wrap:nowrap}

body[data-fm-project="optics"] .bar{background:linear-gradient(180deg,var(--fm-panel),var(--fm-bg));border-bottom-color:var(--fm-rule);box-shadow:none}
body[data-fm-project="optics"] footer{background:var(--fm-bg);border-top-color:var(--fm-rule)}

body[data-fm-project="rf-filters"] .masthead{background:linear-gradient(180deg,var(--fm-panel),var(--fm-bg));border-bottom-color:var(--fm-rule);box-shadow:none}
body[data-fm-project="rf-filters"] .meas{background:var(--fm-bg);border-top-color:var(--fm-rule)}

body[data-fm-project="smith-charts"]{background:radial-gradient(1000px 500px at 70% -10%,rgba(242,182,84,.045),transparent 60%),var(--fm-bg)}
body[data-fm-project="smith-charts"] .bezel{background:linear-gradient(180deg,var(--fm-panel),var(--fm-bg));border-bottom-color:var(--fm-rule)}

body[data-fm-project="turbulence"] header{background:linear-gradient(180deg,var(--fm-panel),var(--fm-bg));border-bottom-color:var(--fm-rule)}


/* Three-level SEO breadcrumb: Home › Labs › current lab. */
.fm-breadcrumb-bar a{white-space:nowrap}
.fm-breadcrumb-bar .fm-project{min-width:0}
@media (max-width:34rem){
  .fm-breadcrumb-bar{gap:6px}
  .fm-breadcrumb-bar a:first-child{display:none}
  .fm-breadcrumb-bar a:first-child + .fm-sep{display:none}
}


/* Contextual internal links between engineering labs. */
.fm-related-labs{
  box-sizing:border-box;
  width:min(1180px,calc(100% - 40px));
  margin:42px auto 28px;
  padding:24px 0 0;
  border-top:1px solid var(--fm-rule);
  font-family:var(--fm-sans);
}
.fm-related-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:16px}
.fm-related-kicker{display:block;margin-bottom:5px;color:var(--fm-amber);font:600 10px/1.2 var(--fm-mono,ui-monospace,monospace);letter-spacing:.13em;text-transform:uppercase}
.fm-related-labs h2{margin:0;color:var(--fm-ink);font-family:var(--fm-serif);font-size:clamp(22px,2.2vw,30px);font-weight:400;letter-spacing:-.015em}
.fm-related-all{flex:0 0 auto;color:var(--fm-muted);font:500 11px/1.3 var(--fm-mono,ui-monospace,monospace);text-decoration:none}
.fm-related-all:hover,.fm-related-all:focus-visible{color:var(--fm-amber);outline:none}
.fm-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fm-related-card{
  display:block;
  min-width:0;
  padding:16px 17px 17px;
  border:1px solid var(--fm-rule);
  border-radius:8px;
  background:rgba(255,255,255,.015);
  color:inherit;
  text-decoration:none;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.fm-related-card:hover,.fm-related-card:focus-visible{
  border-color:rgba(242,182,84,.62);
  background:rgba(242,182,84,.045);
  transform:translateY(-1px);
  outline:none;
}
.fm-related-card strong{display:block;margin-bottom:7px;color:var(--fm-ink);font-size:14px;font-weight:550;line-height:1.25}
.fm-related-card span{display:block;color:var(--fm-muted);font-size:12px;line-height:1.48}
.fm-related-card .fm-related-arrow{margin-top:12px;color:var(--fm-amber);font:600 10px/1 var(--fm-mono,ui-monospace,monospace);letter-spacing:.04em}
@media(max-width:760px){
  .fm-related-labs{width:calc(100% - 24px);margin-top:34px}
  .fm-related-grid{grid-template-columns:1fr}
  .fm-related-head{align-items:start}
}


/* Descriptive page H1s: the brand wordmark stays visible, and the H1 also
   names the subject so search results and screen readers get a real title.
   The separator only exists in the text content (" — "). */
.fm-h1-sep{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.fm-h1{margin:0;font:inherit;display:flex;flex-direction:column;justify-content:center;min-width:0}
.fm-h1-brand{display:block}
.fm-h1-subject{
  display:block;
  margin-top:3px;
  color:var(--fm-muted);
  font:500 10.5px/1.25 var(--fm-mono);
  letter-spacing:.02em;
  text-transform:none;
  white-space:normal;
}

/* Compact instrument rails. */
body[data-fm-project="bus_protocols"] .fm-h1-subject{white-space:nowrap}
body[data-fm-project="scope"] .fm-h1-subject{max-width:170px;margin-top:2px;font-size:9.5px;line-height:1.2}
body[data-fm-project="smith-charts"] .fm-h1-subject{font-size:11px;color:var(--ink3);letter-spacing:.03em}
body[data-fm-project="rf-filters"] .fm-h1-subject{margin-top:2px;font-size:9.5px;color:var(--fm-dim);letter-spacing:.06em}
body[data-fm-project="optics"] h1.brand{margin:0;font-size:inherit;font-weight:400;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
body[data-fm-project="optics"] h1.brand .fm-h1-subject{margin:0;font-size:9.5px;letter-spacing:.01em;color:var(--dim)}

/* Large editorial masthead. */
body[data-fm-project="fpga-timing"] h1 .fm-h1-subject{
  margin-top:.75em;
  font-size:clamp(13px,1.5vw,19px);
  line-height:1.3;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* High-speed PCB: the sidebar brand is the page H1; keep it on phones too. */
body[data-fm-project="high_speed_pcb"] .brand-title{margin:0;font:inherit;color:inherit}
body[data-fm-project="high_speed_pcb"] .brand-title .brand-name,
body[data-fm-project="high_speed_pcb"] .brand-title .brand-sub{display:block}
body[data-fm-project="high_speed_pcb"] .brand-title .brand-sub{text-transform:uppercase}
@media(max-width:700px){
  body[data-fm-project="high_speed_pcb"] .brand-block{display:flex!important;justify-content:flex-start;height:auto;min-height:0;padding:12px}
  body[data-fm-project="high_speed_pcb"] .brand-title .brand-sub{white-space:normal;letter-spacing:.08em}
  body[data-fm-project="high_speed_pcb"] .brand-block>div:last-child{display:block!important}
  body[data-fm-project="high_speed_pcb"] .brand-symbol{display:none}
}



/* =====================================================================
   ferronato.me labs — shared visual identity
   ---------------------------------------------------------------------
   Type:    display = Newsreader (page brand, section titles)
            UI/body = IBM Plex Sans
            labels, readouts, numbers = IBM Plex Mono
   Colour:  charcoal surfaces, warm ink, amber as the single UI accent.
   Shapes:  controls 6px radius / 30px tall, panels 8px radius, 1px rules.
   Pattern: header bar  → panel gradient, 1px rule, brand left, actions right
            tabs        → Plex Sans 13px muted; active = ink + 2px amber underline
            buttons     → panel fill, 1px rule; hover = strong rule;
                          on/pressed = amber-soft fill + amber line + amber text;
                          primary = amber fill + amber-ink text
            chips       → Plex Mono 11px, 1px rule, pill
            kickers     → Plex Mono 10.5px, uppercase, .12em tracking, amber or dim
            inputs      → sunk fill, 1px rule, amber focus ring
   Labs restyle their own selectors to this pattern in <lab>/theme.css.
   The rules below are deliberately low-specificity (:where) defaults.
   ===================================================================== */
body[data-fm-project]{font-family:var(--fm-sans);-webkit-font-smoothing:antialiased}
body[data-fm-project] ::selection{background:var(--fm-amber);color:var(--fm-amber-ink)}
:where(body[data-fm-project]) :where(button,select,input,textarea){font-family:inherit}
:where(body[data-fm-project]) :where(input[type="range"],input[type="checkbox"],input[type="radio"],progress){accent-color:var(--fm-amber)}
:where(body[data-fm-project]) :where(button,select,input,textarea,a,[tabindex]):focus-visible{outline:2px solid var(--fm-amber);outline-offset:2px}
:where(body[data-fm-project]) :where(code,kbd,samp,.mono){font-family:var(--fm-mono)}
body[data-fm-project]{scrollbar-color:var(--fm-rule-strong) transparent}

/* No old page colour behind the body when overscrolling. */
html:has(body[data-fm-project]){background:var(--fm-bg)}


/* =====================================================================
   ferronato.me labs — shared page shell (hero → animation → tabs → panel)
   ---------------------------------------------------------------------
   Every lab is laid out the same way, in this order:
     1. .fm-breadcrumb-bar
     2. header.fm-hero      masthead (kicker, serif title, subject, lede)
                            + .fm-hero-fig: full-width live animation strip
     3. nav.fm-tabs         sticky tab row, always ABOVE the content
        nav.fm-subtabs      optional second row of lighter chips
     4. main + panels       one tab panel visible at a time
     5. .fm-related-labs, footer
   portfolio-shell.js provides the tab controller and the hero canvas
   runner. Labs that already own their tab logic only use the CSS.
   ===================================================================== */
.fm-wrap{box-sizing:border-box;width:min(1200px,calc(100% - 40px));margin:0 auto}

/* ---------- hero ---------- */
.fm-hero{position:relative;padding:38px 0 0;font-family:var(--fm-sans);color:var(--fm-ink)}
.fm-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(1000px 520px at 68% -12%,rgba(242,182,84,.05),transparent 62%);
}
.fm-masthead{display:grid;gap:18px;max-width:1000px}
.fm-kicker{margin:0;color:var(--fm-amber);font:600 10.5px/1.2 var(--fm-mono);letter-spacing:.13em;text-transform:uppercase}
.fm-hero h1,.fm-hero .fm-title{
  margin:0;
  font-family:var(--fm-serif);font-weight:400;font-stretch:100%;
  font-size:clamp(46px,8.4vw,112px);line-height:.88;letter-spacing:-.02em;
  color:var(--fm-ink);
}
.fm-hero h1 .fm-h1-brand{display:block}
.fm-hero h1 .fm-h1-subject{
  display:block;margin-top:.7em;
  color:var(--fm-muted);
  font:500 clamp(12px,1.4vw,17px)/1.3 var(--fm-mono);
  letter-spacing:.07em;text-transform:uppercase;
}
.fm-lede{margin:0;max-width:62ch;color:var(--fm-muted);font:400 17.5px/1.55 var(--fm-sans)}
.fm-lede strong{color:var(--fm-ink);font-weight:600}
.fm-hero-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* The animation strip: a 1px rule above, the canvas, a legend row below. */
.fm-hero-fig{
  position:relative;margin:28px 0 0;
  border-top:1px solid var(--fm-rule-strong);
  border-bottom:1px solid var(--fm-rule);
  padding:10px 0 6px;
  overflow:hidden;
}
.fm-hero-fig.fm-flush{border-left:0;border-right:0}
.fm-hero-cv{display:block;width:100%;height:clamp(220px,34vh,360px);touch-action:manipulation}
.fm-hero-cv.fm-short{height:clamp(170px,26vh,260px)}
.fm-hero-fig svg{display:block;width:100%;height:auto}
.fm-hero-fig figcaption,.fm-hero-caption{margin:10px 0 0;color:var(--fm-dim);font:400 13px/1.5 var(--fm-sans);max-width:70ch}
.fm-hero-key{display:flex;flex-wrap:wrap;gap:6px 22px;margin:12px 0 0;color:var(--fm-muted);font:400 13px/1.4 var(--fm-sans)}
.fm-hero-key span{display:inline-flex;align-items:center;gap:8px}
.fm-hero-key i{display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--fm-amber)}
.fm-hero-key i.dot{width:9px;height:9px;border-radius:50%}
.fm-hero-key i.hatch{height:10px;width:14px;background:repeating-linear-gradient(45deg,var(--fm-amber) 0 1.5px,transparent 1.5px 5px);border:1px solid var(--fm-amber)}
.fm-hero-foot{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:flex-start;justify-content:space-between}
.fm-hero-chips{position:absolute;right:0;top:14px;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.fm-chip{
  display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;
  border:1px solid var(--fm-rule);border-radius:999px;
  background:color-mix(in srgb,var(--fm-panel) 80%,transparent);
  color:var(--fm-muted);font:500 11px/1 var(--fm-mono);letter-spacing:.02em;white-space:nowrap;
}
.fm-chip b{color:var(--fm-ink);font-weight:500}
.fm-chip.amber{color:var(--fm-amber);border-color:var(--fm-amber-line);background:var(--fm-amber-soft)}

/* ---------- tab row (always directly under the hero) ---------- */
.fm-tabs{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--fm-bg) 90%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--fm-rule);
  font-family:var(--fm-sans);
}
.fm-tabs .fm-wrap,.fm-tabs .fm-tablist{display:flex;align-items:center;gap:2px}
.fm-tabs .fm-tablist{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:0}
.fm-tabs .fm-tablist::-webkit-scrollbar{display:none}
.fm-tabs .fm-tablist.fm-overflow-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.fm-tabs .fm-tablist.fm-overflow-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.fm-tabs .fm-tablist.fm-overflow-l.fm-overflow-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.fm-tabs .fm-tablist>*{flex:0 0 auto}
.fm-tabs [role="tab"],.fm-tabs .fm-tab{
  display:inline-flex;align-items:center;gap:7px;
  margin:0;padding:13px 10px 11px;border:0;border-bottom:2px solid transparent;border-radius:6px 6px 0 0;
  background:none;color:var(--fm-muted);
  font:500 13px/1.2 var(--fm-sans);white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:color .15s ease,background .15s ease,border-color .15s ease;
}
.fm-tabs [role="tab"] .n,.fm-tabs .fm-tab .n{font:500 11px/1 var(--fm-mono);color:var(--fm-dim)}
.fm-tabs [role="tab"] .ti,.fm-tabs .fm-tab .ti{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fm-tabs [role="tab"]:hover,.fm-tabs .fm-tab:hover{color:var(--fm-ink);background:rgba(255,255,255,.03)}
.fm-tabs [role="tab"].on,.fm-tabs [role="tab"].is-on,.fm-tabs [role="tab"][aria-selected="true"],
.fm-tabs .fm-tab.on,.fm-tabs .fm-tab.is-on,.fm-tabs .fm-tab[aria-selected="true"],.fm-tabs .fm-tab[aria-current]{
  color:var(--fm-ink);border-bottom-color:var(--fm-amber);background:var(--fm-amber-soft);
}
.fm-tabs [role="tab"].on .n,.fm-tabs [role="tab"][aria-selected="true"] .n,.fm-tabs .fm-tab.is-on .n,.fm-tabs .fm-tab.on .n{color:var(--fm-amber)}
.fm-tabs [role="tab"]:focus-visible,.fm-tabs .fm-tab:focus-visible{outline:2px solid var(--fm-amber);outline-offset:-2px}
/* actions parked at the right end of the tab row (export, theme, …) */
.fm-tabs .fm-tab-actions{display:flex;align-items:center;gap:6px;margin-left:auto;padding-left:12px;flex:0 0 auto}
.fm-tabs .fm-tab-actions .fm-chip,.fm-tabs .fm-tab-actions button,.fm-tabs .fm-tab-actions a{cursor:pointer}
.fm-tabs .fm-tab-readout{color:var(--fm-dim);font:500 11px/1.3 var(--fm-mono);white-space:nowrap;padding:0 8px}

/* ---------- sub-tabs: lighter second row of chips inside a panel ---------- */
.fm-subtabs{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--fm-rule);
  font-family:var(--fm-sans);
}
.fm-subtabs .fm-subgroup{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;margin-right:10px}
.fm-subtabs .fm-sublabel{color:var(--fm-dim);font:600 10px/1 var(--fm-mono);letter-spacing:.13em;text-transform:uppercase;margin:0 4px 0 0}
.fm-subtabs [role="tab"],.fm-subtabs .fm-subtab,.fm-subtabs button{
  display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 11px;
  border:1px solid var(--fm-rule);border-radius:999px;background:var(--fm-panel);
  color:var(--fm-muted);font:500 12px/1 var(--fm-sans);white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:color .15s ease,background .15s ease,border-color .15s ease;
}
.fm-subtabs [role="tab"] small,.fm-subtabs button small{color:var(--fm-dim);font:500 10.5px/1 var(--fm-mono)}
.fm-subtabs [role="tab"]:hover,.fm-subtabs .fm-subtab:hover,.fm-subtabs button:hover{color:var(--fm-ink);border-color:var(--fm-rule-strong)}
.fm-subtabs [role="tab"].on,.fm-subtabs [role="tab"].is-on,.fm-subtabs [role="tab"][aria-selected="true"],
.fm-subtabs .fm-subtab.on,.fm-subtabs .fm-subtab.is-on,.fm-subtabs button.on,.fm-subtabs button.is-on,.fm-subtabs button[aria-pressed="true"]{
  color:var(--fm-amber);background:var(--fm-amber-soft);border-color:var(--fm-amber-line);
}
.fm-subtabs [role="tab"].is-on small,.fm-subtabs button.is-on small{color:var(--fm-amber)}

/* ---------- panels ---------- */
/* Off-screen rather than display:none so canvases keep their layout size and
   animation loops keep their geometry. Used by the shell controller. */
.fm-panels{position:relative}
.fm-tabpanel-off{position:absolute!important;left:-200vw!important;top:0!important;width:100%!important;max-height:0!important;overflow:hidden!important;visibility:hidden!important;pointer-events:none!important}
.fm-tabpanel-on{position:relative;left:auto;visibility:visible;pointer-events:auto}
@media (prefers-reduced-motion:no-preference){.fm-tabpanel-on>.fm-sec-head,.fm-tabpanel-on>.wrap>.sec-head{animation:fm-fade .35s ease-out}}
@keyframes fm-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Previous / next pager at the end of a panel. */
.fm-pager{display:flex;justify-content:space-between;gap:16px;margin:40px 0 0;padding:18px 0 0;border-top:1px solid var(--fm-rule-strong);font-family:var(--fm-sans)}
.fm-pager a{display:flex;flex-direction:column;gap:5px;color:var(--fm-ink);text-decoration:none;max-width:48%}
.fm-pager a.nx{margin-left:auto;text-align:right;align-items:flex-end}
.fm-pager a small{color:var(--fm-dim);font:500 10.5px/1 var(--fm-mono);letter-spacing:.12em;text-transform:uppercase}
.fm-pager a span{font-family:var(--fm-serif);font-size:19px;line-height:1.2}
.fm-pager a:hover span{color:var(--fm-amber)}

@media(max-width:760px){
  .fm-wrap{width:calc(100% - 28px)}
  .fm-hero{padding-top:26px}
  .fm-masthead{gap:14px}
  .fm-hero h1,.fm-hero .fm-title{font-size:clamp(40px,12vw,64px)}
  .fm-lede{font-size:16px}
  .fm-hero-cv{height:clamp(190px,30vh,260px)}
  .fm-hero-chips{position:static;justify-content:flex-start;margin-top:10px}
  .fm-tabs [role="tab"],.fm-tabs .fm-tab{padding:12px 9px 10px;font-size:12.5px}
  .fm-tabs .fm-tab-readout{display:none}
}