From ad2e99eeb94819c78b7683aef469cbf29e890c0b Mon Sep 17 00:00:00 2001 From: Tyler Hallada Date: Fri, 4 Sep 2026 17:05:39 +0000 Subject: [PATCH] UI pass: table-of-contents sidebar fixes and scroll sync - The open hamburger panel now fills the viewport below the sticky bar (100dvh, measured bar offset) and locks the page behind it. Locking only the root element: locking body too made it its own scroll container and un-stuck the bar. - Front-page scroll-spy: the current chapter marker, mobile label/counter, desktop "Chapter N of M" line and both progress bars follow the reader through "In This Issue"; passed chapters read in ink. The sidebar auto-scrolls to keep the current chapter in view. - The sidebar scrollbar sits in a reserved gutter instead of over the text. - Hamburger cross-fades to a close icon; 44px tap targets on phones. Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01MD4VWGq6mGcd8Bg67qyx9k --- docs/plans/briefs/ui-pass/handoff-toc.md | 89 +++++++++++++ src/web/issue.rs | 58 ++++++++- src/web/static/app.css | 2 +- src/web/static/app.js | 158 +++++++++++++++++------ src/web/tailwind.css | 15 ++- src/web/templates/_toc.html | 17 +-- src/web/templates/issue_full.html | 6 +- 7 files changed, 291 insertions(+), 54 deletions(-) create mode 100644 docs/plans/briefs/ui-pass/handoff-toc.md diff --git a/docs/plans/briefs/ui-pass/handoff-toc.md b/docs/plans/briefs/ui-pass/handoff-toc.md new file mode 100644 index 0000000..4d44c39 --- /dev/null +++ b/docs/plans/briefs/ui-pass/handoff-toc.md @@ -0,0 +1,89 @@ +# Task 1 handoff — table-of-contents sidebar + +## What changed + +- `src/web/templates/_toc.html` + - Reworked the narrow-screen panel to use a measured viewport offset and a + `100dvh`-based height instead of the old `72vh` cap. + - Added live label, count, desktop-status, link-label, and per-link progress + hooks used by the shared TOC state updater. + - Moved current-link presentation onto `.toc-link[aria-current]` and kept the + server-rendered `aria-current="page"` state for chapter pages. + - Added both hamburger and close SVGs for the open-state cross-fade and raised + the mobile toggle/link hit areas to at least 44 px. + - Added explicit right padding around the scrollable list. +- `src/web/templates/issue_full.html` + - Marked The Brief, every article index item, and the colophon with matching + `data-toc-entry` values for the front-page scroll-spy. +- `src/web/static/app.js` + - Added mobile panel sizing from the sticky bar's current viewport position, + recalculated on open and layout/visual-viewport resize. + - Added mobile document scroll lock and retained toggle, Escape, + outside-click, link-click, and `lg` breakpoint close behavior. + - Added a passive, requestAnimationFrame-throttled front-page scroll-spy. A + single current-link update now drives `aria-current="location"`, the mobile + title/count, desktop chapter status, both progress bars, and TOC reveal. + - Updated current-link reveal to use `scrollTo`, smooth unless reduced motion + is requested, without scrolling the page. + - Preserved progress-within-chapter behavior on article pages. +- `src/web/tailwind.css` + - Added the dynamic mobile panel height and scroll-lock rules. + - Added stable scrollbar gutter, right-side spacing, thin/rule-colored + cross-browser scrollbar styling, and overscroll containment. + - Added the centralized current/hover/focus link styles and exact 150 ms + opacity/scale/blur hamburger-to-close transition. +- `src/web/static/app.css` + - Rebuilt from the Tailwind source. +- `src/web/issue.rs` + - Added each TOC item's semantic progress position (including back matter) and + coverage for those positions and the rendered scroll-spy hooks. + - Made the current-link router assertion insensitive to HTML attribute order. + +## Design decisions + +- The open panel remains positioned directly below the shared sticky bar. JS + measures only the bar's on-screen bottom edge into `--toc-panel-top`; CSS owns + the final `calc(100dvh - var(--toc-panel-top))` height. This handles both the + bar still below the masthead and the bar already stuck at the top. +- The Brief uses progress position 0. Article, World, and Behind entries use + their chapter position. The colophon uses the issue total, so reaching it + communicates completion even though World and Behind are separate pages. +- Front-page position changes only toggle `aria-current` for current styling; + the other text/progress surfaces are derived from that same link's label and + progress metadata. +- Scrollbar gutter and padding are both used: the gutter reserves space for + classic scrollbars, while padding protects labels on overlay-scrollbar + platforms. + +## Deviations and open items + +- No live screenshots could be captured. The sandbox rejected the assigned + `127.0.0.1:3601` bind with `Operation not permitted`, exactly as anticipated + by the shared brief. Consequently desktop/mobile, light/dark, open-panel, and + scripted-scroll visual states remain to be checked outside the sandbox. +- The full unit test run also found three OpenAI mock-server tests blocked by + loopback binding in addition to the bind-dependent tests listed in the shared + brief. They fail at the same listener creation point and are unrelated to this + change. + +## Verification + +- `node --check src/web/static/app.js` — passed. +- `cargo fmt --check` — passed. +- `npm run css` — passed with Tailwind 4.3.3; `src/web/static/app.css` rebuilt. +- `npm run css:check` — passed with no diff. The worktree lacked its own CLI + shim, so both npm commands used the already-installed adjacent checkout's + `node_modules/.bin` via `PATH`; all inputs and outputs stayed in this worktree. +- `cargo test --lib web::` — 83 passed, 0 failed. +- `cargo clippy --all-targets -- -D warnings` — passed. +- `cargo test` — library phase: 431 passed, 13 bind-dependent failures. The + failures were 7 LLM mock-server tests, the documented relative-URL extraction + test, and the documented 5 server tests; each failed with `Operation not + permitted` while creating a loopback listener. +- `cargo test --test config_check --test e2e_pipeline --test m2_pipeline --test m3_curation --test m4_epub` + — 25 passed, 0 failed. `m7_server` was excluded because it requires the same + forbidden loopback bind. +- Attempted the configured dev-server command on port 3601 — build passed; bind + failed with `Operation not permitted`, so screenshots were not possible. +- `git diff --check` — passed. + diff --git a/src/web/issue.rs b/src/web/issue.rs index e500cc6..dbf2abe 100644 --- a/src/web/issue.rs +++ b/src/web/issue.rs @@ -659,6 +659,8 @@ struct TocItem { href: String, number: Option, minutes: Option, + /// Progress position used by the shared TOC UI (0 for The Brief). + progress: usize, current: bool, /// First entry of the back-matter group; the template draws a hairline above it. divider: bool, @@ -668,6 +670,10 @@ impl TocItem { fn is_section(&self) -> bool { matches!(self.kind, TocKind::Section) } + + fn is_colophon(&self) -> bool { + matches!(self.kind, TocKind::Colophon) + } } /// The table of contents shared by the four signed-in issue pages. @@ -703,12 +709,18 @@ fn issue_toc(view: &IssueView, current: TocPosition) -> Toc { let issue = &view.issue; let date = issue.meta.date; let issue_href = issue_href(date); - let plain = |kind: TocKind, label: &str, href: String, current: bool, divider: bool| TocItem { + let plain = |kind: TocKind, + label: &str, + href: String, + progress: usize, + current: bool, + divider: bool| TocItem { kind, label: label.to_string(), href, number: None, minutes: None, + progress, current, divider, }; @@ -717,13 +729,21 @@ fn issue_toc(view: &IssueView, current: TocPosition) -> Toc { TocKind::Brief, "The Brief", issue_href.clone(), + 0, current == TocPosition::FrontPage, false, )]; let mut position = 0usize; let mut total = 0usize; for name in chapters::section_names(issue) { - items.push(plain(TocKind::Section, &name, String::new(), false, false)); + items.push(plain( + TocKind::Section, + &name, + String::new(), + 0, + false, + false, + )); for pick in issue.lineup.section_picks(&name) { total += 1; let is_current = current == TocPosition::Article(pick.article.id); @@ -736,6 +756,7 @@ fn issue_toc(view: &IssueView, current: TocPosition) -> Toc { href: article_href(date, pick.article.id), number: Some(total), minutes: Some(pick.article.reading_minutes()), + progress: total, current: is_current, divider: false, }); @@ -753,6 +774,7 @@ fn issue_toc(view: &IssueView, current: TocPosition) -> Toc { TocKind::World, "World Briefing", format!("/issues/{date}/world"), + total, is_current, divider, )); @@ -768,6 +790,7 @@ fn issue_toc(view: &IssueView, current: TocPosition) -> Toc { TocKind::Behind, "Behind the paper", format!("/issues/{date}/behind"), + total, is_current, divider, )); @@ -777,6 +800,7 @@ fn issue_toc(view: &IssueView, current: TocPosition) -> Toc { TocKind::Colophon, "Colophon", format!("{issue_href}#colophon"), + total, false, divider, )); @@ -2160,6 +2184,15 @@ mod tests { assert_eq!(front.position, 0); assert_eq!(front.current_label(), "The Brief"); assert_eq!(front.short_date, "Sat, Aug 15"); + assert_eq!( + front + .items + .iter() + .filter(|item| !item.is_section()) + .map(|item| item.progress) + .collect::>(), + vec![0, 1, 2, 3, 4, 4] + ); // Exactly one hairline, above the first back-matter entry. assert_eq!( front @@ -2234,13 +2267,30 @@ mod tests { let html = response_text(response).await; assert!(html.contains("data-toc-toggle"), "{path} has no toc bar"); assert!(html.contains("id=\"toc\""), "{path} has no toc panel"); - assert!(html.contains(progress), "{path} is missing {progress:?}"); assert!( - html.contains(&format!("href=\"{current}\" aria-current=\"page\"")), + html.contains("data-toc-status"), + "{path} has no live status" + ); + assert!(html.contains(progress), "{path} is missing {progress:?}"); + let current_link = html + .split(&format!("class=\"toc-link\" href=\"{current}\"")) + .nth(1) + .and_then(|rest| rest.split("").next()); + assert!( + current_link.is_some_and(|link| link.contains("aria-current=\"page\"")), "{path} does not mark {current} as current" ); assert!(html.contains(&format!("{}#colophon", issue_href(date)))); assert!(html.contains("A Niche Delight & Other Tales")); + if path == issue_href(date) { + assert!(html.contains(&format!( + "data-toc-entry=\"{}\"", + article_href(date, source.lineup.picks[0].article.id) + ))); + assert!( + html.contains(&format!("data-toc-entry=\"{}#colophon\"", issue_href(date))) + ); + } } let anonymous = app diff --git a/src/web/static/app.css b/src/web/static/app.css index 3d57e7f..87969c8 100644 --- a/src/web/static/app.css +++ b/src/web/static/app.css @@ -1,2 +1,2 @@ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ -@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-serif:"Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, monospace;--spacing:.25rem;--container-md:28rem;--container-lg:32rem;--container-2xl:42rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-normal:0em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--radius-sm:.25rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--default-mono-font-family:ui-monospace, SFMono-Regular, Menlo, monospace;--color-paper:var(--paper);--color-paper-2:var(--paper-2);--color-ink:var(--ink)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])),[hidden]{display:none!important}html{background-color:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:var(--paper);--tw-leading:1.65;min-height:100vh;color:var(--ink);font-optical-sizing:auto;margin:0;font-family:Newsreader,Iowan Old Style,Palatino Linotype,Georgia,serif;font-size:1.0625rem;line-height:1.65}::selection{background:var(--accent)}@supports (color:color-mix(in lab, red, red)){::selection{background:color-mix(in oklab, var(--accent) 24%, transparent)}}a{color:var(--accent);-webkit-text-decoration-color:var(--rule);-webkit-text-decoration-color:var(--rule);text-decoration-color:var(--rule);text-underline-offset:4px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;transition-duration:.15s}@media (hover:hover){a:hover{color:var(--accent-hover)}}a:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--accent);--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--paper);--tw-outline-style:none;outline-style:none}h1,h2,h3{color:var(--ink);font-optical-sizing:auto}button,input,select,textarea{font:inherit;border-radius:var(--radius-sm);border-style:var(--tw-border-style);border-width:1px;border-color:var(--rule);background-color:var(--paper);padding-inline:calc(var(--spacing) * 2.5);padding-block:calc(var(--spacing) * 1.5);color:var(--ink);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;transition-duration:.15s}:is(button,input,select,textarea)::placeholder{color:var(--muted)}:is(button,input,select,textarea):focus{border-color:var(--ink);--tw-outline-style:none;outline-style:none}:is(button,input,select,textarea):focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--accent);--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--paper)}button{cursor:pointer}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;border-color:var(--rule);background-color:var(--paper-2);color:var(--muted)}textarea{min-height:calc(var(--spacing) * 28)}summary{cursor:pointer}table{border-collapse:collapse;width:100%;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:var(--leading-snug);line-height:var(--leading-snug);font-variant-numeric:tabular-nums}thead{z-index:10;background-color:var(--paper);position:sticky;top:0}th,td{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--rule);padding-inline:calc(var(--spacing) * 2);padding-block:calc(var(--spacing) * 2);text-align:left;vertical-align:top}th{--tw-font-weight:var(--font-weight-semibold);font-size:.72rem;font-weight:var(--font-weight-semibold);--tw-tracking:.1em;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}tbody tr{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;transition-duration:.15s}@media (hover:hover){tbody tr:hover{background-color:var(--paper-2)}}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}meter{height:calc(var(--spacing) * 2);border-radius:var(--radius-sm);appearance:none;background:var(--rule);width:100%;display:block}meter::-webkit-meter-bar{background:var(--rule);border:0;border-radius:2px;height:.5rem}meter::-webkit-meter-optimum-value{background:var(--good);border-radius:2px}meter::-webkit-meter-suboptimum-value{background:var(--good);border-radius:2px}meter::-webkit-meter-even-less-good-value{background:var(--good);border-radius:2px}meter.over::-webkit-meter-optimum-value{background:var(--down)}meter.over::-webkit-meter-suboptimum-value{background:var(--down)}meter.over::-webkit-meter-even-less-good-value{background:var(--down)}meter::-moz-meter-bar{background:var(--good);border-radius:2px}meter.over::-moz-meter-bar{background:var(--down)}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}}@layer components{.btn,.button{min-height:calc(var(--spacing) * 10);border-radius:var(--radius-sm);border-style:var(--tw-border-style);border-width:1px;border-color:var(--rule-strong);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--ink);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;background-color:#0000;justify-content:center;align-items:center;text-decoration-line:none;transition-duration:.15s;display:inline-flex}@media (hover:hover){:is(.btn,.button):hover{background-color:var(--ink);color:var(--paper)}}:is(.btn,.button):focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--accent);--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--paper);--tw-outline-style:none;outline-style:none}.btn-primary{min-height:calc(var(--spacing) * 10);border-radius:var(--radius-sm);border-style:var(--tw-border-style);border-width:1px;border-color:var(--ink);background-color:var(--ink);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--paper);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;justify-content:center;align-items:center;text-decoration-line:none;transition-duration:.15s;display:inline-flex}@media (hover:hover){.btn-primary:hover{border-color:var(--accent);background-color:var(--accent);color:var(--paper)}}.btn-primary:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--accent);--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--paper);--tw-outline-style:none;outline-style:none}.btn-quiet{min-height:calc(var(--spacing) * 9);align-items:center;gap:var(--spacing);border-radius:var(--radius-sm);border-style:var(--tw-border-style);padding-inline:calc(var(--spacing) * 2);padding-block:var(--spacing);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--muted);text-decoration-line:underline;-webkit-text-decoration-color:var(--rule);-webkit-text-decoration-color:var(--rule);text-decoration-color:var(--rule);text-underline-offset:4px;background-color:#0000;border-width:0;display:inline-flex}@media (hover:hover){.btn-quiet:hover{color:var(--ink);-webkit-text-decoration-color:var(--accent);-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}}.btn:disabled,.btn-primary:disabled,.btn-danger:disabled{cursor:not-allowed;border-color:var(--rule);background-color:var(--paper-2);color:var(--muted)}@media (hover:hover){:is(.btn:disabled,.btn-primary:disabled,.btn-danger:disabled):hover{background-color:var(--paper-2);color:var(--muted)}}.btn-danger,button.danger{min-height:calc(var(--spacing) * 9);border-radius:var(--radius-sm);border-style:var(--tw-border-style);border-width:1px;border-color:var(--down);padding-inline:calc(var(--spacing) * 2.5);padding-block:var(--spacing);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--down);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;background-color:#0000;justify-content:center;align-items:center;transition-duration:.15s;display:inline-flex}@media (hover:hover){:is(.btn-danger,button.danger):hover{background-color:var(--down);color:var(--paper)}}.badge{padding-inline:calc(var(--spacing) * 2);padding-block:calc(var(--spacing) * .5);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap;color:var(--ink-2);background:var(--ink);border-radius:3.40282e38px;align-items:center;display:inline-flex}@supports (color:color-mix(in lab, red, red)){.badge{background:color-mix(in oklab, var(--ink) 8%, transparent)}}.badge.selected,.badge.loved,.badge.ok{color:var(--loved);background:var(--loved)}@supports (color:color-mix(in lab, red, red)){.badge.selected,.badge.loved,.badge.ok{background:color-mix(in oklab, var(--loved) 14%, transparent)}}.badge.good,.badge.assessed,.badge.triaged,.badge.degraded{color:var(--good);background:var(--good)}@supports (color:color-mix(in lab, red, red)){.badge.good,.badge.assessed,.badge.triaged,.badge.degraded{background:color-mix(in oklab, var(--good) 14%, transparent)}}.badge.down,.badge.excluded,.badge.failed,.badge.dry_run{color:var(--down);background:var(--down)}@supports (color:color-mix(in lab, red, red)){.badge.down,.badge.excluded,.badge.failed,.badge.dry_run{background:color-mix(in oklab, var(--down) 14%, transparent)}}.badge.shortlisted,.badge.admitted,.badge.eligible,.badge.cleared,.badge.reason,.badge.running,.badge.requested{color:var(--muted);background:var(--muted)}@supports (color:color-mix(in lab, red, red)){.badge.shortlisted,.badge.admitted,.badge.eligible,.badge.cleared,.badge.reason,.badge.running,.badge.requested{background:color-mix(in oklab, var(--muted) 14%, transparent)}}.badge.restart,.badge.warn{color:var(--warn);background:var(--warn)}@supports (color:color-mix(in lab, red, red)){.badge.restart,.badge.warn{background:color-mix(in oklab, var(--warn) 16%, transparent)}}.kv{column-gap:calc(var(--spacing) * 5);row-gap:calc(var(--spacing) * 1.5);grid-template-columns:minmax(9rem,1fr) 2fr;display:grid}.kv dt{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--muted)}.kv dd{min-width:0;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));overflow-wrap:anywhere;margin:0}.scroll-x{overscroll-behavior-inline:contain;max-width:100%;overflow-x:auto}.scroll-x>table{min-width:max-content}.scroll-x.tall{overscroll-behavior-block:contain;max-height:70vh;overflow-y:auto}.prose-body{--tw-leading:1.72;color:var(--ink);font-size:1.0625rem;line-height:1.72}.prose-body>*+*{margin-top:calc(var(--spacing) * 5)}.prose-body h2{margin-top:calc(var(--spacing) * 10);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--rule);padding-top:calc(var(--spacing) * 4);font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-leading:1.15;--tw-font-weight:var(--font-weight-semibold);line-height:1.15;font-weight:var(--font-weight-semibold);--tw-tracking:-.01em;letter-spacing:-.01em}.prose-body h3{margin-top:calc(var(--spacing) * 8);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.prose-body a{color:var(--ink);text-decoration-line:underline;-webkit-text-decoration-color:var(--rule);-webkit-text-decoration-color:var(--rule);text-decoration-color:var(--rule);text-underline-offset:4px}@media (hover:hover){.prose-body a:hover{color:var(--ink);-webkit-text-decoration-color:var(--accent);-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}}.prose-body img{margin-inline:auto;margin-block:calc(var(--spacing) * 7);border-radius:var(--radius-sm);text-align:center;max-width:100%;height:auto;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--muted);font-style:italic;display:block}.prose-body pre{border-radius:var(--radius-sm);background-color:var(--paper-2);max-width:100%;padding:calc(var(--spacing) * 4);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed);overflow-x:auto}.prose-body :not(pre)>code{border-radius:var(--radius-sm);background-color:var(--paper-2);padding-inline:var(--spacing);padding-block:calc(var(--spacing) * .5);font-size:.9em}.prose-body blockquote{margin-block:calc(var(--spacing) * 7);border-left-style:var(--tw-border-style);border-left-width:2px;border-color:var(--rule-strong);padding-left:calc(var(--spacing) * 5);color:var(--ink-2)}.prose-body ul{padding-left:calc(var(--spacing) * 6);list-style-type:disc}.prose-body ol{padding-left:calc(var(--spacing) * 6);list-style-type:decimal}.prose-body li::marker{color:var(--muted)}.prose-body li+li{margin-top:calc(var(--spacing) * 2)}.rating{margin-block:calc(var(--spacing) * 5);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));flex-wrap:wrap;align-items:center;display:flex}.rating-prompt{margin-right:calc(var(--spacing) * 3);--tw-tracking:.1em;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;font-size:.72rem}.rating button[data-label]:not(.clear){min-height:calc(var(--spacing) * 10);border-color:var(--rule);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);color:var(--ink);background-color:#0000;border-radius:0;margin-left:-1px}.rating button[data-label]:not(.clear):first-child{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm);margin-left:0}.rating button[data-label]:not(.clear):last-child{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}@media (hover:hover){.rating button[data-label]:not(.clear):hover{z-index:10;border-color:var(--ink);background-color:var(--paper-2)}}.rating button[data-label]:not(.clear).active{z-index:10;border-color:var(--ink);background-color:var(--ink);color:var(--paper)}.rating button.clear{margin-left:calc(var(--spacing) * 2);min-height:calc(var(--spacing) * 10);border-style:var(--tw-border-style);padding-inline:calc(var(--spacing) * 2);color:var(--muted);text-decoration-line:underline;-webkit-text-decoration-color:var(--rule);-webkit-text-decoration-color:var(--rule);text-decoration-color:var(--rule);text-underline-offset:4px;background-color:#0000;border-width:0}@media (hover:hover){.rating button.clear:hover{color:var(--ink)}}.rating button.clear.active{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--ink)}.rating-note{margin-top:calc(var(--spacing) * 2);width:100%;max-width:var(--container-md);align-items:center;gap:calc(var(--spacing) * 2);color:var(--muted);flex-basis:100%;display:flex}.rating-note input{flex:1}.flash{margin-block:calc(var(--spacing) * 4);border-left-style:var(--tw-border-style);border-left-width:4px;border-color:var(--accent);background-color:var(--paper-2);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.error{border-left-style:var(--tw-border-style);border-left-width:4px;border-color:var(--down);background-color:var(--paper-2);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--down)}.notice{border-left-style:var(--tw-border-style);border-left-width:4px;border-color:var(--warn);background-color:var(--paper-2);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--ink-2)}ul.error,ul.notice{padding-left:calc(var(--spacing) * 8);list-style-type:disc}.dashboard{margin-inline:auto;margin-block:calc(var(--spacing) * 8);max-width:var(--container-7xl);padding-inline:calc(var(--spacing) * 4);padding-bottom:calc(var(--spacing) * 6);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}@media (min-width:40rem){.dashboard{padding-inline:calc(var(--spacing) * 6)}}.dashboard>*+*{margin-top:calc(var(--spacing) * 4)}.dashboard h1{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);--tw-tracking:-.01em;letter-spacing:-.01em}.dashboard h2{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.dashboard h3{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.dashboard>h2{margin-top:calc(var(--spacing) * 9);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--rule);padding-top:calc(var(--spacing) * 3);--tw-font-weight:var(--font-weight-semibold);font-size:.78rem;font-weight:var(--font-weight-semibold);--tw-tracking:.14em;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}.dashboard>p,.dashboard>ul,.dashboard>ol{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.dashboard code{border-radius:var(--radius-sm);background-color:var(--paper-2);padding-inline:var(--spacing);padding-block:calc(var(--spacing) * .5);font-size:.85em}.dashboard pre code{background-color:#0000;padding:0}.dashboard table a{color:var(--ink);text-decoration-line:underline;-webkit-text-decoration-color:var(--rule);-webkit-text-decoration-color:var(--rule);text-decoration-color:var(--rule);text-underline-offset:2px}@media (hover:hover){.dashboard table a:hover{color:var(--ink);-webkit-text-decoration-color:var(--accent);-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}}.page-head{justify-content:space-between;align-items:flex-end;column-gap:calc(var(--spacing) * 6);row-gap:calc(var(--spacing) * 3);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--rule);padding-bottom:calc(var(--spacing) * 4);flex-wrap:wrap;display:flex}.page-head>div:first-child{min-width:0}.dashboard>.page-head+*{margin-top:calc(var(--spacing) * 6)}.page-desc{margin-top:calc(var(--spacing) * 1.5);max-width:74ch;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--muted)}.page-desc a{color:var(--accent)}.page-actions{align-items:center;gap:calc(var(--spacing) * 2);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));flex-wrap:wrap;display:flex}.page-eyebrow{--tw-tracking:.14em;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;font-size:.7rem}.tiles{gap:calc(var(--spacing) * 3);grid-template-columns:repeat(auto-fit,minmax(min(10.5rem,100%),1fr));display:grid}.tile{border-style:var(--tw-border-style);border-width:1px;border-color:var(--rule);min-width:0;padding-inline:calc(var(--spacing) * 3.5);padding-block:calc(var(--spacing) * 3)}.tile-label{--tw-font-weight:var(--font-weight-medium);font-size:.68rem;font-weight:var(--font-weight-medium);--tw-tracking:.12em;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;display:block}.tile-num{margin-top:var(--spacing);--tw-leading:var(--leading-tight);font-size:1.55rem;line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);--tw-tracking:-.01em;letter-spacing:-.01em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;display:block}.tile-delta{margin-top:var(--spacing);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--muted);overflow-wrap:anywhere;display:block}.cards{gap:calc(var(--spacing) * 4);grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));display:grid}.card{border-style:var(--tw-border-style);border-width:1px;border-color:var(--rule);min-width:0;padding:calc(var(--spacing) * 4)}.card>*+*{margin-top:calc(var(--spacing) * 3)}.card h2,.card h3{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.card>h2:first-child,.card>h3:first-child{margin-top:0}.card p,.card li{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.muted,.meta{color:var(--muted)}.jobs a,.picks>li>a:first-child{color:var(--ink);text-decoration-line:none}@media (hover:hover){:is(.jobs a,.picks>li>a:first-child):hover{color:var(--accent)}}.num{text-align:right;white-space:nowrap;--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.cell-wrap{white-space:normal;overflow-wrap:anywhere;min-width:10rem;max-width:24rem}.cell-tight{white-space:nowrap}.filters{align-items:flex-end;column-gap:calc(var(--spacing) * 4);row-gap:calc(var(--spacing) * 3);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:var(--rule);padding-block:calc(var(--spacing) * 3);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));flex-wrap:wrap;display:flex}.filters label{gap:var(--spacing);--tw-font-weight:var(--font-weight-medium);font-size:.66rem;font-weight:var(--font-weight-medium);--tw-tracking:.1em;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;display:grid}.filters input,.filters select,.filters textarea{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal);color:var(--ink);text-transform:none}.filters select,.filters input[type=date]{min-width:calc(var(--spacing) * 32)}.filters .filter-actions{align-items:center;gap:calc(var(--spacing) * 3);display:flex}.form-inline{align-items:center;gap:calc(var(--spacing) * 3);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));flex-wrap:wrap;display:flex}.form-inline label{align-items:center;gap:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));display:flex}.table-filter{margin-block:calc(var(--spacing) * 2);width:calc(var(--spacing) * 80);max-width:100%;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.pager{justify-content:space-between;align-items:center;column-gap:calc(var(--spacing) * 6);row-gap:calc(var(--spacing) * 2);padding-block:var(--spacing);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--muted);flex-wrap:wrap;display:flex}.pager a{color:var(--ink);text-decoration-line:none}@media (hover:hover){.pager a:hover{color:var(--accent)}}.run-nav{justify-content:space-between;align-items:center;column-gap:calc(var(--spacing) * 6);row-gap:calc(var(--spacing) * 2);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));flex-wrap:wrap;display:flex}.run-nav a{color:var(--ink);text-decoration-line:none}@media (hover:hover){.run-nav a:hover{color:var(--accent)}}.tabs{align-items:center;column-gap:calc(var(--spacing) * 6);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--rule);--tw-font-weight:var(--font-weight-medium);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:.72rem;font-weight:var(--font-weight-medium);--tw-tracking:.12em;letter-spacing:.12em;text-transform:uppercase;flex-wrap:wrap;display:flex}.tabs a{min-height:calc(var(--spacing) * 10);border-bottom-style:var(--tw-border-style);color:var(--muted);border-color:#0000;border-bottom-width:2px;align-items:center;margin-bottom:-1px;text-decoration-line:none;display:flex}@media (hover:hover){.tabs a:hover{color:var(--ink)}}.tabs a.active{border-color:var(--accent);color:var(--ink)}.pagination{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--muted)}tr.superseded>td,tr.superseded a{color:var(--muted)}td .rating,.picks .rating{margin-block:calc(var(--spacing) * 1.5);row-gap:var(--spacing);max-width:15rem;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}td .rating-prompt,.picks .rating-prompt{display:none}td .rating button[data-label]:not(.clear),.picks .rating button[data-label]:not(.clear){min-height:calc(var(--spacing) * 8);padding-inline:calc(var(--spacing) * 2.5);padding-block:var(--spacing);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}td .rating button.clear,.picks .rating button.clear{margin-left:calc(var(--spacing) * 2);min-height:calc(var(--spacing) * 8);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-inline:0}td .rating-note{margin-top:var(--spacing);gap:calc(var(--spacing) * 1.5);max-width:15rem;font-size:.7rem}td .rating-note input{padding-inline:calc(var(--spacing) * 1.5);padding-block:calc(var(--spacing) * .5);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.picks .rating{max-width:none}pre.block,pre.preview,pre.journal{border-radius:var(--radius-sm);background-color:var(--paper-2);padding:calc(var(--spacing) * 3);--tw-leading:var(--leading-relaxed);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;line-height:var(--leading-relaxed);white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto}pre.block{max-height:calc(var(--spacing) * 64)}pre.preview{max-height:calc(var(--spacing) * 56)}pre.journal{max-height:34rem;padding:calc(var(--spacing) * 4)}pre.prompt,pre.learned{max-height:32rem}td>pre.preview{max-height:calc(var(--spacing) * 24);max-width:var(--container-md);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--muted);background-color:#0000;padding:0}details.disclosure{border-style:var(--tw-border-style);border-width:1px;border-color:var(--rule)}details.disclosure>summary{padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}details.disclosure[open]>summary{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--rule)}details.disclosure>.disclosure-body{padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}details.disclosure>.disclosure-body>*+*{margin-top:calc(var(--spacing) * 3)}details.signals>summary{min-width:0}.signals-body{margin-top:calc(var(--spacing) * 2);max-width:var(--container-2xl);border-left-style:var(--tw-border-style);border-left-width:2px;border-color:var(--rule);padding-left:calc(var(--spacing) * 3);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.signals-body>*+*{margin-top:calc(var(--spacing) * 2)}.signals-body ul{padding-left:calc(var(--spacing) * 5);list-style-type:disc}.funnel{border-radius:var(--radius-sm);background-color:var(--paper-2);width:100%;min-width:6rem}.funnel>*{border-radius:var(--radius-sm);background-color:var(--good);min-width:1px;display:block}.funnel-cell{vertical-align:middle;width:14rem;min-width:8rem}.sparklines{gap:calc(var(--spacing) * 4);grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));display:grid}.spark-figure{border-style:var(--tw-border-style);border-width:1px;border-color:var(--rule);min-width:0;padding:calc(var(--spacing) * 3);margin:0}.spark-figure figcaption{margin-bottom:calc(var(--spacing) * 2);--tw-font-weight:var(--font-weight-semibold);font-size:.7rem;font-weight:var(--font-weight-semibold);--tw-tracking:.1em;letter-spacing:.1em;color:var(--ink);text-transform:uppercase}.spark-figure figcaption .muted{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal);text-transform:none}.spark{width:100%;max-width:100%;height:auto}.spark .s0{fill:var(--good)}.spark .s1{fill:var(--loved)}.spark .s2{fill:var(--down)}.spark .s3{fill:var(--accent)}.spark .s4{fill:var(--muted)}.spark .s5{fill:var(--ink)}.spark .line{stroke:var(--accent)}.spark-axis{margin-top:var(--spacing);--tw-tracking:.08em;letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;font-size:.66rem;display:flex}.spark-legend{margin-top:calc(var(--spacing) * 2);column-gap:calc(var(--spacing) * 3);row-gap:var(--spacing);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--muted);flex-wrap:wrap;display:flex}.spark-legend li{align-items:center;gap:calc(var(--spacing) * 1.5);display:flex}.settings-form>*+*{margin-top:calc(var(--spacing) * 5)}.setting{gap:calc(var(--spacing) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--rule);padding-block:calc(var(--spacing) * 3);display:grid}@media (min-width:48rem){.setting{gap:calc(var(--spacing) * 6);grid-template-columns:minmax(0,19rem) minmax(0,1fr)}}.setting:first-of-type{border-top-style:var(--tw-border-style);padding-top:var(--spacing);border-top-width:0}.setting-label{min-width:0}.setting-label label{display:inline-block}.setting-label code{--tw-font-weight:var(--font-weight-medium);font-size:.85rem;font-weight:var(--font-weight-medium);color:var(--ink);overflow-wrap:anywhere;background-color:#0000;padding:0}.setting-input{min-width:0}.setting-input>input,.setting-input>select,.setting-input>textarea{width:100%;max-width:var(--container-lg)}.help,.default{margin-top:var(--spacing);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--muted);overflow-wrap:anywhere}.setting-label .help{max-width:42ch}.secret{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--ink-2)}code.lines{margin-top:var(--spacing);white-space:pre-wrap;display:block}button.reset{margin-left:var(--spacing);border-style:var(--tw-border-style);min-height:0;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--muted);text-decoration-line:underline;-webkit-text-decoration-color:var(--rule);-webkit-text-decoration-color:var(--rule);text-decoration-color:var(--rule);text-underline-offset:2px;background-color:#0000;border-width:0;border-radius:0;padding:0;display:inline}@media (hover:hover){button.reset:hover{color:var(--ink)}}.save-bar{z-index:20;margin-inline:calc(var(--spacing) * -4);margin-top:calc(var(--spacing) * 6);justify-content:flex-end;align-items:center;column-gap:calc(var(--spacing) * 4);row-gap:calc(var(--spacing) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--rule);background-color:var(--paper);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);flex-wrap:wrap;display:flex;position:sticky;bottom:0}@media (min-width:40rem){.save-bar{margin-inline:calc(var(--spacing) * -6);padding-inline:calc(var(--spacing) * 6)}}.save-bar{box-shadow:0 -10px 18px -14px var(--ink)}@supports (color:color-mix(in lab, red, red)){.save-bar{box-shadow:0 -10px 18px -14px color-mix(in oklab, var(--ink) 55%, transparent)}}.save-bar .meta{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));margin-right:auto}.toc-progress{height:calc(var(--spacing) * .5);appearance:none;border-style:var(--tw-border-style);vertical-align:middle;background:var(--rule);border-width:0;width:100%;padding:0;display:block}.toc-progress::-webkit-progress-bar{background:var(--rule)}.toc-progress::-webkit-progress-value{background:var(--accent);transition:width .15s linear}.toc-progress::-moz-progress-bar{background:var(--accent)}.toc-progress[data-live]::-webkit-progress-value{transition:none}@media (prefers-reduced-motion:reduce){.toc-progress::-webkit-progress-value{transition:none}}[data-toc-panel]{scrollbar-width:thin;scrollbar-color:var(--rule) transparent}@media not all and (min-width:64rem){.has-js [data-toc-panel]:not([data-open=true]){display:none}}@media (max-width:40rem){.kv{display:block}.kv dt{margin-top:calc(var(--spacing) * 2)}.rating{align-items:stretch}.rating-prompt,.rating-note{flex-basis:100%}.rating-prompt{margin-bottom:calc(var(--spacing) * 2)}.filters label,.filters input,.filters select{width:100%}}}@layer utilities{.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-x-0{inset-inline:0}.top-0{top:0}.top-1{top:var(--spacing)}.top-3{top:calc(var(--spacing) * 3)}.top-4{top:calc(var(--spacing) * 4)}.top-20{top:calc(var(--spacing) * 20)}.top-40{top:calc(var(--spacing) * 40)}.top-120{top:calc(var(--spacing) * 120)}.top-full{top:100%}.-bottom-px{bottom:-1px}.left-3{left:calc(var(--spacing) * 3)}.z-30{z-index:30}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-0{margin:0}.mx-auto{margin-inline:auto}.my-4{margin-block:calc(var(--spacing) * 4)}.my-8{margin-block:calc(var(--spacing) * 8)}.my-12{margin-block:calc(var(--spacing) * 12)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-2\.5{margin-top:calc(var(--spacing) * 2.5)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-7{margin-top:calc(var(--spacing) * 7)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-auto{margin-top:auto}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-9{margin-bottom:calc(var(--spacing) * 9)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.-ml-2{margin-left:calc(var(--spacing) * -2)}.ml-1{margin-left:var(--spacing)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.table-cell{display:table-cell}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-10{height:calc(var(--spacing) * 10)}.max-h-\[70vh\]{max-height:70vh}.max-h-\[72vh\]{max-height:72vh}.max-h-\[calc\(100vh-2rem\)\]{max-height:calc(100vh - 2rem)}.min-h-8{min-height:calc(var(--spacing) * 8)}.min-h-10{min-height:calc(var(--spacing) * 10)}.min-h-11{min-height:calc(var(--spacing) * 11)}.min-h-12{min-height:calc(var(--spacing) * 12)}.min-h-24{min-height:calc(var(--spacing) * 24)}.min-h-\[68vh\]{min-height:68vh}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-10{width:calc(var(--spacing) * 10)}.w-64{width:calc(var(--spacing) * 64)}.w-full{width:100%}.max-w-7xl{max-width:var(--container-7xl)}.max-w-32{max-width:calc(var(--spacing) * 32)}.max-w-\[58ch\]{max-width:58ch}.max-w-\[68ch\]{max-width:68ch}.max-w-md{max-width:var(--container-md)}.min-w-0{min-width:0}.min-w-\[13rem\]{min-width:13rem}.flex-1{flex:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-y-20{--tw-translate-y:calc(var(--spacing) * -20);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.scroll-mt-4{scroll-margin-top:calc(var(--spacing) * 4)}.scroll-mt-6{scroll-margin-top:calc(var(--spacing) * 6)}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing) * 2)}.gap-x-3{column-gap:calc(var(--spacing) * 3)}.gap-x-4{column-gap:calc(var(--spacing) * 4)}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-y-1{row-gap:var(--spacing)}.gap-y-1\.5{row-gap:calc(var(--spacing) * 1.5)}.gap-y-3{row-gap:calc(var(--spacing) * 3)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-rule>:not(:last-child)){border-color:var(--rule)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-sm{border-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-y-0{border-block-style:var(--tw-border-style);border-block-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-b-\[3px\]{border-bottom-style:var(--tw-border-style);border-bottom-width:3px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-double{--tw-border-style:double;border-style:double}.border-accent{border-color:var(--accent)}.border-ink{border-color:var(--ink)}.border-rule{border-color:var(--rule)}.border-rule-strong{border-color:var(--rule-strong)}.border-transparent{border-color:#0000}.bg-accent{background-color:var(--accent)}.bg-ink{background-color:var(--ink)}.bg-paper{background-color:var(--paper)}.bg-paper-2{background-color:var(--paper-2)}.bg-transparent{background-color:#0000}.fill-none{fill:none}.stroke-current{stroke:currentColor}.p-0{padding:0}.p-4{padding:calc(var(--spacing) * 4)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0{padding-block:0}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-16{padding-block:calc(var(--spacing) * 16)}.py-20{padding-block:calc(var(--spacing) * 20)}.pt-0{padding-top:0}.pt-1{padding-top:var(--spacing)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-5{padding-top:calc(var(--spacing) * 5)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-7{padding-top:calc(var(--spacing) * 7)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-7{padding-bottom:calc(var(--spacing) * 7)}.pb-9{padding-bottom:calc(var(--spacing) * 9)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-5{padding-left:calc(var(--spacing) * 5)}.pl-6{padding-left:calc(var(--spacing) * 6)}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.font-serif{font-family:Newsreader,Iowan Old Style,Palatino Linotype,Georgia,serif}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.66rem\]{font-size:.66rem}.text-\[0\.68rem\]{font-size:.68rem}.text-\[0\.72rem\]{font-size:.72rem}.text-\[0\.95rem\]{font-size:.95rem}.leading-\[1\.1\]{--tw-leading:1.1;line-height:1.1}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-0\.01em\]{--tw-tracking:-.01em;letter-spacing:-.01em}.tracking-\[-0\.02em\]{--tw-tracking:-.02em;letter-spacing:-.02em}.tracking-\[0\.1em\]{--tw-tracking:.1em;letter-spacing:.1em}.tracking-\[0\.08em\]{--tw-tracking:.08em;letter-spacing:.08em}.tracking-\[0\.12em\]{--tw-tracking:.12em;letter-spacing:.12em}.tracking-normal{--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal)}.whitespace-nowrap{white-space:nowrap}.text-accent{color:var(--accent)}.text-down{color:var(--down)}.text-good{color:var(--good)}.text-ink{color:var(--ink)}.text-ink-2{color:var(--ink-2)}.text-loved{color:var(--loved)}.text-muted{color:var(--muted)}.text-paper{color:var(--paper)}.text-rule{color:var(--rule)}.text-warn{color:var(--warn)}.lowercase{text-transform:lowercase}.normal-case{text-transform:none}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.decoration-rule{-webkit-text-decoration-color:var(--rule);-webkit-text-decoration-color:var(--rule);text-decoration-color:var(--rule)}.underline-offset-4{text-underline-offset:4px}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_18px_32px_-26px_rgb\(0_0_0_\/_0\.6\)\]{--tw-shadow:0 18px 32px -26px var(--tw-shadow-color,#0009);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow\/backfill,.shadow\/compatibility,.shadow\/dry,.shadow\/maintenance{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-accent{--tw-ring-color:var(--accent)}.ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ring-offset-paper{--tw-ring-offset-color:var(--paper)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}@media (hover:hover){.group-hover\:text-accent:is(:where(.group):hover *){color:var(--accent)}}.marker\:text-muted ::marker{color:var(--muted)}.marker\:text-muted::marker{color:var(--muted)}.marker\:text-muted ::-webkit-details-marker{color:var(--muted)}.marker\:text-muted::-webkit-details-marker{color:var(--muted)}@media (hover:hover){.hover\:border-accent:hover{border-color:var(--accent)}.hover\:border-rule-strong:hover{border-color:var(--rule-strong)}.hover\:bg-paper-2:hover{background-color:var(--paper-2)}.hover\:text-accent:hover{color:var(--accent)}.hover\:text-accent-hover:hover{color:var(--accent-hover)}.hover\:text-ink:hover{color:var(--ink)}.hover\:decoration-accent:hover{-webkit-text-decoration-color:var(--accent);-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}}.focus\:translate-y-0:focus{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.focus\:border-ink:focus{border-color:var(--ink)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (min-width:40rem){.sm\:col-start-2{grid-column-start:2}.sm\:mt-12{margin-top:calc(var(--spacing) * 12)}.sm\:mt-14{margin-top:calc(var(--spacing) * 14)}.sm\:mt-16{margin-top:calc(var(--spacing) * 16)}.sm\:hidden{display:none}.sm\:inline{display:inline}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:gap-3{gap:calc(var(--spacing) * 3)}.sm\:gap-4{gap:calc(var(--spacing) * 4)}.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-4{padding-block:calc(var(--spacing) * 4)}.sm\:pt-6{padding-top:calc(var(--spacing) * 6)}.sm\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media (min-width:48rem){.md\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}}@media (min-width:64rem){.lg\:static{position:static}.lg\:sticky{position:sticky}.lg\:inset-x-auto{inset-inline:auto}.lg\:top-0{top:0}.lg\:top-6{top:calc(var(--spacing) * 6)}.lg\:z-10{z-index:10}.lg\:z-auto{z-index:auto}.lg\:mt-4{margin-top:calc(var(--spacing) * 4)}.lg\:mt-12{margin-top:calc(var(--spacing) * 12)}.lg\:block{display:block}.lg\:grid{display:grid}.lg\:hidden{display:none}.lg\:max-h-\[calc\(100vh-3rem\)\]{max-height:calc(100vh - 3rem)}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-\[16rem_minmax\(0\,1fr\)\]{grid-template-columns:16rem minmax(0,1fr)}.lg\:gap-x-10{column-gap:calc(var(--spacing) * 10)}.lg\:overflow-y-auto{overflow-y:auto}.lg\:border-0{border-style:var(--tw-border-style);border-width:0}.lg\:bg-paper{background-color:var(--paper)}.lg\:px-0{padding-inline:0}.lg\:px-6{padding-inline:calc(var(--spacing) * 6)}.lg\:py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.lg\:pt-0{padding-top:0}.lg\:pb-3{padding-bottom:calc(var(--spacing) * 3)}.lg\:pb-10{padding-bottom:calc(var(--spacing) * 10)}.lg\:shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}@media (min-width:80rem){.xl\:w-72{width:calc(var(--spacing) * 72)}.xl\:grid-cols-\[18rem_minmax\(0\,1fr\)\]{grid-template-columns:18rem minmax(0,1fr)}.xl\:gap-x-14{column-gap:calc(var(--spacing) * 14)}}.\[\&_\.comment-meta\]\:font-sans .comment-meta{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.\[\&_\.comment-meta\]\:text-sm .comment-meta{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.\[\&_\.comment-meta\]\:text-muted .comment-meta{color:var(--muted)}.\[\&_blockquote\.reply\]\:ml-6 blockquote.reply{margin-left:calc(var(--spacing) * 6)}.\[\&\>p\:first-child\]\:first-letter\:float-left>p:first-child:first-letter{float:left}.\[\&\>p\:first-child\]\:first-letter\:mt-1>p:first-child:first-letter{margin-top:var(--spacing)}.\[\&\>p\:first-child\]\:first-letter\:mr-2>p:first-child:first-letter{margin-right:calc(var(--spacing) * 2)}.\[\&\>p\:first-child\]\:first-letter\:font-serif>p:first-child:first-letter{font-family:Newsreader,Iowan Old Style,Palatino Linotype,Georgia,serif}.\[\&\>p\:first-child\]\:first-letter\:text-\[4\.6rem\]>p:first-child:first-letter{font-size:4.6rem}.\[\&\>p\:first-child\]\:first-letter\:leading-\[0\.72\]>p:first-child:first-letter{--tw-leading:.72;line-height:.72}.\[\&\>p\:first-child\]\:first-letter\:font-semibold>p:first-child:first-letter{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}}@font-face{font-family:Newsreader;font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;src:url(/static/Newsreader.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Newsreader;font-style:italic;font-weight:200 800;font-stretch:100%;font-display:swap;src:url(/static/Newsreader-italic.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--paper:#f6f3ec;--paper-2:#ece7db;--ink:#1c1b18;--ink-2:#4f4b43;--muted:#7a7568;--rule:#d8d2c4;--rule-strong:#1c1b18;--accent:#a3231f;--accent-hover:#7c1a16;--loved:#2f6f46;--good:#2f6a8f;--down:#9c3f36;--warn:#8a6d1f;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#151513;--paper-2:#1e1d1a;--ink:#ebe6da;--ink-2:#bfb9aa;--muted:#8f8a7d;--rule:#3a3833;--rule-strong:#ebe6da;--accent:#ef8c82;--accent-hover:#f7aaa2;--loved:#7fcb92;--good:#7fb8d8;--down:#ea8f84;--warn:#d9b45a;color-scheme:dark}}:root[data-theme=dark]{--paper:#151513;--paper-2:#1e1d1a;--ink:#ebe6da;--ink-2:#bfb9aa;--muted:#8f8a7d;--rule:#3a3833;--rule-strong:#ebe6da;--accent:#ef8c82;--accent-hover:#f7aaa2;--loved:#7fcb92;--good:#7fb8d8;--down:#ea8f84;--warn:#d9b45a;color-scheme:dark}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false} \ No newline at end of file +@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-serif:"Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, monospace;--spacing:.25rem;--container-md:28rem;--container-lg:32rem;--container-2xl:42rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-normal:0em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--radius-sm:.25rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--default-mono-font-family:ui-monospace, SFMono-Regular, Menlo, monospace;--color-paper:var(--paper);--color-paper-2:var(--paper-2);--color-ink:var(--ink)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])),[hidden]{display:none!important}html{background-color:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:var(--paper);--tw-leading:1.65;min-height:100vh;color:var(--ink);font-optical-sizing:auto;margin:0;font-family:Newsreader,Iowan Old Style,Palatino Linotype,Georgia,serif;font-size:1.0625rem;line-height:1.65}::selection{background:var(--accent)}@supports (color:color-mix(in lab, red, red)){::selection{background:color-mix(in oklab, var(--accent) 24%, transparent)}}a{color:var(--accent);-webkit-text-decoration-color:var(--rule);-webkit-text-decoration-color:var(--rule);text-decoration-color:var(--rule);text-underline-offset:4px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;transition-duration:.15s}@media (hover:hover){a:hover{color:var(--accent-hover)}}a:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--accent);--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--paper);--tw-outline-style:none;outline-style:none}h1,h2,h3{color:var(--ink);font-optical-sizing:auto}button,input,select,textarea{font:inherit;border-radius:var(--radius-sm);border-style:var(--tw-border-style);border-width:1px;border-color:var(--rule);background-color:var(--paper);padding-inline:calc(var(--spacing) * 2.5);padding-block:calc(var(--spacing) * 1.5);color:var(--ink);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;transition-duration:.15s}:is(button,input,select,textarea)::placeholder{color:var(--muted)}:is(button,input,select,textarea):focus{border-color:var(--ink);--tw-outline-style:none;outline-style:none}:is(button,input,select,textarea):focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--accent);--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--paper)}button{cursor:pointer}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;border-color:var(--rule);background-color:var(--paper-2);color:var(--muted)}textarea{min-height:calc(var(--spacing) * 28)}summary{cursor:pointer}table{border-collapse:collapse;width:100%;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:var(--leading-snug);line-height:var(--leading-snug);font-variant-numeric:tabular-nums}thead{z-index:10;background-color:var(--paper);position:sticky;top:0}th,td{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--rule);padding-inline:calc(var(--spacing) * 2);padding-block:calc(var(--spacing) * 2);text-align:left;vertical-align:top}th{--tw-font-weight:var(--font-weight-semibold);font-size:.72rem;font-weight:var(--font-weight-semibold);--tw-tracking:.1em;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}tbody tr{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;transition-duration:.15s}@media (hover:hover){tbody tr:hover{background-color:var(--paper-2)}}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}meter{height:calc(var(--spacing) * 2);border-radius:var(--radius-sm);appearance:none;background:var(--rule);width:100%;display:block}meter::-webkit-meter-bar{background:var(--rule);border:0;border-radius:2px;height:.5rem}meter::-webkit-meter-optimum-value{background:var(--good);border-radius:2px}meter::-webkit-meter-suboptimum-value{background:var(--good);border-radius:2px}meter::-webkit-meter-even-less-good-value{background:var(--good);border-radius:2px}meter.over::-webkit-meter-optimum-value{background:var(--down)}meter.over::-webkit-meter-suboptimum-value{background:var(--down)}meter.over::-webkit-meter-even-less-good-value{background:var(--down)}meter::-moz-meter-bar{background:var(--good);border-radius:2px}meter.over::-moz-meter-bar{background:var(--down)}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}}@layer components{.btn,.button{min-height:calc(var(--spacing) * 10);border-radius:var(--radius-sm);border-style:var(--tw-border-style);border-width:1px;border-color:var(--rule-strong);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--ink);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;background-color:#0000;justify-content:center;align-items:center;text-decoration-line:none;transition-duration:.15s;display:inline-flex}@media (hover:hover){:is(.btn,.button):hover{background-color:var(--ink);color:var(--paper)}}:is(.btn,.button):focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--accent);--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--paper);--tw-outline-style:none;outline-style:none}.btn-primary{min-height:calc(var(--spacing) * 10);border-radius:var(--radius-sm);border-style:var(--tw-border-style);border-width:1px;border-color:var(--ink);background-color:var(--ink);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--paper);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;justify-content:center;align-items:center;text-decoration-line:none;transition-duration:.15s;display:inline-flex}@media (hover:hover){.btn-primary:hover{border-color:var(--accent);background-color:var(--accent);color:var(--paper)}}.btn-primary:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--accent);--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--paper);--tw-outline-style:none;outline-style:none}.btn-quiet{min-height:calc(var(--spacing) * 9);align-items:center;gap:var(--spacing);border-radius:var(--radius-sm);border-style:var(--tw-border-style);padding-inline:calc(var(--spacing) * 2);padding-block:var(--spacing);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--muted);text-decoration-line:underline;-webkit-text-decoration-color:var(--rule);-webkit-text-decoration-color:var(--rule);text-decoration-color:var(--rule);text-underline-offset:4px;background-color:#0000;border-width:0;display:inline-flex}@media (hover:hover){.btn-quiet:hover{color:var(--ink);-webkit-text-decoration-color:var(--accent);-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}}.btn:disabled,.btn-primary:disabled,.btn-danger:disabled{cursor:not-allowed;border-color:var(--rule);background-color:var(--paper-2);color:var(--muted)}@media (hover:hover){:is(.btn:disabled,.btn-primary:disabled,.btn-danger:disabled):hover{background-color:var(--paper-2);color:var(--muted)}}.btn-danger,button.danger{min-height:calc(var(--spacing) * 9);border-radius:var(--radius-sm);border-style:var(--tw-border-style);border-width:1px;border-color:var(--down);padding-inline:calc(var(--spacing) * 2.5);padding-block:var(--spacing);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--down);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;background-color:#0000;justify-content:center;align-items:center;transition-duration:.15s;display:inline-flex}@media (hover:hover){:is(.btn-danger,button.danger):hover{background-color:var(--down);color:var(--paper)}}.badge{padding-inline:calc(var(--spacing) * 2);padding-block:calc(var(--spacing) * .5);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-leading:calc(var(--spacing) * 5);line-height:calc(var(--spacing) * 5);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap;color:var(--ink-2);background:var(--ink);border-radius:3.40282e38px;align-items:center;display:inline-flex}@supports (color:color-mix(in lab, red, red)){.badge{background:color-mix(in oklab, var(--ink) 8%, transparent)}}.badge.selected,.badge.loved,.badge.ok{color:var(--loved);background:var(--loved)}@supports (color:color-mix(in lab, red, red)){.badge.selected,.badge.loved,.badge.ok{background:color-mix(in oklab, var(--loved) 14%, transparent)}}.badge.good,.badge.assessed,.badge.triaged,.badge.degraded{color:var(--good);background:var(--good)}@supports (color:color-mix(in lab, red, red)){.badge.good,.badge.assessed,.badge.triaged,.badge.degraded{background:color-mix(in oklab, var(--good) 14%, transparent)}}.badge.down,.badge.excluded,.badge.failed,.badge.dry_run{color:var(--down);background:var(--down)}@supports (color:color-mix(in lab, red, red)){.badge.down,.badge.excluded,.badge.failed,.badge.dry_run{background:color-mix(in oklab, var(--down) 14%, transparent)}}.badge.shortlisted,.badge.admitted,.badge.eligible,.badge.cleared,.badge.reason,.badge.running,.badge.requested{color:var(--muted);background:var(--muted)}@supports (color:color-mix(in lab, red, red)){.badge.shortlisted,.badge.admitted,.badge.eligible,.badge.cleared,.badge.reason,.badge.running,.badge.requested{background:color-mix(in oklab, var(--muted) 14%, transparent)}}.badge.restart,.badge.warn{color:var(--warn);background:var(--warn)}@supports (color:color-mix(in lab, red, red)){.badge.restart,.badge.warn{background:color-mix(in oklab, var(--warn) 16%, transparent)}}.kv{column-gap:calc(var(--spacing) * 5);row-gap:calc(var(--spacing) * 1.5);grid-template-columns:minmax(9rem,1fr) 2fr;display:grid}.kv dt{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--muted)}.kv dd{min-width:0;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));overflow-wrap:anywhere;margin:0}.scroll-x{overscroll-behavior-inline:contain;max-width:100%;overflow-x:auto}.scroll-x>table{min-width:max-content}.scroll-x.tall{overscroll-behavior-block:contain;max-height:70vh;overflow-y:auto}.prose-body{--tw-leading:1.72;color:var(--ink);font-size:1.0625rem;line-height:1.72}.prose-body>*+*{margin-top:calc(var(--spacing) * 5)}.prose-body h2{margin-top:calc(var(--spacing) * 10);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--rule);padding-top:calc(var(--spacing) * 4);font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-leading:1.15;--tw-font-weight:var(--font-weight-semibold);line-height:1.15;font-weight:var(--font-weight-semibold);--tw-tracking:-.01em;letter-spacing:-.01em}.prose-body h3{margin-top:calc(var(--spacing) * 8);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.prose-body a{color:var(--ink);text-decoration-line:underline;-webkit-text-decoration-color:var(--rule);-webkit-text-decoration-color:var(--rule);text-decoration-color:var(--rule);text-underline-offset:4px}@media (hover:hover){.prose-body a:hover{color:var(--ink);-webkit-text-decoration-color:var(--accent);-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}}.prose-body img{margin-inline:auto;margin-block:calc(var(--spacing) * 7);border-radius:var(--radius-sm);text-align:center;max-width:100%;height:auto;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--muted);font-style:italic;display:block}.prose-body pre{border-radius:var(--radius-sm);background-color:var(--paper-2);max-width:100%;padding:calc(var(--spacing) * 4);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed);overflow-x:auto}.prose-body :not(pre)>code{border-radius:var(--radius-sm);background-color:var(--paper-2);padding-inline:var(--spacing);padding-block:calc(var(--spacing) * .5);font-size:.9em}.prose-body blockquote{margin-block:calc(var(--spacing) * 7);border-left-style:var(--tw-border-style);border-left-width:2px;border-color:var(--rule-strong);padding-left:calc(var(--spacing) * 5);color:var(--ink-2)}.prose-body ul{padding-left:calc(var(--spacing) * 6);list-style-type:disc}.prose-body ol{padding-left:calc(var(--spacing) * 6);list-style-type:decimal}.prose-body li::marker{color:var(--muted)}.prose-body li+li{margin-top:calc(var(--spacing) * 2)}.rating{margin-block:calc(var(--spacing) * 5);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));flex-wrap:wrap;align-items:center;display:flex}.rating-prompt{margin-right:calc(var(--spacing) * 3);--tw-tracking:.1em;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;font-size:.72rem}.rating button[data-label]:not(.clear){min-height:calc(var(--spacing) * 10);border-color:var(--rule);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);color:var(--ink);background-color:#0000;border-radius:0;margin-left:-1px}.rating button[data-label]:not(.clear):first-child{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm);margin-left:0}.rating button[data-label]:not(.clear):last-child{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}@media (hover:hover){.rating button[data-label]:not(.clear):hover{z-index:10;border-color:var(--ink);background-color:var(--paper-2)}}.rating button[data-label]:not(.clear).active{z-index:10;border-color:var(--ink);background-color:var(--ink);color:var(--paper)}.rating button.clear{margin-left:calc(var(--spacing) * 2);min-height:calc(var(--spacing) * 10);border-style:var(--tw-border-style);padding-inline:calc(var(--spacing) * 2);color:var(--muted);text-decoration-line:underline;-webkit-text-decoration-color:var(--rule);-webkit-text-decoration-color:var(--rule);text-decoration-color:var(--rule);text-underline-offset:4px;background-color:#0000;border-width:0}@media (hover:hover){.rating button.clear:hover{color:var(--ink)}}.rating button.clear.active{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--ink)}.rating-note{margin-top:calc(var(--spacing) * 2);width:100%;max-width:var(--container-md);align-items:center;gap:calc(var(--spacing) * 2);color:var(--muted);flex-basis:100%;display:flex}.rating-note input{flex:1}.flash{margin-block:calc(var(--spacing) * 4);border-left-style:var(--tw-border-style);border-left-width:4px;border-color:var(--accent);background-color:var(--paper-2);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.error{border-left-style:var(--tw-border-style);border-left-width:4px;border-color:var(--down);background-color:var(--paper-2);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--down)}.notice{border-left-style:var(--tw-border-style);border-left-width:4px;border-color:var(--warn);background-color:var(--paper-2);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--ink-2)}ul.error,ul.notice{padding-left:calc(var(--spacing) * 8);list-style-type:disc}.dashboard{margin-inline:auto;margin-block:calc(var(--spacing) * 8);max-width:var(--container-7xl);padding-inline:calc(var(--spacing) * 4);padding-bottom:calc(var(--spacing) * 6);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}@media (min-width:40rem){.dashboard{padding-inline:calc(var(--spacing) * 6)}}.dashboard>*+*{margin-top:calc(var(--spacing) * 4)}.dashboard h1{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);--tw-tracking:-.01em;letter-spacing:-.01em}.dashboard h2{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.dashboard h3{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.dashboard>h2{margin-top:calc(var(--spacing) * 9);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--rule);padding-top:calc(var(--spacing) * 3);--tw-font-weight:var(--font-weight-semibold);font-size:.78rem;font-weight:var(--font-weight-semibold);--tw-tracking:.14em;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}.dashboard>p,.dashboard>ul,.dashboard>ol{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.dashboard code{border-radius:var(--radius-sm);background-color:var(--paper-2);padding-inline:var(--spacing);padding-block:calc(var(--spacing) * .5);font-size:.85em}.dashboard pre code{background-color:#0000;padding:0}.dashboard table a{color:var(--ink);text-decoration-line:underline;-webkit-text-decoration-color:var(--rule);-webkit-text-decoration-color:var(--rule);text-decoration-color:var(--rule);text-underline-offset:2px}@media (hover:hover){.dashboard table a:hover{color:var(--ink);-webkit-text-decoration-color:var(--accent);-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}}.page-head{justify-content:space-between;align-items:flex-end;column-gap:calc(var(--spacing) * 6);row-gap:calc(var(--spacing) * 3);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--rule);padding-bottom:calc(var(--spacing) * 4);flex-wrap:wrap;display:flex}.page-head>div:first-child{min-width:0}.dashboard>.page-head+*{margin-top:calc(var(--spacing) * 6)}.page-desc{margin-top:calc(var(--spacing) * 1.5);max-width:74ch;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--muted)}.page-desc a{color:var(--accent)}.page-actions{align-items:center;gap:calc(var(--spacing) * 2);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));flex-wrap:wrap;display:flex}.page-eyebrow{--tw-tracking:.14em;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;font-size:.7rem}.tiles{gap:calc(var(--spacing) * 3);grid-template-columns:repeat(auto-fit,minmax(min(10.5rem,100%),1fr));display:grid}.tile{border-style:var(--tw-border-style);border-width:1px;border-color:var(--rule);min-width:0;padding-inline:calc(var(--spacing) * 3.5);padding-block:calc(var(--spacing) * 3)}.tile-label{--tw-font-weight:var(--font-weight-medium);font-size:.68rem;font-weight:var(--font-weight-medium);--tw-tracking:.12em;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;display:block}.tile-num{margin-top:var(--spacing);--tw-leading:var(--leading-tight);font-size:1.55rem;line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);--tw-tracking:-.01em;letter-spacing:-.01em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;display:block}.tile-delta{margin-top:var(--spacing);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--muted);overflow-wrap:anywhere;display:block}.cards{gap:calc(var(--spacing) * 4);grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));display:grid}.card{border-style:var(--tw-border-style);border-width:1px;border-color:var(--rule);min-width:0;padding:calc(var(--spacing) * 4)}.card>*+*{margin-top:calc(var(--spacing) * 3)}.card h2,.card h3{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.card>h2:first-child,.card>h3:first-child{margin-top:0}.card p,.card li{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.muted,.meta{color:var(--muted)}.jobs a,.picks>li>a:first-child{color:var(--ink);text-decoration-line:none}@media (hover:hover){:is(.jobs a,.picks>li>a:first-child):hover{color:var(--accent)}}.num{text-align:right;white-space:nowrap;--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.cell-wrap{white-space:normal;overflow-wrap:anywhere;min-width:10rem;max-width:24rem}.cell-tight{white-space:nowrap}.filters{align-items:flex-end;column-gap:calc(var(--spacing) * 4);row-gap:calc(var(--spacing) * 3);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:var(--rule);padding-block:calc(var(--spacing) * 3);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));flex-wrap:wrap;display:flex}.filters label{gap:var(--spacing);--tw-font-weight:var(--font-weight-medium);font-size:.66rem;font-weight:var(--font-weight-medium);--tw-tracking:.1em;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;display:grid}.filters input,.filters select,.filters textarea{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal);color:var(--ink);text-transform:none}.filters select,.filters input[type=date]{min-width:calc(var(--spacing) * 32)}.filters .filter-actions{align-items:center;gap:calc(var(--spacing) * 3);display:flex}.form-inline{align-items:center;gap:calc(var(--spacing) * 3);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));flex-wrap:wrap;display:flex}.form-inline label{align-items:center;gap:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));display:flex}.table-filter{margin-block:calc(var(--spacing) * 2);width:calc(var(--spacing) * 80);max-width:100%;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.pager{justify-content:space-between;align-items:center;column-gap:calc(var(--spacing) * 6);row-gap:calc(var(--spacing) * 2);padding-block:var(--spacing);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--muted);flex-wrap:wrap;display:flex}.pager a{color:var(--ink);text-decoration-line:none}@media (hover:hover){.pager a:hover{color:var(--accent)}}.run-nav{justify-content:space-between;align-items:center;column-gap:calc(var(--spacing) * 6);row-gap:calc(var(--spacing) * 2);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));flex-wrap:wrap;display:flex}.run-nav a{color:var(--ink);text-decoration-line:none}@media (hover:hover){.run-nav a:hover{color:var(--accent)}}.tabs{align-items:center;column-gap:calc(var(--spacing) * 6);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--rule);--tw-font-weight:var(--font-weight-medium);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:.72rem;font-weight:var(--font-weight-medium);--tw-tracking:.12em;letter-spacing:.12em;text-transform:uppercase;flex-wrap:wrap;display:flex}.tabs a{min-height:calc(var(--spacing) * 10);border-bottom-style:var(--tw-border-style);color:var(--muted);border-color:#0000;border-bottom-width:2px;align-items:center;margin-bottom:-1px;text-decoration-line:none;display:flex}@media (hover:hover){.tabs a:hover{color:var(--ink)}}.tabs a.active{border-color:var(--accent);color:var(--ink)}.pagination{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--muted)}tr.superseded>td,tr.superseded a{color:var(--muted)}td .rating,.picks .rating{margin-block:calc(var(--spacing) * 1.5);row-gap:var(--spacing);max-width:15rem;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}td .rating-prompt,.picks .rating-prompt{display:none}td .rating button[data-label]:not(.clear),.picks .rating button[data-label]:not(.clear){min-height:calc(var(--spacing) * 8);padding-inline:calc(var(--spacing) * 2.5);padding-block:var(--spacing);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}td .rating button.clear,.picks .rating button.clear{margin-left:calc(var(--spacing) * 2);min-height:calc(var(--spacing) * 8);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-inline:0}td .rating-note{margin-top:var(--spacing);gap:calc(var(--spacing) * 1.5);max-width:15rem;font-size:.7rem}td .rating-note input{padding-inline:calc(var(--spacing) * 1.5);padding-block:calc(var(--spacing) * .5);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.picks .rating{max-width:none}pre.block,pre.preview,pre.journal{border-radius:var(--radius-sm);background-color:var(--paper-2);padding:calc(var(--spacing) * 3);--tw-leading:var(--leading-relaxed);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8125rem;line-height:var(--leading-relaxed);white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto}pre.block{max-height:calc(var(--spacing) * 64)}pre.preview{max-height:calc(var(--spacing) * 56)}pre.journal{max-height:34rem;padding:calc(var(--spacing) * 4)}pre.prompt,pre.learned{max-height:32rem}td>pre.preview{max-height:calc(var(--spacing) * 24);max-width:var(--container-md);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--muted);background-color:#0000;padding:0}details.disclosure{border-style:var(--tw-border-style);border-width:1px;border-color:var(--rule)}details.disclosure>summary{padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}details.disclosure[open]>summary{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--rule)}details.disclosure>.disclosure-body{padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}details.disclosure>.disclosure-body>*+*{margin-top:calc(var(--spacing) * 3)}details.signals>summary{min-width:0}.signals-body{margin-top:calc(var(--spacing) * 2);max-width:var(--container-2xl);border-left-style:var(--tw-border-style);border-left-width:2px;border-color:var(--rule);padding-left:calc(var(--spacing) * 3);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.signals-body>*+*{margin-top:calc(var(--spacing) * 2)}.signals-body ul{padding-left:calc(var(--spacing) * 5);list-style-type:disc}.funnel{border-radius:var(--radius-sm);background-color:var(--paper-2);width:100%;min-width:6rem}.funnel>*{border-radius:var(--radius-sm);background-color:var(--good);min-width:1px;display:block}.funnel-cell{vertical-align:middle;width:14rem;min-width:8rem}.sparklines{gap:calc(var(--spacing) * 4);grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));display:grid}.spark-figure{border-style:var(--tw-border-style);border-width:1px;border-color:var(--rule);min-width:0;padding:calc(var(--spacing) * 3);margin:0}.spark-figure figcaption{margin-bottom:calc(var(--spacing) * 2);--tw-font-weight:var(--font-weight-semibold);font-size:.7rem;font-weight:var(--font-weight-semibold);--tw-tracking:.1em;letter-spacing:.1em;color:var(--ink);text-transform:uppercase}.spark-figure figcaption .muted{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal);text-transform:none}.spark{width:100%;max-width:100%;height:auto}.spark .s0{fill:var(--good)}.spark .s1{fill:var(--loved)}.spark .s2{fill:var(--down)}.spark .s3{fill:var(--accent)}.spark .s4{fill:var(--muted)}.spark .s5{fill:var(--ink)}.spark .line{stroke:var(--accent)}.spark-axis{margin-top:var(--spacing);--tw-tracking:.08em;letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;font-size:.66rem;display:flex}.spark-legend{margin-top:calc(var(--spacing) * 2);column-gap:calc(var(--spacing) * 3);row-gap:var(--spacing);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--muted);flex-wrap:wrap;display:flex}.spark-legend li{align-items:center;gap:calc(var(--spacing) * 1.5);display:flex}.settings-form>*+*{margin-top:calc(var(--spacing) * 5)}.setting{gap:calc(var(--spacing) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--rule);padding-block:calc(var(--spacing) * 3);display:grid}@media (min-width:48rem){.setting{gap:calc(var(--spacing) * 6);grid-template-columns:minmax(0,19rem) minmax(0,1fr)}}.setting:first-of-type{border-top-style:var(--tw-border-style);padding-top:var(--spacing);border-top-width:0}.setting-label{min-width:0}.setting-label label{display:inline-block}.setting-label code{--tw-font-weight:var(--font-weight-medium);font-size:.85rem;font-weight:var(--font-weight-medium);color:var(--ink);overflow-wrap:anywhere;background-color:#0000;padding:0}.setting-input{min-width:0}.setting-input>input,.setting-input>select,.setting-input>textarea{width:100%;max-width:var(--container-lg)}.help,.default{margin-top:var(--spacing);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--muted);overflow-wrap:anywhere}.setting-label .help{max-width:42ch}.secret{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--ink-2)}code.lines{margin-top:var(--spacing);white-space:pre-wrap;display:block}button.reset{margin-left:var(--spacing);border-style:var(--tw-border-style);min-height:0;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--muted);text-decoration-line:underline;-webkit-text-decoration-color:var(--rule);-webkit-text-decoration-color:var(--rule);text-decoration-color:var(--rule);text-underline-offset:2px;background-color:#0000;border-width:0;border-radius:0;padding:0;display:inline}@media (hover:hover){button.reset:hover{color:var(--ink)}}.save-bar{z-index:20;margin-inline:calc(var(--spacing) * -4);margin-top:calc(var(--spacing) * 6);justify-content:flex-end;align-items:center;column-gap:calc(var(--spacing) * 4);row-gap:calc(var(--spacing) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--rule);background-color:var(--paper);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);flex-wrap:wrap;display:flex;position:sticky;bottom:0}@media (min-width:40rem){.save-bar{margin-inline:calc(var(--spacing) * -6);padding-inline:calc(var(--spacing) * 6)}}.save-bar{box-shadow:0 -10px 18px -14px var(--ink)}@supports (color:color-mix(in lab, red, red)){.save-bar{box-shadow:0 -10px 18px -14px color-mix(in oklab, var(--ink) 55%, transparent)}}.save-bar .meta{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));margin-right:auto}.toc-progress{height:calc(var(--spacing) * .5);appearance:none;border-style:var(--tw-border-style);vertical-align:middle;background:var(--rule);border-width:0;width:100%;padding:0;display:block}.toc-progress::-webkit-progress-bar{background:var(--rule)}.toc-progress::-webkit-progress-value{background:var(--accent);transition:width .15s linear}.toc-progress::-moz-progress-bar{background:var(--accent)}.toc-progress[data-live]::-webkit-progress-value{transition:none}@media (prefers-reduced-motion:reduce){.toc-progress::-webkit-progress-value{transition:none}}[data-toc-panel]{scrollbar-width:thin;scrollbar-color:var(--rule) transparent;scrollbar-gutter:stable}[data-toc-panel]::-webkit-scrollbar{width:.5rem}[data-toc-panel]::-webkit-scrollbar-thumb{background:var(--rule);background-clip:padding-box;border:2px solid #0000}.toc-link{min-height:calc(var(--spacing) * 11);align-items:baseline;gap:calc(var(--spacing) * 2);border-left-style:var(--tw-border-style);padding-block:calc(var(--spacing) * 2.5);padding-left:calc(var(--spacing) * 3);color:var(--ink-2);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;border-color:#0000;border-left-width:2px;text-decoration-line:none;transition-duration:.15s;display:flex}@media (hover:hover){.toc-link:hover{border-color:var(--rule-strong);color:var(--accent)}}.toc-link:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--accent);--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-offset-color:var(--paper);--tw-outline-style:none;outline-style:none}@media (min-width:64rem){.toc-link{min-height:calc(var(--spacing) * 10);padding-block:calc(var(--spacing) * 1.5)}}.toc-link[data-passed],.toc-link[data-passed]>span:first-child{color:var(--ink)}.toc-link[aria-current]{border-color:var(--accent);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--ink)}.toc-toggle-icon{opacity:1;filter:blur();transition-property:opacity,scale,filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,0,0,1);scale:1}.toc-toggle-icon-close,[data-toc-toggle][aria-expanded=true] .toc-toggle-icon-menu{opacity:0;filter:blur(4px);scale:.25}[data-toc-toggle][aria-expanded=true] .toc-toggle-icon-close{opacity:1;filter:blur();scale:1}@media not all and (min-width:64rem){html.toc-panel-open{scrollbar-gutter:stable;overflow:hidden}.has-js [data-toc-panel][data-open=true]{height:calc(100dvh - var(--toc-panel-top,3rem));max-height:calc(100dvh - var(--toc-panel-top,3rem))}.has-js [data-toc-panel]:not([data-open=true]){display:none}}@media (max-width:40rem){.kv{display:block}.kv dt{margin-top:calc(var(--spacing) * 2)}.rating{align-items:stretch}.rating-prompt,.rating-note{flex-basis:100%}.rating-prompt{margin-bottom:calc(var(--spacing) * 2)}.filters label,.filters input,.filters select{width:100%}}}@layer utilities{.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-x-0{inset-inline:0}.top-0{top:0}.top-1{top:var(--spacing)}.top-3{top:calc(var(--spacing) * 3)}.top-4{top:calc(var(--spacing) * 4)}.top-20{top:calc(var(--spacing) * 20)}.top-40{top:calc(var(--spacing) * 40)}.top-120{top:calc(var(--spacing) * 120)}.top-full{top:100%}.-bottom-px{bottom:-1px}.left-3{left:calc(var(--spacing) * 3)}.z-30{z-index:30}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-0{margin:0}.mx-auto{margin-inline:auto}.my-4{margin-block:calc(var(--spacing) * 4)}.my-8{margin-block:calc(var(--spacing) * 8)}.my-12{margin-block:calc(var(--spacing) * 12)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-2\.5{margin-top:calc(var(--spacing) * 2.5)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-7{margin-top:calc(var(--spacing) * 7)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-auto{margin-top:auto}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-9{margin-bottom:calc(var(--spacing) * 9)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.-ml-2{margin-left:calc(var(--spacing) * -2)}.ml-1{margin-left:var(--spacing)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.table-cell{display:table-cell}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-11{height:calc(var(--spacing) * 11)}.max-h-\[70vh\]{max-height:70vh}.max-h-\[72vh\]{max-height:72vh}.max-h-\[calc\(100vh-2rem\)\]{max-height:calc(100vh - 2rem)}.min-h-8{min-height:calc(var(--spacing) * 8)}.min-h-10{min-height:calc(var(--spacing) * 10)}.min-h-11{min-height:calc(var(--spacing) * 11)}.min-h-12{min-height:calc(var(--spacing) * 12)}.min-h-24{min-height:calc(var(--spacing) * 24)}.min-h-\[68vh\]{min-height:68vh}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-11{width:calc(var(--spacing) * 11)}.w-64{width:calc(var(--spacing) * 64)}.w-\[13rem\]{width:13rem}.w-full{width:100%}.max-w-7xl{max-width:var(--container-7xl)}.max-w-32{max-width:calc(var(--spacing) * 32)}.max-w-\[58ch\]{max-width:58ch}.max-w-\[68ch\]{max-width:68ch}.max-w-md{max-width:var(--container-md)}.min-w-0{min-width:0}.min-w-\[13rem\]{min-width:13rem}.flex-1{flex:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.table-fixed{table-layout:fixed}.-translate-y-20{--tw-translate-y:calc(var(--spacing) * -20);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.scroll-mt-4{scroll-margin-top:calc(var(--spacing) * 4)}.scroll-mt-6{scroll-margin-top:calc(var(--spacing) * 6)}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing) * 2)}.gap-x-3{column-gap:calc(var(--spacing) * 3)}.gap-x-4{column-gap:calc(var(--spacing) * 4)}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-y-1{row-gap:var(--spacing)}.gap-y-1\.5{row-gap:calc(var(--spacing) * 1.5)}.gap-y-3{row-gap:calc(var(--spacing) * 3)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-rule>:not(:last-child)){border-color:var(--rule)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded-sm{border-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-y-0{border-block-style:var(--tw-border-style);border-block-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-b-\[3px\]{border-bottom-style:var(--tw-border-style);border-bottom-width:3px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-double{--tw-border-style:double;border-style:double}.border-accent{border-color:var(--accent)}.border-ink{border-color:var(--ink)}.border-rule{border-color:var(--rule)}.border-rule-strong{border-color:var(--rule-strong)}.border-transparent{border-color:#0000}.bg-accent{background-color:var(--accent)}.bg-ink{background-color:var(--ink)}.bg-paper{background-color:var(--paper)}.bg-paper-2{background-color:var(--paper-2)}.bg-transparent{background-color:#0000}.fill-none{fill:none}.stroke-current{stroke:currentColor}.p-0{padding:0}.p-4{padding:calc(var(--spacing) * 4)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0{padding-block:0}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-16{padding-block:calc(var(--spacing) * 16)}.py-20{padding-block:calc(var(--spacing) * 20)}.pt-0{padding-top:0}.pt-1{padding-top:var(--spacing)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-5{padding-top:calc(var(--spacing) * 5)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-7{padding-top:calc(var(--spacing) * 7)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pr-6{padding-right:calc(var(--spacing) * 6)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-7{padding-bottom:calc(var(--spacing) * 7)}.pb-9{padding-bottom:calc(var(--spacing) * 9)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-5{padding-left:calc(var(--spacing) * 5)}.pl-6{padding-left:calc(var(--spacing) * 6)}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.font-serif{font-family:Newsreader,Iowan Old Style,Palatino Linotype,Georgia,serif}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.8rem\]{font-size:.8rem}.text-\[0\.66rem\]{font-size:.66rem}.text-\[0\.68rem\]{font-size:.68rem}.text-\[0\.72rem\]{font-size:.72rem}.text-\[0\.95rem\]{font-size:.95rem}.leading-\[1\.1\]{--tw-leading:1.1;line-height:1.1}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-0\.01em\]{--tw-tracking:-.01em;letter-spacing:-.01em}.tracking-\[-0\.02em\]{--tw-tracking:-.02em;letter-spacing:-.02em}.tracking-\[0\.1em\]{--tw-tracking:.1em;letter-spacing:.1em}.tracking-\[0\.08em\]{--tw-tracking:.08em;letter-spacing:.08em}.tracking-\[0\.12em\]{--tw-tracking:.12em;letter-spacing:.12em}.tracking-normal{--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal)}.text-wrap{text-wrap:wrap}.whitespace-nowrap{white-space:nowrap}.text-accent{color:var(--accent)}.text-down{color:var(--down)}.text-good{color:var(--good)}.text-ink{color:var(--ink)}.text-ink-2{color:var(--ink-2)}.text-loved{color:var(--loved)}.text-muted{color:var(--muted)}.text-paper{color:var(--paper)}.text-rule{color:var(--rule)}.text-warn{color:var(--warn)}.lowercase{text-transform:lowercase}.normal-case{text-transform:none}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.decoration-rule{-webkit-text-decoration-color:var(--rule);-webkit-text-decoration-color:var(--rule);text-decoration-color:var(--rule)}.underline-offset-4{text-underline-offset:4px}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_18px_32px_-26px_rgb\(0_0_0_\/_0\.6\)\]{--tw-shadow:0 18px 32px -26px var(--tw-shadow-color,#0009);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow\/backfill,.shadow\/compatibility,.shadow\/dry,.shadow\/maintenance{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-accent{--tw-ring-color:var(--accent)}.ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ring-offset-paper{--tw-ring-offset-color:var(--paper)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.group-hover\:text-accent:is(:where(.group):hover *){color:var(--accent)}}.marker\:text-muted ::marker{color:var(--muted)}.marker\:text-muted::marker{color:var(--muted)}.marker\:text-muted ::-webkit-details-marker{color:var(--muted)}.marker\:text-muted::-webkit-details-marker{color:var(--muted)}@media (hover:hover){.hover\:border-accent:hover{border-color:var(--accent)}.hover\:bg-paper-2:hover{background-color:var(--paper-2)}.hover\:text-accent:hover{color:var(--accent)}.hover\:text-accent-hover:hover{color:var(--accent-hover)}.hover\:text-ink:hover{color:var(--ink)}.hover\:decoration-accent:hover{-webkit-text-decoration-color:var(--accent);-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}}.focus\:translate-y-0:focus{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.focus\:border-ink:focus{border-color:var(--ink)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.active\:scale-\[0\.96\]:active{scale:.96}@media (min-width:40rem){.sm\:col-start-2{grid-column-start:2}.sm\:mt-12{margin-top:calc(var(--spacing) * 12)}.sm\:mt-14{margin-top:calc(var(--spacing) * 14)}.sm\:mt-16{margin-top:calc(var(--spacing) * 16)}.sm\:hidden{display:none}.sm\:inline{display:inline}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:gap-3{gap:calc(var(--spacing) * 3)}.sm\:gap-4{gap:calc(var(--spacing) * 4)}.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-4{padding-block:calc(var(--spacing) * 4)}.sm\:pt-6{padding-top:calc(var(--spacing) * 6)}.sm\:pr-8{padding-right:calc(var(--spacing) * 8)}.sm\:pl-6{padding-left:calc(var(--spacing) * 6)}.sm\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media (min-width:48rem){.md\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}}@media (min-width:64rem){.lg\:static{position:static}.lg\:sticky{position:sticky}.lg\:inset-x-auto{inset-inline:auto}.lg\:top-0{top:0}.lg\:top-6{top:calc(var(--spacing) * 6)}.lg\:z-10{z-index:10}.lg\:z-auto{z-index:auto}.lg\:mt-4{margin-top:calc(var(--spacing) * 4)}.lg\:mt-12{margin-top:calc(var(--spacing) * 12)}.lg\:block{display:block}.lg\:grid{display:grid}.lg\:hidden{display:none}.lg\:max-h-\[calc\(100dvh-3rem\)\]{max-height:calc(100dvh - 3rem)}.lg\:max-h-\[calc\(100vh-3rem\)\]{max-height:calc(100vh - 3rem)}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-\[16rem_minmax\(0\,1fr\)\]{grid-template-columns:16rem minmax(0,1fr)}.lg\:gap-x-10{column-gap:calc(var(--spacing) * 10)}.lg\:overflow-y-auto{overflow-y:auto}.lg\:border-0{border-style:var(--tw-border-style);border-width:0}.lg\:bg-paper{background-color:var(--paper)}.lg\:px-0{padding-inline:0}.lg\:px-6{padding-inline:calc(var(--spacing) * 6)}.lg\:pt-0{padding-top:0}.lg\:pr-3{padding-right:calc(var(--spacing) * 3)}.lg\:pb-3{padding-bottom:calc(var(--spacing) * 3)}.lg\:pb-10{padding-bottom:calc(var(--spacing) * 10)}.lg\:pl-0{padding-left:0}.lg\:shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}@media (min-width:80rem){.xl\:w-72{width:calc(var(--spacing) * 72)}.xl\:grid-cols-\[18rem_minmax\(0\,1fr\)\]{grid-template-columns:18rem minmax(0,1fr)}.xl\:gap-x-14{column-gap:calc(var(--spacing) * 14)}}.\[\&_\.comment-meta\]\:font-sans .comment-meta{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.\[\&_\.comment-meta\]\:text-sm .comment-meta{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.\[\&_\.comment-meta\]\:text-muted .comment-meta{color:var(--muted)}.\[\&_blockquote\.reply\]\:ml-6 blockquote.reply{margin-left:calc(var(--spacing) * 6)}.\[\&\>p\:first-child\]\:first-letter\:float-left>p:first-child:first-letter{float:left}.\[\&\>p\:first-child\]\:first-letter\:mt-1>p:first-child:first-letter{margin-top:var(--spacing)}.\[\&\>p\:first-child\]\:first-letter\:mr-2>p:first-child:first-letter{margin-right:calc(var(--spacing) * 2)}.\[\&\>p\:first-child\]\:first-letter\:font-serif>p:first-child:first-letter{font-family:Newsreader,Iowan Old Style,Palatino Linotype,Georgia,serif}.\[\&\>p\:first-child\]\:first-letter\:text-\[4\.6rem\]>p:first-child:first-letter{font-size:4.6rem}.\[\&\>p\:first-child\]\:first-letter\:leading-\[0\.72\]>p:first-child:first-letter{--tw-leading:.72;line-height:.72}.\[\&\>p\:first-child\]\:first-letter\:font-semibold>p:first-child:first-letter{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}}@font-face{font-family:Newsreader;font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;src:url(/static/Newsreader.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Newsreader;font-style:italic;font-weight:200 800;font-stretch:100%;font-display:swap;src:url(/static/Newsreader-italic.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--paper:#f6f3ec;--paper-2:#ece7db;--ink:#1c1b18;--ink-2:#4f4b43;--muted:#7a7568;--rule:#d8d2c4;--rule-strong:#1c1b18;--accent:#a3231f;--accent-hover:#7c1a16;--loved:#2f6f46;--good:#2f6a8f;--down:#9c3f36;--warn:#8a6d1f;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#151513;--paper-2:#1e1d1a;--ink:#ebe6da;--ink-2:#bfb9aa;--muted:#8f8a7d;--rule:#3a3833;--rule-strong:#ebe6da;--accent:#ef8c82;--accent-hover:#f7aaa2;--loved:#7fcb92;--good:#7fb8d8;--down:#ea8f84;--warn:#d9b45a;color-scheme:dark}}:root[data-theme=dark]{--paper:#151513;--paper-2:#1e1d1a;--ink:#ebe6da;--ink-2:#bfb9aa;--muted:#8f8a7d;--rule:#3a3833;--rule-strong:#ebe6da;--accent:#ef8c82;--accent-hover:#f7aaa2;--loved:#7fcb92;--good:#7fb8d8;--down:#ea8f84;--warn:#d9b45a;color-scheme:dark}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false} \ No newline at end of file diff --git a/src/web/static/app.js b/src/web/static/app.js index 9d165a5..b3559c9 100644 --- a/src/web/static/app.js +++ b/src/web/static/app.js @@ -111,27 +111,51 @@ document.querySelectorAll("[data-refresh]").forEach((element) => { const seconds = Number(element.dataset.refresh); if (seconds > 0) setTimeout(() => window.location.reload(), seconds * 1000); }); -/* step 4: table-of-contents panel (below `lg`) and reading-progress bar */ +/* step 4: table-of-contents panel, current chapter, and reading progress */ const tocPanel = document.querySelector("[data-toc-panel]"); const tocToggle = document.querySelector("[data-toc-toggle]"); if (tocPanel) { + const tocBar = document.querySelector("[data-toc-bar]"); + const tocLinks = Array.from(tocPanel.querySelectorAll(".toc-link")); + const tocBars = document.querySelectorAll("[data-toc-progress]"); + const tocLabel = document.querySelector("[data-toc-label]"); + const tocCount = document.querySelector("[data-toc-count]"); + const tocStatus = document.querySelector("[data-toc-status]"); + const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)"); + const largeScreen = window.matchMedia("(min-width: 64rem)"); + // Long issues overflow the sidebar; scroll just enough to show where we are. const revealCurrent = () => { - const current = tocPanel.querySelector("a[aria-current=page]"); + const current = tocPanel.querySelector(".toc-link[aria-current]"); if (!current || tocPanel.scrollHeight <= tocPanel.clientHeight) return; - const margin = 24; - const top = current.offsetTop - margin; - const bottom = current.offsetTop + current.offsetHeight + margin; - if (bottom > tocPanel.scrollTop + tocPanel.clientHeight) { - tocPanel.scrollTop = bottom - tocPanel.clientHeight; - } else if (top < tocPanel.scrollTop) { - tocPanel.scrollTop = Math.max(0, top); - } + const stickyHeader = tocPanel.querySelector(":scope > div"); + const topMargin = (stickyHeader && stickyHeader.offsetHeight > 0 ? stickyHeader.offsetHeight : 0) + 24; + const panelRect = tocPanel.getBoundingClientRect(); + const currentRect = current.getBoundingClientRect(); + const top = tocPanel.scrollTop + currentRect.top - panelRect.top; + const visibleTop = tocPanel.scrollTop + topMargin; + const visibleBottom = tocPanel.scrollTop + tocPanel.clientHeight - 24; + if (top >= visibleTop && top + currentRect.height <= visibleBottom) return; + const target = Math.max(0, top - Math.max(topMargin, (tocPanel.clientHeight - currentRect.height) / 2)); + tocPanel.scrollTo({ top: target, behavior: reducedMotion.matches ? "auto" : "smooth" }); + }; + const sizeOpenPanel = () => { + if (tocPanel.dataset.open !== "true" || largeScreen.matches || !tocBar) return; + tocPanel.style.setProperty("--toc-panel-top", `${Math.max(0, tocBar.getBoundingClientRect().bottom)}px`); }; const setOpen = (open) => { tocPanel.dataset.open = open ? "true" : "false"; - if (tocToggle) tocToggle.setAttribute("aria-expanded", open ? "true" : "false"); - if (open) revealCurrent(); + document.documentElement.classList.toggle("toc-panel-open", open && !largeScreen.matches); + if (tocToggle) { + tocToggle.setAttribute("aria-expanded", open ? "true" : "false"); + tocToggle.setAttribute("aria-label", open ? "Close contents" : "Contents"); + } + if (open) { + sizeOpenPanel(); + revealCurrent(); + } else { + tocPanel.style.removeProperty("--toc-panel-top"); + } }; setOpen(false); revealCurrent(); @@ -147,33 +171,93 @@ if (tocPanel) { setOpen(false); tocToggle.focus(); }); - window.matchMedia("(min-width: 64rem)").addEventListener("change", () => setOpen(false)); + largeScreen.addEventListener("change", () => setOpen(false)); + window.addEventListener("resize", sizeOpenPanel); + if (window.visualViewport) window.visualViewport.addEventListener("resize", sizeOpenPanel); } -} -const tocBars = document.querySelectorAll("[data-toc-progress]"); -const tocChapter = document.querySelector("[data-toc-scroll]"); -if (tocBars.length && tocChapter) { - // "Chapter N" is worth position N once finished; show N-1 plus how far down we are. - const base = Math.max(0, Number(tocBars[0].getAttribute("value")) - 1); - let queued = false; - const paint = () => { - queued = false; - const start = window.scrollY + tocChapter.getBoundingClientRect().top; - const end = start + tocChapter.offsetHeight - window.innerHeight; - const read = end > start ? (window.scrollY - start) / (end - start) : 1; - const value = base + Math.min(1, Math.max(0, read)); - tocBars.forEach((bar) => { - // The CSS transition is for navigation, not for tracking a finger. - bar.dataset.live = "true"; - bar.value = value; + + let currentLink = tocPanel.querySelector(".toc-link[aria-current]"); + // Chapters above the current one read as "already passed" in ink rather than ink-2. + const markPassed = (link) => { + let passed = true; + tocLinks.forEach((candidate) => { + if (candidate === link) passed = false; + candidate.toggleAttribute("data-passed", passed); }); }; - const schedule = () => { - if (queued) return; - queued = true; - window.requestAnimationFrame(paint); + if (currentLink) markPassed(currentLink); + const setCurrent = (link) => { + if (!link || (link === currentLink && link.getAttribute("aria-current") === "location")) return; + tocLinks.forEach((candidate) => candidate.removeAttribute("aria-current")); + markPassed(link); + link.setAttribute("aria-current", "location"); + currentLink = link; + const position = Math.max(0, Number(link.dataset.tocPosition)); + const total = tocBars.length ? Number(tocBars[0].max) : 0; + const isEnd = link.hasAttribute("data-toc-end"); + const label = link.querySelector("[data-toc-link-label]"); + if (tocLabel && label) tocLabel.textContent = label.textContent; + if (tocCount) { + tocCount.hidden = position === 0 || isEnd; + tocCount.textContent = `${position} / ${total}`; + } + if (tocStatus) tocStatus.textContent = isEnd ? "End of issue" : position > 0 ? `Chapter ${position} of ${total}` : "Front page"; + tocBars.forEach((bar) => { + delete bar.dataset.live; + bar.value = position; + }); + revealCurrent(); }; - window.addEventListener("scroll", schedule, { passive: true }); - window.addEventListener("resize", schedule); - schedule(); + + const tocEntries = Array.from(document.querySelectorAll("[data-toc-entry]")).map((entry) => ({ + entry, + link: tocLinks.find((candidate) => candidate.getAttribute("href") === entry.dataset.tocEntry), + })).filter(({ link }) => link); + if (tocEntries.length) { + let queued = false; + const paintCurrent = () => { + queued = false; + const threshold = (tocBar ? tocBar.offsetHeight : 0) + window.innerHeight / 3; + let next = tocEntries[0].link; + tocEntries.forEach(({ entry, link }) => { + if (entry.getBoundingClientRect().top <= threshold) next = link; + }); + setCurrent(next); + }; + const scheduleCurrent = () => { + if (queued) return; + queued = true; + window.requestAnimationFrame(paintCurrent); + }; + window.addEventListener("scroll", scheduleCurrent, { passive: true }); + window.addEventListener("resize", scheduleCurrent); + scheduleCurrent(); + } + + const tocChapter = document.querySelector("[data-toc-scroll]"); + if (tocBars.length && tocChapter) { + // "Chapter N" is worth position N once finished; show N-1 plus how far down we are. + const base = Math.max(0, Number(tocBars[0].getAttribute("value")) - 1); + let queued = false; + const paint = () => { + queued = false; + const start = window.scrollY + tocChapter.getBoundingClientRect().top; + const end = start + tocChapter.offsetHeight - window.innerHeight; + const read = end > start ? (window.scrollY - start) / (end - start) : 1; + const value = base + Math.min(1, Math.max(0, read)); + tocBars.forEach((bar) => { + // The CSS transition is for navigation, not for tracking a finger. + bar.dataset.live = "true"; + bar.value = value; + }); + }; + const schedule = () => { + if (queued) return; + queued = true; + window.requestAnimationFrame(paint); + }; + window.addEventListener("scroll", schedule, { passive: true }); + window.addEventListener("resize", schedule); + schedule(); + } } diff --git a/src/web/tailwind.css b/src/web/tailwind.css index d5b08e6..6867441 100644 --- a/src/web/tailwind.css +++ b/src/web/tailwind.css @@ -259,9 +259,22 @@ /* While JS drives the bar from scroll position it must track the finger exactly. */ .toc-progress[data-live]::-webkit-progress-value { transition:none; } @media (prefers-reduced-motion: reduce) { .toc-progress::-webkit-progress-value { transition:none; } } - [data-toc-panel] { scrollbar-width:thin; scrollbar-color:var(--rule) transparent; } + [data-toc-panel] { scrollbar-width:thin; scrollbar-color:var(--rule) transparent; scrollbar-gutter:stable; } + [data-toc-panel]::-webkit-scrollbar { width:0.5rem; } + [data-toc-panel]::-webkit-scrollbar-thumb { border:2px solid transparent; background:var(--rule); background-clip:padding-box; } + .toc-link { @apply flex min-h-11 items-baseline gap-2 border-l-2 border-transparent py-2.5 pl-3 text-ink-2 no-underline transition-colors duration-150 hover:border-rule-strong hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-paper lg:min-h-10 lg:py-1.5; } + .toc-link[data-passed] { @apply text-ink; } + .toc-link[data-passed] > span:first-child { @apply text-ink; } + .toc-link[aria-current] { @apply border-accent font-semibold text-ink; } + .toc-toggle-icon { opacity:1; scale:1; filter:blur(0); transition-property:opacity, scale, filter; transition-duration:150ms; transition-timing-function:cubic-bezier(0.2, 0, 0, 1); } + .toc-toggle-icon-close { opacity:0; scale:0.25; filter:blur(4px); } + [data-toc-toggle][aria-expanded="true"] .toc-toggle-icon-menu { opacity:0; scale:0.25; filter:blur(4px); } + [data-toc-toggle][aria-expanded="true"] .toc-toggle-icon-close { opacity:1; scale:1; filter:blur(0); } /* Without JS the panel is simply visible under the bar; `has-js` is set in the head. */ @media (width < 64rem) { + /* Lock only the root: locking body as well makes body its own scroll container and un-sticks the bar. */ + html.toc-panel-open { overflow:hidden; scrollbar-gutter:stable; } + .has-js [data-toc-panel][data-open="true"] { height:calc(100dvh - var(--toc-panel-top, 3rem)); max-height:calc(100dvh - var(--toc-panel-top, 3rem)); } .has-js [data-toc-panel]:not([data-open="true"]) { display:none; } } @media (max-width:40rem) { diff --git a/src/web/templates/_toc.html b/src/web/templates/_toc.html index 299cd9f..c5fd16a 100644 --- a/src/web/templates/_toc.html +++ b/src/web/templates/_toc.html @@ -1,20 +1,21 @@
-
- - {{ toc.current_label() }} - {% if toc.position > 0 %}{{ toc.position }} / {{ toc.total }}{% endif %} + {{ toc.current_label() }} + {{ toc.position }} / {{ toc.total }}
-
diff --git a/src/web/templates/issue_full.html b/src/web/templates/issue_full.html index 9f1e88e..3613df7 100644 --- a/src/web/templates/issue_full.html +++ b/src/web/templates/issue_full.html @@ -2,12 +2,12 @@
{% include "_toc.html" %}

