#studio .studio-canvas { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; background: linear-gradient(180deg, #091421d9, #0c192638 27%, #0c192614 58%, #091421ed), var(--studio-backdrop, none) center / cover no-repeat; isolation: isolate; }
#studio .studio-canvas-top, #studio .studio-zoom, #studio .studio-preview-heading { min-width: 0; flex: 1; }
#studio #studio-preview-model { display: block; color: #edf7ff; font-size: 13px; letter-spacing: .02em; margin-bottom: 4px; }
#studio #studio-preview-caption { text-shadow: 0 1px 3px #000b; }
#studio .studio-canvas { overflow: hidden; }
#studio .studio-garment-viewport { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; overflow: visible; position: relative; z-index: 0; padding: 10px 8px; isolation: isolate; }
#studio .studio-canvas-top,
#studio .studio-canvas > .studio-zoom,
#studio .studio-canvas > .studio-mockup-thumbnails { position: relative; z-index: 3; }

#studio .studio-mockup-pair .studio-garment { background: transparent; box-shadow: none; border: 0; border-radius: 0; overflow: visible; }
#studio .studio-mockup-pair .studio-garment > img { mix-blend-mode: normal; mask-size: contain; mask-position: center; mask-repeat: no-repeat; filter: drop-shadow(0 0 1px #ffffff55) drop-shadow(0 0 9px #dcecff25) drop-shadow(0 12px 10px #0005); }
#studio .studio-mockup-pair.is-paired { gap: 12px; }
#studio .studio-mockup-pair.is-paired > figure { margin-inline: 0; }
#studio .studio-mockup-pair.is-paired > figure:last-child { z-index: 1; }
#studio .studio-sleeve-column { display: flex; flex: 0 1 22%; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding-left: 8px; }
#studio .studio-sleeve-column[hidden] { display: none; }
#studio .studio-sleeve-column figure { flex: 1 1 0; min-height: 0; }
#studio .studio-sleeve-column figcaption { font-size: 8px; padding: 3px 5px; }
#studio .studio-mockup-pair.has-sleeves > figure { flex: 1 1 39%; }
#studio .studio-canvas-top { grid-column: 1 / -1; grid-row: 1; min-width: 0; gap: 14px; padding-bottom: 6px; flex-wrap: nowrap; align-items: flex-start; }
#studio .studio-canvas-top > span { flex-shrink: 0; color: #c9e6f3; font-size: 9px; }
#studio .studio-preview-heading { min-width: 0; flex: 1; }
#studio #studio-preview-model { display: block; color: #edf7ff; font-size: 13px; letter-spacing: .02em; margin-bottom: 4px; }
#studio #studio-preview-caption { margin: 0; text-align: left; font-size: 9px; line-height: 1.5; color: #e2edf7; letter-spacing: normal; }
#studio .studio-canvas > .studio-zoom { grid-column: 3; grid-row: 2; align-self: center; display: flex; flex-direction: column; gap: 10px; margin: 0; position: relative; z-index: 3; }
#studio .studio-zoom button { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; background: #101e30e8; color: #e6f7ff; border: 1px solid #69839b80; border-radius: 14px; cursor: pointer; box-shadow: 0 4px 14px #0003; transition: background .18s, border-color .18s; }
#studio .studio-zoom button:hover:not(:disabled) { background: #203b55; border-color: #88dcf5; }
#studio .studio-zoom button:disabled { opacity: .4; cursor: default; }
#studio .studio-zoom button:focus-visible { outline: 2px solid #88dcf5; outline-offset: 3px; }
#studio .studio-zoom svg { width: 22px; height: 22px; }
#studio .studio-zoom output { color: #e2edf7; font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; }
#studio .studio-zoom input[hidden] { display: none; }
#studio .studio-canvas > .studio-mockup-thumbnails { grid-column: 1 / -1; grid-row: 3; }
#studio .studio-preview-color-picker { grid-column: 1; grid-row: 2; align-self: stretch; position: relative; z-index: 3; display: flex; align-items: center; min-height: 0; min-width: 0; }
#studio .studio-preview-color-picker[hidden] { display: none; }
#studio #studio-preview-colors { display: flex; flex-direction: column; align-items: center; gap: 8px; max-height: 100%; min-height: 0; width: 44px; overflow-y: auto; overflow-x: hidden; padding: 5px; scrollbar-width: thin; }
#studio #studio-preview-colors button { flex: 0 0 34px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #dcefff; border-radius: 50%; background: transparent; padding: 4px; cursor: pointer; }
#studio #studio-preview-colors button > span { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px #ffffff55; }
#studio #studio-preview-colors button[aria-pressed="true"] { border-color: #88dcf5; box-shadow: 0 0 0 1px #88dcf5; }
#studio #studio-preview-colors button:focus-visible { outline: 2px solid #edf9ff; outline-offset: 2px; }
#studio .studio-mockup-pair { display: flex; align-items: stretch; justify-content: center; min-height: 0; width: 100%; height: 100%; gap: 8px; }
#studio .studio-mockup-pair figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; flex: 1; min-width: 0; min-height: 0; margin: 0; }
#studio .studio-mockup-pair figure[hidden] { display: none; }
#studio .studio-mockup-pair .studio-garment { display: block; flex: none; aspect-ratio: auto; width: 100%; min-height: 0; max-width: 370px; max-height: none; height: 100%; margin: 0; }
#studio .studio-mockup-pair .studio-garment > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#studio .studio-mockup-pair figcaption { position: relative; z-index: 2; background: #0b1726; padding: 3px 8px; margin: 6px 0; border: 1px solid #435b74; border-radius: 8px; color: #d7e4f3; font-size: 9px; }
#studio .studio-artwork-surface { position: absolute; pointer-events: auto; transform-origin: center; }
#studio #studio-companion-zones { position: absolute; inset: 0; pointer-events: none; }
#studio .studio-mockup-thumbnails { display: flex; gap: 6px; width: 100%; overflow-x: auto; padding: 8px 4px; border-top: 1px solid #334359; flex-shrink: 0; }
#studio .studio-mockup-thumbnails button { display: flex; flex-direction: column; align-items: center; flex: 1 0 58px; gap: 4px; padding: 5px; background: #101b29; color: #d7e4f3; border: 1px solid #334359; border-radius: 8px; font-size: 9px; cursor: pointer; }
#studio .studio-mockup-thumbnails button[aria-pressed="true"] { border-color: #65d8ff; box-shadow: 0 0 8px #575eff70; }
#studio .studio-preview-card { flex: 1 0 82px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
#studio .studio-preview-card > [data-studio-view] { flex: 1; width: 100%; min-height: 82px; }
#studio .studio-preview-card > [data-studio-view="full"] { justify-content: center; gap: 12px; padding: 16px 8px; }
#studio .studio-preview-card > [data-studio-view="full"] > span[aria-hidden] { height: 32px; width: 32px; font-size: 28px; line-height: 1; }
#studio .studio-preview-card > [data-studio-view="full"] > span:last-child { font-size: 10px; line-height: 1.4; }
#studio .studio-preview-card > .studio-preview-edit { flex: none; flex-direction: row; justify-content: center; gap: 4px; min-height: 36px; padding: 6px 4px; color: #dcefff; background: #172b40; font-size: 9px; }
#studio .studio-preview-edit svg { width: 14px; height: 14px; flex-shrink: 0; }
#studio .studio-preview-edit:hover { border-color: #65d8ff; background: #203b55; }
#studio .studio-preview-card button:focus-visible { outline: 2px solid #88dcf5; outline-offset: 2px; }
#studio .studio-mockup-thumbnails img { height: 46px; width: 48px; object-fit: contain; }
#studio .studio-mockup-thumbnails button > span[aria-hidden] { height: 46px; display: grid; place-items: center; font-size: 24px; }
#studio .studio-mockup-miniature { position: relative; flex: 0 0 46px; width: 48px; height: 46px; overflow: hidden; pointer-events: none; }
#studio .studio-mockup-miniature .studio-garment { background: transparent; box-shadow: none; border-radius: 0; }
#studio .studio-mockup-miniature .studio-garment > img { mix-blend-mode: normal; }
@media (max-width: 900px) { #studio .studio-garment-viewport { height: clamp(240px, 44dvh, 380px); } }