.comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:30px 0}.comparison figure{min-width:0}.comparison img{width:100%;max-height:none;background:#111;object-fit:contain}.comparison figcaption{font-size:14px;line-height:1.5}.tutorial,.lab{margin:30px 0;padding:22px 0;border-top:1px solid var(--line)}.tutorial h3,.lab h3{margin-top:18px}.tutorial p{max-width:1000px}.tutorial details summary{cursor:pointer;min-height:44px;padding:10px 0}.controls{display:flex;flex-wrap:wrap;align-items:end;gap:18px;margin-bottom:20px}.controls label{display:flex;flex-direction:column;max-width:360px;min-width:200px;font-size:16px;gap:8px}.controls label:has(input[type=checkbox]){flex-direction:row;align-items:center}.controls input[type=range],.controls select{min-height:44px;max-width:100%;width:250px}.controls select{font:inherit;color:var(--ink);background:var(--paper)}.lab canvas{width:min(100%,640px);height:auto;image-rendering:pixelated;border:1px solid var(--line)}.lab pre{padding:14px;background:var(--panel);max-width:100%;overflow-wrap:anywhere}.tutorial pre{font:16px/1.6 ui-monospace,monospace;white-space:pre-wrap;background:var(--panel);padding:18px}.lab .comparison{max-width:1000px}.lab .comparison canvas{width:100%}.presenting{font-size:clamp(20px,1.65vw,26px)}.presenting .slide{min-height:calc(100dvh - 150px);height:auto}.presenting .comparison img{max-height:68vh;width:auto}.presenting .comparison{grid-template-columns:repeat(2,minmax(0,1fr))}.presenting .tutorial{font-size:20px}code{overflow-wrap:anywhere}button{touch-action:manipulation}@media(max-width:800px){.comparison,.presenting .comparison{grid-template-columns:1fr}.controls{display:block}.controls label{margin-bottom:16px;max-width:100%}.controls input[type=range],.controls select{width:100%}.presenting{font-size:18px}.tutorial pre{font-size:14px}}@media print{.lab .controls,.lab button{display:none}.comparison{grid-template-columns:1fr 1fr}.tutorial,.lab{break-inside:avoid}.lab canvas{max-height:75mm;width:auto}.tutorial details{display:block}.comparison img{max-height:90mm}.lab pre{font-size:10pt}.tutorial{font-size:12pt}.slide{break-after:page}}
svg.lab-diagram{display:block;width:100%;height:auto;max-height:310px;margin:1rem 0;background:var(--bg);border:1px solid #8b9bad55;border-radius:8px}
.comparison:has(>figure:only-child),.presenting .comparison:has(>figure:only-child){grid-template-columns:1fr}