.studio{--c-wall:#d8d1c4;--c-accent:#2f5b47;--c-trim:#f4f1ea;--s-floor:#c8a887;--s-glass:#cfe2ee;--s-sofa:#9aa0a6;--s-sofa-dark:#6e747a;--s-wood:#8a6a4b;--s-leaf:#5f8a5f;--s-pot:#b5603c;--s-rug:#b8ada0;--s-art:#e8b15c;--s-sky:#cfe2ee;--s-sun:#f4d9a8;--s-ground:#a8b391;gap:var(--space-lg);display:grid}.studio__stage{border-radius:var(--radius-md);border:1px solid var(--color-line);box-shadow:var(--shadow-md);background:var(--color-surface);position:relative;overflow:clip}.scenes .scene{block-size:auto;inline-size:100%;display:none}.scenes .scene[data-active]{display:block}.scene rect,.scene polygon,.scene path,.scene circle,.scene ellipse{transition:fill var(--duration-normal) var(--ease-in-out)}.studio__panel{gap:var(--space-md);align-content:start;display:grid}.field__label{font-size:var(--text-micro);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-ink-faint);margin-block-end:var(--space-xs);font-weight:700}.seg{background:var(--color-paper-deep);border-radius:var(--radius-pill);gap:4px;padding:4px;display:flex}.seg button{border-radius:var(--radius-pill);font-size:var(--text-sm);cursor:pointer;color:var(--color-ink-soft);transition:background var(--duration-fast) var(--ease-out-expo), color var(--duration-fast) var(--ease-out-expo);background:0 0;border:0;flex:1;padding:.5rem .4rem}.seg button[aria-pressed=true]{background:var(--color-surface-raised);color:var(--color-ink);box-shadow:var(--shadow-sm)}.surfaces{gap:var(--space-xs);display:grid}.surface{align-items:center;gap:var(--space-sm);border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer;text-align:start;inline-size:100%;transition:border-color var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo);padding:.55rem .7rem;display:flex}.surface[aria-pressed=true]{border-color:var(--color-ink);box-shadow:0 0 0 1px var(--color-ink)}.surface__dot{border-radius:var(--radius-sharp);flex:none;block-size:1.75rem;inline-size:1.75rem;box-shadow:inset 0 0 0 1px oklch(20% .02 60/.16)}.surface__text{line-height:1.25;display:grid}.surface__name{font-size:var(--text-sm);font-weight:500}.surface__code{font-size:var(--text-micro);color:var(--color-ink-faint)}.swatches{grid-template-columns:repeat(auto-fill,minmax(2.75rem,1fr));gap:5px;display:grid}.swatch{aspect-ratio:1;border-radius:var(--radius-sm);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo);border:0;padding:0;position:relative;box-shadow:inset 0 0 0 1px oklch(20% .02 60/.14)}.swatch:hover{box-shadow:inset 0 0 0 1px oklch(20% .02 60/.14), var(--shadow-md);z-index:2;transform:scale(1.14)}.swatch[aria-pressed=true]:after{content:"";border:2px solid;border-radius:3px;position:absolute;inset:5px}.studio__actions{gap:var(--space-xs);flex-wrap:wrap;display:flex}.studio__hint{font-size:var(--text-micro);color:var(--color-ink-faint)}.studio__noscript{padding:var(--space-md);border:1px dashed var(--color-line-strong);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--color-ink-soft)}.palette-family+.palette-family{margin-block-start:var(--space-xl)}.palette-grid{gap:var(--space-xs);grid-template-columns:repeat(auto-fill,minmax(min(100%,8.5rem),1fr));margin-block-start:var(--space-md);display:grid}.palette-cell{aspect-ratio:4/3;border-radius:var(--radius-sm);padding:var(--space-sm);font-size:var(--text-micro);transition:transform var(--duration-normal) var(--ease-out-expo);flex-direction:column;justify-content:flex-end;display:flex;box-shadow:inset 0 0 0 1px oklch(20% .02 60/.1)}.palette-cell:hover{box-shadow:inset 0 0 0 1px oklch(20% .02 60/.1), var(--shadow-md);transform:translateY(-3px)scale(1.02)}.palette-cell b{font-size:.8rem;font-weight:500}@media (width>=58rem){.studio{grid-template-columns:minmax(0,1.35fr) minmax(17rem,.65fr);align-items:start}}.color-note{padding:var(--space-md) var(--space-lg);border-inline-start:3px solid var(--color-ochre);background:var(--color-surface);border-radius:0 var(--radius-md) var(--radius-md) 0;max-inline-size:62ch;font-size:var(--text-sm);color:var(--color-ink-soft);margin-block-start:var(--space-lg)}.color-note__title{color:var(--color-ink);margin-block-end:var(--space-xs);font-weight:700}