.lab-page{background:transparent}#lab{max-width:1100px;margin:auto;padding:var(--s4) 0;min-width:0}.lab-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding-bottom:var(--s5);border-bottom:1px solid var(--line)}.lab-heading h1{font-size:var(--xl);margin:var(--s2) 0 0;letter-spacing:-.03em}.count{text-align:center;font-size:var(--xl);font-weight:700;color:var(--teal);line-height:1.2}.count small{display:block;font-size:var(--xs);font-weight:400;margin-top:var(--s1)}.pick{margin-top:var(--s5)}.pick label{display:block;font-size:var(--sm);font-weight:700;margin-bottom:var(--s2)}.pick select{font-weight:600}.stepbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s2)}#position{font-size:var(--xs);color:var(--muted)}.catalog{border-block:1px solid var(--line);margin-top:var(--s5)}.catalog summary{padding-inline:0;font-size:var(--sm)}#catalog{padding-bottom:var(--s5)}#catalog h3{font-size:var(--sm);margin:var(--s4) 0 var(--s2)}.catalog-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}.catalog-group button{text-align:left;font-size:var(--xs);padding:var(--s2);font-weight:500;min-width:0}.catalog-group button[aria-pressed=true]{background:var(--teal);color:white;border-color:var(--teal)}.example-head{margin:var(--s6) 0 var(--s5)}.tag{font:var(--xs)/1.5 Consolas,monospace;color:var(--teal)}.example-head h2{font-size:var(--lg);margin:var(--s2) 0}.example-head p{font-size:var(--sm);line-height:1.65;color:var(--muted);margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(240px,1fr);gap:var(--s5);align-items:start}.visual{min-width:0}.stage{aspect-ratio:10/7;position:relative;overflow:hidden;border:1px solid #bdcec6;border-radius:12px;background:#faf9f5;touch-action:pan-y}.stage>svg{display:block;width:100%;height:100%;max-width:100%}.stage[data-background=checker]{background:repeating-conic-gradient(#dce4de 0 25%,#fff 0 50%) 50%/20px 20px}.stage[data-background=dark]{background:#263e40}.stage circle[data-handle]{cursor:grab;touch-action:none}.stage circle[data-handle]:active{cursor:grabbing}.view-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s2);padding:var(--s2) 0}.view-tools label{display:flex;gap:var(--s2);align-items:center;font-size:var(--xs);min-height:44px}.view-tools select{width:auto;max-width:145px;font-size:var(--xs)}.parameters{border:1px solid var(--line);border-radius:12px;padding:var(--s4);margin:0;min-width:0}.parameters legend{font-size:var(--sm);font-weight:700;padding:0 var(--s2)}#controls{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}.param{min-width:0}.param label{display:block;font-size:var(--xs);font-weight:600;margin-bottom:var(--s1);overflow-wrap:anywhere}.param input,.param select{font-size:var(--sm)}.param input[type=range]{width:100%;display:block;min-height:32px;margin:0}.param input[type=color]{padding:var(--s1);height:44px}.param[data-type=text]{grid-column:1/-1}#reset{margin-top:var(--s3);width:100%}.exercise{font-size:var(--sm);line-height:1.65;background:var(--light);border-radius:10px;padding:var(--s4);margin:var(--s5) 0}.code-panel{border-block:1px solid var(--line);padding:var(--s5) 0}.code-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s2)}.code-head h3{font-size:var(--lg);margin:0}.code-panel textarea{background:var(--deep);color:#edf5ef;border-color:var(--deep);font-size:var(--xs);line-height:1.65;min-height:220px;white-space:pre;overflow:auto;resize:vertical}.code-panel .small{margin-bottom:var(--s3)}.code-panel .feedback{padding-bottom:0}.lab-footer{font-size:var(--xs);color:var(--muted);margin-top:var(--s5)}.lab-footer p{margin-bottom:var(--s2)}@media(max-width:640px){.workspace{grid-template-columns:1fr}.stage{max-height:330px}.catalog-group{grid-template-columns:1fr 1fr}#controls{grid-template-columns:repeat(2,minmax(0,1fr))}.parameters{padding:var(--s3)}.lab-heading h1{font-size:var(--lg)}.code-head .button-row{width:100%}.code-head button{flex:1}.lab-heading{padding-bottom:var(--s4)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.standalone #lab{padding-inline:var(--s4)}