:root {
  --c-bg: #F4FCFC;
  --c-bg-alt: #DBE8F7;
  --c-text: #032659;
  --c-text-alt: #47264F;
  --c-border: #B8D4ED;
  --c-accent: #0057B7;
  --c-accent-hover: #3382CF;
  --c-accent-alt: #00B1CE;
  --c-code-bg: #EAF8F9;
  --c-warn: #DE8A05;
  --c-error: #CC1B22;
  --c-success: #0081A1;
  --c-info: #3382CF;
  --c-highlight: #FCEBC9;
  --c-muted-bg: #FDF7EB;
  --radius: 6px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing:border-box; }
body { margin:0; font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; line-height:1.5; color:var(--c-text); background:var(--c-bg); }

.site-header { background:var(--c-accent); color:#fff; padding:.75rem 1rem; display:flex; flex-wrap:wrap; align-items:center; gap:2rem; }
.site-header a { color:#fff; text-decoration:none; }
.site-header a:hover { text-decoration:underline; }
.site-title { font-size:1.15rem; margin:0; }

ul { list-style:inside disc; }

/* Nav */
.site-header ul { list-style:none; margin:0; padding:0; display:flex; gap:1rem; }
.site-header li a { padding:.35rem .6rem; border-radius:4px; font-size:.9rem; display:block; }
.site-header li a:hover { background:var(--c-accent-hover); }

.site-header ul.primary-nav { list-style:none; margin:0; padding:0; display:flex; gap:1rem; align-items:center; }
.site-header ul.primary-nav > li { position:relative; }
.site-header .lessons-group details { padding:0; display:flex; align-items:center; }
.site-header .lessons-group summary { cursor:pointer; list-style:none; font-weight:600; background: var(--c-accent-alt); color:#fff; padding:.35rem .6rem; border-radius:4px; font-size:.85rem; display:flex; align-items:center; line-height:1; }
/* ensure multiple dropdowns align */
.site-header .lessons-group + .lessons-group { margin-left:.5rem; }
.site-header .lessons-group summary:hover { background: var(--c-accent-hover); }
/* Open state ensure summary stays highlighted */
.site-header .lessons-group details[open] > summary { background: var(--c-accent-hover); }
/* Remove inherited background on details when open to avoid extra block behind submenu */
.site-header .lessons-group details[open] { background: transparent; }
.site-header .lessons-group summary::-webkit-details-marker { display:none; }
.site-header .lessons-group details[open] { background:var(--c-accent-hover); border-radius:4px; }
.site-header .lessons-group ul.submenu { list-style:none; margin:.4rem 0 0; padding:.5rem .75rem; background:var(--c-bg-alt); border:1px solid var(--c-border); border-radius:var(--radius); display:flex; flex-direction:column; gap:.3rem; max-height:60vh; overflow:auto; min-width:14rem; z-index:1000; position:relative; }
.site-header .lessons-group ul.submenu a { color:var(--c-text); background:transparent; padding:.25rem .4rem; border-radius:4px; font-size:.8rem; }
.site-header .lessons-group ul.submenu a:hover { background:var(--c-accent); color:#fff; text-decoration:none; }

@media (hover:none){
  .site-header .lessons-group details[open] ul.submenu { position:static; }
}
@media (min-width:681px){
  .site-header .lessons-group details { position:relative; }
  .site-header .lessons-group details > ul.submenu { position:absolute; top:100%; left:0; z-index:1000; box-shadow:0 4px 12px rgba(0,0,0,.15); }
}

.site-content { max-width: 980px; margin: 2rem auto 4rem; padding:0 1.2rem; }
.site-content h1, .site-content h2, .site-content h3 { line-height:1.25; color:var(--c-text); }
.site-content a { color: var(--c-accent); }
.site-content a:hover { color: var(--c-accent-hover); }

footer, .site-footer { border-top:1px solid var(--c-border); padding:2rem 1rem; font-size:.85rem; text-align:center; background:var(--c-bg-alt); color:var(--c-text); }
.site-footer ul.footer-links { list-style:none; margin:.75rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; justify-content:center; }
.site-footer ul.footer-links a { color: var (--c-text); text-decoration:none; font-size:.8rem; }
.site-footer ul.footer-links a:hover { color: var(--c-accent); text-decoration:underline; }

pre, code { font-family:var(--mono); font-size:.9rem; }
pre { background:var(--c-code-bg); padding:1rem; border:1px solid var(--c-border); border-radius:var(--radius); overflow:auto; position:relative; }
code { background:var(--c-muted-bg); padding:.15rem .35rem; border-radius:4px; }
pre code { background:transparent; padding:0; }

.copy-btn { position:absolute; top:6px; right:6px; border:none; background:var(--c-accent); color:#fff; font-size:.7rem; padding:.4rem .55rem; border-radius:4px; cursor:pointer; letter-spacing:.5px; text-transform:uppercase; font-weight:600; }
.copy-btn:hover { background:var(--c-accent-hover); }
.copy-btn:disabled { opacity:.6; cursor:default; }

/* Details / Collapsible */
details.collapsible { border:1px solid var(--c-border); border-radius:var(--radius); margin:1rem 0; background:var(--c-bg-alt); }
details.collapsible > summary { cursor:pointer; list-style:none; padding:.6rem .85rem; font-weight:600; color:var(--c-text); }
details.collapsible[open] { background:var(--c-muted-bg); }
details.collapsible > *:not(summary) { padding:0 1rem 1rem; }

/* Markdown-preserving collapsible */
details.collapsible-md { border:1px solid var(--c-border); border-radius:var(--radius); margin:1.25rem 0; background:var(--c-bg-alt); }
details.collapsible-md > summary { cursor:pointer; list-style:none; padding:.6rem .85rem; font-weight:600; color:var(--c-text); }
details.collapsible-md[open] { background:var(--c-bg); }
details.collapsible-md[open] > summary { border-bottom:1px solid var(--c-border); margin-bottom:.65rem; }
/* Provide padding only once */
details.collapsible-md .collapsible-inner { padding:0 1rem 1rem; }
/* Reset possible inherited table spacing differences */
details.collapsible-md table { margin:1rem 0; }
/* Ensure first child spacing tidy */
details.collapsible-md .collapsible-inner > *:first-child { margin-top:0; }
/* Close button */
details.collapsible-md button.collapse-close { margin-top:1rem; background:var(--c-accent-alt); color:#fff; border:none; padding:.5rem .85rem; border-radius:4px; font-size:.75rem; font-weight:600; letter-spacing:.5px; cursor:pointer; }
details.collapsible-md button.collapse-close:hover,
details.collapsible-md button.collapse-close:focus { background:var(--c-accent-hover); outline:2px solid var(--c-accent-hover); outline-offset:2px; }

table { border-collapse:collapse; width:100%; margin:1.5rem 0; }
th, td { border:1px solid var(--c-border); padding:.5rem .6rem; text-align:left; }
th { background:var(--c-bg-alt); }

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

blockquote { border-left:4px solid var(--c-accent); margin:1rem 0; padding:.5rem .9rem; background:var(--c-bg-alt); color:var(--c-text-alt); }

.lesson nav { margin:2rem 0; }

/* Utility classes using roles */
.badge { display:inline-block; padding:.2rem .5rem; border-radius:999px; font-size:.65rem; font-weight:600; letter-spacing:.5px; background:var(--c-accent); color:#fff; }
.badge.warn { background: var(--c-warn); }
.badge.error { background: var(--c-error); }
.badge.success { background: var(--c-success); }
.badge.info { background: var(--c-info); }

.alert { border:1px solid var(--c-border); background:var(--c-muted-bg); padding:.9rem 1rem; border-radius:var(--radius); }
.alert.warn { border-color: var(--c-warn); }
.alert.error { border-color: var(--c-error); }
.alert.success { border-color: var(--c-success); }
.alert.info { border-color: var(--c-info); }

mark { background: var(--c-highlight); padding:0 .25rem; }

/* Lesson previous/next navigation */
.lesson-nav { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--c-border); }
.lesson-nav a { flex:1; text-decoration:none; background:var(--c-accent); color:#fff; padding:.75rem 1rem; border-radius:var(--radius); font-weight:600; font-size:.85rem; text-align:center; }
.lesson-nav a.prev { background:var(--c-accent-alt); }
.lesson-nav a:hover { background:var(--c-accent-hover); }
.lesson-nav a.prev:hover { background:var(--c-accent); }
.lesson-nav a:only-child { margin-left:auto; margin-right:0; }

/* Responsive */
@media (max-width:680px){
  .site-header { gap:1rem; }
  .site-header ul { flex-wrap:wrap; }
  .site-content { margin:1.25rem auto 3rem; }
  .lesson-nav { flex-direction:column; }
  .lesson-nav a { width:100%; }
}

/* Visually hidden */
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* QA block */
.answer-checker { border:1px solid var(--c-border); background:var(--c-bg-alt); padding:1rem 1.1rem; border-radius:var(--radius); margin:1.25rem 0; }
.answer-checker .qa-question { margin-top:0; }

/* Distinct background colors for components */
details.collapsible[open] { background: var(--c-muted-bg); }
.answer-checker { background: var(--c-highlight) !important; border:1px solid var(--c-warn) !important; }
.answer-checker .qa-question { border-left:4px solid var(--c-warn); padding-left:.5rem; }
.answer-checker code { background: var(--c-bg-alt); }

/* Workshop */
.workshop .meta { font-size:.85rem; color:var(--c-text-alt); margin-top:-.5rem; margin-bottom:1.25rem; }
.workshop h1 { margin-top:0; }

.github-link { margin-left:auto; display:flex; align-items:center; }
.github-link a { display:flex; align-items:center; padding:.35rem .55rem; background:var(--c-accent-alt); border-radius:4px; }
.github-link a:hover, .github-link a:focus { background:var(--c-accent-hover); outline:none; }
.github-link svg { display:block; margin:0; }

.search-link a { display:flex; align-items:center; padding:.35rem .55rem; background:var(--c-accent-alt); border-radius:4px; }
.search-link a:hover, .search-link a:focus { background:var(--c-accent-hover); outline:none; }
.search-link svg { display:block; margin:0; }

/* Header alignment normalization */
.site-header { align-items:center; }
.site-header ul.primary-nav { align-items:center; }
.site-header .lessons-group details { padding:0; display:flex; align-items:center; }
.site-header .lessons-group summary { display:flex; align-items:center; line-height:1; }
/* Unified interactive height */
.site-header .primary-nav > li > a,
.site-header .lessons-group summary,
.search-link a,
.github-link a { display:flex; align-items:center; height:32px; padding:0 .65rem; }
/* Remove background on details container when open (keep on summary only) */
.site-header .lessons-group details[open] { background:transparent; }
/* Adjust icon svg vertical centering */
.search-link svg, .github-link svg { margin:0; }
/* Ensure submenu still positioned correctly */
.site-header .lessons-group details > ul.submenu { margin-top:.5rem; }

/* Developer Guide layout */
.guide-layout { display:flex; gap:2rem; }
.guide-toc { flex:0 0 230px; position:sticky; top:1rem; align-self:flex-start; max-height:calc(100vh - 2rem); overflow:auto; padding:.75rem .75rem 1rem; background:var(--c-bg-alt); border:1px solid var(--c-border); border-radius:var(--radius); font-size:.8rem; }
.guide-toc ol { list-style:decimal; margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.4rem; }
.guide-toc a { text-decoration:none; color:var(--c-text); }
.guide-toc a:hover, .guide-toc a:focus { color:var(--c-accent); text-decoration:underline; }
.guide-article { flex:1 1 auto; min-width:0; }
.guide-article h2, .guide-article h3 { scroll-margin-top:90px; }
@media (max-width:900px){
  .guide-layout { flex-direction:column; }
  .guide-toc { position:static; max-height:none; width:100%; }
}