:root {
  --paper: #eef1f5;
  --paper-bright: #f8fafc;
  --ink: #0b1220;
  --muted: #475569;
  --royal: #2563eb;
  --royal-dark: #1d4ed8;
  --line: #e2e8f0;
  --white: #ffffff;
  --stage: #0b1220;
  --stage-panel: #101827;
  --studio-measure: min(1240px, calc(100% - 64px));
  --studio-phone-viewport: 390px;
}

.studio-page,
.studio-page * {
  box-sizing: border-box;
}

/**
 * Sora is the marketing typeface and the brand guide rules out serifs on ECB
 * marketing. Nothing here set a family, so every heading, label, and paragraph
 * fell back to the browser default serif while the loaded Sora sat unused.
 */
.studio-page {
  background: var(--paper);
  color: var(--ink);
  font-family: Sora, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.studio-masthead,
.studio-shell,
.studio-note,
.studio-value,
.studio-widget,
.studio-close {
  width: var(--studio-measure);
  margin-left: auto;
  margin-right: auto;
}

/* The tray and the sample both have to clear the fold, so the masthead states
   the promise and gets out of the way. */
.studio-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 48px;
  align-items: end;
  padding: 34px 0 20px;
}

.studio-masthead-copy,
.studio-masthead-aside {
  display: grid;
  gap: 14px;
}

.studio-masthead .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--royal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.studio-masthead .eyebrow::before {
  width: 26px;
  height: 2px;
  content: "";
  border-radius: 2px;
  background: var(--royal);
}

