.lab-stage{grid-column:1 / -1;position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--radius-card);padding:var(--space-card)}.lab-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.lab-canvas{cursor:grab;touch-action:none}.lab-stage[data-turning="1"] .lab-canvas{cursor:grabbing}.lab-msg{position:relative;z-index:1;margin:0;min-height:var(--text-sm--line-height);color:var(--muted-foreground)}.lab-msg[data-tone=error]{color:var(--foreground)}.lab-drop{position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;justify-content:center;padding:var(--space-card);color:var(--muted-foreground);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--text-sm--line-height);pointer-events:none;transition:background .16s}.lab-stage[data-drag="1"] .lab-drop{background:var(--glass-in)}.lab-pick{pointer-events:auto;font:inherit;color:var(--foreground);text-decoration:underline;cursor:pointer}.lab-pick:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.lab-panel{grid-column:1 / -1;padding:var(--space-card);display:flex;flex-direction:column;gap:var(--space-gap)}.lab-actions{display:flex;flex-wrap:wrap;gap:var(--space-gap)}.lab-btn{background:var(--glass-in);border-radius:9999px;height:2.25rem;padding:0 .875rem;color:var(--foreground);font:inherit;font-size:var(--text-sm);cursor:pointer;transition:background .16s,opacity .16s,transform .08s}.lab-btn:hover{background:var(--glass-hover)}.lab-btn:active{transform:scale(.97)}.lab-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.lab-panel{position:relative}.lab-corner{position:absolute;top:var(--space-card);right:var(--space-card);display:flex;gap:var(--space-gap)}.lab-actions{padding-right:calc(2 * 2.25rem + 2 * var(--space-gap));margin-bottom:calc(var(--space-card) - var(--space-gap))}.lab-icon{width:2.25rem;padding:0;display:inline-flex;align-items:center;justify-content:center}.lab-icon svg{width:1rem;height:1rem}.lab-group{border-radius:.5rem;background:var(--glass-hover);padding:.5rem .75rem}.lab-group>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-gap);color:var(--muted-foreground);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}.lab-group>summary::-webkit-details-marker{display:none}.lab-group[open]>summary{color:var(--foreground)}.lab-tools{display:flex;gap:.25rem}.lab-mini{height:1.5rem;padding:0 .5rem;background:transparent;color:var(--muted-foreground);line-height:1}.lab-mini:hover{background:var(--glass-in);color:var(--foreground)}.lab-rows{display:grid;grid-template-columns:9rem minmax(0,1fr) 3.5rem;align-items:center;gap:.375rem var(--space-gap);margin-top:var(--space-gap)}.lab-rows [hidden]{display:none}.lab-rows [data-row=lab-layers-1-style],.lab-rows [data-row=lab-layers-2-style]{margin-top:var(--space-gap)}.lab-layer{grid-column:2 / -1;display:flex;align-items:center;gap:var(--space-gap)}.lab-layer select{flex:1 1 auto;min-width:0}.lab-layer .lab-mini{flex:none}.lab-add{grid-column:1 / -1;justify-self:start;margin-top:var(--space-gap)}.lab-rows label{color:var(--muted-foreground);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}.lab-rows output{color:var(--muted-foreground);font-family:var(--font-mono);font-size:var(--text-sm);text-align:right}.lab-num{width:100%;padding:0;background:transparent;border:0;color:var(--muted-foreground);font-family:var(--font-mono);font-size:var(--text-sm);text-align:right;appearance:textfield;-moz-appearance:textfield}.lab-num::-webkit-outer-spin-button,.lab-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.lab-num:focus{color:var(--foreground)}.lab-colour{grid-column:2 / -1;position:relative;display:flex;align-items:center;gap:var(--space-gap)}.lab-swatch{flex:none;width:1.75rem;height:1.75rem;border:0;border-radius:.375rem;cursor:pointer}.lab-picker{position:absolute;left:0;bottom:0;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none}.lab-hex{flex:1 1 auto;min-width:0;padding:.25rem .5rem;background:var(--glass-in);border:0;border-radius:.375rem;color:var(--foreground);font-family:var(--font-mono);font-size:var(--text-sm)}.lab-rows input[type=range]{width:100%;height:1rem;margin:0;padding:0;appearance:none;-webkit-appearance:none;background:transparent;color:var(--foreground);cursor:pointer;touch-action:pan-y}.lab-rows input[type=range]::-webkit-slider-runnable-track{height:.625rem;border:0;background:linear-gradient(90deg,var(--foreground) var(--p, 0%),color-mix(in oklch,var(--muted-foreground),transparent 50%) var(--p, 0%));-webkit-mask-image:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px .5rem);mask-image:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px .5rem)}.lab-rows input[type=range]::-moz-range-track{height:.625rem;border:0;background:linear-gradient(90deg,var(--foreground) var(--p, 0%),color-mix(in oklch,var(--muted-foreground),transparent 50%) var(--p, 0%));mask-image:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px .5rem)}.lab-rows input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:2px;height:1rem;border:0;border-radius:1px;background:var(--foreground);margin-top:-.1875rem}.lab-rows input[type=range]::-moz-range-thumb{width:2px;height:1rem;border:0;border-radius:1px;background:var(--foreground)}.lab-rows input[type=checkbox]{accent-color:var(--foreground);justify-self:start}.lab-rows select{font:inherit;font-size:var(--text-sm);background:var(--glass-in);color:var(--foreground);border-radius:.5rem;padding:.25rem .5rem;width:100%}.lab-rows :focus-visible{outline:2px solid var(--ring);outline-offset:2px}@container (min-width: 72rem){.lab-stage{grid-column:span 8;aspect-ratio:auto;height:calc(100vh - 2 * var(--space-gap));position:sticky;top:var(--space-gap)}.lab-panel{grid-column:span 4;align-self:start;position:sticky;top:var(--space-gap);max-height:calc(100vh - 2 * var(--space-gap));overflow:auto;scrollbar-width:thin}}@media(max-width:48rem){.lab-rows{grid-template-columns:minmax(0,1fr) 3.5rem}.lab-rows label,.lab-colour,.lab-layer{grid-column:1 / -1}}
