/* expert-story.css: the Heimr sparse-down post. Depends on the site's theme.css variables (--ink, --ink2, --ink3, --void, --s1, --s2, --line, --line2, --accent, --accent-text, --heat-0..4, --mono, --sans, --grotesk). */

/* figures (inline SVG generated by make-story-data.mjs) */
.moe-fig{margin:38px auto;width:min(960px,100vw - 56px);position:relative;left:50%;transform:translateX(-50%);}
.moe-fig svg{display:block;width:100%;height:auto;background:var(--void);}
.moe-fig .moe-title{font-family:var(--grotesk);font-weight:500;font-size:22px;letter-spacing:-.01em;color:var(--h1);margin:0 0 10px;}
.moe-fig figcaption{font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--ink2);margin-top:12px;max-width:70ch;}
.moe-fig text{font-family:var(--sans);fill:var(--ink);}
.moe-fig .lab{font-size:12.5px;fill:var(--ink);}
.moe-fig .tick{font-family:var(--mono);font-size:11px;fill:var(--ink2);}
.moe-fig .note{font-size:11.5px;fill:var(--ink2);}
.moe-fig .speed{font-family:var(--grotesk);font-weight:700;font-size:15px;fill:var(--accent-text);}
.moe-fig .head{font-family:var(--grotesk);font-weight:500;font-size:14px;fill:var(--ink);}
.moe-fig .grid{stroke:var(--line);stroke-width:1;}
.moe-fig .axis{stroke:var(--line2);stroke-width:1;}
.moe-fig .bar-base{fill:var(--line2);}
.moe-fig .bar-ours{fill:var(--accent);}
/* fig-live counts zeros in both kinds of expert; neither is "ours", so both bars are amber. Grey-against-amber
   read as baseline-against-ours, which is not what that figure is measuring. */
.moe-fig .bar-live-routed{fill:var(--heat-2);}
.moe-fig .bar-live-shared{fill:var(--heat-4);}
.moe-fig .seg-router{fill:var(--line2);}
.moe-fig .seg-up{fill:var(--heat-2);}   /* --heat-1 is a dark-mode brown the light theme never redefines */
.moe-fig .seg-down{fill:var(--accent);}
.moe-fig .seg-lab{font-family:var(--mono);font-size:11.5px;fill:var(--ink);}
.moe-fig .seg-lab-on{font-family:var(--mono);font-size:11.5px;fill:var(--accent-ink);}
@media(max-width:680px){.moe-fig .moe-title{font-size:18px;}}

/* the control table */
.moe-table{width:100%;border-collapse:collapse;margin:26px 0 38px;font-family:var(--sans);font-size:14.5px;line-height:1.45;}
.moe-table th,.moe-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
.moe-table th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);font-weight:500;}
.moe-table td.num{font-family:var(--mono);font-size:13.5px;white-space:nowrap;}
.moe-table tr.ours td{color:var(--ink);}
.moe-table tr.ours td.num b{color:var(--accent-text);font-weight:700;}
.moe-table td.num b{font-weight:600;}
@media(max-width:600px){.moe-table{font-size:13px;}.moe-table th,.moe-table td{padding:8px 6px;}}

/* the storyboard */
/* Proximity snapping, so a scroll comes to rest on a slide rather than mid-transition. The targets are
   empty divs that expert-story.js positions at each slide's hold point; nothing else on the page snaps,
   and `proximity` leaves free scrolling alone. */
