/* ==========================================================================
   HumanProse example library (/examples, /ar/examples)
   Loaded after hp-guides.css (the shared public shell) and
   hp-example-links.css (the cards). Scoped to body.hp-ui.hp-examples and
   drawn from the --hx-* tokens, so the dark theme follows. The sample is
   English on both pages and keeps its own direction; logical properties
   keep the Arabic page right.
   ========================================================================== */

body.hp-ui.hp-examples .hpx-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.hp-ui.hp-examples .hp-kicker { margin: 0 0 8px; }
body.hp-ui.hp-examples h2.hp-display { margin: 0; font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1.1; color: var(--hx-ink); text-wrap: balance; }
body.hp-ui.hp-examples .hpx-section-text { margin: 10px 0 0; max-width: 60ch; color: var(--hx-ink-2); font-size: 1rem; line-height: 1.65; }
body.hp-ui.hp-examples .hpx-chevron { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--hx-quill); transition: transform .25s var(--hx-ease); }
body.hp-ui.hp-examples details[open] > summary .hpx-chevron { transform: rotate(180deg); }

/* ==========================================================================
   1. Index: the hero with its drawn sheets, the finder, the groups
   ========================================================================== */
body.hp-ui.hp-examples .hpx-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 40px; }
body.hp-ui.hp-examples .hpx-hero > * { max-width: none; }
body.hp-ui.hp-examples .hpx-hero .hpg-crumbs { grid-column: 1 / -1; }
body.hp-ui.hp-examples .hpx-hero-copy { max-width: 62ch; }
body.hp-ui.hp-examples .hpx-stats {
    display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 26px 0 0; padding: 18px 0 0; list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .9rem; font-weight: 600; color: var(--hx-on-stage-2); font-variant-numeric: tabular-nums;
}
body.hp-ui.hp-examples .hpx-stats li { display: inline-flex; align-items: center; gap: 18px; }
body.hp-ui.hp-examples .hpx-stats li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--hx-cream); opacity: .7; margin-inline-start: -10px; }

