/* Studio section: the app's Studio tab, to play with. It builds on the shared Studio screen in site.css (also used by
   the hero) and extends it under .studio-section only. Inside the phone, sizes are iOS points (var(--pt)) from
   StudioView.swift on an iPhone 17 (402 × 874 pt): you stand tall on the studio wall, with your clothes in a glass
   panel over the bottom that grows into a grid, or goes away so the look fills the screen. */

.studio-section {
  --studio-snappy: cubic-bezier(0.2, 0.9, 0.25, 1);
  background: var(--paper);
}

/* ---------- Layout: the phone beside the copy on wide screens, stacked on small ones ---------- */
.studio-section .studio-layout {
  display: grid;
  gap: clamp(36px, 6vw, 56px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "stage" "points";
}
.studio-section .studio-head { grid-area: head; margin-bottom: 0; }
.studio-section .studio-head .h2 em { white-space: nowrap; }
.studio-section .studio-stage { grid-area: stage; min-width: 0; }
.studio-section .studio-points { grid-area: points; margin-top: 0; gap: 20px; }
.studio-section .studio-points strong { color: var(--ink); }
.studio-section .studio-points p { text-wrap: pretty; }
.studio-section .studio-points em { font-style: normal; font-weight: 600; color: var(--ink); }

@media (min-width: 640px) and (max-width: 959px) {
  .studio-section .studio-points { grid-template-columns: 1fr 1fr; gap: 24px 32px; }
}
@media (min-width: 960px) {
  .studio-section .studio-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "stage ." "stage head" "stage points" "stage .";
    column-gap: clamp(48px, 6vw, 96px);
    row-gap: 0;
  }
  .studio-section .studio-points { margin-top: 40px; }
}

/* ---------- The stage around the phone ---------- */
.studio-section .studio-stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: clamp(20px, 4vw, 44px) clamp(8px, 3vw, 40px) clamp(20px, 3vw, 32px);
  border-radius: var(--radius-lg);
  /* Darker than the section's paper from top to bottom, so the panel's edge reads all the way round. */
  background:
    radial-gradient(70% 42% at 50% 46%, rgba(255, 255, 255, 0.7), transparent 72%),
    linear-gradient(180deg, var(--sand) 0%, var(--paper-2) 100%);
}
.studio-section .studio-try {
  display: inline-flex; align-items: center; gap: 10px;
  max-width: 100%;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  background: var(--white); box-shadow: var(--shadow-1);
  font-size: 14.5px; font-weight: 550; line-height: 1.35; color: var(--ink-2);
  text-wrap: balance;
}
.studio-section .studio-try svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.studio-section .studio-try strong { color: var(--ink); font-weight: 650; }
@media (max-width: 520px) { .studio-try { border-radius: 18px; } }
.studio-section .studio-note { margin-top: 0; max-width: 32em; color: var(--ink-2); }
.studio-section .studio-nowrap { white-space: nowrap; }

/* The phone: as large as fits, never wider than 84% of a small screen or taller than the window. */
.studio-section .studio-phone { --phone-w: var(--demo-phone); }
@supports (height: 100svh) {
  .studio-section .studio-phone { --phone-w: min(var(--demo-phone), max(300px, calc((100svh - 130px) / 2.1))); }
}

/* =====================================================================================================
   The Studio screen. Where things go, in pt, depends on the panel (at rest or put away) and on comparing.
   ===================================================================================================== */
.studio-section .studio-screen {
  --single-top: 100;  /* the look, at rest */
  --single-h: 530;
  --cmp-top: 190;     /* each side while comparing: 180 × 322.6 pt, centred in the picture's room */
  --pill-bottom: 270; /* "Dressing you…" and hints sit at the bottom of the picture */
}
.studio-section .studio-screen.is-tray-hidden {
  --single-top: 66;
  --single-h: 660;
  --cmp-top: 239;
  --pill-bottom: 171;
}
/* The panel grown into a grid: the pills sit just above it. */
.studio-section .studio-screen.is-tray-grown { --pill-bottom: 444; }

