/* Shared styles for the per-paper pages (barista.html, ...).
   Loaded after style-starter.css and scoped under .pp so it follows the
   site's look: Nunito headings, Hind body, crimson theme, outlined buttons. */

:root {
  --pp-title: #1A1D2D;            /* site --title-color */
  --pp-text: #585858;             /* site --text-color */
  --pp-muted: #6c757d;            /* site --gray */
  --pp-theme: #cf0e4e;            /* site --theme-color */
  --pp-theme-soft: #cf0e4e12;
  --pp-bg: #ffffff;
  --pp-light: #f6f6f6;            /* site --light-bg-color */
  --pp-rule: #e3e3e3;
  --pp-rule-strong: #b9b9b9;
  --pp-ok: #1e7a4f;
  --pp-ok-soft: #1e7a4f14;
  --pp-code-bg: #f4f4f6;
  --pp-mono: "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Mermaid look from the paper's Figure 2 */
  --dfa-fill: #ececff;
  --dfa-stroke: #9370db;
  --dfa-text: #3b2f8f;

  /* chart series (validated on white) */
  --s-baseline: #b4791f;
  --s-dfa: #2f74a8;
  --s-barista: #c8103f;
  --o-1: #174d76;
  --o-2: #3f7fb3;
  --o-3: #86afd3;

  /* study answer categories (Correct / Compiler correct / Incorrect / Unanswered);
     Incorrect also carries a hatch so it never relies on red vs green alone */
  --r-correct: #2f74a8;
  --r-cc: #c98a1c;
  --r-incorrect: #c8343e;
  --r-blank: #cfcfcf;
}

body { background: var(--pp-bg); }

.pp { color: var(--pp-text); font-size: 17px; line-height: 1.65; }
.pp p { margin: 0 0 1rem; }
.pp a { color: var(--pp-theme); }
.pp a:hover { text-decoration: underline; }
.pp code, .pp pre { font-family: var(--pp-mono); font-size: 0.82em; }
.pp code, .pp pre, .pp .call, .pp .program, .pp .verdict, .dfa text, .wf text { font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; }
.pp :focus-visible { outline: 2px solid var(--pp-theme); outline-offset: 3px; }
.pp .prose { max-width: 46rem; }
.pp .muted { color: var(--pp-muted); }
.pp .small { font-size: 0.92rem; }

/* ---------- section rhythm (mirrors the site's py-5 blocks) ---------- */
.pp section.pp-block { padding: 3.5rem 0 0; }
.pp h2.pp-h {
  font-size: 36px; line-height: 42px; color: var(--pp-title); font-weight: 700;
  margin: 0 0 1rem; text-wrap: balance;
}
.pp h3.pp-sub { font-size: 22px; color: var(--pp-title); font-weight: 700; margin: 2.2rem 0 0.5rem; }

