/* ───────────────────────────────────────────────────────────────────────────── Lesson and problem pages: /lessons/*, /problems/* (generated and hand-written). One stylesheet for all three page families, so a change lands on every one of them. It replaced solution-style.css and the old lessons/lesson-style.css here; solution-style.css stays only for the question-bank solution views. Load order (in each template's ): nprogress.min.css -> brand.css -> bootcamp-banner.css -> atom-one-dark.min.css -> [codemirror + material-darker, desktop lessons] -> learn.css These pages do NOT load style.css: its global table/td/button/body rules are what turned highlighted code into centred, zebra-striped, proportional text. ───────────────────────────────────────────────────────────────────────────── */ :root { color-scheme: dark; /* dark native scrollbars and form controls */ --learn-body: #CBD5E1; /* long-form text: ~12:1 on the card */ --code-bg: var(--bg-1); /* the code well sits darker than the card */ --code-bar: var(--surface-3); --code-line: var(--line-2); --code-gutter: #5c6370; /* atom-one-dark's own gutter grey */ --code-h: min(70vh, 640px); /* one height for every panel in a set */ } /* ── 1. Base ──────────────────────────────────────────────────────────────── */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg-1); color: var(--text-1); font-family: var(--font-ui); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; transition: color .15s; } a:hover { color: var(--accent-lift); } button { font-family: inherit; } pre { margin: 0; } /* ── 2. Page shell ────────────────────────────────────────────────────────── */ /* Holds the signed-in #bootcamp-ad banner; pinned while reading on desktop. */ @media (min-width: 769px) { #sticky-wrapper { position: sticky; top: 0; z-index: 1000; } } .page-back { box-sizing: border-box; max-width: 880px; margin: 16px auto 0; padding: 0 16px; } @media (min-width: 961px) { .page-back { padding: 0; } } .back-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text-2); font-size: 14px; font-weight: 500; line-height: 1.2; transition: color .15s, border-color .15s, background-color .15s; } .back-link:hover { color: var(--accent); border-color: var(--line-3); background: var(--surface-2); } .back-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .solution-card { box-sizing: border-box; max-width: 880px; margin: 12px auto 64px; padding: 40px 48px 48px; background: var(--surface-1); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--rim), var(--e2); } .page-content { margin: 0 auto; } /* Spacer divs from the templates: small, because headings and rules carry the rhythm. */ .page-content .horizontal-space-small { padding-top: 12px; } .page-content .horizontal-space-large { padding-top: 24px; } /* ── 3. Title, links row, video ───────────────────────────────────────────── */ .page-content h1.roboto-bold { margin: 0 0 16px; padding: 0; font-family: inherit; font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-1); text-align: center; text-wrap: balance; } .meta-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 28px; } .meta-link { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--line-3); border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 14px; font-weight: 500; transition: color .15s, border-color .15s, background-color .15s; } .meta-link:hover { color: var(--accent); border-color: var(--accent-deep); background: var(--surface-3); } .meta-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .meta-link--icon { width: 36px; padding: 0; justify-content: center; } .meta-link-icon { height: 18px; width: auto; } .meta-link-icon--mono { filter: invert(1); opacity: .75; } .meta-link:hover .meta-link-icon--mono { opacity: 1; } .solution-video { display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 8px; border: 0; border-radius: 12px; background: #000; box-shadow: var(--e2); } /* Mobile: a thumbnail that becomes the player on tap. */ .yt-lazy { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line-2); border-radius: 12px; background: #000; cursor: pointer; } .yt-lazy img { display: block; width: 100%; height: 100%; object-fit: cover; } .yt-lazy iframe { display: block; width: 100%; height: 100%; border: 0; } .yt-lazy .play-button { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: rgba(10, 14, 26, .72); pointer-events: none; } .yt-lazy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .yt-progress { position: absolute; top: 50%; left: 50%; z-index: 2; display: none; width: 60px; height: 6px; transform: translate(-50%, -50%); overflow: hidden; border-radius: 3px; background: var(--line-3); } .yt-progress-bar { width: 0%; height: 100%; background: var(--accent); transition: width .5s; } /* ── 4. Prose: headings, text, lists, inline code, rules ─────────────────── */ .page-content h2 { margin: 48px 0 12px; font-size: 1.5rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--text-1); } .page-content h3 { margin: 32px 0 10px; font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: var(--text-1); } .page-content h4 { margin: 24px 0 8px; font-size: 1rem; font-weight: 600; color: var(--text-1); } .page-content p, .page-content li { font-size: 1rem; font-weight: 400; line-height: 1.7; color: var(--learn-body); } .page-content p { margin: 0 0 14px; } .page-content strong, .page-content b { color: var(--text-1); font-weight: 600; } .page-content ul, .page-content ol { margin: 8px 0 16px; padding-left: 1.4em; list-style-position: outside; } .page-content li { margin: 6px 0; } .page-content li::marker { color: var(--text-3); } .page-content li > ul, .page-content li > ol { margin: 6px 0 0; } .page-content :not(pre) > code { padding: .1em .4em; border: 1px solid var(--line-2); border-radius: 5px; background: var(--surface-3); color: #E2E8F0; font-family: var(--font-mono); font-size: .875em; font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .page-content hr { height: 0; margin: 48px 0; border: 0; border-top: 1px solid var(--line-2); background: none; } /* ── 5. Step-by-step thought process (#First-Method … #Fourth-Method) ────── */ /* problemSteps.js reveals one
  • at a time by setting display:list-item. Hidden items do not increment the counter, so numbering runs 1, 2, 3 as they appear. */ :is(#First-Method, #Second-Method, #Third-Method, #Fourth-Method) > :is(ol, ul) { margin: 16px 0 12px; padding-left: 0; list-style: none; counter-reset: step; } :is(#First-Method, #Second-Method, #Third-Method, #Fourth-Method) > :is(ol, ul) > li { display: none; position: relative; margin: 0 0 10px; padding: 12px 16px 12px 52px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); counter-increment: step; } :is(#First-Method, #Second-Method, #Third-Method, #Fourth-Method) > ol > li::before { content: counter(step); position: absolute; top: 13px; left: 14px; width: 24px; height: 24px; border-radius: 50%; background: rgba(99, 213, 207, .12); color: var(--accent); font: 600 13px/24px var(--font-ui); text-align: center; } :is(#First-Method, #Second-Method, #Third-Method, #Fourth-Method) > ul > li::before { content: ''; position: absolute; top: 21px; left: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .page-content li > h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; } .next-step-button { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; padding: 8px 14px; border: 1px solid var(--accent-deep); border-radius: 8px; background: transparent; color: var(--accent); font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; } .next-step-button:hover { background: rgba(99, 213, 207, .08); color: var(--accent-lift); border-color: var(--accent); } .next-step-button:active { transform: translateY(1px); } .next-step-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── 6. Long-form explanations: problem cards, lesson notes, lesson summary ── */ #detailed-explanation { margin: 48px 0 16px; padding: 0; border: 0; font-size: 1.5rem; text-align: left; letter-spacing: -0.01em; } .detailed-explanation-content section, .endingParagraph section { margin: 0 0 16px; padding: 4px 28px 20px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); color: var(--learn-body); } .detailed-explanation-content section h2, .endingParagraph section h2 { margin: 20px 0 12px; padding-left: 12px; border-left: 3px solid var(--accent); font-size: 1.25rem; line-height: 1.3; } .detailed-explanation-content section h3, .endingParagraph section h3 { margin: 20px 0 8px; font-size: 1.0625rem; } /* lesson notes that title their cards with an h3 get the same card title */ .endingParagraph section > h3:first-child { margin: 20px 0 12px; padding-left: 12px; border-left: 3px solid var(--accent); font-size: 1.25rem; line-height: 1.3; } /* Code samples written straight into explanation HTML (not the tabbed panels). */ :is(.detailed-explanation-content, .endingParagraph, .summary-inner) pre { margin: 12px 0; padding: 12px 16px; overflow: auto; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-0); font: 13px/1.6 var(--font-mono); } :is(.detailed-explanation-content, .endingParagraph, .summary-inner) pre code { padding: 0; border: 0; background: none; font: inherit; } /* Lesson summary: a native
    , open by default. */ .lesson-summary { margin: 40px 0 0; overflow: hidden; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); } .lesson-summary > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 12px 20px; list-style: none; cursor: pointer; } .lesson-summary > summary::-webkit-details-marker { display: none; } .lesson-summary > summary h2 { margin: 0; font-size: 1.125rem; line-height: 1.3; } .lesson-summary > summary::after { content: ''; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg); transition: transform .2s; } .lesson-summary[open] > summary::after { transform: rotate(-135deg); } .lesson-summary > summary:hover { background: var(--surface-3); } .lesson-summary > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .lesson-summary[open] > summary { border-bottom: 1px solid var(--line-1); } .lesson-summary .summary-inner { padding: 4px 20px 16px; } .lesson-summary .summary-inner h3 { margin: 24px 0 8px; font-size: 1.0625rem; } .code-title { margin-top: 40px; } /* ── 7. Tables inside explanations ────────────────────────────────────────── */ .page-content table:not(.hljs-ln):not(.matrix) { width: 100%; margin: 12px 0 20px; overflow: hidden; border: 1px solid var(--line-2); border-collapse: separate; border-spacing: 0; border-radius: 10px; font-size: .9375rem; } .page-content table:not(.hljs-ln):not(.matrix) th { padding: 10px 14px; border: 0; background: var(--surface-3); color: var(--text-1); font-weight: 600; text-align: left; } .page-content table:not(.hljs-ln):not(.matrix) td { padding: 10px 14px; border: 0; border-top: 1px solid var(--line-2); color: var(--learn-body); text-align: left; } /* Grid examples in matrix problems (spiral, rotate, sudoku…). */ .matrix { width: auto; margin: 16px auto; border: 0; border-collapse: separate; border-spacing: 4px; } .matrix td { min-width: 40px; padding: 8px 12px; border: 1px solid var(--line-3); border-radius: 6px; background: var(--surface-3); color: var(--text-1); font: 600 15px/1.2 var(--font-mono); text-align: center; } /* ── 8. Code: tab bar ─────────────────────────────────────────────────────── */ .tab { display: flex; align-items: stretch; min-height: 42px; margin: 12px 0 0; padding: 0 0 0 6px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; border: 1px solid var(--code-line); border-radius: 10px 10px 0 0; background: var(--code-bar); scrollbar-width: none; } .tab::-webkit-scrollbar { display: none; } .tab.is-collapsed { border-radius: 10px; } .tab button { flex: none; margin: 0; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--text-2); font: 500 14px/1 var(--font-ui); cursor: pointer; transition: color .15s, border-color .15s, background-color .15s; } .tab button:hover { background: rgba(255, 255, 255, .04); color: var(--text-1); } .tab button.active { color: var(--text-1); border-bottom-color: var(--accent); } .tab.is-collapsed button.active { color: var(--text-2); border-bottom-color: transparent; } .tab button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .tab .tabText { margin: 0; font: inherit; color: inherit; } /* Hide/Show: pinned to the right edge so it stays reachable if labels ever overflow. */ .tab button.Hide-button, .tab button.Hide-button.active { position: sticky; right: 0; margin-left: auto; padding: 0 14px; border: 0; border-left: 1px solid var(--code-line); background: var(--code-bar); color: var(--text-3); font-size: 13px; } .tab button.Hide-button:hover { color: var(--text-1); background: var(--code-bar); } /* ── 9. Code: panels ──────────────────────────────────────────────────────── */ .tabcontent, .tabcontent1, .tabcontent2, .tabcontent3 { display: none; overflow: hidden; border: 1px solid var(--code-line); border-top: 0; border-radius: 0 0 10px 10px; background: var(--code-bg); } .code-container { position: relative; } .code-container > pre { max-height: var(--code-h); overflow: auto; background: var(--code-bg); scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; } .code-container > pre::-webkit-scrollbar { width: 10px; height: 10px; } .code-container > pre::-webkit-scrollbar-thumb { border: 2px solid var(--code-bg); border-radius: 6px; background: var(--line-3); } .code-container > pre::-webkit-scrollbar-track, .code-container > pre::-webkit-scrollbar-corner { background: transparent; } /* One scroller (the 
    ) for both axes; atom-one-dark gives  its own. */