/* ---------- The look ---------- */
.studio-section .studio-look {
  left: calc(var(--pt) * 201);
  top: calc(var(--pt) * var(--single-top));
  height: calc(var(--pt) * var(--single-h));
  transition:
    top 0.4s var(--studio-snappy), left 0.4s var(--studio-snappy), height 0.4s var(--studio-snappy),
    opacity 0.35s ease, filter 0.35s ease;
}
.studio-section .studio-current { z-index: 2; }
.studio-section .studio-pinned { z-index: 1; }
.studio-section .studio-pinned.is-front { z-index: 3; }
.studio-section .studio-pinned.is-leaving { opacity: 0; }
.studio-section .studio-render { pointer-events: none; -webkit-user-drag: none; }
/* While the next look is made, the last one mixes 45% towards the wall and softens (StudioPhoto.dimming). */
.studio-section .studio-look.is-dim { opacity: 0.55; filter: blur(calc(var(--pt) * 2)); }

.studio-section .studio-screen.is-comparing .studio-look {
  top: calc(var(--pt) * var(--cmp-top));
  height: calc(var(--pt) * 322.6);
}
.studio-section .studio-screen.is-comparing .studio-current { left: calc(var(--pt) * 296); }
.studio-section .studio-screen.is-comparing .studio-pinned { left: calc(var(--pt) * 106); }

/* ---------- Compare (top right of the picture) ---------- */
.studio-section .studio-compare {
  position: absolute; z-index: 4; top: calc(var(--pt) * 124); right: calc(var(--pt) * 26);
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 5);
  padding: calc(var(--pt) * 8) calc(var(--pt) * 12);
  border-radius: 999px;
  background: rgba(250, 250, 250, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 calc(var(--pt) * 2) calc(var(--pt) * 10) rgba(0, 0, 0, 0.08);
  font-size: calc(var(--pt) * 13); font-weight: 600; letter-spacing: -0.01em; color: #000;
  transition: opacity 0.25s, visibility 0s, background 0.2s, scale 0.15s;
}
.studio-section .studio-compare svg { width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); }
.studio-section .studio-compare:hover { background: rgba(255, 255, 255, 0.95); }
.studio-section .studio-compare:active { scale: 0.95; }
.studio-section .studio-screen:not(.can-pin) .studio-compare,
.studio-section .studio-screen.has-toast .studio-compare {
  opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s linear 0.2s;
}