{{ display_date }} · No. {{ issue_number }}

{{ stats_line }}

-

The Brief

{{ front_page_html|safe }}
+

The Brief

{{ front_page_html|safe }}
{% if !downloads.is_empty() %}
{% for download in downloads %}Download {{ download.label }} {{ download.size }}{% endfor %}
{% endif %}

In This Issue

- {% for section in sections %}

{{ section.name }}

    {% for entry in section.entries %}

  • {{ entry.title }}

    {{ entry.source }} · {{ entry.reading_minutes }} min read

    {% if !entry.summary.is_empty() %}

    {{ entry.summary }}

    {% endif %}{% match entry.why %}{% when Some with (why) %}

    Why it's here: {{ why }}

    {% when None %}{% endmatch %}{% match entry.rating %}{% when Some with (widget) %}{% include "_rating_widget.html" %}{% when None %}{% endmatch %}
    • {% endfor %}
{% endfor %} + {% for section in sections %}

{{ section.name }}

    {% for entry in section.entries %}

  • {{ entry.title }}

    {{ entry.source }} · {{ entry.reading_minutes }} min read

    {% if !entry.summary.is_empty() %}

    {{ entry.summary }}

    {% endif %}{% match entry.why %}{% when Some with (why) %}

    Why it's here: {{ why }}

    {% when None %}{% endmatch %}{% match entry.rating %}{% when Some with (widget) %}{% include "_rating_widget.html" %}{% when None %}{% endmatch %}
    • {% endfor %}
{% endfor %}
{% if has_world || has_behind %}{% endif %} -

Colophon

The Daily EPUB is assembled every morning from a personal feed reader.

Generated
{{ colophon.generated_at }}
Bulk model
{{ colophon.bulk_model }}
Editor model
{{ colophon.editor_model }}
Summaries model
{{ colophon.summaries_model }}
Entries considered
{% match colophon.entries_fetched %}{% when Some with (entries) %}{{ entries }}{% match colophon.feeds_seen %}{% when Some with (feeds) %} from {{ feeds }} feeds{% when None %}{% endmatch %}{% when None %}n/a{% endmatch %}
Candidates scored
{% match colophon.candidates %}{% when Some with (candidates) %}{{ candidates }}{% when None %}n/a{% endmatch %}
Articles selected
{{ colophon.article_count }} across {{ colophon.section_count }} sections
Words
{{ colophon.total_words }} · ~{{ colophon.reading_minutes }} min read
{% for cost in colophon.provider_costs %}
{{ cost.provider }} cost
{{ cost.cost }}
{% endfor %}
Total token cost
{% match colophon.cost_usd %}{% when Some with (cost) %}{{ cost }}{% when None %}n/a{% endmatch %}
Generator
{{ colophon.generator_version }}
+
{% endblock %}