.code-container > pre > code.code-b,
.code-container > pre > code.hljs {
    display: block;
    overflow: visible;
    padding: 14px 0;
    background: transparent;
    color: #abb2bf;
    font-family: var(--font-mono);
    font-size: 13.5px;
    line-height: 1.6;
    text-align: left;
    white-space: pre;
    tab-size: 4;
}

/* highlightjs-line-numbers renders each block as a table */
.code-container table.hljs-ln {
    width: auto;
    min-width: 100%;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}
.code-container table.hljs-ln tr { background: transparent; }
.code-container table.hljs-ln td {
    height: auto;
    padding: 0;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    vertical-align: top;
    white-space: pre;
}
.code-container table.hljs-ln td.hljs-ln-numbers {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 1%;
    padding: 0 14px 0 16px;
    background: var(--code-bg);
    box-shadow: inset -1px 0 0 var(--line-1);
    color: var(--code-gutter);
    text-align: right;
    -webkit-user-select: none;
    user-select: none;
}
.code-container table.hljs-ln td.hljs-ln-code { padding: 0 56px 0 16px; }

/* Copy: always visible (touch has no hover), quiet, not red - it is not a CTA. */
.code-container > .copy-button {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 3;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--line-3);
    border-radius: 6px;
    background: rgba(21, 28, 46, .92);
    color: var(--text-2);
    font: 500 12px/1 var(--font-ui);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.code-container > .copy-button:hover { color: var(--text-1); border-color: var(--accent); }
