[data-site=studio-page]{min-inline-size:0;padding-block:40px 96px}[data-site=studio-page]>header{gap:var(--veneer-space-related);max-inline-size:72ch;margin-block-end:28px;display:grid}[data-site=studio-page] h1{font:500 var(--veneer-text-title-size)/1.1 var(--veneer-font-display);letter-spacing:-.02em;margin:0}[data-site=studio-page]>header p{color:var(--veneer-color-text-subtle);margin:0}[data-site=studio]{grid-template-columns:344px minmax(0,1fr);align-items:start;gap:28px;display:grid}[data-site=studio]>[data-studio=controls]{overscroll-behavior:contain;border:1px solid var(--veneer-color-border);border-radius:var(--veneer-radius-surface);background:var(--veneer-color-surface);scrollbar-width:thin;max-block-size:calc(100dvh - 92px);padding:14px;position:sticky;inset-block-start:76px;overflow:auto}[data-site=studio] [data-studio=group]{border-block-end:1px solid var(--veneer-color-border);gap:10px;padding-block:14px;display:grid}[data-site=studio] [data-studio=group]:last-child{border-block-end:0}[data-site=studio] [data-studio=group]>h3{font:600 11px/1 var(--veneer-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--veneer-color-text-subtle);margin:0}[data-site=studio] [data-studio=hint]{color:var(--veneer-color-text-faint);align-items:center;gap:6px;margin:0;font-size:12px;display:flex}[data-site=studio] [data-studio=hint] svg{block-size:14px;inline-size:14px}[data-site=studio] [data-studio=row]{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px;min-block-size:30px;display:grid}[data-site=studio] [data-studio=row]:has(>[data-studio=label]){grid-template-columns:80px minmax(0,1fr) auto}[data-site=studio] [data-studio=row][data-dial]{grid-template-columns:80px minmax(0,1fr)}[data-site=studio] [data-studio=row][data-dial] [data-scope=segmented]{inline-size:100%}[data-site=studio] [data-studio=row]>[data-studio=label]{color:var(--veneer-color-text-subtle);text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}[data-site=studio] [data-studio=row][data-set]>[data-studio=label]{color:var(--veneer-color-text)}[data-site=studio] [data-studio=row]>[data-studio=label]+:not(button){min-inline-size:0}[data-site=studio] [data-studio=colour]{align-items:center;gap:8px;display:flex}[data-site=studio] input[type=color]{border:1px solid var(--veneer-color-border-strong);cursor:pointer;background:0 0;border-radius:50%;flex:none;block-size:28px;inline-size:28px;padding:0}[data-site=studio] input[type=color]::-webkit-color-swatch-wrapper{padding:2px}[data-site=studio] input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}[data-site=studio] input[type=color]::-moz-color-swatch{border:0;border-radius:50%}[data-site=studio] :is([data-studio=hex],[data-add] input){box-sizing:border-box;border:1px solid var(--veneer-color-border);border-radius:var(--veneer-radius-control);background:var(--veneer-color-page);block-size:28px;inline-size:100%;min-inline-size:0;color:var(--veneer-color-text);font:12px/1 var(--veneer-font-mono);padding:0 8px}[data-site=studio] :is([data-studio=hex],[data-add] input):focus-visible{outline:2px solid var(--veneer-color-focus);outline-offset:1px}[data-site=studio] [data-add][data-token]{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto}[data-site=studio] [data-studio=pick]{gap:6px;display:grid}[data-site=studio] [data-studio=rules]{gap:4px;margin:0;padding:0;list-style:none;display:grid}[data-site=studio] [data-studio=rules] li{border-radius:var(--veneer-radius-control);background:var(--veneer-color-surface-sunken);justify-content:space-between;align-items:center;gap:8px;padding-inline-start:8px;display:flex}[data-site=studio] [data-studio=rules] code{font:12px/1.4 var(--veneer-font-mono);overflow-wrap:anywhere}[data-site=studio] [data-studio=presets]{border-block-end:1px solid var(--veneer-color-border);flex-wrap:wrap;gap:6px;margin-block-end:12px;padding-block-end:12px;display:flex}[data-site=studio] [data-studio=presets] button{cursor:pointer;border:1px solid var(--veneer-color-border);background:var(--veneer-color-page);block-size:26px;color:var(--veneer-color-text);font:500 12px/1 var(--veneer-font-sans);transition:border-color var(--veneer-duration-fast) var(--veneer-ease-out);border-radius:999px;align-items:center;gap:6px;padding:0 10px 0 6px;display:inline-flex}[data-site=studio] [data-studio=presets] button:hover{border-color:var(--veneer-color-border-strong)}[data-site=studio] [data-studio=presets] button:focus-visible{outline:2px solid var(--veneer-color-focus);outline-offset:1px}[data-site=studio] [data-studio=swatch]{background:var(--swatch);block-size:14px;inline-size:14px;box-shadow:inset 0 0 0 1px color-mix(in oklch, currentColor 20%, transparent);border-radius:50%}[data-site=studio] [data-studio=bar]{justify-content:flex-end;display:flex}[data-site=studio]>[data-studio=main]{gap:16px;min-inline-size:0;display:grid}[data-site=studio] [data-studio=problem]{border-radius:var(--veneer-radius-control);background:var(--veneer-color-critical-soft,color-mix(in oklch, var(--veneer-color-critical-solid,#c92a2a) 14%, transparent));color:var(--veneer-color-text);margin:0;padding:10px 12px;font-size:13px}[data-site=studio] [data-studio=stage]{border:1px solid var(--veneer-color-border);border-radius:var(--veneer-radius-surface);background:var(--veneer-color-page);color:var(--veneer-color-text);font-family:var(--veneer-font-sans);font-size:var(--veneer-text-body-size);transition:background-color var(--veneer-duration-base) var(--veneer-ease-out);gap:16px;padding:clamp(16px,3vw,28px);display:grid}[data-site=studio] [data-studio=board]{gap:var(--veneer-space-group);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:start;display:grid}[data-site=studio] [data-studio=board]>[data-scope=card]>:not(header){gap:14px;display:grid}[data-site=studio] [data-studio=line]{flex-wrap:wrap;align-items:center;gap:8px 10px;display:flex}[data-site=studio] [data-studio=contrast]{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}[data-site=studio] [data-studio=contrast] li{border:1px solid var(--veneer-color-border);color:var(--veneer-color-text-subtle);border-radius:999px;align-items:baseline;gap:6px;padding:3px 8px;font-size:12px;display:flex}[data-site=studio] [data-studio=contrast] b{font:600 12px/1 var(--veneer-font-mono);color:var(--veneer-color-text)}[data-site=studio] [data-studio=contrast] li[data-low]{border-color:var(--veneer-color-critical-border,currentColor)}[data-site=studio] [data-studio=contrast] li[data-low] b{color:var(--veneer-color-critical-text,inherit)}[data-site=studio] [data-studio=output]{gap:10px;display:grid}[data-site=studio] [data-studio=output] header{flex-wrap:wrap;align-items:center;gap:8px;display:flex}[data-site=studio] [data-studio=output] h2{font:500 13px/1 var(--veneer-font-mono);margin:0 auto 0 0}[data-site=studio] [data-studio=output] pre{border-radius:var(--veneer-radius-surface);background:var(--veneer-color-surface-sunken);max-block-size:420px;font:12.5px/1.6 var(--veneer-font-mono);margin:0;padding:16px;overflow:auto}@media (width<=899.98px){[data-site=studio]{grid-template-columns:minmax(0,1fr)}[data-site=studio]>[data-studio=controls]{max-block-size:none;position:static}}[data-site=studio] [data-studio=row]>div:has(>[data-scope=range-head]){grid-template-columns:84px minmax(0,1fr) 44px;align-items:center}[data-site=studio] [data-studio=row] [data-scope=range-head]{display:contents}[data-site=studio] [data-studio=row] [data-scope=range-head]>span{font:400 13px/1.2 var(--veneer-font-sans);letter-spacing:0;text-transform:none;color:var(--veneer-color-text-subtle);text-overflow:ellipsis;white-space:nowrap;grid-area:1/1;overflow:hidden}[data-site=studio] [data-studio=row][data-set] [data-scope=range-head]>span{color:var(--veneer-color-text)}[data-site=studio] [data-studio=row] [data-scope=range-head]>output{font:12px/1 var(--veneer-font-mono);color:var(--veneer-color-text-subtle);grid-area:1/3;justify-self:end}[data-site=studio] [data-studio=row]>div:has(>[data-scope=range-head])>[data-scope=slider]{grid-area:1/2}