/* Base, Reset & Typography */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --blue-navy: #172f49;
    --blue-steel: #365b7b;
    --blue-border: #8fa5b8;
    --blue-surface: #f1f3f5;
    --blue-muted: #e1e7ed;
    --sticky-toolbar-offset: 106px;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.7;
    max-width: none;
    margin: 0;
    padding: 0;
    color: #24292e;
    background-color: #fafbfc;
    -webkit-text-size-adjust: 100%;
}

body > .site-header, body > .page-shell {
    flex-shrink: 0;
}

img, svg, video {
    max-width: 100%;
    height: auto;
}

.content-container {
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 36px 48px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow-wrap: break-word;
}

h1 {
    font-size: 2rem;
    margin-top: 0;
    color: #111;
    border-bottom: 2px solid #eaecef;
    padding-bottom: 12px;
    line-height: 1.3;
}

h2 {
    font-size: 1.35rem;
    color: #111;
    margin-top: 32px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eaecef;
    padding-bottom: 6px;
    line-height: 1.35;
}

h3 {
    font-size: 1.15rem;
    color: #111;
    margin-top: 24px;
    margin-bottom: 8px;
    line-height: 1.4;
}

p {
    margin: 16px 0;
}

a {
    color: #98531d;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul, ol {
    padding-left: 24px;
}

li {
    margin: 6px 0;
}

hr {
    border: 0;
    height: 1px;
    background: #eaecef;
    margin: 32px 0;
}

pre {
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 16px 20px;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    overflow-x: auto;
    color: #24292e;
    margin: 18px 0 20px 0;
}

code {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 16px 0;
}

th, td {
    padding: 8px 12px;
    border: 1px solid #e1e4e8;
}
body > .content-container {
    max-width: 852px;
    margin: 32px auto 48px;
}

/* Display typeface: Fraunces (SIL Open Font License, public/fonts/FRAUNCES-OFL.txt), served from this site so
   pages make no third-party requests. Headings only; body text and controls keep the system sans-serif.
   Scripts Fraunces does not cover (Chinese, Japanese, Korean) fall back to the system fonts automatically. */
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/fraunces-latin-ext-opsz-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root { --font-display: "Fraunces", Georgia, "Times New Roman", serif; }

/* Headings, the brand name and big figures take the display face. Font family only: each component keeps its own size. */
h1, h2, .site-brand-name, .site-footer-brand, .guide-card h3, .home-guide-text strong {
    font-family: var(--font-display) !important;
    font-optical-sizing: auto;
    font-weight: 600;
}
h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.01em; }

/* Breadcrumb navigation. The site header has its own stylesheet, header.css. */
.breadcrumb-nav {
    font-size: 0.88rem;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eaecef;
    color: #586069;
    line-height: 1.6;
    overflow-wrap: break-word;
}

.breadcrumb-nav a {
    color: #98531d;
    font-weight: 500;
}

.breadcrumb-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-height: 28px;
    vertical-align: middle;
}

.breadcrumb-home svg {
    display: block;
    width: 20px;
    height: 20px;
}

.breadcrumb-separator {
    margin: 0 6px;
    color: #959da5;
}

.breadcrumb-current {
    color: #24292e;
    font-weight: 600;
}

/* Chapter Components, Callouts, Badges & Footers */

.topic-header-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    border-bottom: 2px solid #eaecef;
    padding-bottom: 12px;
    margin-bottom: 18px;
}

.topic-header-row h1 {
    margin: 0;
    padding: 0;
    border-bottom: none;
    line-height: 1.2;
}

.topic-header-row .meta-tag {
    margin: 0;
}

.meta-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 4px 12px;
    border-radius: 14px;
    user-select: none;
    white-space: nowrap;
}

.meta-tag-module {
    background: #fcf3e7;
    color: #98531d;
    border: 1px solid #ead0af;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.meta-tag-topic {
    background: #f6f8fa;
    color: #444d56;
    border: 1px solid #d1d5da;
}

/* Number in the header tag styled solid black so it doesn't look clickable */
.meta-tag-topic .code {
    color: #111;
    font-weight: 700;
    margin-right: 6px;
    min-width: auto;
}

.related-topics-box {
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-left: 4px solid #98531d;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 10px 0 24px 0;
}

.related-topics-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #586069;
    margin-bottom: 6px;
}

.related-topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.related-topics-list li {
    margin: 0;
    font-size: 0.9rem;
}

a.cross-ref {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 600;
    background: #fcf3e7;
    padding: 2px 6px;
    border: 1px solid #ead0af;
    border-radius: 4px;
    position: relative;
    z-index: 2;
    cursor: pointer;
    white-space: nowrap;
}

a.cross-ref:hover {
    background: #def;
    text-decoration: none;
}

.hero-btn-primary {
    display: inline-block;
    background: #98531d;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(152, 83, 29, 0.2);
}

.hero-btn-primary:hover {
    background: #7e4016;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(152, 83, 29, 0.25);
    text-decoration: none;
}

.hero-btn-secondary {
    display: inline-block;
    background: #ffffff;
    color: #98531d !important;
    border: 1px solid #ead0af;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    transition: all 0.15s ease;
}

.hero-btn-secondary:hover {
    background: #fffaf3;
    border-color: #98531d;
    color: #7e4016 !important;
    transform: translateY(-1px);
    text-decoration: none;
}

.topic-list {
    list-style: none;
    padding-left: 6px;
}

.code {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85rem;
    color: #586069;
    min-width: 52px;
}

/* Shared editorial footer */
.site-footer {
    flex: 1 0 auto;
    margin-top: 0;
    padding: 48px 32px 24px;
    border-radius: 0;
    background: #17283b;
    color: #c2cfdd;
    border-top: 3px solid #b77b2b;
}
.site-footer-inner { max-width: 1136px; margin: 0 auto; }

