.device-stage{isolation:isolate;width:100%;height:100%;min-height:280px;position:relative}.device-stage__canvas,.device-stage__poster{position:absolute;inset:0}.device-stage__canvas{opacity:0;transition:opacity .6s}.device-stage__canvas canvas{width:100%;height:100%;display:block}.device-stage__poster{transition:opacity .6s}.device-lab .device-stage__finish-poster{display:none}.device-lab .device-stage[data-finish=cherry] .device-stage__finish-poster[data-finish=cherry],.device-lab .device-stage[data-finish=electric] .device-stage__finish-poster[data-finish=electric],.device-lab .device-stage[data-finish=lime] .device-stage__finish-poster[data-finish=lime]{display:block}.device-stage[data-status=ready] .device-stage__canvas{opacity:1}.device-stage[data-status=ready] .device-stage__poster{opacity:0}.device-stage[data-hero=true] .device-stage__canvas{transition:opacity .7s}.device-stage[data-hero=true]{animation:.7s ease-out both device-arrive}@keyframes device-arrive{0%{opacity:0}to{opacity:1}}.device-stage[data-hero=true] .device-stage__finish-poster{opacity:0;transition:opacity .8s}html[data-colorway=cherry] .device-stage[data-hero=true] .device-stage__finish-poster[data-finish=cherry],html[data-colorway=electric] .device-stage[data-hero=true] .device-stage__finish-poster[data-finish=electric],html[data-colorway=lime] .device-stage[data-hero=true] .device-stage__finish-poster[data-finish=lime]{opacity:1}.device-stage__caption{white-space:nowrap;font:10px var(--font-plex-mono), monospace;letter-spacing:.12em;text-transform:uppercase;color:#7a766a;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.device-stage__caption span{opacity:.5;padding:0 10px}.device-stage__callout{font:10px var(--font-plex-mono), monospace;color:#6c624e;white-space:nowrap;pointer-events:none;background:#f7f4eceb;border:1px solid #d2c8b3;border-radius:4px;padding:7px 10px;position:absolute}.device-stage__callout:before{content:"";background:#aa9567;width:30px;height:1px;position:absolute;top:50%;right:100%}.device-lab{color:#292b22;background:#f7f4ec;min-height:100svh;padding:36px clamp(20px,5vw,80px)}.device-lab__header{justify-content:space-between;align-items:center;gap:24px;display:flex}.device-lab a{color:inherit}.device-lab h1{letter-spacing:-.04em;margin:20px 0 8px;font-size:clamp(28px,4vw,48px)}.device-lab p{max-width:70ch;line-height:1.6}.device-lab__grid{grid-template-columns:minmax(0,1fr) 300px;gap:32px;margin-top:20px;display:grid}.device-lab__viewer{border:1px solid #d9d5c9;border-radius:24px;height:70svh;min-height:440px}.device-lab__controls{flex-direction:column;gap:24px;padding:20px 0;display:flex}.device-lab label{gap:10px;font-size:13px;display:grid}.device-lab select,.device-lab button{color:#292b22;font:inherit;background:#fffcf5;border:1px solid #cbc6b6;border-radius:8px;padding:12px}.device-lab input{accent-color:#8d7135;width:100%}.device-lab small{color:#686456;line-height:1.6}.device-lab__stats{font:12px var(--font-plex-mono), monospace;line-height:1.8}@media (max-width:809px){.device-lab__grid{grid-template-columns:1fr}.device-lab__viewer{height:58svh;min-height:320px}}@media (prefers-reduced-motion:reduce){.device-stage__canvas,.device-stage__poster,.device-stage[data-hero=true] .device-stage__canvas,.device-stage[data-hero=true] .device-stage__finish-poster{transition:none}.device-stage[data-hero=true]{animation:none}}