:root,
:root[data-theme="dark"]{
  --faint:#8492a6;
}
:root[data-theme="light"]{
  --faint:#526174;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --faint:#526174;
  }
}
.kos-diagram-open,
.kos-screenshot-open,
.kos-diagram-reader button{
  min-height:44px; padding:8px 14px; border:1px solid var(--border);
  border-radius:8px; background:var(--surface); color:var(--ink,var(--text));
  font:inherit; font-size:14px; cursor:pointer;
}
.kos-diagram-open,.kos-screenshot-open{ display:block; margin:20px 0 8px; }
.kos-diagram-open + figure,.kos-screenshot-open + figure{ margin-top:8px; }
.kos-diagram-open:focus-visible,
.kos-screenshot-open:focus-visible,
.kos-diagram-reader :focus-visible{ outline:2px solid var(--accent,var(--mint)); outline-offset:3px; }
.kos-diagram-reader{
  width:calc(100vw - 32px); max-width:1500px; max-height:calc(100dvh - 32px);
  padding:20px; border:1px solid var(--border); border-radius:12px;
  color:var(--ink,var(--text)); background:var(--surface); overflow:auto;
}
.kos-diagram-reader[open]{ display:flex; flex-direction:column; gap:12px; }
.kos-diagram-reader::backdrop{ background:rgb(0 0 0 / .75); }
.kos-diagram-reader h2{ margin:0; font-size:20px; }
.kos-diagram-reader p{ margin:0; font-size:14px; line-height:1.5; }
.kos-diagram-toolbar{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.kos-diagram-toolbar h2{ flex:1; }
.kos-diagram-reader button:disabled{ opacity:.5; cursor:default; }
.kos-diagram-reader output{ font-size:14px; }
.kos-diagram-help{ color:var(--muted); }
.kos-diagram-viewport{
  overflow:auto; overscroll-behavior:contain; min-height:140px; padding:16px;
  border:1px solid var(--border); flex:1 1 auto;
}
.kos-diagram-viewport svg,.kos-diagram-viewport img{ display:block; max-width:none; min-width:0; height:auto; }
main figure.product-screenshot{ overflow:hidden; }
main figure.product-screenshot .figure-frame{ display:grid; min-height:0; }
/* No width here: the img's width attribute sizes it before it loads, so a lazy
   screenshot reserves its height instead of pushing later sections down. */
main figure.product-screenshot img{ display:block; max-width:100%; min-width:0; height:auto; margin-inline:auto; }
main figure.product-screenshot figcaption{ overflow-wrap:anywhere; }
@media screen{
  body:has(.kos-diagram-reader[open]){ overflow:hidden; }
}
@media print{
  .kos-diagram-open,.kos-screenshot-open,.kos-diagram-reader{ display:none !important; }
}
main p a,
main li a,
main td a,
main dd a{
  text-decoration:underline;
  text-decoration-thickness:.08em;
  text-underline-offset:.16em;
}

.kos-academy-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--ink-soft);
  background:var(--surface);
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}
.rail-head .kos-academy-link{
  width:100%;
  margin-top:14px;
}
.kos-academy-link:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.kos-learning-state{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  max-width:var(--content,1200px);
  margin:16px auto 0;
  padding:12px 16px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--muted);
  font-size:12.5px;
  font-weight:750;
}
.kos-learning-state button{
  min-height:36px;
  padding:0 13px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--ground);
  color:var(--ink-soft);
  font:inherit;
  cursor:pointer;
}
.kos-learning-state button[aria-pressed="true"]{
  border-color:var(--accent);
  color:var(--accent);
}
.kos-learning-state button:disabled{ cursor:wait; opacity:.6; }

/* Concept diagrams use the reading theme. Terminal contrast is reserved for
   executable code, so a light course no longer places every mental model in a
   dark code panel. */
.block > .diagram{
  border-color:var(--border) !important;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,var(--surface)) 0%,var(--surface) 58%,color-mix(in srgb,var(--signal,var(--accent)) 6%,var(--surface)) 100%) !important;
  color:var(--ink-soft,var(--text-soft)) !important;
  box-shadow:0 12px 30px -26px rgb(15 23 42 / .55);
}
.block > .diagram pre{
  border:0 !important;
  background:transparent !important;
  color:inherit !important;
}
.diagram + .copy-btn{ background:var(--surface) !important; }

