.swatch-grid{grid-template-columns:repeat(6, minmax(var(--touch-target), 1fr));gap:var(--space-2);display:grid}@media (width<=400px){.swatch-grid{gap:6px}}.swatch{aspect-ratio:1;min-inline-size:var(--touch-target);min-block-size:var(--touch-target);border-radius:var(--radius-round);background:var(--swatch);cursor:pointer;border:0;place-items:center;padding:0;display:grid;position:relative;box-shadow:inset 0 0 0 1px #16392f24}[data-hydrated=true] .swatch{transition:transform var(--duration-quick) ease-out, box-shadow var(--duration-quick) ease-out}.swatch:hover{transform:scale(1.06)}.swatch:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.swatch[aria-checked=true]{box-shadow:inset 0 0 0 1px #16392f24, 0 0 0 3px var(--color-surface), 0 0 0 5.5px var(--color-title)}.swatch-check{fill:none;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;opacity:0;block-size:60%;inline-size:60%;transform:scale(.6)}[data-hydrated=true] .swatch-check{transition:opacity var(--duration-quick) ease-out, transform var(--duration-quick) ease-out}.swatch[data-check=light] .swatch-check{stroke:#fff}.swatch[data-check=dark] .swatch-check{stroke:var(--color-ink)}.swatch[aria-checked=true] .swatch-check{opacity:1;transform:scale(1)}@media (prefers-reduced-motion:reduce){[data-hydrated=true] .swatch,[data-hydrated=true] .swatch-check{transition:none}.swatch:hover{transform:none}}.swatch[data-finish]{background:radial-gradient(circle at 32% 28%, #ffffffbf, transparent 34%), linear-gradient(135deg, transparent 38%, #fff6 50%, transparent 62%), var(--swatch)}.swatch[data-finish]:after{content:"";background:var(--color-surface);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 1px #16392f99);block-size:16px;inline-size:16px;position:absolute;inset-block-start:-3px;inset-inline-end:-3px}.studio{gap:var(--space-4);grid-template-columns:minmax(0,1fr) 22rem;align-items:start;display:grid}@media (width<=860px){.studio{grid-template-columns:minmax(0,1fr)}}.studio-paper,.studio-tray{border:1px solid var(--glass-edge);border-radius:var(--radius-large);box-shadow:inset 0 1px #ffffffe6,0 18px 40px #0c3c2c29,0 2px 6px #0c3c2c14}.studio-paper{padding:var(--space-4);background:var(--glass-base);-webkit-tap-highlight-color:transparent}.studio-frame{inline-size:min(100%,100dvh - 11rem);min-inline-size:min(100%,18rem);margin-inline:auto;position:relative}.studio-sheet{aspect-ratio:1;border-radius:var(--radius-medium);background:var(--color-paper);touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;inline-size:100%;position:relative;overflow:hidden;box-shadow:0 1px 2px #0c3c2c1f}.studio-sheet[data-zoomed=true] .studio-canvas{cursor:grab}.studio-zoom{z-index:1;gap:var(--space-1);padding:var(--space-1);border-radius:var(--radius-medium);background:#ffffffdb;display:flex;position:absolute;inset-block-end:var(--space-2);inset-inline-end:var(--space-2);box-shadow:inset 0 0 0 1px #16392f1a,0 4px 12px #0c3c2c24}.studio-sheet:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.studio-canvas{block-size:100%;inline-size:100%;display:block;position:absolute;inset:0}.studio[data-status=ready] .studio-canvas{cursor:pointer}.studio[data-status=ready][data-tool=pick] .studio-canvas{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23ffffff' stroke-width='4.5'%3E%3Cpath d='M13.4 8.4l3-3a2.2 2.2 0 0 1 3.1 3.1l-3 3'/%3E%3Cpath d='M11.3 6.6l6 6'/%3E%3Cpath d='M14.2 9.6l-7.9 7.9a1.7 1.7 0 0 0-.4.7L5.2 20l1.8-.7a1.7 1.7 0 0 0 .7-.4l7.9-7.9'/%3E%3C/g%3E%3Cg stroke='%2316392f' stroke-width='2'%3E%3Cpath d='M13.4 8.4l3-3a2.2 2.2 0 0 1 3.1 3.1l-3 3'/%3E%3Cpath d='M11.3 6.6l6 6'/%3E%3Cpath d='M14.2 9.6l-7.9 7.9a1.7 1.7 0 0 0-.4.7L5.2 20l1.8-.7a1.7 1.7 0 0 0 .7-.4l7.9-7.9'/%3E%3C/g%3E%3C/svg%3E") 5 20,crosshair}.studio-status{padding:var(--space-5);font-weight:var(--font-weight-strong);color:var(--color-muted);text-align:center;place-items:center;margin:0;display:grid;position:absolute;inset:0}.studio-tray{gap:var(--space-5);padding:var(--space-5);background:var(--glass-strong);display:grid}.studio-tool-row{container:studio-tray/inline-size}@media (width<=400px){.studio-paper{padding:var(--space-2)}.studio-tray{padding:var(--space-3)}}.studio-row{justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.studio-tools{border-radius:var(--radius-medium);background:#16392f14;gap:4px;padding:4px;display:flex}.studio-tools button{min-block-size:var(--touch-target);padding-inline:var(--space-3);font:inherit;font-weight:var(--font-weight-strong);color:var(--color-muted);cursor:pointer;background:0 0;border:0;border-radius:9px;align-items:center;gap:6px;display:inline-flex}.studio-tools button[aria-pressed=true]{background:var(--color-surface);color:var(--color-title);box-shadow:0 1px 2px #0c3c2c29}.studio-tools button:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}@container studio-tray (width<=449px){.studio-tools{flex:1}.studio-tools button{min-inline-size:0;font-size:var(--font-size-small);flex-direction:column;flex:1 1 0;justify-content:center;gap:2px;padding:5px 6px;line-height:1.2}}.studio-history{gap:var(--space-2);display:flex}.studio-icon-button{inline-size:var(--touch-target);block-size:var(--touch-target);border-radius:var(--radius-medium);background:var(--color-surface);color:var(--color-title);cursor:pointer;border:0;place-items:center;padding:0;display:inline-grid;box-shadow:inset 0 0 0 1px #16392f24}.studio-icon-button:hover:not(:disabled){background:#f4faf7}.studio-icon-button:disabled{color:#8aa39a;cursor:default;background:#ffffff8c}.studio-icon{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex:none;block-size:22px;inline-size:22px}.studio-section{gap:var(--space-3);display:grid}.studio-heading{font-size:var(--font-size-body);font-weight:var(--font-weight-strong);margin:0;line-height:1.3}.studio-colors-head{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.palette-button,.mix-button{align-items:center;gap:var(--space-2);min-block-size:var(--touch-target);padding:0 var(--space-2) 0 var(--space-3);border-radius:var(--radius-medium);background:var(--color-surface);font:inherit;font-weight:var(--font-weight-strong);color:var(--color-title);cursor:pointer;border:0;display:inline-flex;box-shadow:inset 0 0 0 1px #16392f24}.palette-button:hover,.mix-button:hover{background:#f4faf7}.palette-button:focus-visible,.mix-button:focus-visible,.palette-option:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.palette-chip{flex:none;grid-template-columns:repeat(2,11px);gap:2px;display:grid}.palette-chip span,.palette-strip span{aspect-ratio:1;background:var(--swatch);border-radius:50%;box-shadow:inset 0 0 0 1px #16392f1f}.palette-button-more{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex:none;block-size:20px;inline-size:20px}.palette-button[aria-expanded=true] .palette-button-more{transform:rotate(180deg)}.mix-button{padding-inline:4px var(--space-3)}.mix-button-disc{background:conic-gradient(#ff4a4a,#ffc416,#a9e932,#34c8fd,#3376fb,#b03cff,#ff72b5,#ff4a4a);border-radius:50%;flex:none;place-items:center;block-size:36px;inline-size:36px;display:grid}.mix-button-disc svg{background:var(--color-surface);fill:none;block-size:22px;inline-size:22px;stroke:var(--color-title);stroke-width:2.6px;stroke-linecap:round;border-radius:50%;padding:2px}.studio-own{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.studio-own .swatch-grid{flex-wrap:wrap;gap:6px;display:flex}.studio-own .swatch{inline-size:var(--touch-target)}.studio-own .swatch-grid+.swatch-grid{border-inline-start:1px solid #16392f24;padding-inline-start:var(--space-2)}.studio-popover{inline-size:min(20rem,100vw - 16px);padding:var(--space-3);border:1px solid var(--glass-edge);border-radius:var(--radius-large);background:var(--color-surface);color:var(--color-ink);margin:0;position:fixed;inset:auto;box-shadow:0 18px 44px #0c3c2c3d,0 2px 6px #0c3c2c1a}.studio-popover::backdrop{background:0 0}.studio-popover-title{margin:0 0 var(--space-2);padding-inline:var(--space-1);font-weight:var(--font-weight-strong);color:var(--color-title)}.studio-popover.palette-list{inline-size:min(22.5rem,100vw - 16px)}.palette-list [role=radiogroup]{gap:4px;display:grid}.palette-option{align-items:center;gap:var(--space-3);min-block-size:52px;padding:6px var(--space-2);border-radius:var(--radius-medium);font:inherit;text-align:start;color:var(--color-ink);cursor:pointer;background:0 0;border:0;grid-template-columns:auto 1fr auto;display:grid}.palette-option:hover{background:#f1f7f4}.palette-option[aria-checked=true]{color:var(--color-title);font-weight:var(--font-weight-strong);background:#e8f3ee}.palette-strip{grid-template-rows:repeat(2,14px);grid-template-columns:repeat(7,14px);grid-auto-flow:column;gap:2px;display:grid}.palette-option-check{fill:none;stroke:currentColor;stroke-width:2.6px;stroke-linecap:round;stroke-linejoin:round;opacity:0;block-size:20px;inline-size:20px}.palette-option[aria-checked=true] .palette-option-check{opacity:1}.mixer:popover-open{gap:var(--space-3);display:grid}.mixer-head{align-items:center;gap:var(--space-3);display:flex}.mixer-head .studio-popover-title{margin:0}.mixer-preview{background:var(--swatch);border-radius:50%;flex:none;block-size:44px;inline-size:44px;box-shadow:inset 0 0 0 1px #16392f24}.mixer-slider{font-size:var(--font-size-small);font-weight:var(--font-weight-strong);color:var(--color-muted);gap:4px;display:grid}.mixer-slider input{inline-size:100%;block-size:var(--touch-target);appearance:none;cursor:pointer;background:0 0;margin:0}.mixer-slider input::-webkit-slider-runnable-track{background:var(--track);border-radius:9px;block-size:18px;box-shadow:inset 0 0 0 1px #16392f24}.mixer-slider input::-moz-range-track{background:var(--track);border-radius:9px;block-size:18px;box-shadow:inset 0 0 0 1px #16392f24}.mixer-slider input::-webkit-slider-thumb{border:3px solid var(--color-surface);background:var(--thumb);block-size:30px;inline-size:30px;box-shadow:0 0 0 1.5px var(--color-title), 0 3px 8px #0c3c2c4d;appearance:none;border-radius:50%;margin-block-start:-6px}.mixer-slider input::-moz-range-thumb{border:3px solid var(--color-surface);background:var(--thumb);block-size:24px;inline-size:24px;box-shadow:0 0 0 1.5px var(--color-title), 0 3px 8px #0c3c2c4d;border-radius:50%}.mixer-slider input:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px;border-radius:12px}.mixer .button{justify-self:end}.studio-finishes{gap:var(--space-2);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.studio-finish{min-block-size:76px;min-inline-size:0;padding:var(--space-2) 4px;border-radius:var(--radius-medium);font:inherit;font-size:var(--font-size-small);font-weight:var(--font-weight-strong);color:var(--color-ink);text-align:center;overflow-wrap:anywhere;cursor:pointer;background:#ffffffb3;border:0;align-content:center;justify-items:center;gap:6px;line-height:1.15;display:grid;position:relative;box-shadow:inset 0 0 0 1px #16392f1f}.studio-finish[aria-checked=true]{background:var(--color-surface);box-shadow:inset 0 0 0 2px var(--color-title)}.studio-finish-dot{border-radius:var(--radius-round);background:var(--c);flex:none;block-size:32px;inline-size:32px;box-shadow:inset 0 0 0 1px #16392f24}.studio-finish[data-finish=glitter] .studio-finish-dot,.studio-pick-mark[data-finish=glitter] .studio-finish-dot{background:radial-gradient(circle at 30% 62%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 68% 34%, #fff 0 1.3px, transparent 2.2px), radial-gradient(circle at 52% 80%, #fff 0 1px, transparent 2px), radial-gradient(circle at 76% 64%, #fff 0 1px, transparent 2px), var(--c)}.studio-finish[data-finish=metallic] .studio-finish-dot,.studio-pick-mark[data-finish=metallic] .studio-finish-dot{background:linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c) 42%, color-mix(in srgb, var(--c) 65%, #000) 78%, color-mix(in srgb, var(--c) 70%, #fff))}.studio-finish[data-finish=glow] .studio-finish-dot,.studio-pick-mark[data-finish=glow] .studio-finish-dot{background:color-mix(in srgb, var(--c) 75%, #fff);box-shadow:inset 0 0 0 1px #16392f1a, 0 0 10px 2px color-mix(in srgb, var(--c) 70%, transparent)}.studio-finish[data-finish=rainbow] .studio-finish-dot,.studio-pick-mark[data-finish=rainbow] .studio-finish-dot{background:conic-gradient(#ff5e5e,#ffb84d,#ffe94d,#6ee06e,#4dc3ff,#8e6cff,#ff5ec8,#ff5e5e)}.studio-finish[data-finish=pearl] .studio-finish-dot,.studio-pick-mark[data-finish=pearl] .studio-finish-dot{background:linear-gradient(135deg, color-mix(in srgb, var(--c) 35%, #fff), #eaf6ff 45%, color-mix(in srgb, var(--c) 30%, #f1e6ff) 75%, #fffaf0)}.studio-progress{align-items:center;gap:var(--space-3);font-size:var(--font-size-small);font-weight:var(--font-weight-strong);color:var(--color-muted);white-space:nowrap;display:flex}.studio-meter{border-radius:var(--radius-round);background:#16392f1a;flex:1;block-size:8px;overflow:hidden}.studio-meter>i{border-radius:inherit;background:var(--color-title);block-size:100%;inline-size:100%;transform:translateX(calc((var(--progress,0) - 1) * 100%));display:block}.studio-meter:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))>i{transform:translateX(calc((1 - var(--progress,0)) * 100%))}[data-hydrated=true] .studio-meter>i{transition:transform var(--duration-gentle) ease}.studio-hint{font-size:var(--font-size-small);color:var(--color-muted);margin:0}.studio-announcer{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){[data-hydrated=true] .studio-meter>i{transition:none}}.studio-finishline{gap:var(--space-3);display:grid}@media (width>=861px){.studio-finishline{z-index:1;margin:0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5));padding:var(--space-4) var(--space-5) var(--space-5);border-radius:0 0 var(--radius-large) var(--radius-large);background:var(--color-surface);position:sticky;inset-block-end:0;box-shadow:0 -10px 20px -14px #0c3c2c59}}.studio-done{inline-size:100%}.studio-nudge{gap:var(--space-2);padding:var(--space-3) var(--space-4) var(--space-4);border-radius:var(--radius-medium);background:var(--color-surface);display:grid;box-shadow:inset 0 0 0 1px #16392f1f,0 6px 18px #0c3c2c1f}.studio-nudge-heading{font-weight:var(--font-weight-strong);color:var(--color-title);text-wrap:balance;margin:0;line-height:1.3}.studio-nudge-body{font-size:var(--font-size-small);color:var(--color-muted);text-wrap:pretty;margin:0;line-height:1.45}.studio-nudge-actions{gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));margin-block-start:var(--space-1);display:grid}.studio-nudge-actions .button{padding-inline:var(--space-3)}@media (prefers-reduced-motion:no-preference){.studio-nudge{animation:studio-nudge-in var(--duration-gentle) ease-out}}@keyframes studio-nudge-in{0%{opacity:0;translate:0 var(--space-2)}}.studio-recolor-actions{gap:var(--space-2);display:grid}.studio-cancel{inline-size:100%}.studio-done:disabled{color:var(--color-muted);box-shadow:none;cursor:default;background:#16392f1f;transform:none}.studio-tip{inset-block-start:var(--space-3);inset-inline:var(--space-3);z-index:1;inline-size:fit-content;max-inline-size:calc(100% - 2 * var(--space-3));padding:var(--space-2) var(--space-4);border-radius:var(--radius-medium);color:#fff;font-weight:var(--font-weight-strong);text-align:center;pointer-events:none;background:#16392fe0;margin:0 auto;position:absolute}@media (prefers-reduced-motion:no-preference){.studio-tip{animation:studio-tip-in var(--duration-gentle) ease-out}}@keyframes studio-tip-in{0%{opacity:0}}.studio-ready{inset-block-start:var(--space-3);inset-inline:var(--space-3);z-index:1;justify-content:center;align-items:baseline;gap:2px var(--space-3);inline-size:fit-content;max-inline-size:calc(100% - 2 * var(--space-3));padding:var(--space-2) var(--space-4);border-radius:var(--radius-medium);color:#fff;font-weight:var(--font-weight-strong);text-align:center;pointer-events:none;background:#16392fe6;flex-wrap:wrap;margin:0 auto;display:flex;position:absolute}.studio-ready a{min-block-size:var(--touch-target);margin-block:calc((var(--touch-target) - 1.5em) / -2);color:#ffe08a;text-underline-offset:3px;pointer-events:auto;align-items:center;display:inline-flex}@media (prefers-reduced-motion:no-preference){.studio-ready{animation:studio-tip-in var(--duration-gentle) ease-out}}.studio-pick-mark{z-index:1;pointer-events:none;block-size:56px;inline-size:56px;margin:-28px 0 0 -28px;position:absolute}.studio-pick-ring{fill:none;filter:drop-shadow(0 0 1px #fff)drop-shadow(0 0 2px #fff);block-size:100%;inline-size:100%;display:block;overflow:visible}.studio-pick-ring circle{stroke:var(--color-ink);stroke-width:3.5px;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transform-origin:50%;transform:rotate(-90deg)}.studio-pick-mark[data-phase=empty] circle{stroke:var(--color-muted);stroke-dasharray:6 6.5}.studio-pick-drop{background:var(--color-surface);border-radius:50%;place-items:center;block-size:44px;inline-size:44px;margin-inline-start:-22px;display:grid;position:absolute;inset-block-end:calc(100% + 4px);inset-inline-start:50%;box-shadow:inset 0 0 0 1px #16392f1f,0 6px 16px #0c3c2c4d}.studio-pick-mark[data-below=true] .studio-pick-drop{inset-block:calc(100% + 4px) auto}.studio-pick-drop .studio-finish-dot{block-size:34px;inline-size:34px}.studio-pick-mark[data-phase=hold] circle{animation:.4s linear .2s both studio-pick-draw}@keyframes studio-pick-draw{0%{opacity:0;stroke-dashoffset:100px}1%{opacity:1}to{opacity:1;stroke-dashoffset:0}}@media (prefers-reduced-motion:no-preference){.studio-pick-mark[data-phase=picked] .studio-pick-drop{animation:.32s cubic-bezier(.34,1.56,.64,1) both studio-pick-drop}.studio-pick-mark[data-phase=picked],.studio-pick-mark[data-phase=empty]{animation:.26s ease-in .76s both studio-pick-out}.studio-pick-mark[data-phase=empty] .studio-pick-ring{animation:.36s ease-in-out studio-pick-shake}}@media (prefers-reduced-motion:reduce){.studio-pick-mark[data-phase=hold] circle{animation:0s step-end .2s both studio-pick-shown}}@keyframes studio-pick-shown{0%{opacity:0}to{opacity:1}}@keyframes studio-pick-drop{0%{opacity:0;translate:0 14px;scale:.3}}@keyframes studio-pick-out{to{opacity:0}}@keyframes studio-pick-shake{20%,60%{translate:-4px}40%,80%{translate:4px}}.studio-find{justify-self:start}.studio-report{justify-self:start;align-items:center;gap:var(--space-2);min-block-size:var(--touch-target);padding-inline:var(--space-2);border-radius:var(--radius-small);font:inherit;font-size:var(--font-size-small);font-weight:var(--font-weight-strong);color:var(--color-muted);cursor:pointer;--icon-fill:#16392f14;background:0 0;border:0;margin-block-start:calc(var(--space-2) * -1);margin-inline-start:calc(var(--space-2) * -1);display:inline-flex}.studio-report .icon{block-size:1.25rem;inline-size:1.25rem}.studio-report:hover{color:var(--color-ink);text-decoration:underline}.studio-report:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.studio-dock{display:none}[data-island=studio]{--studio-dock-height:calc(2px + 20px + var(--touch-target))}@media (width<=860px){.studio-dock{z-index:2;margin-block:calc(-1 * var(--space-2));border:1px solid var(--glass-edge);border-radius:var(--radius-large);background:var(--glass-strong);display:block;position:sticky;inset-block-end:calc(max(var(--tab-bar-reach,0px), env(safe-area-inset-bottom,0px)) + var(--space-2));box-shadow:inset 0 1px #ffffffe6,0 10px 26px #0c3c2c33}.studio-dock-row{align-items:center;gap:var(--space-2);padding:10px var(--space-5);overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--space-5);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg, transparent, #000 var(--space-3), #000 calc(100% - var(--space-3)), transparent);mask-image:linear-gradient(90deg, transparent, #000 var(--space-3), #000 calc(100% - var(--space-3)), transparent);display:flex;overflow-x:auto}.studio-dock-row::-webkit-scrollbar{display:none}.studio-dock .swatch-grid{gap:var(--space-2);flex:none;display:flex}.studio-dock .swatch-grid:not(:last-child){border-inline-end:1px solid #16392f29;padding-inline-end:var(--space-2)}.studio-dock-recent-room{display:none}:root[data-recent] .studio-dock-recent-room{inline-size:calc(var(--recent-colors) * (var(--touch-target) + var(--space-2)) + 1px);block-size:var(--touch-target);border-inline-end:1px solid #16392f29;flex:none;display:block}.studio-dock .palette-button,.studio-dock .mix-button{scroll-snap-align:start;flex:none}.studio-dock .palette-button{padding-inline:var(--space-2) 2px}.studio-dock .swatch{inline-size:var(--touch-target);scroll-snap-align:start;flex:none}.studio-tray .studio-colors{display:none}}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){@media (width<=860px){.studio-dock{-webkit-backdrop-filter:blur(16px)saturate(1.4);backdrop-filter:blur(16px)saturate(1.4)}}}.studio-finish-lock{background:var(--color-surface);block-size:22px;inline-size:22px;color:var(--color-title);--icon-fill:var(--color-news);border-radius:50%;place-items:center;display:grid;position:absolute;inset-block-start:4px;inset-inline-end:4px;box-shadow:0 1px 3px #0c3c2c40}.studio-finish-lock .icon{block-size:15px;inline-size:15px}[data-island=studio]:not([data-accessories]) .studio-wear,[data-island=studio][data-accessories="0"] .studio-wear{display:none}.studio-wear-lead{font-size:var(--font-size-small);color:var(--color-muted);margin:2px 0 0}.studio-wear-items{gap:var(--space-2);overscroll-behavior-x:contain;scrollbar-width:thin;min-block-size:calc(8rem + 6px);margin:-3px;padding:3px;display:flex;position:relative;overflow-x:auto}.studio-wear-items:empty:before{content:"";border-radius:var(--radius-medium);background:#ffffff73;flex:1;box-shadow:inset 0 0 0 1px #16392f14}.studio-item{block-size:8rem;min-inline-size:5.75rem;padding:var(--space-2) 4px 6px;border-radius:var(--radius-medium);font:inherit;font-size:var(--font-size-small);font-weight:var(--font-weight-strong);color:var(--color-ink);text-align:center;cursor:pointer;background:#ffffffb3;border:0;flex:1 1 0;grid-template-rows:auto 1fr;align-content:start;justify-items:center;gap:6px;line-height:1.15;display:grid;position:relative;box-shadow:inset 0 0 0 1px #16392f1f}@media (hover:hover){.studio-item:hover:not(:disabled){background:var(--color-surface)}}.studio-item:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.studio-item[aria-pressed=true]{background:var(--color-surface);box-shadow:inset 0 0 0 2px var(--color-title)}.studio-item:disabled{cursor:default}.studio:not([data-status=ready]) .studio-item{opacity:.6}.studio-item-paper{border-radius:var(--radius-small);background:var(--color-paper);block-size:60px;inline-size:60px;display:block;overflow:hidden;box-shadow:inset 0 0 0 1px #16392f1a}.studio-item-picture{block-size:100%;inline-size:100%;display:block}.studio-item-name{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;align-self:center;max-inline-size:100%}.studio-item-worn{background:var(--color-title);color:#fff;border-radius:50%;place-items:center;block-size:22px;inline-size:22px;display:grid;position:absolute;inset-block-start:4px;inset-inline-start:4px}.studio-item-worn .icon{stroke-width:3px;block-size:15px;inline-size:15px}.studio-item-lock{background:var(--color-surface);block-size:22px;inline-size:22px;color:var(--color-title);--icon-fill:var(--color-news);border-radius:50%;place-items:center;display:grid;position:absolute;inset-block-start:4px;inset-inline-end:4px;box-shadow:0 1px 3px #0c3c2c40}.studio-item-lock .icon{block-size:15px;inline-size:15px}@media (prefers-reduced-motion:no-preference){.studio-item{transition:background-color var(--duration-quick) ease, box-shadow var(--duration-quick) ease, transform var(--duration-quick) ease}.studio-item:active:not(:disabled){transform:scale(.97)}.studio-item-worn{animation:studio-item-worn-in var(--duration-gentle) cubic-bezier(.34, 1.56, .64, 1)}.studio-item[aria-busy=true] .studio-item-paper{animation:.9s ease-in-out infinite studio-item-busy}}@keyframes studio-item-worn-in{0%{opacity:0;transform:scale(.4)}}@keyframes studio-item-busy{50%{opacity:.55}}.studio-finish-note{align-items:start;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-medium);font-size:var(--font-size-small);color:var(--color-ink);--icon-fill:var(--color-news);background:#fff4d1;margin:0;line-height:1.4;display:flex}.studio-finish-note .icon{block-size:18px;inline-size:18px;color:var(--color-title);flex:none;margin-block-start:1px}