.course-shell { --cool:#597d90; --cool-soft:color-mix(in srgb,var(--cool) 14%,var(--bg)); max-width:1240px; }
.course-shell .app-intro { padding:46px 0 30px; }
.course-shell .app-intro h1 { font-size:clamp(32px,4.3vw,56px); }
.course-shell .app-intro p { max-width:690px; }
.course-links { display:flex; gap:18px; flex-wrap:wrap; padding:18px 0; border-bottom:1px solid var(--line); font-size:13px; }
.course-links a { text-decoration:none; }
.lab-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.lab-tabs a { padding:10px 16px; border:1px solid var(--line); text-decoration:none; font-size:14px; }
.lab-tabs [aria-current] { background:var(--text); color:var(--bg); }
.lab-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding:22px 0; }
.lab-heading h2 { font:normal 30px/1.2 var(--serif); margin:10px 0; }
.lab-heading p { margin:0; color:var(--muted); font-size:14px; }
.lab-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.lab-main { min-width:0; padding:24px 26px 24px 0; }
.lab-inputs { display:flex; gap:12px; flex-wrap:wrap; align-items:end; margin-bottom:24px; }
.course-field { display:flex; flex-direction:column; gap:8px; font-size:12px; flex:1 1 140px; }
.course-field input,.course-field select { min-height:44px; padding:10px; width:100%; box-sizing:border-box; font-size:15px; }
.course-shell button { background:transparent; color:var(--text); border:1px solid var(--line); min-height:44px; padding:10px 14px; cursor:pointer; font:inherit; font-size:13px; border-radius:0; }
.course-shell button:disabled { cursor:not-allowed; }
.course-shell button.accent { background:var(--text); color:var(--bg); }
.lab-sidebar { border-left:1px solid var(--line); padding:18px; min-width:0; }
.lab-sidebar section { padding:20px 0; border-bottom:1px solid var(--line); }
.lab-sidebar h3 { font-size:13px; margin:0 0 10px; font-weight:500; }
.lab-sidebar p { font-size:14px; line-height:1.7; }
.lab-sidebar details { padding:18px 0; border-bottom:1px solid var(--line); }
.course-shell summary { cursor:pointer; font-size:14px; }
.course-shell details p { color:var(--muted); }
.keyboard-note { color:var(--muted); font-size:12px!important; }
.current-message { margin:0; }
.sort-bars { display:grid; grid-auto-columns:minmax(0,1fr); grid-auto-flow:column; align-items:end; gap:7px; padding:20px 0; min-height:250px; }
.sort-bars > div { display:flex; flex-direction:column; align-items:center; gap:8px; font-variant-numeric:tabular-nums; }
.sort-bars .bar { width:100%; background:var(--line); }
.sort-bars .active .bar { background:var(--cool); }
.sort-bars small { color:var(--muted); font-size:11px; }
.bar-value { font-size:14px; }
.lab-metrics { display:flex; gap:30px; border-top:1px solid var(--line); padding-top:18px; color:var(--muted); font-size:13px; }
.lab-metrics b { color:var(--text); font-size:22px; font-weight:400; margin-left:10px; }
.parent-links { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.parent-links > div { border:1px solid var(--line); padding:18px 12px; display:flex; justify-content:space-between; gap:8px; }
.parent-links .active,.replicas .active { border-color:var(--cool); background:var(--cool-soft); }
.parent-links span { color:var(--muted); }
.component-groups { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 24px; }
.component-groups > div { border-left:2px solid var(--cool); padding:5px 16px; }
.component-groups p { margin:6px 0; }
.component-groups small,.visual-caption { color:var(--muted); font-size:12px; }
.process-headings,.event-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.process-headings > div { display:flex; flex-direction:column; gap:5px; padding:12px 8px; border-top:2px solid var(--cool); font-size:13px; }
.clock-events { background:linear-gradient(90deg,transparent 33.2%,var(--line) 33.2%,var(--line) 33.4%,transparent 33.4%,transparent 66.5%,var(--line) 66.5%,var(--line) 66.7%,transparent 66.7%); }
.clock-event { display:flex; flex-direction:column; font-size:12px; padding:10px; margin:8px 0; gap:4px; border:1px solid var(--line); background:var(--bg); }
.clock-event b { color:var(--cool); }
.event-comparison { margin-top:24px; border-top:1px solid var(--line); padding-top:18px; }
.event-comparison .lab-inputs { margin-top:16px; }
.replicas { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin:20px 0; }
.replicas button { display:flex; flex-direction:column; gap:10px; text-align:left; padding:18px 12px; }
.replicas b { font-weight:400; }
.replicas small { font-size:11px; color:var(--muted); }
.replicas .offline { border-style:dashed; opacity:.55; }
.quorum-rules > div { padding:14px 0; border-top:1px solid var(--line); font-size:13px; }
.quorum-rules dt { color:var(--muted); }
.quorum-rules dd { margin:6px 0 0; }
.reading-guide { padding-top:64px; scroll-margin-top:20px; }
.reading-guide > header { margin-bottom:32px; max-width:740px; }
.reading-guide h2 { font-size:32px; }
.course-context { color:var(--muted); font-size:14px; }
.chapter { display:grid; grid-template-columns:1fr 1.6fr; gap:32px; border-top:1px solid var(--line); padding:26px 0; }
.chapter h3 { font:normal 23px var(--serif); margin:12px 0; }
.chapter p { font-size:14px; margin:0 0 16px; }
.chapter nav { display:flex; flex-wrap:wrap; gap:18px; font-size:13px; margin-top:20px; }
.input-error { border-left:2px solid var(--cool); padding:12px; }
@media(max-width:800px){
 .course-shell { padding-bottom:145px; }
 .lab-layout { display:block; }
 .lab-main { padding:20px 0; }
 .lab-sidebar { border-left:0; padding:0; }
 .course-shell .playback-dock { position:fixed; bottom:0; left:0; right:0; padding:12px 18px max(12px,env(safe-area-inset-bottom)); background:var(--bg); border-top:1px solid var(--line); z-index:20; }
 .course-shell .playback-dock > * { max-width:520px; margin-left:auto; margin-right:auto; }
 .chapter { grid-template-columns:1fr; gap:10px; }
 .lab-heading > .app-eyebrow { display:none; }
 .course-field input,.course-field select { font-size:16px; }
 .sort-bars { gap:4px; }
 .bar-value { font-size:12px; }
 .parent-links { gap:6px; }
 .parent-links > div { flex-direction:column; padding:12px; }
}
/* Each example has inputs, observable state, playback, and optional explanation. */
.course-shell .compact-intro { padding:26px 0 18px; }
.course-shell .compact-intro h1 { font-size:clamp(26px,3vw,38px); margin:8px 0; }
.lab-picker { display:flex; align-items:end; gap:20px; padding:0 0 24px; font-size:13px; }
.lab-picker .course-field { flex:0 1 360px; }
.state-cells { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 24px; }
.state-cells > div { min-width:46px; border:1px solid var(--line); text-align:center; padding:8px; display:flex; flex-direction:column; gap:8px; }
.state-cells small { color:var(--muted); font-size:11px; }
.state-cells b { font-size:19px; font-weight:500; }
.state-cells .active { background:var(--cool-soft); border-color:var(--cool); }
.state-diagram { width:100%; height:auto; max-height:420px; display:block; overflow:visible; margin:20px 0; }
.state-diagram line { stroke:var(--line); stroke-width:2; }
.state-diagram circle { fill:var(--bg); stroke:var(--muted); stroke-width:1.5; }
.state-diagram text { fill:var(--text); text-anchor:middle; font:15px var(--sans); }
.state-diagram .edge-label,.state-diagram .node-status { font-size:12px; fill:var(--muted); paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round; }
.state-diagram .active-node circle { stroke:var(--cool); stroke-width:3; fill:var(--cool-soft); }
.state-diagram .selected-edge line { stroke:var(--cool); stroke-width:4; }
.state-metrics { display:flex; flex-wrap:wrap; gap:20px; padding:18px 0; border-block:1px solid var(--line); }
.state-metrics dt { color:var(--muted); font-size:12px; }
.state-metrics dd { margin:6px 0 0; font-size:23px; font-variant-numeric:tabular-nums; }
.state-table-wrap { max-width:100%; overflow-x:auto; margin-top:24px; }
.state-table { width:100%; border-collapse:collapse; font-size:13px; }
.state-table td,.state-table th { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.state-table th { color:var(--muted); font-size:11px; font-weight:500; }
.state-table tbody tr:last-child { background:var(--cool-soft); }
.ready-state { text-align:center; padding:45px 12px; font:28px var(--serif); color:var(--muted); }
.ready-state span { display:block; font:13px var(--sans); margin-top:12px; }
.course-lab { scroll-margin-top:16px; }
@media(min-width:801px){ .lab-sidebar { align-self:start; position:sticky; top:16px; } }
@media(max-width:600px){ .lab-picker { flex-wrap:wrap; gap:14px; } .lab-picker .course-field { flex-basis:100%; } .state-table td,.state-table th { padding:9px 6px; font-size:12px; } .state-diagram { min-height:180px; } }
.service-nodes { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; margin:22px 0; }
.service-nodes > div { border:1px solid var(--line); padding:16px 12px; min-height:95px; display:flex; flex-direction:column; gap:15px; }
.service-nodes span { font-size:12px; color:var(--muted); }
.service-nodes b { font:normal 19px/1.4 var(--serif); }
.service-nodes .active { border-color:var(--cool); background:var(--cool-soft); }
.message-routes { display:flex; flex-wrap:wrap; gap:10px 24px; border-left:2px solid var(--cool); padding-left:14px; margin:20px 0; }
.message-routes p { font-size:13px; margin:0; }
.message-routes small { display:block; color:var(--muted); margin-top:4px; }
.message-routes span { color:var(--cool); margin:0 8px; }
.reading-guide { padding-top:28px; }
.reading-guide > details > summary { font:normal 22px var(--serif); padding:12px 0; }
.reading-guide > details > header { max-width:740px; padding:24px 0; }
@media(max-width:600px){
 .state-diagram text { font-size:25px; }
 .state-diagram .edge-label { font-size:23px; }
 .state-diagram circle { r:30px; }
}