.foundation-nav { position:sticky; top:var(--header-h); z-index:40; display:flex; flex-wrap:wrap; gap:8px; padding-block:12px; background:rgba(245,245,247,.92); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.foundation-nav a { padding:7px 12px; border:1px solid var(--line); border-radius:var(--r-pill); font-size:11px; color:var(--ink-2); background:var(--surface); text-decoration:none; }
.foundations [id] { scroll-margin-top:calc(var(--header-h) + 76px); }
@media (max-width: 880px) {
  .foundation-nav { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .foundation-nav::-webkit-scrollbar { display:none; }
  .foundation-nav a { flex:none; }
}
.lab-section { scroll-margin-top:90px; }
.lesson-stage { min-height:330px; padding:32px; border:1px solid var(--line); border-radius:var(--r-lg); background:radial-gradient(100% 100% at 50% 0%,#25252c,#111114); color:#f5f5f7; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lesson-stage > * { min-width:0; width:100%; }
.lesson-visual-stack { display:flex; flex-direction:column; gap:22px; }
.lesson-property-space { display:grid; place-items:center; min-height:250px; }
.lesson-property-tile { display:grid; place-items:center; width:95px; height:95px; border-radius:24px; background:linear-gradient(145deg,#b9d9ff,#6e9ae2); color:#142a45; font-size:34px; font-weight:600; position:relative; }
.lesson-property-tile::after { content:""; position:absolute; left:var(--anchor-x,50%); top:var(--anchor-y,50%); width:5px; height:5px; border-radius:50%; background:#254f8c; }
.lesson-section .lab-controls { font-size:13px; }
.lesson-select { display:flex; flex-direction:column; gap:8px; }
.lesson-track-row { display:flex; flex-direction:column; gap:10px; }
.lesson-track-label { font:10px var(--font-mono); color:#b1b1bf; }
.lesson-track { position:relative; height:56px; background:#ffffff0a; border:1px solid #ffffff13; border-radius:12px; }
.lesson-dot { position:absolute; left:3px; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:7px; background:#83b7ff; }
.lesson-readout { color:#b4bfd5; font:11px/1.8 var(--font-mono); }
.lesson-graph { width:100%; height:auto; overflow:visible; }
.lesson-grid { stroke:#ffffff20; stroke-width:1; fill:none; }
.lesson-position-curve { fill:none; stroke:#7db1ff; stroke-width:3; }
.lesson-speed-curve { fill:none; stroke:#c7a3ff; stroke-width:2; stroke-dasharray:4 3; }
.lesson-time-cursor { stroke:#ffffff66; stroke-width:1; }
.lesson-legend { font-size:10px; color:#adb9d1; }
.lesson-phase-space { display:grid; place-items:center; min-height:180px; }
.lesson-phase-tile,.lesson-a11y-card { padding:25px; border-radius:18px; background:#f1f3f9; color:#1d2434; display:flex; flex-direction:column; gap:10px; }
.lesson-phase-tile small,.lesson-a11y-card span { color:#596274; font-size:11px; }
.lesson-timeline { display:flex; flex-direction:column; gap:10px; }
.lesson-timeline-row { display:flex; gap:12px; font-size:10px; align-items:center; color:#a8aec0; }
.lesson-timeline-row > div { position:relative; flex:1; height:18px; border-radius:4px; background:#ffffff0c; overflow:hidden; }
.lesson-timeline-row i { position:absolute; top:3px; bottom:3px; background:#8caef5; border-radius:3px; }
.lesson-timeline-row:nth-child(2) i { background:#ad98ee; }.lesson-timeline-row:nth-child(3) i { background:#90cdb4; }
.lesson-pipeline { display:flex; gap:6px; flex-wrap:wrap; }.lesson-pipeline span { flex:1; min-width:50px; border:1px solid #ffffff16; border-radius:10px; padding:15px 5px; text-align:center; color:#727581; font-size:11px; }
.lesson-pipeline .is-active { background:#80acff1a; color:#aac9ff; border-color:#80acff66; }
.lesson-judgment { display:flex; flex-direction:column; gap:20px; text-align:center; padding:20px; align-items:center; }
.lesson-still-symbol { font-size:60px; font-weight:300; color:#9fb9e5; }.lesson-judgment p { max-width:35ch; font-size:12px; color:#aeb5c5; line-height:1.8; }
.lesson-link { color:var(--accent-ink); font-size:12px; }.lab-copy strong { color:var(--ink); }
.spring-terms { display:grid; gap:6px; padding:14px; border-radius:12px; background:var(--surface-3); font-size:11px; color:var(--ink-2); line-height:1.7; }
@media(max-width:620px) { .lesson-stage { padding:24px 18px; min-height:270px; } .lesson-property-tile { width:75px;height:75px; } }
.learning-path { padding-block:0 36px; }
.learning-path h2 { font-size:22px; margin-top:12px; }
.learning-path > p:last-child { font-size:12px; color:var(--ink-2); max-width:760px; margin-top:16px; line-height:1.8; }
.learning-path-steps { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.learning-path .lab-button { padding:10px 14px; font-size:11px; }
.practice-stage { min-height:390px; }
.practice-stack { display:flex; flex-direction:column; gap:22px; width:100%; }
.practice-actions { display:flex; flex-wrap:wrap; gap:8px; }
.practice-stage .lab-button { background:#ffffff10; color:#f5f5f7; border-color:#ffffff32; font-size:12px; }
.practice-stage .lab-button:hover { background:#ffffff20; }
.practice-stage .lab-button:disabled { opacity:.45; cursor:default; }
.practice-kicker { font:10px var(--font-mono); color:#a7b7d3; }
.practice-clock-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.practice-clock-grid > div { padding:12px; border:1px solid #ffffff20; border-radius:12px; display:flex; flex-direction:column; gap:9px; min-width:0; }
.practice-clock-grid span { color:#a5afc1; font-size:10px; }.practice-clock-grid strong { font-size:12px; overflow-wrap:anywhere; }
.practice-state-tile { border:1px solid #9dbeff55; border-radius:16px; background:#8aaeff16; padding:24px; display:flex; flex-direction:column; gap:16px; }
.practice-state { font-size:25px; }.practice-state-tile[data-state="error"],.practice-state-tile[data-state="timeout"] { border-color:#e8ac9566; }
.practice-log { display:flex; flex-direction:column; gap:5px; font:10px/1.7 var(--font-mono); color:#abb7ce; min-height:35px; }
.practice-log li { border-left:2px solid #7faaff55; padding-left:10px; }
.practice-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.practice-comparison > div { display:flex; flex-direction:column; gap:22px; padding:20px 16px; border:1px solid #ffffff24; border-radius:14px; min-width:0; }
.practice-comparison span { font-size:10px; color:#b5bbca; }.practice-comparison strong { font-size:20px; overflow-wrap:anywhere; }
.practice-comparison [data-example="bad"] { border-color:#d5a68a66; }.practice-comparison [data-example="good"] { border-color:#8bbcb166; }
.practice-checklist { display:flex; flex-direction:column; gap:12px; color:var(--ink-2); font-size:12px; line-height:1.8; padding:18px; border:1px solid var(--line); border-radius:14px; }
.practice-workflow-item { display:flex; flex-direction:column; gap:9px; padding:20px; background:#ffffff0c; border:1px solid #ffffff22; border-radius:16px; }
.practice-workflow-item span { font-size:11px; color:#abb7ce; }.practice-workflow-status { font-size:13px; color:#d6e1f5; line-height:1.8; }
.practice-undo { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:15px; background:#2c384b; border:1px solid #a4bbde55; border-radius:12px; font-size:12px; }
.practice-countdown { font:11px var(--font-mono); color:#cbd6ed; margin-left:auto; }
.practice-implementation > strong { font-size:24px; }.practice-implementation > p { font-size:13px; line-height:1.9; color:#c5cfdf; }.practice-implementation .practice-caution { border-top:1px solid #ffffff20; padding-top:18px; font-size:12px; color:#b8c2d4; }
@media(max-width:620px){.practice-clock-grid{gap:6px;}.practice-clock-grid > div{padding:10px 8px;}.practice-comparison{grid-template-columns:1fr;}.practice-stage{padding:22px 18px;}.learning-path h2{font-size:20px;}}