/* The workspace remains in normal page flow, on Clico's existing light canvas. */
.web-showcase-flow[data-studio-flow] > .web-explanation-panel { overflow: visible; border-radius: 0; background: var(--web-base); box-shadow: none; }
.web-showcase-flow[data-studio-flow].is-stacked > .web-explanation-panel { margin-top: 0; }
.web-showcase-flow[data-studio-flow].is-stacked > .web-creation-panel { position: relative; top: auto; }
.web-showcase-flow[data-studio-flow].is-stacked .builder-story { padding-bottom: 72px; }
.web-showcase-flow[data-studio-flow] > .web-creation-panel::after { display: none; }
.web-showcase-flow[data-studio-flow] > .web-intro-panel[data-covered] { visibility: hidden; }
.web-studio { padding: 88px 0 144px; scroll-margin-top: 170px; }
.studio-heading { max-width: 900px; margin: 0 auto 56px; text-align: center; }
.studio-heading h2 { margin: 0; color: var(--web-ink); font: 400 var(--web-section-title-size)/1.05 Georgia,serif; letter-spacing: -.055em; text-wrap: balance; }
.studio-heading p { max-width: 590px; margin: 20px auto 0; color: var(--web-muted); font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.studio-features { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.studio-feature { min-width: 0; padding: 0 32px 32px; border-radius: 28px; background: rgba(248,250,252,.55); }
/* Use the original subject-free backgrounds at their natural aspect ratios. */
.studio-feature--tools {
  background: #d6c9df url("/assets/home-media/soft-blue-flower.webp") left center / auto 210% no-repeat;
}
.studio-feature--models {
  background: #063aba url("/assets/home-media/cobalt-statue-floating-flower.webp") left center / auto 210% no-repeat;
}
.studio-feature:not(.studio-feature--workspace) { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 14px; }
.studio-feature > h3,.studio-workspace-copy h3 { margin: 0; color: var(--web-ink); font: 400 clamp(24px,2.1vw,30px)/1.14 Georgia,serif; letter-spacing: -.035em; text-wrap: balance; }
.studio-feature > p,.studio-workspace-copy p { margin: 0; color: var(--web-muted); font: 400 15px/1.65 "DM Sans",sans-serif; text-wrap: pretty; }
.studio-feature > p small { display: block; margin-top: 12px; font-size: 12px; }
.studio-feature--tools > p { color: #42495c; }
.studio-feature--models > h3 { color: #f6f8ff; }
.studio-feature--models > p { color: #dce8ff; }
.studio-feature__visual { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 1.5; margin: 0 -16px 16px; }
.studio-tools { container-type: inline-size; perspective: 900px; }
.studio-tool { --angle: 0deg; --lift: 0px; position: relative; flex: 0 0 clamp(48px,19cqw,100px); min-width: 0; margin: 0 -3px; padding: 0; border: 0; color: var(--web-ink); background: transparent; font: 500 12px/1.3 "DM Sans",sans-serif; cursor: pointer; transform: translateY(var(--lift)) rotate(var(--angle)); transition: transform .38s cubic-bezier(.22,1,.36,1); }
.studio-tool__art { display: grid; aspect-ratio: 1; place-items: center; padding: 7px; border: 1px solid rgba(255,255,255,.9); border-radius: 22%; background: #f9fbfc; box-shadow: 0 14px 28px -12px rgba(36,51,72,.3),inset 0 1px 2px #fff; transition: box-shadow .28s ease,scale .22s cubic-bezier(.22,1,.36,1); }
.studio-tool__art img,.studio-tool__art video { display: block; width: 100%; height: auto; border-radius: 14%; }
.studio-tool:active .studio-tool__art { scale: .95; transition-duration: .09s; }
.studio-tool > span:last-child { display: block; margin-top: 13px; }
.studio-tool--website { --angle: -10deg; --lift: 18px; z-index: 1; }
.studio-tool--video { --angle: -5deg; --lift: 1px; z-index: 2; }
.studio-tool--image { --lift: -12px; flex-basis: clamp(66px,25cqw,136px); z-index: 3; }
.studio-tool--music { --angle: 5deg; --lift: 1px; z-index: 2; }
.studio-tool--game { --angle: 10deg; --lift: 18px; z-index: 1; }
.studio-tool--music .studio-tool__art { color: #8274b1; background: #e9e3f1; }
.studio-tool__art svg { width: 90%; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.studio-tool[aria-pressed="true"] .studio-tool__art { box-shadow: 0 0 0 2px #315d96,0 14px 28px -12px rgba(36,51,72,.3); }
.studio-tool:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 6px; border-radius: 18px; }
.studio-tool:focus-visible { z-index: 5; transform: translateY(calc(var(--lift) - 12px)) rotate(0deg); }
.studio-models { padding: 36px 14px; }
.studio-feature--models { scroll-margin-top: 180px; }
.studio-model-window { width: 100%; max-width: 410px; padding: 14px; border: 1px solid rgba(255,255,255,.92); border-radius: 20px; background: #f8faff; box-shadow: 0 20px 34px -20px rgba(5,26,81,.42); transition: transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease; }
.studio-model-tabs { display: flex; gap: 6px; padding: 0 0 14px; }
.studio-model-tabs button { padding: 7px 15px; min-height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--web-muted); font: 500 12px/1 "DM Sans",sans-serif; cursor: pointer; }
.studio-model-tabs button { transition: background-color .2s ease,color .2s ease,scale .2s cubic-bezier(.22,1,.36,1); }
.studio-model-tabs button:active { scale: .96; transition-duration: .09s; }
.studio-model-tabs button[aria-selected="true"] { background: #e7edf6; color: #34577f; }
.studio-model-tabs button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.studio-model-panels { display: grid; }
.studio-model-panel { grid-area: 1 / 1; min-width: 0; opacity: 1; translate: 0 0; transition: opacity .22s ease,translate .26s cubic-bezier(.22,1,.36,1),visibility 0s; }
.studio-model-panel[hidden] { display: block; visibility: hidden; pointer-events: none; opacity: 0; translate: 0 6px; transition: opacity .12s ease-in,translate .12s ease-in,visibility 0s .12s; }
.studio-model-panel ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.studio-model-panel li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; padding: 17px 5px; border-radius: 12px; background: #f0f3f8; color: var(--web-ink); font: 500 11px/1.3 "DM Sans",sans-serif; text-align: center; }
.studio-model-panel img { width: 36px; height: 36px; object-fit: contain; transition: transform .35s cubic-bezier(.22,1,.36,1),filter .35s ease; }
.studio-model-window:focus-within { transform: translateY(-4px); }
.studio-feature--workspace { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.4fr); align-items: end; gap: 40px; padding: 44px 40px 40px; }
.studio-feature--workspace {
  background: #1b518a url("/assets/home-media/porsche-cresting-a-rainbow-road.webp") center top / auto 400% no-repeat;
}
.studio-workspace-copy h3 { color: #f6f8ff; }
.studio-workspace-copy p { color: #e2ebf6; }
.studio-workspace-copy { padding-bottom: 6px; }
.studio-workspace-copy p { margin-top: 16px; }
.studio-desk { position: relative; min-width: 0; }
.studio-desk__settings { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: 18px; margin: 0 16px 22px; }
.studio-controls { position: relative; min-width: 0; transition: transform .28s cubic-bezier(.22,1,.36,1); }
.studio-controls:focus-within { z-index: 10; }
.studio-composer { position: relative; z-index: 4; min-width: 0; scroll-margin-top: 190px; }
.studio-composer:focus-within { z-index: 11; }
.studio-composer > p { padding: 24px; border-radius: 24px; background: #f6f8fc; }
@media(hover:hover) and (pointer:fine) {
  .studio-tool:hover { z-index: 5; transform: translateY(calc(var(--lift) - 16px)) rotate(0deg) scale(1.05); }
  .studio-tool:hover .studio-tool__art { box-shadow: 0 22px 32px -14px rgba(36,51,72,.35),inset 0 1px 2px #fff; }
  .studio-model-window:hover { transform: translateY(-4px); box-shadow: 0 28px 40px -22px rgba(32,49,71,.3); }
  .studio-model-panel li:hover img { transform: translateY(-5px) rotate(-7deg) scale(1.12); filter: drop-shadow(0 6px 5px rgba(37,56,81,.16)); }
  .studio-controls:hover { transform: translateY(-3px); }
  .studio-controls:focus-within { transform: none; }
}
@media(max-width:1100px) {
  .web-studio { padding: 64px 0 112px; }
  .studio-feature { padding-inline: 24px; }
  .studio-feature__visual { margin-inline: -12px; }
  .studio-feature--workspace { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); padding: 36px 28px; gap: 28px; }
  .studio-desk__settings { margin-inline: 0; gap: 12px; }
}
@media(max-width:800px) {
  .studio-features { grid-template-columns: 1fr; gap: 18px; }
  .studio-heading { margin-bottom: 36px; }
  .studio-feature:not(.studio-feature--workspace) { display: grid; grid-row: auto; grid-template-rows: auto; gap: 14px; }
  .studio-feature__visual { width: min(100%,510px); margin: 0 auto 12px; }
  .studio-feature--workspace { grid-column: auto; grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
  .studio-workspace-copy { max-width: 520px; }
  .studio-desk { width: 100%; max-width: 610px; margin: auto; }
}
@media(max-width:700px) {
  .web-studio { padding: 48px 0 80px; }
  .studio-heading h2 { font-size: clamp(30px,7.5vw,42px); }
  .studio-heading p { font-size: 15px; }
  .studio-feature { padding: 0 22px 28px; border-radius: 24px; }
  .studio-feature__visual { aspect-ratio: 1.2; }
  .studio-feature > h3,.studio-workspace-copy h3 { font-size: 26px; }
  .studio-models { padding: 26px 0; }
  .studio-model-window { padding: 10px; border-radius: 16px; }
  .studio-model-panel li { padding: 14px 3px; gap: 10px; font-size: 10px; }
  .studio-model-tabs { gap: 0; }
  .studio-model-tabs button { min-height: 40px; padding-inline: 12px; }
  .studio-tool { font-size: 10px; }
  .studio-tool__art { padding: 4px; }
  .studio-feature--workspace { padding: 28px 16px; }
  .studio-desk__settings { grid-template-columns: 1fr; gap: 12px; }
}
@media(prefers-reduced-motion:reduce) {
  .studio-tool,.studio-tool__art,.studio-model-window,.studio-model-panel img,.studio-controls,.studio-model-tabs button { transition: none; }
  .studio-model-panel,.studio-model-panel[hidden] { translate: none; transition: opacity .12s ease,visibility 0s .12s; transition-duration: .12s,0s !important; }
  .studio-model-panel:not([hidden]) { transition-delay: 0s; }
  .studio-tool:active .studio-tool__art,.studio-model-tabs button:active { scale: none; }
  .studio-tool:hover,.studio-tool:focus-visible { transform: translateY(var(--lift)) rotate(var(--angle)); }
  .studio-model-window:hover,.studio-model-window:focus-within,.studio-model-panel li:hover img,.studio-controls:hover { transform: none; }
}