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