.studio-bench{--bench-gutter:clamp(.75rem, 1.75vw, 1.25rem);--bench-shell:color-mix(in oklab, var(--secondary) 78%, var(--background));--bench-field:color-mix(in oklab, var(--card) 66%, var(--muted));--bench-edge:color-mix(in oklab, var(--primary) 28%, var(--border));--bench-grid:color-mix(in oklab, var(--primary) 19%, transparent);--bench-rail:#55564c;--bench-rail-ink:#fffdf4;--bench-rail-secondary:#e2e0d4;--bench-rail-rule:color-mix(in oklab, var(--bench-rail-ink) 30%, transparent);color:var(--foreground);padding:0 var(--bench-gutter) var(--bench-gutter);background:var(--bench-shell);border:1px solid var(--border);border-radius:12px;box-shadow:0 5px 16px -11px #463d2838}.dark .studio-bench{--bench-shell:color-mix(in oklab, var(--card) 72%, var(--secondary));--bench-field:color-mix(in oklab, var(--secondary) 78%, var(--card));--bench-rail:#43453c}.studio-bench__bar{margin:0 calc(-1 * var(--bench-gutter)) var(--bench-gutter);padding:.55rem var(--bench-gutter);background:var(--bench-rail);color:var(--bench-rail-ink);border-radius:11px 11px 0 0}.studio-bench__divider{background:var(--bench-rail-rule)}.studio-bench__title{letter-spacing:-.035em}.studio-bench__signal,.studio-bench__dropzone-label{font:500 .65rem/1.2 var(--font-mono-brand);text-transform:uppercase;letter-spacing:.09em}.studio-bench__signal{color:var(--bench-rail-secondary);align-items:center;gap:.48rem;display:inline-flex}.studio-bench__signal:before{background:var(--bench-rail-secondary);content:"";border-radius:50%;width:.42rem;height:.42rem}.studio-bench__clear{border-color:var(--bench-rail-rule);color:var(--bench-rail-ink);background:0 0}.studio-bench__clear:enabled:hover{background:color-mix(in oklab, var(--bench-rail-ink) 12%, transparent)}.studio-bench__clear:focus-visible{outline:2px solid var(--bench-rail-ink);outline-offset:2px;box-shadow:none}.studio-bench__dropzone{isolation:isolate;border:1px solid var(--bench-edge);color:var(--foreground);background-color:var(--bench-field);background-image:radial-gradient(ellipse at center, var(--bench-field) 10%, transparent 78%), radial-gradient(circle, var(--bench-grid) .85px, transparent 1px);background-position:50%;background-size:100% 100%,14px 14px;border-radius:8px;transition:background-color .16s,border-color .16s;position:relative;overflow:hidden}.studio-bench__dropzone:before,.studio-bench__dropzone:after{content:"";border-color:color-mix(in oklab, var(--primary) 56%, transparent);pointer-events:none;border-style:solid;width:.58rem;height:.58rem;position:absolute}.studio-bench__dropzone:before{border-width:1px 0 0 1px;top:.85rem;left:.85rem}.studio-bench__dropzone:after{border-width:0 1px 1px 0;bottom:.85rem;right:.85rem}button.studio-bench__dropzone:hover{border-color:var(--primary);background-color:color-mix(in oklab, var(--bench-field) 94%, var(--primary))}.studio-bench__dropzone:focus-visible,.studio-bench__sample:focus-visible{outline:2px solid var(--ring);outline-offset:3px}.studio-bench__dropzone-label{color:var(--muted-foreground);position:absolute;inset-block-start:1.1rem;inset-inline-start:1.15rem}.studio-bench__upload-icon{isolation:isolate;width:3.65rem;height:3.65rem;color:var(--primary);place-items:center;margin-block:.5rem .4rem;display:grid;position:relative}.studio-bench__upload-icon:before,.studio-bench__upload-icon:after{z-index:-1;content:"";border:1px solid var(--bench-edge);border-radius:10px;position:absolute;inset:0}.studio-bench__upload-icon:before{background:var(--secondary);transition:transform .18s;transform:translate(-6px,3px)rotate(-12deg)}.studio-bench__upload-icon:after{background:var(--card);box-shadow:0 2px 5px #43381e14}button.studio-bench__dropzone:hover .studio-bench__upload-icon:before{transform:translate(-9px,4px)rotate(-16deg)}.studio-bench__upload-title{color:var(--foreground);letter-spacing:-.025em;font-weight:600}.studio-bench__upload-hint,.studio-bench__gallery-action{color:var(--muted-foreground)}.studio-bench__gallery{counter-reset:sample}.studio-bench__gallery-title{color:var(--foreground)}.studio-bench__sample{counter-increment:sample;border:1px solid var(--border);background:var(--muted);border-radius:6px;grid-template-rows:minmax(0,1fr) auto;min-width:0;display:grid}.studio-bench__sample>img{object-position:center 62%;grid-area:1/1/2/2}.studio-bench__sample-caption{z-index:1;background:var(--card);color:var(--foreground);border-top:1px solid var(--border);letter-spacing:-.01em;grid-area:2/1;justify-content:space-between;align-items:baseline;gap:.25rem;padding:.44rem .55rem;font-size:.73rem;font-weight:550;line-height:1.25;display:flex}.studio-bench__sample-caption:after{content:counter(sample, decimal-leading-zero);color:var(--muted-foreground);font:500 .6rem/1 var(--font-mono-brand)}button.studio-bench__sample:hover{border-color:var(--primary)}button.studio-bench__sample:hover .studio-bench__sample-caption{background:var(--secondary);color:var(--primary-bright)}@media (width<=639px){.studio-bench__sample{min-height:clamp(6.75rem,32vw,8rem)}}@media (prefers-reduced-motion:reduce){.studio-bench__dropzone,.studio-bench__upload-icon:before{transition:none}button.studio-bench__dropzone:hover .studio-bench__upload-icon:before{transform:translate(-6px,3px)rotate(-12deg)}}
