@font-face{font-family:Inter;src:url("/assets/fonts/inter-latin-variable.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
/* Cloudflare Developers reference, measured 2026-10-15.
   Preserve larger study text and 44px controls. Screen only: print stays ink-friendly. */
@media screen {
  :root,[data-theme="kujo-dark"] {
    --bg:oklch(19.2% 0 0);--panel:#151414;--panel2:oklch(26.9% 0 0);
    --line:oklch(28.5% 0 0);--text:oklch(92.5% .016 42.4);--muted:oklch(70.8% 0 0);
    --orange:#ff8554;--orange-bg:oklch(23% .035 50);--brand-orange:#ff5e1f;
    --sidebar-width:18.75rem;--header-height:3.5625rem;
  }
  [data-theme="kujo-light"] {
    --bg:oklch(99% 0 0);--panel:#fff;--panel2:oklch(96.7% 0 0);
    --line:oklch(92% 0 0);--text:oklch(21% 0 0);--muted:oklch(50% 0 0);
    --orange:#b43b0c;--orange-bg:oklch(96.5% .025 55);
  }
  body{font-size:1rem;line-height:1.75}
  h1{overflow-wrap:anywhere;font-size:2.1875rem;line-height:1.25;letter-spacing:-.035em;font-weight:600}
  h2{font-size:1.375rem;line-height:1.6;letter-spacing:-.02em;font-weight:600}
  h3{font-weight:600}.lesson{font-size:1.125rem;line-height:1.75}
  .sidebar{width:var(--sidebar-width);top:var(--header-height);padding:24px 20px;background:var(--bg)}
  .shell{margin-left:var(--sidebar-width);padding-top:var(--header-height)}
  .topbar{position:fixed;inset:0 0 auto;height:var(--header-height);min-height:var(--header-height);padding:0 24px;gap:24px;z-index:25}
  .topbar .brand{flex:0 0 calc(var(--sidebar-width) - 24px);margin:0;font-size:1.25rem;line-height:1.15;letter-spacing:-.025em}
  .brand small{font-size:.75rem;line-height:1.3;margin-top:3px}
  .breadcrumb{margin-right:auto}.header-actions{width:auto;gap:12px;margin-left:auto}
  .search-box{border-radius:8px;padding:0 10px;min-height:44px}
  .search-box input{width:220px;font-size:.875rem}
  .search-results{top:calc(var(--header-height) + 8px)}
  #workspace-nav{gap:4px}#workspace-nav a{font-size:1rem;line-height:1.5;padding:10px 12px;border-radius:8px}
  #workspace-nav a.active{background:var(--panel2);color:var(--text);font-weight:600}
  .command-link{background:transparent;border-color:var(--line);border-radius:8px;color:var(--text);font-size:.875rem;font-weight:600}
  .command-link:hover{background:var(--panel2);color:var(--text)}
  #main{padding:40px 40px 48px;max-width:1440px}
  .page-head p{line-height:1.75}.lesson-layout{gap:40px}
  .lesson-aside{top:calc(var(--header-height) + 24px);background:transparent;border:0;padding:0}
  button.sk-button,.button{border-radius:8px;padding:9px 16px;min-height:44px;font-weight:600;text-transform:none;letter-spacing:normal;background:var(--bg);box-shadow:none}
  button.sk-button:hover,.button:hover{background:var(--panel2);border-color:var(--muted);color:var(--text)}
  button.primary,.button.primary{background:var(--brand-orange);border-color:var(--brand-orange);color:#171717}
  button.primary:hover,.button.primary:hover{background:#ff814f;border-color:#ff814f;color:#171717}
  .icon-button{border-radius:8px;width:44px;height:44px}
  .icon-button:hover{background:var(--panel2);color:var(--text)}
  input,select,textarea{border-radius:8px}
  .search-box input{border:0}
  .continue-card,.command-hero{background:var(--orange-bg);border-color:var(--line);border-radius:8px}
  .continue-card:after{display:none}
  .sk-card,.stats,.module-list,.quiz,.diagram,.flashcard{border-radius:8px;box-shadow:none}
  .tag.orange{border-color:var(--line)}
  .dashboard-hero{gap:32px}.dashboard-hero .stat strong{font-weight:600}
  .section-heading h2,.side-stack h2{font-size:1.125rem}
  .lesson li{color:var(--text)}
  :target{scroll-margin-top:calc(var(--header-height) + 24px)}
  @media(max-width:1200px){.breadcrumb{display:none}#main{padding:32px 28px}.lesson-aside{position:static}}
  @media(max-width:1000px){
    .sidebar{transform:translateX(-100%);visibility:hidden;width:min(var(--sidebar-width),90vw)}
    .sidebar.open{transform:translateX(0);visibility:visible;box-shadow:0 0 0 100vw #0008}
    .shell{margin-left:0}.mobile-menu{display:block;order:-1}
    .topbar{gap:12px;padding:0 16px}.topbar .brand{flex:0 1 auto}
  }
  @media(max-width:600px){
    :root{--header-height:7rem}
    .topbar{flex-wrap:wrap;align-content:center;gap:6px 12px;padding:6px 16px}
    .topbar .brand{flex:1}.header-actions{flex:1 0 100%;gap:12px}
    .search-box{flex:1;max-width:none;min-width:0}.search-box input{width:100%}
    #main{padding:28px 18px 38px}h1{font-size:2rem}
    .search-results{left:12px;right:12px}.dashboard-hero{gap:24px}
  }
}

/* A full-width, compact next-lesson CTA with room for the lesson title. */
@media screen {
  .continue-card{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:0;padding:24px 28px}
  .continue-copy{min-width:0}.continue-card .eyebrow{margin-bottom:8px}
  .continue-card h2{max-width:none;line-height:1.4}
  .continue-card .button{flex-shrink:0;white-space:nowrap}
  @media(max-width:1300px){.continue-card{flex-wrap:wrap}}
  @media(max-width:600px){.continue-card{padding:22px;gap:18px}.continue-card .button{width:100%}}
}

/* Shared sidebar interview briefing; the entire card links to Command Center. */
@media screen {
  .sidebar-interview{padding:18px 16px;flex-shrink:0}
  .sidebar-interview h2{font-size:1rem;line-height:1.45;letter-spacing:-.015em}
  .sidebar-interview p{font-size:.875rem;line-height:1.65;font-weight:400;margin:8px 0 14px}
  .sidebar-interview>.sidebar-interview-action{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;font-size:.875rem;line-height:1.5;color:var(--orange)}
}

/* Inner-page rhythm. External classes work with the local server's strict CSP. */
.space-before{margin-top:24px}.space-before-sm{margin-top:16px}.space-after{margin-bottom:24px}
.space-block{margin:24px 0}.space-block-sm{margin:16px 0}.form-help{font-size:.875rem;margin:12px 0}
.capstone-stages{counter-reset:step}
@media screen {
  /* SiteKit treats any final card div as an action row. Only actual actions are rows here. */
  .sk-card>div:last-child:not(.actions):not(.grid):not(.stack){display:block}
  .grid,.stack,.grid>*{min-width:0}.grid{gap:24px}.grid>details{align-self:start}
  .sk-card{padding:24px}.sk-card.lesson>h2:first-child{margin-top:0}
  .sk-card>h2+p,.sk-card>h3+p{margin-top:8px}
  .sk-card>label{margin-top:20px}
  #main label>input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #main label>select,#main label>textarea{display:block;width:100%;margin-top:8px}
  .toolbar{gap:16px;margin:24px 0;align-items:end}
  .toolbar label{min-width:0;flex:1 1 200px}
  .toolbar input,.toolbar select{height:48px;min-width:0}
  #main details:not(.module-disclosure){border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:0;margin:20px 0;min-width:0}
  #main :is(.grid,.stack)>details{margin:0}
  #main details>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;min-height:52px;padding:16px 20px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
  #main details>summary::-webkit-details-marker{display:none}
  #main details>summary::marker{content:''}
  #main details>summary:hover{background:var(--panel2);border-radius:7px}
  #main details[open]:not(.module-disclosure)>summary{border-bottom:1px solid var(--line)}
  .disclosure-chevron{flex-shrink:0;transition:transform .15s}
  details[open]>summary>.disclosure-chevron{transform:rotate(90deg)}
  #main details:not(.module-disclosure)>:not(summary){margin-left:20px;margin-right:20px}
  #main details[open]:not(.module-disclosure)>summary+*{margin-top:20px}
  #main details[open]:not(.module-disclosure)>:last-child{margin-bottom:20px}
  #main .module-disclosure{margin:0 0 24px;border:0;padding:0;background:transparent}
  #main .module-disclosure>summary{padding:8px 0;min-height:44px;font-size:.875rem;border:0}
  #main .module-disclosure>summary:hover{background:transparent;color:var(--orange)}
  .question-card+.question-card{margin-top:16px}
  .question-detail{display:block;line-height:1.75}
  .question-detail h4{margin-top:24px;font-size:1rem}.question-detail h4:first-child{margin-top:0}
  .question-detail p{margin:8px 0 16px}.question-detail ul{margin:8px 0 20px;padding-left:24px}
  .question-detail li{margin:6px 0}.question-card .tags{display:flex;gap:8px;flex-wrap:wrap}
  .story textarea{min-height:240px}
  #term-results,.grid:has(>details){gap:12px 20px}
  #term-results summary,.grid>details>summary{font-size:1rem}
  #term-results p,.grid>details>p{font-size:1rem;line-height:1.75}
  .quiz{padding:24px}.quiz>p{margin:8px 0 24px}
  .quiz fieldset+fieldset{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
  .quiz legend{line-height:1.6;padding:0;max-width:100%}
  .quiz label{margin:10px 0;padding:14px 16px;line-height:1.6}
  .quiz .feedback:empty,.quiz-score:empty{display:none}
  .quiz .feedback:not(:empty){margin:16px 0 0}.quiz-score:not(:empty){margin:20px 0 0}
  .quiz .actions{margin-top:24px}
  .lab-evidence button{white-space:normal;text-align:left;line-height:1.6}
  .lab-evidence button[aria-expanded="true"]{border-radius:8px 8px 0 0}
  .lab-evidence .observation{border-radius:0 0 8px 8px;padding:20px}
  .lab-evidence .observation>p{margin-top:16px}
  #lab-solution{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
  #lab-solution h3:first-child{margin-top:0}#lab-solution h3{margin:24px 0 8px}
  .branch-feedback h4,.branch-feedback label{margin-top:20px}.branch-feedback p{margin-top:8px}
  .lesson-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .lesson-nav .button{justify-content:flex-start;text-align:left;white-space:normal;line-height:1.5}
  .lesson-nav .button:last-child{justify-content:flex-end;text-align:right}
  .lesson-aside{max-height:calc(100vh - var(--header-height) - 48px);overflow-y:auto;scrollbar-gutter:stable}
  .lesson-aside>a{font-size:.875rem;line-height:1.5;padding:8px 0}
  .product-card dl{grid-template-columns:minmax(140px,180px) minmax(0,1fr);gap:16px 24px;margin:24px 0}
  .product-card :is(dt,dd){min-width:0;overflow-wrap:anywhere}
  .ref-table{width:100%;line-height:1.7}.ref-table th{width:28%}
  .diagram-flow{margin:16px 0 8px}.diagram-detail{padding-top:20px;line-height:1.75}
  .checklist input{flex:0 0 auto}.checklist label{line-height:1.65}
  @media(max-width:1200px){.lesson-aside{max-height:none;overflow:visible}.lesson-aside:has(.module-disclosure)>a{display:inline-block;margin-right:16px}}
  @media(max-width:760px){
    .sk-card,.quiz{padding:20px}.grid{gap:20px}.toolbar{gap:16px}.toolbar label{flex-basis:100%}
    .toolbar>.sk-button{width:100%}.lesson-nav{grid-template-columns:1fr}
    .product-card dl{grid-template-columns:1fr;gap:8px}.product-card dd{margin-bottom:16px}
    #main details>summary{padding:16px;font-size:1rem}
    #main details:not(.module-disclosure)>:not(summary){margin-left:16px;margin-right:16px}
    .quiz label{padding:12px}.lab-evidence .observation{padding:16px}
    .diagram-node{overflow-wrap:anywhere}
  }
}
@media screen {
  .evidence-chevron{flex-shrink:0;transition:transform .15s}
  [data-evidence][aria-expanded="true"]>.evidence-chevron{transform:rotate(90deg)}
  @media(prefers-reduced-motion:reduce){.evidence-chevron,.disclosure-chevron{transition:none}}
}
@media screen {
  .lesson-aside.sk-card{padding:0}
  .lesson-aside>a{margin-top:0}
  @media(max-width:600px){
    .ref-table,.ref-table tbody{display:block}
    .ref-table tr{display:block;padding:16px 0;border-bottom:1px solid var(--line)}
    .ref-table th,.ref-table td{display:block;width:100%;border:0;padding:0;overflow-wrap:anywhere}
    .ref-table td{margin-top:8px}
  }
}
@media screen {
  html{scroll-padding-top:calc(var(--header-height) + 16px)}
  #main :is(summary,input,textarea,select,button){scroll-margin-top:calc(var(--header-height) + 16px);scroll-margin-bottom:24px}
}
@media screen {
  .sk-card.lesson>.eyebrow+h2{margin-top:12px}
  .quiz>h2{margin-top:0}
}

/* Study progress reports recorded activity without a weighted readiness score. */
.study-progress-item{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.study-progress-item h3{font-size:1rem;line-height:1.4}
.study-progress-item progress{margin:10px 0}
.side-stack .study-progress-item p{margin-top:6px}
.side-stack .study-progress-note{margin-top:24px}

/* Context stays beside an answer without competing with the study controls. */
.source-notes { margin-block: 1rem; font-size: 1rem; }
.source-notes ul { padding-inline-start: 1.4rem; }
.source-notes li + li { margin-top: .5rem; }
.source-notes a { overflow-wrap: anywhere; }
.feedback .source-notes { color: var(--text); }

.study-storage-note{margin:1.25rem 0 2rem;color:var(--muted);line-height:1.65}
.study-storage-note a{color:var(--orange);text-decoration:underline;text-underline-offset:.2em}
/* WebKit can paint a long selected option beyond a narrow native menu. */
.toolbar select{width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Keep practice tools alongside the path; give recorded progress room below it. */
.dashboard-practice{min-width:0}
.dashboard-practice .quick-tools{grid-template-columns:minmax(0,1fr);gap:16px}
.dashboard-study-progress{margin-top:28px}
.dashboard-study-progress>p{margin-top:8px}
.study-progress-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.dashboard-study-progress .study-progress-item{min-width:0}
.dashboard-study-progress .study-progress-item p{margin-top:6px}
.dashboard-study-progress .study-progress-note{margin-top:24px}
@media(max-width:760px){.study-progress-grid{grid-template-columns:minmax(0,1fr)}}

/* Match document, sidebar, editor and code scrolling to the active theme. */
@media screen and (forced-colors:none){
  :root,[data-theme="kujo-dark"]{color-scheme:dark}
  [data-theme="kujo-light"]{color-scheme:light}
  *{scrollbar-color:var(--orange) var(--panel2);scrollbar-width:auto}
  ::-webkit-scrollbar{width:14px;height:14px}
  ::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:var(--panel2)}
  ::-webkit-scrollbar-thumb{background:var(--orange);border:3px solid var(--panel2);border-radius:999px}
  ::-webkit-scrollbar-thumb:hover{background:var(--text)}
  #main pre{
    max-width:100%;min-width:0;margin:20px 0;padding:20px;
    background:var(--panel2);color:var(--text);
    border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:8px;
    font-family:var(--sk-font-mono);font-size:1rem;line-height:1.7;
    tab-size:2;white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto;
  }
  #main pre code{font:inherit;color:inherit;background:transparent;border:0;border-radius:0;padding:0}
  #main :not(pre)>code{background:var(--orange-bg);color:var(--orange);padding:.12em .35em;border-radius:4px;font-size:.95em;overflow-wrap:anywhere;box-decoration-break:clone;-webkit-box-decoration-break:clone}
  #main pre .code-keyword{color:var(--orange)}
  #main pre .code-string{color:var(--text)}
  #main .lab-evidence pre{margin-top:0}
  @media(max-width:760px){#main pre{padding:16px}}
}