.kos-concept-diagram{
  margin:22px 0;
  padding:clamp(18px,3vw,28px);
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 34%),
    var(--surface);
  box-shadow:var(--shadow,0 18px 50px -34px rgb(15 23 42 / .35));
}
.kos-concept-diagram figcaption{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:6px 18px;
  margin:0 0 20px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.5;
  text-align:left;
}
.kos-concept-diagram figcaption strong{ color:var(--ink,var(--text)); font-size:14px; }
.kos-pattern-map{ display:grid; gap:8px; }
.kos-pattern-row{
  display:grid;
  grid-template-columns:minmax(9rem,.58fr) minmax(0,1.42fr);
  align-items:center;
  gap:16px;
  padding:13px 15px;
  border:1px solid var(--border-soft,var(--border));
  border-radius:8px;
  background:color-mix(in srgb,var(--surface-2) 72%,transparent);
}
.kos-pattern-row strong{ color:var(--ink,var(--text)); font-size:13px; }
.kos-pattern-row span{ color:var(--muted); font-size:12.5px; line-height:1.55; }
.kos-flow{
  display:flex;
  align-items:stretch;
  gap:10px;
}
.kos-flow-step{
  display:flex;
  min-width:0;
  flex:1 1 0;
  flex-direction:column;
  justify-content:center;
  min-height:92px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
}
.kos-flow-step small{
  color:var(--accent);
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.kos-flow-step strong{ margin-top:5px; color:var(--ink,var(--text)); font-size:13px; line-height:1.4; }
.kos-flow-step span{ margin-top:4px; color:var(--muted); font-size:11.5px; line-height:1.45; }
.kos-flow-arrow{
  display:grid;
  width:24px;
  flex:0 0 24px;
  place-items:center;
  color:var(--accent);
  font-size:19px;
  font-weight:800;
}
.kos-workflow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;
  margin:0;
  padding:0;
  list-style:none;
}
.kos-workflow li{
  position:relative;
  min-width:0;
  margin:0;
  padding:16px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
}
.kos-workflow li + li::before{
  content:"→";
  position:absolute;
  top:50%;
  left:-24px;
  width:20px;
  color:var(--accent);
  font-size:19px;
  font-weight:800;
  text-align:center;
  transform:translateY(-50%);
}
.kos-workflow small{ color:var(--accent); font-size:10px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.kos-workflow strong{ display:block; margin-top:5px; color:var(--ink,var(--text)); font-size:13px; }
.kos-workflow span{ display:block; margin-top:6px; color:var(--muted); font-size:11.5px; line-height:1.5; overflow-wrap:anywhere; }
.kos-route-hub{ display:grid; gap:14px; }
.kos-route-source{ display:flex; align-items:center; justify-content:center; gap:10px; }
.kos-route-branch{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding-top:22px;
  border-top:1px solid color-mix(in srgb,var(--accent) 42%,var(--border));
}
.kos-route-branch div{ padding:14px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); text-align:center; }
.kos-route-branch strong{ display:block; color:var(--ink,var(--text)); font-size:13px; }
.kos-route-branch span{ color:var(--muted); font-size:11.5px; }

/* A diagram inside a two-column comparison has roughly half the reading
   measure available. Give each step a full line there so labels remain calm
   and scannable instead of being squeezed into narrow mini-columns. */
.grid-2 .kos-concept-diagram{ padding:18px; }
.grid-2 .kos-concept-diagram .kos-flow{ flex-direction:column; }
.grid-2 .kos-concept-diagram .kos-flow-step{
  min-height:0;
  flex:0 0 auto;
}
.grid-2 .kos-concept-diagram .kos-flow-arrow{
  width:auto;
  height:20px;
  flex-basis:20px;
  transform:rotate(90deg);
}
.grid-2 .kos-concept-diagram .kos-route-branch{ grid-template-columns:1fr; }

