/* =============================================================================
   ReLEAF: Dry Lab Notebook
   -----------------------------------------------------------------------------
   The page opens on DRY LAB spelled in the team's own photographs, then the
   season on one screen (every dry lab pipeline against the weeks, with what
   crossed to the wet lab), then Felix Yu's board, the written record and the
   photo log behind one toolbar.

   Two styles. Clean is the default: white, one typeface (the wiki's Inter),
   one label style, pipeline colours only where they carry meaning. Notebook
   is Felix's ruled paper, kept as an option; it redefines tokens and a few
   typefaces, nothing structural.

   Everything is scoped to .fx so the wiki's nav, page navigation and footer
   keep tokens.css.
   ========================================================================== */

/* ============================================================
   TOKENS: Clean
   ============================================================ */
.fx{
  --paper:#ffffff;
  --panel:#ffffff;
  --panel-2:#f5f6f4;
  --ink:#171717;
  --ink-2:#333333;
  --ink-3:#525252;
  --ink-4:#6b6b6b;
  --rule:#dfe2dd;
  --rule-2:#edefeb;
  --feint:rgba(0,0,0,.035);
  --red:#b3401f;
  --red-ink:#9a3d22;
  --red-wash:rgba(179,64,31,.28);
  --accent:#23684a;
  --accent-ink:#1b573d;
  --accent-wash:rgba(35,104,74,.08);
  --shadow:0 1px 2px rgba(0,0,0,.05),0 16px 40px -14px rgba(0,0,0,.2);
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-photo:0 1px 2px rgba(0,0,0,.12),0 6px 14px -8px rgba(0,0,0,.28);
  --node-face:#ffffff;
  --wet:#1f6f9a;
  --wet-wash:rgba(31,111,154,.055);
  --focus:#23684a;
  --mat:#ffffff;
  --star:#f2c14e;
  --star-shadow:rgba(0,0,0,.55);

  --scrim:rgba(12,14,13,.94);
  --scrim-ink:#f2f3f1;
  --scrim-ink-2:#a9aea8;
  --scrim-well:#0b0c0b;
  --scrim-btn:rgba(0,0,0,.42);
  --scrim-btn-hover:rgba(0,0,0,.72);
  --scrim-edge:rgba(255,255,255,.22);
  --scrim-lift:0 24px 60px -12px rgba(0,0,0,.7);
  --badge:rgba(20,20,20,.72);
  --badge-ink:#ffffff;

  /* Pipeline hues shift toward the ink so small coloured text clears 4.5:1. */
  --lift:0%;
  --tlift:32%;
  --towards:#000;

  --beam-a:.05;
  --beam-b:.01;
  --radius-panel:12px;
  --radius-card:12px;
  --radius-photo:4px;
  --spine:rule;

  --space-3xs:4px; --space-2xs:8px; --space-xs:12px; --space-sm:16px; --space-md:20px;
  --space-lg:24px; --space-xl:32px; --space-2xl:40px; --space-3xl:48px; --space-4xl:64px;

  --ease-out:cubic-bezier(.2,.7,.3,1);
  --ease-in-out:cubic-bezier(.5,0,.3,1);
  --dur-fast:140ms; --dur-mid:200ms; --dur-slow:260ms;

  /* One family. The two variables exist so the Notebook style can swap in
     its pen and its typewriter without touching a rule below. */
  --sans:var(--font-body,"Inter",system-ui,sans-serif);
  --label:var(--sans);
  --hand:var(--sans);

  /* Board metrics are solved at runtime by fitMetrics(); these are fallbacks. */
  --rail:96px; --lane:90px; --row:64px; --gap:36px; --wetw:150px; --headh:86px;
  --tbh:0px;

  display:block;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* ============================================================
   NOTEBOOK: Felix's ruled paper, one pen per pipeline. Nothing
   is rounded, the spine is inked by hand.
   ============================================================ */
.fx[data-skin="notebook"]{
  --paper:#ece4cf;
  --panel:#f8f4e7;
  --panel-2:#efe7d2;
  --ink:#1b2636;
  --ink-2:#31425a;
  --ink-3:#3f5068;
  --ink-4:#4c5a70;
  --rule:#c3b69c;
  --rule-2:#d9cfb6;
  --feint:rgba(76,104,140,.15);
  --red:#bb4a3c;
  --red-ink:#9a3427;
  --red-wash:rgba(187,74,60,.34);
  --accent:#2f5fa8;
  --accent-ink:#20477f;
  --accent-wash:rgba(47,95,168,.10);
  --shadow:0 1px 2px rgba(60,44,20,.16),0 14px 30px -18px rgba(60,44,20,.42);
  --shadow-sm:0 1px 2px rgba(60,44,20,.14);
  --shadow-photo:0 1px 2px rgba(60,44,20,.22),0 7px 14px -8px rgba(60,44,20,.34);
  --node-face:#f8f4e7;
  --wet:#1d6480;
  --wet-wash:rgba(29,100,128,.07);
  --focus:#bb4a3c;
  --mat:#fbf8ee;
  --star:#c9962c;
  --scrim:rgba(28,23,16,.94);
  --scrim-ink:#f2ecdc;
  --scrim-ink-2:#b0a58c;
  --scrim-well:#171310;
  --radius-panel:0px; --radius-card:0px; --radius-photo:0px;

  --p0-dataphys:#a8365c; --p0-wiki:#5b6169;   --p0-chamber:#5f7d2e; --p0-hydro:#2f7d63;
  --p0-math:#2f5fa8;     --p0-gis:#20718c;    --p0-circuit:#5a4bb0; --p0-reactor:#b0601a;
  --p0-photo:#a83e2c;    --p0-lpa:#96731a;    --p0-fluor:#7a5a3c;   --p0-protect:#7c3ea8;
  --p0-codon:#9c3182;    --p0-twin:#3d6e5a;

  --tlift:30%;
  --spine:ink;
  --label:"Special Elite","Courier New",Courier,ui-monospace,monospace;
  --hand:"Caveat","Segoe Print","Bradley Hand","Segoe Script",ui-rounded,cursive;

  background-color:var(--paper);
  background-image:repeating-linear-gradient(180deg,transparent 0 27px,var(--feint) 27px 28px);
}

.fx *,.fx *::before,.fx *::after{box-sizing:border-box}
.fx :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.fx a{color:var(--accent-ink)}
.fx img{max-width:none}
.fx .off{display:none !important}

.fx .wrap{max-width:1440px;margin:0 auto;padding:0 var(--space-xl) var(--space-3xl);position:relative;z-index:1}

/* The one small-label style on the page: section kickers, toolbar labels,
   the record's field names. */
.fx .lbl,.fx .tb-label{
  display:block;margin:0;
  font-family:var(--label);font-size:11.5px;font-weight:600;line-height:1.3;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
}
.fx[data-skin="notebook"] :is(.lbl,.tb-label){font-weight:400;letter-spacing:.04em}

/* ============================================================
   HERO: the mosaic, then title and where things stand
   ============================================================ */
.fx .hero{padding:var(--space-lg) 0 var(--space-2xl)}
.fx .eyebrow{
  display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin:0 0 var(--space-sm);
  font-size:13px;color:var(--ink-3);
}
.fx .eyebrow a{color:inherit;text-decoration:none}
.fx .eyebrow a:hover{text-decoration:underline}
.fx .eyebrow .sep{color:var(--ink-4);opacity:.5}

/* A sheet of squared paper; the letters are the squares that got a photo. */
.fx .mosaic{--cols:27;--rows:7}
.fx .mosaic__grid{
  position:relative;display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),auto);
  width:100%;margin:0;
  background-color:#fbfcfa;
  background-image:
    linear-gradient(90deg,var(--rule-2) 1px,transparent 1px),
    linear-gradient(180deg,var(--rule-2) 1px,transparent 1px);
  background-size:calc(100% / var(--cols)) calc(100% / var(--rows));
  border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
}
.fx[data-skin="notebook"] .mosaic__grid{background-color:transparent}
.fx .mosaic__grid::before{content:"";grid-column:1;grid-row:1;aspect-ratio:1}
.fx .mosaic__cell{aspect-ratio:1;grid-row:var(--r);grid-column:var(--c)}
.fx .mosaic__leaf{grid-row:var(--r);grid-column:var(--c);aspect-ratio:1;display:flex;align-items:center;justify-content:center;color:var(--accent);opacity:.16;pointer-events:none}
.fx .mosaic__leaf svg{width:44%;height:44%}
.fx .tile{
  grid-row:var(--r);grid-column:var(--c);position:relative;z-index:1;aspect-ratio:1;
  margin:0;padding:0;border:0;background:var(--panel-2);cursor:zoom-in;overflow:hidden;
  opacity:0;transform:translate(var(--fx,0),var(--fy,0)) rotate(var(--fr,0deg)) scale(.35);
  transition:transform 700ms var(--ease-out) var(--d,0ms),opacity 400ms ease var(--d,0ms),box-shadow var(--dur-fast) ease;
}
.fx .tile img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity 180ms ease}
.fx .mosaic.is-in .tile{opacity:1;transform:none}
/* Picked up off the sheet: the hovered photo lifts and grows. */
.fx .mosaic.is-in .tile:is(:hover,:focus-visible){
  z-index:5;transform:scale(1.9);transition-delay:0ms;transition-duration:220ms;
  box-shadow:0 2px 4px rgba(0,0,0,.18),0 14px 30px -8px rgba(0,0,0,.45);
  outline:3px solid #fff;outline-offset:0;
}
.fx .mosaic.is-in .tile.flip{animation:tile-flip 520ms var(--ease-in-out)}
@keyframes tile-flip{0%{transform:none}50%{transform:rotateY(90deg) scale(.92)}100%{transform:none}}
.fx .mosaic__bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
  margin:10px 0 0;min-height:34px;
}
.fx .mosaic__cap{margin:0;font-size:14px;color:var(--ink-3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx .mosaic__cap b{color:var(--ink);font-weight:600}
.fx .mosaic__cap .pc{font-weight:600}
.fx .mosaic__shuffle{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);
  padding:6px 13px;border:1px solid var(--rule);border-radius:999px;background:var(--panel);cursor:pointer;
}
.fx .mosaic__shuffle svg{width:15px;height:15px}
.fx .mosaic__shuffle:hover{border-color:var(--ink-4);color:var(--ink)}
.fx[data-skin="notebook"] .mosaic__shuffle{border-radius:0;font-family:var(--label);font-weight:400;font-size:12.5px}

.fx .intro{
  display:grid;gap:var(--space-xl) var(--space-3xl);grid-template-columns:minmax(0,1fr);
  margin-top:var(--space-2xl);align-items:start;
}
.fx h1{
  margin:0;font-family:var(--sans);font-weight:700;font-size:clamp(36px,4.2vw,56px);
  line-height:1.04;letter-spacing:-.025em;color:var(--ink);
}
.fx[data-skin="notebook"] h1{font-family:var(--hand);font-size:clamp(46px,5.6vw,72px);letter-spacing:0;line-height:.95}
.fx .intro__dates{margin:10px 0 0;font-size:17px;font-weight:600;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.fx .lede{margin:var(--space-md) 0 0;font-size:17.5px;line-height:1.62;color:var(--ink-2)}

/* Where the notebook is: the season as one line, then the latest week and
   what is still to come. */
.fx .now{border:1px solid var(--rule);border-radius:var(--radius-panel);padding:var(--space-md) var(--space-md) var(--space-sm);background:var(--panel)}
.fx .now__title{margin:0;font-size:16px;font-weight:650;color:var(--ink);letter-spacing:-.005em}
.fx[data-skin="notebook"] .now__title{font-family:var(--hand);font-size:26px;font-weight:600}
.fx .now__track{position:relative;height:58px;margin:14px 4px 6px}
.fx .now__line{position:absolute;left:0;right:0;top:22px;height:4px;border-radius:4px;background:var(--rule-2)}
.fx .now__done{position:absolute;left:0;top:22px;height:4px;border-radius:4px;background:var(--accent)}
.fx .now__plan{position:absolute;top:22px;height:4px;background:repeating-linear-gradient(90deg,var(--accent) 0 4px,transparent 4px 7px);opacity:.55}
.fx .now__mk{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font-size:12px;line-height:1.2;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.fx .now__mk i{display:block;width:12px;height:12px;border-radius:50%;margin:16px 0 6px;background:var(--panel);border:2px solid var(--ink-4)}
.fx .now__mk.is-start{transform:none;align-items:flex-start}
.fx .now__mk.is-start i{margin-left:-2px}
.fx .now__mk.is-end{transform:translateX(-100%);align-items:flex-end}
.fx .now__mk.is-end i{border-color:var(--red);margin-right:-2px}
.fx .now__mk.is-today{color:var(--accent-ink);font-weight:600}
.fx .now__mk.is-today i{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash)}
.fx .now__mk.is-end{color:var(--red-ink)}
.fx .now__mk span{position:absolute;top:0}
.fx .now__mk.is-start span{left:0}
.fx .now__mk.is-end span{right:0}
.fx .now__mk.is-today span{top:auto;bottom:-2px;transform:translateY(100%)}
.fx .now__cols{display:grid;gap:var(--space-sm) var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:var(--space-md);padding-top:var(--space-sm);border-top:1px solid var(--rule-2)}
.fx .now__list{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.fx .now__list li{display:flex;gap:9px;align-items:baseline;font-size:14px;line-height:1.42;color:var(--ink-2)}
.fx .now__list li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--c,var(--ink-4));transform:translateY(-1px)}
.fx .now__list li.is-plan::before{background:none;border:1.5px dashed var(--c,var(--ink-4))}
.fx .now__list button{font:inherit;color:inherit;text-align:left;background:none;border:0;padding:0;cursor:pointer}
.fx .now__list button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.fx .now__list .w{color:var(--ink-4);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ============================================================
   SECTION HEADS
   ============================================================ */
.fx .sec-head{display:grid;gap:6px var(--space-2xl);grid-template-columns:minmax(0,1fr);align-items:end;margin-bottom:var(--space-md)}
@media (min-width:980px){.fx .sec-head{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}}
.fx .sec-head h2,.fx .record-head h2{margin:0;font-size:clamp(24px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.fx .sec-head p,.fx .record-head p{margin:0;max-width:72ch;font-size:15px;line-height:1.55;color:var(--ink-3)}
.fx[data-skin="notebook"] :is(.sec-head h2,.record-head h2){font-family:var(--hand);font-size:40px;font-weight:600;letter-spacing:0;line-height:1}

/* ============================================================
   SEASON TIMELINE
   ============================================================ */
.fx .season{padding-top:var(--space-xl);border-top:1px solid var(--rule)}
.fx .tl{position:relative}
.fx .tl__labels{position:absolute;left:0;top:0;z-index:4;background:var(--paper);box-shadow:8px 0 10px -8px rgba(0,0,0,.18)}
.fx .tl__labels svg{display:block}
.fx .tl__scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.fx .tl svg{display:block;font-family:var(--sans);overflow:visible}
.fx .tl .t-lab{font-size:12.5px;fill:var(--ink-2)}
.fx .tl .t-grp{font-size:10.5px;font-weight:650;letter-spacing:.08em;fill:var(--ink-4);text-transform:uppercase}
.fx .tl .t-wet{fill:var(--wet)}
.fx .tl .t-mon{font-size:12px;font-weight:600;fill:var(--ink-3)}
.fx .tl .t-wk{font-size:9.5px;fill:var(--ink-4);font-variant-numeric:tabular-nums}
.fx .tl .t-flag{font-size:11.5px;font-weight:650}
.fx .tl .cell{cursor:pointer;transition:opacity var(--dur-fast) ease}
.fx .tl .cell:hover{stroke:var(--ink);stroke-width:1.5}
.fx .tl .row-bg{fill:transparent}
.fx .tl g.row:hover .row-bg,.fx .tl g.row.is-hot .row-bg{fill:var(--feint)}
.fx .tl .x-line{fill:none;transition:opacity var(--dur-fast) ease}
.fx .tl.is-focus .cell:not(.is-hot),.fx .tl.is-focus .x-line:not(.is-hot),.fx .tl.is-focus .x-dot:not(.is-hot){opacity:.18}
.fx .tl .x-dot,.fx .tl .x-ev{cursor:pointer}
.fx .tl__tip{
  position:absolute;z-index:30;left:0;top:0;pointer-events:none;opacity:0;
  width:max-content;max-width:300px;padding:9px 12px 10px;border-radius:8px;
  background:var(--ink);color:#fff;font-size:13px;line-height:1.4;box-shadow:var(--shadow);
  transform:translate(-50%,calc(-100% - 10px));transition:opacity 120ms ease;
}
.fx .tl__tip.on{opacity:1}
.fx .tl__tip b{display:block;font-size:12px;font-weight:600;color:var(--tc,#fff);filter:brightness(1.8) saturate(.8);margin-bottom:2px}
.fx .tl__tip small{display:block;margin-top:4px;color:#bdbdbd;font-size:11.5px}
.fx[data-skin="notebook"] .tl__tip{border-radius:0}
.fx .tl__key{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:var(--space-sm);font-size:13px;color:var(--ink-3)}
.fx .tl__key span{display:inline-flex;align-items:center;gap:8px}
.fx .tl__key svg{flex:none}
@media (max-width:760px){.fx .tl__key{font-size:12.5px;gap:6px 16px}}

/* ============================================================
   TOOLBAR: view, pipelines, search, style. Every control has a
   visible label, and the view switch looks like a switch.
   ============================================================ */
.fx .toolbar{
  position:relative;z-index:25;
  margin-top:var(--space-3xl);padding:14px 0 10px;
  background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
@media (min-width:1000px){
  .fx .toolbar{position:sticky;top:var(--nav-h,68px)}
  .fx .toolbar.is-stuck{box-shadow:0 10px 18px -16px rgba(0,0,0,.35);padding:8px 0}
  /* Once it sticks, the bar keeps only the controls, so it costs the page one slim row. */
  .fx .toolbar.is-stuck .tb-label,.fx .toolbar.is-stuck .tb-style{display:none}
  .fx .toolbar.is-stuck .tb-row--sub{margin-top:6px}
  .fx .toolbar.is-stuck .tb-row--sub:has(.tb-status:empty){display:none}
}
.fx .tb-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px}
.fx .tb-row--sub{align-items:center;justify-content:space-between;gap:8px 24px;margin-top:10px}
.fx .tb-group{display:flex;flex-direction:column;gap:6px;min-width:0}
.fx .tb-search{flex:1 1 200px;max-width:340px}
.fx .tb-style{flex-direction:row;align-items:center;gap:10px}
.fx .tb-status{flex:1 1 320px;margin:0;font-size:13.5px;color:var(--ink-3);min-height:1.3em}
.fx .tb-status b{color:var(--ink);font-weight:650}

.fx .seg{display:inline-flex;padding:3px;border:1px solid var(--rule);border-radius:10px;background:var(--panel-2);gap:2px}
.fx .seg__btn{
  display:inline-flex;align-items:center;gap:7px;
  font:inherit;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;
  padding:8px 14px;border:0;border-radius:7px;background:none;color:var(--ink-3);cursor:pointer;
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease,box-shadow var(--dur-fast) ease;
}
.fx .seg__btn svg{width:16px;height:16px;flex:none}
.fx .seg__btn:hover{color:var(--ink);background:rgba(0,0,0,.04)}
.fx .seg__btn[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 1px var(--rule)}
.fx .seg--sm .seg__btn{font-size:13px;padding:7px 11px}
.fx .seg__sw{width:13px;height:13px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);background:var(--s1)}

.fx .chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.fx .chip{
  display:inline-flex;align-items:center;gap:7px;
  font:inherit;font-size:13px;font-weight:500;line-height:1;white-space:nowrap;
  padding:8px 11px 8px 9px;border:1px solid var(--rule);border-radius:999px;background:var(--panel);color:var(--ink-2);cursor:pointer;
  transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease;
}
.fx .chip .gi{width:15px;height:15px;flex:none;color:var(--cc)}
.fx .chip:hover{border-color:var(--ink-4)}
.fx .chip[aria-pressed="true"]{border-color:color-mix(in srgb,var(--cc) 45%,transparent);background:color-mix(in srgb,var(--cc) 8%,var(--panel));color:var(--ink)}
.fx .chip[aria-pressed="false"]{color:var(--ink-4)}
.fx .chip[aria-pressed="false"] .gi{color:var(--ink-4);opacity:.6}
.fx .chip.chip--all{font-weight:600;color:var(--accent-ink);border-style:dashed}
.fx .chip .n{font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}

.fx .search-wrap{position:relative;display:block}
.fx .search-wrap svg{position:absolute;left:11px;top:50%;width:15px;height:15px;transform:translateY(-50%);color:var(--ink-4);pointer-events:none}
.fx .search{
  width:100%;font:inherit;font-size:14px;padding:8px 12px 8px 33px;
  border:1px solid var(--rule);border-radius:10px;background:var(--panel);color:var(--ink);
}
.fx .search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.fx .search::placeholder{color:var(--ink-4)}

.fx[data-skin="notebook"] :is(.seg,.seg__btn,.chip,.search){border-radius:0}
.fx[data-skin="notebook"] :is(.seg__btn,.chip,.search){font-family:var(--label);font-weight:400;font-size:12.5px}
.fx[data-skin="notebook"] .seg__sw{border-radius:0}

/* ============================================================
   THE BOARD
   ============================================================ */
.fx .boardframe{
  position:relative;margin-top:var(--space-lg);scroll-margin-top:calc(var(--nav-h,68px) + var(--tbh,0px) + 12px);border:1px solid var(--rule);background:var(--panel);
  box-shadow:var(--shadow-sm);border-radius:var(--radius-panel);
}
.fx .board{overflow:auto;height:min(80vh,1300px);position:relative;scrollbar-width:thin;border-radius:inherit}
.fx .nbgrid{position:relative}
.fx .beams{position:absolute;inset:var(--headh) 0 0 0;pointer-events:none;z-index:0}
.fx .beam{position:absolute;top:0;bottom:0;width:var(--lane)}
.fx .beam i{
  position:absolute;inset:0;display:block;
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--c) calc(var(--beam-a)*100%),transparent) 0%,
    color-mix(in srgb,var(--c) calc(var(--beam-b)*100%),transparent) 100%);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent);
}
.fx .wetband{position:absolute;top:0;background:var(--wet-wash);pointer-events:none;z-index:0}
.fx .planband{position:absolute;left:0;top:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(0,0,0,.022) 7px 8px)}
.fx .nowline{position:absolute;left:var(--rail);right:0;height:0;border-top:2px solid var(--accent);z-index:2;pointer-events:none}
.fx .nowline span{position:absolute;right:10px;top:-11px;padding:1px 8px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;line-height:1.6;letter-spacing:.02em}
.fx[data-skin="notebook"] .nowline span{border-radius:0;font-family:var(--label);font-weight:400}
.fx svg.links{position:absolute;left:0;top:var(--headh);pointer-events:none;z-index:1;overflow:visible}

.fx .heads{position:sticky;top:0;height:var(--headh);z-index:8;background:var(--panel);border-bottom:1px solid var(--rule)}
.fx .corner{
  position:sticky;left:0;top:0;width:var(--rail);height:var(--headh);z-index:9;
  background:var(--panel);border-right:1px solid var(--rule-2);
  display:flex;align-items:flex-end;padding:0 0 10px 14px;
  font-family:var(--label);font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);
}
.fx .head{
  position:absolute;top:0;height:var(--headh);width:var(--lane);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:10px;gap:5px;text-align:center;color:inherit;text-decoration:none;
}
a.head:hover .nm,a.head:hover .nmv{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.fx .head .gi{width:15px;height:15px;color:var(--c)}
.fx .head .nm{font-size:11px;font-weight:500;line-height:1.28;color:var(--ink-2);max-width:calc(var(--lane) - 6px)}
.fx .head .nmv{display:none}
.fx .head .bar{width:22px;height:2px;background:var(--c);border-radius:2px;opacity:.8}
.fx .compact .head .nm{display:none}
.fx .compact .head .nmv{display:block;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.fx .compact .head{gap:7px;padding-bottom:9px}
.fx .compact .head .gi{width:13px;height:13px}
.fx .compact .head .bar{width:16px}
.fx .head.wethead .nm,.fx .head.wethead .nmv{color:var(--wet);font-weight:600}
.fx .head.wethead .bar{background:var(--wet)}
.fx .head.wethead .sub{font-size:10.5px;color:var(--ink-4);line-height:1.2}

.fx .rail{position:sticky;left:0;width:var(--rail);z-index:6;background:var(--panel);border-right:1px solid var(--rule-2)}
.fx .railrow{
  position:absolute;left:0;width:var(--rail);height:var(--row);
  padding:9px 8px 0 14px;border:0;background:none;text-align:left;cursor:pointer;color:inherit;font:inherit;display:block;
}
.fx .railrow:hover .dt,.fx .railrow:focus-visible .dt{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.fx .railrow.pinned{background:var(--accent-wash)}
.fx .railrow .wk{font-size:10.5px;font-weight:600;letter-spacing:.05em;color:var(--ink-4);display:block;font-variant-numeric:tabular-nums}
.fx .railrow .dt{font-size:15px;font-weight:650;color:var(--ink);letter-spacing:-.01em;display:block;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums}
.fx .railrow .mo{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);display:block}
.fx .railrow .ev{position:absolute;right:9px;top:13px;width:9px;height:9px;background:var(--ink);transform:rotate(45deg)}
.fx .railrow.is-plan .dt{color:var(--ink-3);font-weight:500}
.fx .railrow.is-plan .mo{color:var(--ink-4)}
.fx .railrow .pl{display:block;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.fx .compact .railrow{padding:7px 6px 0 10px}
.fx .compact .railrow .dt{font-size:13.5px}

.fx .rowlines{position:absolute;left:var(--rail);top:var(--headh);right:0;pointer-events:none;z-index:0}
.fx .rowline{position:absolute;left:0;right:0;height:1px;background:var(--rule-2)}
.fx .rowline.mstart{background:var(--rule)}
.fx .wetwall{position:absolute;top:var(--headh);bottom:0;width:1px;background:var(--rule);z-index:1}

.fx .nodes{position:absolute;left:0;top:var(--headh);z-index:3}
.fx .node{
  position:absolute;width:var(--nodesz,44px);height:var(--nodesz,44px);
  margin:calc(var(--nodesz,44px) / -2) 0 0 calc(var(--nodesz,44px) / -2);
  border:0;background:none;padding:0;cursor:pointer;color:var(--c);
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-mid) var(--ease-out);
}
.fx .node svg{display:block;overflow:visible}
.fx .node .glyphfill{fill:var(--c)}
.fx .node .glyphface{fill:var(--node-face)}
.fx .node .glyphstroke{stroke:var(--c);fill:none;stroke-width:2}
.fx .node:hover,.fx .node:focus-visible{transform:scale(1.2);z-index:5}
@media (hover:none){.fx .node:hover{transform:none}}
.fx .node .pulse{fill:none;stroke:var(--c);stroke-width:1.5;opacity:0}
.fx .node.h3 .pulse{opacity:.35}
.fx .node.h2 .pulse{opacity:.18}
.fx .node.dim{opacity:.12;pointer-events:none}
.fx .halo{fill:none;opacity:0}
.fx .node.pinned .halo{fill:var(--c);opacity:.18}
.fx .node .cam{opacity:0}
.fx .node.haspix .cam{opacity:1}
.fx .node.kind-milestone{z-index:4}
.fx .node.kind-milestone svg{transform:scale(1.14)}
.fx .node.kind-plan{opacity:.85}
html:not(.ai-off) .fx .node.is-ai::after{
  content:"";position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:var(--ai-ink,#c2410c);
}
.fx .node.wetnode{color:var(--wet);width:auto;height:auto;margin:0;transform:translate(-50%,-50%)}
.fx .node.wetnode:hover,.fx .node.wetnode:focus-visible{transform:translate(-50%,-50%) scale(1.12)}
.fx .wetthumb{
  display:block;width:var(--wetthumb,44px);height:var(--wetthumb,44px);
  border-radius:var(--radius-photo);overflow:hidden;background:var(--mat);
  border:2px solid var(--mat);box-shadow:var(--shadow-photo);
  outline:2px solid var(--ring);outline-offset:-2px;
}
.fx .wetthumb img{width:100%;height:100%;object-fit:cover;display:block}
.fx .wetcnt{
  position:absolute;right:-5px;bottom:-5px;font-size:10px;font-weight:700;
  min-width:16px;height:16px;line-height:16px;text-align:center;padding:0 4px;
  border-radius:999px;background:var(--wet);color:#fff;
}
.fx .wetstate{
  position:absolute;transform:translateY(-50%);z-index:3;pointer-events:none;
  font-size:11.5px;font-weight:500;line-height:1.2;color:var(--wet);max-width:calc(var(--wetw) - 62px);
}
.fx .wetstate.open{color:var(--red-ink)}

.fx[data-skin="notebook"] .boardframe{box-shadow:0 1px 2px rgba(60,44,20,.18),0 18px 34px -22px rgba(60,44,20,.5)}
.fx[data-skin="notebook"] .rowline{background:var(--feint)}
.fx[data-skin="notebook"] .rowline.mstart{background:var(--rule)}
.fx[data-skin="notebook"] .rail{border-right:1px solid var(--red-wash)}
.fx[data-skin="notebook"] .railrow .dt{font-family:var(--hand);font-size:24px;font-weight:600;line-height:1.02}
.fx[data-skin="notebook"] .compact .railrow .dt{font-size:20px}
.fx[data-skin="notebook"] :is(.railrow .wk,.railrow .mo,.railrow .pl,.corner,.head .nm,.head .nmv,.wetstate,.wetcnt){font-family:var(--label);font-weight:400}
.fx[data-skin="notebook"] .railrow .mo{color:var(--red-ink)}
.fx[data-skin="notebook"] .head .bar{border-radius:0}
.fx[data-skin="notebook"] .node .glyphface{fill:var(--panel)}
.fx[data-skin="notebook"] .node .pulse{stroke-dasharray:2.2 3.2}
.fx[data-skin="notebook"] .wetcnt{border-radius:0}

.fx .hint{margin:12px 0 0;font-size:13px;color:var(--ink-4);display:flex;flex-wrap:wrap;gap:6px 24px}
.fx .hint kbd{font-family:inherit;font-size:11.5px;font-weight:600;border:1px solid var(--rule);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--panel);color:var(--ink-3)}
.fx[data-skin="notebook"] .hint{font-family:var(--label);font-size:12px}
.fx[data-skin="notebook"] .hint kbd{border-radius:0}

/* ============================================================
   CARD
   ============================================================ */
.fx .card{
  position:fixed;z-index:60;width:min(440px,calc(100vw - 28px));left:0;top:0;
  background:var(--panel);border:1px solid var(--rule);border-top:3px solid var(--c);border-radius:var(--radius-card);
  box-shadow:var(--shadow);opacity:0;transform:translateY(6px);pointer-events:none;visibility:hidden;overflow:hidden;
  transition:opacity var(--dur-mid) var(--ease-out),transform var(--dur-mid) var(--ease-out),visibility 0s linear var(--dur-mid);
}
.fx .card.on{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.fx .card.pin{pointer-events:auto}
.fx .card .inner{position:relative;z-index:1;padding:var(--space-md);max-height:min(72vh,640px);overflow-y:auto;overscroll-behavior:contain}
.fx .card .top{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}
.fx .card .pipe{font-size:13px;color:var(--ct,var(--c));display:flex;align-items:center;gap:7px;font-weight:650;text-decoration:none}
a.pipe:hover{text-decoration:underline !important}
.fx .card .pipe .gi{width:14px;height:14px;flex:none}
.fx .card .when{font-size:12px;font-weight:500;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.fx .card .kind{display:inline-flex;align-items:center;gap:5px;margin-top:12px;font-size:12px;font-weight:600;padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--c) 10%,transparent);color:var(--ct,var(--c))}
.fx .card .stage{display:block;margin-top:10px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.fx .card h3{font-weight:650;font-size:19px;line-height:1.3;letter-spacing:-.012em;margin:6px 0 0;text-wrap:balance;color:var(--ink)}
.fx .card .sum{margin:10px 0 0;color:var(--ink-2);font-size:14.5px;line-height:1.62}
.fx .card ul{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.fx .card li{position:relative;padding-left:16px;font-size:14px;line-height:1.52;color:var(--ink)}
.fx .card li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--c);opacity:.6}
.fx .card li ul{margin-top:4px}
.fx .card .csec{margin-top:var(--space-md);padding-top:var(--space-sm);border-top:1px solid var(--rule-2)}
.fx .card .csec h4{margin:0 0 8px;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.fx .card .dl{margin:0 0 12px}
.fx .card .dl:last-child{margin-bottom:0}
.fx .card .dl > b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.fx .card .dl ul{margin-top:4px;gap:3px}
.fx .card .dl li{font-size:13.5px;color:var(--ink-2)}
.fx .card .who{margin:0;font-size:14px;color:var(--ink-2)}
.fx .card .contrib{display:grid;gap:10px;margin:0;font-size:13.5px;padding:0}
.fx .card .contrib dt{font-weight:600;color:var(--ink)}
.fx .card .contrib dd{margin:0}
.fx .card .contrib ul{margin-top:2px;gap:2px}
.fx .card .links{margin:0;font-size:13.5px;color:var(--ink-2);overflow-wrap:anywhere}
.fx .card .state{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--wet);border:1px solid currentColor;padding:2px 10px;border-radius:999px}
.fx .card .state.open{color:var(--red-ink)}
.fx .card .jump{margin-top:12px;font-size:13.5px}
.fx .card .jump button{font:inherit;font-weight:600;color:var(--accent-ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.fx .card .foot{
  margin-top:var(--space-sm);padding-top:var(--space-xs);border-top:1px solid var(--rule-2);
  font-size:12.5px;color:var(--ink-4);display:flex;justify-content:space-between;gap:10px;align-items:center;
}
.fx .card .close{border:1px solid var(--rule);background:none;color:var(--ink-3);font:inherit;font-size:12.5px;font-weight:600;padding:4px 12px;border-radius:999px;cursor:pointer}
.fx .card .close:hover{color:var(--ink);border-color:var(--ink-4)}
.fx .tags{display:flex;flex-wrap:wrap;gap:6px}
.fx .tag{font-size:12px;padding:3px 10px;border-radius:999px;background:var(--panel-2);color:var(--ink-2)}

/* Notebook: an index card, ruled, the pipeline's sketch ghosted in. */
.fx[data-skin="notebook"] .card{border-radius:0;border:1px solid var(--ink-4);border-top:1px solid var(--ink-4);box-shadow:0 1px 2px rgba(60,44,20,.2),0 20px 40px -20px rgba(60,44,20,.55)}
.fx[data-skin="notebook"] .card::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0 53px,var(--red-wash) 53px 54px,transparent 54px),
             repeating-linear-gradient(180deg,transparent 0 25px,var(--feint) 25px 26px);
  background-position:0 0,0 54px;
}
.fx[data-skin="notebook"] .card::after{
  content:"";position:absolute;right:8px;bottom:6px;width:118px;height:118px;z-index:0;pointer-events:none;background:var(--c);opacity:.13;
  -webkit-mask-image:var(--sk);mask-image:var(--sk);-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:bottom right;mask-position:bottom right;
}
.fx[data-skin="notebook"] .card h3{font-family:var(--hand);font-size:29px;font-weight:600;line-height:1.05;letter-spacing:0}
.fx[data-skin="notebook"] :is(.card .pipe,.card .when,.card .kind,.card .state,.card .stage,.card .csec h4,.card .foot,.card .close,.tag){font-family:var(--label);font-weight:400}
.fx[data-skin="notebook"] :is(.card .kind,.card .state,.card .close,.tag){border-radius:0}
.fx[data-skin="notebook"] .card li::before{border-radius:0;transform:rotate(45deg)}
.fx[data-skin="notebook"] .card .inner::after{
  content:var(--note,"");display:block;margin-top:15px;
  font-family:var(--hand);font-size:21px;line-height:1.2;color:var(--red-ink);transform:rotate(-1.1deg);transform-origin:left center;opacity:.9;
}

/* Felix's one line of handwriting per pipeline, and his lane sketches. Notebook style only. */
.fx .card[data-pipe="chamber"] {--note:"airflow first. the heat map is the acceptance test."}
.fx .card[data-pipe="hydro"]   {--note:"germinate in the lid. 1 to 3 seeds a tube."}
.fx .card[data-pipe="math"]    {--note:"μ = μmax · S / (Ks + S)"}
.fx .card[data-pipe="gis"]     {--note:"stress is a map before it is a number."}
.fx .card[data-pipe="circuit"] {--note:"promoter → RBS → CDS → terminator"}
.fx .card[data-pipe="reactor"] {--note:"0.172 → 0.136 in the lumen. oxygenate."}
.fx .card[data-pipe="photo"]   {--note:"A = ε c l, then trust the OD600"}
.fx .card[data-pipe="lpa"]     {--note:"one well, one dose, one LED."}
.fx .card[data-pipe="fluor"]   {--note:"Fv/Fm = (Fm − Fo) / Fm"}
.fx .card[data-pipe="protect"] {--note:"LEA14: the 11-mer, three times over."}
.fx .card[data-pipe="codon"]   {--note:"CAI up. hairpins down. then order it."}
.fx .card[data-pipe="dataphys"]{--note:"make the number something you can hold."}
.fx .card[data-pipe="wiki"]    {--note:"rebuilt from the Discord date filter."}
.fx .card[data-pipe="wet"]     {--note:"sent it across. see what comes back."}
.fx .card[data-pipe="week"]    {--note:""}

/* Felix's lane sketches. On the card only. */
.fx .card[data-pipe="chamber"]{--sk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 192'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 44h56v72H14z'/%3E%3Cpath d='M14 44l10-12h56l-10 12M70 44l10-12v72l-10 12'/%3E%3Cpath d='M23 56h38'/%3E%3Cpath d='M28 56v6M37 56v6M46 56v6M55 56v6'/%3E%3Ccircle cx='28' cy='84' r='8'/%3E%3Cpath d='M28 76v16M20 84h16'/%3E%3Cpath d='M46 76q10 5 0 10M46 90q10 5 0 10'/%3E%3Cpath d='M26 104q7-11 14 0t14 0'/%3E%3Cpath d='M35 104v9M49 104v9'/%3E%3C/g%3E%3C/svg%3E")}
.fx .card[data-pipe="hydro"]{--sk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 192'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 60h76v18H10z'/%3E%3Cpath d='M24 60v-9h12v9M54 60v-9h12v9'/%3E%3Cpath d='M30 51q-6-9-1-14M30 51q7-7 3-13M60 51q-6-9-1-14M60 51q7-7 3-13'/%3E%3Cpath d='M30 78v14M27 84l-4 7M33 84l4 7M60 78v14M57 84l-4 7M63 84l4 7'/%3E%3Cpath d='M14 104h68v26H14z'/%3E%3Cpath d='M18 112q8-5 16 0t16 0 16 0 12 0'/%3E%3Cpath d='M86 78v26M10 78v26'/%3E%3Cpath d='M78 96l6 6-6 6'/%3E%3C/g%3E%3C/svg%3E")}
.fx .card[data-pipe="math"]{--sk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 192'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 40v82h68'/%3E%3Cpath d='M16 40l-4 6M16 40l4 6M84 122l-6-4M84 122l-6 4'/%3E%3Cpath d='M16 62h64' stroke-width='1.9'/%3E%3Cpath d='M18 116c14 0 20-2 26-16s10-36 24-38 14 0 14 0' stroke-width='3'/%3E%3Cpath d='M40 138h34M40 146h22' stroke-width='1.8'/%3E%3C/g%3E%3C/svg%3E")}
.fx .card[data-pipe="gis"]{--sk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 192'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 122c14-8 8-26 22-32s16 8 30 2 14-22 28-18'/%3E%3Cpath d='M12 104c12-7 8-20 20-25s16 7 27 2 12-17 25-14'/%3E%3Cpath d='M18 86c10-6 8-14 17-18s14 6 23 2 10-11 22-9'/%3E%3Cpath d='M26 70c8-5 8-9 14-11s11 4 18 1'/%3E%3Cpath d='M56 74c0-7-5-11-11-11s-11 4-11 11c0 8 11 21 11 21s11-13 11-21z' stroke-width='2.8'/%3E%3Ccircle cx='45' cy='74' r='4' stroke-width='2.4'/%3E%3C/g%3E%3C/svg%3E")}
.fx .card[data-pipe="circuit"]{--sk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 192'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='48' cy='88' r='34'/%3E%3Cpath d='M22 66h16v-9l10 9-10 9v-9' stroke-width='2.4'/%3E%3Ccircle cx='72' cy='72' r='5'/%3E%3Cpath d='M58 114h24l-6-7M82 114l-6 7' stroke-width='2.4'/%3E%3Cpath d='M20 102v14M14 116h12' stroke-width='2.4'/%3E%3C/g%3E%3C/svg%3E")}
.fx .card[data-pipe="reactor"]{--sk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 192'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 44h30v56a15 15 0 0 1-30 0z'/%3E%3Cpath d='M28 44h34'/%3E%3Cpath d='M45 44v34M36 78h18M39 84h12'/%3E%3Ccircle cx='36' cy='96' r='2.6' stroke-width='1.9'/%3E%3Ccircle cx='46' cy='103' r='2.6' stroke-width='1.9'/%3E%3Ccircle cx='54' cy='92' r='2.6' stroke-width='1.9'/%3E%3Cpath d='M60 58h18v56H60'/%3E%3Ccircle cx='78' cy='86' r='9'/%3E%3Cpath d='M78 77v18M69 86h18' stroke-width='1.9'/%3E%3Cpath d='M30 62H14v50h16'/%3E%3C/g%3E%3C/svg%3E")}
.fx .card[data-pipe="photo"]{--sk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 192'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 74h12v22H8z'/%3E%3Cpath d='M20 78l7 7-7 7' stroke-width='2.2'/%3E%3Cpath d='M34 58h26v56H34z'/%3E%3Cpath d='M34 76h26'/%3E%3Cpath d='M38 84q6-5 11 0t11 0' stroke-width='1.8'/%3E%3Cpath d='M38 94q6-5 11 0t11 0' stroke-width='1.8'/%3E%3Cpath d='M74 72h14v26H74z'/%3E%3Cpath d='M28 128h44v22H28z'/%3E%3C/g%3E%3C/svg%3E")}
.fx .card[data-pipe="lpa"]{--sk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 192'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 40h76v52H10z'/%3E%3Cg stroke-width='2'%3E%3Ccircle cx='24' cy='54' r='6'/%3E%3Ccircle cx='42' cy='54' r='6'/%3E%3Ccircle cx='60' cy='54' r='6'/%3E%3Ccircle cx='76' cy='54' r='6'/%3E%3Ccircle cx='24' cy='74' r='6'/%3E%3Ccircle cx='42' cy='74' r='6'/%3E%3Ccircle cx='60' cy='74' r='6'/%3E%3Ccircle cx='76' cy='74' r='6'/%3E%3C/g%3E%3Cpath d='M10 104h76v18H10z'/%3E%3Cpath d='M42 104l-9-12h18z' stroke-width='2.2'/%3E%3C/g%3E%3C/svg%3E")}
.fx .card[data-pipe="fluor"]{--sk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 192'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M46 42c14 4 22 16 20 30-16 2-26-10-20-30z'/%3E%3Cpath d='M46 42c2 14 8 22 20 30'/%3E%3Cpath d='M14 152v-40h68' stroke-width='2.4'/%3E%3Cpath d='M16 148c6 0 8-30 16-30s10 22 20 22 16-14 30-16' stroke-width='2.8'/%3E%3C/g%3E%3C/svg%3E")}
.fx .card[data-pipe="protect"]{--sk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 192'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 44c20 0 20 15 0 15s-20 15 0 15 20 15 0 15 20 15 0 15 20 15 0 15'/%3E%3Cpath d='M66 46v52l-8-6M66 98l8-6' stroke-width='2.8'/%3E%3Cpath d='M66 46l-7 8M66 46l7 8' stroke-width='2.2'/%3E%3Cpath d='M18 130h46' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E")}
.fx .card[data-pipe="codon"]{--sk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 192'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 40c26 12 26 30 0 42s-26 30 0 42'/%3E%3Cpath d='M70 40c-26 12-26 30 0 42s26 30 0 42'/%3E%3Cg stroke-width='1.9'%3E%3Cpath d='M28 52h36M24 62h44M24 74h44M28 84h36M28 96h36M24 106h44M24 118h44'/%3E%3C/g%3E%3Cg stroke-width='2.6'%3E%3Cpath d='M18 170v-12M28 170v-20M38 170v-8M48 170v-24M58 170v-14M68 170v-19M78 170v-6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.fx .card[data-pipe="dataphys"]{--sk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 192'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 118V78h16v40zM36 118V56h16v62zM56 118V92h16v26z'/%3E%3Cpath d='M16 78l7-8h16l-7 8M32 78l7-8v40l-7 8M36 56l7-8h16l-7 8M52 56l7-8v62l-7 8M56 92l7-8h16l-7 8M72 92l7-8v26l-7 8'/%3E%3Cpath d='M10 122h74' stroke-width='2.2'/%3E%3C/g%3E%3C/svg%3E")}
.fx .card[data-pipe="wiki"]{--sk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 192'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 40h72v100H12z'/%3E%3Cpath d='M12 58h72'/%3E%3Cpath d='M20 68h24v22H20z'/%3E%3Cpath d='M52 68h24M52 76h24M52 84h16' stroke-width='2'/%3E%3Cpath d='M20 102h56M20 112h56M20 122h34' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E")}
.fx .card[data-pipe="wet"]{--sk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 192'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M38 40v34L18 120a6 6 0 0 0 5 9h50a6 6 0 0 0 5-9L58 74V40'/%3E%3Cpath d='M34 40h28'/%3E%3Cpath d='M27 104h42'/%3E%3Ccircle cx='34' cy='113' r='2.6' stroke-width='1.9'/%3E%3Ccircle cx='48' cy='119' r='2.6' stroke-width='1.9'/%3E%3Ccircle cx='60' cy='111' r='2.6' stroke-width='1.9'/%3E%3C/g%3E%3C/svg%3E")}

/* ============================================================
   PHOTOS INSIDE CARDS
   ============================================================ */
.fx .shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2xs);margin-top:var(--space-sm)}
.fx .shots.n1{grid-template-columns:minmax(0,1fr)}
.fx .shots.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fx .shot-btn{
  position:relative;border:0;padding:0;background:var(--panel-2);cursor:zoom-in;
  overflow:hidden;aspect-ratio:4/3;display:block;width:100%;border-radius:var(--radius-photo);
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) ease;
}
.fx .shot-btn img{width:100%;height:100%;object-fit:cover;display:block}
.fx .shot-btn.fig img{object-fit:contain;background:#fff}
.fx .shot-btn:hover,.fx .shot-btn:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-photo);z-index:2}
.fx .shot-btn .star{position:absolute;left:5px;top:5px;width:13px;height:13px;filter:drop-shadow(0 1px 2px var(--star-shadow));color:var(--star)}
.fx .shotcap{margin:8px 0 0;font-size:12.5px;color:var(--ink-4)}
.fx[data-skin="notebook"] .shotcap{font-family:var(--label)}

/* ============================================================
   LEGEND
   ============================================================ */
.fx .legend{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-lg) var(--space-2xl);
  margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--rule);
}
.fx .legend h4{margin:0 0 12px;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.fx .legend ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.fx .legend li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}
.fx .legend li svg{flex:none}
.fx .legend .sw{width:10px;height:10px;border-radius:50%;flex:none}
.fx .legend .desc{font-size:12px;color:var(--ink-4);margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.fx .legend a{color:inherit}
.fx[data-skin="notebook"] .legend h4{font-family:var(--hand);font-size:24px;font-weight:600;letter-spacing:0;text-transform:none}
.fx[data-skin="notebook"] .legend .sw{border-radius:0}

/* ============================================================
   PHOTO LOG
   ============================================================ */
.fx .gallery{margin-top:var(--space-lg)}
.fx .galweek{border-top:1px solid var(--rule);padding:var(--space-lg) 0 var(--space-2xs)}
.fx .galweek h2{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:0 0 16px;font-size:20px;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.fx .galweek h2 span{font-size:13px;font-weight:500;color:var(--ink-4);letter-spacing:0}
.fx[data-skin="notebook"] .galweek h2{font-family:var(--hand);font-size:28px;font-weight:600}
.fx .galgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-lg) var(--space-md)}
.fx .galitem{display:flex;flex-direction:column;gap:8px;margin:0}
.fx .galitem .meta{display:flex;flex-direction:column;gap:3px}
.fx .galitem .cap{font-size:14px;line-height:1.45;color:var(--ink)}
.fx .galitem .sub{font-size:12px;color:var(--ink-4);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.fx .galitem .sub .pd{color:var(--ct,var(--ink-3));font-weight:600}
.fx[data-skin="notebook"] .galitem .sub{font-family:var(--label)}

/* ============================================================
   THE WRITTEN RECORD. Plain markup: reads with JavaScript off,
   and it is what prints.
   ============================================================ */
.fx .record{margin-top:var(--space-2xl)}
.fx :is(.record,.gallery){scroll-margin-top:calc(var(--nav-h,68px) + var(--tbh,0px) + 12px)}
.fx .record-head{display:grid;gap:6px;margin-bottom:var(--space-md)}
.fx .nbtop{display:grid;gap:var(--space-sm);grid-template-columns:minmax(0,1fr)}
@media (min-width:820px){.fx .nbtop{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.fx .nbcard{border:1px solid var(--rule);border-radius:var(--radius-panel);background:var(--panel);padding:var(--space-sm) var(--space-md)}
.fx .nbcard__title{margin:0 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.fx[data-skin="notebook"] .nbcard__title{font-family:var(--hand);font-size:25px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.fx .nbcard__cols{display:grid;gap:10px 28px;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.fx .nbcard__group{margin:0 0 4px;font-size:14px;font-weight:600;color:var(--ink-2)}
.fx .nbcard__aside{font-weight:400;color:var(--ink-3)}
.fx .nbcard ul{margin:0;padding-left:1.2em;font-size:14px}
.fx .nbcard li + li{margin-top:.2rem}
.fx .nbcard__when{font-size:12px;color:var(--ink-4);font-variant-numeric:tabular-nums}

.fx .mindex{
  position:sticky;top:calc(var(--nav-h,68px) + var(--tbh,0px));z-index:20;
  display:flex;align-items:center;gap:12px;margin:var(--space-lg) 0 0;padding:6px 10px;
  background:var(--panel);border:1px solid var(--rule);border-radius:10px;
}
.fx .mindex__label{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.fx .mindex__list{display:flex;gap:2px;flex:1;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.fx .mindex__list a{display:flex;flex-direction:column;align-items:center;padding:.3rem .7rem;border-radius:7px;text-decoration:none;color:var(--ink-2);line-height:1.15}
.fx .mindex__list a b{font-size:14px;font-weight:650;color:var(--ink)}
.fx .mindex__list a span{font-size:11px;color:var(--ink-4);white-space:nowrap}
.fx .mindex__list a:hover,.fx .mindex__list a.is-here{background:var(--accent-wash)}
.fx .mindex__list a.is-empty{opacity:.35;pointer-events:none}
.fx .mindex__all{font:inherit;font-size:13px;font-weight:600;padding:.4rem .8rem;border:1px solid var(--rule);border-radius:999px;background:var(--panel);color:var(--ink-2);cursor:pointer;white-space:nowrap}
.fx .mindex__all:hover{border-color:var(--ink-4)}
.fx[data-skin="notebook"] :is(.mindex,.mindex__list a,.mindex__all){border-radius:0}
.fx[data-skin="notebook"] .mindex__list a b{font-family:var(--hand);font-size:22px;font-weight:600;line-height:1}
.fx[data-skin="notebook"] :is(.mindex__list a span,.mindex__all,.mindex__label){font-family:var(--label);font-weight:400}
@media (max-width:560px){
  .fx .mindex{gap:8px;padding:6px 8px}
  .fx .mindex__label{display:none}
  .fx .mindex__list a{padding:.25rem .4rem}
  .fx .mindex__list a span{display:none}
}

.fx .nbmonth{scroll-margin-top:calc(var(--nav-h,68px) + var(--tbh,0px) + 4rem)}
.fx .nbmonth__fold > summary{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;
  padding:var(--space-md) 0 var(--space-sm) 1.6rem;border-bottom:1px solid var(--rule);
  cursor:pointer;list-style:none;position:relative;
}
.fx .nbmonth__fold > summary::-webkit-details-marker{display:none}
.fx .nbmonth__fold > summary::before{
  content:"";position:absolute;left:.15rem;top:calc(var(--space-md) + .65rem);width:.5rem;height:.5rem;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(-45deg);transition:transform 160ms ease;
}
.fx .nbmonth__fold[open] > summary::before{transform:rotate(45deg);top:calc(var(--space-md) + .45rem)}
.fx .nbmonth h2{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.fx[data-skin="notebook"] .nbmonth h2{font-family:var(--hand);font-size:40px;font-weight:600;letter-spacing:0;line-height:1}
.fx .nbmonth__fold > summary:hover h2{color:var(--accent-ink)}
.fx .nbmonth__meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;color:var(--ink-3)}
.fx .nbmonth__days{font-variant-numeric:tabular-nums}
.fx .nbmonth__days::before{content:"Days "}
.fx[data-skin="notebook"] .nbmonth__meta{font-family:var(--label)}

.fx .entry{display:grid;gap:8px 28px;grid-template-columns:minmax(0,1fr);padding:var(--space-md) 0;scroll-margin-top:calc(var(--nav-h,68px) + var(--tbh,0px) + 4rem)}
.fx .entry + .entry{border-top:1px solid var(--rule-2)}
.fx .entry.is-miss{display:none}
@media (min-width:760px){.fx .entry{grid-template-columns:7rem minmax(0,1fr)}}
.fx .entry__date{display:flex;align-items:baseline;gap:.45rem}
@media (min-width:760px){.fx .entry__date{flex-direction:column;gap:0;position:sticky;top:calc(var(--nav-h,68px) + var(--tbh,0px) + 4.5rem);align-self:start}}
.fx .entry__dow{order:3;font-size:12.5px;color:var(--ink-4)}
.fx .entry__day{font-size:1.9rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--accent-ink);letter-spacing:-.02em}
.fx .entry__mon{font-size:14px;font-weight:600;color:var(--ink-2)}
.fx[data-skin="notebook"] .entry__day{font-family:var(--hand);font-size:3rem;font-weight:600;color:var(--red-ink)}
.fx[data-skin="notebook"] :is(.entry__mon,.entry__dow){font-family:var(--label);font-weight:400}
@media (min-width:760px){.fx .entry__day{order:1}.fx .entry__mon{order:2;margin-top:.2rem}.fx .entry__dow{margin-top:.1rem}}
.fx .entry__body{min-width:0;max-width:58rem}
.fx .entry__body > * + *{margin-top:12px}
.fx .entry__note{margin:0;font-size:14px}
.fx .entry__event{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
.fx .entry__event .lbl{display:inline-block;margin-right:.5rem;padding:2px 8px;border-radius:4px;background:var(--ink);color:#fff;letter-spacing:.06em}
.fx[data-skin="notebook"] .entry__event .lbl{border-radius:0}
/* A learning loop: four steps set round a square, each arrow pointing to
   the next, the last one back up to the first. */
.fx .loop{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:30px 34px;grid-template-columns:repeat(2,minmax(0,1fr))}
.fx .loop__step{position:relative;padding:13px 16px 14px;border:1px solid var(--rule);border-top:3px solid var(--accent);border-radius:8px;background:var(--panel)}
.fx .loop__step:nth-child(3){grid-column:2;grid-row:2}
.fx .loop__step:nth-child(4){grid-column:1;grid-row:2}
.fx .loop__step::after{content:"";position:absolute;width:11px;height:11px;border-top:2px solid var(--ink-4);border-right:2px solid var(--ink-4)}
.fx .loop__step:nth-child(1)::after{right:-23px;top:50%;transform:translateY(-50%) rotate(45deg)}
.fx .loop__step:nth-child(2)::after{left:50%;bottom:-21px;transform:translateX(-50%) rotate(135deg)}
.fx .loop__step:nth-child(3)::after{left:-23px;top:50%;transform:translateY(-50%) rotate(225deg)}
.fx .loop__step:nth-child(4)::after{left:50%;top:-21px;transform:translateX(-50%) rotate(-45deg)}
.fx .loop__k{display:block;font-size:11.5px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink)}
.fx .loop__step p{margin:6px 0 0;font-size:14.5px;line-height:1.5}
.fx .loop__next{margin:12px 0 0;font-size:14px}
.fx[data-skin="notebook"] .loop__step{border-radius:0}
.fx[data-skin="notebook"] .loop__k{font-family:var(--label);font-weight:400}
@media (max-width:700px){
  .fx .loop{grid-template-columns:minmax(0,1fr);gap:24px}
  .fx .loop__step:nth-child(n){grid-column:auto;grid-row:auto}
  .fx .loop__step:nth-child(n)::after{left:22px;right:auto;top:auto;bottom:-18px;transform:rotate(135deg)}
  .fx .loop__step:last-child::after{display:none}
}
}
.fx .pipes{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.fx .pipe{
  display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0 .4rem;max-width:100%;
  padding:.22rem .65rem .22rem .55rem;border:1px solid var(--rule);border-radius:999px;background:var(--panel);font-size:12.5px;line-height:1.4;
}
.fx .pipe::before{content:"";flex:none;align-self:center;width:.5rem;height:.5rem;border-radius:50%;background:var(--c)}
.fx .pipe b{font-weight:600;color:var(--ink-2)}
.fx .pipe span{color:var(--ink-3)}
.fx[data-skin="notebook"] .pipe{border-radius:0;font-family:var(--label);font-size:11.5px}
.fx[data-skin="notebook"] .pipe b{font-weight:400;color:var(--ink)}
.fx[data-skin="notebook"] .pipe::before{border-radius:0}
.fx .entry__who{margin:0;font-size:15px;color:var(--ink-2)}
.fx .entry__who .lbl{display:inline;margin-right:.5rem}
.fx .entry__block{font-size:15px}
.fx .entry__block > .lbl{margin-bottom:2px}
.fx .results{margin:.2rem 0 0;padding-left:1.2em}
.fx .results li + li{margin-top:.3rem}
.fx .results ul{margin:.2rem 0 0;padding-left:1.1em}
.fx .photos{display:flex;flex-wrap:wrap;gap:8px}
.fx .ph{display:block;flex:none;height:5.5rem;overflow:hidden;border-radius:var(--radius-photo);background:var(--panel-2)}
.fx .ph img{display:block;height:100%;width:auto;max-width:11rem;object-fit:cover;transition:transform .2s ease}
.fx .ph:hover img{transform:scale(1.04)}
.fx .ph--draft{background:#fff;box-shadow:inset 0 0 0 1px var(--rule-2)}
.fx .photos.is-collapsed .is-extra{display:none}
.fx .ph-more{height:5.5rem;padding:0 16px;font:inherit;font-size:14px;font-weight:600;color:var(--accent-ink);border:1px solid var(--rule);border-radius:var(--radius-photo);background:var(--panel);cursor:pointer}
@media (max-width:480px){.fx .ph,.fx .ph-more{height:4.6rem}.fx .ph img{max-width:8.5rem}}
.fx .fold{border:1px solid var(--rule);border-radius:8px;background:var(--panel)}
.fx .fold + .fold{margin-top:8px}
.fx .fold > summary{display:flex;align-items:center;gap:8px;padding:.5rem .8rem;cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--ink-2)}
.fx[data-skin="notebook"] .fold{border-radius:0}
.fx[data-skin="notebook"] .fold > summary{font-family:var(--label);font-weight:400;font-size:12.5px}
.fx .fold > summary::-webkit-details-marker{display:none}
.fx .fold > summary::before{content:"";width:.4rem;height:.4rem;flex:none;border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);transform:rotate(-45deg);transition:transform 160ms ease;margin-right:.2rem}
.fx .fold[open] > summary::before{transform:rotate(45deg)}
.fx .fold > summary:hover{background:var(--panel-2)}
.fx .fold__n{font-size:11.5px;font-variant-numeric:tabular-nums;padding:0 .45rem;border-radius:999px;background:var(--panel-2);color:var(--ink-3)}
.fx .deliv{display:grid;gap:12px 20px;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));padding:8px 16px 16px;font-size:14px}
.fx .deliv__item b{display:block;font-weight:600;color:var(--ink)}
.fx .deliv__item ul{margin:.2rem 0 0;padding-left:1.1em;color:var(--ink-2)}
.fx .deliv__item li + li{margin-top:.15rem}
.fx .links{margin:0;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.fx .fold .links{padding:0 16px 16px}
.fx .links .doc{color:var(--ink-2)}
.fx .contrib{margin:0;padding:8px 16px 16px;display:grid;gap:12px 20px;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));font-size:14px}
.fx .contrib dt{font-weight:600;color:var(--ink)}
.fx .contrib dd{margin:0}
.fx .contrib ul{margin:.15rem 0 0;padding-left:1.1em;color:var(--ink-2)}
.fx .contrib li + li{margin-top:.15rem}
.fx .onboard{order:5;align-self:flex-start;margin:-.25rem -.4rem -.6rem;font:inherit;font-size:13px;font-weight:600;color:var(--accent-ink);background:none;border:0;padding:.6rem .4rem;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.fx[data-skin="notebook"] .onboard{font-family:var(--label);font-weight:400}
.fx .rec-empty{margin:var(--space-lg) 0 0;font-size:15px;color:var(--ink-3)}

.fx .fx-foot{
  margin-top:var(--space-2xl);padding-top:var(--space-md);border-top:1px solid var(--rule);
  font-size:13.5px;color:var(--ink-4);display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;line-height:1.6;
}
.fx[data-skin="notebook"] .fx-foot{font-family:var(--label)}
.fx .fx-foot p{margin:0}

.fx .nothing{display:flex;flex-direction:column;align-items:center;gap:14px;padding:56px 20px 40px;text-align:center}
.fx .nothing img{width:110px;height:auto;opacity:.8}
.fx .nothing p{margin:0;font-size:16px;color:var(--ink-3);max-width:34ch;line-height:1.5}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.fx .lb{position:fixed;inset:0;z-index:1000;background:var(--scrim);display:none;align-items:center;justify-content:center;padding:26px}
.fx .lb.on{display:flex}
.fx .lb-fig{width:min(1080px,100%);max-height:100%;display:flex;flex-direction:column;gap:12px;margin:0}
.fx .lb-fig img{max-width:100%;max-height:calc(100dvh - 176px);object-fit:contain;border-radius:var(--radius-photo);background:var(--scrim-well);display:block;margin:0 auto;box-shadow:var(--scrim-lift)}
.fx .lb-meta{display:flex;gap:8px 16px;align-items:baseline;flex-wrap:wrap;justify-content:center;text-align:center}
.fx .lb-meta .cap{color:var(--scrim-ink);font-size:17px;line-height:1.4;max-width:60ch}
.fx .lb-meta .mono{font-size:12.5px;color:var(--scrim-ink-2);font-variant-numeric:tabular-nums}
.fx .lb-meta .pchip{font-size:13px;color:var(--lbc,var(--scrim-ink-2));font-weight:650;filter:brightness(1.6)}
.fx .lb-nav,.fx .lb-close{
  position:absolute;border:1px solid var(--scrim-edge);background:var(--scrim-btn);color:var(--scrim-ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;border-radius:50%;
}
.fx .lb-nav{top:50%;transform:translateY(-50%);width:46px;height:46px;font-size:24px}
.fx .lb-nav:hover,.fx .lb-close:hover{background:var(--scrim-btn-hover)}
.fx .lb-prev{left:16px}.fx .lb-next{right:16px}
.fx .lb-close{top:16px;right:16px;width:40px;height:40px;font-size:17px}
.fx .lb-count{position:absolute;top:24px;left:24px;font-size:12.5px;color:var(--scrim-ink-2);font-variant-numeric:tabular-nums}

/* ============================================================
   SMALL SCREENS
   ============================================================ */
@media (max-width:760px){
  .fx .wrap{padding-left:16px;padding-right:16px}
  .fx .hero{padding-top:var(--space-sm)}
  .fx .mosaic__bar{flex-wrap:wrap}
  .fx .mosaic__cap{white-space:normal;font-size:13px}
  .fx .lede{font-size:16.5px}
  .fx .board{height:min(74vh,900px)}
  .fx .toolbar{gap:12px 18px}
  .fx .tb-search{flex:1 1 100%}
  .fx .seg{width:100%}
  .fx .seg__btn{flex:1;justify-content:center;padding:9px 8px}
}
@media (max-width:640px){
  .fx .card{left:0 !important;right:0;top:auto !important;bottom:0;width:100%;border-radius:12px 12px 0 0;border-bottom:0;transform:none !important}
  .fx .card .inner{max-height:58vh;padding:14px 16px 22px}
  .fx .lb{padding:12px}
  .fx .lb-nav{width:38px;height:38px}
  .fx .lb-prev{left:6px}.fx .lb-next{right:6px}
}
@media (prefers-reduced-motion:reduce){
  .fx *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}
@media print{
  .fx{background:#fff}
  .fx .toolbar,.fx .mosaic,.fx .season,.fx .boardframe,.fx .hint,.fx .legend,.fx .gallery,.fx .card,.fx .lb,.fx .mindex,.fx .ph-more{display:none !important}
  .fx .record{display:block !important}
  .fx .photos.is-collapsed .is-extra{display:block}
}

/* The wiki's drafting mark: AI-drafted text is orange, over the board's own colours. */
html:not(.ai-off) .fx .ai,
html:not(.ai-off) .fx .ai :is(p,li,span,b,a,button,h3,h4){color:var(--ai-ink,#c2410c) !important}
html:not(.ai-off) .fx .card .state.ai{border-color:currentColor}