.euclid-lab{--euclid-blue:#087dcc;--euclid-green:#4f9300;--euclid-pink:#d9007e;background:radial-gradient(circle at 84% 8%, color-mix(in srgb, var(--euclid-blue) 11%, transparent), transparent 25rem), var(--surface-color);border:1px solid var(--border-color);font-family:var(--font-sans);border-radius:12px;width:min(1040px,100vw - 3rem);margin:2.5rem 50%;padding:clamp(1rem,3vw,1.5rem);transform:translate(-50%)}[data-theme=dark] .euclid-lab{--euclid-blue:#1493ff;--euclid-green:#93ff14;--euclid-pink:#ff1493}.euclid-lab header>p,.euclid-lab .eyebrow{color:var(--link-color);letter-spacing:.12em;text-transform:uppercase;margin:0 0 .2rem;font-size:.67rem;font-weight:800}.euclid-lab h3{font-family:var(--font-serif);margin:0 0 1rem;font-size:clamp(1.25rem,3vw,1.7rem)}.euclid-lab .presets,.euclid-lab .step-controls{flex-wrap:wrap;gap:.5rem;display:flex}.euclid-lab .presets{margin-bottom:.85rem}.euclid-lab button{background:var(--bg-color);border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;font:750 .75rem/1.2 var(--font-sans);border-radius:999px;min-height:2.45rem;padding:.5rem .75rem}.euclid-lab button:hover:not(:disabled){border-color:var(--euclid-blue)}.euclid-lab button:focus-visible{outline:3px solid color-mix(in srgb, var(--euclid-green) 55%, transparent);outline-offset:2px}.euclid-lab button.active{background:var(--euclid-green);border-color:var(--euclid-green);color:#071109}.euclid-lab button:disabled{cursor:default;opacity:.42}.euclid-lab .lab-grid{grid-template-columns:minmax(0,2fr) minmax(240px,.85fr);gap:1rem;display:grid}.euclid-lab .diagram-shell{background:var(--bg-color);border:1px solid var(--border-color);border-radius:9px;overflow-x:auto}.euclid-lab svg{width:100%;min-width:620px;height:auto;display:block}.euclid-lab svg text{fill:var(--text-primary);font:750 15px var(--font-sans)}.euclid-lab .blueprint-grid path{fill:none;opacity:.3;stroke:var(--border-color);stroke-width:1px}.euclid-lab .tile rect{fill:color-mix(in srgb, var(--euclid-pink) 9%, transparent);stroke:var(--euclid-pink);stroke-width:3px}.euclid-lab .tile.step-1 rect{fill:color-mix(in srgb, var(--euclid-blue) 9%, transparent);stroke:var(--euclid-blue);stroke-dasharray:10 6}.euclid-lab .tile.step-2 rect,.euclid-lab .tile.step-5 rect{fill:color-mix(in srgb, var(--euclid-green) 8%, transparent);stroke:var(--euclid-green);stroke-dasharray:2 5}.euclid-lab .tile.step-3 rect,.euclid-lab .tile.step-6 rect{fill:color-mix(in srgb, var(--euclid-pink) 7%, transparent);stroke:var(--euclid-pink);stroke-dasharray:13 5 2 5}.euclid-lab .tile.step-4 rect,.euclid-lab .tile.step-7 rect{fill:color-mix(in srgb, var(--euclid-blue) 7%, transparent);stroke:var(--euclid-blue);stroke-dasharray:6 4}.euclid-lab .tile:not(.current){opacity:.55}.euclid-lab .tile.current rect{stroke-width:5px}.euclid-lab .tile text{font-size:13px}.euclid-lab .remainder rect{fill:url(#euclid-hatch);stroke:var(--euclid-green);stroke-width:3px}.euclid-lab .hatch-line{stroke:var(--euclid-green);stroke-width:2px}.euclid-lab .remainder-label{dominant-baseline:middle;font-size:13px}.euclid-lab .dimensions text{fill:var(--text-secondary);font-size:13px}.euclid-lab .division-panel{background:color-mix(in srgb, var(--bg-color) 86%, transparent);border:1px solid var(--border-color);border-radius:9px;padding:1rem}.euclid-lab .division-panel ol{margin:.7rem 0 1rem;padding:0;list-style:none}.euclid-lab .division-panel li{border-left:2px solid var(--border-color);color:var(--text-secondary);font-variant-numeric:tabular-nums;opacity:.45;margin:0;padding:.48rem 0 .48rem .75rem}.euclid-lab .division-panel li.done{opacity:.72}.euclid-lab .division-panel li.active{border-left-color:var(--euclid-green);color:var(--text-primary);opacity:1;font-weight:800}.euclid-lab .result{color:var(--text-secondary);margin:0;font-size:.82rem;line-height:1.5}.euclid-lab .result strong{color:var(--euclid-green);font-size:1rem}.euclid-lab .step-controls{margin-top:.9rem}.euclid-lab .readout{background:var(--bg-color);border-left:3px solid var(--euclid-green);color:var(--text-primary);min-height:3.1rem;margin:.8rem 0 0;padding:.7rem .85rem;font-size:.86rem;line-height:1.55}.euclid-lab figcaption{color:var(--text-secondary);margin-top:.8rem;font-size:.8rem;line-height:1.55}.euclid-lab figcaption strong{color:var(--text-primary)}@media (width<=760px){.euclid-lab{width:calc(100vw - 1.5rem)}.euclid-lab .lab-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.euclid-lab *{scroll-behavior:auto!important;transition:none!important}}