@media screen and (max-width:760px){
  .kos-pattern-row{ grid-template-columns:1fr; gap:5px; }
  .kos-flow{ flex-direction:column; }
  .kos-flow-arrow{ width:auto; height:22px; flex-basis:22px; transform:rotate(90deg); }
  .kos-workflow{ grid-template-columns:1fr; gap:28px; }
  .kos-workflow li + li::before{ content:"↓"; top:-27px; left:50%; width:auto; transform:translateX(-50%); }
  .kos-route-branch{ grid-template-columns:1fr; }
}
.kos-outcome-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:22px 0;
}
.kos-outcome{
  min-width:0;
  padding:16px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
}
.kos-outcome strong{
  display:block;
  margin-bottom:7px;
  color:var(--ink);
  font-size:14px;
}
.kos-outcome span{
  color:var(--muted);
  font-size:12.5px;
  line-height:1.55;
}
.kos-evidence-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin:22px 0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--border);
}
.kos-evidence-strip > div{
  min-width:0;
  padding:18px;
  background:var(--surface);
}
.kos-evidence-strip b{
  display:block;
  margin-bottom:6px;
  color:var(--accent);
  font-size:20px;
}
.kos-evidence-strip span{
  color:var(--muted);
  font-size:12.5px;
  line-height:1.5;
}
.kos-lab{
  margin:24px 0 34px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 42%,var(--border));
  border-radius:8px;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.kos-lab.kos-challenge{
  border-color:color-mix(in srgb,var(--amber) 55%,var(--border));
}
.kos-challenge .kos-lab-kicker{
  color:var(--amber);
}
.kos-lab-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:20px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.kos-lab-kicker{
  margin:0 0 7px;
  color:var(--accent);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.kos-lab h3{
  margin:0;
  color:var(--ink);
  font-size:20px;
}
.kos-lab-head p:not(.kos-lab-kicker){
  max-width:720px;
  margin:8px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}
.kos-lab-head p.kos-lab-predict{
  margin-top:12px;
  padding:8px 12px;
  border-left:3px solid var(--accent);
  border-radius:0 6px 6px 0;
  background:var(--surface);
  color:var(--ink-soft);
}
.kos-lab-predict strong{
  margin-right:4px;
  color:var(--ink);
}
.kos-lab-actions{
  display:flex;
  flex:0 0 auto;
  flex-wrap:wrap;
  gap:8px;
}
.kos-lab-button,
.kos-source-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 13px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--ink-soft);
  font:inherit;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}
.kos-lab-button[data-primary]{
  border-color:var(--accent);
  background:var(--accent);
  color:var(--accent-ink,#0f172a);
}
.kos-lab-button:hover,
.kos-source-link:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.kos-lab-button[data-primary]:hover{
  color:var(--accent-ink,#0f172a);
  filter:brightness(1.08);
}
.kos-lab-button:disabled{
  cursor:wait;
  opacity:1;
}
.kos-lab-button[data-primary]:disabled{
  border-color:var(--border);
  background:var(--surface-2);
  color:var(--muted);
}
.kos-lab-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(18rem,.85fr);
  gap:1px;
  background:var(--border);
}
.kos-lab-pane{
  min-width:0;
  padding:16px;
  background:var(--ground);
}
.kos-lab-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
  color:var(--ink-soft);
  font-size:11px;
  font-weight:800;
}
.kos-lab-label span:last-child{
  color:var(--faint);
  font-weight:700;
}
.kos-editor,
.kos-output{
  display:block;
  box-sizing:border-box;
  width:100%;
  min-height:31rem;
  margin:0;
  padding:16px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:8px;
  background:#070c14;
  color:#dbeafe;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:12.5px;
  line-height:1.65;
  tab-size:4;
  white-space:pre;
}
.kos-editor{
  resize:vertical;
  outline:none;
}
.kos-editor:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.kos-output{
  white-space:pre-wrap;
}
.kos-output[data-state="success"]{
  border-color:#34d399;
  color:#d1fae5;
}
.kos-output[data-state="error"]{
  border-color:#fb7185;
  color:#ffe4e6;
}
.kos-lab-foot{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  border-top:1px solid var(--border);
  background:var(--border);
}
.kos-lab-foot > div{
  min-width:0;
  padding:14px 16px;
  background:var(--surface);
}
.kos-lab-foot strong{
  display:block;
  margin-bottom:5px;
  color:var(--ink-soft);
  font-size:11px;
}
.kos-lab-foot span{
  color:var(--muted);
  font-size:11.5px;
  line-height:1.5;
}
.kos-checklist{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:18px 0 26px;
}
.kos-check{
  padding:17px;
  border-left:3px solid var(--accent);
  background:var(--surface-2);
}
.kos-check strong{
  display:block;
  margin-bottom:7px;
  color:var(--ink);
}
.kos-check p{
  margin:0;
  font-size:13px;
}
.kos-review{
  margin:12px 0;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
}
.kos-review summary{
  padding:15px 17px;
  color:var(--ink-soft);
  font-weight:800;
  cursor:pointer;
}
.kos-review div{
  padding:0 17px 16px;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}