/* Three sheets of paper and a margin note: drawn, not content */
body.hp-ui.hp-examples .hpx-hero-sheets { position: relative; align-self: center; height: 300px; }
body.hp-ui.hp-examples .hpx-sheet {
    position: absolute; inset-block-start: 22px; inset-inline-start: 34px; width: 178px; height: 236px;
    display: flex; flex-direction: column; gap: 11px; padding: 34px 22px 0;
    background: linear-gradient(180deg, #fbf7ee, #f3ecdc); border-radius: 5px;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .65), 0 2px 0 rgba(0, 0, 0, .08);
}
body.hp-ui.hp-examples .hpx-sheet.is-back { transform: translate(-30px, 18px) rotate(-9deg); background: linear-gradient(180deg, #d9ceb6, #cbbd9f); }
body.hp-ui.hp-examples .hpx-sheet.is-mid { transform: translate(-8px, 6px) rotate(-3.5deg); background: linear-gradient(180deg, #ebe2cf, #ddd1b7); }
body.hp-ui.hp-examples .hpx-sheet:is(.is-back, .is-mid) i { background: rgba(20, 38, 31, .12); }
body.hp-ui.hp-examples .hpx-sheet.is-front { transform: translate(18px, -6px) rotate(2.5deg); }
body.hp-ui.hp-examples .hpx-sheet i { display: block; height: 3px; border-radius: 2px; background: rgba(20, 38, 31, .2); }
body.hp-ui.hp-examples .hpx-sheet i:nth-child(odd) { width: 92%; }
body.hp-ui.hp-examples .hpx-sheet i.is-short { width: 46%; }
body.hp-ui.hp-examples .hpx-sheet i.is-marked { position: relative; background: rgba(20, 38, 31, .2); box-shadow: 0 0 0 4px rgba(184, 137, 74, .32); }
body.hp-ui.hp-examples .hpx-sheet-head { display: block; width: 58%; height: 9px; margin-bottom: 8px; border-radius: 3px; background: #12503e; opacity: .85; }
body.hp-ui.hp-examples .hpx-sheet-pin,
body.hp-ui.hp-examples .hpx-sheet-note em {
    display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: #b8894a; color: #fff; font-family: var(--hx-f-body); font-style: normal; font-size: .7rem; font-weight: 800;
}
body.hp-ui.hp-examples .hpx-sheet-pin { position: absolute; inset-block-start: 74px; inset-inline-end: 6px; }
body.hp-ui.hp-examples .hpx-sheet-note {
    position: absolute; inset-block-start: 130px; inset-inline-end: -6px; width: 112px;
    display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 14px;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(240, 214, 170, .45); border-radius: 12px;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transform: rotate(-2deg);
}
body.hp-ui.hp-examples .hpx-sheet-note i { display: block; height: 3px; border-radius: 2px; background: rgba(240, 214, 170, .55); }
body.hp-ui.hp-examples .hpx-sheet-note i.is-short { width: 60%; }
@media (prefers-reduced-motion: no-preference) {
    body.hp-ui.hp-examples .hpx-sheet.is-front { animation: hpx-settle .9s var(--hx-ease) both; }
    body.hp-ui.hp-examples .hpx-sheet-note { animation: hpx-note-in .7s .45s var(--hx-ease) both; }
}
@keyframes hpx-settle { from { opacity: 0; transform: translate(34px, -20px) rotate(7deg); } }
@keyframes hpx-note-in { from { opacity: 0; transform: translateY(8px) rotate(-2deg); } }

/* The finder: a search field (shown by hp-examples.js) and the most-searched shortcuts */
body.hp-ui.hp-examples .hpx-finder {
    position: relative; z-index: 2; display: grid; gap: 16px;
    margin: -34px clamp(12px, 4vw, 48px) 0; padding: 20px clamp(18px, 3vw, 28px);
    background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 22px; box-shadow: var(--hx-shadow);
}
body.hp-ui.hp-examples .hpx-search[hidden] { display: none; }
body.hp-ui.hp-examples .hpx-search { display: grid; gap: 8px; }
body.hp-ui.hp-examples .hpx-search-label { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hx-quill-ink); }
body.hp-ui.hp-examples .hpx-search-box { position: relative; display: flex; align-items: center; }
body.hp-ui.hp-examples .hpx-search-icon { position: absolute; inset-inline-start: 18px; width: 20px; height: 20px; fill: none; stroke: var(--hx-ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
body.hp-ui.hp-examples .hpx-search-box input {
    width: 100%; min-height: 54px; padding-block: 12px; padding-inline: 50px 20px;
    border: 1px solid var(--hx-line-2); border-radius: 999px; background: var(--hx-paper);
    color: var(--hx-ink); font: inherit; font-size: 1.04rem;
    transition: border-color .2s ease, background-color .2s ease;
    -webkit-appearance: none; appearance: none;
}
body.hp-ui.hp-examples .hpx-search-box input::placeholder { color: var(--hx-ink-3); }
body.hp-ui.hp-examples .hpx-search-box input:focus { border-color: var(--hx-quill); background: var(--hx-surface); }
body.hp-ui.hp-examples .hpx-search-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
body.hp-ui.hp-examples .hpx-search-box:has(.hpx-search-clear:not([hidden])) input { padding-inline-end: 96px; }
body.hp-ui.hp-examples .hpx-search-clear {
    position: absolute; inset-inline-end: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
    background: var(--hx-surface-2); color: var(--hx-ink-2); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer;
}
body.hp-ui.hp-examples .hpx-search-clear:hover { color: var(--hx-ink); }
body.hp-ui.hp-examples .hpx-search-status:empty { display: none; }
body.hp-ui.hp-examples .hpx-search-status { margin: 0; min-height: 1.4em; font-size: .88rem; color: var(--hx-ink-3); font-variant-numeric: tabular-nums; }
body.hp-ui.hp-examples .hpx-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
body.hp-ui.hp-examples .hpx-popular-label { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hx-ink-3); }
body.hp-ui.hp-examples .hpx-popular ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.hp-ui.hp-examples .hpx-popular a {
    display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--hx-line); background: var(--hx-surface-2); color: var(--hx-ink); text-decoration: none;
    font-size: .88rem; font-weight: 600; transition: border-color .2s ease, background-color .2s ease;
}
body.hp-ui.hp-examples .hpx-popular a:hover { border-color: var(--hx-quill); background: var(--hx-quill-soft); color: var(--hx-quill-ink); }

/* Jump links to the groups */
body.hp-ui.hp-examples .hpx-groupnav { margin-top: 40px; }
body.hp-ui.hp-examples .hpx-groupnav ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.hp-ui.hp-examples .hpx-groupnav a {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 8px 6px 14px; border-radius: 999px;
    color: var(--hx-ink-2); text-decoration: none; font-size: .9rem; font-weight: 600;
    border: 1px solid transparent; transition: color .2s ease, border-color .2s ease;
}
[dir="rtl"] body.hp-ui.hp-examples .hpx-groupnav a { padding: 6px 14px 6px 8px; }
body.hp-ui.hp-examples .hpx-groupnav a:hover { color: var(--hx-ink); border-color: var(--hx-line); }
body.hp-ui.hp-examples .hpx-groupnav a small { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--hx-surface-2); color: var(--hx-ink-3); font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; }
body.hp-ui.hp-examples .hpx-groupnav a.is-empty { opacity: .45; }
body.hp-ui.hp-examples .hpx-groupnav-icon { width: 17px; height: 17px; fill: none; stroke: var(--hx-quill); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

body.hp-ui.hp-examples .hpx-group { margin-top: 56px; scroll-margin-top: 96px; }
body.hp-ui.hp-examples .hpx-group[hidden] { display: none; }
body.hp-ui.hp-examples .hpx-group-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: 20px; }
body.hp-ui.hp-examples .hpx-group-icon {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--hx-quill) 60%, transparent); color: var(--hx-quill-ink); background: var(--hx-quill-soft);
}
body.hp-ui.hp-examples .hpx-group-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.hp-ui.hp-examples .hpx-group-head h2.hp-display { font-size: clamp(1.7rem, 3vw, 2.2rem); }
body.hp-ui.hp-examples .hpx-group-head p { margin: 4px 0 0; color: var(--hx-ink-2); font-size: .95rem; line-height: 1.55; max-width: 70ch; }
body.hp-ui.hp-examples .hpx-group-count { font-size: .84rem; font-weight: 700; color: var(--hx-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.hp-ui.hp-examples .hpx-cards > li { scroll-margin-top: 110px; }
body.hp-ui.hp-examples .hpx-cards > li:target .hpx-card { border-color: var(--hx-quill); box-shadow: 0 0 0 4px var(--hx-quill-soft); }

body.hp-ui.hp-examples .hpx-empty {
    margin: 48px auto 0; max-width: 56ch; padding: 26px 28px; text-align: center; border-radius: 20px;
    border: 1px dashed var(--hx-line-2); color: var(--hx-ink-2); font-size: 1rem; line-height: 1.6;
}
body.hp-ui.hp-examples .hpx-empty[hidden] { display: none; }

body.hp-ui.hp-examples .hpx-about {
    max-width: 76ch; margin: 72px auto 0; padding: 22px 26px; border-radius: 18px;
    background: var(--hx-quill-soft); color: var(--hx-quill-ink); border-inline-start: 3px solid var(--hx-quill);
}
body.hp-ui.hp-examples .hpx-about h2 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: inherit; }
body.hp-ui.hp-examples .hpx-about p { margin: 0; font-size: .95rem; line-height: 1.7; }

/* ==========================================================================
   2. One example
   ========================================================================== */
body.hp-ui.hp-examples .hpx-banner .hpg-banner-title { max-width: 24ch; font-size: clamp(2.1rem, 4.6vw, 3.7rem); }
body.hp-ui.hp-examples .hpx-banner .hpg-banner-kicker { display: flex; flex-wrap: wrap; gap: 0 .35em; }

body.hp-ui.hp-examples .hpx-page { position: relative; }
body.hp-ui.hp-examples .hpx-intro {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px; align-items: start; margin-top: 30px;
}
body.hp-ui.hp-examples .hpx-label { margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hx-quill-ink); }
body.hp-ui.hp-examples .hpx-who { padding: 20px 4px 4px; }
body.hp-ui.hp-examples .hpx-who-text { margin: 0; font-size: 1.04rem; line-height: 1.65; color: var(--hx-ink); }
body.hp-ui.hp-examples .hpx-fictional { margin: 8px 0 0; font-size: .84rem; color: var(--hx-ink-3); }

body.hp-ui.hp-examples .hpx-brief { background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 18px; }
body.hp-ui.hp-examples .hpx-brief > summary {
    display: flex; align-items: center; gap: 12px; padding: 16px 18px; list-style: none; cursor: pointer; border-radius: 18px;
}
body.hp-ui.hp-examples .hpx-brief > summary::-webkit-details-marker { display: none; }
body.hp-ui.hp-examples .hpx-brief-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--hx-royal-soft); color: var(--hx-royal-ink); }
body.hp-ui.hp-examples .hpx-brief-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.hp-ui.hp-examples .hpx-brief-title { flex: 1; font-weight: 700; color: var(--hx-ink); }
body.hp-ui.hp-examples .hpx-brief > summary:hover .hpx-brief-title { color: var(--hx-royal-ink); }
body.hp-ui.hp-examples .hpx-brief dl { margin: 0; padding: 0 18px; display: grid; gap: 0; }
body.hp-ui.hp-examples .hpx-brief dl > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-top: 1px dashed var(--hx-line-2); }
body.hp-ui.hp-examples .hpx-brief dt { font-size: .82rem; font-weight: 700; color: var(--hx-ink-3); line-height: 1.5; }
body.hp-ui.hp-examples .hpx-brief dd { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--hx-ink); text-align: start; }
body.hp-ui.hp-examples .hpx-brief .is-choice dd { font-weight: 600; color: var(--hx-royal-ink); }
body.hp-ui.hp-examples .hpx-brief-note { margin: 0; padding: 12px 18px 16px; border-top: 1px solid var(--hx-line); font-size: .86rem; line-height: 1.6; color: var(--hx-ink-2); }

