.coordinate-lab{grid-template-columns:minmax(18rem,.85fr) minmax(0,1.15fr);grid-template-areas:"controls stage";gap:1rem;margin-block:1.75rem 3rem;display:grid}.coordinate-lab__controls,.coordinate-lab__stage{border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-surface)}.coordinate-lab__controls{grid-area:controls;align-content:start;gap:1.5rem;padding:clamp(1.25rem,3vw,2rem);display:grid}.coordinate-lab__controls h3,.coordinate-lab__controls p{margin:0}.coordinate-lab__controls h3{font-size:clamp(1.45rem,3vw,2rem)}.coordinate-lab__controls h3+p{color:var(--color-text-muted);margin-top:.75rem}.coordinate-lab__eyebrow{color:var(--color-accent);font:750 .72rem/1.4 var(--font-mono);letter-spacing:.14em}.coordinate-lab__modes{grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}.coordinate-lab__modes button{border:1px solid var(--color-border-strong);min-height:2.75rem;color:var(--color-text);font:750 .9rem/1 var(--font-sans);cursor:pointer;background:0 0;border-radius:999px}.coordinate-lab__modes button:is(:hover,:focus-visible){border-color:var(--color-accent)}.coordinate-lab__modes button[aria-pressed=true]{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-on-accent)}.coordinate-lab__heading{gap:.75rem;font-weight:750;display:grid}.coordinate-lab__heading span{justify-content:space-between;gap:1rem;display:flex}.coordinate-lab__heading output{color:var(--color-accent);font-family:var(--font-mono)}.coordinate-lab__heading input{width:100%;accent-color:var(--color-accent)}.coordinate-lab__explanation{border-inline-start:.25rem solid var(--color-accent);background:var(--color-accent-soft);padding:1rem;line-height:1.7}.coordinate-lab__stage{background:radial-gradient(circle at 50% 62%, var(--color-accent-soft), transparent 58%), var(--color-surface);grid-area:stage;place-items:center;min-height:23rem;padding:3.5rem;display:grid;position:relative;overflow:hidden}.coordinate-lab__scene{perspective:42rem;transform-style:preserve-3d;place-items:center;display:grid;position:absolute;inset:2rem}.coordinate-lab__floor{aspect-ratio:1.2;border:1px solid var(--color-border-strong);background:repeating-linear-gradient(0deg, transparent 0 1.75rem, var(--color-border) 1.75rem calc(1.75rem + 1px)), repeating-linear-gradient(90deg, transparent 0 1.75rem, var(--color-border) 1.75rem calc(1.75rem + 1px)), color-mix(in srgb, var(--color-surface) 86%, transparent);width:min(82%,21rem);transform-style:preserve-3d;border-radius:1.25rem;position:relative;transform:translateY(2.2rem)rotateX(58deg)rotate(-7deg);box-shadow:0 2.6rem 3.2rem #1018202e}.coordinate-lab__plane-axis{z-index:1;transform-origin:0;width:44%;height:3px;position:absolute;inset-block-start:50%;inset-inline-start:50%}.coordinate-lab__plane-axis:after{content:"";border-block-start:3px solid;border-inline-end:3px solid;width:.65rem;height:.65rem;position:absolute;inset-block-start:50%;inset-inline-end:-.2rem;transform:translateY(-50%)rotate(45deg)}.coordinate-lab__plane-axis--x{background:var(--color-accent);color:var(--color-accent)}.coordinate-lab__plane-axis--y{background:var(--color-sensing);color:var(--color-sensing);transform:rotate(-90deg)}.coordinate-lab__origin{z-index:4;aspect-ratio:1;border:2px solid var(--color-surface);background:var(--color-text);width:.75rem;box-shadow:0 0 0 .3rem color-mix(in srgb, var(--color-accent) 28%, transparent);border-radius:50%;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)translateZ(1.8rem)}.coordinate-lab__vertical-axis{z-index:3;background:linear-gradient(var(--color-tooling), var(--color-tooling) 82%, transparent);width:3px;height:38%;color:var(--color-tooling);position:absolute;inset-block-start:13%;inset-inline-start:50%;transform:translate(-50%)}.coordinate-lab__vertical-axis:before{content:"";border-block-start:3px solid;border-inline-end:3px solid;width:.7rem;height:.7rem;position:absolute;inset-block-start:0;inset-inline-start:50%;transform:translate(-50%,-15%)rotate(-45deg)}.coordinate-lab__craft{z-index:3;width:clamp(6.75rem,15vw,8.25rem);transform:translate(-50%, -50%) translateZ(1.4rem) rotate(var(--heading));transform-style:preserve-3d;transition:transform .12s linear;position:absolute;inset:50% auto auto 50%}.coordinate-lab__craft img{width:100%;height:auto;filter:var(--logo-filter) drop-shadow(0 .8rem 1rem #10182024)}.coordinate-lab__nose{z-index:1;border-inline:.55rem solid #0000;border-block-end:1rem solid var(--color-accent);width:0;height:0;position:absolute;inset-block-start:-1.6rem;inset-inline-start:50%;transform:translate(-50%)}.coordinate-lab__axis{color:var(--color-text-muted);font:.72rem/1.4 var(--font-mono);letter-spacing:.06em;gap:.2rem;margin:0;display:grid;position:absolute}.coordinate-lab__axis--x,.coordinate-lab__axis--y{z-index:2;text-align:center;inset-block-start:var(--axis-block);inset-inline-start:var(--axis-inline);transform:translate(-50%,-50%)}.coordinate-lab__axis strong{white-space:nowrap;font-size:.88rem}.coordinate-lab__axis span{white-space:nowrap}.coordinate-lab__axis--x strong{color:var(--color-accent)}.coordinate-lab__axis--y strong{color:var(--color-sensing)}.coordinate-lab__axis--z{z-index:4;inset-block-start:1.25rem;inset-inline-start:1.25rem}.coordinate-lab__axis--z strong{color:var(--color-tooling)}@media (width<=70rem){.coordinate-lab{grid-template-columns:1fr;grid-template-areas:"controls""stage"}.coordinate-lab__stage{min-height:22rem}}@media (width<=34rem){.coordinate-lab__stage{min-height:19rem;padding:2rem}.coordinate-lab__scene{inset:1.25rem}.coordinate-lab__floor{width:88%}}@media (prefers-reduced-motion:reduce){.coordinate-lab__craft{transition:none}}