/* MNB PHPExcel Developer Guide — unified light mint design system */

:root {
    --color-bg: #f6fbf7;
    --color-bg-strong: #edf7f0;
    --color-surface: #ffffff;
    --color-surface-soft: #f9fcfa;
    --color-text: #183326;
    --color-heading: #10291d;
    --color-muted: #607568;
    --color-faint: #829287;
    --color-primary: #137a43;
    --color-primary-hover: #0d6034;
    --color-primary-soft: #e6f5eb;
    --color-accent: #59c77c;
    --color-border: #d9e8de;
    --color-border-strong: #bed6c6;
    --color-code: #10261b;
    --color-code-surface: #153324;
    --color-code-text: #e7f7ec;
    --color-warning: #9a650d;
    --color-warning-soft: #fff8e8;
    --color-danger: #b33a3a;
    --color-danger-soft: #fff0f0;
    --color-info: #216b8a;
    --color-info-soft: #edf8fc;
    --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --radius-sm: .5rem;
    --radius-md: .875rem;
    --radius-lg: 1.375rem;
    --radius-xl: 2rem;
    --shadow-sm: 0 6px 18px rgb(28 90 54 / 7%);
    --shadow-md: 0 16px 42px rgb(28 90 54 / 10%);
    --shadow-lg: 0 28px 80px rgb(28 90 54 / 14%);
    --header-height: 4.5rem;
    --sidebar-width: 17.5rem;
    --content-max: 92rem;
    --article-max: 47rem;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 1.5rem); }
body {
    margin: 0;
    min-width: 20rem;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.7;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
body.navigation-open, body.modal-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--color-primary); text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { color: var(--color-primary-hover); }
button { color: inherit; }
[hidden] { display: none !important; }
::selection { background: #bfe9ce; color: var(--color-heading); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid rgb(19 122 67 / 28%);
    outline-offset: 3px;
}
code, pre, kbd { font-family: var(--font-mono); }
code { font-size: .91em; }
pre { margin: 0; white-space: pre; }
hr { border: 0; border-top: 1px solid var(--color-border); }

.skip-link {
    position: fixed;
    z-index: 1000;
    top: .75rem;
    left: .75rem;
    padding: .65rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--color-heading);
    color: white;
    transform: translateY(-160%);
    transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }
.reading-progress { position: fixed; z-index: 150; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.reading-progress span { display: block; width: 0; height: 100%; background: var(--color-primary); }

/* Header */
.topbar {
    position: sticky;
    z-index: 100;
    top: 0;
    height: var(--header-height);
    border-bottom: 1px solid rgb(217 232 222 / 82%);
    background: rgb(246 251 247 / 90%);
    backdrop-filter: blur(18px);
    transition: box-shadow .18s ease, background .18s ease;
}
.topbar.is-scrolled { background: rgb(255 255 255 / 94%); box-shadow: 0 8px 28px rgb(28 90 54 / 7%); }
.topbar-inner {
    width: min(100% - 2rem, var(--content-max));
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.15rem;
}
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--color-heading); text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--color-heading); }
.brand-mark { width: 2.2rem; height: 2.2rem; flex: 0 0 auto; }
.brand-mark svg rect { fill: var(--color-primary); stroke: none; }
.brand-mark svg path { fill: none; stroke: white; stroke-width: 1.5; }
.brand > span:last-child { display: grid; line-height: 1.15; }
.brand strong { font-size: .94rem; letter-spacing: -.015em; }
.brand small { margin-top: .2rem; color: var(--color-muted); font-size: .69rem; font-weight: 650; letter-spacing: .055em; text-transform: uppercase; }
.topnav { display: flex; justify-content: center; align-items: center; gap: .3rem; }
.topnav a {
    position: relative;
    padding: .6rem .78rem;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    font-size: .9rem;
    font-weight: 680;
    text-decoration: none;
    transition: color .15s ease, background .15s ease;
}
.topnav a:hover { color: var(--color-heading); background: var(--color-primary-soft); }
.topnav a.active { color: var(--color-primary-hover); background: var(--color-primary-soft); }
.topnav a.active::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: -.65rem;
    height: 2px;
    border-radius: 2px;
    background: var(--color-primary);
}
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; }
.search-trigger {
    min-width: 10.5rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .52rem .58rem .52rem .72rem;
    border: 1px solid var(--color-border-strong);
    border-radius: .7rem;
    background: var(--color-surface);
    color: var(--color-muted);
    cursor: pointer;
    box-shadow: 0 2px 8px rgb(28 90 54 / 4%);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.search-trigger:hover { border-color: #9fc5ab; box-shadow: var(--shadow-sm); }
.search-trigger svg, .search-field svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.search-trigger > span { flex: 1; text-align: left; font-size: .84rem; }
kbd { min-width: 1.55rem; padding: .08rem .34rem; border: 1px solid var(--color-border); border-bottom-width: 2px; border-radius: .32rem; background: var(--color-bg); color: var(--color-muted); font-size: .7rem; text-align: center; }
.version-chip { padding: .4rem .55rem; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary-hover); font-size: .74rem; font-weight: 750; }
.github-header-link {
    width: 2.3rem;
    height: 2.3rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: .65rem;
    background: var(--color-surface);
    color: var(--color-heading);
}
.github-header-link:hover { border-color: var(--color-border-strong); background: var(--color-primary-soft); }
.github-header-link svg { width: 1.16rem; fill: currentColor; }
.menu-toggle { display: none; width: 2.45rem; height: 2.45rem; place-items: center; border: 1px solid var(--color-border); border-radius: .7rem; background: var(--color-surface); cursor: pointer; }
.menu-toggle svg { width: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.navigation-backdrop { display: none; }

/* Shared controls */
.button, .pl-button {
    min-height: 2.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .72rem 1.05rem;
    border: 1px solid transparent;
    border-radius: .75rem;
    font-size: .91rem;
    font-weight: 760;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.button:hover, .pl-button:hover { transform: translateY(-1px); }
.button.primary, .pl-button-primary {
    background: linear-gradient(135deg, #0f743e, #168c4d);
    color: white;
    box-shadow: 0 9px 24px rgb(15 116 62 / 18%);
}
.button.primary:hover, .pl-button-primary:hover { background: linear-gradient(135deg, #0c6335, #117940); color: white; box-shadow: 0 12px 30px rgb(15 116 62 / 24%); }
.pl-button-secondary, .pl-button-secondary-dark {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-heading);
}
.pl-button-secondary:hover, .pl-button-secondary-dark:hover { border-color: #98bfa5; background: var(--color-primary-soft); color: var(--color-primary-hover); }
.copy-code, .copy-package, .copy-page-link {
    border: 1px solid currentColor;
    border-radius: .48rem;
    background: transparent;
    color: inherit;
    font-size: .75rem;
    font-weight: 750;
    cursor: pointer;
}


/* Module documentation selector */
.module-select {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.module-select-label {
    color: var(--color-muted);
    font-size: .7rem;
    font-weight: 760;
}
.module-select select {
    min-width: 7.5rem;
    height: 2.45rem;
    padding: 0 .7rem;
    border: 1px solid var(--color-border-strong);
    border-radius: .65rem;
    background: var(--color-surface);
    color: var(--color-heading);
    font-size: .78rem;
    font-weight: 720;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 2px 8px rgb(28 90 54 / 5%);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.module-select select:hover {
    border-color: #98bfa5;
    background: var(--color-surface-soft);
}
.module-select select:focus-visible {
    border-color: var(--color-primary);
    outline: 3px solid rgb(19 122 67 / 22%);
    outline-offset: 2px;
    box-shadow: none;
}
.module-select-sidebar {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: .35rem;
    margin-top: .85rem;
}
.module-select-sidebar .module-select-label {
    color: var(--color-faint);
    font-size: .64rem;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.module-select-sidebar select {
    width: 100%;
    height: 2.7rem;
    font-size: .82rem;
}
.sidebar-module-repo {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .65rem;
    color: var(--color-primary-hover);
    font-size: .72rem;
    font-weight: 720;
    text-decoration: none;
}
.sidebar-module-repo:hover { text-decoration: underline; }
.module-reference-intro { margin: 1rem 0 1.5rem; color: var(--color-muted); }
.module-platform-heading { margin-top: 3rem; }
.module-card-link { color: inherit; text-decoration: none; }
.module-card-link:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.module-card-action { color: var(--color-primary-hover); font-size: .74rem; font-weight: 760; white-space: nowrap; }

/* Documentation shell */
.docs-layout { width: min(100%, var(--content-max)); margin: 0 auto; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.docs-sidebar {
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    border-right: 1px solid var(--color-border);
    background: var(--color-bg);
}
.sidebar-scroll { height: 100%; overflow: auto; overscroll-behavior: contain; padding: 1.5rem 1.15rem 3rem; scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
.sidebar-intro { padding: .3rem .7rem 1.25rem; border-bottom: 1px solid var(--color-border); margin-bottom: .75rem; }
.sidebar-intro strong { display: block; color: var(--color-heading); font-size: .98rem; }
.sidebar-intro span { display: block; margin-top: .32rem; color: var(--color-muted); font-size: .78rem; line-height: 1.45; }
.sidebar-home { display: flex; align-items: center; gap: .55rem; padding: .62rem .7rem; border-radius: .55rem; color: var(--color-muted); font-size: .85rem; font-weight: 720; text-decoration: none; }
.sidebar-home svg { width: .96rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.sidebar-home:hover, .sidebar-home.active { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.sidebar-group { margin-top: .34rem; }
.sidebar-group summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .64rem .7rem;
    border-radius: .55rem;
    color: var(--color-muted);
    font-size: .71rem;
    font-weight: 790;
    letter-spacing: .065em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}
.sidebar-group summary::-webkit-details-marker { display: none; }
.sidebar-group summary:hover { background: rgb(237 247 240 / 80%); color: var(--color-heading); }
.sidebar-group summary svg { width: .95rem; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform .16s ease; }
.sidebar-group[open] summary svg { transform: rotate(180deg); }
.sidebar-group ul { list-style: none; margin: .1rem 0 .65rem; padding: 0; }
.sidebar-group li { margin: .04rem 0; }
.sidebar-group a {
    position: relative;
    display: block;
    padding: .48rem .62rem .48rem 1rem;
    border-radius: .48rem;
    color: var(--color-muted);
    font-size: .825rem;
    line-height: 1.35;
    text-decoration: none;
}
.sidebar-group a::before { content: ""; position: absolute; left: .25rem; top: .7rem; bottom: .7rem; width: 2px; border-radius: 2px; background: transparent; }
.sidebar-group a:hover { color: var(--color-heading); background: rgb(255 255 255 / 75%); }
.sidebar-group a.active { color: var(--color-primary-hover); background: var(--color-surface); font-weight: 720; box-shadow: 0 2px 10px rgb(28 90 54 / 5%); }
.sidebar-group a.active::before { background: var(--color-primary); }
.docs-main { min-width: 0; padding: 2rem clamp(1.4rem, 3vw, 3.25rem) 0; }
.breadcrumbs { width: min(100%, 72rem); margin: 0 auto 2rem; display: flex; align-items: center; gap: .55rem; color: var(--color-faint); font-size: .78rem; }
.breadcrumbs a { color: var(--color-muted); text-decoration: none; }
.breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: 700; }
.doc-content-grid { width: min(100%, 72rem); margin: 0 auto; display: grid; grid-template-columns: minmax(0, var(--article-max)) minmax(10rem, 12rem); justify-content: space-between; gap: clamp(2.5rem, 5vw, 5rem); }
.doc-content-grid.examples-content-grid { display: block; width: min(100%, 76rem); }
.doc-article { min-width: 0; }
.doc-header { padding-bottom: 2rem; border-bottom: 1px solid var(--color-border); }
.doc-group, .examples-hero-eyebrow, .pl-section-label, .pl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .85rem;
    color: var(--color-primary);
    font-size: .74rem;
    font-weight: 820;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.doc-header h1 { margin: 0; max-width: 15ch; color: var(--color-heading); font-size: clamp(2.45rem, 5vw, 3.35rem); line-height: 1.04; letter-spacing: -.045em; }
.doc-header > p { max-width: 44rem; margin: 1.15rem 0 0; color: var(--color-muted); font-size: 1.08rem; line-height: 1.7; }
.doc-header .doc-updated { display: flex; gap: .35rem; align-items: center; margin-top: .8rem; color: var(--color-faint); font-size: .82rem; line-height: 1.4; }
.doc-header .doc-updated span { font-weight: 700; color: var(--color-muted); }
.doc-meta { display: flex; flex-wrap: wrap; gap: 1rem 1.65rem; margin-top: 1.4rem; }
.doc-meta span { display: grid; gap: .05rem; }
.doc-meta small { color: var(--color-faint); font-size: .67rem; font-weight: 760; letter-spacing: .055em; text-transform: uppercase; }
.doc-meta strong { color: var(--color-heading); font-size: .82rem; }
.doc-meta code { padding: .12rem .38rem; border-radius: .35rem; background: var(--color-primary-soft); color: var(--color-primary-hover); }
.method-chips { display: flex; flex-wrap: wrap; gap: .38rem; margin-top: 1.1rem; }
.method-chips code { padding: .26rem .5rem; border: 1px solid var(--color-border); border-radius: .42rem; background: var(--color-surface); color: var(--color-primary-hover); font-size: .73rem; }
.learning-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 2rem 0 2.75rem; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-border); }
.learning-summary section { padding: 1.25rem 1.35rem; background: var(--color-surface); }
.learning-summary h2 { margin: 0 0 .65rem; color: var(--color-heading); font-size: .92rem; }
.learning-summary ul { margin: 0; padding-left: 1.15rem; color: var(--color-muted); font-size: .86rem; }
.learning-summary li + li { margin-top: .35rem; }
.doc-section { margin: 3rem 0; }
.doc-section:first-of-type { margin-top: 2.65rem; }
.doc-section h2 { position: relative; margin: 0 0 1rem; color: var(--color-heading); font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -.025em; }
.doc-section h3 { margin: 2.25rem 0 .75rem; color: var(--color-heading); font-size: 1.22rem; line-height: 1.3; }
.doc-section p, .doc-intro p { margin: 0 0 1.15rem; color: var(--color-text); }
.doc-section ul, .doc-section ol { padding-left: 1.3rem; }
.doc-section li + li { margin-top: .45rem; }
.doc-section :not(pre) > code, .doc-intro code, .callout code, .task-steps code { padding: .14rem .34rem; border: 1px solid var(--color-border); border-radius: .34rem; background: var(--color-surface); color: #19623a; overflow-wrap: anywhere; }
.heading-anchor { margin-left: .45rem; color: var(--color-border-strong); font-size: .8em; font-weight: 500; text-decoration: none; opacity: 0; transition: opacity .12s ease, color .12s ease; }
.doc-section h2:hover .heading-anchor, .heading-anchor:focus-visible { opacity: 1; }
.page-toc { position: sticky; top: calc(var(--header-height) + 1.5rem); align-self: start; color: var(--color-muted); font-size: .78rem; }
.page-toc details { border-left: 1px solid var(--color-border); padding-left: 1rem; }
.page-toc summary { list-style: none; color: var(--color-heading); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.page-toc summary::-webkit-details-marker { display: none; }
.page-toc ol { list-style: none; margin: .85rem 0 1rem; padding: 0; }
.page-toc li + li { margin-top: .25rem; }
.page-toc a { display: block; padding: .28rem 0; color: var(--color-muted); line-height: 1.35; text-decoration: none; }
.page-toc a:hover, .page-toc a.active { color: var(--color-primary-hover); }
.page-toc a.active { font-weight: 720; }
.copy-page-link { padding: .42rem .58rem; border-color: var(--color-border-strong); color: var(--color-muted); }
.doc-feedback { margin: 4rem 0 1rem; padding: 1.25rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-soft); }
.doc-feedback div { display: grid; gap: .12rem; }
.doc-feedback strong { color: var(--color-heading); }
.doc-feedback span { color: var(--color-muted); font-size: .82rem; }
.doc-feedback a { white-space: nowrap; font-size: .82rem; font-weight: 720; }
.page-nav { width: min(100%, 72rem); margin: 4rem auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.page-nav a { min-height: 5.6rem; display: flex; flex-direction: column; justify-content: center; padding: 1rem 1.15rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-heading); text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.page-nav a:hover { transform: translateY(-2px); border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.page-nav small { color: var(--color-faint); font-size: .68rem; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.page-nav strong { margin-top: .25rem; font-size: .86rem; line-height: 1.4; }
.page-nav-next { text-align: right; align-items: flex-end; }

/* Code, output, tables, callouts */
.code-shell { margin: 1.4rem 0; overflow: hidden; border: 1px solid #244b36; border-radius: var(--radius-md); background: var(--color-code); box-shadow: 0 14px 36px rgb(16 38 27 / 13%); }
.code-toolbar { min-height: 2.65rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .75rem .55rem 1rem; border-bottom: 1px solid rgb(231 247 236 / 10%); background: var(--color-code-surface); color: #a9c8b4; font-size: .72rem; }
.copy-code { padding: .33rem .55rem; border-color: rgb(231 247 236 / 18%); color: #d9eee0; }
.copy-code:hover { background: rgb(255 255 255 / 7%); }
.code-shell pre { max-width: 100%; overflow: auto; padding: 1.15rem 1.2rem 1.3rem; color: var(--color-code-text); font-size: .84rem; line-height: 1.75; tab-size: 4; }
.code-caption { margin: -.7rem 0 1.4rem; color: var(--color-muted); font-size: .77rem; }
.code-tabs { margin: 1.5rem 0; }
.code-tab-list { display: flex; gap: .25rem; overflow-x: auto; padding: .25rem; border: 1px solid var(--color-border); border-radius: .65rem; background: var(--color-surface-soft); }
.code-tab-list button, .pl-tab-list button { flex: 0 0 auto; border: 0; border-radius: .48rem; background: transparent; color: var(--color-muted); font-size: .78rem; font-weight: 720; cursor: pointer; }
.code-tab-list button { padding: .5rem .7rem; }
.code-tab-list button.active, .code-tab-list button[aria-selected="true"] { background: var(--color-surface); color: var(--color-primary-hover); box-shadow: 0 2px 9px rgb(28 90 54 / 8%); }
.output-shell { margin: 1.4rem 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.output-label { padding: .55rem .9rem; border-bottom: 1px solid var(--color-border); color: var(--color-muted); font-size: .72rem; font-weight: 760; text-transform: uppercase; letter-spacing: .055em; }
.output-shell pre { overflow: auto; padding: 1rem; color: var(--color-heading); font-size: .82rem; line-height: 1.65; }
.table-wrap, .capability-table-wrap { max-width: 100%; margin: 1.5rem 0; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
table { width: 100%; border-collapse: collapse; min-width: 36rem; font-size: .84rem; }
th, td { padding: .78rem .9rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
th { background: var(--color-bg-strong); color: var(--color-heading); font-size: .73rem; font-weight: 790; letter-spacing: .035em; text-transform: uppercase; }
td { color: var(--color-text); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--color-surface-soft); }
.callout { margin: 1.5rem 0; padding: 1rem 1.15rem; border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-primary-soft); }
.callout > strong { display: block; margin-bottom: .3rem; color: var(--color-heading); }
.callout p:last-child { margin-bottom: 0; }
.callout-warning { border-left-color: var(--color-warning); background: var(--color-warning-soft); }
.callout-danger, .callout-error { border-left-color: var(--color-danger); background: var(--color-danger-soft); }
.callout-info { border-left-color: var(--color-info); background: var(--color-info-soft); }
.status-badge, .example-difficulty, .example-mode { display: inline-flex; align-items: center; justify-content: center; padding: .22rem .48rem; border-radius: 999px; font-size: .67rem; font-weight: 780; line-height: 1.2; white-space: nowrap; }
.status-success { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.status-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.status-danger, .status-error { background: var(--color-danger-soft); color: var(--color-danger); }
.task-steps { list-style: none; counter-reset: steps; padding: 0 !important; }
.task-steps li { position: relative; counter-increment: steps; display: grid; grid-template-columns: 2.2rem 1fr; gap: .85rem; margin: 0; padding: 0 0 1.35rem; }
.task-steps li::before { content: counter(steps); width: 2.05rem; height: 2.05rem; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary-hover); font-size: .75rem; font-weight: 820; }
.task-steps li:not(:last-child)::after { content: ""; position: absolute; left: 1rem; top: 2.25rem; bottom: .15rem; width: 1px; background: var(--color-border); }
.task-steps strong { color: var(--color-heading); }
.check-list { list-style: none; padding: 0 !important; }
.check-list li { position: relative; padding-left: 1.55rem; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-primary); font-weight: 900; }

/* Homepage */
.home-main { overflow: hidden; }
.pl-shell { width: min(100% - 2rem, 76rem); margin: 0 auto; }
.pl-hero { position: relative; isolation: isolate; padding: clamp(4rem, 8vw, 7rem) 0 0; background: linear-gradient(180deg, #f3fbf5 0%, var(--color-bg) 78%); }
.pl-hero-grid { position: absolute; z-index: -2; inset: 0 0 7rem; background-image: linear-gradient(rgb(19 122 67 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(19 122 67 / 5%) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 86%); }
.pl-hero-glow { position: absolute; z-index: -1; top: -8rem; right: 2%; width: 36rem; height: 36rem; border-radius: 50%; background: radial-gradient(circle, rgb(89 199 124 / 21%), transparent 68%); filter: blur(12px); }
.pl-hero-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(28rem, 1.08fr); align-items: center; gap: clamp(3rem, 6vw, 6.5rem); }
.pl-eyebrow span, .examples-hero-eyebrow span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 .28rem rgb(89 199 124 / 14%); }
.pl-hero-copy h1 { max-width: 11ch; margin: 0; color: var(--color-heading); font-size: clamp(3.35rem, 6.3vw, 4.75rem); line-height: .99; letter-spacing: -.06em; }
.pl-hero-lead { max-width: 39rem; margin: 1.5rem 0 0; color: var(--color-muted); font-size: clamp(1.04rem, 1.8vw, 1.22rem); line-height: 1.68; }
.pl-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.pl-command { max-width: 38rem; margin-top: 1rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .65rem .7rem .65rem .9rem; border: 1px solid var(--color-border-strong); border-radius: .75rem; background: rgb(255 255 255 / 82%); box-shadow: var(--shadow-sm); }
.pl-command > span { color: var(--color-primary); font-weight: 820; }
.pl-command code { overflow: hidden; color: var(--color-heading); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.pl-command button, .pl-package-commands button, .pl-final-commands button { padding: .34rem .55rem; border-color: var(--color-border-strong); color: var(--color-primary-hover); }
.pl-command button:hover, .pl-package-commands button:hover, .pl-final-commands button:hover { background: var(--color-primary-soft); }
.pl-hero-art { position: relative; min-height: 31rem; display: grid; align-items: center; }
.hero-workbook { position: relative; width: 100%; max-width: 36rem; min-height: 28rem; margin-left: auto; }
.hero-workbook-window { position: absolute; inset: 1.5rem 0 auto 2rem; overflow: hidden; border: 1px solid #c9ddd0; border-radius: 1rem; background: white; box-shadow: var(--shadow-lg); transform: rotate(1.2deg); }
.hero-workbook-bar { height: 3rem; display: flex; align-items: center; gap: .6rem; padding: 0 .85rem; background: #167944; color: white; }
.hero-workbook-icon { width: 1.55rem; height: 1.55rem; display: grid; place-items: center; border-radius: .32rem; background: rgb(255 255 255 / 16%); font-size: .72rem; font-weight: 900; }
.hero-workbook-bar strong { flex: 1; font-size: .78rem; }
.hero-workbook-bar small { padding: .16rem .42rem; border-radius: 999px; background: rgb(255 255 255 / 16%); font-size: .62rem; }
.hero-formula { height: 2.2rem; display: grid; grid-template-columns: 3.2rem 2rem 1fr; align-items: center; border-bottom: 1px solid var(--color-border); background: #f7fbf8; color: var(--color-muted); font-size: .67rem; }
.hero-formula > * { padding: 0 .6rem; }
.hero-formula span, .hero-formula b { border-right: 1px solid var(--color-border); text-align: center; }
.hero-formula code { color: var(--color-heading); }
.hero-sheet { padding: .45rem; background-image: linear-gradient(#edf3ef 1px, transparent 1px), linear-gradient(90deg, #edf3ef 1px, transparent 1px); background-size: 100% 2.35rem, 25% 100%; }
.hero-sheet-row { min-height: 2.35rem; display: grid; grid-template-columns: .75fr 1.3fr .55fr .85fr; align-items: center; color: #466254; font-size: .68rem; }
.hero-sheet-row span { padding: .38rem .55rem; }
.hero-sheet-head { border-radius: .35rem .35rem 0 0; background: #e3f3e8; color: #1d6039; font-weight: 820; }
.hero-sheet-tabs { height: 2.4rem; display: flex; align-items: center; gap: .3rem; padding: 0 .65rem; border-top: 1px solid var(--color-border); background: #f7fbf8; color: var(--color-muted); font-size: .64rem; }
.hero-sheet-tabs > * { padding: .35rem .55rem; }
.hero-sheet-tabs strong { border-bottom: 2px solid var(--color-primary); color: var(--color-primary-hover); }
.hero-code-card { position: absolute; z-index: 2; left: 0; bottom: 1.5rem; width: min(80%, 27rem); overflow: hidden; border: 1px solid #294e39; border-radius: .9rem; background: var(--color-code); color: var(--color-code-text); box-shadow: 0 22px 48px rgb(16 38 27 / 22%); transform: rotate(-2deg); }
.hero-code-card > div { height: 2.35rem; display: flex; align-items: center; gap: .35rem; padding: 0 .75rem; border-bottom: 1px solid rgb(255 255 255 / 8%); background: var(--color-code-surface); }
.hero-code-card i { width: .42rem; height: .42rem; border-radius: 50%; background: #8eae99; }
.hero-code-card span { margin-left: .35rem; color: #a9c8b4; font-size: .62rem; }
.hero-code-card pre { padding: 1rem 1.05rem 1.2rem; overflow: auto; font-size: .68rem; line-height: 1.7; }
.hero-code-card b { color: #8ad9a5; }
.hero-code-card em { color: #f0cf87; font-style: normal; }
.hero-code-card strong { color: #8fc7ef; }
.hero-status-card { position: absolute; z-index: 3; right: -1rem; bottom: .3rem; display: flex; align-items: center; gap: .65rem; padding: .72rem .9rem; border: 1px solid var(--color-border); border-radius: .75rem; background: rgb(255 255 255 / 94%); box-shadow: var(--shadow-md); }
.hero-status-card > span { width: 1.65rem; height: 1.65rem; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-size: .8rem; font-weight: 900; }
.hero-status-card div { display: grid; line-height: 1.25; }
.hero-status-card strong { color: var(--color-heading); font-size: .72rem; }
.hero-status-card small { margin-top: .15rem; color: var(--color-muted); font-size: .6rem; }
.pl-proof-strip { width: min(100% - 2rem, 76rem); margin: clamp(3rem, 7vw, 5.5rem) auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.pl-proof-strip > div { padding: 1.25rem clamp(.8rem, 2vw, 1.6rem); text-align: center; }
.pl-proof-strip > div + div { border-left: 1px solid var(--color-border); }
.pl-proof-strip strong { display: block; color: var(--color-heading); font-size: .84rem; }
.pl-proof-strip span { display: block; margin-top: .15rem; color: var(--color-muted); font-size: .7rem; }
.pl-home-functionality, .pl-section, .pl-code-section, .pl-final-cta { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.pl-home-functionality { background: var(--color-surface); }
.pl-home-functionality-layout { display: grid; grid-template-columns: minmax(15rem, .7fr) minmax(0, 1.3fr); gap: clamp(3rem, 7vw, 7rem); }
.pl-home-functionality-intro { position: sticky; top: calc(var(--header-height) + 2rem); align-self: start; }
.pl-home-functionality h2, .pl-section-intro h2, .pl-code-heading h2, .pl-final-cta h2 { margin: 0; color: var(--color-heading); font-size: clamp(2.25rem, 4.5vw, 3.55rem); line-height: 1.05; letter-spacing: -.045em; }
.pl-home-functionality-intro > p:not(.pl-section-label), .pl-section-intro p, .pl-code-heading > p:not(.pl-section-label) { color: var(--color-muted); }
.pl-home-inline-links { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-top: 1.5rem; }
.pl-text-link { font-size: .85rem; font-weight: 750; text-decoration: none; }
.pl-functionality-list { border-top: 1px solid var(--color-border); }
.pl-functionality-list > a { display: grid; grid-template-columns: 2.2rem 1fr; gap: 1rem; padding: 1.35rem .35rem; border-bottom: 1px solid var(--color-border); color: inherit; text-decoration: none; transition: padding .15s ease, background .15s ease; }
.pl-functionality-list > a:hover { padding-left: .8rem; padding-right: .8rem; background: var(--color-bg); }
.pl-functionality-list > a > span { color: var(--color-primary); font-size: .72rem; font-weight: 820; }
.pl-functionality-list strong { color: var(--color-heading); font-size: 1.06rem; }
.pl-functionality-list p { margin: .35rem 0 0; color: var(--color-muted); font-size: .87rem; line-height: 1.65; }
.pl-packages { background: linear-gradient(180deg, var(--color-bg), #eff8f2); }
.pl-section-intro { display: grid; grid-template-columns: .38fr 1fr; gap: 2rem; align-items: start; margin-bottom: 3rem; }
.pl-section-intro > div { max-width: 48rem; }
.pl-section-intro p:not(.pl-section-label) { margin: 1rem 0 0; }
.pl-architecture { position: relative; padding: 2rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.pl-core-node { width: 9rem; margin: 0 auto; padding: .8rem 1rem; border: 1px solid #9bc7aa; border-radius: .75rem; background: var(--color-primary-soft); text-align: center; }
.pl-core-node span { display: block; color: var(--color-muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; }
.pl-core-node strong { color: var(--color-primary-hover); font-size: 1.2rem; }
.pl-branch-line { width: 1px; height: 2rem; margin: 0 auto; background: var(--color-border-strong); }
.pl-format-nodes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; }
.pl-format-nodes a { min-height: 6.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .8rem .45rem; border: 1px solid var(--color-border); border-radius: .7rem; background: var(--color-surface-soft); color: var(--color-heading); text-align: center; text-decoration: none; }
.pl-format-nodes a:hover { border-color: #a4caae; background: var(--color-primary-soft); }
.pl-format-nodes strong { font-size: .92rem; }
.pl-format-nodes span { margin-top: .2rem; color: var(--color-muted); font-size: .65rem; }
.pl-stack-flow { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 1.4rem; color: var(--color-muted); }
.pl-stack-flow span { padding: .42rem .65rem; border-radius: .45rem; background: var(--color-bg-strong); color: var(--color-primary-hover); font-size: .69rem; font-weight: 780; }
.pl-stack-flow i { font-style: normal; color: var(--color-border-strong); }
.pl-package-commands { margin-top: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.pl-package-commands > div, .pl-final-commands > div { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .72rem .75rem; border: 1px solid var(--color-border); border-radius: .68rem; background: var(--color-surface); }
.pl-package-commands span { color: var(--color-muted); font-size: .68rem; font-weight: 760; }
.pl-package-commands code, .pl-final-commands code { min-width: 0; overflow: hidden; color: var(--color-heading); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.pl-code-section { background: var(--color-code); color: var(--color-code-text); }
.pl-section-label-light { color: #7dd99d; }
.pl-code-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 5rem; align-items: end; }
.pl-code-heading .pl-section-label { grid-column: 1 / -1; margin-bottom: -1rem; }
.pl-code-heading h2 { color: white; }
.pl-code-heading > p:not(.pl-section-label) { color: #a9c8b4; }
.pl-code-tabs { margin-top: 2.6rem; }
.pl-tab-list { display: flex; gap: .3rem; overflow-x: auto; padding-bottom: .75rem; }
.pl-tab-list button { padding: .55rem .75rem; color: #9fbaa8; }
.pl-tab-list button.active, .pl-tab-list button[aria-selected="true"] { background: rgb(255 255 255 / 10%); color: white; }
.pl-code-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(14rem, .65fr); overflow: hidden; border: 1px solid #294e39; border-radius: var(--radius-lg); background: #0d2117; }
.pl-code-grid .code-shell { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.pl-code-grid aside { padding: 1.5rem; border-left: 1px solid #294e39; background: #153324; }
.pl-code-grid aside > span { color: #7dd99d; font-size: .68rem; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
.pl-code-grid aside pre { margin-top: .9rem; color: #d9eee0; font-size: .75rem; line-height: 1.8; white-space: pre-wrap; }
.pl-code-grid aside a { display: inline-block; margin-top: 1.4rem; color: #8ce1aa; font-size: .77rem; font-weight: 720; text-decoration: none; }
.pl-final-cta { text-align: center; background: radial-gradient(circle at 50% 0, #dcf2e3, var(--color-bg) 55%); }
.pl-final-cta h2 { max-width: 20ch; margin: 0 auto; }
.pl-final-commands { max-width: 48rem; margin: 2rem auto 0; display: grid; gap: .6rem; text-align: left; }
.pl-final-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.pl-github-link { padding: .6rem; font-size: .83rem; font-weight: 720; text-decoration: none; }
.pl-version-note { margin: 1.2rem 0 0; color: var(--color-faint); font-size: .74rem; }
.premium-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.premium-reveal.is-visible { opacity: 1; transform: none; }

/* Overview cards and specialized documentation components */
.overview-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.overview-list > a, .overview-list > article { display: block; padding: 1.3rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: inherit; text-decoration: none; }
.overview-list > a:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.overview-list h2, .overview-list strong { color: var(--color-heading); }
.overview-list p { margin: .4rem 0 0; color: var(--color-muted); font-size: .85rem; }
.learning-path-grid, .package-selector, .recipe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.learning-path-card, .package-card, .recipe-card { padding: 1.35rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.learning-path-card h2, .package-card h2, .recipe-card h2 { margin: .5rem 0 .55rem; color: var(--color-heading); font-size: 1.15rem; }
.learning-path-card p, .package-card p, .recipe-card p { color: var(--color-muted); font-size: .85rem; }
.learning-path-card ol { padding-left: 1.1rem; font-size: .84rem; }
.path-level, .recipe-card small { color: var(--color-primary); font-size: .68rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.package-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.package-card-head button { padding: .35rem .5rem; border-color: var(--color-border-strong); color: var(--color-primary-hover); }
.package-card > code { display: block; padding: .65rem; border-radius: .52rem; background: var(--color-code); color: var(--color-code-text); font-size: .7rem; overflow: auto; }
.package-card dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem .8rem; font-size: .78rem; }
.package-card dt { color: var(--color-faint); }
.package-card dd { margin: 0; }
.package-parts { display: flex; flex-wrap: wrap; gap: .35rem; }
.package-parts span { padding: .22rem .42rem; border-radius: .35rem; background: var(--color-primary-soft); color: var(--color-primary-hover); font-size: .68rem; }
.recipe-card { color: inherit; text-decoration: none; }
.recipe-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.recipe-card span { color: var(--color-primary); font-size: .79rem; font-weight: 720; }
.concept-map { padding: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.concept-map strong { color: var(--color-heading); }
.concept-workbook, .concept-sheet, .concept-row, .concept-cell { padding: 1rem; border: 1px solid var(--color-border); border-radius: .65rem; background: var(--color-bg); }
.concept-sheet, .concept-row, .concept-cell { margin-top: .75rem; }
.concept-map span { display: block; color: var(--color-muted); font-size: .78rem; }
.module-list { display: grid; gap: .75rem; margin: 2rem 0; }
.module-list article { display: grid; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; grid-template-columns: minmax(14rem, .7fr) 1fr; gap: 1rem; padding: 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.module-list article > div { display: flex; align-items: center; gap: .8rem; }
.module-mark { width: 2.2rem; height: 2.2rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: .55rem; background: var(--color-primary-soft); color: var(--color-primary-hover); font-weight: 850; }
.module-list h2 { margin: 0; color: var(--color-heading); font-size: 1rem; }
.module-list code { color: var(--color-muted); font-size: .7rem; }
.module-list p { margin: 0; color: var(--color-muted); font-size: .83rem; }
.accordion-list details, .api-list details { border-bottom: 1px solid var(--color-border); }
.accordion-list summary, .api-list summary { padding: 1rem 0; color: var(--color-heading); font-weight: 720; cursor: pointer; }
.accordion-list details > div, .api-list details > div { padding: 0 0 1rem; color: var(--color-muted); }
.method-map > section + section { margin-top: 2.5rem; }
.method-map h2 { color: var(--color-heading); }

/* Feature directory */
.feature-directory { margin: 2rem 0; }
.feature-directory-toolbar, .excel-example-toolbar { display: grid; grid-template-columns: minmax(13rem, 1fr) auto; gap: 1rem; align-items: end; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.feature-directory-toolbar label, .excel-example-toolbar label { display: grid; gap: .35rem; color: var(--color-muted); font-size: .72rem; font-weight: 720; }
.feature-directory-toolbar input, .feature-directory-toolbar select, .excel-example-toolbar input, .excel-example-toolbar select { width: 100%; min-height: 2.65rem; padding: .55rem .7rem; border: 1px solid var(--color-border-strong); border-radius: .58rem; background: var(--color-surface); color: var(--color-heading); }
.pl-category-buttons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .35rem; }
.pl-category-buttons button { padding: .4rem .62rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-soft); color: var(--color-muted); font-size: .72rem; cursor: pointer; }
.pl-category-buttons button.active { border-color: #a5cbb0; background: var(--color-primary-soft); color: var(--color-primary-hover); font-weight: 750; }
.pl-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
.feature-directory-count { margin: 0; color: var(--color-muted); font-size: .78rem; white-space: nowrap; }
.feature-directory-count strong { color: var(--color-heading); font-size: 1rem; }
.feature-directory-group { margin-top: 1.3rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.feature-directory-group > header, .excel-example-group > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--color-border); background: var(--color-bg-strong); }
.feature-directory-group > header span, .excel-example-group > header span { color: var(--color-heading); font-size: .8rem; font-weight: 780; }
.feature-directory-group > header strong, .excel-example-group > header strong { color: var(--color-muted); font-size: .67rem; font-weight: 680; }
.feature-directory-item { display: grid; grid-template-columns: auto minmax(10rem, .8fr) 1fr 1fr; gap: 1rem; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid var(--color-border); color: inherit; text-decoration: none; }
.feature-directory-item:last-child { border-bottom: 0; }
.feature-directory-item:hover { background: var(--color-surface-soft); }
.feature-directory-mark { color: var(--color-primary); font-weight: 800; }
.feature-directory-item strong { color: var(--color-heading); font-size: .84rem; }
.feature-directory-item span:not(.feature-directory-mark) { color: var(--color-muted); font-size: .78rem; }
.feature-directory-empty { padding: 2rem; color: var(--color-muted); text-align: center; }

/* Excel examples */
.examples-article { max-width: none; }
.examples-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .9fr) minmax(24rem, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; overflow: hidden; margin-bottom: 3rem; padding: clamp(2rem, 5vw, 4rem); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: linear-gradient(135deg, #f0faf3, white); }
.examples-hero-grid { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgb(19 122 67 / 4%) 1px, transparent 1px), linear-gradient(90deg, rgb(19 122 67 / 4%) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(90deg, transparent, black); }
.examples-hero-copy h1 { margin: 0; color: var(--color-heading); font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.03; letter-spacing: -.05em; }
.examples-hero-lead { color: var(--color-muted); font-size: 1rem; }
.examples-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.examples-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.8rem; border-top: 1px solid var(--color-border); }
.examples-hero-stats > div { padding: .85rem .75rem 0 0; }
.examples-hero-stats strong { display: block; color: var(--color-heading); font-size: 1.15rem; }
.examples-hero-stats span { display: block; color: var(--color-muted); font-size: .65rem; line-height: 1.35; }
.examples-hero-workbench { overflow: hidden; border: 1px solid #2a503b; border-radius: 1rem; background: var(--color-code); box-shadow: var(--shadow-lg); transform: rotate(1deg); }
.examples-workbench-top { height: 2.55rem; display: flex; align-items: center; gap: .35rem; padding: 0 .8rem; border-bottom: 1px solid rgb(255 255 255 / 8%); background: var(--color-code-surface); }
.examples-workbench-top > span { width: .42rem; height: .42rem; border-radius: 50%; background: #86a691; }
.examples-workbench-top strong { margin-left: .3rem; color: #aec9b7; font-size: .62rem; }
.examples-workbench-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 17rem; }
.examples-code-preview { padding: .9rem .7rem; color: #d9eee0; font-family: var(--font-mono); font-size: .58rem; line-height: 1.8; }
.examples-code-preview > div { display: grid; grid-template-columns: 1.8rem 1fr; }
.examples-code-preview i { color: #547260; font-style: normal; text-align: right; padding-right: .55rem; }
.examples-code-preview b { color: #7dd99d; }
.examples-code-preview em { color: #8fc7ef; font-style: normal; }
.examples-code-preview span { color: #c89df5; }
.examples-code-preview q { color: #f0cf87; }
.examples-sheet-preview { margin: .65rem; overflow: hidden; border-radius: .55rem; background: white; }
.examples-sheet-title { display: flex; align-items: center; gap: .45rem; padding: .45rem .55rem; background: #167944; color: white; font-size: .52rem; }
.examples-sheet-title b { width: 1rem; height: 1rem; display: grid; place-items: center; border-radius: .2rem; background: rgb(255 255 255 / 14%); }
.examples-sheet-title span { flex: 1; }
.examples-sheet-title i { font-style: normal; opacity: .78; }
.examples-sheet-formula { display: grid; grid-template-columns: 2.2rem 1.4rem 1fr; align-items: center; height: 1.55rem; border-bottom: 1px solid var(--color-border); color: var(--color-muted); font-size: .48rem; }
.examples-sheet-formula > * { padding: 0 .35rem; }
.examples-sheet-grid { display: grid; grid-template-columns: .55fr repeat(5, 1fr); font-size: .43rem; }
.examples-sheet-grid > * { min-width: 0; padding: .3rem .22rem; border-right: 1px solid #edf3ef; border-bottom: 1px solid #edf3ef; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.examples-sheet-grid > b, .examples-sheet-grid > strong { background: #f0f5f1; color: #607568; text-align: center; }
.examples-sheet-grid > em { background: #dff1e5; color: #1b6038; font-style: normal; font-weight: 800; }
.examples-sheet-tabs { display: flex; gap: .25rem; padding: .35rem .45rem; background: #f7fbf8; color: var(--color-muted); font-size: .45rem; }
.examples-sheet-tabs > * { padding: .15rem .3rem; }
.examples-sheet-tabs strong { border-bottom: 1px solid var(--color-primary); color: var(--color-primary); }
.examples-workbench-footer { display: flex; justify-content: space-between; gap: .8rem; padding: .45rem .7rem; border-top: 1px solid rgb(255 255 255 / 8%); color: #8ead99; font-size: .5rem; }
.examples-workbench-footer i { display: inline-block; width: .4rem; height: .4rem; margin-right: .2rem; border-radius: 50%; background: var(--color-accent); }
.excel-example-directory, .excel-category-page { margin: 2rem 0; }
.excel-example-legend { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.excel-example-toolbar { grid-template-columns: 1fr minmax(11rem, .45fr) auto; }
.excel-example-toolbar p { margin: 0; color: var(--color-muted); font-size: .75rem; white-space: nowrap; }
.excel-example-toolbar p strong { color: var(--color-heading); font-size: 1rem; }
.excel-example-group { margin-top: 1.1rem; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.excel-example-group > header > div { display: flex; align-items: center; gap: .6rem; }
.excel-example-group > header a { font-size: .74rem; font-weight: 720; text-decoration: none; }
.excel-example-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .8rem; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid var(--color-border); color: inherit; text-decoration: none; }
.excel-example-row:last-child { border-bottom: 0; }
.excel-example-row:hover { background: var(--color-surface-soft); }
.excel-example-row strong { color: var(--color-heading); font-size: .84rem; }
.excel-example-row p { margin: .18rem 0 0; color: var(--color-muted); font-size: .74rem; line-height: 1.45; }
.example-difficulty-easy { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.example-difficulty-medium { background: var(--color-warning-soft); color: var(--color-warning); }
.example-difficulty-advanced { background: #f1edff; color: #6544a6; }
.example-mode-direct { background: #e6f5eb; color: #17683b; }
.example-mode-formula { background: #edf4ff; color: #315f9a; }
.example-mode-php { background: #f1edff; color: #6544a6; }
.example-mode-template { background: #fff6e5; color: #8a5c0b; }
.example-mode-external { background: #f1f3f2; color: #58655d; }
.excel-category-navigation { margin-bottom: 1.2rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.excel-category-navigation > a { font-size: .8rem; font-weight: 720; text-decoration: none; }
.excel-category-navigation > div { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }
.excel-category-navigation > div a { display: inline-flex; align-items: center; gap: .3rem; padding: .32rem .5rem; border-radius: .45rem; color: var(--color-muted); font-size: .68rem; text-decoration: none; }
.excel-category-navigation > div a span { color: var(--color-faint); }
.excel-category-navigation > div a:hover, .excel-category-navigation > div a.active { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.excel-example-detail { overflow: hidden; margin-bottom: .7rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); scroll-margin-top: calc(var(--header-height) + 1rem); }
.excel-example-detail summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: .8rem; align-items: center; padding: 1rem; cursor: pointer; }
.excel-example-detail summary::-webkit-details-marker { display: none; }
.excel-example-detail summary:hover { background: var(--color-surface-soft); }
.excel-example-detail summary strong { color: var(--color-heading); }
.excel-example-detail summary p { margin: .15rem 0 0; color: var(--color-muted); font-size: .76rem; line-height: 1.45; }
.excel-example-number { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .5rem; background: var(--color-primary-soft); color: var(--color-primary-hover); font-size: .7rem; font-weight: 820; }
.excel-example-detail summary i { color: var(--color-muted); font-style: normal; transition: transform .15s ease; }
.excel-example-detail[open] summary i { transform: rotate(45deg); }
.excel-example-body { padding: 0 1rem 1rem 3.8rem; border-top: 1px solid var(--color-border); }

/* Footer */
.site-footer { width: min(100% - 2rem, 76rem); margin: 0 auto; padding: 3.5rem 0 1.5rem; display: grid; grid-template-columns: 1.35fr repeat(3, .75fr); gap: 2rem; border-top: 1px solid var(--color-border); color: var(--color-muted); }
.docs-main > .site-footer { width: min(100%, 72rem); }
.footer-brand-column p { max-width: 20rem; margin: .8rem 0 0; font-size: .8rem; }
.footer-wordmark { display: inline-flex; align-items: center; gap: .55rem; color: var(--color-heading); font-weight: 820; text-decoration: none; }
.footer-wordmark svg { width: 1.8rem; }
.footer-wordmark svg rect { fill: var(--color-primary); }
.footer-wordmark svg path { fill: none; stroke: white; stroke-width: 1.5; }
.site-footer > div:not(.footer-brand-column):not(.footer-bottom) { display: flex; flex-direction: column; align-items: flex-start; gap: .42rem; }
.site-footer > div > strong { margin-bottom: .25rem; color: var(--color-heading); font-size: .76rem; text-transform: uppercase; letter-spacing: .055em; }
.site-footer a:not(.footer-wordmark) { color: var(--color-muted); font-size: .78rem; text-decoration: none; }
.site-footer a:hover { color: var(--color-primary-hover); }
.footer-bottom { grid-column: 1 / -1; padding-top: 1.2rem; border-top: 1px solid var(--color-border); font-size: .7rem; }

/* Search modal */
.search-modal { position: fixed; z-index: 300; inset: 0; display: grid; place-items: start center; padding: max(7vh, 4rem) 1rem 1rem; }
.search-backdrop { position: absolute; inset: 0; background: rgb(10 28 18 / 46%); backdrop-filter: blur(5px); }
.search-panel { position: relative; width: min(100%, 42rem); max-height: min(82vh, 45rem); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 30px 90px rgb(10 28 18 / 25%); }
.search-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.2rem .8rem; }
.search-head h2 { margin: 0; color: var(--color-heading); font-size: 1.2rem; }
.search-head p { margin: .18rem 0 0; color: var(--color-muted); font-size: .77rem; }
.search-close { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: .55rem; background: var(--color-surface); cursor: pointer; }
.search-close svg { width: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.search-field { margin: 0 1.2rem .8rem; display: flex; align-items: center; gap: .65rem; padding: .72rem .8rem; border: 1px solid var(--color-border-strong); border-radius: .7rem; background: var(--color-bg); color: var(--color-muted); }
.search-field svg { flex: 0 0 auto; }
.search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--color-heading); }
.search-results { min-height: 8rem; overflow: auto; padding: 0 .65rem .65rem; }
.search-result { display: grid; gap: .12rem; padding: .75rem .8rem; border-radius: .65rem; color: inherit; text-decoration: none; }
.search-result:hover, .search-result.active { background: var(--color-primary-soft); }
.search-result small { color: var(--color-primary); font-size: .64rem; font-weight: 760; text-transform: uppercase; letter-spacing: .045em; }
.search-result strong { color: var(--color-heading); font-size: .88rem; }
.search-result span { color: var(--color-muted); font-size: .73rem; line-height: 1.4; }
.search-empty { padding: 2rem; color: var(--color-muted); text-align: center; }
.search-help { margin: 0; padding: .7rem 1.2rem; border-top: 1px solid var(--color-border); color: var(--color-faint); font-size: .69rem; text-align: right; }
.search-help kbd { margin: 0 .08rem; }

/* Responsive */
@media (max-width: 1180px) {
    .topbar-inner { width: min(100% - 1.5rem, var(--content-max)); gap: 1rem; }
    .topnav a { padding-inline: .55rem; }
    .search-trigger { min-width: 8.5rem; }
    .docs-layout { grid-template-columns: 16rem minmax(0, 1fr); }
    .docs-main { padding-inline: 1.8rem; }
    .doc-content-grid { grid-template-columns: minmax(0, 1fr) 10.5rem; gap: 2.5rem; }
    .pl-hero-layout { grid-template-columns: minmax(0, 1fr) minmax(24rem, .9fr); gap: 3rem; }
    .hero-status-card { right: 0; }
}

@media (max-width: 980px) {
    :root { --header-height: 4.15rem; }
    .menu-toggle { display: grid; }
    .topbar-inner { grid-template-columns: auto auto auto minmax(0, 1fr); }
    .brand > span:last-child small { display: none; }
    .topnav {
        position: fixed;
        z-index: 210;
        top: var(--header-height);
        left: 0;
        width: min(20rem, 86vw);
        height: calc(100vh - var(--header-height));
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: .25rem;
        padding: 1rem;
        border-right: 1px solid var(--color-border);
        background: var(--color-surface);
        transform: translateX(-105%);
        transition: transform .2s ease;
        box-shadow: var(--shadow-lg);
    }
    .topnav a { padding: .75rem .8rem; }
    .topnav a.active::after { display: none; }
    .navigation-open .topnav { transform: translateX(0); }
    .navigation-backdrop { position: fixed; z-index: 190; inset: var(--header-height) 0 0; border: 0; background: rgb(10 28 18 / 38%); }
    .navigation-open .navigation-backdrop { display: block; }
    .top-actions { margin-left: auto; }
    .docs-layout { display: block; }
    .docs-sidebar {
        position: fixed;
        z-index: 205;
        top: var(--header-height);
        left: 0;
        width: min(20rem, 86vw);
        height: calc(100vh - var(--header-height));
        border-right: 1px solid var(--color-border);
        background: var(--color-bg);
        transform: translateX(-105%);
        transition: transform .2s ease;
        box-shadow: var(--shadow-lg);
    }
    .navigation-open .docs-sidebar { transform: translateX(0); }
    .docs-page .topnav { display: none; }
    .home-page .docs-sidebar { display: none; }
    .docs-main { padding: 1.5rem 1.25rem 0; }
    .doc-content-grid { display: block; }
    .page-toc { position: static; margin: 1rem 0 2rem; }
    .page-toc details { padding: .7rem .85rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
    .page-toc summary { display: flex; justify-content: space-between; }
    .page-toc summary::after { content: "+"; }
    .page-toc details[open] summary::after { content: "−"; }
    .page-toc ol { columns: 2; gap: 1.5rem; }
    .pl-hero-layout { grid-template-columns: 1fr; }
    .pl-hero-copy { text-align: center; }
    .pl-hero-copy h1, .pl-hero-lead { margin-left: auto; margin-right: auto; }
    .pl-eyebrow, .pl-hero-actions { justify-content: center; }
    .pl-command { margin-left: auto; margin-right: auto; }
    .pl-hero-art { min-height: 28rem; }
    .hero-workbook { margin: 0 auto; }
    .pl-home-functionality-layout { grid-template-columns: 1fr; gap: 2.2rem; }
    .pl-home-functionality-intro { position: static; }
    .pl-section-intro { grid-template-columns: 1fr; gap: .4rem; }
    .pl-format-nodes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pl-code-heading { grid-template-columns: 1fr; gap: 1rem; }
    .pl-code-heading .pl-section-label { margin-bottom: 0; }
    .examples-hero { grid-template-columns: 1fr; }
    .examples-hero-workbench { max-width: 38rem; width: 100%; margin: 0 auto; }
}

@media (max-width: 720px) {
    .topbar-inner { width: calc(100% - 1rem); gap: .55rem; }
    .brand strong { font-size: .82rem; }
    .brand-mark { width: 2rem; height: 2rem; }
    .module-select-header select {
        min-width: 6.4rem;
        width: 6.4rem;
        height: 2.35rem;
        padding-inline: .5rem;
        font-size: .73rem;
    }
    .search-trigger { min-width: 2.45rem; width: 2.45rem; height: 2.45rem; padding: 0; justify-content: center; }
    .search-trigger > span, .search-trigger kbd, .version-chip, .github-header-link { display: none; }
    .docs-main { padding-inline: 1rem; }
    .breadcrumbs { margin-bottom: 1.4rem; }
    .doc-header h1 { font-size: clamp(2.2rem, 12vw, 3rem); }
    .doc-header > p { font-size: 1rem; }
    .learning-summary { grid-template-columns: 1fr; }
    .doc-section { margin-block: 2.5rem; }
    .heading-anchor { opacity: 1; }
    .page-toc ol { columns: 1; }
    .doc-feedback { align-items: flex-start; flex-direction: column; }
    .page-nav { grid-template-columns: 1fr; margin-block: 3rem; }
    .page-nav-next { text-align: left; align-items: flex-start; }
    .module-list article { grid-template-columns: 1fr; }
    .pl-hero { padding-top: 3.5rem; }
    .pl-shell { width: min(100% - 1.25rem, 76rem); }
    .pl-hero-copy h1 { font-size: clamp(2.75rem, 14vw, 3.7rem); }
    .pl-eyebrow { font-size: .64rem; }
    .pl-hero-actions { align-items: stretch; flex-direction: column; }
    .pl-command { grid-template-columns: auto minmax(0, 1fr); }
    .pl-command button { grid-column: 1 / -1; }
    .pl-hero-art { min-height: 24rem; }
    .hero-workbook { min-height: 23rem; }
    .hero-workbook-window { inset: .75rem 0 auto .5rem; }
    .hero-code-card { width: 86%; bottom: .7rem; }
    .hero-status-card { bottom: -.2rem; right: -.2rem; }
    .hero-status-card small { display: none; }
    .pl-proof-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-proof-strip > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--color-border); }
    .pl-proof-strip > div:nth-child(4) { border-top: 1px solid var(--color-border); }
    .pl-home-functionality, .pl-section, .pl-code-section, .pl-final-cta { padding-block: 4.5rem; }
    .pl-home-functionality h2, .pl-section-intro h2, .pl-code-heading h2, .pl-final-cta h2 { font-size: clamp(2.1rem, 10vw, 2.8rem); }
    .pl-format-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-package-commands { grid-template-columns: 1fr; }
    .pl-package-commands > div { grid-template-columns: minmax(0, 1fr) auto; }
    .pl-package-commands span { grid-column: 1 / -1; }
    .pl-code-grid { grid-template-columns: 1fr; }
    .pl-code-grid aside { border-left: 0; border-top: 1px solid #294e39; }
    .pl-final-commands > div { grid-template-columns: minmax(0, 1fr) auto; }
    .overview-list, .learning-path-grid, .package-selector, .recipe-grid { grid-template-columns: 1fr; }
    .module-list article { grid-template-columns: 1fr; }
    .feature-directory-toolbar, .excel-example-toolbar { grid-template-columns: 1fr; align-items: stretch; }
    .pl-category-buttons { grid-column: auto; }
    .feature-directory-item { grid-template-columns: auto minmax(0, 1fr); gap: .5rem .75rem; }
    .feature-directory-item span:not(.feature-directory-mark) { grid-column: 2; }
    .examples-hero { padding: 1.5rem; border-radius: var(--radius-lg); }
    .examples-hero-stats { grid-template-columns: 1fr; }
    .examples-hero-stats > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--color-border); }
    .examples-workbench-body { grid-template-columns: 1fr; }
    .examples-code-preview { display: none; }
    .excel-example-row { grid-template-columns: minmax(0, 1fr) auto; }
    .excel-example-row .example-mode { grid-column: 1 / -1; justify-self: start; }
    .excel-example-detail summary { grid-template-columns: auto minmax(0, 1fr) auto; }
    .excel-example-detail summary .example-difficulty, .excel-example-detail summary .example-mode { grid-column: 2; justify-self: start; }
    .excel-example-detail summary i { grid-column: 3; grid-row: 1; }
    .excel-example-body { padding-left: 1rem; }
    .site-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand-column { grid-column: 1 / -1; }
    .search-modal { padding-top: 1rem; align-items: start; }
    .search-panel { max-height: calc(100vh - 2rem); }
}

@media (max-width: 460px) {
    .brand { gap: .45rem; }
    .brand strong { font-size: .76rem; }
    .menu-toggle { width: 2.25rem; height: 2.25rem; }
    .doc-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-command code { font-size: .68rem; }
    .hero-sheet-row { grid-template-columns: .7fr 1.25fr .5fr .8fr; font-size: .58rem; }
    .hero-status-card { display: none; }
    .pl-format-nodes { grid-template-columns: 1fr 1fr; }
    .pl-stack-flow { flex-wrap: wrap; }
    .examples-hero-actions { flex-direction: column; }
    .excel-example-detail summary { padding: .8rem; gap: .6rem; }
    .excel-example-number { display: none; }
    .excel-example-detail summary { grid-template-columns: minmax(0, 1fr) auto; }
    .excel-example-detail summary i { grid-column: 2; }
    .site-footer { grid-template-columns: 1fr; }
    .site-footer > div, .footer-brand-column, .footer-bottom { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    .premium-reveal { opacity: 1; transform: none; }
}

/* Mobile TOC is placed after the document introduction; desktop keeps the sticky rail. */
.mobile-page-toc { display: none; }
@media (max-width: 980px) {
    .doc-content-grid > .page-toc { display: none; }
    .mobile-page-toc { display: block; margin: 1.25rem 0 2.25rem; }
    .mobile-page-toc .page-toc { display: block; margin: 0; }
}

/* API class directory */
.api-list { display: grid; gap: .75rem; margin: 2rem 0; }
.api-list article { min-width: 0; padding: 1.05rem 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.api-list article > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .45rem .8rem; }
.api-list article code { min-width: 0; color: var(--color-primary-hover); font-size: .78rem; font-weight: 720; overflow-wrap: anywhere; word-break: break-word; }
.api-list article span { flex: 0 0 auto; padding: .2rem .45rem; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary-hover); font-size: .65rem; font-weight: 760; }
.api-list article p { margin: .55rem 0 .35rem; color: var(--color-muted); font-size: .82rem; }
.api-list article a { font-size: .75rem; font-weight: 720; text-decoration: none; }

@media (max-width: 460px) {
    .brand > span:last-child { display: none; }
    .topbar-inner { grid-template-columns: auto auto minmax(0, 1fr) auto; }
    .module-select-header { justify-self: start; }
    .module-select-header select {
        min-width: 5.9rem;
        width: 5.9rem;
        font-size: .7rem;
    }
}