/* ---------- Comparing: a cross on each side, and what's different under it ---------- */
.studio-section .studio-x {
  position: absolute; z-index: 5; top: calc(var(--pt) * (var(--cmp-top) + 6));
  width: calc(var(--pt) * 26); height: calc(var(--pt) * 26); border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(250, 250, 250, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 calc(var(--pt) * 2) calc(var(--pt) * 8) rgba(0, 0, 0, 0.1);
  color: #000;
  opacity: 0; visibility: hidden;
  transition: opacity 0.15s, visibility 0s linear 0.15s, scale 0.15s, top 0.4s var(--studio-snappy);
}
.studio-section .studio-x::before { content: ""; position: absolute; inset: calc(var(--pt) * -9); border-radius: 50%; }
.studio-section .studio-x svg { width: calc(var(--pt) * 12); height: calc(var(--pt) * 12); }
.studio-section .studio-x:hover { background: #fff; }
.studio-section .studio-x:active { scale: 0.9; }
.studio-section .studio-x--left { left: calc(var(--pt) * 164); }
.studio-section .studio-x--right { left: calc(var(--pt) * 354); }
.studio-section .studio-screen.is-comparing .studio-x {
  opacity: 1; visibility: visible;
  transition: opacity 0.25s 0.3s, visibility 0s, scale 0.15s, top 0.4s var(--studio-snappy);
}

.studio-section .studio-cap {
  position: absolute; z-index: 2; top: calc(var(--pt) * (var(--cmp-top) + 328.6));
  width: calc(var(--pt) * 180); margin: 0;
  font-size: calc(var(--pt) * 12); line-height: 1.25; color: rgba(60, 60, 67, 0.82); text-align: center;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  opacity: 0; transition: opacity 0.15s, top 0.4s var(--studio-snappy);
}
.studio-section .studio-cap--left { left: calc(var(--pt) * 16); }
.studio-section .studio-cap--right { left: calc(var(--pt) * 206); }
.studio-section .studio-screen.is-comparing .studio-cap { opacity: 1; transition: opacity 0.3s 0.3s, top 0.4s var(--studio-snappy); }

/* While the right side is made: a spinner on it in a material circle, and no pill. */
.studio-section .studio-wait {
  position: absolute; z-index: 4; left: calc(var(--pt) * 274); top: calc(var(--pt) * (var(--cmp-top) + 139));
  width: calc(var(--pt) * 44); height: calc(var(--pt) * 44); border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0; transition: opacity 0.25s;
}
.studio-section .studio-wait .spinner {
  width: calc(var(--pt) * 20); height: calc(var(--pt) * 20); border-radius: 50%;
  border: calc(var(--pt) * 2) solid rgba(0, 0, 0, 0.15); border-top-color: rgba(0, 0, 0, 0.6);
  animation: spin 0.8s linear infinite;
}
.studio-section .studio-screen.is-comparing.is-dressing .studio-wait { opacity: 1; transition: opacity 0.25s 0.3s; }

/* ---------- The bar: •••, the title, Save ---------- */
.studio-section .studio-bar .ios-glassbtn { cursor: pointer; transition: background 0.2s, color 0.3s, scale 0.15s; }
.studio-section .studio-bar .ios-glassbtn:active { scale: 0.94; }
.studio-section .studio-bar .ios-glassbtn:focus-visible { border-radius: 999px; }
.studio-section .studio-more[aria-expanded="true"] { background: rgba(235, 235, 238, 0.95); }
.studio-section .studio-save[aria-disabled="true"] { cursor: default; }
.studio-section .studio-save[aria-disabled="true"]:active { scale: 1; }
.studio-section .studio-title {
  max-width: calc(var(--pt) * 200);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- "Dressing you…", hints and the toast ---------- */
.studio-section .studio-status {
  top: auto; bottom: calc(var(--pt) * var(--pill-bottom));
  gap: calc(var(--pt) * 9);
  padding: calc(var(--pt) * 11) calc(var(--pt) * 18);
  font-size: calc(var(--pt) * 15);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  pointer-events: none;
  transition: opacity 0.3s, bottom 0.4s var(--studio-snappy);
}
.studio-section .studio-status .spinner { width: calc(var(--pt) * 17); height: calc(var(--pt) * 17); }

.studio-section .studio-hint {
  position: absolute; z-index: 6; left: 50%; translate: -50% 0;
  bottom: calc(var(--pt) * (var(--pill-bottom) + 2));
  width: max-content; max-width: calc(var(--pt) * 378); /* a note about a tap fits on one line */
  margin: 0; padding: calc(var(--pt) * 8) calc(var(--pt) * 14);
  border-radius: calc(var(--pt) * 17);
  font-size: calc(var(--pt) * 13); line-height: 1.3; text-align: center; text-wrap: balance; color: #000;
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  pointer-events: none; opacity: 0;
  transition: opacity 0.25s, bottom 0.4s var(--studio-snappy);
}
.studio-section .studio-screen.has-hint .studio-hint { opacity: 1; }
/* A note said while a look is still being made sits just above "Dressing you…". */
.studio-section .studio-screen.is-dressing:not(.is-comparing) .studio-hint { bottom: calc(var(--pt) * (var(--pill-bottom) + 50)); }

.studio-section .studio-toast {
  position: absolute; z-index: 7; top: calc(var(--pt) * 130); left: 50%; translate: -50% 0;
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 7);
  margin: 0; padding: calc(var(--pt) * 10) calc(var(--pt) * 16); border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 calc(var(--pt) * 4) calc(var(--pt) * 16) rgba(0, 0, 0, 0.1);
  font-size: calc(var(--pt) * 15); font-weight: 600; white-space: nowrap; color: #000;
  pointer-events: none; opacity: 0; transform: translateY(calc(var(--pt) * -16));
  transition: opacity 0.3s, transform 0.45s var(--ease);
}
.studio-section .studio-toast svg { width: calc(var(--pt) * 18); height: calc(var(--pt) * 18); color: #000; }
.studio-section .studio-toast.is-shown { opacity: 1; transform: none; }

/* =====================================================================================================
   The clothes panel. At rest: chips over one row (146 pt). Grown: a five-column grid, to at most half the
   screen (340 pt). Put away: just a Clothes button above the tab bar.
   ===================================================================================================== */
.studio-section .studio-tray {
  top: auto; bottom: calc(var(--pt) * 92);
  height: calc(var(--pt) * var(--tray-h, 146));
  transform: translateY(calc(var(--pt) * var(--tray-pull, 0)));
  transition:
    height 0.32s var(--studio-snappy), transform 0.32s var(--studio-snappy),
    opacity 0.25s ease, visibility 0s;
}
.studio-section .studio-tray.is-grown { --tray-h: 340; }
.studio-section .studio-tray.is-dragging { transition: none; }
.studio-section .studio-screen.is-tray-hidden .studio-tray {
  transform: translateY(calc(var(--pt) * 150));
  opacity: 0; visibility: hidden; pointer-events: none;
  transition:
    transform 0.32s var(--studio-snappy), opacity 0.25s ease, visibility 0s linear 0.32s, height 0.32s var(--studio-snappy);
}

/* The grabber and the chips: drag up or down here (with a finger too) to resize the panel. */
.studio-section .studio-tray-head {
  position: absolute; z-index: 1; inset: 0 0 auto 0; height: calc(var(--pt) * 60);
  touch-action: pan-x;
  cursor: grab;
}
.studio-section .studio-tray.is-dragging .studio-tray-head { cursor: grabbing; }
.studio-section .studio-grab {
  position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: calc(var(--pt) * 120); height: calc(var(--pt) * 19); border-radius: 999px;
  cursor: inherit;
}
.studio-section .studio-grab:focus-visible { outline-offset: -2px; border-radius: 999px; }
.studio-section .studio-grab .studio-grabber { transition: background 0.2s; }
.studio-section .studio-grab:hover .studio-grabber { background: rgba(0, 0, 0, 0.34); }

.studio-section .studio-chips {
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding-block: calc(var(--pt) * 3); margin-block: calc(var(--pt) * -3);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--pt) * 16), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--pt) * 16), transparent);
}
.studio-section .studio-chips::-webkit-scrollbar { display: none; }
.studio-section .studio-chips .ios-chip { cursor: pointer; transition: background 0.2s, color 0.2s, scale 0.15s; }
.studio-section .studio-chips .ios-chip:not(.is-on):hover { background: rgba(255, 255, 255, 0.85); }
.studio-section .studio-chips .ios-chip:active { scale: 0.96; }
.studio-section .studio-chips .ios-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 999px; }
.studio-section .studio-chevron { cursor: pointer; transition: background 0.2s, scale 0.15s; }
.studio-section .studio-chevron:hover { background: rgba(255, 255, 255, 0.85); }
.studio-section .studio-chevron:active { scale: 0.92; }
.studio-section .studio-chevron:focus-visible { outline-offset: 1px; border-radius: 50%; }
.studio-section .studio-chevron svg { width: calc(var(--pt) * 14); height: calc(var(--pt) * 14); }

