/* Shared theme tokens control both modes; source code has its own syntax palette. */
:root {
    --bg:#11151c;
    --surface:#202936;
    --sidebar:#26313f;
    --chrome:#18202b;
    --header-bg:var(--chrome);
    --header-caption:var(--muted);
    --text:#e1e6ee;
    --muted:#a1adbf;
    --line:#455267;
    --snippet-step-border:var(--line);
    --primary:#a4bad5;
    --solid-bg:#a4bad5;
    --icon-bg:#303946;
    --icon-text:#c1cbd9;
    --category-title:var(--text);
    --status-bg:#7893b3;
    --code-dot-bg:#a7bdd9;
    --copy-bg:#ffffff10;
    --accent-soft:#303f54;
    --library-bg:var(--accent-soft);
    --accent:#a4bad5;
    --success:#92bf9f;
    --code:#0c1119;
    --code-text:#cfd2d6;
    --shadow:0 8px 30px #0002;
    --radius:12px;
    --sidebar-width:268px;
    --header-height:80px;
    color-scheme:dark;
}

:root[data-theme=light] {
    --bg:#dde2e8;
    --surface:#e9edf2;
    --sidebar:#cfd6e0;
    --chrome:#d4dce6;
    --header-bg:#b4c1d2;
    --header-caption:#39475b;
    --library-bg:var(--header-bg);
    --text:#1c2634;
    --muted:#4b596c;
    --line:#bdc7d4;
    --snippet-step-border:var(--primary);
    --primary:#3c5e85;
    --solid-bg:#365579;
    --icon-bg:#dde2e8;
    --icon-text:#4e5c70;
    --category-title:#3c5e85;
    --status-bg:#6a88ac;
    --code-dot-bg:#95afcf;
    --copy-bg:#ffffff0a;
    --accent-soft:#d5dfec;
    --accent:#91abc8;
    --success:#36724f;
    --code:#151c25;
    --code-text:#cfd2d6;
    --shadow:0 8px 30px #17243708;
    color-scheme:light;
}

@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
    --bg:#dde2e8;
    --surface:#e9edf2;
    --sidebar:#cfd6e0;
    --chrome:#d4dce6;
    --header-bg:#b4c1d2;
    --header-caption:#39475b;
    --library-bg:var(--header-bg);
    --text:#1c2634;
    --muted:#4b596c;
    --line:#bdc7d4;
    --snippet-step-border:var(--primary);
    --primary:#3c5e85;
    --solid-bg:#365579;
    --icon-bg:#dde2e8;
    --icon-text:#4e5c70;
    --category-title:#3c5e85;
    --status-bg:#6a88ac;
    --code-dot-bg:#95afcf;
    --copy-bg:#ffffff0a;
    --accent-soft:#d5dfec;
    --accent:#91abc8;
    --success:#36724f;
    --code:#151c25;
    --code-text:#cfd2d6;
    --shadow:0 8px 30px #17243708;
    color-scheme:light;
}

}

* {
    box-sizing:border-box;
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    font-size:15px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}

a {
    color:inherit;
    text-decoration:none;
}

button,input,select {
    font:inherit;
}

button,a,input,select,summary {
    -webkit-tap-highlight-color:transparent;
}

button {
    cursor:pointer;
}

button:disabled {
    cursor:default;
}

a,button {
    touch-action:manipulation;
}

a:hover {
    color:var(--primary);
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,pre:focus-visible {
    outline:3px solid #7b9cc4;
    outline-offset:4px;
}

input,select {
    min-width:0;
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--line);
    border-radius:8px;
    padding:11px 13px;
}

input::placeholder {
    color:var(--muted);
    opacity:1;
}

h1,h2,h3,p {
    margin-top:0;
}

h1,h2,h3 {
    font-weight:650;
    line-height:1.2;
    letter-spacing:-.035em;
}

h1 {
    font-size:42px;
}

h2 {
    font-size:27px;
}

h3 {
    font-size:19px;
}

p {
    color:var(--muted);
}

