/* A visible thread connects the input to its use. */
.lab-section{padding-top:42px;padding-bottom:42px;scroll-margin-top:24px}
.lab-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end;margin-bottom:24px}
.lab-intro p,.lab-guide p{margin:0;max-width:48ch;line-height:1.6;color:#c5c9ba}
.lab-text-link{display:inline-flex;align-items:center;min-height:44px;color:#f5c563;font-size:14px}
.lab-workbench,.lab-challenge,.lab-example,.lab-puzzle{--lab-line:#40483b;--lab-ink:#f2f0e6;--lab-muted:#c5c9ba;--lab-accent:#f5c563;background:#141a14;color:var(--lab-ink);border:1px solid var(--lab-line);padding:28px;min-width:0;box-sizing:border-box;font-family:var(--sans,'IBM Plex Sans',sans-serif);line-height:1.6;text-align:left}
.lab-workbench *,.lab-challenge *,.lab-example *,.lab-puzzle *{box-sizing:border-box}
.lab-controls,.lab-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.lab-controls label{display:grid;gap:6px;font-size:12px;color:var(--lab-muted);flex:1;min-width:160px}
.lab-controls select{min-height:44px;background:#1d251c;color:var(--lab-ink);border:1px solid #66715b;padding:8px 12px;font:inherit;font-size:15px;width:100%;border-radius:3px}
.lab-button{font:inherit;font-size:14px;line-height:1.4;min-height:44px;min-width:44px;border:1px solid #66715b;background:#1d251c;color:var(--lab-ink);padding:10px 16px;border-radius:3px;cursor:pointer;white-space:normal;text-align:left}
.lab-button:hover{border-color:var(--lab-accent,#f5c563)}
.lab-button-primary,.lab-button[aria-pressed=true]{color:#141a14;background:#f5c563;border-color:#f5c563}
.lab-button:disabled{opacity:.55;cursor:default}
.lab-workbench :focus-visible,.lab-challenge :focus-visible,.lab-example :focus-visible,.lab-puzzle :focus-visible,.lab-copy:focus-visible{outline:2px solid #f5c563;outline-offset:4px}
.lab-disclaimer,.lab-label{font-size:12px;color:var(--lab-muted);letter-spacing:.02em}
.lab-label{display:block}
.lab-sample{border-block:1px solid var(--lab-line);padding-block:20px;margin-block:20px}
.lab-input{display:block;color:var(--lab-accent);font-size:clamp(18px,3vw,27px);margin-top:4px;overflow-wrap:anywhere}
pre.lab-code{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;background:#0e130e;color:#f2f0e6;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:13px;line-height:1.8;border:1px solid #40483b;padding:16px;margin:16px 0;max-width:100%}
.lab-thread{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none!important;margin:26px 0!important;padding:0!important;gap:0}
.lab-thread li{position:relative;padding:0 18px 0 0;color:var(--lab-muted);font-size:14px;overflow-wrap:anywhere}
.lab-thread li::before{content:'';height:2px;position:absolute;top:18px;left:0;right:0;background:var(--lab-line)}
.lab-thread li.is-reached::before{background:var(--lab-accent)}
.lab-thread-dot{position:relative;display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--lab-line);border-radius:50%;background:#141a14;color:var(--lab-muted);margin-bottom:10px;font-family:var(--mono,monospace)}
.is-reached .lab-thread-dot{border-color:var(--lab-accent);color:var(--lab-accent)}
.lab-thread [aria-current=step] .lab-thread-dot{background:var(--lab-accent);color:#141a14}
.lab-status{min-height:52px;margin:20px 0!important;color:var(--lab-ink);font-size:15px;line-height:1.6}
.lab-evidence{border-left:3px solid var(--lab-accent);padding:14px 18px;margin-top:24px;background:#1b231a;overflow-wrap:anywhere}
.lab-evidence p{margin:8px 0;color:var(--lab-muted);font-size:14px}
.lab-evidence a,.lab-answer a,.lab-example a{display:block;color:var(--lab-accent);min-height:44px;padding-top:10px;text-decoration:underline;text-underline-offset:4px}
.lab-guide{display:flex;gap:20px;align-items:center;margin-bottom:22px}
.lab-snake{color:#f5c563;width:92px;height:56px;flex-shrink:0}
.lab-lines{list-style:none!important;margin:0!important;padding:0!important;border:1px solid var(--lab-line)}
.lab-lines li{margin:0!important;padding:0!important}
.lab-line{display:block;position:relative;width:100%;min-height:44px;text-align:left;border:0;border-bottom:1px solid #293326;border-radius:0;background:#0e130e;color:var(--lab-ink);padding:10px 12px 10px 45px;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.8 var(--mono,'IBM Plex Mono',monospace);cursor:pointer}
.lab-line:hover{background:#252d20}
.lab-line[aria-pressed=true]{background:#333523;box-shadow:inset 3px 0 #f5c563}
.lab-line-number{position:absolute;left:14px;color:#b2b9a8;font-size:11px;user-select:none}
.lab-answer[hidden]{display:none}
.lab-panel h3,.lab-example h2,.lab-puzzle h2{font-family:var(--disp,'Space Grotesk',sans-serif);font-weight:500;color:var(--lab-ink);font-size:22px;letter-spacing:-.02em;line-height:1.3;margin:0 0 14px}
.lab-panel p,.lab-example p{color:var(--lab-muted);font-size:15px}
.lab-answer{border-top:1px solid var(--lab-line);padding-top:24px;margin-bottom:20px}
.lab-puzzle{margin:0 0 32px;padding:24px}
.lab-puzzle .lab-label{margin-bottom:14px}
.lab-puzzle .lab-status:empty{display:none}
.lab-copy{margin:0 0 18px;background:#1d251c;color:#f2f0e6}
@media(max-width:600px){.lab-intro{grid-template-columns:1fr;gap:8px}.lab-workbench,.lab-challenge,.lab-example,.lab-puzzle{padding:18px}.lab-thread{grid-template-columns:1fr;gap:0}.lab-thread li{display:flex;gap:14px;align-items:center;padding:0 0 18px}.lab-thread li::before{left:18px;top:18px;bottom:0;width:2px;height:auto;right:auto}.lab-thread li:last-child::before{display:none}.lab-thread-dot{flex-shrink:0;margin:0}.lab-guide{gap:12px}.lab-snake{width:65px}.lab-actions .lab-button{flex:1 1 auto}.lab-line{font-size:11px}.lab-section{padding-top:28px;padding-bottom:28px}}
@media(prefers-reduced-motion:no-preference){.lab-thread-dot{transition:background .2s,border-color .2s}}

.lab-story { display:grid; grid-template-columns:1fr 1fr; gap:20px; border-top:1px solid var(--lab-line); padding-top:20px; }
.lab-story[hidden] { display:none; }
.lab-story .lab-panel h3 { font-size:17px; }
.lab-story .lab-panel p { margin:0; overflow-wrap:anywhere; }
@media(max-width:600px) { .lab-story { grid-template-columns:1fr; } }