body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #24292e;
    max-width: 60rem;
    margin: 0 auto;
    padding: 2rem;
    background-color: #f6f8fa;
}

header {
    border-bottom: 1px solid #e1e4e8;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}

nav a {
    color: #0366d6;
    text-decoration: none;
    font-weight: bold;
}

nav a + a {
    margin-left: 1rem;
}

/* Figures must not exceed the column. A raster figure arrives at its intrinsic
   size — escape-cost.png is 1200px wide against an 832px column — and would
   otherwise run past the right edge. */
img {
    max-width: 100%;
    height: auto;
}

/* Generated figures are inlined as <svg> rather than linked as <img>, so that
   the text inside them is in the DOM: findable with the browser's search,
   selectable, and indexable. An inline <svg> has no intrinsic height, so the
   aspect ratio has to be taken from the viewBox via height:auto. */
svg.figure {
    display: block;
    width: 100%;
    height: auto;
}

/* A figure's title and its closing note are prose, so they are set here in the
   body font rather than drawn into the SVG at a size that shrinks with the
   image. Only text that means something at a coordinate stays in the drawing. */
figure.figure-block {
    margin: 1.5rem 0;
}

figure.figure-block figcaption {
    font-size: 0.9em;
    color: #57606a;
    margin-top: 0.5rem;
}

.container {
    background-color: #ffffff;
    padding: 2rem;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
}

h1, h2, h3 {
    border-bottom: 1px solid #eaecef;
    padding-bottom: .3em;
}

code {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    background-color: rgba(27, 31, 35, 0.05);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 85%;
}

pre {
    background-color: #272822;
    color: #f8f8f2;
    padding: 16px;
    overflow: auto;
    border-radius: 3px;
    line-height: 1.45;
}

pre code {
    background-color: transparent;
    padding: 0;
    font-size: 100%;
}

footer {
    margin-top: 2rem;
    text-align: center;
    color: #6a737d;
    font-size: 0.8rem;
}

/* Table Styles */
table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem 0;
}

table th, table td {
    border: 1px solid #dfe2e5;
    padding: 12px 15px;
    text-align: left;
}

table th {
    background-color: #f6f8fa;
    font-weight: 600;
}

table tr:nth-child(even) {
    background-color: #f8f8fa;
}

/* Code block container */
.codehilite {
    position: relative;
}

/* Copy button */
.copy-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 4px 8px;
    font-size: 12px;
    background-color: #444;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.copy-btn:hover {
    opacity: 1;
    background-color: #666;
}

/* Download button */
.example-links {
    margin-top: -15px;
    margin-bottom: 20px;
    text-align: right;
}

.download-btn {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    background-color: #e1e4e8;
    color: #24292e;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid #d1d5da;
}

.download-btn:hover {
    background-color: #d1d5da;
}

/* Tabs for versions */
.example-versions {
    margin: 20px 0;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    overflow: hidden;
}

.tab-buttons {
    background-color: #f6f8fa;
    border-bottom: 1px solid #e1e4e8;
    display: flex;
}

.tab-btn {
    background: none;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 600;
    color: #586069;
    border-right: 1px solid #e1e4e8;
}

.tab-btn:hover {
    background-color: #e1e4e8;
}

.tab-btn.active {
    background-color: #fff;
    color: #24292e;
    border-bottom: 2px solid #f9826c;
}

.tab-content {
    padding: 15px;
    background-color: #fff;
}

/* GPU profiling comparison tabs: same chrome as .example-versions, with a
   distinct accent so device-comparison tabs read differently from code tabs. */
.gpu-tabs .tab-btn.active {
    border-bottom-color: #0366d6;
}

.gpu-tabs .tab-content > .ncu-chart-container:first-child {
    margin-top: 4px;
}

/* NCU Metrics and Charts */
/* A measured number, not a highlight: monospace marks it as machine-produced and
   the dotted rule says "hover me" (every one carries a title= with its report,
   kernel and metric). Paragraphs in §4 quote six of these in a row, so anything
   heavier than this reads as a page attacked with a marker. */
.ncu-metric {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.94em;
    border-bottom: 1px dotted #8c959f;
    cursor: help;
}

/* Inside a table every cell is a metric, so the rule would just be noise. */
table .ncu-metric {
    font-size: inherit;
    border-bottom: none;
    cursor: auto;
}

.ncu-chart-container {
    margin: 20px 0;
    overflow-x: auto;
}

.ncu-chart-table {
    min-width: 500px;
}

.bar-wrapper {
    position: relative;
    height: 20px;
    width: 100%;
    background-color: #f1f1f1;
    border-radius: 3px;
}

.bar {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 3px;
}

.bar.actual {
    background-color: #28a745;
    opacity: 0.8;
}

.bar.baseline {
    background-color: #0366d6;
    opacity: 0.5;
    z-index: 1;
}

.ncu-error {
    color: #cb2431;
    background-color: #ffeef0;
    padding: 10px;
    border: 1px solid #d73a49;
    border-radius: 6px;
    margin: 10px 0;
}

/* Exercise Block */
.exercise-block {
    background-color: #f1f8ff;
    border: 1px solid #c8e1ff;
    border-radius: 6px;
    padding: 20px;
    margin: 30px 0;
}

.exercise-block h3 {
    margin-top: 0;
    color: #0366d6;
    border-bottom-color: #c8e1ff;
}

.exercise-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.exercise-help {
    font-size: 0.9em;
    color: #0366d6;
    text-decoration: none;
}

.exercise-help:hover {
    text-decoration: underline;
}

.exercise-code {
    margin: 15px 0;
}

/* ── Disclosure blocks ────────────────────────────────────────────────────── */