[hidden] {
    display:none!important;
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.skip-link {
    position:fixed;
    top:-100px;
    left:16px;
    padding:12px 20px;
    background:var(--solid-bg);
    color:var(--bg);
    z-index:99;
}

.skip-link:focus {
    top:10px;
}

.site-header {
    height:var(--header-height);
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    align-items:center;
    padding:0 32px;
    gap:24px;
    border-bottom:1px solid var(--line);
    background:var(--header-bg);
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:22px;
    font-weight:750;
    letter-spacing:-1px;
    white-space:nowrap;
}

.brand-mark {
    display:inline-grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:9px;
    background:var(--solid-bg);
    color:var(--bg);
    font-family:Consolas,monospace;
    font-size:18px;
    font-weight:600;
    letter-spacing:-2px;
}

.brand-light {
    font-weight:450;
}

.brand-dot {
    color:var(--primary);
}

.header-caption {
    color:var(--header-caption);
    font-size:12px;
    padding-left:24px;
    border-left:1px solid var(--line);
}

.header-search {
    margin-left:auto;
    display:flex;
    align-items:center;
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:8px;
    width:310px;
    padding:0 12px;
    gap:8px;
}

.header-search>span {
    font-size:24px;
}

.header-search input {
    padding:8px 0;
    border:0;
    background:transparent;
    width:100%;
    font-size:13px;
}

.header-search button {
    border:1px solid var(--line);
    color:var(--muted);
    background:var(--bg);
    border-radius:4px;
    line-height:1;
    padding:3px 7px;
}

.icon-button {
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--text);
    border-radius:9px;
    width:38px;
    height:38px;
    font-size:22px;
    flex-shrink:0;
}

.mobile-menu {
    display:none;
}

.app-shell {
    display:grid;
    grid-template-columns:var(--sidebar-width) minmax(0,1fr);
    min-height:calc(100vh - 165px);
}

.sidebar {
    background:var(--sidebar);
    border-right:1px solid var(--line);
    padding:32px 19px 20px;
    display:flex;
    flex-direction:column;
    align-self:start;
    position:sticky;
    top:var(--header-height);
    height:calc(100vh - var(--header-height));
    height:calc(100dvh - var(--header-height));
    overflow-y:auto;
    overflow-anchor:none;
    scrollbar-width:thin;
    scrollbar-gutter:stable;
}

.sidebar > * { flex-shrink:0; }

@media(min-width:901px) {
    .sidebar { overscroll-behavior-y:contain; }
}

.library-link {
    display:flex;
    gap:12px;
    align-items:center;
    font-size:13px;
    font-weight:650;
    padding:10px 11px;
    background:var(--library-bg);
    border-radius:7px;
}

.library-link>span[aria-hidden] {
    font-size:20px;
}

.library-link:hover { color:var(--text); }

.count {
    margin-left:auto;
    color:var(--muted);
    font-size:11px;
    font-weight:450;
}

.library-link .count {
    background:var(--surface);
    padding:0 6px;
    border-radius:4px;
}

.eyebrow {
    font-size:10px;
    font-weight:700;
    letter-spacing:1.7px;
    line-height:1.5;
    color:var(--muted);
}

.sidebar-label {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:4px;
    margin:31px 12px 16px;
    font-size:11px;
    letter-spacing:1.5px;
}

.sidebar-label>span { white-space:nowrap; font-size:calc(1em - 1px); }
.collapse-library {
    flex-shrink:0;
    padding:2px 4px;
    border:1px solid var(--line);
    border-radius:3px;
    background:transparent;
    color:var(--primary);
    font:inherit;
    font-weight:700;
    letter-spacing:0;
    line-height:1;
    white-space:nowrap;
}
.collapse-library:hover { background:var(--accent-soft); }
@media (min-width:901px) and (max-width:1250px) {
    .sidebar-label { margin-left:4px; margin-right:4px; font-size:10px; letter-spacing:.2px; }
    .sidebar-label>span { font-size:9.5px; }
}

.language-group {
    margin-bottom:14px;
}

.language-group>summary {
    font-weight:650;
    gap:10px;
    font-size:13px;
    padding:5px 8px;
}

.language-group summary,.category-group summary {
    display:flex;
    align-items:center;
    cursor:pointer;
    list-style:none;
}

.language-group summary::-webkit-details-marker {
    display:none;
}

.language-group>summary:after,.category-group>summary:before {
    content:'\203a';
    color:var(--muted);
    display:inline-block;
    font-size:16px;
    transform-origin:center;
    transition:transform .15s;
}

.language-group[open]>summary:after,.category-group[open]>summary:before {
    transform:rotate(90deg);
}

.language-icon {
    width:27px;
    height:27px;
    border-radius:7px;
    display:grid;
    place-items:center;
    font:600 12px Consolas,monospace;
}