/* The row: one line of pieces you swipe sideways (or drag, with a mouse). */
.studio-section .studio-items {
  top: calc(var(--pt) * 58);
  padding-block: calc(var(--pt) * 4);
  scroll-padding-inline: calc(var(--pt) * 16); /* pieces settle 16 pt in, as the first one starts */
  overscroll-behavior-x: contain;
}
.studio-section .studio-items.is-scrolling { scroll-snap-type: none; cursor: grabbing; }
.studio-section .studio-item { cursor: pointer; transition: transform 0.15s var(--ease), filter 0.2s; }
.studio-section .studio-items.is-scrolling .studio-item { cursor: inherit; }
.studio-section .studio-item[hidden] { display: none; }
.studio-section .studio-item:hover { filter: brightness(0.97); }
.studio-section .studio-item:active { transform: scale(0.95); }
.studio-section .studio-item:focus-visible { outline: 2px solid #000; outline-offset: 1px; border-radius: calc(var(--pt) * 12); }
.studio-section .studio-item img { pointer-events: none; -webkit-user-drag: none; }

/* A wishlist piece: a tag in the corner, as on its closet card. */
.studio-section .studio-tag {
  position: absolute; z-index: 1; top: calc(var(--pt) * 5); right: calc(var(--pt) * 5);
  width: calc(var(--pt) * 21); height: calc(var(--pt) * 21); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
}
.studio-section .studio-tag svg { width: calc(var(--pt) * 11); height: calc(var(--pt) * 11); }

/* Grown: the row becomes a grid of five across, scrolling if it needs to. */
.studio-section .studio-tray.is-grid .studio-items {
  bottom: calc(var(--pt) * 12);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-content: start;
  gap: calc(var(--pt) * 10);
  overflow-x: hidden; overflow-y: auto; scroll-snap-type: none;
  animation: studio-grid-in 0.22s ease;
}
.studio-section .studio-tray.is-grid .studio-item { width: auto; height: auto; aspect-ratio: 72 / 92; }
@keyframes studio-grid-in { from { opacity: 0.4; } }

/* The tray's entrance and the pulse that says "tap me", before the first tap. */
.studio-section .studio-item.is-nudge { animation: studio-nudge 1.8s ease-out infinite; }
.studio-section .studio-item.is-shake { animation: studio-shake 0.36s ease; }
@keyframes studio-nudge {
  0% { box-shadow: 0 0 0 0 rgba(90, 91, 216, 0.55); }
  70%, 100% { box-shadow: 0 0 0 calc(var(--pt) * 9) rgba(90, 91, 216, 0); }
}
@keyframes studio-shake {
  25% { transform: translateX(calc(var(--pt) * -3)); }
  75% { transform: translateX(calc(var(--pt) * 3)); }
}

/* Put away: a small glass Clothes button brings the panel back. */
.studio-section .studio-clothes {
  position: absolute; z-index: 10; left: 50%; bottom: calc(var(--pt) * 92); translate: -50% 0;
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 6);
  height: calc(var(--pt) * 48); padding: 0 calc(var(--pt) * 20);
  border-radius: 999px;
  background: rgba(248, 248, 250, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.75), 0 calc(var(--pt) * 6) calc(var(--pt) * 20) rgba(0, 0, 0, 0.12);
  font-size: calc(var(--pt) * 15); font-weight: 600; color: #000;
  touch-action: none;
  opacity: 0; scale: 0.6; visibility: hidden;
  transition: opacity 0.2s, scale 0.3s var(--studio-snappy), visibility 0s linear 0.3s;
}
.studio-section .studio-clothes svg { width: calc(var(--pt) * 14); height: calc(var(--pt) * 14); }
.studio-section .studio-clothes:hover { background: rgba(255, 255, 255, 0.9); }
.studio-section .studio-clothes:focus-visible { border-radius: 999px; }
.studio-section .studio-screen.is-tray-hidden .studio-clothes {
  opacity: 1; scale: 1; visibility: visible;
  transition: opacity 0.25s 0.08s, scale 0.35s var(--studio-snappy) 0.08s, visibility 0s;
}
.studio-section .studio-screen.is-tray-hidden .studio-clothes:active { scale: 0.95; }