.studio-masthead h1 {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(34px, 4.3vw, 54px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* The second sentence carries the promise, so it takes the accent. Royal on
   paper is the locked marketing pair, and the emphasis stays typographic. */
.studio-masthead h1 em {
  color: var(--royal);
  font-style: normal;
}

.studio-masthead .lead {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

.studio-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.studio-hero-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.studio-hero-actions a:hover {
  transform: translateY(-1px);
}

.studio-hero-actions .primary {
  background: var(--royal);
  color: var(--white);
  box-shadow: 0 12px 26px -16px rgba(37, 99, 235, 0.9);
}

.studio-hero-actions .primary:hover {
  background: var(--royal-dark);
  box-shadow: 0 16px 30px -16px rgba(29, 78, 216, 0.95);
}

.studio-hero-actions .ghost:hover {
  border-color: #cbd5e1;
}

.studio-hero-actions a:focus-visible {
  outline: 3px solid var(--royal);
  outline-offset: 2px;
}

.studio-hero-actions .ghost {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
}

#studio-customize {
  scroll-margin-top: 88px;
}

/* The controls sit above the sample, so the reader picks a look and then
   watches the page underneath answer. */
.studio-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "dock"
    "stage";
  gap: 16px;
  margin-bottom: 56px;
}

.studio-stage {
  grid-area: stage;
}

.studio-dock {
  grid-area: dock;
}

.studio-stage {
  display: grid;
  gap: 14px;
  padding: 16px 16px 0;
  border: 1px solid rgba(148, 176, 220, 0.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.18), transparent 38%),
    linear-gradient(180deg, #152033, var(--stage) 58%);
  box-shadow:
    0 28px 80px -36px rgba(11, 18, 32, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.studio-device-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 8px 2px 12px;
  color: #9fb0c8;
}

.studio-device-bar p {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
}

.studio-device-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.studio-device {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #8fa0b7;
  font: 750 12px Sora, system-ui, sans-serif;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.studio-device:hover {
  color: #cddaea;
}

.studio-device[aria-pressed="true"] {
  background: #17283e;
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.studio-device-icon {
  position: relative;
  display: block;
  width: 17px;
  height: 13px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

.studio-device-icon.desktop::after {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 7px;
  height: 1.5px;
  content: "";
  background: currentColor;
  transform: translateX(-50%);
}

.studio-device-icon.mobile {
  width: 9px;
  height: 16px;
  border-radius: 3px;
}

.studio-window {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px 22px 0 0;
  background: var(--stage-panel);
}

.studio-browser-bar {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  color: #536174;
  background: #f7f9fc;
  font-size: 12px;
}

.studio-browser-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c8d1dc;
}

.studio-address {
  flex: 1;
  min-width: 0;
  margin-left: 8px;
  overflow: hidden;
  padding: 6px 12px;
  border-radius: 999px;
  background: #e5ebf2;
  color: #334155;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: #526174;
  font-size: 10px;
  font-weight: 850;
}

.studio-tag i {
  width: 7px;
  height: 7px;
  background: #1d4ed8;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.12);
}

.studio-canvas {
  background: #0c1422;
}

.studio-phone,
.studio-phone-screen {
  display: contents;
}

.studio-frame {
  display: block;
  width: 100%;
  height: min(80vh, 900px);
  border: 0;
  background: #0c1422;
  touch-action: pan-y;
}

.studio-canvas[data-device="mobile"] {
  display: flex;
  justify-content: center;
  padding: 28px 0 32px;
  background:
    radial-gradient(circle at 50% 18%, rgba(57, 84, 116, 0.28), transparent 34%),
    linear-gradient(180deg, #10192b, #0b1422);
}

.studio-canvas[data-device="mobile"] .studio-phone {
  display: block;
  width: min(390px, calc(100% - 48px));
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 38px;
  background: #030814;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* The mockup screen runs 366px wide on a desktop window, so 800px is the
   height a real phone would have at that width. A shorter screen read like a
   cropped card instead of a phone. */
.studio-canvas[data-device="mobile"] .studio-phone-screen {
  position: relative;
  display: block;
  overflow: hidden;
  height: 800px;
  border-radius: 29px;
  background: #07111f;
}

.studio-canvas[data-device="mobile"] .studio-phone-screen::before {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 50%;
  width: 76px;
  height: 18px;
  content: "";
  border-radius: 999px;
  background: #030814;
  transform: translateX(-50%);
}

.studio-canvas[data-device="mobile"] .studio-frame {
  width: 100%;
  height: 100%;
  background: #fff;
}

/**
 * The coach-site renderer designs down to a real phone, not to the couple of
 * hundred pixels left inside a phone mockup or a narrow window. Below its
 * smallest breakpoint the hero eyebrow and headline run off to the right and
 * get cut. So the sample always renders at a 390px phone viewport or wider and
 * the whole frame scales into the space it has. The studio sets data-scaled
 * once it has measured, which keeps the plain full-width frame as the fallback.
 */
.studio-canvas[data-scaled="true"] .studio-frame {
  width: var(--studio-phone-viewport);
  height: var(--studio-frame-height, 800px);
  transform: scale(var(--studio-frame-scale, 1));
  transform-origin: top left;
}

.studio-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 20px 18px;
  color: #d7e0ec;
}

.studio-caption strong {
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -0.005em;
}

.studio-caption span {
  color: #93a5bd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.studio-dock {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 15px 18px 16px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.16), transparent 34%),
    radial-gradient(circle at 92% 110%, rgba(29, 78, 216, 0.1), transparent 32%),
    linear-gradient(145deg, #ffffff 0%, #f8faff 58%, #eef4ff 100%);
  backdrop-filter: blur(14px) saturate(130%);
  box-shadow:
    0 24px 60px -28px rgba(29, 78, 216, 0.38),
    0 14px 34px -28px rgba(11, 18, 32, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.studio-dock::before {
  position: absolute;
  inset: 0 12% auto;
  height: 3px;
  content: "";
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, #60a5fa 24%, var(--royal) 50%, #60a5fa 76%, transparent);
  box-shadow: 0 5px 20px rgba(37, 99, 235, 0.34);
  pointer-events: none;
}

.studio-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(238, 241, 245, 0.82);
  box-shadow: inset 0 1px 3px rgba(11, 18, 32, 0.06);
}

.studio-tab {
  appearance: none;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: 750 13px Sora, system-ui, sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.studio-tab:hover {
  color: var(--ink);
}

.studio-tab[aria-selected="true"] {
  background: linear-gradient(145deg, #3b82f6, var(--royal) 62%, #1d4ed8);
  color: var(--white);
  box-shadow:
    0 12px 24px -14px rgba(37, 99, 235, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(11, 18, 32, 0.12);
}

.studio-controls {
  display: grid;
  gap: 12px;
}

.studio-panel[data-open="false"] {
  display: none;
}

/* The selected tab already names the open panel, so the heading stays for
   assistive technology and gives its height back to the sample. */
.studio-controls h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.studio-controls p.hint {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.studio-option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.studio-sports {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.studio-option,
.studio-swatch {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-bright);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease;
}

.studio-option:hover,
.studio-swatch:hover {
  border-color: #9cbcf7;
  background: #f2f6ff;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -16px rgba(37, 99, 235, 0.8);
}

.studio-option {
  position: relative;
  min-height: 54px;
  padding: 9px 28px 9px 11px;
}

.studio-option strong {
  display: block;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -0.005em;
}

.studio-option span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

/* A selected control should read at a glance from across the tray, so the
   choice carries a filled mark as well as the royal ring. */
.studio-option::after {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 9px;
  height: 9px;
  content: "";
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #cbd5e1;
  transition: background 160ms ease, box-shadow 160ms ease;
}

/* A chosen control is filled Royal, so the current sport, layout, hero, and
   color read from across the tray instead of hiding behind a thin ring. */
.studio-option[aria-pressed="true"] {
  border-color: var(--royal-dark);
  background: linear-gradient(180deg, var(--royal) 0%, var(--royal-dark) 100%);
  color: var(--white);
  box-shadow: 0 14px 26px -16px rgba(37, 99, 235, 0.95);
}

.studio-option[aria-pressed="true"] span {
  color: rgba(255, 255, 255, 0.82);
}

.studio-option[aria-pressed="true"]::after {
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--white);
}

.studio-option[aria-pressed="true"]:hover {
  background: linear-gradient(180deg, var(--royal) 0%, var(--royal-dark) 100%);
  border-color: var(--royal-dark);
}

.studio-swatch[aria-pressed="true"] {
  border-color: var(--royal);
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.13),
    0 14px 26px -17px rgba(29, 78, 216, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  background: linear-gradient(145deg, #ffffff 0%, #eef4ff 54%, #dce9ff 100%);
}

.studio-option:focus-visible,
.studio-swatch:focus-visible,
.studio-custom-accent:focus-visible,
.studio-device:focus-visible,
.studio-tab:focus-visible {
  outline: 3px solid var(--royal);
  outline-offset: 2px;
}

.studio-swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.studio-swatch {
  display: grid;
  gap: 8px;
  padding: 8px;
}

.studio-swatch i {
  display: block;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--swatch-a) 0 34%,
    var(--swatch-b) 34% 56%,
    var(--swatch-paper) 56% 78%,
    var(--swatch-band) 78% 100%
  );
  box-shadow: inset 0 0 0 1px rgba(11, 18, 32, 0.08);
}

.studio-swatch span {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.studio-custom {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.studio-custom label {
  font-size: 12px;
  font-weight: 750;
}

.studio-custom-accent {
  width: 100%;
  height: 38px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}

.studio-status {
  min-height: 0;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.studio-note,
.studio-close {
  display: grid;
  gap: 10px;
  margin-bottom: 72px;
}

.studio-note {
  gap: 12px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 18px 50px -40px rgba(11, 18, 32, 0.5);
}

.studio-note h2,
.studio-close h2 {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.studio-note p,
.studio-close p {
  margin: 0;
  max-width: 68ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  text-wrap: pretty;
}

/* The closing pitch. Every line here is inventory from the shipped design
   registry, so the section is built to read as a specification rather than as
   adjectives. */
.studio-value {
  display: grid;
  gap: 20px;
  margin-bottom: 56px;
}

.studio-value-head {
  display: grid;
  gap: 12px;
  max-width: 62ch;
}

.studio-value-head .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--royal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.studio-value-head .eyebrow::before {
  width: 26px;
  height: 2px;
  content: "";
  border-radius: 2px;
  background: var(--royal);
}

.studio-value-head h2 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.studio-value-head p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
}

.studio-value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-value-grid li {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 0%, rgba(37, 99, 235, 0.07), transparent 42%),
    var(--white);
  box-shadow: 0 18px 44px -38px rgba(11, 18, 32, 0.55);
}

.studio-value-grid strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.012em;
}

.studio-value-grid span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.studio-value-close {
  max-width: 74ch;
  margin: 0;
  padding-left: 16px;
  border-left: 3px solid var(--royal);
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.6;
  text-wrap: pretty;
}

/**
 * The booking widget showcase. The frame is the production widget for the
 * published Pickleball demo, so it renders live rather than as a screenshot.
 * It stays inert here because this page promises it does not take a booking,
 * and the open link sends anyone who wants to finish one to the published demo
 * where booking is meant to work.
 */
.studio-widget {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 32px;
  align-items: center;
  margin-bottom: 56px;
  padding: 30px 32px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 6%, rgba(37, 99, 235, 0.1), transparent 44%),
    var(--white);
  box-shadow: 0 24px 60px -44px rgba(11, 18, 32, 0.6);
}

.studio-widget-copy {
  display: grid;
  gap: 14px;
  align-content: start;
}

.studio-widget-copy .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--royal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.studio-widget-copy .eyebrow::before {
  width: 26px;
  height: 2px;
  content: "";
  border-radius: 2px;
  background: var(--royal);
}

.studio-widget-copy h2 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.studio-widget-copy > p {
  margin: 0;
  max-width: 52ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
}

.studio-widget-styles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
}

.studio-widget-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.studio-widget-open {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--royal);
  color: var(--white);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 12px 26px -16px rgba(37, 99, 235, 0.9);
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.studio-widget-open:hover {
  background: var(--royal-dark);
  transform: translateY(-1px);
}

.studio-widget-open:focus-visible {
  outline: 3px solid var(--royal);
  outline-offset: 2px;
}

.studio-widget-stage {
  display: flex;
  justify-content: center;
  padding: 22px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 12%, rgba(57, 84, 116, 0.3), transparent 40%),
    linear-gradient(180deg, #152033, var(--stage) 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.studio-widget-screen {
  overflow: hidden;
  width: min(var(--studio-phone-viewport), 100%);
  height: 560px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.55);
}

.studio-widget-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--white);
  pointer-events: none;
}

/**
 * The booking widget is a cross-origin embed, so the studio cannot prepare its
 * document the way it prepares the coach-site preview. It gets the same rule
 * from the outside instead: lay the frame out at a real 390px phone viewport
 * and scale the whole thing into the screen it has. Below that width the
 * widget's session cards and package tiles ran off to the right and got cut.
 */
.studio-widget-screen[data-scaled="true"] .studio-widget-frame {
  width: var(--studio-phone-viewport);
  height: var(--studio-widget-frame-height, 560px);
  transform: scale(var(--studio-widget-frame-scale, 1));
  transform-origin: top left;
}

.studio-close {
  padding: 8px 0 8px;
}

.studio-close a {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 48px;
  margin-top: 4px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--royal);
  color: var(--white);
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 12px 26px -16px rgba(37, 99, 235, 0.9);
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.studio-close a:hover {
  background: var(--royal-dark);
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -16px rgba(29, 78, 216, 0.95);
}

.studio-close a:focus-visible {
  outline: 3px solid var(--royal);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  .studio-option-grid,
  .studio-sports {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .studio-swatches {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  /* The widget section was left off this list, so it sat 36px narrower than
     everything above it and spent that width on the embed inside. */
  .studio-masthead,
  .studio-shell,
  .studio-note,
  .studio-value,
  .studio-widget,
  .studio-close {
    width: calc(100% - 28px);
  }

  .studio-masthead {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 20px 0 14px;
  }

  .studio-masthead h1 {
    font-size: clamp(27px, 7.2vw, 34px);
  }

  .studio-masthead {
    padding: 16px 0 12px;
  }

  .studio-masthead-aside {
    display: none;
  }

  .studio-shell {
    margin-bottom: 28px;
  }

  .studio-stage {
    padding: 12px 12px 0;
  }

  .studio-device-bar p {
    display: none;
  }

  .studio-canvas[data-device="mobile"] {
    padding: 12px 0 14px;
  }

  /* The caption under the sample already carries this sentence, so on a phone
     the status line stays a live region for assistive technology only and
     gives its height back to the sample. */
  .studio-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .studio-canvas[data-device="mobile"] .studio-phone {
    width: min(340px, calc(100% - 20px));
  }

  /* The sample is the page. On a phone it gets two thirds of the viewport,
     which keeps the mockup close to a real phone's proportions and still
     leaves the control tray above it in reach. */
  .studio-canvas[data-device="mobile"] .studio-phone-screen,
  .studio-frame {
    height: 66vh;
  }

  /* A narrow window scales the desktop view the same way, so the frame keeps a
     layout width the renderer actually designs for. Transform does not change
     layout size, so the canvas has to hold the on-screen height itself. */
  .studio-canvas[data-device="desktop"][data-scaled="true"] {
    height: 66vh;
    overflow: hidden;
  }

  .studio-caption {
    display: grid;
    gap: 4px;
    padding: 12px 14px 14px;
  }

  /* The tray leads on a phone too, and it scrolls with the page. Pinning a
     tray this tall would hold a quarter of the viewport for the whole scroll. */
  .studio-dock {
    position: relative;
    gap: 10px;
    margin: 0;
    padding: 14px;
    border-radius: 18px;
    box-shadow:
      0 20px 44px -25px rgba(29, 78, 216, 0.5),
      0 12px 26px -24px rgba(11, 18, 32, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }

  .studio-panel[data-open="true"] {
    max-height: 38vh;
    overflow: auto;
  }

  /* The hints carry the reason a layout family changes the demo business, so a
     phone keeps them instead of hiding the explanation. */
  .studio-controls p.hint {
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.4;
  }

  .studio-option-grid,
  .studio-sports,
  .studio-swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Every pixel of padding here comes off the embed's own layout width, which
     is why the widget was rendering at 218px on a 390px phone. */
  .studio-widget {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 18px;
  }

  .studio-widget-stage {
    padding: 12px;
  }
}

@media (max-width: 640px) {
  .studio-tab {
    font-size: 12px;
  }

  .studio-option span {
    display: none;
  }

  /* Without the second line the labels are short, so three across keeps the
     open tray to two rows and leaves the sample on the first screen. */
  .studio-option-grid,
  .studio-sports {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .studio-option {
    min-height: 44px;
    padding: 7px 22px 7px 9px;
  }

  .studio-option strong {
    font-size: 12px;
  }

  .studio-option::after {
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
  }

  /* The Layout and Hero panels carry eight and nine choices. Capping the open
     panel keeps the sample on the first screen and lets the longer sets scroll
     inside the tray instead of pushing the phone mockup off the bottom. */
  .studio-panel[data-open="true"] {
    max-height: 20vh;
  }

  .studio-value-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-frame {
    scroll-behavior: auto;
  }

  .studio-option,
  .studio-swatch,
  .studio-tab,
  .studio-device,
  .studio-hero-actions a,
  .studio-close a {
    transition: none;
  }

  .studio-option:hover,
  .studio-swatch:hover,
  .studio-hero-actions a:hover,
  .studio-close a:hover {
    transform: none;
  }
}