html{scroll-snap-type:y proximity;}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none;}}
.moe-story{
  width:100vw;height:660vh;position:relative;margin:44px 0 56px calc(50% - 50vw);
  padding:0!important;border:0!important;background:var(--void);
}
.moe-story-snap{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-snap-align:start;}
.moe-story-sticky{
  width:min(1440px,100vw);height:min(100vh - 64px,920px);position:sticky;top:64px;
  margin:0 auto;overflow:hidden;background:var(--void);
}
.moe-story canvas{display:block;width:100%;height:100%;}
.moe-story-copy{position:absolute;top:0;right:44px;width:min(420px,33%);height:100%;pointer-events:none;}
.moe-story-step{position:absolute;top:50%;left:0;width:100%;opacity:0;transform:translateY(calc(-50% + 18px));}
.moe-story-step.is-active{opacity:1;transform:translateY(-50%);}
.moe-story-step h4{font-size:32px!important;line-height:1.1;margin:0 0 15px!important;}
.moe-story-step p{font-family:var(--sans);font-size:17.5px;line-height:1.6;color:var(--ink2)!important;margin:0!important;max-width:34ch;}
.moe-story-progress{position:absolute;right:24px;top:50%;display:grid;gap:8px;transform:translateY(-50%);}
.moe-story-progress i{display:block;width:3px;height:28px;border-radius:2px;background:var(--line2);transition:background .2s;}
.moe-story-progress i.is-active{background:var(--accent);}
.moe-story-fallback{font-family:var(--sans);font-size:15px;color:var(--ink2);max-width:60ch;margin:30px auto;padding:0 22px;}
@media(max-width:760px){
  .moe-story{height:560vh;margin-top:26px;}
  .moe-story-sticky{height:calc(100svh - 64px);}
  .moe-story-copy{top:auto;right:22px;bottom:30px;left:22px;width:auto;height:190px;padding:0;background:none;border:0;}
  .moe-story-step{top:50%;}.moe-story-step h4{font-size:23px!important;margin-bottom:8px!important;}.moe-story-step p{font-size:15.5px;line-height:1.45;max-width:none;}
  .moe-story-progress{top:22px;right:18px;display:flex;transform:none}.moe-story-progress i{width:24px;height:3px;}
}
@media(prefers-reduced-motion:reduce){.moe-story-step{transition:none;}}
@media print{.moe-story{height:auto}.moe-story-sticky{position:relative;top:0;height:640px}.moe-story-step:not(:last-child),.moe-story-progress{display:none}.moe-story-step:last-child{opacity:1}}

/* v2 additions: the decode matrix, the union sub-labels of the prefill figure, the dim token counts in the MTP table */
.moe-matrix-fig{width:min(720px,100vw - 56px);}
.moe-matrix{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);font-family:var(--sans);}
.moe-matrix>div{background:var(--s1);padding:16px 18px;}
.moe-matrix .mx-col{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);line-height:1.5;}
.moe-matrix .mx-col{text-align:center;align-self:end;}
.moe-matrix .mx-col span{display:block;letter-spacing:0;text-transform:none;font-size:12px;color:var(--ink2);margin-top:3px;}
.moe-matrix .mx-col.is-ours{color:var(--accent-text);}
.moe-matrix .mx-cell{text-align:center;}
.moe-matrix .mx-cell b{display:block;font-family:var(--grotesk);font-weight:700;font-size:30px;letter-spacing:-.02em;line-height:1.05;color:var(--ink);}
.moe-matrix .mx-cell span{font-family:var(--mono);font-size:11px;color:var(--ink2);}
.moe-matrix .mx-cell.is-ours b{color:var(--accent-text);}
.moe-matrix .mx-cell.is-best{background:var(--accent-soft);}
@media(max-width:600px){.moe-matrix{grid-template-columns:1fr 1fr;}.moe-matrix>div{padding:12px 8px;}.moe-matrix .mx-cell b{font-size:22px;}.moe-matrix .mx-col{font-size:9.5px;letter-spacing:.08em;}}
.moe-fig .sub{font-family:var(--mono);font-size:10px;fill:var(--ink2);}
.moe-table .dim{color:var(--ink2);font-size:.85em;}

/* the prefill storyboard has seven slides, so it scrolls a seventh longer */
.prefill-story{height:770vh;}
@media(max-width:760px){.prefill-story{height:650vh;}}