.learning{max-width:1120px;color:var(--ink);margin:auto;padding:clamp(24px,5vw,60px) clamp(16px,4vw,40px) 72px}.learning h1{letter-spacing:-.025em;max-width:20ch;margin:.3em 0;font-size:clamp(2.4rem,5vw,4.5rem);line-height:1.02}.learning h2{font-size:1.65rem;line-height:1.2}.learning h3{font-size:1.2rem}.learning p,.learning li{max-width:72ch;line-height:1.65}.learning header{border-bottom:1px solid var(--rule);margin-bottom:32px;padding-bottom:24px}.learning section{margin:32px 0}.learning a{text-underline-offset:4px}.learning .routes{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.learning .routes article{border-top:3px solid var(--machine);min-width:0;padding-top:16px}.learning .routes a{font-weight:700}.learning .action,.learning button{color:#f1c654;border:1px solid var(--rule);min-height:44px;font:inherit;cursor:pointer;background:#101b24;border-radius:6px;padding:10px 16px;text-decoration:none;display:inline-block}.learning .actions{flex-wrap:wrap;gap:12px;margin:18px 0;display:flex}.learning .lab{border:1px solid var(--rule);background:var(--surface);border-radius:8px;padding:clamp(16px,3vw,28px)}.learning pre{background:var(--surface-2);white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;padding:18px;font-size:.9rem;line-height:1.6;overflow-x:auto}.learning label{margin:14px 0;display:block}.learning input,.learning textarea{background:var(--paper);width:100%;max-width:100%;color:var(--ink);border:1px solid var(--rule);font:inherit;border-radius:4px;padding:10px;display:block}.learning input[type=number]{max-width:200px}.learning input[type=checkbox]{width:auto;margin-right:8px;display:inline-block}.learning output{margin:16px 0;font-size:1.6rem;font-weight:700;display:block}.learning svg{width:100%;max-width:480px;height:180px;margin:20px 0;display:block}.learning .note{color:var(--muted);font-size:.95rem}.learning nav{flex-wrap:wrap;gap:18px;display:flex}.learning .steps{padding-left:24px}.learning .steps li{margin:22px 0}.learning .steps h2{margin-bottom:6px}.learning details{border-top:1px solid var(--rule);padding:16px 0}.learning summary{cursor:pointer;min-height:44px;padding:8px 0;font-weight:700}@media (width<=720px){.learning .routes{grid-template-columns:1fr}.learning h1{max-width:none}}.learning .exercise-visual{min-width:0;margin:0}.learning .exercise-visual svg{aspect-ratio:2;width:100%;max-width:none;height:auto;margin:0}.learning .exercise-visual figcaption{color:var(--muted);margin-top:10px;font-size:.9rem;line-height:1.5}.learning .learning-outcome{grid-template-columns:1fr 1fr;align-items:center;gap:28px;display:grid}.learning .routes article{border-top:0;padding-top:0}.learning .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0;list-style-position:inside;display:grid}.learning .steps li{border-top:2px solid var(--rule);min-width:0;margin:0;padding-top:16px}.learning .steps h2{font-size:1.3rem}.learning .steps p{font-size:1rem}@media (width<=720px){.learning .learning-outcome,.learning .steps{grid-template-columns:1fr}.learning .exercise-visual{max-width:520px}}.learning header h1{max-width:23ch;font-size:clamp(2.25rem,4.6vw,3.75rem)}.learning header{margin-bottom:24px;padding-bottom:20px}.learning .routes article>p:first-of-type{color:var(--machine);margin-bottom:6px;font-family:IBM Plex Sans Condensed,sans-serif;font-weight:600}.learning .routes h3{margin:6px 0 12px;font-size:1.5rem;line-height:1.2}.learning .routes{gap:28px}.learning .lab{border-top:3px solid var(--machine)}.learning .steps:has(li:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}@media (width<=720px){.learning .steps:has(li:nth-child(4)){grid-template-columns:1fr}.learning header h1{max-width:none}}.learning [data-build-notes]{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;display:grid}.learning [data-build-notes]>:is(.actions,p,noscript){grid-column:1/-1}.learning [data-build-notes] label{min-width:0}@media (width<=720px){.learning [data-build-notes]{grid-template-columns:1fr}}@media (width>=721px) and (width<=1000px){.learning .routes{grid-template-columns:1fr}.learning .routes article{grid-template-columns:minmax(240px,.9fr) minmax(0,1.1fr);align-content:start;gap:0 24px;display:grid}.learning .routes article>.exercise-visual{grid-area:1/1/6;align-self:start}.learning .routes article>:not(.exercise-visual){grid-column:2;margin-top:0}}
