body { background:#f6f6f8; }
.studio-header { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.5rem clamp(1.25rem,4vw,4rem); background:white; border-bottom:1px solid #e0e0e0; }
.studio-header img { width:10.5rem; height:auto; }
.studio-header nav { display:flex; gap:1.5rem; font-size:.875rem; }
.studio-header a { text-underline-offset:.25em; }
.studio-main { width:min(100% - 2 * var(--av-page-gutter),95rem); margin:3rem auto; }
.studio-heading { display:flex; justify-content:space-between; gap:1.5rem; align-items:flex-end; margin-bottom:2rem; }
.studio-heading h1 { font:400 clamp(2rem,4vw,3.5rem)/1.15 var(--av-heading); letter-spacing:-.04em; margin:.75rem 0; }
.studio-heading p:last-child { color:var(--av-muted); }
.studio-workspace { display:grid; grid-template-columns:minmax(0,1fr) 18.5rem; border:1px solid #e0e0e0; border-radius:1.25rem; overflow:hidden; background:white; }
.studio-stage { min-width:0; }
.studio-stage .av-entropy { height:min(70svh,45rem); min-height:30rem; }
.studio-scene-label { position:absolute; top:1.75rem; left:2rem; z-index:1; display:flex; align-items:center; gap:.875rem; }
.studio-scene-label span { font-size:.75rem; opacity:.7; }
.studio-scene-label h2 { font-size:1rem; font-weight:400; }
.studio-scene-footer { position:absolute; left:2rem; right:2rem; bottom:1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.75rem; }
.studio-scene-footer .av-motion-toggle { background:var(--entropy-surface); }
.studio-controls { padding:1.75rem; max-height:max(30rem,min(70svh,45rem)); overflow-y:auto; overscroll-behavior:contain; }
.studio-fieldset { border:0; padding:0; margin:0; min-width:0; }
.studio-fieldset { margin-bottom:1.5rem; }
.studio-fieldset legend { margin-bottom:.75rem; font-size:.875rem; }
.studio-shapes { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.studio-shapes label { cursor:pointer; position:relative; display:flex; align-items:center; justify-content:center; min-height:2.75rem; padding:.5rem; border:1px solid #e0e0e0; border-radius:.375rem; font-size:.875rem; }
.studio-shapes input { position:absolute; opacity:0; width:1px; height:1px; }
.studio-shapes label:has(input:checked) { background:#e8e8ff; border-color:var(--av-blue); color:var(--av-blue); }
.studio-shapes label:has(input:focus-visible) { outline:2px solid var(--av-blue); outline-offset:3px; }
.studio-shape-description { margin-top:.75rem; min-height:3em; }
.studio-surfaces { display:flex; gap:1rem; flex-wrap:wrap; }
.studio-surfaces label { display:flex; align-items:center; gap:.375rem; font-size:.875rem; cursor:pointer; min-height:2rem; }
.studio-surfaces input { accent-color:var(--av-blue); }
.studio-colour { display:inline-block; width:.875rem; height:.875rem; border-radius:50%; border:1px solid #aaa; }
.studio-colour--dark { background:#010113; }
.studio-colour--light { background:#fafafa; }
.studio-range { margin-block:1.75rem; }
.studio-range > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.875rem; }
.studio-range output { color:var(--av-muted); }
.studio-range input { width:100%; accent-color:var(--av-blue); margin:.875rem 0 .25rem; cursor:pointer; min-height:1.5rem; }
.studio-range p,.studio-help { font-size:.75rem; line-height:1.5; color:var(--av-muted); }
.studio-reduced { border-top:1px solid #e0e0e0; padding-top:1rem; margin-top:1.75rem; }
.studio-implementation { display:grid; grid-template-columns:1fr 1.3fr; gap:3rem; padding-block:3rem; border-bottom:1px solid #e0e0e0; }
.studio-implementation > div { min-width:0; }
.studio-implementation > div > p { margin-block:1rem 1.5rem; color:var(--av-muted); }
.studio-implementation pre { margin:0; overflow-x:auto; padding:1.5rem; border-radius:.75rem; background:#010113; color:#e4e4ef; font:.8125rem/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; }
#motion-copy-status { display:block; font-size:.875rem; margin-top:.75rem; color:var(--av-muted); min-height:1.5rem; }
.studio-guidelines { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; padding-block:2.5rem 0; }
.studio-guidelines h2 { font:500 1rem/1.4 var(--av-body); margin-bottom:.75rem; }
.studio-guidelines p { color:var(--av-muted); font-size:.875rem; }
.studio-footer { display:flex; justify-content:space-between; gap:1rem; padding:1.5rem var(--av-page-gutter); border-top:1px solid #e0e0e0; font-size:.875rem; color:var(--av-muted); }
@media(max-width:64rem) {
  .studio-workspace { grid-template-columns:minmax(0,1fr) 16rem; }
  .studio-controls { padding:1.25rem; }
}
@media(max-width:48rem) {
  .studio-header { align-items:flex-start; gap:1rem; }
  .studio-header img { width:8.75rem; }
  .studio-header nav { flex-direction:column; gap:.5rem; font-size:.8125rem; }
  .studio-heading { flex-direction:column; align-items:flex-start; }
  .studio-workspace,.studio-implementation,.studio-guidelines { grid-template-columns:minmax(0,1fr); }
  .studio-stage .av-entropy { height:25rem; min-height:25rem; }
  .studio-controls { max-height:none; overflow:visible; }
  .studio-scene-label { top:1.25rem; left:1.25rem; }
  .studio-scene-footer { left:1.25rem; right:1.25rem; flex-wrap:wrap; }
  .studio-main { margin-block:2rem; }
  .studio-implementation { gap:1rem; }
  .studio-footer { flex-direction:column; }
}

/* Keep control captions readable over a detailed field. */
.studio-scene-label{background:var(--entropy-surface);padding:.5rem .75rem;border:1px solid #8883;border-radius:.25rem}
.studio-scene-footer [data-av-motion-status]{background:var(--entropy-surface);padding:.4rem .65rem}