.kos-reference-list{
  display:grid;
  gap:10px;
  margin:20px 0;
  padding:0;
  list-style:none;
}
.kos-reference-list li{
  padding:15px 17px;
  border-left:3px solid var(--border);
  background:var(--surface-2);
}
.kos-reference-list a{
  color:var(--ink-soft);
  font-weight:800;
}
.kos-reference-list p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.55;
}
.kos-architecture{
  margin:22px 0;
  padding:16px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
}
.kos-architecture svg{
  display:block;
  width:100%;
  min-width:680px;
  height:auto;
  margin:0 auto;
}
.kos-architecture figcaption{
  margin-top:12px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}
pre[tabindex]:focus-visible,
.diagram[tabindex]:focus-visible,
.table-wrap[tabindex]:focus-visible,
figure[tabindex]:focus-visible,
.figure-frame[tabindex]:focus-visible,
.kos-architecture[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.kos-course-footer{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
  margin-top:48px;
  padding:28px 0 64px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:12.5px;
}
.kos-course-footer strong,
.kos-course-footer span{
  display:block;
}
.kos-course-footer strong{
  max-width:36rem;
  color:var(--ink);
  font-size:14px;
}
.kos-course-footer span{
  margin-top:4px;
}
.kos-course-footer nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px 18px;
}
.kos-course-footer a{
  color:var(--ink-soft);
  font-weight:800;
  text-decoration:none;
}
.kos-course-footer a:hover{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}
@media screen and (max-width:980px){
  .kos-outcome-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kos-lab-grid{ grid-template-columns:1fr; }
  .kos-editor,.kos-output{ min-height:24rem; }
}
@media screen and (max-width:780px){
  .table-wrap table{
    display:table;
    overflow:visible;
  }
}
@media screen and (max-width:680px){
  .kos-academy-link{ min-width:38px; padding:0 10px; }
  .kos-academy-link span{ display:none; }
  .kos-outcome-grid,
  .kos-evidence-strip,
  .kos-checklist,
  .kos-lab-foot{ grid-template-columns:1fr; }
  .kos-lab-head{ flex-direction:column; }
  .kos-lab-actions{ width:100%; }
  .kos-lab-button,.kos-source-link{ flex:1 1 auto; }
  .kos-editor,.kos-output{ min-height:22rem; font-size:11.5px; }
  .kos-course-footer{
    flex-direction:column;
    padding-bottom:48px;
  }
  .kos-course-footer nav{
    justify-content:flex-start;
  }
  .kos-learning-state{ margin-inline:12px; }
}
@media print{
  .kos-lab-actions,.kos-editor{ display:none !important; }
  .kos-lab-grid{ display:block; }
  .kos-output{ min-height:0; color:#111; background:#f4f4f5; }
  /* .kos-architecture svg carries an unconditional min-width:680px for the on-screen
     pan. With the frame's 16px padding that is 712px inside a ~701px A4 text column,
     so the right edge was sliced off on paper. */
  .kos-architecture{ overflow:visible; padding:6px; }
  .kos-architecture svg{ min-width:0; max-width:100%; }
}