body.hp-ui.hp-examples .hpx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
body.hp-ui.hp-examples .hpx-actions .hp-btn { display: inline-flex; align-items: center; gap: 8px; }
body.hp-ui.hp-examples .hpx-actions .hp-btn[hidden] { display: none; }
body.hp-ui.hp-examples :is(.hpx-actions, .hpx-cta) .hp-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.hp-ui.hp-examples .hpx-actions .hp-btn.is-done { border-color: var(--hx-ok); color: var(--hx-ok); }

/* ---------- The sample: a sheet, its margin and the pinned passages ---------- */
body.hp-ui.hp-examples .hpx-sample { margin-top: 44px; }
body.hp-ui.hp-examples .hpx-sample-head { max-width: 68ch; margin-bottom: 22px; }
body.hp-ui.hp-examples .hpx-sample-head h2 em { color: var(--hx-quill-ink); }
body.hp-ui.hp-examples .hpx-sample-head p:not(.hp-kicker) { margin: 10px 0 0; color: var(--hx-ink-2); line-height: 1.65; }

body.hp-ui.hp-examples .hpx-doc {
    --hpx-gap: clamp(26px, 3.4vw, 48px);
    --hpx-paper: minmax(0, 7fr);
    --hpx-pad: clamp(22px, 4vw, 58px);
    position: relative; display: grid;
}
/* The sheet sits behind the paper column, one piece from top to bottom */
body.hp-ui.hp-examples .hpx-doc::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
    width: calc((100% - var(--hpx-gap)) * 7 / 11);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--hx-quill) 5%, transparent), transparent 120px),
        var(--hx-surface);
    border: 1px solid var(--hx-line); border-radius: 6px 6px 20px 20px;
    box-shadow: 0 30px 60px -38px rgba(15, 40, 30, .45), 0 1px 0 rgba(0, 0, 0, .03);
}
html[data-hp-theme="dark"] body.hp-ui.hp-examples .hpx-doc::before { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
body.hp-ui.hp-examples .hpx-row {
    position: relative; display: grid; grid-template-columns: var(--hpx-paper) minmax(0, 4fr); column-gap: var(--hpx-gap); align-items: start;
}
/* Arabic notes run longer than English ones: the margin gets a little more room. */
html[lang="ar"] body.hp-ui.hp-examples .hpx-row { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
html[lang="ar"] body.hp-ui.hp-examples .hpx-doc::before { width: calc((100% - var(--hpx-gap)) * 6 / 11); }
body.hp-ui.hp-examples .hpx-para {
    position: relative; min-width: 0; padding: 9px var(--hpx-pad); text-align: left;
    font-family: "HP Display", "Iowan Old Style", Georgia, serif; font-size: 1.24rem; line-height: 1.6; color: var(--hx-ink);
    hanging-punctuation: first last; text-wrap: pretty;
    transition: background-color .25s ease;
}
body.hp-ui.hp-examples .hpx-row:first-child .hpx-para { padding-top: clamp(30px, 4.5vw, 56px); }
body.hp-ui.hp-examples .hpx-row:last-child .hpx-para { padding-bottom: clamp(30px, 4.5vw, 56px); }
body.hp-ui.hp-examples .hpx-para p { margin: 0; }
body.hp-ui.hp-examples .hpx-para p + p,
body.hp-ui.hp-examples .hpx-para p + ul,
body.hp-ui.hp-examples .hpx-para ul + p { margin-top: .5em; }
body.hp-ui.hp-examples .hpx-para ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35em; }
body.hp-ui.hp-examples .hpx-para li { position: relative; padding-inline-start: 1.15em; }
body.hp-ui.hp-examples .hpx-para li::before { content: ""; position: absolute; inset-inline-start: .1em; top: .72em; width: .36em; height: .36em; border-radius: 50%; background: var(--hx-quill); }
body.hp-ui.hp-examples .hpx-para .hpx-subject {
    padding-bottom: 10px; border-bottom: 1px solid var(--hx-line);
    font-family: var(--hx-f-body); font-size: .98rem; font-weight: 600; line-height: 1.5; color: var(--hx-ink);
}
body.hp-ui.hp-examples .hpx-para .hpx-h { font-size: 1.7rem; line-height: 1.2; letter-spacing: -.005em; }
body.hp-ui.hp-examples .hpx-row.is-heading + .hpx-row .hpx-para { padding-top: 14px; }
body.hp-ui.hp-examples .hpx-para p.is-first::first-letter {
    float: left; margin: .06em .1em 0 -.02em; font-size: 3.4em; line-height: .8; color: var(--hx-quill);
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
    body.hp-ui.hp-examples .hpx-para p.is-first::first-letter { float: none; margin: 0 .1em 0 0; font-size: 1em; line-height: inherit; -webkit-initial-letter: 3; initial-letter: 3; }
}
body.hp-ui.hp-examples .hpx-row.has-notes:hover .hpx-para { background: color-mix(in srgb, var(--hx-quill) 5%, transparent); }

/* A pinned passage: a brass highlighter stroke and its number */
body.hp-ui.hp-examples mark.hpx-pin {
    color: inherit; background: linear-gradient(transparent 58%, color-mix(in srgb, var(--hx-quill) 30%, transparent) 58%, color-mix(in srgb, var(--hx-quill) 30%, transparent) 92%, transparent 92%);
    -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em;
    transition: background-color .2s ease;
}
body.hp-ui.hp-examples .hpx-pin-end { white-space: nowrap; }
body.hp-ui.hp-examples mark.hpx-pin.is-lit { background-color: color-mix(in srgb, var(--hx-quill) 16%, transparent); }
body.hp-ui.hp-examples .hpx-pin-n {
    display: inline-grid; place-items: center; min-width: 1.3em; height: 1.3em; margin-inline-start: .18em; padding: 0 .2em;
    vertical-align: .55em; border-radius: 999px; background: var(--hx-quill); color: var(--hx-surface);
    font-family: var(--hx-f-body); font-size: .56em; font-weight: 800; line-height: 1; text-decoration: none;
    -webkit-user-select: none; user-select: none;
}
html[data-hp-theme="dark"] body.hp-ui.hp-examples .hpx-pin-n { color: #1a1408; }

/* The margin: the paragraph's role, then its numbered notes */
body.hp-ui.hp-examples .hpx-margin { position: relative; min-width: 0; padding: 12px 0 14px; }
body.hp-ui.hp-examples .hpx-row:first-child .hpx-margin { padding-top: clamp(32px, 4.6vw, 58px); }
body.hp-ui.hp-examples .hpx-role {
    display: flex; align-items: center; gap: 10px; margin: 0 0 6px;
    font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hx-royal-ink);
}
body.hp-ui.hp-examples .hpx-role::before {
    content: ""; flex: none; width: 26px; border-top: 1px solid color-mix(in srgb, var(--hx-quill) 70%, transparent);
    margin-inline-start: calc(-1 * var(--hpx-gap) + 4px); width: calc(var(--hpx-gap) - 10px);
}
body.hp-ui.hp-examples .hpx-role-note { margin: 0 0 8px; font-size: .95rem; line-height: 1.75; color: var(--hx-ink-2); }
body.hp-ui.hp-examples .hpx-note {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start;
    margin: 8px 0 0; padding: 12px 14px; border-radius: 14px;
    background: var(--hx-surface); border: 1px solid var(--hx-line);
    font-size: .93rem; line-height: 1.6; color: var(--hx-ink-2);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.hp-ui.hp-examples .hpx-note.is-lit,
body.hp-ui.hp-examples .hpx-note:target { border-color: var(--hx-quill); box-shadow: 0 0 0 3px var(--hx-quill-soft); }
body.hp-ui.hp-examples .hpx-note-n {
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--hx-quill); color: var(--hx-surface); font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
html[data-hp-theme="dark"] body.hp-ui.hp-examples .hpx-note-n { color: #1a1408; }
body.hp-ui.hp-examples .hpx-note { scroll-margin-top: 110px; }
body.hp-ui.hp-examples .hpx-row { scroll-margin-top: 96px; }

/* ---------- Outline and checklist, side by side ---------- */
body.hp-ui.hp-examples .hpx-study { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 22px; margin-top: 72px; }
body.hp-ui.hp-examples :is(.hpx-outline, .hpx-checklist) {
    padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: var(--hx-surface); border: 1px solid var(--hx-line);
}
body.hp-ui.hp-examples .hpx-study h2.hp-display { font-size: clamp(1.7rem, 3vw, 2.1rem); }
body.hp-ui.hp-examples .hpx-outline-list { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: hpx-outline; display: grid; gap: 4px; }
body.hp-ui.hp-examples .hpx-outline-list li { counter-increment: hpx-outline; }
body.hp-ui.hp-examples .hpx-outline-list a {
    display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px 12px; align-items: baseline;
    padding: 10px 10px 12px; border-radius: 12px; color: var(--hx-ink); text-decoration: none; transition: background-color .2s ease;
}
body.hp-ui.hp-examples .hpx-outline-list a::before { content: counter(hpx-outline, decimal-leading-zero); grid-row: 1 / 3; font-family: var(--hx-f-display); font-size: 1.15rem; color: var(--hx-royal-ink); }
body.hp-ui.hp-examples .hpx-outline-list a:hover { background: var(--hx-surface-2); }
body.hp-ui.hp-examples .hpx-outline-role { font-weight: 600; font-size: .96rem; line-height: 1.4; }
body.hp-ui.hp-examples .hpx-outline-words { font-size: .8rem; font-weight: 600; color: var(--hx-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.hp-ui.hp-examples .hpx-outline-bar { grid-column: 2 / 4; display: block; height: 4px; border-radius: 4px; background: var(--hx-surface-2); overflow: hidden; }
body.hp-ui.hp-examples .hpx-outline-bar i { display: block; width: var(--hpx-share, 0%); min-width: 3px; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--hx-quill), color-mix(in srgb, var(--hx-quill) 60%, var(--hx-royal))); }
[dir="rtl"] body.hp-ui.hp-examples .hpx-outline-bar i { background: linear-gradient(270deg, var(--hx-quill), color-mix(in srgb, var(--hx-quill) 60%, var(--hx-royal))); }

body.hp-ui.hp-examples .hpx-checks { margin: 20px 0 0; padding: 0; list-style: none; display: grid; }
body.hp-ui.hp-examples .hpx-checks li + li { border-top: 1px dashed var(--hx-line-2); }
body.hp-ui.hp-examples .hpx-checks label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 2px; cursor: pointer; font-size: .96rem; line-height: 1.55; color: var(--hx-ink); }
body.hp-ui.hp-examples .hpx-checks input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--hx-royal); cursor: pointer; }
body.hp-ui.hp-examples .hpx-checks label:has(input:checked) span { color: var(--hx-ink-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--hx-quill) 70%, transparent); }