.code-container > .copy-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.code-container > .copy-button.is-copied { color: var(--accent); border-color: var(--accent-deep); }

/* ── 10. Lessons: notebook, JS runner ─────────────────────────────────────── */

.notebook-frame {
    display: block;
    width: 100%;
    height: var(--code-h);
    border: 0;
    background: #fff;
}
/* display:block above would otherwise override the hidden attribute */
.notebook-frame[hidden] { display: none; }

.runner-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 16px;
    border-bottom: 1px solid var(--line-1);
    background: var(--surface-2);
}
.runner-hint { margin-right: auto; color: var(--text-3); font-size: 12px; line-height: 1.3; }
.runner-bar button {
    margin: 0;
    padding: 7px 12px;
    border-radius: 6px;
    font: 600 12px/1 var(--font-ui);
    cursor: pointer;
}
.runner-bar .copy-button-code { border: 1px solid var(--line-3); background: transparent; color: var(--text-2); }
.runner-bar .copy-button-code:hover { border-color: var(--accent); color: var(--text-1); }
.runner-bar .run-button { border: 0; background: var(--cta); color: #fff; }
.runner-bar .run-button:hover { background: var(--cta-deep); }
.runner-bar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.code-container .CodeMirror {
    height: calc(var(--code-h) - 44px);
    font-family: var(--font-mono);
    font-size: 13.5px;
    line-height: 1.6;
}
.code-container .CodeMirror pre.CodeMirror-line,
.code-container .CodeMirror pre.CodeMirror-line-like { line-height: 1.6; }
.cm-s-material-darker.CodeMirror,
.cm-s-material-darker .CodeMirror-gutters { background-color: var(--code-bg); }
.cm-s-material-darker .CodeMirror-gutters { border-right: 1px solid var(--line-1); }
.cm-s-material-darker .CodeMirror-linenumber { color: var(--code-gutter); }
.code-container .CodeMirror-lines { padding: 14px 0; }
.code-container .CodeMirror-linenumber { padding: 0 14px 0 16px; }
.code-container .CodeMirror pre.CodeMirror-line,
.code-container .CodeMirror pre.CodeMirror-line-like { padding: 0 16px; }

/* Lesson notebook: loads on request, not on page load (a focused iframe scrolled
   the page to itself, and it pulls in a whole Python runtime). */
.notebook-launch {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 220px;
    padding: 32px 24px;
    text-align: center;
}
.page-content .notebook-launch p { max-width: 420px; margin: 0; color: var(--text-2); }
.page-content .notebook-launch p strong { display: block; margin-bottom: 4px; color: var(--text-1); }
.notebook-open {
    padding: 10px 18px;
    border: 1px solid var(--accent-deep);
    border-radius: 8px;
    background: transparent;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.notebook-open:hover { background: rgba(99, 213, 207, .08); color: var(--accent-lift); border-color: var(--accent); }
.notebook-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.runner-note { margin-right: auto; color: var(--text-3); font-size: 12px; line-height: 1.3; }

#sandbox-output {
    display: none;
    max-height: 280px;
    margin: 0;
    padding: 12px 16px;
    overflow: auto;
    border-top: 1px solid var(--code-line);
    background: var(--bg-0);
    color: var(--text-1);
    font: 13px/1.6 var(--font-mono);
    white-space: pre-wrap;
}
#sandbox-output::before {
    content: 'Console';
    display: block;
    margin-bottom: 8px;
    color: var(--text-3);
    font: 600 11px/1 var(--font-ui);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ── 11. Floating "Need help landing software roles?" pill ───────────────── */
/* Stays floating (it is the page's call to action) but smaller, with no pulse, and
   problemSteps.js hides it while the footer is on screen so the legal links can
   be tapped. */

#support-button {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 999;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 32px);
    padding: 10px 16px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cta), var(--cta-deep));
    box-shadow: var(--e2);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