.language-icon {
    background:var(--icon-bg);
    color:var(--icon-text);
}

.category-list {
    margin:12px 7px 0 20px;
    border-left:1px solid var(--line);
    padding-left:12px;
}

.category-group>summary {
    gap:10px;
    font-size:14px;
    font-weight:600;
    padding:9px 0;
    color:var(--text);
}

.category-group ul {
    list-style:none;
    margin:2px 0 6px;
    padding:0 0 0 15px;
}

.category-group a {
    display:block;
    padding:7px 9px;
    font-size:12px;
    line-height:1.5;
    border-radius:5px;
}

.category-group a.active {
    background:var(--accent-soft);
    color:var(--primary);
    font-weight:650;
}

.sidebar-note {
    margin:36px 5px 24px;
    border:1px solid var(--line);
    border-radius:9px;
    padding:16px 14px;
    font-size:11px;
    font-weight:600;
}

.status-dot {
    display:inline-block;
    background:var(--status-bg);
    width:6px;
    height:6px;
    border-radius:50%;
    margin-right:6px;
    flex-shrink:0;
}

.sidebar-note p {
    font-weight:400;
    line-height:1.8;
    font-size:11px;
    margin:9px 0;
}

.sidebar-note a {
    color:var(--primary);
    font-size:11px;
}

.sidebar-bottom {
    margin-top:auto;
    padding:20px 7px 4px;
    font-size:8px;
    letter-spacing:1.1px;
    color:var(--muted);
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

.sidebar-bottom span {
    letter-spacing:0;
}

main {
    min-width:0;
}

.page {
    max-width:1376px;
    margin:0 auto;
    padding:42px 60px 60px;
}

.home-intro {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:20px;
}

.pill {
    font-size:9px;
    letter-spacing:1.4px;
    font-weight:650;
    background:var(--accent-soft);
    color:var(--primary);
    border-radius:30px;
    padding:7px 12px;
    display:inline-flex;
    align-items:center;
}

.edition {
    font-size:8px;
    letter-spacing:1.4px;
    color:var(--muted);
}

.hero {
    display:block;
    margin:38px 0 28px;
}

.hero h1 {
    font-size:clamp(39px,3.2vw,59px);
    font-weight:600;
    letter-spacing:-2.6px;
    line-height:1.08;
    margin-bottom:22px;
}

.hero h1>span {
    color:var(--primary);
}

.hero p {
    font-size:14px;
    line-height:1.85;
    margin:0;
}

.hljs-keyword, .hljs-meta, .hljs-selector-tag {
    color:#c792ea;
}

.hljs-string, .hljs-regexp {
    color:#e6a07b;
}

.hljs-number, .hljs-literal {
    color:#9bd39d;
}

.hljs-title, .hljs-built_in, .hljs-type, .hljs-name {
    color:#82cbe8;
}

.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-selector-class, .hljs-selector-id {
    color:#dfc484;
}

/* Comments, including commented-out code and documentation tags, stay neutral. */
.hljs-comment, .hljs-comment * { color:var(--code-text); }

code,pre {
    font-family:"Cascadia Code",Consolas,"Liberation Mono",monospace;
}

pre {
    tab-size:4;
}

.search-section {
    margin:35px 0 46px;
}

.hero-search {
    display:flex;
    padding:8px 8px 8px 20px;
    align-items:center;
    gap:12px;
    background:var(--surface);
    border:1px solid #aebed1;
    box-shadow:var(--shadow);
    border-radius:10px;
}

.hero-search>span {
    font-size:30px;
    color:var(--muted);
}

.hero-search input {
    background:transparent;
    flex:1;
    border:0;
    padding:9px 0;
    font-size:13px;
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    background:var(--solid-bg);
    color:var(--bg);
    padding:11px 19px;
    border:1px solid var(--primary);
    border-radius:7px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    line-height:1.5;
}

.button:hover {
    filter:brightness(1.12);
    color:var(--bg);
}

.button.secondary {
    background:var(--surface);
    border-color:var(--line);
    color:var(--text);
}

.search-suggestions {
    display:flex;
    gap:17px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:14px;
    font-size:11px;
    color:var(--muted);
}

.search-suggestions>span {
    font-size:8px;
    letter-spacing:1px;
}

.search-suggestions a {
    border-bottom:1px solid var(--line);
    line-height:1.8;
}

.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:21px;
}