/* ---------- Common mistakes (the guides' before/after block) ---------- */
body.hp-ui.hp-examples .hpx-mistakes { margin-top: 80px; }
body.hp-ui.hp-examples .hpx-mistake-list { display: grid; gap: 14px; margin-top: 24px; max-width: 900px; }
body.hp-ui.hp-examples .hpx-mistake-list .hpg-example { margin: 0; }
body.hp-ui.hp-examples .hpx-mistake-list .hpg-example-text {
    margin: 0; min-width: 0; text-align: left;
    font-family: "HP Display", "Iowan Old Style", Georgia, serif; font-size: 1.16rem; line-height: 1.5; color: var(--hx-ink-2);
}
body.hp-ui.hp-examples .hpx-mistake-list .is-before .hpg-example-text { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--hx-danger) 45%, transparent); text-decoration-thickness: 1px; }
body.hp-ui.hp-examples .hpx-mistake-list .is-after .hpg-example-text { color: var(--hx-ink); }

/* ---------- FAQ ---------- */
body.hp-ui.hp-examples .hpx-faq { margin-top: 80px; max-width: 900px; }
body.hp-ui.hp-examples .hpx-faq-list { margin-top: 20px; border-top: 1px solid var(--hx-line); }
body.hp-ui.hp-examples .hpx-faq-item { border-bottom: 1px solid var(--hx-line); }
body.hp-ui.hp-examples .hpx-faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 4px; list-style: none; cursor: pointer; color: var(--hx-ink); }
body.hp-ui.hp-examples .hpx-faq-item > summary::-webkit-details-marker { display: none; }
body.hp-ui.hp-examples .hpx-faq-item h3 { margin: 0; font-size: 1.06rem; font-weight: 700; line-height: 1.45; }
body.hp-ui.hp-examples .hpx-faq-item > summary:hover h3 { color: var(--hx-royal-ink); }
body.hp-ui.hp-examples .hpx-faq-item > p { margin: 0; padding: 0 4px 20px; max-width: 76ch; color: var(--hx-ink-2); font-size: 1rem; line-height: 1.7; }