/* Shared summary reset */
details summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
details summary::-webkit-details-marker { display: none; }

/* Chevron via ::before on the symbol span */
details summary .di-sym {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
details summary .di-sym::before {
    content: '›';
    font-size: 1.1em;
    font-weight: 400;
    display: inline-block;
    transition: transform 0.15s;
    line-height: 1;
}
details[open] summary .di-sym::before {
    transform: rotate(90deg);
}

/* ── ✦ Solution ── */
details.solution {
    border: 1px solid #c8e1ff;
    border-radius: 0 6px 6px 6px;
    background: #f1f8ff;
    margin: 0.4rem 0;
    overflow: hidden;
}
details.solution summary {
    padding: 8px 12px;
    color: #0366d6;
}
details.solution[open] {
    background: #fff;
}
details.solution .di-body {
    padding: 10px 16px 14px;
    border-top: 1px solid #c8e1ff;
}

/* Question block that precedes a solution */
.exercise-question {
    border-left: 3px solid #0366d6;
    border-radius: 0 6px 0 0;
    padding: 10px 14px;
    margin: 1.25rem 0 0;
    background: #f1f8ff;
    font-style: italic;
}
.exercise-question + details.solution {
    margin-top: 0;
    border-top: none;
    border-radius: 0 0 6px 6px;
}

/* ── 📊 Profiling ── */
details.profiling {
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    background: #f6f8fa;
    margin: 0.4rem 0;
    overflow: hidden;
}
details.profiling summary {
    padding: 7px 12px;
    color: #57606a;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
}
details.profiling .di-body {
    padding: 10px 16px 14px;
    border-top: 1px dashed #d4d4d4;
    font-size: 13px;
    color: #57606a;
}

/* ── ※ Aside ── */
details.aside {
    border-left: 3px solid #e36209;
    border-radius: 0;
    background: transparent;
    margin: 0.6rem 0;
}
details.aside summary {
    padding: 4px 10px;
    color: #e36209;
}
details.aside .di-body {
    padding: 6px 10px 10px 10px;
    color: #57606a;
}

/* ── Section-level collapsibles: Advanced and Case. Both are their own
      section rather than an inline note, so they carry the heading's weight
      and divider; only the badge distinguishes them. ── */
details.advanced,
details.case {
    border: none;
    background: transparent;
    margin: 2.25rem 0 1.5rem;
}
details.advanced > summary,
details.case > summary {
    padding: 0 0 0.3em 0;
    border-bottom: 1px solid #eaecef;   /* same divider as h1/h2/h3 */
    color: #24292e;
}
details.advanced > summary .di-sym,
details.case > summary .di-sym {
    font-size: 1.3rem;                  /* heading scale (between h2 and h3) */
    font-weight: 600;
}
details.advanced .adv-badge,
details.case .case-badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 1px 7px;
    align-self: center;
}
details.advanced .adv-badge {
    color: #6f42c1;
    background: #f3effc;
    border: 1px solid #e0d4f7;
}
details.case .case-badge {
    color: #3b6ea5;
    background: #eef3f9;
    border: 1px solid #cfe0f0;
}
details.advanced > .di-body,
details.case > .di-body {
    padding: 0.6rem 0 0 0;              /* flush with the document body */
}

/* ── ⚠ Warning (non-collapsible) ── */
.warning {
    border-left: 3px solid #b45309;
    border-radius: 0 6px 6px 0;
    background: #fffbeb;
    padding: 10px 14px;
    margin: 1rem 0;
}
.warning .warning-title {
    color: #b45309;
    font-weight: 600;
    margin: 0 0 6px;
}
.warning .warning-title::before {
    content: '⚠ ';
}

/* Takeaway: a static, always-visible highlight for the one idea to remember
   from a section. Teal accent keeps it distinct from the amber warning box. */
.takeaway {
    border-left: 3px solid #0f766e;
    border-radius: 0 6px 6px 0;
    background: #f0fdfa;
    padding: 10px 14px;
    margin: 1rem 0;
}
.takeaway .takeaway-title {
    color: #0f766e;
    font-weight: 600;
    margin: 0 0 6px;
}
.takeaway .takeaway-title::before {
    content: '💡 ';
}

/* Syntax Highlighting */
/* The styles are imported from pygments.css */

/* Footnotes: a clarification that would interrupt the sentence it belongs to,
   without the visual weight of an aside box. The extension collects them at the
   foot of the page, so they want to read as an appendix rather than as more
   body text. */
.footnote {
    font-size: 0.9em;
    color: #6a737d;
    margin-top: 2.5rem;
}

.footnote hr {
    border: none;
    border-top: 1px solid #e1e4e8;
    margin-bottom: 0.4rem;
}

.footnote-ref {
    text-decoration: none;
    padding: 0 1px;
}

/* Glossary terms. <dfn> marks the one occurrence of a term that defines it;
   the course previously wrote these in bold, and they keep that weight so the
   text reads exactly as before — the anchor is the only thing that is new. */
dfn.term {
    font-style: normal;
    font-weight: 600;
}

/* Repeat mentions, once they are linked back to their definition. Kept quiet:
   a term can occur many times on a page, and a page of blue links would be
   worse than no links at all. */
a.term-ref {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted #b9c0c7;
}

a.term-ref:hover {
    border-bottom-style: solid;
    border-bottom-color: #0366d6;
}

/* The defining instance links out to the glossary. It must still read as the
   bold term it replaced, so the link takes no colour of its own. */
dfn.term a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted #b9c0c7;
}

dfn.term a:hover {
    border-bottom-style: solid;
    border-bottom-color: #0366d6;
}