.section-heading h2 {
    margin:6px 0 0;
    font-size:25px;
}

.section-heading>.muted {
    font-size:11px;
}

.muted {
    color:var(--muted);
}

.language-cards {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.language-card {
    display:flex;
    gap:20px;
    padding:25px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    transition:border-color .15s,transform .15s;
}

.language-card:hover,.snippet-card:hover {
    border-color:#8199b8;
    transform:translateY(-2px);
}

.big-language-icon {
    width:58px;
    height:58px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    font:600 25px Consolas,monospace;
    letter-spacing:-1px;
    border-radius:14px;
    position:relative;
}

.big-language-icon>span {
    font-size:11px;
    position:absolute;
    right:10px;
    bottom:7px;
    color:#8295ad;
}

.language-card>div {
    width:100%;
    min-width:0;
}

.language-card h3 {
    margin:0 0 9px;
    font-size:20px;
    display:flex;
    justify-content:space-between;
}

.language-card h3 span {
    font-size:17px;
    color:var(--muted);
}

.language-card p {
    font-size:12px;
    margin-bottom:17px;
}

.language-stats {
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--muted);
    font-size:10px;
    flex-wrap:wrap;
}

.language-version {
    margin-left:auto;
    border:1px solid var(--line);
    padding:1px 5px;
    border-radius:4px;
    font:9px Consolas,monospace;
}

.browse-section {
    margin-bottom:43px;
}

.arrow-link {
    font-size:11px;
    color:var(--primary);
    font-weight:600;
    white-space:nowrap;
}

.snippet-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.snippet-card {
    display:flex;
    flex-direction:column;
    padding:20px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    transition:border-color .15s,transform .15s;
    min-width:0;
}

.card-meta {
    display:flex;
    gap:8px;
    align-items:center;
    color:var(--muted);
    font-size:9px;
    flex-wrap:wrap;
    margin-bottom:17px;
}

.tag {
    font-size:9px;
    padding:3px 7px;
    border-radius:4px;
    line-height:1.5;
    font-weight:600;
}

.snippet-card h3 {
    font-size:16px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
    letter-spacing:-.4px;
    line-height:1.4;
}

.snippet-card h3>span {
    color:var(--muted);
    font-size:14px;
}

.snippet-card p {
    font-size:11px;
    line-height:1.8;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin-bottom:19px;
}

.card-bottom {
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:auto;
    padding-top:14px;
    border-top:1px solid var(--line);
    font-size:9px;
    color:var(--muted);
}

.card-bottom code {
    background:var(--bg);
    padding:1px 5px;
    border-radius:4px;
}

.card-bottom>span {
    color:var(--success);
}

.value-strip {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:36px;
    padding:30px 0;
    margin-top:36px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.value-strip>div>span {
    font-size:8px;
    letter-spacing:1px;
    color:var(--primary);
}

.value-strip h3 {
    font-size:14px;
    margin:10px 0;
}

.value-strip p {
    font-size:11px;
    margin:0;
    line-height:1.8;
}

.home-signoff {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    font-size:11px;
    color:var(--muted);
    padding-top:31px;
}

.home-signoff .brand-mark {
    width:24px;
    height:24px;
    font-size:12px;
    border-radius:6px;
    background:var(--accent-soft);
    color:var(--primary);
}

.site-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    border-top:1px solid var(--line);
    padding:22px 32px;
    background:var(--chrome);
    position:relative;
    font-size:10px;
    color:var(--muted);
}

.footer-brand {
    font-size:13px;
    font-weight:650;
    color:var(--text);
    margin-right:15px;
}

.site-footer nav {
    display:flex;
    align-items:center;
    gap:20px;
}

.text-button {
    padding:0;
    border:0;
    background:none;
    color:inherit;
    font-size:inherit;
    text-decoration:underline;
    text-underline-offset:3px;
}

.cookie-banner {
    position:fixed;
    bottom:20px;
    right:24px;
    z-index:40;
    max-width:660px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    padding:20px 23px;
    box-shadow:0 10px 60px #0002;
    display:flex;
    align-items:center;
    gap:24px;
}

.cookie-banner strong {
    font-size:13px;
}

.cookie-banner p {
    font-size:11px;
    line-height:1.7;
    margin:5px 0 0;
}

.cookie-banner a,.prose a:not(.button) {
    text-decoration:underline;
    text-underline-offset:3px;
}