body.hp-ui.hp-examples .hpx-cta { margin-top: 80px; }

/* ---------- More: the other example, related examples, templates and guides ---------- */
body.hp-ui.hp-examples .hpx-more { margin-top: 80px; display: grid; gap: 48px; }
body.hp-ui.hp-examples .hpx-more-block h2.hp-display { margin-bottom: 18px; font-size: clamp(1.7rem, 3vw, 2.2rem); }
body.hp-ui.hp-examples .hpx-more-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
body.hp-ui.hp-examples .hpx-links-title { margin: 0 0 10px; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hx-quill-ink); }
body.hp-ui.hp-examples .hpx-links { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hx-line); }
body.hp-ui.hp-examples .hpx-links li { border-bottom: 1px solid var(--hx-line); }
body.hp-ui.hp-examples .hpx-links a {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 4px;
    color: var(--hx-ink); text-decoration: none; font-weight: 600; font-size: .96rem; line-height: 1.4;
}
body.hp-ui.hp-examples .hpx-links a:hover { color: var(--hx-royal-ink); }
body.hp-ui.hp-examples .hpx-links .hpx-link-icon { color: var(--hx-quill); }
body.hp-ui.hp-examples .hpx-about-line { max-width: 80ch; margin: 56px auto 0; text-align: center; font-size: .84rem; line-height: 1.65; color: var(--hx-ink-3); }