.site-footer-brand {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -1px;
    color: #fff;
    line-height: 1.3;
}
.site-footer-brand span { color: #dda45f; }
.site-footer-identity p {
    max-width: none;
    margin: 12px 0 0;
    font-size: 0.88rem;
    line-height: 1.6;
}

.site-footer a:hover { color: #f0c38e; }
.site-footer-copyright {
    border-top: 1px solid #3b4b5d;
    padding-top: 18px;
    font-size: 0.72rem;
    line-height: 1.6;
    color: #b0becd;
}

/* 404 Page Not Found Container */
.not-found-container {
    text-align: center;
    padding: 40px 10px;
}

.not-found-code {
    font-size: 3.5rem;
    color: #98531d;
    margin-bottom: 8px;
    border-bottom: none;
    line-height: 1;
}

.not-found-heading {
    font-size: 1.5rem;
    color: #111;
    margin-top: 0;
    border-bottom: none;
    line-height: 1.3;
}

.not-found-desc {
    color: #586069;
    font-size: 1.05rem;
    max-width: 520px;
    margin: 16px auto 32px auto;
    line-height: 1.6;
}

.not-found-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Wide page frame with a focused reading column. */
.page-shell {
    width: calc(100% - 64px);
    max-width: 1136px;
    margin: 32px auto 48px;
}
.page-shell-inner {
    display: grid;
    grid-template-columns: minmax(0, 812px) minmax(240px, 292px);
    align-items: start;
    gap: 32px;
}
.page-shell .content-container { min-width: 0; }
.site-sidebar { position: sticky; top: 24px; }
.sidebar-container { display: flex; flex-direction: column; }

/* Homepage: the page itself is the canvas, without the inner card. */
.page-shell-home .content-container { padding: 0; background: transparent; border: 0; box-shadow: none; }

.section-icon { display: block; width: 48px; height: 48px; }

:where(a, button, input, summary):focus-visible { outline: 3px solid #b77b2b; outline-offset: 3px; }

.site-footer-identity { flex-shrink: 0; }
.site-footer-tagline { white-space: nowrap; }

/* Responsive Breakpoints (Tablets & Mobile Drawer) */

@media (max-width: 768px) {
    body {
        padding: 0 16px;
        margin: 16px auto 48px auto;
    }
    .content-container {
        padding: 28px 24px;
    }
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.25rem; }
}

@media (max-width: 680px) {
    body {
        padding: 0 12px;
        margin: 12px auto 36px auto;
    }
    .content-container {
        padding: 20px 16px;
        border-radius: 6px;
    }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.15rem; margin-top: 24px; }
    h3 { font-size: 1.05rem; }

    /* The 404 page's buttons fill the width. */
    .hero-btn-primary, .hero-btn-secondary {
        width: 100%;
    }

    /* Mobile Page Copyright: Centered */
    .site-footer-copyright {
        text-align: center;
        margin-top: 12px;
    }
}

@media (max-width: 680px) {
    .site-footer { padding: 28px 24px 20px; }
    
    .site-footer-identity p { max-width: none; }
    .site-footer-copyright { text-align: left; margin-top: 0; }
}

/* Full-width site chrome; the content keeps its comfortable reading width. */
@media (max-width: 920px) {
    body > .content-container { margin: 24px 20px 36px; }
}
@media (max-width: 768px) {
    body { margin: 0; padding: 0; }
}
@media (max-width: 680px) {
    body > .content-container { margin: 20px 12px 28px; }
    .site-footer { padding: 32px 24px 24px; }
}

@media (max-width: 1000px) {
    .page-shell-inner { grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; }
    .page-shell-inner .content-container { padding: 28px; }
}
@media (max-width: 920px) {
    .page-shell { width: calc(100% - 40px); margin: 24px auto 36px; }
    .page-shell-inner { display: block; }
    .site-sidebar { position: static; margin-top: 28px; }

    .page-shell-home .content-container { padding: 32px; }
}
@media (max-width: 680px) {
    .page-shell { width: calc(100% - 24px); margin: 20px auto 28px; }
    .page-shell .content-container { padding: 24px 16px; }
}

@media (max-width: 680px) {
    .site-footer-tagline { white-space: normal; }
}

/* The homepage has no inner card on smaller screens either. */
@media (max-width: 920px) {
    .page-shell-home .content-container { padding: 0; }
}

/* Framework identity: shared geometry, quiet surfaces, and labeled color families. */
/* The frame is navy and gold on warm paper; the color comes from the ten modules. Each module has a main color
   (text, icons, headers behind white text), a bright tone (fills such as map squares, emblem arcs and the Profile
   grid) and a tint (backgrounds). */
:root {
    --framework-ink: #17213a;
    --framework-accent: #2a4380;
    --framework-gold: #e8b54a;
    --framework-gold-hover: #f2c766;
    --framework-gold-text: #85600c;
    --framework-on-gold: #17213a;
    --framework-paper: #faf6ee;
    --framework-muted: #5a6271;
    --framework-line: #e5dfd5;
    --family-accent: #006b74;
    --family-bright: #099eab;
    --family-surface: #d8f7fa;
}
.family-1 { --family-accent: #006b74; --family-bright: #099eab; --family-surface: #d8f7fa; }
.family-2 { --family-accent: #036696; --family-bright: #0395db; --family-surface: #e2f3ff; }
.family-3 { --family-accent: #7a41af; --family-bright: #a56cde; --family-surface: #f4ecff; }
.family-4 { --family-accent: #7a5b01; --family-bright: #b08505; --family-surface: #faefd8; }
.family-5 { --family-accent: #974c00; --family-bright: #d36d02; --family-surface: #ffece0; }
.family-6 { --family-accent: #a62b6d; --family-bright: #d65997; --family-surface: #feeaf2; }
.family-7 { --family-accent: #056e47; --family-bright: #04a66d; --family-surface: #dff7e9; }
.family-8 { --family-accent: #b02a2d; --family-bright: #e15955; --family-surface: #ffebe9; }
.family-9 { --family-accent: #4455c2; --family-bright: #6a81f2; --family-surface: #ebf0fe; }
.family-10 { --family-accent: #536701; --family-bright: #7d9a05; --family-surface: #ecf4dd; }
body { background: var(--framework-paper); color: #27334a; }
a { color: var(--framework-accent); text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
    outline: 3px solid var(--framework-accent);
    outline-offset: 4px;
}
.framework-icon { display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; vertical-align: middle; }

.page-shell { max-width: 1100px; }
.page-shell-home { margin-top: 0; }
.page-shell-home .content-container { padding: 0; }
.page-shell-inner { grid-template-columns: minmax(0, 1fr) minmax(240px, 290px); gap: 40px; }
.page-shell-inner .content-container { border: 1px solid #e8e3d8; border-radius: 14px; padding: 24px 28px; box-shadow: none; background: #fffdf8; }
.page-shell-inner h1, .page-shell-inner h2, .page-shell-inner h3 { color: var(--framework-ink); }
.page-shell-inner p { line-height: 1.85; }

.framework-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border: 1px solid var(--framework-gold); border-radius: 7px; padding: 11px 19px; background: var(--framework-gold); color: var(--framework-on-gold); font-size: .85rem; font-weight: 600; line-height: 1.5; text-align: center; }
.framework-button:hover { color: var(--framework-on-gold); background: var(--framework-gold-hover); border-color: var(--framework-gold-hover); text-decoration: none; }
.framework-button .framework-icon { width: 21px; height: 21px; }
.framework-text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: .85rem; font-weight: 600; color: var(--framework-accent); }

.home-practice { padding-top: 64px; }

.module-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.module-card { padding: 28px 30px 0; border: 1px solid var(--framework-line); border-radius: 12px; background: #fffdf8; overflow: hidden; }
.module-card-heading { display: flex; align-items: center; gap: 18px; }
.module-card-symbol { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex: 0 0 64px; color: var(--family-accent); background: var(--family-surface); border-radius: 13px; }
.module-card-symbol .framework-icon { width: 40px; height: 40px; }
.module-card-heading > div { flex: 1; min-width: 0; }
.module-card-number { margin: 0 0 5px; color: var(--family-accent); text-transform: uppercase; letter-spacing: .09em; font-size: .65rem; font-weight: 600; }
.module-card-heading h3 { margin: 0; font-size: 1.45rem; line-height: 1.35; letter-spacing: -.035em; font-weight: 550; }
.module-card-heading h3 a { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--framework-ink); }
.module-card-heading h3 a > span { font-size: 1rem; color: var(--family-accent); }
.module-card-description { margin: 18px 0 20px; min-height: 48px; max-width: 48ch; font-size: .88rem; line-height: 1.7; color: var(--framework-muted); }
.module-card-preview { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; list-style: none; margin: 0 0 24px; }
.module-card-preview li { margin: 0; }
.module-card-preview a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; min-height: 34px; border-radius: 5px; background: var(--family-surface); color: var(--family-accent); font-size: .73rem; }
.module-card-preview .framework-icon { width: 19px; height: 19px; }

.home-practice { margin-top: 4px; }

/* The chapter's identity is prominent once; surrounding navigation stays smaller. */
.chapter-heading { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 22px; padding: 12px 0 30px; margin-bottom: 28px; border-bottom: 1px solid var(--framework-line); }
.chapter-symbol { display: flex; justify-content: center; align-items: center; align-self: stretch; min-height: 80px; border-radius: 12px; color: var(--family-accent); background: var(--family-surface); }
.chapter-symbol .framework-icon { width: 56px; height: 56px; }
.chapter-identity { min-width: 0; flex: 1; }
.chapter-heading h1 { font-size: clamp(1.65rem, 2.4vw, 2rem); letter-spacing: -.045em; font-weight: 550; line-height: 1.18; margin: 3px 0 12px; padding: 0; border: 0; }
.chapter-heading h1:only-child { margin: 0; }

.chapter-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.chapter-tags .meta-tag { white-space: normal; margin: 0; font-size: .69rem; font-weight: 500; letter-spacing: 0; padding: 4px 8px; background: var(--family-surface); color: var(--family-accent); border: 0; border-radius: 4px; }
/* Related topics close a topic, after its habit. */
.related-topics-box { background: transparent; border: 0; padding: 0; margin: 36px 0 0; border-radius: 0; }
.related-topics-title { color: #5b6679; font-size: .66rem; letter-spacing: .09em; margin-bottom: 12px; }
.related-topics-list { gap: 7px; }
.topic-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; min-height: 38px; background: var(--family-surface); color: var(--family-accent); border-radius: 6px; font-size: .75rem; line-height: 1.5; }
.topic-chip:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--family-accent); }
.topic-chip .framework-icon { width: 20px; height: 20px; }
.chip-code { font-size: .65rem; opacity: .85; font-family: SFMono-Regular, Consolas, monospace; }

/* Previous and next at the foot of a topic: two cards side by side, each in the color of the page it leads to,
   mirrored so the arrows point outwards. A card for the overview of all topics is navy. */
.book-nav-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--framework-line); }
.topic-pager-card { display: grid; grid-template-columns: 20px 48px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 84px; padding: 14px 18px 14px 16px; border: 1px solid color-mix(in srgb, var(--family-accent) 26%, var(--framework-line)); border-radius: 14px; background: #fffdf8; color: var(--framework-ink); text-decoration: none; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.topic-pager-card:hover { border-color: var(--family-accent); background: var(--family-surface); box-shadow: 0 10px 24px color-mix(in srgb, var(--family-accent) 14%, transparent); transform: translateY(-1px); text-decoration: none; }
.topic-pager-next { grid-template-columns: minmax(0, 1fr) 48px 20px; padding: 14px 16px 14px 18px; text-align: right; }
.topic-pager-next .topic-pager-text { order: 1; }
.topic-pager-next .topic-pager-icon { order: 2; }
.topic-pager-next .topic-pager-arrow { order: 3; }
.topic-pager-site { --family-accent: #17213a; --family-surface: #f1ebde; }
.topic-pager-arrow { display: flex; color: var(--family-accent); transition: transform .15s ease; }
.topic-pager-arrow svg { width: 20px; height: 20px; }
.topic-pager-prev .topic-pager-arrow svg { transform: rotate(180deg); }
.topic-pager-prev:hover .topic-pager-arrow { transform: translateX(-3px); }
.topic-pager-next:hover .topic-pager-arrow { transform: translateX(3px); }
.topic-pager-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--family-accent); color: #fffdf8; }
.topic-pager-icon .framework-icon { width: 28px; height: 28px; }
.topic-pager-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topic-pager-label { color: var(--framework-muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.topic-pager-text strong { overflow: hidden; color: var(--framework-ink); font-family: "Fraunces", Georgia, serif; font-size: 1.12rem; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; }
.topic-pager-text small { color: var(--family-accent); font-size: .76rem; font-weight: 600; }
@media (max-width: 680px) {
    .book-nav-footer { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 32px; }
    .topic-pager-empty { display: none; }
    .topic-pager-card { min-height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
    .topic-pager-card, .topic-pager-arrow { transition: none; }
    .topic-pager-card:hover, .topic-pager-card:hover .topic-pager-arrow { transform: none; }
}

.module-context { padding: 20px; margin-bottom: 28px; background: #fffdf8; border: 1px solid var(--framework-line); border-radius: 10px; }
.module-context-heading { display: flex; align-items: center; gap: 10px; color: var(--family-accent); font-weight: 600; font-size: .95rem; margin-bottom: 16px; }
.module-context-heading .framework-icon { width: 30px; height: 30px; }
.module-context ol { list-style: none; padding: 0; margin: 0; }
.module-context li { margin: 0; }
.module-context-topic { display: flex; gap: 9px; align-items: center; min-height: 40px; padding: 7px 8px; color: #535d6f; font-size: .8rem; border-radius: 5px; line-height: 1.5; }
.module-context-topic .framework-icon { width: 21px; height: 21px; color: var(--family-accent); }
.module-context-topic[aria-current="page"] { background: var(--family-surface); color: var(--family-accent); font-weight: 600; }
.module-context-topic:hover { background: var(--family-surface); text-decoration: none; }

.site-footer { background: #f3ede2; border-top: 1px solid var(--framework-line); }
.site-footer-inner { max-width: 1100px; }
.site-footer-brand { color: var(--framework-accent); }

.site-footer-tagline, .site-footer-copyright { color: #586376; }
/* Narrow screens retain the same hierarchy and full text labels. */
@media (max-width: 1050px) {
    .page-shell-inner .content-container { padding: 24px; }
}

@media (max-width: 920px) {
    .page-shell-inner { display: block; }
    .module-context ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
}
@media (max-width: 680px) {
    body { padding: 0; margin: 0; }
    .page-shell { width: calc(100% - 36px); margin: 22px auto 32px; }
    .page-shell-home { margin-top: 0; }
    .page-shell-home .content-container { padding: 0; }

    .home-practice { padding-top: 40px; }
    .module-card-grid { grid-template-columns: 1fr; }

    .module-card { padding: 24px 22px 0; }
    .module-card-symbol { width: 58px; height: 58px; flex-basis: 58px; }
    .module-card-description { min-height: 0; }
    .module-card-preview { margin-bottom: 18px; }
    .module-card-preview a { min-height: 38px; }

    .page-shell-inner .content-container { padding: 24px 20px; border-radius: 10px; }
    .chapter-heading { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 4px 0 22px; margin-bottom: 22px; }
    .chapter-symbol { min-height: 72px; border-radius: 12px; }
    .chapter-symbol .framework-icon { width: 50px; height: 50px; }
    .chapter-heading h1 { font-size: 1.9rem; margin: 0 0 10px; }
    .chapter-tags .meta-tag { font-size: .65rem; }
    .chip-code { display: none; }
    .topic-chip { min-height: 42px; }
    .module-context ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .module-context-topic { font-size: .75rem; }

    .site-footer { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
    .site-sidebar { break-inside: avoid; }
    .module-card { break-inside: avoid; }
}

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 1000; background: #fff; color: #17213a; padding: 12px 20px; border: 2px solid #3b5481; border-radius: 5px; }
.skip-link:focus { top: 12px; }
.breadcrumb-nav a { color: #526381; }

.page-shell-inner .content-container > p { max-width: 70ch; font-size: 1.025rem; }

/* The framework directory's cards share the homepage's editorial palette. */
.framework-overview-card { margin: 24px 0; padding: 26px; border-top: 4px solid var(--family-accent); background: #fffdf8; }

.framework-overview-card .meta-tag-module { background: var(--family-surface); color: var(--family-accent); border: 0; }
.framework-overview-card > p { font-size: .9rem; color: var(--framework-muted); }

@media (max-width: 680px) {
    .framework-overview-card { padding: 18px; }
}

.page-shell-audiobook { grid-template-columns: minmax(0, 1fr); }


/* Listening on topic and module pages; the full players are styled in listen.css. The Listen button sits in the
   page's colored header; the player it opens is a bar at the bottom of the window (cms/chapter-audio.coffee). */
.chapter-listen { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 6px 18px 6px 6px; border: 0; border-radius: 999px; background: #fffdf8; color: var(--family-accent); font: inherit; font-size: .88rem; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45); }
.chapter-listen:hover { filter: brightness(.96); }
.chapter-listen:focus-visible { outline: 2px solid #fffdf8; outline-offset: 3px; }
.chapter-listen-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--family-accent); }
.chapter-listen-icon::before { content: ""; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fffdf8; }
.chapter-listen.is-playing .chapter-listen-icon::before { width: 10px; height: 12px; margin: 0; box-sizing: border-box; border-width: 0 3px; border-color: #fffdf8; }
.chapter-listen-time { color: #5b6679; font-weight: 500; font-variant-numeric: tabular-nums; }
/* In a module's header the button sits beside Start, so it is drawn in outline. */
.module-hero .chapter-listen { background: transparent; color: #fffdf8; box-shadow: inset 0 0 0 1.5px rgba(255, 253, 248, .55); }
.module-hero .chapter-listen-icon { background: #fffdf8; }
.module-hero .chapter-listen-icon::before { border-left-color: var(--family-accent); }
.module-hero .chapter-listen.is-playing .chapter-listen-icon::before { border-color: var(--family-accent); }
.module-hero .chapter-listen-time { color: inherit; opacity: .75; }

.chapter-audio { position: fixed; z-index: 60; left: 50%; bottom: 16px; display: flex; align-items: center; gap: 12px; width: min(760px, calc(100% - 32px)); box-sizing: border-box; margin: 0; padding: 10px 10px 10px 16px; transform: translateX(-50%); border: 1px solid #e4dac5; border-radius: 16px; background: #fffdf8; color: var(--framework-ink); box-shadow: 0 22px 44px -16px rgba(23, 33, 58, .45); }
.chapter-audio[hidden] { display: none; }
.chapter-audio-icon { display: flex; flex-shrink: 0; color: var(--family-accent); }
.chapter-audio-icon .framework-icon { width: 28px; height: 28px; }
.chapter-audio-title { flex: 0 1 auto; max-width: 180px; overflow: hidden; color: var(--framework-ink); font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.chapter-audio #chapter-audio-play { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--family-accent); color: #fffdf8; font-size: .9rem; cursor: pointer; }
.chapter-audio input { flex: 1; min-width: 60px; accent-color: var(--family-accent); }
#chapter-audio-time { color: #5b6679; font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
#chapter-audio-full { font-size: .75rem; white-space: nowrap; }
.chapter-audio #chapter-audio-close { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #5b6679; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.chapter-audio #chapter-audio-close:hover { background: #f1ece2; color: var(--framework-ink); }
.chapter-audio .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chapter-audio button:focus-visible, .chapter-audio input:focus-visible { outline: 2px solid var(--family-accent); outline-offset: 3px; }
/* While the player is open, the footer ends above it. */
body.chapter-audio-open .site-footer { padding-bottom: 96px; }
@media (max-width: 680px) {
  .chapter-audio { left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 8px 10px; width: auto; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) 14px; transform: none; border-width: 1px 0 0; border-radius: 16px 16px 0 0; }
  .chapter-audio-title { max-width: none; }
  .chapter-audio input { grid-column: 1 / 3; grid-row: 2; width: 100%; }
  #chapter-audio-time { grid-column: 3; grid-row: 2; }
  #chapter-audio-full { grid-column: 4; grid-row: 2; font-size: .7rem; }
  body.chapter-audio-open .site-footer { padding-bottom: 120px; }
}

/* The small profile grid in the sidebar's Profile card: one row per module in its family color, one cell per
   topic. The Profile pages and the homepage draw the larger grid in profile.css. */
.fp-grid { display: grid; gap: 3px; }
.fp-row { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; align-items: center; }
.fp-cell { aspect-ratio: 1; border-radius: 3px; background: var(--family-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--family-accent) 16%, transparent); }
.fp-cell.on { background: var(--family-accent); box-shadow: none; }

/* Quiet surfaces and restrained color connect the reading pages and tools. */
.chapter-heading { --hero-accent: var(--family-accent); --hero-surface: var(--family-surface); padding: 20px; gap: 20px; border: 1px solid var(--framework-line); border-radius: 10px; background: color-mix(in srgb, var(--hero-accent) 5%, #fffdf8); }
.chapter-symbol { color: var(--hero-accent); background: #fffdf8; border: 1px solid #fff; box-shadow: none; align-self: center; }
.chapter-heading h1 { color: var(--framework-ink); }
body[data-page="book"] .chapter-heading { --hero-accent: #785c3a; --hero-surface: #f3edde; }
body[data-page="framework-overview"] .chapter-heading { --hero-accent: #54667a; --hero-surface: #eaf0f3; }
body[data-page="practical-applications"] .chapter-heading { --hero-accent: #805d48; --hero-surface: #f3eae2; }
body[data-page^="how-to-"] .chapter-heading { --hero-accent: #805d48; --hero-surface: #f3eae2; }
body[data-page="audiobook"] .chapter-heading { --hero-accent: #47608e; --hero-surface: #f2ede2; }
body[data-page="what-is-a-professionalism-fingerprint"] .chapter-heading { --hero-accent: #546990; --hero-surface: #f3eee4; }
body[data-page="org-health"] .chapter-heading { --hero-accent: #54627d; --hero-surface: #f5eddf; }
body[data-page="assessment"] .chapter-heading { --hero-accent: #7c5836; }
body[data-page="compare"] .chapter-heading { --hero-accent: #365e82; }
/* Discovery cards echo the header panels without tinting reading text. */
.module-card, .framework-overview-card { border-color: color-mix(in srgb, var(--family-accent) 24%, #e5dfd5); background: linear-gradient(145deg, var(--family-surface), #fffdf8 75%); box-shadow: none; }
.module-card-symbol { background: #fffdf8; border: 1px solid #fff; box-shadow: none; }
.module-context { border-radius: 10px; background: #f9f6f1; }

/* Preserve readable titles on small screens and in longer translations. */
@media (max-width: 800px) {
  .chapter-heading { grid-template-columns: 72px minmax(0, 1fr); padding: 16px; gap: 18px; }
}
@media (max-width: 480px) {
  .chapter-heading { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 14px; }
  .chapter-symbol { width: 64px; min-height: 64px; justify-self: start; border-radius: 12px; }
  .chapter-symbol .framework-icon { width: 46px; height: 46px; }
  .chapter-heading h1 { font-size: 1.75rem; }
}
.chapter-heading .chapter-symbol { background: #fffdf8; color: var(--hero-accent); }
/* 404: the main action uses the site's gold like every other primary button. */
.not-found-actions .hero-btn-primary { background: var(--framework-gold); border-color: var(--framework-gold); color: var(--framework-on-gold); }
.not-found-actions .hero-btn-primary:hover { background: var(--framework-gold-hover); border-color: var(--framework-gold-hover); color: var(--framework-on-gold); }
.not-found-actions a.hero-btn-secondary, .not-found-actions a.hero-btn-secondary:hover { color: var(--framework-accent); border-color: #d6cfbf; }

/* Framework page: the ten modules as cards in two columns, each showing all nine topics. */
.framework-overview-grid { margin-top: 28px; align-items: stretch; }
/* Cards in a row share a height, with the topics pinned to the bottom so they line up. */
.framework-overview-grid .framework-overview-card { display: flex; flex-direction: column; }
.framework-overview-grid .module-card-all { margin-top: auto; }
.framework-overview-card.module-card { padding-bottom: 28px; }
.page-shell-inner .module-card-heading h2 { margin: 0; padding: 0; border: 0; font-size: 1.45rem; font-weight: 550; line-height: 1.35; letter-spacing: -.035em; }
.module-card-heading h2 a { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--framework-ink); }
.module-card-heading h2 a > span { font-size: 1rem; color: var(--family-accent); }
.framework-overview-card .module-card-description { min-height: 0; max-width: none; }
.framework-overview-card .module-card-description a { color: var(--family-accent); }
/* Three columns, so the rows fall into the module's beginner, intermediate and advanced tiers. */
.module-card-all { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
.module-card-all a { display: flex; width: 100%; box-sizing: border-box; }
.module-card-all a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 520px) { .module-card-all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.framework-overview-grid .framework-overview-card { margin: 0; padding: 28px 30px; border-top: 1px solid color-mix(in srgb, var(--family-accent) 24%, #e5dfd5); }
@media (max-width: 680px) { .framework-overview-grid .framework-overview-card { padding: 24px 22px; } }

.home-practice { padding-top: 48px; }

/* The guides panel on the homepage. */
.framework-panel { margin-top: 32px; padding: 20px; border: 1px solid #e4ddcf; border-radius: 16px; background: #f4efe5; }
.framework-panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin: 0 4px 16px; }
.framework-panel-heading p { max-width: 62ch; margin: 0; font-size: .95rem; line-height: 1.6; color: var(--framework-ink); }
.framework-panel-heading .framework-text-link { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 900px) {
    .framework-panel-heading { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 680px) {
    .framework-panel { margin-top: 26px; padding: 12px; }
}

.home-practice.framework-panel { margin-top: 24px; padding: 20px; }
.page-shell-home .content-container > .home-practice:last-child { margin-bottom: 8px; }
@media (max-width: 680px) { .home-practice.framework-panel { padding: 12px; } }

/* The framework map on the homepage: ten module rows, nine topics each in three levels. */
.framework-map { padding: 20px; border: 1px solid #e4ddcf; border-radius: 16px; background: #fffdf8; }
.framework-map-head, .framework-map-row { display: grid; grid-template-columns: minmax(0, 9.5rem) repeat(3, minmax(0, 1fr)); align-items: center; gap: 12px; }
.framework-map-head { margin-bottom: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; color: #5c6472; }
.framework-map-row + .framework-map-row { margin-top: 5px; }
.framework-map-module { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--family-accent); font-size: .84rem; font-weight: 600; text-decoration: none; }
.framework-map-module:hover { text-decoration: underline; }
.framework-map-module .framework-icon { flex-shrink: 0; width: 20px; height: 20px; }
.framework-map-module span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.framework-map-level { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.framework-map-level a { display: block; height: 22px; border-radius: 4px; background: var(--family-accent); }
/* The three levels deepen from left to right. */
.framework-map-row .framework-map-level:nth-of-type(1) a { background: color-mix(in srgb, var(--family-bright) 40%, #fffdf8); }
.framework-map-row .framework-map-level:nth-of-type(2) a { background: var(--family-bright); }
.framework-map-level a:hover, .framework-map-level a:focus-visible { outline: 2px solid var(--framework-ink); outline-offset: 2px; }

@media (max-width: 560px) {
    .framework-map { padding: 12px; }
    .framework-map-head, .framework-map-row { grid-template-columns: minmax(0, 6.6rem) repeat(3, minmax(0, 1fr)); gap: 8px; }
    .framework-map-head { font-size: .56rem; letter-spacing: .04em; }
    .framework-map-module { font-size: .72rem; gap: 5px; }
    .framework-map-module .framework-icon { width: 16px; height: 16px; }
    .framework-map-level { gap: 2px; }
    .framework-map-level a { height: 26px; border-radius: 3px; }
}
@media (max-width: 560px) {
    /* Keep "Intermediate" on one line above its three squares. */
    .framework-map-head { font-size: .5rem; letter-spacing: 0; white-space: nowrap; }
}

/* Module cards: one row per level, named at the left. */
.module-card-all { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; list-style: none; margin: 0; padding: 0; }
.module-card-level { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); align-items: center; gap: 10px; margin: 0; }
.module-card-level-name { font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #5c6472; }
.module-card-level .module-card-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; }
.module-card-level .module-card-preview a { display: flex; width: 100%; box-sizing: border-box; }
@media (max-width: 520px) {
    .module-card-level { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .module-card-level + .module-card-level { margin-top: 6px; }
    .module-card-level .module-card-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Footer: the ten modules in their colors, then who the site is by and where everything lives. */
.site-footer { padding: 44px 32px 28px; }
.site-footer-heading { margin: 0 0 12px; color: #586376; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.site-footer-modules ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-footer-modules li { margin: 0; }
.site-footer-modules a { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--family-accent) 22%, #fffdf8); border-radius: 9px; background: #fefbf5; color: var(--family-accent); font-size: .84rem; font-weight: 600; text-decoration: none; }
.site-footer .site-footer-modules a:hover { border-color: var(--family-accent); background: var(--family-surface); color: var(--family-accent); }
.site-footer-modules .framework-icon { flex-shrink: 0; width: 20px; height: 20px; }
.site-footer-modules a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.site-footer .site-footer-copyright { margin-top: 32px; padding-top: 18px; border-top: 1px solid #ded5c4; text-align: left; font-size: .76rem; }
@media (max-width: 900px) {
    .site-footer-modules ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    
}
@media (max-width: 560px) {
    .site-footer { padding: 32px 20px 22px; }

}

/* About page */
.about-page { max-width: 760px; margin: 0 auto; }
.about-intro h1 { margin: 0 0 16px; padding: 0; border: 0; }
.about-intro .about-lead { margin: 0; color: #334058; font-size: 1.15rem; line-height: 1.7; }
.about-section { margin-top: 36px; padding-top: 28px; border-top: 1px solid #e4ddcf; }
.about-section h2 { margin: 0 0 12px; padding: 0; border: 0; font-size: 1.3rem; }
.about-list { margin: 16px 0 0; padding: 0; list-style: none; }
.about-list li { margin: 0; padding: 12px 0; border-top: 1px solid #efeadf; }
.about-list a { font-weight: 600; }
.about-list strong { color: var(--framework-accent); }


/* Module landing pages: a hero in the module's color with a map of its nine topics, then one panel per level. */
.chapter-heading.module-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; margin: 0 0 20px; padding: 44px 48px; border: 0; border-radius: 18px; background: var(--family-accent); color: #fffdf8; }
.module-hero-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: color-mix(in srgb, var(--family-surface) 85%, var(--family-accent)); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.module-hero-eyebrow .framework-icon { width: 24px; height: 24px; }
.chapter-heading.module-hero h1 { margin: 0 0 16px; color: #fffdf8; font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1.05; }
.module-hero-copy > p:not(.module-hero-eyebrow) { max-width: 60ch; margin: 0 0 12px; color: #fffdf8; font-size: 1.02rem; line-height: 1.75; }
.module-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.module-hero .framework-button.module-hero-start { border-color: #fffdf8; background: #fffdf8; color: var(--family-accent); }
.module-hero .framework-button.module-hero-start:hover { border-color: var(--family-surface); background: var(--family-surface); color: var(--family-accent); }
.module-hero .module-hero-start:focus-visible { outline: 2px solid #fffdf8; outline-offset: 3px; }
.module-hero-facts { color: color-mix(in srgb, var(--family-surface) 85%, var(--family-accent)); font-size: .84rem; font-weight: 600; }
.module-hero-map { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: #fffdf8; }
.module-hero-map-row { display: grid; grid-template-columns: repeat(3, 72px); gap: 10px; }
.module-hero-map a { display: grid; place-items: center; height: 72px; border-radius: 12px; background: var(--family-accent); color: #fffdf8; transition: transform .15s ease; }
.module-hero-map-row:nth-child(1) a { background: color-mix(in srgb, var(--family-bright) 40%, #fffdf8); }
.module-hero-map-row:nth-child(2) a { background: var(--family-bright); }
.module-hero-map a:hover { transform: translateY(-2px); }
.module-hero-map .framework-icon { width: 34px; height: 34px; }
.module-levels { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.module-level { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); align-items: center; gap: 40px; margin: 0; padding: 30px 32px 30px 28px; border: 1px solid color-mix(in srgb, var(--family-accent) 18%, #fffdf8); border-left: 8px solid var(--family-accent); border-radius: 14px; background: color-mix(in srgb, var(--family-surface) 45%, #fffdf8); }
.module-level:nth-child(1) { border-left-color: color-mix(in srgb, var(--family-bright) 40%, #fffdf8); }
.module-level:nth-child(2) { border-left-color: var(--family-bright); }
.module-level-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.module-level-code { padding: 4px 10px; border-radius: 7px; background: var(--family-accent); color: #fffdf8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; font-weight: 700; }
.module-level:nth-child(1) .module-level-code { background: color-mix(in srgb, var(--family-bright) 40%, #fffdf8); color: #131b2b; }
.module-level:nth-child(2) .module-level-code { background: var(--family-bright); }
.page-shell-inner .module-level h2 { margin: 0; padding: 0; border: 0; color: var(--family-accent); font-size: 1.35rem; }
.module-level-text p { margin: 0; color: #334058; line-height: 1.8; }
.module-level-text p a { color: var(--family-accent); }
.module-level-topics { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.module-level-topics li { margin: 0; }
.module-level-topics a { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border: 1px solid color-mix(in srgb, var(--family-accent) 20%, #fffdf8); border-radius: 12px; background: #fffdf8; color: var(--family-accent); text-decoration: none; }
.module-level-topics a:hover { border-color: var(--family-accent); background: var(--family-surface); }
.module-topic-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: var(--family-accent); color: #fffdf8; }
.module-level:nth-child(1) .module-topic-icon { background: color-mix(in srgb, var(--family-bright) 40%, #fffdf8); }
.module-level:nth-child(2) .module-topic-icon { background: var(--family-bright); }
.module-topic-icon .framework-icon { width: 26px; height: 26px; }
.module-topic-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.module-topic-name small { color: #68707f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; }
.module-topic-name strong { font-size: 1.02rem; }
.module-topic-arrow { font-size: 1rem; opacity: .6; }
@media (max-width: 900px) {
    .chapter-heading.module-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 26px; }
    .module-hero-map { justify-self: start; }
    .module-level { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 22px 24px 18px; }
}
@media (max-width: 480px) {
    .module-hero-map-row { grid-template-columns: repeat(3, 60px); gap: 8px; }
    .module-hero-map { gap: 8px; padding: 12px; }
    .module-hero-map a { height: 60px; }
    .module-hero .framework-button.module-hero-start { width: 100%; }
}
/* On the lightest level tint a white icon is too faint, so the first level's icons take a deepened module color. */
.module-hero-map-row:nth-child(1) a, .module-level:nth-child(1) .module-topic-icon { color: color-mix(in srgb, var(--family-accent) 62%, #000); }

/* Topic pages: the header takes the module's color and holds the icon, the title, one line of facts (code, level,
   reading time) and the Listen button. Where the topic sits in its module is shown once, in the sidebar. */
.chapter-heading.topic-hero { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 22px; margin-bottom: 32px; padding: 22px 26px 22px 22px; border: 0; border-radius: 16px; background: var(--family-accent); }
.topic-hero .chapter-symbol { min-height: 76px; border: 0; border-radius: 14px; background: #fffdf8; color: var(--family-accent); }
.topic-hero .chapter-symbol .framework-icon { width: 46px; height: 46px; }
.chapter-heading.topic-hero h1 { margin: 0 0 8px; color: #fffdf8; font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.08; }
.page-shell-inner .topic-hero-meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.3em; margin: 0; overflow: hidden; color: rgba(255, 253, 248, .82); font-size: .8rem; font-weight: 600; line-height: 1.5; }
/* The dots sit in the gaps; one that would start a wrapped line falls outside the box and is clipped. */
.topic-hero-meta span { position: relative; }
.topic-hero-meta span + span::before { content: "·"; position: absolute; left: -.85em; opacity: .7; }
.topic-hero-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; letter-spacing: .02em; }
@media (max-width: 680px) {
    .chapter-heading.topic-hero { grid-template-columns: 60px minmax(0, 1fr); gap: 14px 16px; padding: 18px; }
    .topic-hero .chapter-symbol { min-height: 60px; }
    .topic-hero .chapter-symbol .framework-icon { width: 36px; height: 36px; }
    .topic-hero .chapter-listen { grid-column: 1 / -1; justify-self: start; }
}

/* Sidebar: the module's topics by level under a header in the module's color. Pages without a module (the 404
   page) show the compact Profile card instead. */
.site-sidebar .module-context { padding: 0 0 12px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--family-accent) 22%, #fffdf8); border-radius: 14px; background: #fffdf8; }
.site-sidebar .module-context-heading { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 18px; background: var(--family-accent); color: #fffdf8; }
.site-sidebar .module-context-heading:hover { background: color-mix(in srgb, var(--family-accent) 88%, #000); text-decoration: none; }
.site-sidebar .module-context-heading .framework-icon { flex-shrink: 0; width: 30px; height: 30px; color: #fffdf8; }
.module-context-heading > span { display: flex; flex-direction: column; line-height: 1.25; }
.module-context-heading small { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .82; }
.module-context-heading strong { font-size: 1.05rem; font-weight: 650; }
.module-context-level { display: flex; align-items: center; gap: 8px; margin: 14px 18px 4px; color: #5c6472; font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.module-context-level::before { content: ""; width: 14px; height: 6px; border-radius: 3px; background: var(--family-accent); }
.module-context-level:nth-of-type(1)::before { background: color-mix(in srgb, var(--family-bright) 40%, #fffdf8); }
.module-context-level:nth-of-type(2)::before { background: var(--family-bright); }
.site-sidebar .module-context ol { padding: 0 10px; }
.site-sidebar .module-context-topic { min-height: 38px; padding: 6px 8px; border-radius: 8px; }
.site-sidebar .module-context-topic[aria-current="page"] { background: var(--family-accent); color: #fffdf8; }
.site-sidebar .module-context-topic[aria-current="page"] .framework-icon { color: #fffdf8; }
.site-sidebar .playlist-context { padding-bottom: 12px; }
.side-profile { padding: 20px; border-radius: 14px; background: #17213a; color: #e5dfd1; }
.side-profile-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 14px; }
.side-profile-grid { padding: 6px; border-radius: 8px; background: #fffdf8; }
.side-profile-grid .fp-grid, .side-profile-grid .fp-row { gap: 1px; }
.side-profile-grid .fp-cell { border-radius: 1px; }
.page-shell-inner .side-profile h2 { margin: 0; padding: 0; border: 0; color: #fffdf9; font-size: 1.05rem; line-height: 1.3; }
.side-profile p { margin: 14px 0 16px; color: #e5dfd1; font-size: .84rem; line-height: 1.6; }
.side-profile .framework-button { width: 100%; box-sizing: border-box; border-color: #e8b54a; background: #e8b54a; color: #17213a; }
.side-profile .framework-button:hover { border-color: #f2c766; background: #f2c766; color: #17213a; }
.side-profile-links { display: grid; gap: 2px; margin-top: 12px; }
.side-profile-links a { display: inline-flex; align-items: center; min-height: 36px; color: #f2d58e; font-size: .82rem; text-decoration: underline; text-decoration-color: #65748e; text-underline-offset: 4px; }
.side-profile-links a:hover { color: #fffdf9; text-decoration-color: currentColor; }
@media (max-width: 1050px) {
    .site-sidebar .module-context ol { padding: 0 12px; }
    .side-profile { max-width: 420px; }
}
.site-sidebar .module-context-topic[aria-current="page"] .playlist-context-icon { background: #fffdf8; }

.site-sidebar .playlist-context-stage { margin: 14px 18px 4px; }

/* Every page that is not a module, topic or tool opens with the same dark green heading the tools use. */
.page-shell-inner .chapter-heading:not(.topic-hero):not(.module-hero):not(.tool-intro):not(.audiobook-heading) { padding: 24px 28px; border: 1px solid #17213a; border-radius: 16px; background: #17213a; }
.page-shell-inner .chapter-heading:not(.topic-hero):not(.module-hero):not(.tool-intro):not(.audiobook-heading) h1 { color: #fffdf9; }
.page-shell-inner .chapter-heading:not(.topic-hero):not(.module-hero):not(.tool-intro):not(.audiobook-heading) .chapter-symbol { border: 0; background: #fffdf8; color: #17213a; }

.page-shell-inner .not-found-container .chapter-heading h1 { color: #fffdf9; }

/* Home: all guides as compact cards. */
/* One row per group: its mark and name, then its three guides as cards in the Guides page's style (a tint of the
   guide's color, its small emblem, its title and length). */
.home-guide-groups { display: grid; gap: 12px; }
.home-guide-group { display: grid; grid-template-columns: 176px minmax(0, 1fr); align-items: center; gap: 12px; }
.page-shell-home .home-guide-group-title { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 4px; border: 0; color: var(--framework-ink); font-size: .98rem; line-height: 1.25; }
.home-guide-group-mark { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #17213a; }
.home-guide-group-mark .framework-icon { width: 24px; height: 24px; }
.home-guide-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.home-guide-list li { margin: 0; }
.home-guide-list a { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; height: 100%; box-sizing: border-box; padding: 12px 16px 12px 12px; border: 1px solid color-mix(in srgb, var(--family-accent) 22%, var(--framework-line)); border-radius: 14px; background: linear-gradient(135deg, var(--family-surface), #fffdf8 70%); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.home-guide-list a:hover { border-color: color-mix(in srgb, var(--family-accent) 55%, #fffdf8); box-shadow: 0 10px 26px color-mix(in srgb, var(--family-accent) 14%, transparent); transform: translateY(-2px); text-decoration: none; }
.home-guide-emblem .emblem-small { width: 56px; height: 56px; }
.home-guide-emblem .emblem-small .emblem-icon { width: 34px; height: 34px; }
.home-guide-emblem .emblem-small .emblem-icon .framework-icon { width: 20px; height: 20px; }
.home-guide-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-guide-text strong { color: var(--framework-ink); font-size: .95rem; line-height: 1.3; }
.home-guide-text small { color: #68707f; font-size: .74rem; }
@media (max-width: 980px) {
    .home-guide-group { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .home-guide-groups { gap: 20px; }
}
@media (max-width: 760px) { .home-guide-list { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .home-guide-list a { transition: none; } .home-guide-list a:hover { transform: none; } }

/* Home: Guides is a full section with its own heading. */
.page-shell-home .framework-panel-heading h2.home-section-title { margin: 0 0 8px; padding: 0; border: 0; color: var(--framework-ink); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 550; letter-spacing: -.03em; line-height: 1.2; }
.home-practice .framework-panel-heading { align-items: end; margin-bottom: 20px; }
.home-practice .framework-panel-heading p { margin: 0; font-size: 1rem; }


/* Footer in three bands: the ten modules, whose site it is, and the small print. */
.site-footer.site-footer-banded { padding: 0; border-top: 1px solid var(--framework-line); background: none; }
.site-footer-band { padding: 0 32px; }
.site-footer-banded .site-footer-inner { max-width: 1100px; margin: 0 auto; }
.site-footer-banded .site-footer-modules { padding-top: 36px; padding-bottom: 36px; background: #f3ede2; }
.site-footer-identity-band { padding-top: 40px; padding-bottom: 40px; background: #17213a; }
.site-footer-identity-band .site-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.site-footer-banded .site-footer-brand { color: #fffdf9; }
.site-footer-banded .site-footer-brand:hover { color: #f2d58e; }
.site-footer-brand .brand-suffix { color: #e8b54a; }
/* Who made it: the credit above the LinkedIn button. */
.site-footer-credit { display: grid; gap: 10px; justify-items: start; }
.site-footer-credit p { margin: 0; color: #c9cfdf; font-size: .9rem; }
.site-footer-banded .site-footer-tagline { margin: 8px 0 0; color: #e5dfd1; }
.site-footer-banded .site-footer-connect-button { display: inline-flex; align-items: center; min-height: 46px; padding: 10px 20px; border: 1px solid #e8b54a; border-radius: 8px; background: #e8b54a; color: #17213a; font-size: .9rem; font-weight: 600; text-decoration: none; }
.site-footer .site-footer-connect-button:hover { border-color: #f2c766; background: #f2c766; color: #17213a; }
.site-footer-legal { padding-top: 16px; padding-bottom: 16px; background: #111a2e; }
.site-footer-banded .site-footer-legal .site-footer-copyright { margin: 0; padding: 0; border: 0; color: #aebad1; font-size: .76rem; text-align: left; }
.site-footer-banded :focus-visible { outline-color: #fffdf9; }
.site-footer-banded .site-footer-modules :focus-visible { outline-color: var(--framework-accent); }
@media (max-width: 560px) {
    .site-footer-band { padding-left: 20px; padding-right: 20px; }
    .site-footer-connect-button { width: 100%; justify-content: center; box-sizing: border-box; }
    .site-footer-credit { width: 100%; justify-items: stretch; }
}
.site-footer-banded .site-footer-identity { flex: 1 1 280px; min-width: 0; }
.site-footer-banded .site-footer-identity p { white-space: normal; }

/* Topic pages: one line for all the guides a topic belongs to. */
.playlist-membership-many { border: 1px solid #e4ddcf; border-radius: 12px; background: #fffdf8; }
.playlist-membership-many summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--framework-accent); font-weight: 600; cursor: pointer; list-style: none; }
.playlist-membership-many summary::-webkit-details-marker { display: none; }
.playlist-membership-many summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
.playlist-membership-many[open] summary::after { transform: rotate(-135deg); }
.playlist-membership-many summary .framework-icon { width: 24px; height: 24px; color: var(--framework-accent); }
.playlist-membership-many ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin: 0; padding: 4px 10px 12px; list-style: none; }
.playlist-membership-many li { margin: 0; }
.playlist-membership.playlist-membership-many li a { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--framework-ink); font-size: .9rem; }
.playlist-membership.playlist-membership-many li a:hover { background: var(--family-surface); color: var(--family-accent); }
.playlist-membership-many li .framework-icon { width: 22px; height: 22px; }
@media (max-width: 680px) { .playlist-membership-many ul { grid-template-columns: minmax(0, 1fr); } }

/* Topic pages: a more comfortable reading column, with the opening paragraph as a lead. */
main.content-container > .topic-hero ~ p { font-size: 1.1rem; line-height: 1.85; }
/* A topic's opening paragraph sets it up: the heading face, in italic, so it reads apart from the body text below. */
main.content-container > .topic-hero ~ p:first-of-type { color: var(--framework-ink); font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; font-style: italic; font-weight: 380; font-variation-settings: "opsz" 48; line-height: 1.6; letter-spacing: -.005em; }
/* The end of a topic: its habit in the Profile, in the module's tint, with the topic's square lit among the ninety. */
.topic-habit { display: grid; grid-template-columns: minmax(0, 1fr) 104px; align-items: center; gap: 28px; margin: 48px 0 0; padding: 26px 28px; border: 1px solid color-mix(in srgb, var(--family-accent) 18%, transparent); border-radius: 16px; background: var(--family-surface); }
.page-shell-inner .topic-habit-label { margin: 0 0 8px; color: var(--family-accent); font-size: .7rem; font-weight: 800; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; }
.page-shell-inner .topic-habit-text { margin: 0 0 18px; color: var(--framework-ink); font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; font-weight: 450; font-variation-settings: "opsz" 36; line-height: 1.4; letter-spacing: -.01em; }
.page-shell-inner .topic-habit-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0; color: #4c5669; font-size: .86rem; line-height: 1.5; }
.topic-habit .framework-button { min-height: 40px; padding: 8px 16px; font-size: .82rem; }
.topic-habit-grid { padding: 9px; border-radius: 12px; background: #fffdf8; }
.topic-habit-grid .fp-grid, .topic-habit-grid .fp-row { gap: 2px; }
.topic-habit-grid .fp-cell { border-radius: 2px; }
.topic-habit-grid .fp-cell.on { background: var(--family-bright); box-shadow: 0 0 6px var(--family-bright); transform: scale(1.45); }
@media (max-width: 680px) {
    .topic-habit { grid-template-columns: minmax(0, 1fr) 68px; gap: 16px; padding: 20px; }
    .page-shell-inner .topic-habit-text { font-size: 1.12rem; }
    .topic-habit-grid { align-self: start; padding: 6px; }
}
@media (max-width: 680px) {
    main.content-container > .topic-hero ~ p { font-size: 1.04rem; }
    main.content-container > .topic-hero ~ p:first-of-type { font-size: 1.12rem; }
}

/* Moving between pages: a soft cross-fade, with the header staying in place. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}


/* The site header, on every page: the author's name on the left; the three sections and the language picker on the
   right. A section's name goes straight to its landing page. Framework and Profile have more than one page, so the
   arrow beside the name, or hovering it, opens a short menu of all of them. On phones everything folds into a
   drawer, with each section's other pages listed beneath its name. The bar is navy in both color schemes; its
   menus are light cards (dark in the dark theme). */
.site-header { position: relative; z-index: 20; border-bottom: 1px solid #0f172b; background: #17213a; view-transition-name: site-header; }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; max-width: 1164px; min-height: 84px; margin: 0 auto; padding: 16px 32px; }
.site-header-bar { display: flex; align-items: center; justify-content: space-between; }

/* The brand: the author's name, with the framework's title beneath. */
.site-brand { display: inline-flex; align-items: center; gap: 11px; color: #f6f2e8; font-size: 1.15rem; font-weight: 650; letter-spacing: -.035em; text-decoration: none; white-space: nowrap; }
a.site-brand:hover { color: #ffd77a; text-decoration: none; }
span.site-brand { cursor: default; user-select: none; }
.site-brand .site-brand-mark { display: inline-flex; flex: 0 0 38px; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: #222d4a; }
.site-brand-mark .framework-icon { width: 30px; height: 30px; }
/* The mark's three squares in three of the framework's colors, rising to gold. */
.brand-mark .brand-mark-1 { fill: #04a66d; }
.brand-mark .brand-mark-2 { fill: #099eab; }
.brand-mark .brand-mark-3 { fill: #e8b54a; }
.site-brand .site-brand-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.site-brand .brand-suffix { color: #e8b54a; }
.site-brand .site-brand-sub { color: #a9b2c7; font-size: .68rem; font-weight: 500; letter-spacing: .01em; }

/* The sections. A section with a menu is one rounded control: its name, then the arrow. */
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.nav-section { position: relative; display: flex; align-items: center; border-radius: 8px; transition: background .15s ease; }
.nav-section-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 11px; border-radius: 8px; color: #d3d8e4; font-size: .8rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav-section-link .framework-icon { width: 20px; height: 20px; }
.nav-section.has-menu .nav-section-link { padding-right: 3px; }
.nav-section-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; min-height: 44px; margin: 0; padding: 0 6px 0 0; border: 0; border-radius: 0 8px 8px 0; background: none; color: #a9b2c7; font: inherit; cursor: pointer; }
.nav-section-toggle svg { width: 12px; height: 12px; transition: transform .15s ease; }
.nav-section.open .nav-section-toggle svg { transform: rotate(180deg); }
.nav-section:hover, .nav-section.open { background: #24304f; }
.nav-section:hover .nav-section-link, .nav-section.open .nav-section-link, .nav-section:hover .nav-section-toggle { color: #ffffff; text-decoration: none; }
.nav-section.is-current { background: #2a3658; }
.nav-section.is-current .nav-section-link, .nav-section.is-current .nav-section-toggle { color: #ffd77a; }
.nav-section.is-current .nav-section-link { font-weight: 600; }

/* A section's menu: each page with its icon and one line on what it is for. */
.nav-section-menu { position: absolute; top: 100%; right: 0; z-index: 210; width: 330px; max-width: calc(100vw - 32px); padding-top: 8px; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s; }
.nav-section.open .nav-section-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
@media (hover: hover) and (min-width: 681px) {
    /* A short pause before opening, so passing over a section on the way somewhere else does not flash its menu. */
    .nav-section.has-menu:hover .nav-section-menu { visibility: visible; opacity: 1; transform: none; transition: opacity .14s ease .1s, transform .14s ease .1s, visibility 0s linear .1s; }
}
.nav-section-menu ul { margin: 0; padding: 6px; border: 1px solid var(--framework-line); border-radius: 14px; background: #fffdf8; box-shadow: 0 18px 40px rgba(10, 16, 32, .22); list-style: none; }
.nav-section-menu li { margin: 0; }
.nav-section-menu a { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 12px 9px 9px; border-radius: 10px; color: var(--framework-ink); text-decoration: none; }
.nav-section-menu a:hover { background: #f8f3ea; text-decoration: none; }
.nav-section-menu a:focus-visible { outline-offset: -2px; }
.nav-menu-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #f3ede0; color: var(--framework-accent); }
.nav-menu-icon .framework-icon { width: 24px; height: 24px; }
/* A guide group's mark: three squares in its guides' colors. */
.nav-group-mark rect { fill: var(--family-bright); }
.nav-menu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-menu-text strong { font-size: .88rem; font-weight: 600; line-height: 1.3; }
.nav-menu-text small { color: #636b7a; font-size: .76rem; line-height: 1.4; }
.nav-section-menu a[aria-current="page"] { background: #f4f0e6; }
.nav-section-menu a[aria-current="page"] .nav-menu-icon { background: #17213a; color: #e8b54a; }

/* The language picker, and the appearance menu beside it (Light, Dark or Auto), which looks the same. */
.lang-dropdown, .theme-dropdown { position: relative; margin-left: 6px; }
.lang-trigger, .theme-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid #34416a; border-radius: 8px; background: #222d4a; color: #eef0f6; font: inherit; font-size: .85rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .15s ease; }
.lang-trigger:hover, .theme-trigger:hover { background: #2a3658; color: #ffffff; }
.lang-flag { font-size: 1rem; line-height: 1; }
.lang-chevron { flex-shrink: 0; width: 12px; height: 12px; opacity: .75; transition: transform .15s ease; }
.lang-dropdown.open .lang-chevron, .theme-dropdown.open .lang-chevron { transform: rotate(180deg); opacity: 1; }
.lang-menu, .theme-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 210; width: 210px; padding: 6px; border: 1px solid var(--framework-line); border-radius: 14px; background: #fffdf8; box-shadow: 0 18px 40px rgba(10, 16, 32, .22); }
.lang-dropdown.open .lang-menu, .theme-dropdown.open .theme-menu { display: block; }
.lang-menu-heading { margin: 0 0 4px; padding: 6px 10px 8px; border-bottom: 1px solid #efeadf; color: #5c6472; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lang-menu .lang-option, .theme-menu .theme-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #39475f; font-size: .88rem; line-height: 1.3; text-decoration: none; }
.lang-menu .lang-option:hover, .theme-menu .theme-option:hover { background: #f8f3ea; text-decoration: none; }
.lang-menu .lang-option.active, .theme-menu .theme-option.active { background: #f1ebde; color: #17213a; font-weight: 700; }
.lang-name { flex: 1; }
.lang-check { display: none; color: var(--framework-accent); font-weight: 700; }
.lang-option.active .lang-check, .theme-option.active .lang-check { display: inline-block; }
.theme-menu { width: 180px; }
.theme-menu .theme-option { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.theme-current, .theme-option-icon { display: flex; }
.theme-option-icon { color: var(--framework-accent); }
.theme-icon { width: 18px; height: 18px; flex: none; }
.theme-trigger-label { display: none; }

/* The phone menu button, hidden until the drawer takes over. */
.nav-toggle { display: none; position: relative; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid #34416a; border-radius: 8px; background: #222d4a; cursor: pointer; }
.nav-toggle:hover { background: #2a3658; }
.hamburger-bar { position: absolute; display: block; width: 18px; height: 2px; border-radius: 1px; background: #eef0f6; transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .2s ease; }
.hamburger-bar:nth-child(1) { transform: translateY(-6px); }
.hamburger-bar:nth-child(3) { transform: translateY(6px); }
.nav-toggle.active .hamburger-bar:nth-child(1) { transform: rotate(45deg); }
.nav-toggle.active .hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active .hamburger-bar:nth-child(3) { transform: rotate(-45deg); }

/* Narrower screens keep one row: first the brand's second line goes, then the section icons. */
@media (min-width: 681px) and (max-width: 1120px) {
    .site-brand .site-brand-sub { display: none; }
}
@media (min-width: 681px) and (max-width: 920px) {
    .site-header-inner { gap: 16px; padding: 14px 20px; }
    .nav-section-link > .framework-icon { display: none; }
}

/* Phones: a drawer under the brand, each section with its other pages beneath it. */
@media (max-width: 680px) {
    .site-header-inner { display: block; min-height: 72px; padding: 12px 18px; }
    .nav-toggle { display: flex; }
    .site-nav { flex-direction: column; align-items: stretch; gap: 0; max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: max-height .35s cubic-bezier(.4, 0, .2, 1), opacity .25s ease, margin .25s ease; }
    .site-nav.open { max-height: calc(100vh - 90px); overflow-y: auto; visibility: visible; opacity: 1; margin-top: 14px; padding-bottom: 6px; }
    .nav-section { display: block; border-top: 1px solid #2a3658; border-radius: 0; }
    .nav-section:hover, .nav-section.open, .nav-section.is-current { background: none; }
    .nav-section-link, .nav-section.has-menu .nav-section-link { display: flex; min-height: 52px; padding: 0 8px; color: #f1f3f8; font-size: 1rem; font-weight: 600; }
    .nav-section-link .framework-icon { width: 22px; height: 22px; color: #e8b54a; }
    .nav-section-link:hover { background: #24304f; }
    .nav-section-toggle { display: none; }
    .nav-section-menu { position: static; width: auto; max-width: none; padding: 0 0 10px 38px; visibility: visible; opacity: 1; transform: none; transition: none; }
    .nav-section-menu ul { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
    .nav-section-menu .is-landing, .nav-menu-icon, .nav-menu-text small { display: none; }
    .nav-section-menu a { display: flex; min-height: 44px; padding: 0 10px; border-radius: 8px; color: #c4cadb; }
    .nav-section-menu a:hover { background: #24304f; }
    .nav-menu-text strong { font-size: .95rem; font-weight: 500; }
    .nav-section-link[aria-current="page"], .nav-section-menu a[aria-current="page"] { background: #2a3658; color: #ffd77a; }
    .lang-dropdown, .theme-dropdown { margin: 0; padding: 12px 0 4px; border-top: 1px solid #2a3658; }
    .theme-dropdown { border-top: 0; padding-top: 4px; }
    .lang-trigger, .theme-trigger { width: 100%; padding: 0 14px; }
    .lang-trigger .lang-chevron, .theme-trigger .lang-chevron { margin-left: auto; }
    .theme-trigger-label { display: inline; }
    .lang-menu, .theme-menu { position: static; width: auto; margin-top: 8px; box-shadow: none; }
}
@media (max-width: 380px) {
    .site-brand .site-brand-sub { display: none; }
}

/* Focus rings: gold on the navy bar, the site's accent inside the light menus. */
.site-header :focus-visible { outline-color: #ffd77a; }
.nav-section-menu :focus-visible, .lang-menu :focus-visible { outline-color: var(--framework-accent); }

@media (prefers-reduced-motion: reduce) {
    .site-header * { transition: none !important; }
}

/* The guide bar on topic pages. */

.playlist-return { margin-bottom: 24px; padding: 14px; border: 1px solid #d7d1c5; border-radius: 10px; background: #f7f3ec; }
.playlist-return a { display: flex; align-items: center; gap: 10px; font-size: .85rem; }
.playlist-return .framework-icon { width: 26px; height: 26px; flex-shrink: 0; }
.playlist-return[hidden], .playlist-return a[hidden] { display: none; }


/* Reading a guide from a topic page: one bar above the breadcrumbs, with a carousel arrow on each side. */
.playlist-return { margin-bottom: 16px; padding: 0; overflow: hidden; border-color: color-mix(in srgb, var(--family-accent) 24%, #e5dfd5); background: var(--family-surface); }
.playlist-return-body { padding: 12px 16px; min-width: 0; }
.playlist-return-link { color: var(--framework-ink); text-decoration: none; }
.playlist-return-link:hover strong { text-decoration: underline; }
.playlist-return .playlist-return-link .framework-icon { width: 22px; height: 22px; color: var(--family-accent); }
.playlist-return.is-reading { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: stretch; }
.playlist-return.is-reading[hidden] { display: none; }
.playlist-return.is-reading .playlist-return-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.playlist-return.is-reading .playlist-return-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; }
.playlist-reading { display: contents; }
.playlist-reading[hidden], .playlist-reading [hidden], .playlist-reading-arrow[hidden], .playlist-reading-nav [hidden], .playlist-reading-nav[hidden] { display: none; }
.playlist-reading-position { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--family-accent); }
.playlist-return .playlist-reading-context, .playlist-return .playlist-reading-end { grid-column: 1 / -1; margin: 0; font-size: .9rem; line-height: 1.6; color: #38455d; }
.playlist-return .playlist-reading-end { font-weight: 600; color: var(--family-accent); }
/* The arrows fill the bar's full height so they are an easy target on either side. */
.playlist-return a.playlist-reading-arrow { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--family-accent) 14%, #fffdf8); color: var(--family-accent); transition: background .15s ease, color .15s ease; }
.playlist-return a.playlist-reading-arrow svg { width: 28px; height: 28px; }
.playlist-return a.playlist-reading-arrow[href]:hover, .playlist-return a.playlist-reading-arrow[href]:focus-visible { background: var(--family-accent); color: #fff; }
.playlist-return a.playlist-reading-arrow[aria-disabled="true"] { background: transparent; color: color-mix(in srgb, var(--family-accent) 28%, transparent); cursor: default; }
@media (prefers-reduced-motion: reduce) { .playlist-return a.playlist-reading-arrow { transition: none; } }
.playlist-reading-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; font-size: .85rem; }
.playlist-reading-nav a { display: flex; align-items: center; gap: 10px; color: var(--framework-ink); text-decoration: none; }
.playlist-reading-nav [data-reading="next-name"] { margin-left: auto; text-align: right; }
.playlist-reading-nav-end { margin-top: 32px; padding: 14px 16px; border: 1px solid #d7d1c5; border-radius: 10px; background: #f7f3ec; }
@media (max-width: 560px) {
    .playlist-return.is-reading { grid-template-columns: 44px minmax(0, 1fr) 44px; }
    .playlist-return.is-reading .playlist-return-body { grid-template-columns: minmax(0, 1fr); padding: 12px 10px; }
}
body.playlist-reading-mode .book-nav-footer { display: none; }
/* In reading mode the sidebar follows the playlist instead of the module. */
body.playlist-reading-mode .site-sidebar .module-context:not(.playlist-context) { display: none; }
.playlist-context-stage { margin: 14px 8px 4px; font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5c6472; }
.playlist-context ol { margin-top: 0; }
.playlist-context-icon { display: inline-block; flex-shrink: 0; background: var(--family-accent); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }

/* End-of-topic pointer to a playlist that includes it; hidden when already reading that playlist. */
.playlist-membership { margin-top: 32px; }
.playlist-membership a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--family-accent) 24%, #e5dfd5); border-radius: 10px; background: var(--family-surface); color: var(--framework-ink); font-size: .9rem; text-decoration: none; }
.playlist-membership a:hover { border-color: var(--family-accent); }
.playlist-membership .framework-icon { flex-shrink: 0; width: 26px; height: 26px; color: var(--family-accent); }
.playlist-membership a > span:last-child { margin-left: auto; color: var(--family-accent); }
body.playlist-reading-mode .playlist-membership { display: none; }
.playlist-return a.playlist-reading-arrow[hidden] { display: none; }
/* Beside the carousel arrows, the back link's own small arrow would read as a third control. */
.playlist-return.is-reading .playlist-return-link > span[aria-hidden="true"] { display: none; }

/* Listening pages (the Audio page and the guides) and the Guides page: one column. A header with an emblem, the player, then the topics.
   The page carries its own color (a guide's family class, or the framework green); the player and each topic row
   carry their module's. The Read page uses the same header (.emblem-hero.format-hero) to match the Listen page. */
.listen-page { display: block; }
.listen-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Header: a color band whose text lines up with the column below. With a player, the player overlaps its lower edge. */
.emblem-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 188px; gap: 44px; align-items: center; margin-bottom: 40px; padding: 40px 44px; border-radius: 18px; background: var(--family-accent); color: #fffdf8; }
.emblem-hero.with-player { margin-bottom: 0; padding-bottom: 96px; }
/* On the listening pages the header's text lines up with the narrower column below it. */
.listen-page .emblem-hero { padding-left: max(32px, calc((100% - 820px) / 2)); padding-right: max(32px, calc((100% - 820px) / 2)); }
.format-hero { --family-accent: #17213a; --family-surface: #f6ecd7; }
.emblem-hero-copy { grid-column: 1; grid-row: 1; }
.emblem-hero-eyebrow { margin: 0 0 6px; color: color-mix(in srgb, #fffdf8 78%, transparent); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.emblem-hero h1 { margin: 0 0 10px; padding: 0; border: 0; color: #fffdf8; font-size: 2rem; line-height: 1.15; }
.emblem-hero-intro { margin: 0 0 12px; color: color-mix(in srgb, #fffdf8 88%, transparent); font-size: 1rem; line-height: 1.55; }
.emblem-hero-facts { margin: 0; color: color-mix(in srgb, #fffdf8 72%, transparent); font-size: .86rem; line-height: 1.5; }
.emblem-hero-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 22px; padding: 0 16px; border: 1px solid #e8b54a; border-radius: 10px; background: #e8b54a; color: #17213a; font-size: .88rem; font-weight: 650; text-decoration: none; }
.emblem-hero-switch:hover { border-color: #fffdf8; background: #fffdf8; }
.emblem-hero-switch .framework-icon { width: 20px; height: 20px; }
/* The section headers (All topics, Listen, Guides): deep navy lit by jewel tones, a warm glow around the emblem, a
   larger title, and the section's figures in gold. */
.emblem-hero.format-hero { background: radial-gradient(ellipse 60% 95% at 100% 0%, rgba(106, 129, 242, .34), transparent 70%), radial-gradient(ellipse 50% 100% at 0% 100%, rgba(4, 166, 109, .22), transparent 70%), radial-gradient(ellipse 45% 80% at 50% 125%, rgba(214, 89, 151, .2), transparent 70%), linear-gradient(135deg, rgba(255, 255, 255, .05), transparent 45%), #17213a; }
.emblem-hero.format-hero > .emblem { box-shadow: 0 0 0 16px rgba(255, 254, 250, .08), 0 0 120px 46px rgba(232, 181, 74, .34), 0 18px 44px rgba(0, 0, 0, .25); }
.emblem-hero.format-hero h1 { font-size: clamp(2.2rem, 3.6vw, 2.8rem); letter-spacing: -.02em; }
.emblem-hero-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 20px 0 0; padding: 0; list-style: none; }
.emblem-hero-stats li { display: grid; gap: 6px; margin: 0; }
.emblem-hero-stats strong { color: #f2c766; font-family: "Fraunces", Georgia, serif; font-size: 2.1rem; font-weight: 600; line-height: 1; }
.emblem-hero-stats span { color: color-mix(in srgb, #fffdf8 70%, transparent); font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }

/* The emblem: a round medallion, unlike the square topic tiles. Its ring has one arc per topic in that topic's
   module color, grouped (phases or modules); the topic in the player has the heavier arc. */
.emblem { position: relative; display: grid; place-items: center; width: 188px; height: 188px; border-radius: 50%; }
.emblem-hero > .emblem { grid-column: 2; grid-row: 1; box-shadow: 0 0 0 16px rgba(255, 254, 250, .07), 0 18px 44px rgba(0, 0, 0, .22); }
.emblem::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fffdf8; }
.emblem-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.emblem-ring path { stroke: var(--family-bright); stroke-width: 9; transition: stroke-width .25s ease; }
.emblem-ring path.is-current { stroke-width: 15; }
.emblem-icon { position: relative; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: var(--family-surface); color: var(--family-accent); }
.emblem-icon .framework-icon { width: 64px; height: 64px; }
.emblem-ripples { position: absolute; z-index: -1; left: 50%; top: 50%; width: 760px; max-width: none; height: 760px; transform: translate(-50%, -50%); stroke: #fffdf8; stroke-width: 1.5; pointer-events: none; }

/* Player: the icon over the visualizer, what is playing, the controls, and one row for time, speed and settings. */
.listen-player { position: sticky; top: 12px; z-index: 5; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 22px; align-items: center; max-width: 820px; margin: -60px auto 0; padding: 16px 22px 16px 16px; border: 1px solid color-mix(in srgb, var(--family-accent) 18%, #fffdf8); border-radius: 20px; background: #fffdf8; box-shadow: 0 16px 40px rgba(23, 33, 58, .13); }
.player-art { position: relative; display: grid; place-items: center; width: 108px; height: 108px; overflow: hidden; border-radius: 16px; background: var(--family-surface); color: var(--family-accent); }
.listen-player #audio-visualizer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.listen-player #audio-art-icon { position: relative; z-index: 1; display: grid; place-items: center; }
.listen-player #audio-art-icon .framework-icon { width: 58px; height: 58px; }
.player-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.player-now { min-width: 0; }
.player-label { margin: 0 0 2px; color: var(--family-accent); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.listen-player h2 { margin: 0; padding: 0; border: 0; color: var(--framework-ink); font-size: 1.5rem; line-height: 1.15; }
.player-transport { display: flex; flex: none; align-items: center; gap: 2px; }
.player-transport button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--framework-ink); cursor: pointer; }
.player-transport button:hover:not(:disabled) { background: var(--family-surface); }
.player-transport button:disabled { opacity: .35; cursor: default; }
.player-transport .audio-control-icon { width: 24px; height: 24px; }
.audio-skip-number { fill: currentColor; stroke: none; font-family: inherit; font-size: 9px; font-weight: 750; text-anchor: middle; dominant-baseline: central; }
.player-transport .player-play { width: 58px; height: 58px; margin: 0 6px; background: var(--family-accent); color: #fffdf8; font-size: 1.05rem; }
.player-transport .player-play:hover:not(:disabled) { background: var(--family-accent); filter: brightness(.92); }
.player-seek { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; margin-top: 12px; color: var(--framework-muted); font-size: .76rem; font-variant-numeric: tabular-nums; }
.player-seek input { width: 100%; margin: 0; accent-color: var(--family-accent); }
.player-chip { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 9px; border: 1px solid var(--framework-line); border-radius: 999px; background: #fffdf8; color: var(--framework-ink); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.player-chip svg { width: 16px; height: 16px; color: var(--framework-muted); }
.player-speed { appearance: none; -webkit-appearance: none; text-align: center; }
.player-chip:focus-visible { outline: 2px solid var(--family-accent); outline-offset: 2px; }
.player-status { margin: 6px 0 0; color: var(--framework-muted); font-size: .8rem; }

/* Settings: one button that opens a small menu. */
.player-more { position: relative; }
.player-more summary { list-style: none; }
.player-more summary::-webkit-details-marker { display: none; }
.player-more[open] summary { border-color: var(--family-accent); }
.player-menu { position: absolute; z-index: 10; top: calc(100% + 8px); right: 0; display: grid; gap: 12px; width: 260px; padding: 16px; border: 1px solid var(--framework-line); border-radius: 14px; background: #fffdf8; box-shadow: 0 14px 34px rgba(23, 33, 58, .16); color: var(--framework-ink); font-size: .84rem; font-variant-numeric: normal; text-align: left; }
.player-menu-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.player-menu-row input[type="range"] { width: 120px; accent-color: var(--family-accent); }
.player-menu-row select { padding: 4px 6px; border: 1px solid var(--framework-line); border-radius: 8px; background: #fffdf8; color: inherit; font: inherit; }
.player-menu-check { display: flex; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; }
.player-menu-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--family-accent); }
.player-menu-check span { flex: 1; }
.player-menu-link { color: var(--family-accent); font-weight: 600; }
.player-menu-note { margin: 0; padding-top: 10px; border-top: 1px solid var(--framework-line); color: var(--framework-muted); font-size: .76rem; line-height: 1.45; }

/* Reading while audio plays asks first: pause and read here, or read in a new tab. */
.audio-read-dialog { width: min(440px, calc(100% - 32px)); padding: 28px; border: 1px solid #bac6dc; border-radius: 16px; background: #fcf9f2; color: #283854; }
.audio-read-dialog::backdrop { background: #17283b88; }
.audio-read-dialog h2 { margin: 0 0 14px; padding: 0; border: 0; font-size: 1.5rem; }
.audio-read-dialog p { font-size: .9rem; line-height: 1.7; }
.audio-read-actions { display: grid; gap: 12px; margin-top: 24px; }
.audio-read-actions a, .audio-read-actions button { min-height: 44px; padding: 12px; border: 1px solid #d7d1c5; border-radius: 8px; background: #fff; color: #3b527c; font: inherit; font-size: .9rem; text-align: center; cursor: pointer; }

/* The column below the header. */
.listen-body { max-width: 820px; margin: 48px auto 0; }
.emblem-hero:not(.with-player) + .listen-body { margin-top: 0; }
.listen-note { margin: 0 0 32px; padding: 12px 16px; border-radius: 12px; background: var(--family-surface); color: var(--framework-ink); font-size: .9rem; }

/* Topic rows: a card of rows; the title is the row's button and stretches over the whole row. */
.topic-list { margin: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--framework-line); border-radius: 16px; background: #fffdf8; }
.topic-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; margin: 0; padding: 10px 16px; }
.topic-list-numbered .topic-row { grid-template-columns: 26px 44px minmax(0, 1fr) auto auto; padding: 14px 16px; }
.topic-row + .topic-row { border-top: 1px solid var(--framework-line); }
.topic-row:hover { background: color-mix(in srgb, var(--family-surface) 50%, #fffdf8); }
.topic-row-num { display: grid; place-items: center; color: var(--framework-muted); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.topic-row-icon { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--family-surface); color: var(--family-accent); }
.topic-list-numbered .topic-row-icon { width: 44px; height: 44px; border-radius: 12px; }
.topic-row-icon .framework-icon { width: 24px; height: 24px; }
.topic-list-numbered .topic-row-icon .framework-icon { width: 26px; height: 26px; }
.topic-row-text h3 { margin: 0; padding: 0; border: 0; font-size: 1.06rem; line-height: 1.3; }
.topic-list-numbered .topic-row-text h3 { font-size: 1.12rem; }
.topic-row-text p { margin: 3px 0 0; color: #47556e; font-size: .95rem; line-height: 1.5; }
.topic-row-code { margin-left: 6px; color: var(--framework-muted); font-size: .76rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.topic-row-play { padding: 0; border: 0; background: none; color: var(--framework-ink); font: inherit; font-family: var(--font-display); font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.topic-row-play::after { content: ""; position: absolute; inset: 0; }
.topic-row-play:focus-visible { outline: none; }
.topic-row-play:focus-visible::after { outline: 3px solid var(--family-accent); outline-offset: -3px; }
.topic-row-play:disabled { cursor: default; }
a.topic-row-play:hover { text-decoration: underline; }
.topic-row-time { color: var(--framework-muted); font-size: .84rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.topic-row-read { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--framework-line); border-radius: 9px; background: #fffdf8; color: var(--framework-ink); font-size: .82rem; font-weight: 650; text-decoration: none; }
.topic-row-read:hover { border-color: var(--family-accent); }
.topic-row-read .framework-icon { width: 16px; height: 16px; color: var(--family-accent); }

/* The topic in the player: tinted in its module color; while it plays, moving bars replace its icon. */
.topic-row.is-current { background: var(--family-surface); box-shadow: inset 4px 0 0 var(--family-accent); }
.topic-row.is-current .topic-row-icon { background: var(--family-accent); color: #fffdf8; }
.topic-row.is-current .topic-row-num, .topic-row.is-current .topic-row-time { color: var(--family-accent); }
.topic-row-eq { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 3px; }
.topic-row-eq i { width: 3px; height: 30%; border-radius: 1px; background: currentColor; animation: topic-row-eq .9s ease-in-out infinite alternate; }
.topic-row-eq i:nth-child(2) { animation-delay: -.3s; }
.topic-row-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes topic-row-eq { from { height: 22%; } to { height: 56%; } }
.topic-row:has(.topic-row-play.is-playing) .topic-row-icon .framework-icon { visibility: hidden; }
.topic-row:has(.topic-row-play.is-playing) .topic-row-eq { display: flex; }

/* Guides: each phase is a heading, a numbered list and the task that closes it. */
.guide-phase + .guide-phase { margin-top: 52px; }
.guide-phase-head { margin-bottom: 18px; }
.guide-phase-label { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--family-accent); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.guide-phase-num { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--family-accent); color: #fffdf8; font-family: var(--font-display); font-size: .95rem; letter-spacing: 0; }
.guide-phase-head h2 { margin: 0 0 8px; padding: 0; border: 0; color: var(--framework-ink); font-size: 1.55rem; line-height: 1.2; }
.guide-phase-head > p:last-child { max-width: 64ch; margin: 0; color: #3a475f; font-size: 1rem; line-height: 1.6; }
.guide-task { display: flex; gap: 12px; margin: 12px 0 0; padding: 14px 18px; border-radius: 14px; background: var(--family-surface); color: var(--framework-ink); font-size: .98rem; font-weight: 500; line-height: 1.5; }
.guide-task svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--family-accent); }
.guide-task strong { display: block; margin-bottom: 2px; color: var(--family-accent); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* The Audio page: a search, then one card per module that opens to its rows. */
.listen-search { margin-bottom: 20px; }
.listen-search input { width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--framework-line); border-radius: 12px; background: #fffdf8; color: var(--framework-ink); font: inherit; font-size: .95rem; box-sizing: border-box; }
.listen-search input:focus-visible { outline: 2px solid var(--framework-accent); outline-offset: 2px; }
.audio-search-wrap { position: relative; }
.audio-search-dropdown { position: absolute; z-index: 6; top: calc(100% + 6px); right: 0; left: 0; max-height: 360px; overflow-y: auto; padding: 6px; border: 1px solid var(--framework-line); border-radius: 12px; background: #fffdf8; box-shadow: 0 12px 32px rgba(23, 33, 58, .14); }
.audio-search-dropdown p { margin: 0; padding: 10px; font-size: .85rem; }
.audio-suggestion { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--framework-ink); font: inherit; text-align: left; cursor: pointer; }
.audio-suggestion:hover, .audio-suggestion[aria-selected="true"] { background: var(--family-surface); }
.audio-suggestion .topic-row-icon { flex: none; width: 34px; height: 34px; border-radius: 9px; }
.audio-suggestion .topic-row-icon .framework-icon { width: 22px; height: 22px; }
.audio-suggestion strong, .audio-suggestion small { display: block; }
.audio-suggestion strong { font-size: .9rem; font-weight: 600; }
.audio-suggestion small { margin-top: 2px; color: var(--framework-muted); font-size: .72rem; }

.track-group { overflow: hidden; border: 1px solid var(--framework-line); border-radius: 16px; background: #fffdf8; }
.track-group + .track-group { margin-top: 10px; }
.track-group-toggle { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 20px; gap: 14px; align-items: center; padding: 14px 16px; list-style: none; cursor: pointer; }
.track-group-toggle::-webkit-details-marker { display: none; }
.track-group-toggle:hover { background: color-mix(in srgb, var(--family-surface) 50%, #fffdf8); }
.track-group-toggle:focus-visible { outline: 3px solid var(--family-accent); outline-offset: -3px; }
.track-group[open] .track-group-toggle { border-bottom: 1px solid var(--framework-line); background: var(--family-surface); }
.track-group-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--family-accent); color: #fffdf8; }
.track-group-icon .framework-icon { width: 26px; height: 26px; }
.track-group-text small { display: block; color: var(--family-accent); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.track-group-text strong { display: block; color: var(--framework-ink); font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.track-group-facts { color: var(--framework-muted); font-size: .82rem; white-space: nowrap; }
.track-group-chevron { width: 20px; height: 20px; color: var(--framework-muted); transition: transform .2s ease; }
.track-group[open] .track-group-chevron { transform: rotate(180deg); }
.track-group .topic-list { border: 0; border-radius: 0; }

/* The Guides page: three cards per situation. Each card carries its guide's small emblem and opens the guide. */
.emblem-small { width: 76px; height: 76px; }
.emblem-small::before { background: #fffdf8; box-shadow: 0 0 0 1px color-mix(in srgb, var(--family-accent) 16%, transparent); }
.emblem-small .emblem-ring path { stroke-width: 11; }
.emblem-small .emblem-icon { width: 46px; height: 46px; background: var(--family-accent); color: #fffdf8; }
.emblem-small .emblem-icon .framework-icon { width: 26px; height: 26px; }
/* A group of guides: its mark (three squares in its guides' colors, on navy like the logo), its name and what it
   covers, over a rule that starts with one segment per guide in its color. */
.guide-group { margin-top: 44px; }
.guide-group-head { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; column-gap: 16px; margin-bottom: 18px; }
.guide-group-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #17213a; }
.guide-group-mark .framework-icon { width: 32px; height: 32px; }
.page-shell-inner .guide-group .guide-section-title { margin: 0; padding: 0; border: 0; font-size: 1.5rem; line-height: 1.2; }
.guide-group-text { margin: 3px 0 0; color: var(--framework-muted); font-size: .92rem; line-height: 1.5; }
.guide-group-rule { display: flex; grid-column: 1 / -1; align-items: center; gap: 4px; margin-top: 16px; }
.guide-group-rule i { width: 44px; height: 4px; border-radius: 2px; background: var(--family-bright); }
.guide-group-rule::after { content: ""; flex: 1; height: 1px; margin-left: 6px; background: var(--framework-line); }
.guide-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.guide-card { position: relative; display: flex; flex-direction: column; padding: 22px 22px 14px; border: 1px solid color-mix(in srgb, var(--family-accent) 22%, var(--framework-line)); border-radius: 18px; background: linear-gradient(180deg, var(--family-surface), #fffdf8 150px); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.guide-card:hover { border-color: color-mix(in srgb, var(--family-accent) 45%, #fffdf8); box-shadow: 0 12px 30px color-mix(in srgb, var(--family-accent) 14%, transparent); transform: translateY(-2px); }
.guide-card:has(.guide-card-link:focus-visible) { outline: 3px solid var(--family-accent); outline-offset: 2px; }
.guide-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.guide-card-arrow { width: 22px; height: 22px; color: var(--family-accent); opacity: .45; transition: opacity .2s ease, transform .2s ease; }
.guide-card:hover .guide-card-arrow { opacity: 1; transform: translateX(3px); }
.page-shell-inner .guide-card h3 { margin: 0 0 8px; padding: 0; border: 0; font-size: 1.15rem; line-height: 1.3; }
.guide-card-link { color: var(--framework-ink); text-decoration: none; }
.guide-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.guide-card-link:focus-visible { outline: none; }
.guide-card-description { flex: 1; margin: 0 0 16px; color: #425069; font-size: .9rem; line-height: 1.6; }
/* The guide's route: its three phases, numbered in its color. */
.guide-card-phases { display: grid; gap: 8px; margin: 0 0 16px; padding: 14px 0 0; border-top: 1px dashed color-mix(in srgb, var(--family-accent) 30%, transparent); list-style: none; }
.guide-card-phases li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; margin: 0; color: var(--framework-ink); font-size: .84rem; font-weight: 550; line-height: 1.4; }
.guide-card-phases li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--family-accent); color: #fffdf8; font-size: .72rem; font-weight: 700; line-height: 1; }
.guide-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--framework-line); }
.guide-card-facts { color: var(--framework-muted); font-size: .8rem; }
.guide-card-read { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; color: var(--family-accent); font-size: .82rem; font-weight: 650; text-decoration: none; }
.guide-card-read:hover { background: var(--family-surface); }
.guide-card-read .framework-icon { width: 16px; height: 16px; }
@media (max-width: 980px) { .guide-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
    /* On phones the emblem sits beside the title, so each card is shorter. */
    .guide-card-grid { grid-template-columns: minmax(0, 1fr); }
    .guide-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px 16px 12px; }
    .guide-card-head { grid-column: 1; grid-row: 1; margin: 0; }
    .guide-card-head .emblem-small { width: 56px; height: 56px; }
    .guide-card-head .emblem-small .emblem-icon { width: 34px; height: 34px; }
    .guide-card-head .emblem-small .emblem-icon .framework-icon { width: 20px; height: 20px; }
    .guide-card-arrow { display: none; }
    .page-shell-inner .guide-card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.05rem; }
    .guide-card-description, .guide-card-phases, .guide-card-foot { grid-column: 1 / -1; }
    .guide-card-description { margin: 12px 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .topic-row-eq i { height: 45%; animation: none; }
    .emblem-ring path, .track-group-chevron, .guide-card, .guide-card-arrow { transition: none; }
    .guide-card:hover, .guide-card:hover .guide-card-arrow { transform: none; }
}

@media (max-width: 760px) {
    .emblem-hero, .listen-page .emblem-hero { grid-template-columns: minmax(0, 1fr) 140px; gap: 28px; padding: 32px 28px; }
    .emblem-hero.with-player { padding-bottom: 92px; }
    .emblem-hero > .emblem { width: 140px; height: 140px; }
    .emblem-hero .emblem-icon { width: 84px; height: 84px; }
    .emblem-hero .emblem-icon .framework-icon { width: 48px; height: 48px; }
    .listen-player { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; margin-left: 12px; margin-right: 12px; }
    .player-art { width: 84px; height: 84px; }
    .listen-player .player-skip { display: none; }
}

/* Phones: the emblem sits above a centered title, and the player becomes a bar at the bottom of the screen. */
@media (max-width: 640px) {
    body:has(.listen-player) { padding-bottom: 104px; }
    .emblem-hero, .listen-page .emblem-hero, .listen-page .emblem-hero.with-player { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 0; padding: 30px 20px 24px; }
    .emblem-hero > .emblem { grid-column: 1; justify-self: center; width: 136px; height: 136px; box-shadow: 0 0 0 12px rgba(255, 254, 250, .07), 0 14px 32px rgba(0, 0, 0, .2); }
    .emblem-hero .emblem-icon { width: 80px; height: 80px; }
    .emblem-hero .emblem-icon .framework-icon { width: 46px; height: 46px; }
    .emblem-ripples { width: 560px; height: 560px; }
    .emblem-hero-copy { grid-row: 2; text-align: center; }
    .emblem-hero-stats { justify-content: center; gap: 12px 24px; }
    .emblem-hero-stats strong { font-size: 1.8rem; }
    .emblem-hero h1 { font-size: 1.45rem; }
    .emblem-hero-intro { font-size: .94rem; }
    .listen-player { position: fixed; top: auto; right: 0; bottom: 0; left: 0; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; max-width: none; margin: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 28px rgba(23, 33, 58, .14); }
    .player-art { width: 52px; height: 52px; border-radius: 12px; }
    .listen-player #audio-art-icon .framework-icon { width: 30px; height: 30px; }
    .player-label { overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
    .listen-player h2 { overflow: hidden; font-size: 1.1rem; text-overflow: ellipsis; white-space: nowrap; }
    .player-transport .player-play { width: 44px; height: 44px; margin: 0 2px; }
    .player-seek { grid-column: 1 / -1; gap: 8px; margin-top: 6px; }
    .player-menu { top: auto; bottom: calc(100% + 8px); }
    .listen-body, .emblem-hero:not(.with-player) + .listen-body { margin-top: 28px; }
    .guide-phase-head h2 { font-size: 1.3rem; }
    .topic-row, .topic-list-numbered .topic-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; padding: 12px 12px 12px 14px; }
    .topic-list-numbered .topic-row { align-items: start; }
    .topic-row-num, .topic-row-time { display: none; }
    .topic-row-icon, .topic-list-numbered .topic-row-icon { width: 36px; height: 36px; border-radius: 10px; }
    .topic-row-icon .framework-icon, .topic-list-numbered .topic-row-icon .framework-icon { width: 22px; height: 22px; }
    .topic-row-read { padding: 0 9px; }
    .topic-row-read span { display: none; }
    .track-group-toggle { grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 12px; padding: 12px 14px; }
    .track-group-icon { width: 40px; height: 40px; }
    .track-group-facts { display: none; }
}

/* The Professionalism Profile area (Overview, How it works, Get your profile, Compare): an instrument rather than a
   page to read. It runs full width (meta.profileLayout) in its own palette, light on paper or deep navy with a grid
   glowing in the modules' bright tones,
   following the visitor's system setting. The dark values are designed here, so cms/dark-theme.coffee skips .pf rules. */
.pf { --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --pf-bg: #f6f1e6; --pf-bg-2: #ece5d6; --pf-panel: #fffdf8; --pf-ink: #17213a; --pf-muted: #5a6271; --pf-accent: #85600c; --pf-ink-raw: #17213a;
  --pf-btn-bg: #e8b54a; --pf-btn-ink: #17213a; --pf-btn-hover: #f2c766; --pf-raised: #fffdf8; --pf-well: #f1ebdf;
  --pf-shadow-lg: rgba(23, 33, 58, .10); --pf-shadow-md: rgba(23, 33, 58, .08);
  --pf-lit-mix: 85%; --pf-glow: 0%; --pf-key-lit: #2a4380; --pf-on-lit: #ffffff; --pf-on-accent: #ffffff; --pf-error: #a3372b;
  --pf-hero-bg: radial-gradient(ellipse at 78% 40%, rgba(232, 181, 74, .16), transparent 55%), radial-gradient(ellipse at 10% 0%, rgba(68, 85, 194, .08), transparent 50%);
  --pf-line: color-mix(in srgb, var(--pf-ink-raw) 10%, transparent);
  display: block; background: var(--pf-bg); color: var(--pf-ink); }

/* The same dark palette, always on, for the Profile's door on the homepage. */
.pf.pf-dark { --pf-bg: #0d1322; --pf-bg-2: #111a2e; --pf-panel: #172036; --pf-ink: #eef0f6; --pf-muted: #a3abc2; --pf-accent: #e8b54a; --pf-ink-raw: #e9ecf5;
    --pf-btn-bg: #e8b54a; --pf-btn-ink: #17213a; --pf-btn-hover: #f2c766; --pf-raised: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)); --pf-well: rgba(0, 0, 0, .25);
    --pf-shadow-lg: rgba(0, 0, 0, .4); --pf-shadow-md: rgba(0, 0, 0, .32);
    --pf-lit-mix: 0%; --pf-glow: 45%; --pf-key-lit: #f0cf86; --pf-on-lit: #0d1322; --pf-on-accent: #17213a; --pf-error: #ffb4a6;
  --pf-hero-bg: radial-gradient(ellipse at 70% 60%, rgba(232, 181, 74, .16), transparent 60%), radial-gradient(ellipse at 10% 0%, rgba(106, 129, 242, .14), transparent 50%);
  --pf-line: color-mix(in srgb, var(--pf-ink-raw) 9%, transparent); }
.pf * { box-sizing: border-box; }
.pf h1, .pf h2, .pf h3 { margin: 0; padding: 0; border: 0; color: var(--pf-ink); }
.pf p { color: var(--pf-muted); }
.pf a { color: inherit; }
.pf [hidden] { display: none !important; }
.pf :focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 2px; }
.pf .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pf-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.pf .family-1, .pf .family-2, .pf .family-3, .pf .family-4, .pf .family-5, .pf .family-6, .pf .family-7, .pf .family-8, .pf .family-9, .pf .family-10 { --lit: color-mix(in srgb, var(--family-accent) var(--pf-lit-mix), var(--family-bright)); }

/* The grid: one row per module in its color, one square per topic, with a little more space between the three
   levels, as on the framework's map. Filled squares glow in the dark palette. */
.pf-grid { --s: 24px; --g: 5px; display: grid; gap: var(--g); width: max-content; }
.pf-row { display: flex; align-items: center; gap: var(--g); }
.pf-row i:nth-of-type(3n + 1):not(:first-of-type) { margin-left: calc(var(--g) * 1.4); }
.pf-grid i { display: block; flex: none; width: var(--s); height: var(--s); border-radius: calc(var(--s) / 5); background: color-mix(in srgb, var(--pf-ink-raw) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-ink-raw) 5%, transparent); transition: background-color .15s ease; }
.pf-grid i.on, .pf-grid i.both { background: var(--lit); box-shadow: 0 0 calc(var(--s) / 2.2) color-mix(in srgb, var(--lit) var(--pf-glow), transparent); }
.pf-grid i.a { background: linear-gradient(90deg, var(--lit) 50%, color-mix(in srgb, var(--pf-ink-raw) 7%, transparent) 50%); }
.pf-grid i.b { background: linear-gradient(90deg, color-mix(in srgb, var(--pf-ink-raw) 7%, transparent) 50%, var(--lit) 50%); }
.pf-grid i.none { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-ink-raw) 12%, transparent); }
.pf-grid i.hl { outline: 2px solid var(--pf-accent); outline-offset: 1px; }
/* Squares that name their topic (cms/profile-grid.coffee): the one pointed at is outlined in its module's color. */
.pf-grid-interactive i { cursor: pointer; }
.pf-grid-interactive i.is-pointed { outline: 2px solid var(--lit); outline-offset: 2px; }
/* The card that names a square: its topic, code and module, and the habit. Navy in both color schemes. */
.pf-tip { position: fixed; z-index: 300; max-width: 290px; padding: 10px 13px 11px; border: 1px solid rgba(255, 255, 255, .12); border-top: 3px solid var(--family-bright); border-radius: 12px; background: #17213a; color: #c9cfdf; box-shadow: 0 14px 34px rgba(10, 16, 32, .35); font-size: .8rem; line-height: 1.4; pointer-events: none; }
.pf-tip[hidden] { display: none; }
.pf-tip-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 4px; }
.pf-tip-head strong { color: #ffffff; font-family: "Fraunces", Georgia, serif; font-size: 1rem; font-weight: 600; }
.pf-tip-head span { color: var(--family-bright); font-size: .72rem; font-weight: 700; }
.pf-tip-habit { display: block; }
/* A habit reached from the live grid flashes once. */
.pf-habit.is-flash { box-shadow: 0 0 0 3px var(--pf-accent); }
.pf-grid-hero { --s: 30px; --g: 6px; }
.pf-grid-home { --s: 22px; --g: 5px; }
.pf-grid-result { --s: 28px; --g: 5px; }
.pf-grid-live { --s: 23px; --g: 5px; }
/* While building, the grid fills the width of its panel: nine squares, eight gaps and the two wider gaps between levels. */
@supports (width: 1cqi) {
  .pf-live { container-type: inline-size; }
  .pf-grid-live { --s: calc((100cqi - var(--g) * 10.8) / 9); }
}
.pf-grid-teaser { --s: 19px; --g: 4px; }
.pf-grid-md { --s: 15px; --g: 4px; }
.pf-grid-sm { --s: 11px; --g: 3px; }
.pf-grid-slot { --s: 6px; --g: 1.5px; }
.pf-grid-xs { --s: 5.5px; --g: 1.5px; }
.pf-grid-xs i, .pf-grid-slot i { border-radius: 1px; box-shadow: none !important; }
.pf-row-label { width: 112px; padding-right: 8px; color: var(--lit); font-size: .78rem; font-weight: 650; text-align: right; }
.pf-row-count { width: 28px; color: var(--pf-muted); font-family: var(--mono); font-size: .78rem; text-align: right; }
/* On the Overview the example fills in on a diagonal sweep: each square waits for its row and column. */
.pf-animate i.on { animation: pf-pop .5s cubic-bezier(.2, .9, .3, 1.4) calc((var(--pf-r, 0) * 3 + var(--pf-c, 0)) * 40ms) both; }
.pf-animate .pf-row:nth-child(2) { --pf-r: 1; } .pf-animate .pf-row:nth-child(3) { --pf-r: 2; } .pf-animate .pf-row:nth-child(4) { --pf-r: 3; }
.pf-animate .pf-row:nth-child(5) { --pf-r: 4; } .pf-animate .pf-row:nth-child(6) { --pf-r: 5; } .pf-animate .pf-row:nth-child(7) { --pf-r: 6; }
.pf-animate .pf-row:nth-child(8) { --pf-r: 7; } .pf-animate .pf-row:nth-child(9) { --pf-r: 8; } .pf-animate .pf-row:nth-child(10) { --pf-r: 9; }
.pf-animate i:nth-of-type(2) { --pf-c: 1; } .pf-animate i:nth-of-type(3) { --pf-c: 2; } .pf-animate i:nth-of-type(4) { --pf-c: 3; }
.pf-animate i:nth-of-type(5) { --pf-c: 4; } .pf-animate i:nth-of-type(6) { --pf-c: 5; } .pf-animate i:nth-of-type(7) { --pf-c: 6; }
.pf-animate i:nth-of-type(8) { --pf-c: 7; } .pf-animate i:nth-of-type(9) { --pf-c: 8; }
@keyframes pf-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }

/* A code, set character by character. */
.pf-code { display: inline-flex; flex-wrap: wrap; gap: 1px; padding: 0; background: none; color: var(--pf-ink); font-family: var(--mono); font-size: .98rem; letter-spacing: .02em; }
.pf-code span { display: inline-block; min-width: .72em; text-align: center; }
.pf-code b, .pf-code em { color: var(--pf-muted); font-style: normal; font-weight: 400; }
.pf-code span.hl { border-radius: 4px; background: var(--pf-accent); color: var(--pf-on-accent); }

/* Labels, buttons and small type. */
.pf-eyebrow { margin: 0 0 12px; color: var(--pf-accent) !important; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px; border: 1px solid transparent; border-radius: 12px; background: none; font: inherit; font-size: .95rem; font-weight: 650; text-decoration: none; cursor: pointer; }
.pf-btn svg { flex: none; width: 18px; height: 18px; }
.pf-btn-primary { background: var(--pf-btn-bg); color: var(--pf-btn-ink) !important; box-shadow: 0 8px 30px color-mix(in srgb, var(--pf-accent) 18%, transparent); }
.pf-btn-primary:hover { background: var(--pf-btn-hover); }
.pf-btn-ghost { border-color: color-mix(in srgb, var(--pf-ink-raw) 25%, transparent); color: var(--pf-ink); }
.pf-btn-ghost:hover { border-color: var(--pf-ink); }
.pf-btn-sm { min-height: 42px; padding: 0 16px; font-size: .88rem; }
.pf-link, .pf-text-button { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--pf-accent) !important; font: inherit; font-size: .92rem; font-weight: 650; text-decoration: none; cursor: pointer; }
.pf-text-button:hover, .pf-link:hover { text-decoration: underline; }
.pf-link svg { width: 16px; height: 16px; }
.pf-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: .84rem; line-height: 1.5; }
.pf-note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--pf-accent); }
.pf-caption { color: var(--pf-muted); font-size: .8rem; }
.pf-caveat { margin: 24px 0 0; font-size: .84rem; }
.pf-h2 { margin-bottom: 24px !important; font-size: 2.1rem; line-height: 1.15; }
.pf-h3 { margin: 28px 0 12px !important; font-size: 1rem; }
.pf-error { margin: 10px 0 0; color: var(--pf-error) !important; font-size: .88rem; font-weight: 600; }
.pf-example-note, .pf-invite { display: inline-block; margin: 16px 0 0; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--pf-accent) 12%, transparent); color: var(--pf-ink) !important; font-size: .88rem; }
.pf-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--pf-muted); font-size: .82rem; }
.pf-legend > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pf-key { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 4px; --lit: var(--pf-key-lit); }
.pf-key.both { background: var(--lit); }
.pf-key.a { background: linear-gradient(90deg, var(--lit) 50%, color-mix(in srgb, var(--pf-ink-raw) 10%, transparent) 50%); }
.pf-key.b { background: linear-gradient(90deg, color-mix(in srgb, var(--pf-ink-raw) 10%, transparent) 50%, var(--lit) 50%); }
.pf-key.none { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-ink-raw) 30%, transparent); }

/* Page tops. */
.pf-hero { padding: 64px 0 52px; background: var(--pf-hero-bg); }
/* The section right after a header starts closer to it. */
.pf-hero + .pf-section { padding-top: 36px; }
.pf-hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.pf-hero h1 { font-size: 3.4rem; line-height: 1.04; letter-spacing: -.025em; }
.pf-hero h1 em { color: var(--pf-accent); font-style: normal; }
.pf-lede { max-width: 36em; margin: 20px 0 30px; font-size: 1.15rem; line-height: 1.6; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pf-facts { display: flex; gap: 32px; margin: 36px 0 0; padding: 0; list-style: none; color: var(--pf-muted); font-size: .86rem; }
.pf-facts strong { display: block; color: var(--pf-ink); font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; line-height: 1; }
.pf-hero-figure { justify-self: center; display: grid; gap: 22px; justify-items: center; margin: 0; padding: 34px; border: 1px solid var(--pf-line); border-radius: 28px; background: var(--pf-raised); box-shadow: 0 30px 80px var(--pf-shadow-lg); }
.pf-hero-figure figcaption { display: grid; gap: 6px; justify-items: center; }
.pf-hero-small { padding: 56px 0 44px; }
.pf-hero-small h1 { font-size: 2.6rem; line-height: 1.1; }
.pf-hero-small .pf-lede { margin-bottom: 0; }
.pf-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.pf-hero-tools { display: grid; flex: none; gap: 12px; justify-items: end; }
.pf-hero-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; }

/* Sections. */
.pf-section { padding: 72px 0; }
.pf-section-alt { border-top: 1px solid var(--pf-line); border-bottom: 1px solid var(--pf-line); background: var(--pf-bg-2); }
.pf-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pf-panel { padding: 24px; border: 1px solid var(--pf-line); border-radius: 18px; background: var(--pf-panel); }
.pf-panel h3 { margin-bottom: 8px; font-size: 1.2rem; }
.pf-panel p { margin: 0; font-size: .95rem; line-height: 1.6; }
.pf-panel .pf-step-num { font-size: 2rem; margin-bottom: 8px; }
.pf-panel-art { display: grid; place-items: center; height: 150px; margin-bottom: 20px; border-radius: 12px; background: color-mix(in srgb, var(--pf-ink-raw) 3%, transparent); }
.pf-panel-code { gap: 10px; align-content: center; padding: 0 12px; }
.pf-panel-code .pf-code { justify-content: center; font-size: .86rem; }
.pf-panel-code > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--pf-accent) 14%, transparent); color: var(--pf-accent); font-size: .76rem; font-weight: 650; }
.pf-panel-code svg { width: 14px; height: 14px; }
.pf-merge { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--pf-muted); font-size: 1.1rem; }
.pf-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.pf-split p:not(.pf-eyebrow):not(.pf-note) { line-height: 1.65; }
.pf-split .pf-note { margin-top: 16px; }
.pf-read-steps { margin: 0 0 24px; padding: 0; list-style: none; counter-reset: step; }
.pf-read-steps li { position: relative; margin: 0 0 16px; padding-left: 40px; color: var(--pf-muted); line-height: 1.6; counter-increment: step; }
.pf-read-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--pf-accent) 14%, transparent); color: var(--pf-accent); font-size: .8rem; font-weight: 700; }
.pf-read-steps strong { color: var(--pf-ink); }
.pf-read-figure { justify-self: end; margin: 0; }
.pf-compare-teaser { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.pf-teaser-grids { display: flex; align-items: center; justify-content: center; gap: 22px; }
.pf-teaser-grids figure { display: grid; gap: 10px; justify-items: center; margin: 0; color: var(--pf-muted); font-size: .82rem; }
.pf-together { padding: 18px; border: 1px solid color-mix(in srgb, var(--pf-accent) 30%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--pf-accent) 5%, transparent); box-shadow: 0 0 60px color-mix(in srgb, var(--pf-accent) 12%, transparent); }
.pf-teaser-copy p:not(.pf-eyebrow) { margin: 0 0 20px; font-size: 1.05rem; line-height: 1.6; }
.pf-teaser-copy .pf-legend { margin-bottom: 24px; }
.pf-privacy { padding: 28px 0; border-top: 1px solid var(--pf-line); }
.pf-privacy .pf-wrap { display: flex; align-items: center; gap: 14px; }
.pf-privacy svg { flex: none; width: 22px; height: 22px; color: var(--pf-accent); }
.pf-privacy p { margin: 0; }
.pf-privacy strong { color: var(--pf-ink); }

.pf-step-num { display: block; margin-bottom: 12px; color: var(--pf-accent); font-family: var(--font-display); font-size: 3rem; font-weight: 600; line-height: 1; }

/* Get your profile: the areas, the live panel, the result. */
.pf-toggle { display: inline-flex; padding: 4px; border: 1px solid var(--pf-line); border-radius: 12px; background: var(--pf-panel); }
.pf-toggle button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 9px; background: none; color: var(--pf-muted); font: inherit; font-size: .88rem; font-weight: 650; cursor: pointer; }
.pf-toggle button[aria-pressed="true"] { background: var(--pf-btn-bg); color: var(--pf-btn-ink); }
.pf-code-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 640px; margin-top: 22px; padding: 16px; border: 1px solid var(--pf-line); border-radius: 14px; background: var(--pf-panel); }
.pf-code-form label { flex-basis: 100%; color: var(--pf-muted); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pf-code-input, .pf-slot input { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid var(--pf-line); border-radius: 10px; background: var(--pf-well); color: var(--pf-ink); font-family: var(--mono); font-size: .9rem; }
.pf-code-form .pf-error { flex-basis: 100%; margin: 0; }
.pf-section.pf-build { padding-top: 8px; }
.pf-build-inner { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.pf-build-tools { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.pf-stepper { display: flex; flex: 1; gap: 4px; }
.pf-stepper span { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--pf-ink-raw) 8%, transparent); }
.pf-stepper .is-done { background: var(--lit); }
.pf-stepper .is-current { background: linear-gradient(90deg, var(--lit) 60%, color-mix(in srgb, var(--pf-ink-raw) 12%, transparent) 60%); box-shadow: 0 0 12px color-mix(in srgb, var(--lit) var(--pf-glow), transparent); }
.pf-area { margin-bottom: 10px; border: 1px solid var(--pf-line); border-radius: 16px; background: var(--pf-panel); scroll-margin-top: 84px; }
.pf-area-heading { font-size: 1rem; }
.pf-area-toggle { display: grid; grid-template-columns: 34px 1fr auto 20px; gap: 12px; align-items: center; width: 100%; padding: 16px 20px; border: 0; border-radius: 16px; background: none; color: var(--pf-ink); font: inherit; text-align: left; cursor: pointer; }
.pf-area-num { color: var(--pf-muted); font-family: var(--mono); font-size: .82rem; }
.pf-area-title { font-size: 1.02rem; font-weight: 650; }
.pf-area-state { display: inline-flex; align-items: center; gap: 6px; color: var(--lit); font-size: .82rem; font-weight: 650; }
.pf-area.is-done .pf-area-state::after { content: "✓"; }
.pf-area-chevron { width: 18px; height: 18px; color: var(--pf-muted); transition: transform .2s ease; }
.pf-area.is-open .pf-area-chevron { transform: rotate(180deg); }
.pf-area:not(.is-done):not(.is-open) .pf-area-toggle { color: var(--pf-muted); }
.pf-area.is-open { border-color: color-mix(in srgb, var(--lit) 40%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lit) 20%, transparent), 0 18px 50px var(--pf-shadow-md); }
.pf-area.is-open .pf-area-toggle { border-bottom: 1px solid var(--pf-line); border-radius: 16px 16px 0 0; }
.pf-area.is-open .pf-area-title { font-size: 1.3rem; }
.pf-habits { display: grid; gap: 8px; margin: 0; padding: 16px; list-style: none; }
/* Within a module the habits run from beginner to advanced, under a small heading for each level. */
.pf .pf-level { margin: 0; padding: 16px 20px 0; color: var(--pf-muted); font-family: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pf .pf-level + .pf-habits { padding-top: 8px; padding-bottom: 4px; }
.pf-habits li { margin: 0; }
.pf-habit { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--pf-line); border-radius: 12px; color: var(--pf-ink); font-size: .96rem; line-height: 1.5; cursor: pointer; }
.pf-habit:hover { border-color: color-mix(in srgb, var(--lit) 45%, transparent); }
.pf-habit input { position: absolute; opacity: 0; pointer-events: none; }
.pf-habit:has(input:focus-visible) { outline: 2px solid var(--lit); outline-offset: 2px; }
.pf-tick { display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid color-mix(in srgb, var(--pf-ink-raw) 30%, transparent); border-radius: 8px; color: transparent; }
.pf-tick svg { width: 16px; height: 16px; }
.pf-habit.is-on { border-color: color-mix(in srgb, var(--lit) 35%, transparent); background: color-mix(in srgb, var(--lit) 9%, transparent); }
.pf-habit.is-on .pf-tick { border-color: var(--lit); background: var(--lit); color: var(--pf-on-lit); }
.pf-habit-topics { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px 58px; }
.pf-area-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 16px 20px; color: var(--pf-muted); font-size: .86rem; }
.pf-unvisited { margin-top: 16px; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--pf-accent) 35%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--pf-accent) 8%, transparent); }
.pf-unvisited p { margin: 0 0 10px; color: var(--pf-ink); }
.pf-unvisited ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.pf-unvisited li a { display: inline-block; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--lit) 40%, transparent); border-radius: 999px; color: var(--lit); font-size: .86rem; font-weight: 650; text-decoration: none; }
.pf-live { position: sticky; top: 76px; display: grid; gap: 18px; padding: 24px; border: 1px solid var(--pf-line); border-radius: 22px; background: var(--pf-raised); box-shadow: 0 30px 70px var(--pf-shadow-lg); }
.pf-live .pf-eyebrow { margin: 0; }
.pf-live-count { display: flex; align-items: center; gap: 14px; }
.pf-live-count strong { font-family: var(--font-display); font-size: 3rem; font-weight: 600; line-height: 1; }
.pf-live-count > span { color: var(--pf-muted); font-size: .85rem; line-height: 1.4; }
.pf-live-code { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--pf-well); }
.pf-live-code > span { color: var(--pf-muted); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pf-live-code .pf-code { font-size: .84rem; }
.pf-result:focus { outline: none; }
.pf-result-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: start; }
.pf-result-figure { margin: 0; padding: 32px; border: 1px solid var(--pf-line); border-radius: 26px; background: var(--pf-raised); box-shadow: 0 30px 70px var(--pf-shadow-lg); }
.pf-result-count { margin: 0 0 22px; color: var(--pf-muted) !important; font-size: 1.05rem; }
.pf-result-count strong { margin-right: 6px; color: var(--pf-ink); font-family: var(--font-display); font-size: 3.4rem; font-weight: 600; line-height: 1; }
.pf-result-code { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--pf-well); }
.pf-result-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-copy-status { margin: 0; font-size: .84rem; }
.pf-copy-status:empty { display: none; }
.pf-ends { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.pf-ends h3 { margin-bottom: 10px; color: var(--pf-muted); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pf-ends ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pf-ends li { margin: 0; }
.pf-ends a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-left: 3px solid var(--lit); border-radius: 0 8px 8px 0; background: var(--pf-panel); color: var(--pf-ink); font-size: .9rem; text-decoration: none; }
.pf-ends a:hover { background: color-mix(in srgb, var(--lit) 10%, var(--pf-panel)); }
.pf-ends strong { color: var(--lit); font-family: var(--mono); font-size: .82rem; }
.pf-uses { padding-top: 56px; }
.pf-uses .pf-actions { margin-top: 28px; }

/* Compare. */
.pf-slots { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 30px; }
.pf-slot { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--pf-line); border-radius: 16px; background: var(--pf-panel); }
.pf-slot.is-valid { border-color: color-mix(in srgb, var(--pf-accent) 45%, transparent); }
.pf-slot.is-invalid { border-color: var(--pf-error); }
.pf-slot-field { display: grid; flex: 1; gap: 6px; min-width: 0; }
/* Each box's code field, with a button inside it to clear it. */
.pf-slot-input { position: relative; display: flex; min-width: 0; }
.pf-slot-input input { padding-right: 40px; }
.pf-slot-clear { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--pf-muted); cursor: pointer; }
.pf-slot-clear:hover { background: color-mix(in srgb, var(--pf-ink-raw) 8%, transparent); color: var(--pf-ink); }
.pf-slot-clear svg { width: 16px; height: 16px; }
.pf-slot-clear[hidden] { display: none; }
.pf-slot-label { color: var(--pf-accent); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
/* The name sits under the box's label as a title of its own, written straight onto the box. */
.pf-slot .pf-slot-name { flex: none; min-height: 34px; padding: 0 2px; border: 0; border-bottom: 1px dashed var(--pf-line); border-radius: 0; background: transparent; color: var(--pf-ink); font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
.pf-slot .pf-slot-name::placeholder { color: var(--pf-muted); font-weight: 400; opacity: .8; }
.pf-slot .pf-slot-name:focus { border-bottom: 1px solid var(--pf-accent); outline: none; }
.pf-slot-plus { color: var(--pf-muted); font-size: 1.6rem; }
/* Compare's result sits close under the boxes as one card: a headline ("Alex and Jordan are 59% aligned") with a Save
   image button, the four counts in a row (their marks are the key to the squares) and the grid, each module's row
   ending in a bar of that module's counts. */
.pf-section.pf-compare-section { padding-top: 16px; }
.pf-compare-result { display: grid; gap: 18px; }
.pf-compare-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.pf-compare-head .pf-btn[hidden] { display: none; }
.pf-compare-title { margin: 0; color: var(--pf-muted); font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.95rem); font-weight: 400; line-height: 1.2; letter-spacing: -.015em; }
.pf-compare-title[hidden] { display: none; }
.pf-compare-name { color: var(--pf-ink); font-weight: 650; overflow-wrap: anywhere; }
.pf-compare-percent { color: var(--pf-accent); font-weight: 650; }
.pf-result-figure.pf-together-figure { display: grid; gap: 20px; padding: 24px 28px; }
.pf-together-canvas { position: relative; }
.pf-together-canvas .pf-grid { width: 100%; }
.pf-waiting { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding-left: 112px; }
.pf-waiting span { padding: 10px 16px; border: 1px solid var(--pf-line); border-radius: 999px; background: var(--pf-panel); color: var(--pf-ink); font-size: .9rem; font-weight: 600; box-shadow: 0 10px 30px var(--pf-shadow-md); }
.pf-tally { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; margin: 0; padding: 0 0 18px; border-bottom: 1px solid var(--pf-line); list-style: none; }
.pf-tally.is-waiting { opacity: .45; }
.pf-tally li { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--pf-muted); font-size: .85rem; }
.pf-tally strong { color: var(--pf-ink); font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.pf-grid .pf-bar { flex: 1 1 auto; min-width: 120px; margin-left: 18px; }
.pf-bar { display: flex; gap: 2px; height: 10px; overflow: hidden; border-radius: 5px; background: color-mix(in srgb, var(--pf-ink-raw) 5%, transparent); }
.pf-bar > span { display: block; flex: 0 0 0; transition: flex-grow .3s ease; }
.pf-bar > .both { background: var(--lit); }
.pf-bar > .a { background: repeating-linear-gradient(45deg, var(--lit) 0 3px, transparent 3px 6px); }
.pf-bar > .b { background: repeating-linear-gradient(-45deg, var(--lit) 0 3px, transparent 3px 6px); }
.pf-bar > .none { background: color-mix(in srgb, var(--pf-ink-raw) 8%, transparent); }
.pf-list-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pf-list-tabs button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--pf-line); border-radius: 999px; background: var(--pf-panel); color: var(--pf-muted); font: inherit; font-size: .9rem; font-weight: 650; cursor: pointer; }
.pf-list-tabs button strong { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--pf-ink-raw) 8%, transparent); color: var(--pf-ink); font-size: .8rem; }
.pf-list-tabs button[aria-selected="true"] { border-color: var(--pf-btn-bg); background: var(--pf-btn-bg); color: var(--pf-btn-ink); }
.pf-list-tabs button[aria-selected="true"] strong { background: color-mix(in srgb, var(--pf-btn-ink) 18%, transparent); color: var(--pf-btn-ink); }
.pf-lede-sm { margin: 0 0 20px; }
.pf-list-empty { padding: 18px 20px; border: 1px dashed var(--pf-line); border-radius: 14px; }
.pf-list-group + .pf-list-group { margin-top: 22px; }
.pf-list-group h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--lit); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pf-list-group h3 strong { color: var(--pf-muted); font-family: var(--mono); font-size: .78rem; letter-spacing: 0; }
.pf-list-group ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pf-list-group li { margin: 0; padding: 14px 16px; border: 1px solid var(--pf-line); border-left: 3px solid var(--lit); border-radius: 12px; background: var(--pf-panel); }
.pf-list-group li small { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--lit); font-size: .74rem; font-weight: 650; }
.pf-list-group li small .pf-key { --lit: inherit; }
.pf-list-group li p { margin: 0; color: var(--pf-ink); font-size: .94rem; line-height: 1.5; }
.pf-list-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#pf-compare-uses .pf-caveat { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .pf-animate i.on { animation: none; }
  .pf-grid i, .pf-area-chevron, .pf-bar > span { transition: none; }
}
@media (max-width: 920px) {
  .pf-hero-inner, .pf-split, .pf-compare-teaser, .pf-build-inner, .pf-result-inner { grid-template-columns: minmax(0, 1fr); }
  .pf-three { grid-template-columns: minmax(0, 1fr); }
  .pf-read-figure, .pf-result-figure:not(.pf-together-figure) { justify-self: center; }
  /* While building, the profile so far is a bar along the bottom of the screen. */
  body.profile-page:has(.pf-live) { padding-bottom: 76px; }
  .pf-live { position: fixed; z-index: 30; top: auto; right: 0; bottom: 0; left: 0; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 18px 18px 0 0; background: var(--pf-panel); box-shadow: 0 -10px 30px var(--pf-shadow-md); }
  .pf-live > .pf-eyebrow, .pf-live-code, .pf-live .pf-note { display: none; }
  .pf-live .pf-grid-live { --s: 5px; --g: 1.5px; }
  .pf-live .pf-grid-live i { border-radius: 1px; box-shadow: none; }
  .pf-live-count strong { font-size: 1.7rem; }
  .pf-live-count > span { font-size: .78rem; }
  .pf-live .pf-btn { min-height: 42px; padding: 0 14px; font-size: .86rem; }
}
@media (max-width: 640px) {
  .pf-wrap { padding: 0 16px; }
  .pf-hero { padding: 40px 0 36px; }
  .pf-hero + .pf-section { padding-top: 28px; }
  .pf-hero-small { padding: 36px 0 28px; }
  .pf-hero h1 { font-size: 2.3rem; }
  .pf-hero-small h1 { font-size: 1.9rem; }
  .pf-hero-row { flex-direction: column; align-items: flex-start; }
  .pf-hero-tools { justify-items: start; }
  .pf-grid-hero { --s: 23px; --g: 5px; }
  .pf-hero-figure { padding: 22px; }
  .pf-code { font-size: .8rem; }
  .pf-grid:not([class*="pf-grid-"]) { --s: 19px; --g: 4px; }
  .pf-grid-result, .pf-result-figure .pf-grid { --s: 16px; --g: 3px; }
  .pf-grid-teaser { --s: 11px; --g: 2px; }
  .pf-grid-md, .pf-teaser-grids .pf-grid-md { --s: 8px; --g: 2px; }
  .pf-row-label { width: 70px; overflow: hidden; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
  .pf-row-count { width: 22px; }
  .pf-slots, .pf-list-group ul, .pf-ends { grid-template-columns: minmax(0, 1fr); }
  .pf-slot-plus { justify-self: center; }
  .pf-teaser-grids { gap: 10px; }
  .pf-section { padding: 52px 0; }
  .pf-h2 { font-size: 1.7rem; }
  .pf-facts { gap: 24px; }
  .pf-area-toggle { padding: 14px 16px; gap: 10px; grid-template-columns: 28px 1fr auto 18px; }
  .pf-area.is-open .pf-area-title { font-size: 1.1rem; }
  .pf-habits { padding: 12px; }
  .pf-habit { padding: 12px; gap: 12px; font-size: .92rem; }
  .pf-habit-topics { padding-left: 0; }
  .pf-result-figure { padding: 18px; }
  .pf-waiting { padding-left: 70px; }
  .pf-result-figure.pf-together-figure { padding: 18px 16px; }
  .pf-tally { gap: 6px 18px; padding-bottom: 14px; }
  .pf-grid .pf-bar { min-width: 36px; height: 8px; margin-left: 10px; }
}

/* The homepage: two doors side by side (the topics, and the Professionalism Profile in its own dark instrument look)
   right under the header, then the guides as the third way in. The page's heading is read out but not shown. */
.home-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.home-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; margin-top: 36px; }
.home-door { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 30px; border-radius: 24px; }
.home-door h2 { margin: 0; padding: 0; border: 0; font-size: 1.9rem; line-height: 1.12; letter-spacing: -.02em; }
.home-door-text { margin: 0; font-size: .98rem; line-height: 1.65; }
.home-door-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: auto; padding-top: 10px; }

.home-door-framework { border: 1px solid #e4ddcf; background: #fffdf8; }
.home-door-eyebrow { margin: 0; color: var(--framework-accent); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.home-door-framework h2 { color: var(--framework-ink); }
.home-door-framework .home-door-text { color: var(--framework-muted); }
.home-door-framework .framework-map { padding: 8px 0 0; border: 0; background: none; }
.home-door-framework .framework-text-link .framework-icon { width: 20px; height: 20px; }

.pf.home-door-profile { border: 1px solid var(--pf-line); background: var(--pf-hero-bg), var(--pf-bg); box-shadow: 0 24px 60px rgba(13, 19, 34, .24); }
.pf.home-door-profile .pf-eyebrow { margin: 0; }
.pf.home-door-profile h2 em { color: var(--pf-accent); font-style: normal; }
.pf .home-door-figure { display: grid; flex: 1; align-content: center; justify-items: center; gap: 12px; margin: 6px 0 0; padding: 22px; border: 1px solid var(--pf-line); border-radius: 20px; background: var(--pf-raised); }

@media (max-width: 960px) {
    .home-doors { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .home-doors { margin-top: 20px; }
    .home-door { padding: 22px 18px; border-radius: 20px; }
    .home-door h2 { font-size: 1.55rem; }
    .pf .home-door-figure { padding: 16px; }
    .pf .home-door-figure .pf-grid-home { --s: 20px; --g: 4px; }
}