/* =====================================================================================================
   The ••• menu: grows out of its button, as menus do on iOS 26.
   ===================================================================================================== */
.studio-section .studio-menu {
  position: absolute; z-index: 28; top: calc(var(--pt) * 104); left: calc(var(--pt) * 16);
  width: max-content; max-width: calc(var(--pt) * 344);
  padding: calc(var(--pt) * 8) 0;
  border-radius: calc(var(--pt) * 26);
  background: rgba(250, 250, 251, 0.94);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  backdrop-filter: blur(40px) saturate(1.8);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 calc(var(--pt) * 12) calc(var(--pt) * 44) rgba(0, 0, 0, 0.2);
  transform-origin: calc(var(--pt) * 22) calc(var(--pt) * -26);
  opacity: 0; scale: 0.5; visibility: hidden; pointer-events: none;
  transition: opacity 0.16s, scale 0.22s var(--studio-snappy), visibility 0s linear 0.22s;
}
.studio-section .studio-menu.is-open {
  opacity: 1; scale: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.18s, scale 0.32s var(--studio-snappy), visibility 0s;
}
.studio-section .studio-menu__item {
  display: flex; align-items: center; gap: calc(var(--pt) * 12);
  width: 100%; min-height: calc(var(--pt) * 44); padding: calc(var(--pt) * 6) calc(var(--pt) * 22) calc(var(--pt) * 6) calc(var(--pt) * 18);
  font-size: calc(var(--pt) * 17); line-height: 1.2; text-align: left; color: #000; white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s;
}
.studio-section .studio-menu__item svg { width: calc(var(--pt) * 21); height: calc(var(--pt) * 21); flex: none; }
.studio-section .studio-menu__item:hover, .studio-section .studio-menu__item:focus-visible { background: rgba(0, 0, 0, 0.06); }
.studio-section .studio-menu__item:focus-visible { outline: none; }
.studio-section .studio-menu__item.is-destructive { color: #e5372b; }
.studio-section .studio-menu__item[aria-disabled="true"] { color: rgba(60, 60, 67, 0.3); cursor: default; }
.studio-section .studio-menu__item[aria-disabled="true"]:hover { background: none; }
.studio-section .studio-menu__sep { display: block; height: 1px; margin: calc(var(--pt) * 6) calc(var(--pt) * 18); background: rgba(60, 60, 67, 0.14); }

/* =====================================================================================================
   Save: a sheet at half height to name the outfit and pick its categories.
   ===================================================================================================== */
.studio-section .studio-sheet-dim {
  position: absolute; z-index: 26; inset: 0; background: rgba(0, 0, 0, 0.18);
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s linear 0.3s;
}
.studio-section .studio-screen.has-sheet .studio-sheet-dim { opacity: 1; visibility: visible; transition: opacity 0.3s, visibility 0s; }
.studio-section .studio-sheet {
  position: absolute; z-index: 27; left: calc(var(--pt) * 8); right: calc(var(--pt) * 8); bottom: calc(var(--pt) * 8);
  height: calc(var(--pt) * 432);
  display: flex; flex-direction: column;
  font-size: calc(var(--pt) * 17); /* set here: inherited from the screen it would be sized to the window */
  border-radius: calc(var(--pt) * 38);
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 calc(var(--pt) * -6) calc(var(--pt) * 30) rgba(0, 0, 0, 0.12);
  transform: translateY(calc(100% + var(--pt) * 12));
  transition: transform 0.42s var(--studio-snappy);
}
.studio-section .studio-sheet[hidden] { display: none; }
.studio-section .studio-sheet.is-open { transform: none; }
.studio-section .studio-sheet__bar {
  position: relative; display: flex; align-items: flex-start; justify-content: center;
  height: calc(var(--pt) * 72); padding: calc(var(--pt) * 14) calc(var(--pt) * 16) 0;
}
.studio-section .studio-sheet__title { margin: calc(var(--pt) * 11.5) 0 0; }
.studio-section .studio-sheet__cancel {
  position: absolute; left: calc(var(--pt) * 16); top: calc(var(--pt) * 14);
  background: rgba(118, 118, 128, 0.12); box-shadow: none; font-weight: 500; cursor: pointer;
}
.studio-section .studio-sheet__cancel:focus-visible { border-radius: 999px; }
.studio-section .studio-sheet__body { flex: 1; min-height: 0; overflow: hidden; padding: calc(var(--pt) * 8) calc(var(--pt) * 20) 0; }
.studio-section .studio-sheet__label { margin: 0 0 calc(var(--pt) * 8); font-size: calc(var(--pt) * 15); font-weight: 600; }
.studio-section .studio-sheet__field {
  margin: 0 0 calc(var(--pt) * 24); padding: calc(var(--pt) * 12);
  border-radius: calc(var(--pt) * 12); background: #f2f2f7;
}
.studio-section .studio-sheet__name.is-placeholder { color: rgba(60, 60, 67, 0.3); }
.studio-section .studio-sheet__sub { margin: calc(var(--pt) * -6) 0 calc(var(--pt) * 10); font-size: calc(var(--pt) * 13); line-height: 1.3; color: rgba(60, 60, 67, 0.6); }
.studio-section .studio-sheet__chips { display: flex; flex-wrap: wrap; gap: calc(var(--pt) * 8); }
.studio-section .studio-sheet__chip {
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 5);
  padding: calc(var(--pt) * 7) calc(var(--pt) * 14); border-radius: 999px;
  background: #f2f2f7; font-size: calc(var(--pt) * 15); font-weight: 500; color: #000; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.studio-section .studio-sheet__chip[aria-pressed="true"] { background: var(--accent); color: #fff; }
.studio-section .studio-sheet__chip[aria-pressed="true"]::before {
  content: ""; width: calc(var(--pt) * 11); height: calc(var(--pt) * 11);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 6.4 2.6 2.5L10 3.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.studio-section .studio-sheet__chip:focus-visible { border-radius: 999px; }
.studio-section .studio-sheet__chip--new {
  background: none; color: rgba(60, 60, 67, 0.6); cursor: default;
  box-shadow: inset 0 0 0 calc(var(--pt) * 1.5) rgba(60, 60, 67, 0.25);
}
.studio-section .studio-sheet__chip--new svg { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); }
.studio-section .studio-sheet__buttons { display: grid; gap: calc(var(--pt) * 8); padding: calc(var(--pt) * 16); }
.studio-section .studio-sheet__save, .studio-section .studio-sheet__asnew {
  height: calc(var(--pt) * 50); border-radius: 999px;
  font-size: calc(var(--pt) * 17); font-weight: 600; cursor: pointer;
  transition: filter 0.2s, scale 0.15s;
}
.studio-section .studio-sheet__save { background: var(--accent); color: #fff; }
.studio-section .studio-sheet__asnew { background: rgba(90, 91, 216, 0.14); color: var(--accent-ink); }
.studio-section .studio-sheet__save:hover, .studio-section .studio-sheet__asnew:hover { filter: brightness(0.96); }
.studio-section .studio-sheet__save:active, .studio-section .studio-sheet__asnew:active { scale: 0.98; }
.studio-section .studio-sheet__save:focus-visible, .studio-section .studio-sheet__asnew:focus-visible { border-radius: 999px; }

/* Reduced motion: no pulse, and the compare controls come with the looks rather than after them. */
@media (prefers-reduced-motion: reduce) {
  .studio-section .studio-item.is-nudge { animation: none; }
  .studio-section .studio-screen.is-comparing .studio-x,
  .studio-section .studio-screen.is-comparing .studio-cap,
  .studio-section .studio-screen.is-comparing.is-dressing .studio-wait { transition-delay: 0s; }
}