.cookie-actions {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.cookie-actions .button {
    font-size:10px;
    padding:9px 12px;
}

.toast {
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    background:var(--solid-bg);
    color:var(--bg);
    border-radius:8px;
    z-index:50;
    padding:10px 20px;
    opacity:0;
    pointer-events:none;
    transition:opacity .15s;
    font-size:13px;
}

.toast.show {
    opacity:1;
}

.breadcrumbs {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    font-size:11px;
    color:var(--muted);
    margin-bottom:38px;
}

.snippet-navigation {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 16px;
    margin-bottom:38px;
}

.snippet-navigation .breadcrumbs {
    margin-bottom:0;
    min-width:0;
    overflow-wrap:anywhere;
}

.snippet-steps {
    display:flex;
    gap:6px;
}

.snippet-step {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border:2px solid var(--snippet-step-border);
    border-radius:7px;
    color:var(--primary);
    line-height:1;
}

.snippet-step svg {
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.25;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.snippet-step[href]:hover { background:var(--accent-soft); }
.snippet-step[aria-disabled=true] { opacity:.4; cursor:default; }

.page-title {
    font-size:42px;
    margin:12px 0 17px;
    overflow-wrap:anywhere;
}

.page-lead {
    font-size:15px;
    max-width:700px;
}

.search-filters {
    display:flex;
    align-items:end;
    gap:14px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    padding:20px;
    margin:32px 0 23px;
}

.search-filters>div {
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}

.search-filters label {
    font-size:11px;
    color:var(--muted);
}

.search-filters input,.search-filters select {
    font-size:12px;
    width:100%;
    height:43px;
}

.filter-query {
    flex:1;
}

.search-filters .button {
    height:43px;
}

.results-heading {
    display:flex;
    justify-content:space-between;
    font-size:12px;
    margin-bottom:20px;
    color:var(--muted);
}

.results-heading a {
    text-decoration:underline;
}

.pagination {
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:32px;
}

.pagination a {
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    width:38px;
    height:38px;
    border-radius:7px;
    font-size:12px;
}

.pagination a.selected {
    background:var(--solid-bg);
    color:var(--bg);
}

.empty-state {
    text-align:center;
    padding-top:100px;
    padding-bottom:100px;
}

.empty-state p {
    max-width:520px;
    margin:16px auto 26px;
}

.empty-state .arrow-link {
    display:block;
    margin-top:20px;
}

.empty-icon {
    display:block;
    font-size:54px;
    color:var(--primary);
}

.snippet-page {
    max-width:1200px;
}

.snippet-kicker {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:11px;
}

.snippet-kicker .tag {
    font-size:11px;
}

.snippet-summary {
    font-size:17px;
    line-height:1.8;
    max-width:850px;
    margin-bottom:30px;
}

.code-panel {
    background:var(--code);
    color:var(--code-text);
    border-radius:12px;
    overflow:hidden;
    border:1px solid #39485b;
}

.code-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:13px 22px;
    border-bottom:1px solid #ffffff18;
    font-size:12px;
    color:#bac6d7;
}

.code-file {
    margin-left:20px;
    font:11px Consolas,monospace;
    color:#9aaac1;
}

.code-dot {
    display:inline-block;
    width:7px;
    height:7px;
    background:var(--code-dot-bg);
    border-radius:50%;
    margin-right:8px;
}

.copy-button {
    background:var(--copy-bg);
    border:1px solid #ffffff22;
    border-radius:5px;
    color:#e3eaf4;
    padding:6px 11px;
    font-size:11px;
}

.code-panel pre {
    margin:0;
    padding:28px;
    overflow:auto;
    font-size:14px;
    line-height:1.9;
}

.output-panel {
    margin:18px 0 32px;
    padding:20px 24px;
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:10px;
}

.output-panel h2 {
    font-size:12px;
    letter-spacing:0;
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.output-panel h2 span {
    font-size:8px;
    color:var(--muted);
    font-weight:400;
    letter-spacing:1px;
}

.output-panel pre {
    font-size:12px;
    line-height:1.8;
    margin:0;
    overflow:auto;
    color:var(--muted);
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

.technical-details h2 {
    font-size:23px;
    margin:7px 0 15px;
}

.technical-details>p {
    font-size:14px;
}

.note {
    padding:18px 22px;
    border-left:3px solid #8ba4c4;
    border-radius:0 8px 8px 0;
    background:var(--accent-soft);
    font-size:13px;
    margin:22px 0;
}

.note p {
    margin:6px 0 0;
    color:var(--text);
}

.verification {
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin:24px 0 15px;
}

.verified-badge {
    color:var(--success);
    background:var(--accent-soft);
    font-size:12px;
    white-space:nowrap;
    border-radius:4px;
    padding:3px 8px;
}

.verification p {
    font-size:13px;
    line-height:1.9;
    margin:0;
}

.test-details {
    font-size:12px;
    color:var(--muted);
    border-bottom:1px solid var(--line);
    padding-bottom:24px;
}

.test-details summary {
    cursor:pointer;
}

.test-details pre {
    max-width:100%;
    overflow-x:auto;
    padding:12px;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:6px;
}

.test-details p {
    margin-top:14px;
}

.test-details dl {
    margin-bottom:0;
}

.test-details dt {
    font-weight:650;
    margin-top:12px;
}

.test-details dd {
    margin:4px 0;
    overflow-wrap:anywhere;
}

.snippet-tags {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:24px 0 44px;
}

.snippet-tags a {
    font-size:10px;
    padding:5px 10px;
    background:var(--accent-soft);
    border-radius:20px;
    color:var(--primary);
}



.prose {
    max-width:980px;
    padding-top:55px;
    padding-bottom:90px;
}

.prose h1 {
    margin:15px 0 20px;
}

.prose h2 {
    font-size:22px;
    margin:34px 0 14px;
}

.prose p {
    font-size:14px;
    line-height:1.95;
}

.table-scroll {
    overflow:auto;
}

table {
    border-collapse:collapse;
    width:100%;
    font-size:12px;
    margin:26px 0;
}

th,td {
    text-align:left;
    vertical-align:top;
    border-bottom:1px solid var(--line);
    padding:15px 13px;
}

th {
    background:var(--accent-soft);
}

@media(min-width:1800px) {
    :root {
        --sidebar-width:300px;
    }
    .page {
        padding-top:52px;
    }
    .hero {
        margin-top:48px;
        margin-bottom:38px;
    }
    .hero p {
        font-size:16px;
    }
    .snippet-card p {
        font-size:12px;
    }
    .snippet-card h3 {
        font-size:18px;
    }
    .sidebar {
        padding-top:42px;
    }
    .site-header {
        padding-left:38px;
    }
    .language-card {
        padding:30px;
    }
    .hero-search input {
        font-size:14px;
    }
}

@media(min-width:2600px) {
    :root {
        --sidebar-width:360px;
        --header-height:96px;
    }
    .page {
        max-width:1740px;
        padding:70px 80px;
    }
    .hero h1 {
        font-size:74px;
    }
    .hero p {
        font-size:20px;
    }
    .hero-search input {
        font-size:17px;
    }
    .button {
        font-size:15px;
    }
    .section-heading h2 {
        font-size:32px;
    }
    .snippet-card {
        padding:28px;
    }
    .snippet-card h3 {
        font-size:23px;
    }
    .snippet-card p {
        font-size:15px;
    }
    .card-meta,.card-bottom {
        font-size:12px;
    }
    .tag {
        font-size:12px;
    }
    .language-card h3 {
        font-size:26px;
    }
    .language-card p {
        font-size:16px;
    }
    .language-stats {
        font-size:13px;
    }
    .value-strip h3 {
        font-size:20px;
    }
    .value-strip p {
        font-size:15px;
    }
    .sidebar-label {
        font-size:13px;
    }
    .language-group>summary {
        font-size:16px;
    }
    .category-group>summary {
        font-size:17px;
    }
    .category-group a {
        font-size:14px;
    }
    .library-link {
        font-size:16px;
    }
    .sidebar-note {
        font-size:14px;
    }
    .sidebar-note p {
        font-size:14px;
    }
    .site-footer {
        font-size:13px;
    }
    .snippet-page,.prose {
        max-width:1400px;
    }
    .code-panel pre {
        font-size:18px;
    }
}

@media(max-width:1250px) {
    :root {
        --sidebar-width:235px;
    }
    .page {
        padding:32px;
    }
    .header-caption {
        display:none;
    }

    .hero h1 {
        font-size:41px;
    }
    .edition {
        display:none;
    }
    .language-card {
        padding:20px;
        gap:14px;
    }
    .big-language-icon {
        width:44px;
        height:44px;
        font-size:21px;
    }
    .language-card h3 {
        font-size:18px;
    }
    .language-version {
        display:none;
    }
    .snippet-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .search-filters {
        flex-wrap:wrap;
    }
    .filter-query {
        flex-basis:100%;
    }
    .value-strip {
        gap:20px;
    }
    .cookie-banner {
        max-width:600px;
    }
}

@media(max-width:900px) {

    .hero h1 {
        font-size:48px;
    }
    .language-cards {
        grid-template-columns:1fr;
    }
    .section-heading>.muted {
        display:none;
    }
    .search-suggestions {
        gap:10px;
    }
    .hero-search {
        flex-wrap:wrap;
        padding:10px;
    }
    .hero-search input {
        width:calc(100% - 40px);
        flex:auto;
    }
    .hero-search .button {
        width:100%;
    }
    .value-strip {
        grid-template-columns:1fr;
    }
    .site-footer {
        flex-direction:column;
        align-items:flex-start;
    }
    .page-title {
        font-size:34px;
    }


}

@media(max-width:700px) {
    :root {
        --header-height:68px;
    }
    .site-header {
        padding:0 16px;
        gap:9px;
        flex-wrap:wrap;
        height:auto;
        min-height:var(--header-height);
    }
    .brand {
        font-size:19px;
        margin-right:auto;
    }
    .brand-mark {
        width:28px;
        height:28px;
        font-size:15px;
    }
    .header-search {
        order:4;
        width:100%;
        margin:0 0 10px;
    }
    .header-search input {
        font-size:12px;
    }
    .icon-button {
        width:33px;
        height:33px;
        font-size:20px;
    }
    .mobile-menu {
        display:block;
    }
    .app-shell {
        display:block;
    }
    .sidebar {
        position:static;
        height:auto;
        max-height:none;
        padding:18px;
        border-right:0;
        border-bottom:1px solid var(--line);
    }
    .js .sidebar {
        display:none;
    }
    .js .sidebar.is-open {
        display:flex;
        max-height:65vh;
        overflow-y:auto;
    }
    .sidebar-note,.sidebar-bottom {
        display:none;
    }
    .sidebar-label {
        margin-top:18px;
    }
    .language-group {
        margin-bottom:4px;
    }
    .page {
        padding:28px 20px 38px;
    }
    .home-intro {
        margin-top:5px;
    }
    .hero {
        margin:26px 0;
    }
    .hero h1 {
        font-size:42px;
        letter-spacing:-2px;
        line-height:1.1;
    }

    .hero p {
        font-size:13px;
    }
    .pill {
        font-size:8px;
    }
    .search-section {
        margin-top:26px;
        margin-bottom:34px;
    }
    .search-suggestions>span {
        width:100%;
        margin-top:3px;
    }
    .search-suggestions {
        column-gap:15px;
    }
    .section-heading {
        align-items:center;
    }
    .section-heading h2 {
        font-size:23px;
    }

    .language-card {
        padding:22px;
    }
    .language-card p {
        font-size:12px;
    }
    .language-stats {
        font-size:10px;
    }
    .snippet-grid {
        grid-template-columns:1fr;
    }
    .snippet-card h3 {
        font-size:18px;
    }
    .snippet-card p {
        font-size:12px;
    }
    .card-meta {
        font-size:10px;
    }
    .card-bottom {
        font-size:10px;
    }
    .value-strip {
        gap:24px;
        padding:26px 0;
    }
    .value-strip p {
        font-size:12px;
    }
    .home-signoff {
        font-size:10px;
    }
    .site-footer {
        padding:23px 20px;
        gap:15px;
    }
    .site-footer>span {
        display:flex;
        flex-wrap:wrap;
        gap:5px;
    }
    .site-footer nav {
        flex-wrap:wrap;
        gap:10px 18px;
        font-size:11px;
    }
    .cookie-banner {
        left:12px;
        right:12px;
        bottom:12px;
        padding:17px;
        flex-direction:column;
        align-items:stretch;
        gap:13px;
    }
    .cookie-actions {
        flex-direction:column;
    }
    .cookie-actions .button {
        flex:1;
        font-size:11px;
    }
    .breadcrumbs {
        margin-bottom:26px;
        font-size:10px;
    }
    .snippet-navigation { margin-bottom:26px; }
    .page-title {
        font-size:33px;
    }
    .search-filters {
        padding:16px;
        gap:12px;
    }
    .search-filters>div {
        flex:1 1 100%;
    }
    .search-filters .button {
        width:100%;
    }
    .snippet-summary {
        font-size:15px;
    }
    .code-panel pre {
        padding:20px;
        font-size:12px;
    }
    .code-toolbar {
        padding:12px 15px;
    }
    .code-file {
        display:none;
    }
    .output-panel {
        padding:18px;
    }
    .output-panel h2 {
        flex-wrap:wrap;
    }
    .verification {
        display:block;
    }
    .verification p {
        margin-top:10px;
    }
    .prose h1 {
        font-size:34px;
    }
    .prose p {
        font-size:14px;
    }
    .note {
        padding:16px;
    }
    .empty-state {
        padding-top:64px;
        padding-bottom:64px;
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior:auto!important;
        transition:none!important;
        transform:none!important;
    }
}


/* Native disclosure navigation remains available without JavaScript. */
.mobile-library { display:none; }
.hero-search input { border:1px solid var(--muted); border-radius:6px; padding:10px 12px; min-width:0; }
.hero-search input::placeholder { color:var(--muted); opacity:.75; }
.hero-search input:focus { outline:2px solid var(--primary); outline-offset:1px; }
.pagination { flex-wrap:wrap; }
.language-icon { min-width:32px; width:auto; font-size:9px; }
@media(max-width:900px) {
    .app-shell { display:flex; flex-direction:column; }
    .app-shell > main { order:0; width:100%; min-width:0; }
    .app-shell > .sidebar { order:1; align-self:stretch; }
    .sidebar, .js .sidebar { display:flex; position:static; width:auto; height:auto; max-height:none; overflow:visible; border-right:0; padding:20px; }
    .mobile-library { display:block; padding:18px; border:1px solid var(--line); border-radius:10px; background:var(--sidebar); }
    .mobile-library:empty { display:none; }
    .mobile-library > .sidebar { padding:0; border:0; }
    .mobile-library .sidebar-note, .mobile-library .sidebar-bottom { display:none; }
    .home-page .language-cards { display:none; }
    .hero-search input { width:calc(100% - 44px); flex:1 1 0; }
}

@media(max-width:900px) { .header-search input, .hero-search input, .search-filters input, .search-filters select { font-size:16px; } }

/* All technologies share one independently scrollable desktop library. */
@media(min-width:901px) {
    .sidebar { padding-top:22px; }
    .sidebar-label { margin-top:22px; margin-bottom:12px; }
    .sidebar .language-group { margin-bottom:6px; flex-shrink:0; }
    .sidebar-note { margin-top:22px; }
}
/* Browser chrome and display scaling leave less space than the monitor resolution. */
@media(min-width:901px) and (max-height:1000px) {
    .sidebar { padding-top:16px; padding-bottom:12px; }
    .sidebar-label { margin-top:16px; margin-bottom:10px; }
    .sidebar .language-group { margin-bottom:4px; }
    .sidebar-note { margin-top:16px; margin-bottom:12px; padding-top:12px; padding-bottom:12px; }
    .sidebar-bottom { padding-top:8px; }
}
.sitemap-page { padding:clamp(24px,4vw,64px); max-width:1600px; margin:0 auto; }
.sitemap-page h1 { font-size:clamp(32px,4vw,52px); margin:12px 0 20px; }
.sitemap-jump { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0; }
.sitemap-jump a { border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.sitemap-jump .count { margin-left:6px; }
.sitemap-language { padding:24px 0; border-top:1px solid var(--line); }
.sitemap-language h2 { scroll-margin-top:100px; font-size:26px; }
.sitemap-language h2 .count { font-size:14px; font-weight:400; margin-left:8px; }
.sitemap-categories { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:20px 32px; }
.sitemap-category { min-width:0; }
.sitemap-category h3 { font-size:17px; margin:16px 0 8px; }
.sitemap-page ul { margin:0; padding-left:20px; }
.sitemap-page li { padding:4px 0; overflow-wrap:anywhere; line-height:1.55; }
.sitemap-site { margin-bottom:24px; }
.sitemap-site ul { display:flex; flex-wrap:wrap; gap:8px 28px; }

/* Home refinements share the light-mode palette and keep mobile counts compact. */
.home-page .hero { margin-top:8px; }
.home-page .language-card h3, .home-shell .language-name { color:var(--category-title); }
@media(max-width:900px) {
    .mobile-library .library-link .count { font-size:12px; line-height:1.4; }
}