/* ==========================================================================
   3. Arabic
   ========================================================================== */
html[lang="ar"] body.hp-ui.hp-examples :is(.hpx-label, .hpx-role, .hpx-search-label, .hpx-popular-label, .hpx-links-title) { letter-spacing: 0; font-size: .84rem; text-transform: none; }
html[lang="ar"] body.hp-ui.hp-examples h2.hp-display { line-height: 1.4; }
html[lang="ar"] body.hp-ui.hp-examples :is(.hpx-who-text, .hpx-section-text, .hpx-faq-item > p, .hpx-note, .hpx-about p, .hpx-checks label) { line-height: 1.85; }
html[lang="ar"] body.hp-ui.hp-examples .hpx-sample-head h2 em,
html[lang="ar"] body.hp-ui.hp-examples .hpx-para { unicode-bidi: isolate; }
html[lang="ar"] body.hp-ui.hp-examples .hpx-sample-head h2 em { font-family: "HP Display", Georgia, serif; font-style: italic; font-weight: 400; }
html[lang="ar"] body.hp-ui.hp-examples .hpx-mistake-list .hpg-example-text { direction: ltr; unicode-bidi: isolate; }
html[lang="ar"] body.hp-ui.hp-examples .hpx-mistake-list .hpg-example-label { letter-spacing: 0; font-size: .82rem; }
html[lang="ar"] body.hp-ui.hp-examples .hpx-brief dd { line-height: 1.7; }
html[lang="ar"] body.hp-ui.hp-examples .hpx-outline-list a::before { font-family: "HP Display", Georgia, serif; }