#support-button:hover { color: #fff; box-shadow: var(--e3); }
@media (hover: hover) { #support-button:hover { transform: translateY(-1px); } }
#support-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#support-button.is-hidden,
body:has(#cookie-consent-banner:not(.hidden)) #support-button { opacity: 0; pointer-events: none; }
.cta-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    background: #fff;
    color: var(--cta-deep);
    font-size: .7em;
    font-weight: 800;
    letter-spacing: .04em;
}

/* ── 12. Small screens ────────────────────────────────────────────────────── */

@media (max-width: 960px) {
    .solution-card { max-width: none; margin: 12px 16px 48px; padding: 32px 24px 40px; }
    .page-back { max-width: none; }
}

@media (max-width: 768px) {
    /* no card on phones: the page is the card */
    .solution-card {
        margin: 0 0 40px;
        padding: 8px 16px 32px;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    .page-content h2 { margin-top: 36px; font-size: 1.375rem; }
    .page-content h3 { margin-top: 28px; }
    .page-content hr { margin: 32px 0; }
    .meta-links { margin-bottom: 20px; }

    .detailed-explanation-content section,
    .endingParagraph section { margin: 0 0 12px; padding: 4px 16px 16px; border-radius: 10px; }
    .detailed-explanation-content section h2,
    .endingParagraph section h2 { font-size: 1.125rem; }
    .lesson-summary .summary-inner { padding: 4px 16px 12px; }
    .lesson-summary > summary { padding: 12px 16px; }

    .next-step-button { min-height: 44px; }

    #support-button { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 24px); padding: 9px 14px; font-size: 13px; }
}

@media (max-width: 600px) {
    :root { --code-h: 65vh; }
    .tab { min-height: 40px; }
    .tab button,
    .tab button.Hide-button,
    .tab button.Hide-button.active { padding: 0 10px; font-size: 13px; }

    .code-container > pre > code.code-b,
    .code-container > pre > code.hljs { font-size: 12.5px; }
    .code-container table.hljs-ln td.hljs-ln-numbers { padding: 0 10px 0 12px; }
    .code-container table.hljs-ln td.hljs-ln-code { padding: 0 16px 0 12px; }

    /* Copy sits in a band above line 1 instead of on top of it. A border, not a
       margin (collapses) or padding (scrolls away with the code). */
    .code-container > .copy-button { top: 5px; right: 8px; padding: 5px 8px; font-size: 11px; }
    .code-container > .copy-button + pre { border-top: 36px solid var(--code-bg); }
    .code-container > .copy-button + pre > code.code-b,
    .code-container > .copy-button + pre > code.hljs { padding-top: 4px; }
}

@media (max-width: 600px) {
    .page-content table:not(.hljs-ln):not(.matrix) { font-size: .875rem; }
    .page-content table:not(.hljs-ln):not(.matrix) :is(th, td) { padding: 8px 10px; }
}

/* the widest table can still not fit a small phone: let it scroll by itself */
@media (max-width: 400px) {
    .page-content table:not(.hljs-ln):not(.matrix) { display: block; overflow-x: auto; }
}

@media (max-width: 360px) {
    /* L1: the pill's text is wider than the screen below ~340px */
    #support-button { gap: 6px; padding: 8px 12px; font-size: 12px; }
    .tab { padding-left: 2px; }
    .tab button,
    .tab button.Hide-button,
    .tab button.Hide-button.active { padding: 0 8px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
    #support-button, .next-step-button, .tab button, .meta-link, .back-link { transition: none; }
    #support-button:hover { transform: none; }
}