/* ---------- hero ---------- */
.pp-hero { padding: 3.5rem 0 1rem; }
.pp-hero .venue { color: var(--pp-theme); font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; margin: 0 0 0.6rem; }
.pp-hero h1 { font-size: 64px; line-height: 1; font-weight: 800; color: var(--pp-title); letter-spacing: -0.02em; }
.pp-hero .subtitle { font-family: 'Nunito', sans-serif; font-size: 26px; line-height: 1.25; font-weight: 600; color: var(--pp-title); margin: 0.6rem 0 1.2rem; max-width: 30ch; }
.pp-hero .authors { color: var(--pp-title); margin: 0; }
.pp-hero .authors u { text-underline-offset: 0.15em; }
.pp-hero .venue-full { color: var(--pp-muted); margin: 0.2rem 0 0; }
.pp-hero .btns { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; }
.pp-hero .btns .btn-theme6 { margin-top: 0; }
.pp .award { background-color: #ffc10712 !important; border-color: #d1a91a !important; cursor: default; }
.pp .award .fa { color: #d1a91a; }
.pp-hero .lede { font-size: 19px; line-height: 1.6; color: var(--pp-title); margin: 1.6rem 0 0; max-width: 40rem; }
.pp-hero .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (min-width: 992px) { .pp-hero .hero-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 4rem; } }
.pp-hero .hero-grid > * { min-width: 0; }
.pp-hero .hero-poster { max-width: 26rem; }
.pp-hero .poster { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 14px rgba(26, 29, 45, 0.12); }
.pp-hero .poster img { width: 100%; display: block; }
.pp-hero .poster-cap { font-size: 14px; color: var(--pp-muted); margin-top: 0.5rem; }
@media (max-width: 767px) {
  .pp-hero h1 { font-size: 48px; }
  .pp-hero .subtitle { font-size: 21px; }
  .pp h2.pp-h { font-size: 28px; line-height: 34px; }
}

/* ---------- panes ---------- */
.pp .pane { border: 1px solid var(--pp-rule); border-radius: 6px; background: #fff; }
.pp .pane-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 0.75rem 1rem 0; font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 700; color: var(--pp-title);
}
.pp .pane-head .hint { font-family: 'Hind', sans-serif; font-weight: 400; color: var(--pp-muted); font-size: 14px; }
.pp .scroll-x { overflow-x: auto; overscroll-behavior-x: contain; }

/* ---------- state machine (paper-dfa.js), Mermaid style ---------- */
.dfa { width: 100%; height: auto; display: block; user-select: none; -webkit-user-select: none; }
.dfa .edge path.line { fill: none; stroke: #333; stroke-width: 2; transition: stroke 160ms, opacity 160ms; }
.dfa .edge path.hit { fill: none; stroke: transparent; stroke-width: 22; cursor: help; }
.dfa .edge text { font-family: var(--pp-mono); font-size: 24px; fill: #111; paint-order: stroke; stroke: #fff; stroke-width: 8px; stroke-linejoin: round; transition: fill 160ms; }
.dfa .edge text .b { font-weight: 700; }
.dfa .edge.ghost { opacity: 0; pointer-events: none; transition: opacity 160ms; }
.dfa .edge.ghost path.line { stroke-dasharray: 6 6; }
.dfa .edge.hot { opacity: 1; }
.dfa .edge.hot path.line { stroke: var(--pp-theme); stroke-width: 3; }
.dfa .edge.hot text { fill: var(--pp-theme); }
.dfa .edge.taken path.line { stroke: var(--pp-ok); stroke-width: 3.4; }
.dfa marker path { fill: #333; }
.dfa marker.hot path { fill: var(--pp-theme); }
.dfa marker.taken path { fill: var(--pp-ok); }
.dfa .node { cursor: grab; touch-action: none; }
.dfa .node.dragging { cursor: grabbing; }
.dfa .node rect { fill: var(--dfa-fill); stroke: var(--dfa-stroke); stroke-width: 2; transition: fill 200ms, stroke 200ms; }
.dfa .node text { font-family: var(--pp-mono); font-size: 26px; font-weight: 600; fill: var(--dfa-text); text-anchor: middle; pointer-events: none; transition: fill 200ms; }
.dfa .node.start circle { fill: #111; }
.dfa .node.end circle.outer { fill: #fff; stroke: #111; stroke-width: 2; }
.dfa .node.end circle.inner { fill: var(--dfa-text); }
.dfa .node.note text { fill: #6a5acd; font-weight: 400; font-size: 23px; }
.dfa .node.current rect { fill: var(--pp-theme); stroke: var(--pp-theme); }
.dfa .node.current text { fill: #fff; }
.dfa .node.error rect { stroke: var(--pp-theme); stroke-width: 4; animation: dfa-shake 380ms; }
.dfa .token { fill: var(--pp-ok); stroke: #fff; stroke-width: 3; }
@keyframes dfa-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.dfa.intro .node, .dfa.intro .edge:not(.ghost) { opacity: 0; }
.dfa.intro .node.in, .dfa.intro .edge.in { opacity: 1; transition: opacity 420ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .pp *, .pp *::before, .pp *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- charts ---------- */
.pp .chart { width: 100%; height: auto; display: block; overflow: visible; }
.pp .chart .grid line { stroke: var(--pp-rule); stroke-width: 1; }
.pp .chart .axis text { font-family: 'Hind', sans-serif; font-size: 12px; fill: var(--pp-muted); }
.pp .chart .cat { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 700; fill: var(--pp-title); }
.pp .chart .val { font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 700; fill: var(--pp-title); }
.pp .chart .bar { transition: opacity 200ms; }
.pp .chart .dim { opacity: 0.22; }
.pp .chart .gap-ref { stroke: var(--pp-title); stroke-width: 1.5; stroke-dasharray: 4 3; }
.pp .chart .gap-bracket { fill: none; stroke: var(--pp-title); stroke-width: 1.5; }
.pp .chart .gap-text { font-family: 'Nunito', sans-serif; font-size: 12.5px; font-weight: 700; fill: var(--pp-title); }
.pp .legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0 0 0.8rem; padding: 0; list-style: none; font-size: 15px; color: var(--pp-text); }
.pp .legend li { display: inline-flex; align-items: center; gap: 0.45rem; }
.pp .legend i { width: 0.8rem; height: 0.8rem; border-radius: 3px; display: inline-block; }
.pp-tooltip {
  position: fixed; z-index: 2000; pointer-events: none; opacity: 0; transition: opacity 120ms;
  background: var(--pp-title); color: #fff; font-family: 'Hind', sans-serif; font-size: 14px; line-height: 1.35;
  padding: 0.45rem 0.65rem; border-radius: 4px; max-width: 17rem;
}
.pp-tooltip.show { opacity: 1; }
.pp details.table-view { margin-top: 0.6rem; font-size: 15px; color: var(--pp-muted); }
.pp details.table-view summary { cursor: pointer; }
.pp details.table-view table { border-collapse: collapse; margin-top: 0.5rem; }
.pp details.table-view th, .pp details.table-view td { text-align: left; padding: 0.25rem 1rem 0.25rem 0; border-bottom: 1px solid var(--pp-rule); font-weight: 400; font-variant-numeric: tabular-nums; }
.pp details.table-view th { color: var(--pp-title); font-weight: 600; }

.pp .seg { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 1rem; }
.pp .seg button { margin-top: 0; font-size: 14px; padding: 3px 10px; }
.pp .seg button[aria-pressed="true"] { background: var(--pp-title); border-color: var(--pp-title); color: #fff; }

/* ---------- BibTeX ---------- */
.pp .cite { position: relative; margin-top: 0.5rem; max-width: 48rem; }
.pp .cite pre { margin: 0; padding: 1.1rem 1.2rem; background: var(--pp-code-bg); border-radius: 4px; overflow-x: auto; line-height: 1.55; font-size: 13px; color: var(--pp-title); }
.pp .cite .btn-theme6 { position: absolute; top: 0.5rem; right: 0.5rem; margin: 0; }

/* ======================================================================
   Components used by the paper pages: protocol lab, Javadoc panel,
   workflow figure, results and benchmark blocks.
   ====================================================================== */
/* ---------- protocol lab ---------- */
.pp .lab-machine { margin-top: 1.5rem; }
.pp .lab-machine svg { min-width: 900px; padding: 0.5rem 1rem 1rem; }
.pp .lab { display: grid; gap: 1.25rem; margin-top: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .pp .lab { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.pp .lab > * { min-width: 0; }
.pp .controls { padding: 0.8rem 1rem 0.3rem; display: grid; gap: 0.6rem; }
.pp .row-c { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.pp .row-l { font-size: 15px; color: var(--pp-muted); min-width: 8rem; }
.pp .row-c .btn-theme6 { margin-top: 0; }
.pp .call {
  font-family: var(--pp-mono); font-size: 13px; padding: 3px 9px; border-radius: 0.25rem;
  border: 1px solid #747474; background: #fff; color: #000; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.35rem; transition: background 0.2s, color 0.2s;
}
.pp .call:hover:not(:disabled) { background: var(--pp-title); border-color: var(--pp-title); color: #fff; }
.pp .call:disabled { opacity: 0.4; cursor: not-allowed; }
.pp .call.allowed::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--pp-ok); }
.pp .call input {
  width: 4.4rem; font: inherit; border: 0; border-bottom: 1px dashed #747474;
  background: transparent; color: inherit; padding: 0; text-align: center;
}
.pp .legend-dot { font-size: 14px; color: var(--pp-muted); display: inline-flex; gap: 0.4rem; align-items: center; }
.pp .legend-dot::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--pp-ok); }

.pp .program { margin: 0.5rem 1rem 0; border-radius: 4px; background: var(--pp-code-bg); padding: 0.6rem 0; min-height: 7.5rem; font-family: var(--pp-mono); font-size: 13px; overflow-x: auto; color: var(--pp-title); }
.pp .program ol { list-style: none; margin: 0; padding: 0; counter-reset: ln; }
.pp .program li { counter-increment: ln; display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 0.4rem 1rem; width: max-content; min-width: 100%; padding: 0.12rem 0.9rem 0.12rem 0; border-left: 3px solid transparent; white-space: pre; }
.pp .program li::before { content: counter(ln); color: #9a9a9a; text-align: right; }
.pp .program li .st { font-family: 'Hind', sans-serif; font-size: 13px; color: var(--pp-muted); }
.pp .program li.bad { border-left-color: var(--pp-theme); background: var(--pp-theme-soft); }
.pp .program li.bad .st { color: var(--pp-theme); font-weight: 600; }
.pp .program li.new { animation: line-in 260ms ease-out; }
@keyframes line-in { from { opacity: 0; transform: translateY(-4px); } }
.pp .program .empty { padding: 0.3rem 1rem; color: var(--pp-muted); font-family: 'Hind', sans-serif; font-size: 15px; white-space: normal; display: block; width: auto; }
.pp .program .empty::before { content: none; }

.pp .verdict { margin: 0.75rem 1rem 1rem; font-family: var(--pp-mono); font-size: 13px; line-height: 1.5; min-height: 3.2rem; color: var(--pp-title); }
.pp .verdict .ok { color: var(--pp-ok); font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 700; }
.pp .verdict .err { border-left: 3px solid var(--pp-theme); padding: 0.2rem 0 0.2rem 0.75rem; margin-bottom: 0.5rem; }
.pp .verdict .err b { color: var(--pp-theme); font-family: 'Nunito', sans-serif; font-size: 15px; }
.pp .verdict .idle { color: var(--pp-muted); font-family: 'Hind', sans-serif; font-size: 15px; }

.pp .tabs { display: flex; gap: 0.25rem; padding: 0.5rem 0.6rem 0; border-bottom: 1px solid var(--pp-rule); }
.pp .tabs button {
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 15px; color: var(--pp-muted);
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.45rem 0.6rem 0.5rem;
}
.pp .tabs button[aria-selected="true"] { color: var(--pp-theme); border-bottom-color: var(--pp-theme); }
.pp .tabpanel { padding: 0.5rem 0.4rem 0.8rem; max-height: 30rem; overflow: auto; }
.pp .tabpanel.javadoc { padding: 0 0 0.8rem; }
/* Javadoc look (JDK 17 stylesheet colors), so it reads as the JDK's text, not ours */
.pp .javadoc { font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #353833; padding: 0 0 0.8rem; background: #fff; }
.pp .jd-top { display: flex; justify-content: space-between; background: #4d7a97; color: #fff; font-size: 12px; padding: 0.45rem 0.8rem; position: sticky; top: 0; z-index: 1; }
.pp .jd-head { padding: 0.7rem 0.8rem 0.6rem; }
.pp .jd-pkg { font-size: 12.5px; color: #353833; }
.pp .jd-pkg a, .pp .jd-note a { color: #4a6782; }
.pp .jd-title { font-size: 20px; color: #2c4557; margin-top: 0.15rem; }
.pp .jd-section { background: #dee3e9; border: 1px solid #d0d9e0; color: #2c4557; font-size: 14px; font-weight: 700; padding: 0.35rem 0.8rem; margin: 0 0.6rem 0.3rem; }
.pp .doc-entry { margin: 0 0.6rem; padding: 0.55rem 0.7rem 0.6rem; border-bottom: 1px solid #ededed; border-left: 3px solid transparent; transition: background 160ms, border-color 160ms; }
.pp .doc-entry h5 { font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700; color: #2c4557; background: #f8f8f8; border-top: 1px solid #ededed; margin: -0.2rem -0.3rem 0.4rem; padding: 0.25rem 0.3rem; }
.pp .jd-sig { font-family: 'DejaVu Sans Mono', var(--pp-mono); font-size: 12.5px; color: #353833; margin-bottom: 0.4rem; line-height: 1.45; }
.pp .doc-entry p { margin: 0; font-size: 14px; line-height: 1.5; color: #353833; }
.pp .doc-entry dl { margin: 0.4rem 0 0; font-size: 13.5px; line-height: 1.45; }
.pp .doc-entry dt { font-weight: 700; color: #4e4e4e; }
.pp .doc-entry dd { margin: 0.1rem 0 0 1.2rem; color: #353833; }
.pp .doc-entry code { font-family: 'DejaVu Sans Mono', var(--pp-mono); font-size: 12.5px; color: #4a6782; }
.pp .doc-entry mark { background: none; color: inherit; padding: 0; text-decoration: underline; text-decoration-color: var(--pp-theme); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.pp .jd-note { font-size: 12.5px; color: #6b6b6b; margin: 0.7rem 1.3rem 0; }
.pp .doc-src { font-size: 13px; color: var(--pp-muted); padding: 0.2rem 0.7rem 0.3rem; }
.pp .spec { margin: 0; font-size: 12px; line-height: 1.55; color: var(--pp-title); }
.pp .spec > code { white-space: normal; }
.pp .spec .blk { display: block; padding: 0.12rem 0.7rem; border-left: 3px solid transparent; border-radius: 3px; transition: background 160ms, border-color 160ms; white-space: pre; }
.pp .spec .an { color: var(--pp-theme); font-weight: 600; }
.pp .spec .str { color: #3b2f8f; }
.pp .is-hot { background: var(--pp-theme-soft); border-left-color: var(--pp-theme) !important; }

/* ---------- workflow (Figure 1) ---------- */
.pp .wf-pane { margin-top: 1.5rem; }
.pp .wf { width: 100%; height: auto; display: block; min-width: 820px; padding: 1rem; }
.wf text { font-family: 'Hind', Arial, sans-serif; fill: #111; }
.wf .wf-mono { font-family: var(--pp-mono); font-size: 20px; }
.wf .wf-big { font-size: 25px; }
.wf .wf-b { font-weight: 700; }
.wf .wf-label { font-size: 28px; }
.wf .wf-title { font-size: 28px; }
.wf .wf-badge { font-size: 19px; font-weight: 700; fill: #fff; }
.wf .wf-json { font-family: var(--pp-mono); font-size: 30px; fill: #ef7d1a; }
.wf .wf-arrow { fill: none; stroke: #111; stroke-width: 9; stroke-linejoin: miter; transition: stroke 200ms; }
.wf .wf-arrow.wf-thin { stroke-width: 6; }
.wf marker path { fill: #111; }
.wf .wf-arc { fill: none; stroke: #111; stroke-width: 4; }
.wf .wf-region { fill: #fff; stroke: #111; stroke-width: 2.5; transition: stroke 200ms, fill 200ms, stroke-width 200ms; }
.wf .wf-step { cursor: pointer; outline: none; }
.wf .wf-step:hover .wf-region, .wf .wf-step:focus-visible .wf-region { stroke: var(--pp-theme); stroke-width: 4; }
.wf .wf-step.selected .wf-region { stroke: var(--pp-theme); stroke-width: 5; fill: #fdf3f6; }
.wf [data-play] { transition: opacity 350ms; }
.wf.playing [data-play]:not(.lit) { opacity: 0.18; }
.wf .wf-glow { fill: none; stroke: var(--pp-theme); stroke-width: 5; opacity: 0; transition: opacity 300ms; }
.wf [data-play].glow .wf-glow { opacity: 1; }
.wf.playing .lit .wf-arrow { stroke: var(--pp-theme); marker-end: url(#wf-head-hot); }
.wf.playing .wf-step.lit .wf-region { stroke: var(--pp-theme); stroke-width: 5; fill: #fdf3f6; }
.wf.playing .wf-step.lit .wf-loop { animation: wf-spin 1.2s ease-in-out 1; transform-box: view-box; }
.wf .wf-final { cursor: pointer; outline: none; }
.wf .wf-final.selected .wf-glow, .wf .wf-final:hover .wf-glow, .wf .wf-final:focus-visible .wf-glow { opacity: 1; }
.wf #wf-head-hot path { fill: var(--pp-theme); }
@keyframes wf-spin { to { transform: rotate(360deg); } }
.pp .wf-actions { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; margin-top: 0.8rem; }
.pp .wf-actions .btn-theme6 { margin-top: 0; font-size: 14px; padding: 3px 12px; }

.pp .detail { margin-top: 1.2rem; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); padding: 1.4rem; border-radius: 6px; background: var(--pp-light); }
@media (min-width: 992px) { .pp .detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pp .detail > * { min-width: 0; }
.pp .detail h4 { font-size: 20px; font-weight: 700; color: var(--pp-title); margin: 0 0 0.6rem; }
.pp .detail p { font-size: 16px; }
.pp .detail pre .an, .pp .spec .an { color: var(--pp-theme); font-weight: 600; }
.pp .detail pre .str { color: #3b2f8f; }
.pp .detail pre .kw { color: #1f4e79; font-weight: 600; }
.pp .detail pre .cm { color: #8a8a8a; font-style: italic; }
.pp .detail pre .err { color: var(--pp-theme); font-weight: 600; }
.pp .detail pre { margin: 0; background: #fff; border: 1px solid var(--pp-rule); border-radius: 4px; padding: 0.9rem 1rem; overflow-x: auto; font-size: 12.5px; line-height: 1.55; color: var(--pp-title); }
.pp .detail .art-label { font-size: 14px; color: var(--pp-muted); margin: 0 0 0.4rem; }
.pp .turns { margin-top: 1rem; font-size: 15px; color: var(--pp-title); }
.pp .turns-bar { display: flex; gap: 2px; height: 12px; margin: 0.4rem 0 0.35rem; }
.pp .turns-bar span { background: #cfcfcf; border-radius: 3px; }
.pp .turns-bar span.on { background: var(--pp-theme); }

/* ---------- results ---------- */
.pp .headline { display: grid; gap: 1.5rem 3rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1.6rem 0 0.5rem; }
.pp .headline .num { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 56px; line-height: 1; color: var(--pp-theme); font-variant-numeric: tabular-nums; }
.pp .headline .num small { font-size: 0.5em; font-weight: 700; }
.pp .headline p { margin: 0.5rem 0 0; font-size: 16px; max-width: 22rem; }
.pp .headline p b { color: var(--pp-title); }
.pp .stack { display: flex; gap: 2px; height: 22px; margin: 0.6rem 0 0.4rem; max-width: 40rem; }
.pp .stack span { border-radius: 4px; }
.pp .stack-labels { display: flex; gap: 2px; max-width: 40rem; font-size: 14px; }
.pp .stack-labels span { line-height: 1.3; }
.pp .stack-labels b { color: var(--pp-title); display: block; font-size: 17px; font-family: 'Nunito', sans-serif; }
.pp .chart-wrap { max-width: 44rem; margin-top: 1rem; }
.pp .lens-note { font-size: 16px; min-height: 3.3rem; margin-top: 0.6rem; max-width: 40rem; }
.pp .causes { display: grid; grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr) 1.5rem; gap: 0.35rem 0.8rem; align-items: center; max-width: 44rem; font-size: 15px; margin-top: 0.4rem; }
.pp .causes .bar { height: 14px; border-radius: 0 4px 4px 0; }
.pp .causes .v { color: var(--pp-title); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- benchmark ---------- */
.pp .domains { display: grid; gap: 1rem; margin-top: 1.2rem; }
.pp .domain { display: grid; gap: 0.4rem; }
@media (min-width: 768px) { .pp .domain { grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem; } }
.pp .domain h3 { font-size: 17px; font-weight: 700; color: var(--pp-title); margin: 0.15rem 0 0; }
.pp .domain h3 span { display: block; font-family: 'Hind', sans-serif; font-weight: 400; color: var(--pp-muted); font-size: 14px; }
.pp .chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pp .chips a { font-family: var(--pp-mono); font-size: 12.5px; padding: 2px 9px; border-radius: 0.25rem; border: 1px solid #747474; color: #000; }
.pp .chips a:hover { background: var(--pp-title); border-color: var(--pp-title); color: #fff; text-decoration: none; }
.pp .chips a.feature { border-color: var(--pp-theme); color: var(--pp-theme); }

.pp .hatch { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.45) 0 2px, transparent 2px 7px); }

/* ---------- poster viewer ---------- */
.pp-hero .poster { cursor: zoom-in; position: relative; }
.pp-hero .poster::after { content: "\f00e"; font-family: FontAwesome; position: absolute; right: 0.6rem; bottom: 0.6rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: rgba(26, 29, 45, 0.75); color: #fff; font-size: 15px; opacity: 0.85; transition: opacity 200ms; }
.pp-hero .poster:hover::after, .pp-hero .poster:focus-visible::after { opacity: 1; }
html.pp-zoom-open { overflow: hidden; }
.pp-zoom { position: fixed; inset: 0; z-index: 2000; background: rgba(20, 22, 32, 0.92); display: flex; flex-direction: column; }
.pp-zoom[hidden] { display: none; }
.pp-zoom-bar { display: flex; align-items: center; gap: 1rem; padding: calc(0.6rem + env(safe-area-inset-top, 0px)) 1rem 0.6rem; color: #e8e8ee; font-size: 14px; }
.pp-zoom-hint { flex: 1; }
.pp-zoom-pdf { color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; padding: 3px 10px; }
.pp-zoom-pdf:hover { color: #fff; border-color: #fff; text-decoration: none; }
.pp-zoom-close { background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; padding: 0.3rem 0.5rem; cursor: pointer; }
.pp-zoom-pdf:focus-visible, .pp-zoom-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pp-zoom-stage { flex: 1; overflow: auto; display: grid; place-items: center; padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
.pp-zoom-stage img { max-width: 100%; max-height: calc(100vh - 5rem); cursor: zoom-in; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5); user-select: none; -webkit-user-drag: none; }
.pp-zoom.zoomed .pp-zoom-stage { display: block; }
.pp-zoom.zoomed .pp-zoom-stage img { max-width: none; max-height: none; width: 240%; cursor: grab; }
@media (min-width: 992px) { .pp-zoom.zoomed .pp-zoom-stage img { width: auto; height: 260vh; } }

/* ---------- talk photo ---------- */
.pp .talk { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 768px) { .pp .talk { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.pp .talk img { width: 100%; border-radius: 4px; display: block; box-shadow: 0 2px 14px rgba(26, 29, 45, 0.12); }
.pp .talk p { margin: 0; }