/* ==========================================================================
   4. Smaller screens: the notes come inline, under their paragraph
   ========================================================================== */
@media (max-width: 1000px) {
    body.hp-ui.hp-examples .hpx-hero { grid-template-columns: minmax(0, 1fr); }
    body.hp-ui.hp-examples .hpx-hero-sheets { display: none; }
    body.hp-ui.hp-examples .hpx-intro { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    body.hp-ui.hp-examples .hpx-who { padding-top: 6px; }

    /* One column on the sheet: each paragraph's role above it, its notes under it. */
    body.hp-ui.hp-examples .hpx-doc::before,
    html[lang="ar"] body.hp-ui.hp-examples .hpx-doc::before { width: 100%; }
    body.hp-ui.hp-examples .hpx-row { display: flex; flex-direction: column; }
    body.hp-ui.hp-examples .hpx-margin { display: contents; }
    body.hp-ui.hp-examples .hpx-role { order: -2; margin: 16px var(--hpx-pad) 0; }
    body.hp-ui.hp-examples .hpx-role-note { order: -1; margin: 4px var(--hpx-pad) 0; font-size: .92rem; }
    body.hp-ui.hp-examples .hpx-role::before { margin-inline-start: 0; width: 18px; }
    body.hp-ui.hp-examples .hpx-row:first-child .hpx-role { margin-top: clamp(26px, 6vw, 40px); }
    body.hp-ui.hp-examples .hpx-row:first-child:has(.hpx-role) .hpx-para { padding-top: 8px; }
    body.hp-ui.hp-examples .hpx-para { order: 0; }
    body.hp-ui.hp-examples .hpx-note { order: 1; margin: 4px var(--hpx-pad) 6px; background: var(--hx-paper); }
    body.hp-ui.hp-examples .hpx-row:last-child .hpx-note:last-child { margin-bottom: clamp(26px, 5vw, 40px); }
    body.hp-ui.hp-examples .hpx-row:last-child:has(.hpx-note) .hpx-para { padding-bottom: 10px; }

    body.hp-ui.hp-examples .hpx-study { grid-template-columns: minmax(0, 1fr); }
    body.hp-ui.hp-examples .hpx-more-links { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    body.hp-ui.hp-examples .hpx-finder { margin: -24px 6px 0; padding: 16px; border-radius: 20px; }
    body.hp-ui.hp-examples .hpx-stats { gap: 8px; }
    body.hp-ui.hp-examples .hpx-stats li { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
    body.hp-ui.hp-examples .hpx-stats li + li::before { display: none; }
    body.hp-ui.hp-examples .hpx-search-box input { min-height: 50px; padding-inline-start: 46px; font-size: 1rem; }
    body.hp-ui.hp-examples .hpx-groupnav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding-inline: 12px; }
    body.hp-ui.hp-examples .hpx-groupnav ul::-webkit-scrollbar { display: none; }
    body.hp-ui.hp-examples .hpx-groupnav a { white-space: nowrap; border-color: var(--hx-line); }
    body.hp-ui.hp-examples .hpx-group { margin-top: 44px; }
    body.hp-ui.hp-examples .hpx-group-head { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 14px; }
    body.hp-ui.hp-examples .hpx-group-icon { width: 40px; height: 40px; margin-top: 2px; }
    body.hp-ui.hp-examples .hpx-group-icon svg { width: 20px; height: 20px; }
    body.hp-ui.hp-examples .hpx-group-count { grid-column: 2; }

    body.hp-ui.hp-examples .hpx-doc { --hpx-pad: 18px; margin-inline: -4px; }
    body.hp-ui.hp-examples .hpx-para { font-size: 1.12rem; line-height: 1.58; }
    body.hp-ui.hp-examples .hpx-para .hpx-h { font-size: 1.45rem; }
    body.hp-ui.hp-examples .hpx-actions .hp-btn { flex: 1 1 auto; justify-content: center; }
    body.hp-ui.hp-examples .hpx-actions .hp-btn-primary { flex-basis: 100%; }
    body.hp-ui.hp-examples .hpx-brief dl > div { grid-template-columns: minmax(0, 1fr); }
    body.hp-ui.hp-examples .hpx-mistake-list .hpg-example-row { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
    body.hp-ui.hp-examples .hpx-mistake-list .hpg-example-text { font-size: 1.08rem; }
    body.hp-ui.hp-examples .hpx-mistake-list .hpg-example-note { padding-inline: 16px; }
    body.hp-ui.hp-examples :is(.hpx-mistakes, .hpx-faq, .hpx-cta, .hpx-more) { margin-top: 60px; }
    body.hp-ui.hp-examples .hpx-study { margin-top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    body.hp-ui.hp-examples :is(.hpx-para, .hpx-note, mark.hpx-pin, .hpx-chevron, .hpx-popular a, .hpx-groupnav a, .hpx-outline-list a, .hpx-search-box input) { transition: none; }
}

@media print {
    body.hp-ui.hp-examples :is(.hpx-actions, .hpx-finder, .hpx-groupnav, .hpx-more, .hpx-cta, .hpx-brief, .hpx-hero-sheets) { display: none; }
    body.hp-ui.hp-examples .hpx-doc::before { box-shadow: none; }
    body.hp-ui.hp-examples .hpx-pin-n { background: none; color: #000; }
}