.practice-story {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:center;
  gap:clamp(2.5rem,6vw,7rem);
  margin-top:5rem;
  padding-top:5rem;
  border-top:1px solid var(--line)
}
.practice-copy h2 {font-size:clamp(2.5rem,3.3vw,4rem);line-height:1.08}
.practice-copy>p:not(.eyebrow) {max-width:29em;margin-block:1.5rem 2rem}
.lab-story {min-width:0;width:100%;max-width:min(42rem,62svh);justify-self:center;container-type:inline-size}
.story-scene {
  --story-success:#096e55;
  position:relative;
  padding-block:2.3em 2.8em;
  font-size:clamp(10px,2.65cqw,24px);
  line-height:1.45
}
.story-scene::before {
  content:"";
  position:absolute;
  inset:20% 0 -3%;
  z-index:-1;
  background:radial-gradient(ellipse at 55% 70%,#e9dfc9,transparent 65%);
  pointer-events:none
}
.story-scene svg {width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.story-window {overflow:hidden;border:1px solid var(--line);border-radius:1.4em;background:var(--bg);box-shadow:0 1.4em 2.5em -1.7em #32280d55}
.story-window-bar {height:3.4em;padding:1.3em;border-bottom:1px solid var(--line);background:var(--card)}
.story-dots {display:flex;gap:.5em}
.story-dots i {width:.9em;height:.9em;border-radius:50%;background:#c6c8c2}
.story-lab-head {display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:1.15em 1.2em .85em}
.story-lab-title {font-size:1.2em;font-weight:700;line-height:1.25;letter-spacing:-.03em}
.story-tools {display:flex;gap:.5em;flex:none}
.story-tool,.story-stop {display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:.65em;height:2.8em;padding-inline:.75em;font-size:.9em;font-weight:700;background:var(--card)}
.story-stop {background:#faefec;border-color:#e8b4ad;color:#9d3228}
.story-steps {display:grid;grid-template-columns:1fr 1fr;gap:1em;padding:0 1.2em .9em;border-bottom:1px solid var(--line)}
.story-step {display:flex;align-items:center;gap:.7em;font-size:.9em;font-weight:700;line-height:1.4}
.story-step>b {position:relative;display:grid;place-items:center;flex:none;width:1.8em;height:1.8em;border:2px solid var(--control-border);border-radius:50%;transition:background-color .3s,border-color .3s}
.story-step small {display:block;font-size:.85em;font-weight:400;color:var(--muted)}
.story-step i {font-style:normal}
.story-step-first>b {border-color:var(--action);color:var(--action)}
.story-step-first svg {position:absolute;color:white;opacity:0;stroke-width:3}
.story-done {display:none!important}
.is-validated .story-running {display:none}
.is-validated .story-done {display:block!important}
.is-validated .story-step-first>b {background:var(--story-success);border-color:var(--story-success)}
.is-validated .story-step-first i {opacity:0}
.is-validated .story-step-first svg {opacity:1}
.is-validated .story-step-first small {color:var(--story-success);font-weight:700}
.is-validated .story-step-next>b {color:var(--action);border-color:var(--action)}
.story-terminal {margin:1em 1.2em 1.3em;border:1px solid var(--line);border-radius:1em;overflow:hidden;background:var(--terminal-background)}
.story-terminal-head {display:flex;align-items:center;justify-content:space-between;background:var(--card);padding:.6em}
.story-terminal-tab {background:var(--action);color:white;font-weight:700;border-radius:2em;padding:.3em 1em}
.story-ports {display:flex;align-items:center;gap:.5em;padding-inline:.5em;color:var(--muted)}
.story-screen {height:22.1em;padding:.9em 1em;color:var(--terminal-foreground);font:.9em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
.story-line {display:block;min-height:1.5em;white-space:pre-wrap;overflow-wrap:anywhere}
.story-user {color:var(--terminal-user)}
.story-path {color:var(--terminal-path);font-weight:700}
.story-git {color:var(--terminal-branch)}
.story-arrow {color:var(--terminal-prompt)}
.story-dim {color:var(--terminal-muted)}
.story-strong {color:#fff;font-weight:700}
.story-caret {display:inline-block;width:.55em;height:1.1em;vertical-align:text-bottom;background:var(--terminal-cursor)}
.story-terminal-foot {display:flex;align-items:center;gap:.5em;padding:.65em 1em;background:#202624;color:#c4c9c6;font-size:.8em;white-space:nowrap;overflow:hidden}
.story-terminal-foot i {width:.6em;height:.6em;flex:none;border-radius:50%;background:#6ee7b7}
.story-terminal-foot b {color:white}
.story-terminal-foot>span {overflow:hidden;text-overflow:ellipsis}
.story-badge {position:absolute;z-index:1;display:flex;align-items:center;gap:1em;border:1px solid var(--line);border-radius:1.4em;padding:1em 1.3em;background:#fffffff2;box-shadow:0 1em 2em -.8em #32280d35;color:var(--muted);line-height:1.4}
.story-badge strong {display:block;font-size:1.2em;letter-spacing:-.025em}
.story-promo {top:0;right:1.2em}
.story-avatars {display:flex}
.story-avatars b {display:grid;place-items:center;width:2.4em;height:2.4em;border:2px solid white;border-radius:50%;margin-left:-.25em;background:var(--selection);color:var(--text);font-size:.9em}
.story-avatars b:first-child {margin-left:0}
.story-avatars b:nth-child(2) {background:var(--surface)}
.story-avatars b:nth-child(3) {background:#cfe2dc}
.story-avatars b:nth-child(4) {background:#f8e2af}
.story-check {bottom:.2em;right:1.2em;transition:opacity .5s,transform .5s}
.story-check-icon {display:grid;place-items:center;width:2.8em;height:2.8em;flex:none;border-radius:50%;background:var(--story-success);color:white}
.story-check-icon svg {width:1.6em;height:1.6em;stroke-width:3}
.lab-story:not(.is-validated) .story-check {opacity:0;transform:translateY(.5em)}
.lab-story figcaption {display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3rem;padding-top:1rem;color:var(--muted);font-size:.75rem}
.story-playback {padding:.5rem 0;background:none;color:var(--action);text-decoration:underline;text-underline-offset:.2em;white-space:nowrap;font-weight:700}
@media (max-width:900px) {
  .practice-story {grid-template-columns:minmax(0,1fr);gap:2.5rem;margin-top:3.5rem;padding-top:3.5rem}
  .practice-copy h2 br {display:none}
  .practice-copy h2 {max-width:12em}
  .practice-copy>p:not(.eyebrow) {max-width:36em}
  .lab-story {max-width:34rem}
}
@media (max-width:440px) {
  .story-scene {font-size:2.65cqw}
  .story-tool {display:none}
  .lab-story figcaption {align-items:flex-start;gap:.5rem;font-size:.7rem}
}
@media (prefers-reduced-motion:reduce) {
  .story-step>b,.story-check {transition:none}
}