/* V7 studio geometry. Colors and type remain the shared, red-light-aware tokens. */
html.studio-open { overflow: hidden; }
.studio-effects { box-sizing: border-box; width: min(860px,calc(100vw - 16px)); max-width: none; max-height: calc(100dvh - 16px); overflow: auto; border: 1px solid var(--line); border-radius: 20px; margin: auto; padding: clamp(18px,3vw,30px); background: var(--bg); color: var(--ink); }
.studio-effects::backdrop { background: #03060bc9; }
.studio-effects h2 { font: 650 23px/1.35 var(--ui); margin: 0; }
.studio-effects .studio-inspection-header { flex-wrap: wrap; gap: 12px; }
.studio-effects p { font: 13px/1.7 var(--ui); color: var(--ink-soft); margin: 14px 0; }
.studio-effects select { box-sizing: border-box; width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--surface); color: var(--ink); font: 13px/1.5 var(--ui); }
.studio-effects summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 13px/1.5 var(--ui); }
.studio-effect-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.studio-effect-tabs button { font-size: 12px; }
.studio-effect-tabs button[aria-pressed=true] { color: var(--accent); border-color: var(--accent); background: var(--surface-raised); }
.studio-effect-stage { position: relative; isolation: isolate; background: #030507; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; touch-action: pan-y; }
.studio-effect-stage img { display: block; width: 100%; height: clamp(230px,52dvh,600px); object-fit: contain; }
.studio-effect-film { display: block; width: min(100%,calc(52dvh * 802 / 1200)); height: auto; max-height: 52dvh; margin: 16px auto; aspect-ratio: 802 / 1200; object-fit: contain; background: #030507; border-radius: 14px; }
.studio-effect-stage[data-kind=gaps] { aspect-ratio: 3 / 2; }
.studio-effect-stage[data-kind=lines] { aspect-ratio: 2; }
.studio-effect-stage:is([data-kind=deep-sky],[data-kind=sky-brightness],[data-kind=flats],[data-kind=comet],[data-kind=planetary],[data-kind=wavelets]) { aspect-ratio: var(--example-ratio,1400 / 1057); width: min(100%,calc(52dvh * (var(--example-ratio,1400 / 1057)))); margin-inline: auto; }
.studio-effect-stage[data-kind=blend-compare] { aspect-ratio: 802 / 1200; width: min(100%,400px); margin-inline: auto; }
.studio-effect-stage:not([data-kind=blend]) picture { position: absolute; inset: 0; }
.studio-effect-stage:not([data-kind=blend]) img { height: 100%; object-fit: cover; object-position: 50% 0; }
.studio-effect-baseline { clip-path: inset(0 calc(100% - var(--split,50%)) 0 0); }
.studio-effect-divider { position: absolute; top: 0; bottom: 0; left: var(--split,50%); width: 2px; transform: translateX(-50%); background: var(--accent); pointer-events: none; }
.studio-effect-stage:not([data-kind=blend])::after { content: ''; position: absolute; top: 50%; left: var(--split,50%); width: 44px; height: 44px; display: block; transform: translate(-50%,-50%); border: 1px solid color-mix(in srgb, var(--accent) 68%, #fff); border-radius: 50%; background: var(--accent); box-shadow: inset 0 1px 0 #ffffff55, 0 2px 8px #000a; pointer-events: none; }
.studio-effect-stage:not([data-kind=blend]) > .studio-wipe-glyph { position: absolute; z-index: 3; top: 50%; left: var(--split,50%); width: 20px; height: 14px; transform: translate(-50%,-50%); overflow: visible; color: #17120b; pointer-events: none; }
.studio-effect-stage:not([data-kind=blend]) > .studio-wipe-glyph path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.studio-effect-stage[data-kind=blend] > .studio-wipe-glyph { display: none; }
.studio-effect-stage:has(#studio-effect-split:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
#studio-effect-split { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }
.studio-effect-endpoints { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.studio-effect-image-label { position: absolute; top: 10px; z-index: 1; padding: 5px 8px; border: 1px solid #ffffff30; border-radius: 7px; background: #030507c9; color: #fff; font: 600 11px/1.5 var(--ui); pointer-events: none; }
.studio-effect-before-label { left: 10px; } .studio-effect-after-label { right: 10px; }
.studio-effect-labels-clipped :is(.studio-effect-before-label,.studio-effect-after-label) { visibility: hidden; }
.studio-memory-confirm { padding: 16px; margin-top: 16px; border: 1px solid var(--warning); border-radius: 12px; }
.studio-memory-confirm > button { margin: 4px 8px 4px 0; }
#tool.studio .studio-see-effect { margin: 0 0 14px; background: transparent; border-color: var(--line); color: var(--accent); min-height: 44px; font-size: 12px; }
.studio-memory-sheet { box-sizing: border-box; width: min(800px,calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--ink); overflow: auto; }
.studio-memory-sheet::backdrop { background: #03060bc9; }
.studio-memory-section { padding: 22px 0; border-bottom: 1px solid var(--line); }
.studio-memory-sheet h2 { margin: 0; font: 650 22px/1.35 var(--ui); }
.studio-memory-sheet h3 { margin: 0 0 10px; font: 650 17px/1.5 var(--ui); }
.studio-memory-sheet p { color: var(--ink-soft); font: 13px/1.65 var(--ui); margin: 8px 0 16px; }
.studio-memory-field { display: grid; gap: 8px; margin: 16px 0; font: 600 13px/1.5 var(--ui); }
.studio-memory-field:has(input[type=checkbox]) { display: flex; align-items: flex-start; gap: 12px; }
.studio-memory-field input:not([type=checkbox]) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--surface); color: var(--ink); font: 13px/1.5 var(--ui); }
.studio-memory-field input[type=checkbox] { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--accent); }
.studio-memory-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.studio-memory-list { display: grid; gap: 12px; margin: 16px 0; }
.studio-memory-item { border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 0; overflow-wrap: anywhere; }
.studio-memory-item pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.6 var(--data); }
.studio-memory-item summary { min-height: 44px; cursor: pointer; font: 13px/1.5 var(--ui); }
.studio-memory-suggestion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; font: 13px/1.5 var(--ui); }
.studio-memory-suggestion > span { flex: 1 1 100%; }
.studio-memory-notice { padding: 12px 16px; margin: 0 0 14px; border: 1px solid var(--accent); border-radius: 12px; font: 13px/1.6 var(--ui); }
.studio-export-row #save-master-library { grid-column: 2 / -1; justify-self: start; max-width: 100%; white-space: normal; }
@media(max-width:599px) { .studio-memory-sheet { width: calc(100vw - 16px); padding: 18px; } .studio-memory-sheet .studio-inspection-header { gap: 12px; flex-wrap: wrap; } }
/* The sticky header must cover the top scroll boundary, including after a
   section scrolls past it. Its own padding retains the safe-area clearance. */
.studio-memory-sheet, .studio-effects { padding-block-start: 0; }
/* The review is a real modal drawer: the picture remains visible beside it,
   focus stays inside, and its actions never scroll out of the phone viewport. */
#tool.studio .review-sheet { padding: 12px; background: #03050980; place-items: stretch end; }
#tool.studio .review-sheet-inner { width: min(1060px, 100%); height: 100%; max-height: none; border-radius: 20px; box-shadow: -24px 0 80px #0008; background: var(--bg); }
#tool.studio .review-head { padding-block: 20px 14px; }
#tool.studio .review-head h3 { font-size: 23px; letter-spacing: -.025em; }
#tool.studio .review-head p { font-size: 12px; line-height: 1.5; max-width: 85ch; }
#tool.studio .review-tabs { padding-top: 0; gap: 4px; }
#tool.studio .review-tab { min-height: 44px; padding: 8px 12px; font: 600 12px/1.3 var(--ui); }
#tool.studio .review-body { grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; }
#tool.studio .review-body[data-without-inspector] { grid-template-columns: minmax(0, 1fr); }
#tool.studio .review-step h4 { font-size: 13px; }
#tool.studio .review-step .step-number { display: none; }
#tool.studio .review-explainer { margin-block: 4px; padding: 0; }
#tool.studio .review-explainer > summary { min-height: 44px; display: flex; align-items: center; font-size: 12px; }
#tool.studio .review-step > .bulk-controls { margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
#tool.studio .review-step > .bulk-controls p { font-size: 11px; line-height: 1.5; }
#tool.studio .review-step > .bulk-controls button { min-height: 44px; padding: 8px 10px; font-size: 11px; }
#tool.studio .review-track-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; list-style: none; }
#tool.studio .review-track-grid > li { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font: 12px/1.5 var(--ui); }
#tool.studio .review-track-grid > li.is-inspected { border-color: var(--accent); }
#tool.studio .review-card-source { display: grid; position: relative; min-height: 90px; place-items: center; background: var(--bg-deep); border-radius: 7px; overflow: hidden; }
#tool.studio .review-card-source .frame-thumb { width: 100%; height: 110px; object-fit: contain; border: 0; }
#tool.studio .review-card-source span { padding: 5px; font: 9px/1.5 var(--data); color: var(--ink-soft); }
#tool.studio .review-card-filename { display: block; margin: 0; font: 10px/1.5 var(--data); overflow-wrap: anywhere; color: var(--ink-soft); }
#tool.studio .review-card-state { margin: 0; color: var(--accent); font: 600 11px/1.5 var(--ui); }
#tool.studio .review-card-evidence { padding: 0; margin: 0; border: 0; font-size: 11px; }
#tool.studio .review-card-evidence summary { min-height: 44px; cursor: pointer; display: flex; align-items: center; }
#tool.studio .review-native-choice { display: none; }
#tool.studio .review-choices { display: flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 9px; margin-top: auto; }
#tool.studio .review-choices button { min-width: 0; min-height: 44px; flex: 1; border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft); padding: 5px 2px; font: 600 10px/1.3 var(--ui); cursor: pointer; }
#tool.studio .review-choices button[aria-pressed="true"] { background: var(--surface-raised); color: var(--accent); }
#tool.studio .review-choices button:disabled { opacity: .45; cursor: not-allowed; }
#tool.studio .review-track-grid .frame-look { width: 100%; min-height: 44px; font-size: 12px; }
#tool.studio .review-line-filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0; }
#tool.studio .review-line-filters button { min-height: 44px; font-size: 11px; padding: 8px 10px; }
#tool.studio .review-line-filters button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
#tool.studio .frame-inspector { padding-left: 16px; border-left: 1px solid var(--line); }
.review-return-line { display: none; }
.review-inspector-empty { display: grid; align-content: center; min-height: 180px; padding: 20px; border: 1px dashed var(--line); border-radius: 12px; color: var(--ink-soft); }
.review-inspector-empty strong { color: var(--ink); font-size: 15px; }
.review-inspector-empty p { font-size: 12px; line-height: 1.6; }
#tool.studio .frame-inspector-caption, #tool.studio .manual-transient-editor p { font-size: 12px; }
#tool.studio .review-actions { padding-block: 12px; background: var(--surface); gap: 8px; }
#tool.studio .review-actions button { min-height: 44px; font-size: 12px; }
@media (max-width: 899px) {
  #tool.studio .review-body { display: block; overflow: auto; overscroll-behavior: contain; }
  #tool.studio .review-body > .review-steps, #tool.studio .review-body > .frame-inspector { overflow: visible; }
  #tool.studio .frame-inspector { border-left: 0; padding-left: 0; }
  #tool.studio .review-return-line:not([hidden]) { display: block; min-height: 44px; margin-bottom: 12px; }
}
@media (max-width: 699px) {
  #tool.studio .review-sheet { padding: max(8px, env(safe-area-inset-top)) 0 0; display: grid; overflow: hidden; }
  #tool.studio .review-sheet-inner { border-radius: 18px 18px 0 0; overflow: hidden; min-height: 0; }
  #tool.studio .review-sheet-inner > * { padding-inline: 12px; }
  #tool.studio .review-head { padding-block: 14px 10px; }
  #tool.studio .review-head h3 { font-size: 19px; }
  #tool.studio .review-head p { font-size: 11px; }
  #tool.studio .review-sheet-inner > .review-body { flex: 1 1 auto; overflow: auto; }
  #tool.studio .review-tabs { gap: 0; }
  #tool.studio .review-tab { padding-inline: 8px; font-size: 11px; }
  #tool.studio .review-actions { display: grid; grid-template-columns: 1fr auto; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  #tool.studio .review-actions > .primary { grid-column: 1 / -1; }
  #tool.studio .review-track-grid { grid-template-columns: minmax(0, 1fr); }
  #tool.studio .review-card-source .frame-thumb { height: 90px; }
  #tool.studio .review-choices button { font-size: 12px; }
}
body[data-studio-entry="loading"] > .wrap { visibility: hidden; }
.studio-loading { position: fixed; inset: 0; display: grid; place-content: center; padding: 24px; background: var(--bg); color: var(--ink-soft); font-family: var(--ui); }
#tool.studio { position: fixed; inset: 0; z-index: 80; width: 100%; height: calc(100dvh - var(--studio-consent-space, 0px)); max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; display: grid; grid-template: auto minmax(0, 1fr) auto / minmax(0, 1fr); overflow: hidden; background: var(--bg-deep); }
#tool.studio > :not(.studio-top, .studio-body, .studio-dock, .studio-export-sheet, .studio-inspection-sheet, .studio-project-sheet, .studio-tour, .studio-effects, .studio-memory-sheet, #workspace-link-notice) { display: none; }
#tool.studio #workspace-link-notice:not([hidden]) { position: absolute; top: 100px; left: 25%; right: 25%; z-index: 5; }
#tool.studio .studio-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 20px; margin: 0; padding: 12px 20px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.studio-title { display: grid; gap: 3px; min-width: 0; }
.studio-title strong { font-size: 15px; }
.studio-subtitle { font: 11px/1.4 var(--data); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-top-actions { display: flex; align-items: center; gap: 8px; }
#tool.studio .studio-help { position: relative; margin: 0; padding: 0; border: 0; }
#tool.studio .studio-help > summary { list-style: none; }
#tool.studio .studio-help > summary::-webkit-details-marker { display: none; }
#tool.studio .studio-help > summary::marker { content: ''; }
.studio-help-links { position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; width: 270px; padding: 8px; border: 1px solid var(--control-border); border-radius: 14px; background: var(--surface); box-shadow: 0 16px 48px #0008; }
.studio-help-links a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font: 13px/1.5 var(--ui); }
.studio-help-links a:hover { background: var(--surface-raised); }
.studio-help-links > button { width: 100%; margin-bottom: 8px; text-align: left; }
.studio-tour { box-sizing: border-box; width: min(760px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--ink); overflow: auto; }
.studio-tour::backdrop { background: #03060bc9; }
.studio-tour-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.studio-tour h2 { margin: 0; font: 650 24px/1.3 var(--ui); max-width: 20ch; }
.studio-tour h3 { font: 650 15px/1.5 var(--ui); margin: 0 0 8px; }
.studio-tour p { margin: 0; color: var(--ink-soft); font: 13px/1.7 var(--ui); }
.studio-tour-steps { display: grid; gap: 22px; margin: 28px 0; padding-left: 24px; }
.studio-tour-steps li { padding-left: 8px; }
.studio-tour-steps li::marker { color: var(--accent); font: 600 15px/1.5 var(--data); }
.studio-tour-keyboard { padding-top: 20px; border-top: 1px solid var(--line); }
.studio-tour-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.studio-example { margin: 24px 0 0; min-width: 0; }
.studio-example h3 { margin: 0 0 12px; color: var(--accent); font: 600 13px/1.5 var(--ui); }
.studio-example-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.studio-example-header h3 { margin: 0; }
#tool.studio .studio-example-header button { font-size: 11px; padding: 8px 12px; }
.studio-example img { display: block; width: 100%; height: clamp(160px, 28dvh, 300px); object-fit: contain; background: #05070a; border: 1px solid var(--line); border-radius: 12px; }
.studio-example figcaption { margin-top: 12px; color: var(--ink-soft); font: 12px/1.65 var(--ui); }
.studio-example > a { display: inline-flex; align-items: center; min-height: 44px; font: 12px/1.5 var(--ui); }
.studio-learning-actions { display: flex; flex-wrap: wrap; gap: 4px 20px; }
#tool.studio .studio-learning-actions .studio-button { border: 0; background: transparent; color: var(--ink-soft); padding: 8px 0; font-size: 12px; }
#tool.studio .studio-learning-actions .studio-button:hover { color: var(--accent); }
#tool.studio .studio-empty:has(.studio-example:not([hidden])) > h2 { font-size: 20px; max-width: none; margin-block: 12px; }
#tool.studio .studio-empty:has(.studio-example:not([hidden])) > p:not(.studio-private):not(.studio-eyebrow) { display: none; }
.studio-project-sheet { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 24px; border: 1px solid var(--control-border); border-radius: 20px; background: var(--bg); color: var(--ink); overflow: auto; }
.studio-project-sheet::backdrop { background: #02050ab8; }
#tool.studio .studio-project-sheet .studio-inspection-header { gap: 12px; margin-bottom: 12px; }
#tool.studio .studio-project-sheet .project-manifest-panel { padding: 0; border: 0; margin: 10px 0 0; border-radius: 0; background: transparent; box-shadow: none; }
.studio-project-sheet .project-manifest-panel > summary { display: none; }
#tool.studio .studio-project-sheet .studio-inspection-header h2 { margin: 0; font-size: 20px; }
.studio-project-sheet p { margin: 10px 0; font: 13px/1.55 var(--ui); }
.studio-project-sheet .project-manifest-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block: 14px; }
.studio-project-sheet .project-manifest-actions > * { width: 100%; min-height: 44px; justify-content: center; margin: 0; border-radius: 8px; }
#tool.studio .studio-button, #tool.studio .studio-mode-label { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: 600 13px/1.3 var(--ui); cursor: pointer; }
#tool.studio .studio-button:hover, #tool.studio .studio-mode-label:hover { border-color: var(--control-border); }
#tool.studio .studio-mode-label { color: var(--accent); list-style: none; }
.studio-mode-label::-webkit-details-marker { display: none; }
.studio-mode-label::marker { content: ''; }
.studio-mode-label::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.studio-modes[open] .studio-mode-label::after { transform: rotate(-135deg) translateY(-1px); }
#tool.studio .studio-modes { position: relative; margin: 0; padding: 0; border: 0; }
#tool.studio .studio-modes #mode-picker { position: absolute; inset: calc(100% + 8px) auto auto 0; width: min(580px, calc(100vw - 32px)); padding: 16px; background: var(--surface); border: 1px solid var(--control-border); border-radius: 14px; z-index: 8; box-shadow: 0 16px 60px #0009; }
#tool.studio .studio-modes .mode-choices { grid-template-columns: minmax(0, 1fr); gap: 6px; }
#tool.studio .studio-modes .mode-card small { position: static; width: auto; height: auto; clip: auto; white-space: normal; display: block; }
#tool.studio .studio-modes .mode-choice-title { display: contents; max-inline-size: none; padding-inline-end: 0; min-block-size: 0; }
#tool.studio .studio-modes .mode-card { min-block-size: 0; }
#tool.studio .studio-modes #mode-picker { max-block-size: calc(100dvh - 80px); overflow-y: auto; }
@media (max-width: 479px) {
  #tool.studio .studio-modes .mode-choices { grid-template-columns: minmax(0, 1fr); }
  .studio-project-sheet .project-manifest-actions { grid-template-columns: minmax(0, 1fr); }
}
#tool.studio .studio-top #stage-bar { grid-column: 1 / -1; margin: 0; padding: 2px 0; border: 0; background: transparent; flex-wrap: nowrap; overflow-x: auto; }
#tool.studio .studio-top #stage-bar button { flex-shrink: 0; }
#tool.studio .studio-top #stage-bar button::after { display: none !important; content: none !important; }
#tool.studio .studio-body { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px; min-height: 0; overflow: hidden; }
#tool.studio .studio-frames, #tool.studio .studio-recipe { min-width: 0; overflow: auto; overscroll-behavior: contain; padding: 18px; background: var(--bg); }
#tool.studio .studio-frames { border-right: 1px solid var(--line); }
#tool.studio .studio-recipe { border-left: 1px solid var(--line); }
#tool.studio .studio-center { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 24px; display: flex; flex-direction: column; }
#tool.studio .studio-empty { margin: auto; padding: clamp(20px, 4vw, 56px); width: 100%; max-width: 660px; border: 1px solid var(--line); border-radius: 22px; background: var(--bg); }
.studio-empty h2 { max-width: 15ch; font-size: clamp(28px, 3vw, 44px); font-weight: 750; line-height: 1.08; letter-spacing: -.025em; margin: 20px 0; }
.studio-empty p { color: var(--ink-soft); }
.studio-empty .studio-eyebrow { color: var(--accent); font: 500 11px/1.5 var(--data); letter-spacing: .1em; }
.studio-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 18px; }
#tool.studio .studio-empty-actions .studio-button:first-child { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.studio-empty .studio-private { font-size: 12px; }
#tool.studio .studio-empty #context-rail { position: static; padding: 16px 0 0; margin-top: 24px; border: 0; border-top: 1px solid var(--line); box-shadow: none; background: transparent; display: grid; gap: 12px; }
#tool.studio .studio-frames .source-tabs { display: grid; grid-template-columns: .8fr 1.15fr 1.2fr; gap: 4px; padding: 4px; overflow: visible; }
#tool.studio .studio-frames .source-tabs button { display: grid; grid-template-rows: 30px 18px; justify-items: center; align-items: center; min-width: 0; min-height: 64px; gap: 4px; padding: 4px; font-size: 12px; line-height: 15px; overflow-wrap: normal; }
#tool.studio .studio-frames .source-tabs [data-source-tab-count] { font: 500 11px/18px var(--data); color: var(--ink-soft); }
/* Pane width, not page width, determines these layouts. */
#tool.studio .studio-frames .role-bucket-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
#tool.studio .studio-frames .role-bucket { padding: 16px; border-radius: 12px; }
#tool.studio .studio-frames .role-bucket-heading { align-items: center; flex-wrap: wrap; gap: 8px; }
#tool.studio .studio-frames .role-bucket-heading h4 { font-size: 14px; }
#tool.studio .studio-frames .role-bucket-heading output { font-size: 11px; white-space: nowrap; }
#tool.studio .studio-frames .role-bucket-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; }
#tool.studio .studio-frames .role-bucket-actions :is(.role-add,.role-clear) { padding: 10px 12px; font-size: 12px; line-height: 18px; }
#tool.studio .studio-frames .role-add input[type=file] { inset: 0; width: 100%; height: 100%; opacity: 0; clip: auto; clip-path: none; cursor: pointer; }
#tool.studio .studio-frames .additional-heading { display: block; }
#tool.studio .studio-frames .additional-heading h3 { font-size: 16px; line-height: 1.35; }
#tool.studio .studio-frames .additional-heading p { margin-top: 8px; font-size: 12px; line-height: 1.6; }
#tool.studio .studio-frames .session-inspector { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
#tool.studio .studio-frames .session-inspector h3 { font-size: 15px; line-height: 1.5; }
#tool.studio .studio-frames .session-inspector :is(p,li,summary) { font-size: 12px; line-height: 1.65; }
#tool.studio .studio-frames .role-heading { align-items: start; }
#tool.studio .studio-frames .role-heading h3 { font-size: 15px; line-height: 1.5; }
#tool.studio .studio-frames .required-word { display: block; margin-left: 0; font-size: 11px; }
#tool.studio .studio-frames .role-heading output { padding-top: 4px; font-size: 11px; white-space: nowrap; }
#tool.studio .studio-recipe :is(.resource-profile-choices,.plan-actual-controls,.plan-actual-pairing,.plan-actual-pair-evidence) { grid-template-columns: minmax(0, 1fr); }
#tool.studio .studio-recipe .resource-profile-choices { gap: 8px; }
#tool.studio .studio-recipe .resource-profile-choices label { align-items: flex-start; gap: 12px; padding: 14px; border-radius: 10px; }
#tool.studio .studio-recipe .resource-profile-choices strong { font: 600 14px/1.4 var(--ui); overflow-wrap: normal; }
#tool.studio .studio-recipe .resource-profile-choices small { font-size: 12px; line-height: 1.6; overflow-wrap: normal; }
#tool.studio .studio-recipe .resource-profile-result dl { grid-template-columns: minmax(0, 1fr); gap: 5px; }
#tool.studio .studio-recipe .resource-profile-result dd { margin-bottom: 10px; }
#tool.studio .studio-recipe :is(.mode-note,.mode-help p,.advanced-panel p) { font-size: 12px; line-height: 1.65; overflow-wrap: normal; }
#tool.studio .studio-recipe .advanced-panel { padding: 14px 0; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
#tool.studio .studio-recipe .advanced-panel > summary { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; box-sizing: border-box; padding: 6px 40px 6px 0; min-height: 44px; font-size: 14px; line-height: 1.5; list-style: none; }
#tool.studio .studio-recipe .advanced-panel > summary::-webkit-details-marker { display: none; }
#tool.studio .studio-recipe .advanced-panel > summary::marker { content: ''; }
#tool.studio .studio-recipe .advanced-panel > summary::before { content: none !important; display: none !important; }
#tool.studio .studio-recipe .advanced-panel > summary::after { content: '+'; position: absolute; inset-inline-end: 0; inset-block-start: 50%; display: grid; place-items: center; box-sizing: border-box; inline-size: 32px; block-size: 32px; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); font: 600 17px/1 var(--ui); transform: translateY(-50%); }
#tool.studio .studio-recipe .advanced-panel[open] > summary::after { content: '−'; }
#tool.studio .studio-recipe .advanced-panel > summary small { order: initial; display: block; margin: 0; max-inline-size: none; text-align: left; color: var(--ink-soft); font-size: 11px; font-weight: 400; line-height: 1.5; }
#tool.studio .studio-recipe :is(input:not([type=checkbox],[type=radio]),select,button) { max-width: 100%; min-width: 0; }
#tool.studio .studio-recipe .dependent-controls { margin-left: 0; padding-left: 12px; }
#tool.studio .studio-recipe :is(.project-manifest-actions,.plan-actual-actions) { display: flex; flex-wrap: wrap; gap: 8px; }
#tool.studio .studio-frames .file-drop { padding: 18px 10px; min-height: 110px; }
#tool.studio .studio-frames .file-drop-mark { display: none; }
#tool.studio .studio-frames .file-drop-label { font-size: 15px; }
#tool.studio .studio-frames .file-drop-hint { font-size: 11px; }
/* Once Lights are selected, make room for the actual file list. Keep the
   same labelled input/drop target and restore the format help when cleared. */
#tool.studio .studio-frames #source-panel-lights:has(#role-list-light:not([hidden])) .required-word { display: none; }
#tool.studio .studio-frames #source-panel-lights:has(#role-list-light:not([hidden])) .file-drop { min-height: 48px; padding: 10px; }
#tool.studio .studio-frames #source-panel-lights:has(#role-list-light:not([hidden])) .file-drop-label { font-size: 13px; }
#tool.studio .studio-frames #source-panel-lights > p { margin-block: 10px; font-size: 12px; }
#tool.studio .studio-frames #source-panel-lights > details { margin-block: 10px; }
#tool.studio .studio-empty { padding: clamp(22px, 3vw, 40px); }
#tool.studio .studio-empty h2 { max-width: 16ch; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.12; text-wrap: balance; }
#tool.studio .studio-empty > p { max-width: 45ch; }
#tool.studio .studio-empty[data-has-frames="true"] .studio-empty-actions .studio-button { background: var(--surface); color: var(--ink); border-color: var(--control-border); }
#tool.studio .studio-frames .lights-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-block: 8px 12px; }
#tool.studio .studio-frames .lights-actions .folder-row { margin: 0; text-align: left; font-size: 12px; }
#tool.studio .studio-frames .lights-actions .role-clear { margin: 0; padding-inline: 10px; min-height: 44px; font-size: 12px; }
#tool.studio .studio-frames .lights-actions .capability-note { grid-column: 1 / -1; margin: 0; font-size: 12px; }
#tool.studio .studio-frames #source-panel-lights:has(#role-list-light:not([hidden])) .file-drop-hint { display: none; }
#tool.studio .studio-frames .mobile-desktop-recommendation { font-size: 11px; }
#tool.studio .studio-frames .session-intake { padding: 0; border: 0; background: transparent; }
#tool.studio .studio-frames .step-sub, #tool.studio .studio-recipe > .step-mark .step-sub { display: none; }
#tool.studio .studio-recipe .mode-controls { padding: 0; border: 0; background: transparent; }
#tool.studio .studio-recipe .mode-controls > legend { float: none; }
#tool.studio .studio-recipe .control-field { min-width: 0; }
#tool.studio .studio-recipe .control-field > span:first-child { grid-column: 1; font-size: 13px; line-height: 1.5; }
#tool.studio .studio-recipe :is(.control-field,.control-check) small { display: block; margin-top: 4px; font: 400 12px/1.55 var(--ui); color: var(--ink-soft); }
#tool.studio .studio-recipe .control-field:has(> .gloss-q) > span { padding-right: 4px; }
#tool.studio .studio-recipe .control-field:has(> .gloss-q) { grid-template-columns: minmax(0, 1fr) auto auto; }
#tool.studio .studio-recipe .control-field > .gloss-q { grid-column: 3; grid-row: 1; }
#tool.studio .studio-recipe .control-field > output { grid-column: 2; grid-row: 1; }
#tool.studio .studio-recipe .control-field > output { white-space: nowrap; font: 12px/1.4 var(--data); }
#tool.studio .studio-recipe .control-field > .studio-choice-note { grid-column: 1 / -1; margin: 0; font-weight: 400; }
#tool.studio .plan-actual-panel input:not([type="file"]), #tool.studio .plan-actual-panel select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--control-border); border-radius: 10px; background: var(--surface); color: var(--ink); font: 13px/1.4 var(--ui); }
#tool.studio .plan-actual-panel input:focus-visible, #tool.studio .plan-actual-panel select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#tool.studio .plan-actual-panel label { display: grid; gap: 6px; }
#tool.studio .plan-actual-pairing { padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
#tool.studio .plan-actual-pair-evidence { gap: 8px; }
#tool.studio .studio-recipe .studio-recipe-group { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
#tool.studio .studio-recipe .studio-recipe-group > summary { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 12px 0; font: 600 13px/1.4 var(--ui); cursor: pointer; }
#tool.studio .studio-recipe .studio-recipe-group > summary::after { content: '+'; color: var(--ink-soft); margin-left: auto; }
#tool.studio .studio-recipe .studio-recipe-group[open] > summary::after { content: '−'; }
#tool.studio .studio-recipe .studio-recipe-value { margin-left: auto; max-width: 130px; color: var(--accent); font: 500 11px/1.4 var(--ui); text-align: right; }
#tool.studio .studio-recipe .studio-recipe-value + * { margin-left: 0; }
#tool.studio .studio-recipe .studio-recipe-group > :not(summary) { margin-bottom: 16px; }
#tool.studio .studio-recipe .studio-recipe-group > .dependent-controls { border: 0; padding: 0; }
#tool.studio .studio-recipe .studio-recipe-group > summary small { display: none; }
#tool.studio .studio-center #panel { position: static; display: block; padding: 0; margin: 0; border: 0; background: transparent; min-width: 0; }
#tool.studio #working { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; margin: 12px 0; }
#tool.studio #working :is(.working-line,.working-file) { margin: 5px 0 0; font: 12px/1.5 var(--ui); overflow-wrap: anywhere; }
#tool.studio #working #cancel { display: none; }
#tool.studio #panel:has(#working:not([hidden])) > #status { font: 12px/1.6 var(--ui); }
#tool.studio .studio-run-details { margin-block: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.studio-run-details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 600 13px/1.5 var(--ui); }
.studio-run-details > summary::before { content: '+'; margin-right: 10px; color: var(--accent); }
.studio-run-details[open] > summary::before { content: '−'; }
#tool.studio .studio-run-details :is(p,li) { font-size: 12px; line-height: 1.6; }
#tool.studio .studio-center #preview-figure { position: static; margin: 12px 0; }
#tool.studio .studio-result-facts { padding: 18px; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.studio-result-facts h3 { margin: 0 0 16px; font: 600 17px/1.4 var(--ui); }
.studio-result-facts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
.studio-result-facts dl > div { min-width: 0; }
.studio-result-facts dt { color: var(--ink-soft); font: 11px/1.5 var(--ui); }
.studio-result-facts dd { margin: 4px 0 0; font: 600 13px/1.5 var(--data); overflow-wrap: anywhere; }
.studio-result-facts p { margin: 16px 0 0; font-size: 11px; line-height: 1.6; }
.studio-result-facts .studio-sample-notice { color: var(--accent); margin: 0 0 16px; }
@media (min-width: 1500px) {
  #tool.studio .studio-center #panel:has(.studio-result-facts:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) 240px; column-gap: 16px; }
  #tool.studio #panel:has(.studio-result-facts) > * { grid-column: 1 / -1; }
  #tool.studio #panel:has(.studio-result-facts) > #preview-figure { grid-column: 1; }
  #tool.studio #panel:has(.studio-result-facts) > .studio-result-facts { grid-column: 2; align-self: start; }
  .studio-result-facts dl { grid-template-columns: minmax(0, 1fr); }
}
#tool.studio #panel #preview { width: 100%; height: auto; aspect-ratio: auto; max-height: var(--studio-picture-height, max(96px, calc(100dvh - 420px))); object-fit: contain; background: #000; }
#tool.studio .studio-center #actions { min-width: 0; }
#tool.studio .studio-picture-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
#tool.studio .studio-picture-tools .studio-button { font-size: 12px; }
#tool.studio .studio-picture-tools .studio-button:last-child { color: var(--accent); }
.studio-picture-compact { display: none; }
#tool.studio .result-inspector { display: none; }
#tool.studio .studio-inspection-sheet { inset: 0; margin: auto; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 20px; width: min(1400px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0 24px 24px; box-sizing: border-box; overscroll-behavior: contain; }
#tool.studio .studio-inspection-sheet::backdrop { background: #000b; backdrop-filter: blur(6px); }
.studio-inspection-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.studio-inspection-header h2 { margin: 0; font: 700 clamp(20px, 3vw, 28px)/1.2 var(--ui); }
.studio-inspection-header button { flex-shrink: 0; }
#tool.studio .studio-inspection-sheet .result-inspector[open] { display: block; margin: 0; padding: 16px 0 0; border: 0; }
.studio-inspection-sheet .result-inspector > summary { display: none; }
.studio-inspection-sheet .result-inspector > p:first-of-type { max-width: none; margin: 0 0 12px; font-size: 12px; line-height: 1.6; }
.studio-inspection-sheet .review-viewport { max-height: clamp(200px, calc(100dvh - 440px), 480px); }
.studio-inspection-sheet .review-image-pickers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.studio-inspection-sheet .review-image-pickers label { min-width: 0; }
.studio-inspection-sheet .review-image-pickers select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; margin-top: 6px; border: 1px solid var(--control-border); border-radius: 10px; background: var(--surface); color: var(--ink); font: 13px/1.4 var(--ui); }
.studio-inspection-sheet .review-toolbar { display: grid; grid-template-columns: auto auto 44px 44px minmax(80px, 1fr); gap: 6px; margin-block: 16px; }
.studio-inspection-sheet .review-toolbar button { margin: 0; padding: 8px; font: 12px/1.4 var(--ui); border-radius: 10px; }
.studio-inspection-sheet .review-status { font-size: 12px; line-height: 1.6; }
#tool.studio #panel .mask-editor { display: none; }
#tool.studio .studio-mask-sheet .mask-editor { display: block; margin: 0; padding: 20px 0 0; border: 0; background: transparent; }
.studio-mask-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 310px); align-items: start; gap: 16px 24px; }
.studio-mask-sheet .mask-editor > summary { display: none; }
.studio-mask-content > p { grid-column: 1 / -1; margin: 0; font-size: 13px; }
.studio-mask-sheet .mask-editor-canvas { grid-column: 1; grid-row: 2 / span 5; width: 100%; height: auto; max-height: max(180px, calc(100dvh - 235px)); object-fit: contain; margin: 0; background: #05080c; border-radius: 12px; }
.studio-mask-content > :is(.mask-editor-tools, button) { grid-column: 2; margin: 0; }
.studio-mask-sheet .mask-editor-tools { display: flex; flex-wrap: wrap; gap: 12px; }
.studio-mask-sheet .mask-editor-tools label { min-width: 0; }
.studio-mask-sheet .mask-editor-tools input[type=number] { width: 72px; min-height: 44px; }
.studio-mask-sheet .mask-editor button { min-height: 44px; }
@media (max-width: 699px) {
  #tool.studio .studio-picture-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #tool.studio .studio-picture-tools .studio-button { min-width: 0; min-height: 44px; padding-inline: 6px; }
  #tool.studio .studio-picture-full { display: none; }
  #tool.studio .studio-picture-compact { display: inline; }
  .studio-mask-content { display: flex; flex-direction: column; gap: 16px; }
  .studio-mask-sheet .mask-editor-canvas { max-height: max(180px, calc(100dvh - 390px)); }
  .studio-mask-content > :is(.mask-editor-tools, button) { width: 100%; }
}
@media (max-width: 699px) {
  #tool.studio .studio-inspection-sheet { width: 100%; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; padding: 0 16px max(16px, env(safe-area-inset-bottom)); }
  .studio-inspection-header { padding-top: max(16px, env(safe-area-inset-top)); gap: 8px; }
  .studio-inspection-header button { padding-inline: 12px; font-size: 12px; }
}
#tool.studio .studio-result-detail { padding: 0; margin: 10px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
#tool.studio .studio-result-detail > summary { display: flex; align-items: center; min-height: 48px; padding: 12px 16px; font: 600 12px/1.5 var(--ui); cursor: pointer; }
#tool.studio .studio-result-detail > summary::before { content: '+'; margin-right: 10px; color: var(--accent); }
#tool.studio .studio-result-detail[open] > summary::before { content: '−'; }
#tool.studio .studio-result-detail > :not(summary) { margin: 0; padding: 16px; border: 0; }
#tool.studio .studio-result-detail > ul { padding-left: 32px; }
#tool.studio .result-export > .review-open-row { display: none; }
#tool.studio .review-bulk-disclosure { margin: 12px 0; padding: 0; border: 0; }
#tool.studio .review-bulk-disclosure > summary { display: flex; align-items: center; min-height: 44px; font: 12px/1.5 var(--ui); cursor: pointer; }
#tool.studio .studio-dock { display: flex; gap: 16px; align-items: center; padding: 12px 20px max(12px, env(safe-area-inset-bottom)); margin: 0; border-top: 1px solid var(--line); background: var(--bg); }
#tool.studio .studio-dock #session-action { position: static; display: grid; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; width: min(340px, 40%); }
#tool.studio .studio-dock #start-session { min-height: 48px; }
#tool.studio .studio-dock #start-session-help { margin: 5px 0 0; font-size: 11px; line-height: 1.25; }
.studio-run-summary { font: 12px/1.5 var(--data); color: var(--ink-soft); max-width: 40%; }
.studio-pane-controls { display: none; gap: 6px; }
#tool.studio #actions a[download]:not([data-section-picture]) { display: none; }
#tool.studio .studio-export-button { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); min-width: 140px; }
#tool.studio .studio-comet-stack { margin-left: auto; min-height: 48px; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
#tool.studio .studio-comet-stack:disabled { opacity: .55; cursor: not-allowed; }
#tool.studio .studio-center #panel:has(#comet-marker-panel) { display: flex; flex-direction: column; }
#tool.studio #panel:has(#comet-marker-panel) > #actions { order: 1; }
#tool.studio #panel:has(#comet-marker-panel) > .studio-result-detail { order: 2; }
#tool.studio #panel:has(#comet-marker-panel) > #reset { order: 3; }
#tool.studio #comet-marker-panel > h3 { margin-top: 12px; }
#tool.studio #comet-marker-panel > p { font-size: 12px; line-height: 1.6; }
#tool.studio #comet-stack-marked { display: none; }
@media (max-width: 699px) {
  #tool.studio .studio-comet-stack { grid-column: 2; grid-row: 1 / 3; min-width: 0; margin: 0; }
}
#tool.studio .studio-export-sheet { width: min(760px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); margin: auto; padding: 24px; border: 1px solid var(--control-border); border-radius: 20px; color: var(--ink); background: var(--surface); overflow: auto; }
.studio-export-sheet::backdrop { background: #000b; }
.studio-export-top { position: sticky; top: -24px; z-index: 1; margin: -24px -24px 0; padding: 18px 24px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.studio-export-sheet h2 { margin: 24px 0 12px; font-size: 30px; }
.studio-export-sheet p { color: var(--ink-soft); }
.studio-export-list { display: grid; gap: 28px; margin-top: 24px; }
.studio-export-group { min-width: 0; }
.studio-export-group > h3 { margin: 0 0 6px; font: 600 16px/1.4 var(--ui); }
.studio-export-group > p { font-size: 12px; margin: 0 0 14px; }
.studio-export-rows { display: grid; gap: 8px; }
.studio-export-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.studio-export-format { font: 600 11px/1.5 var(--data); color: var(--accent); }
.studio-export-label { display: grid; gap: 5px; min-width: 0; }
.studio-export-label strong { font: 600 13px/1.5 var(--ui); overflow-wrap: anywhere; }
#tool.studio .studio-export-list button { padding: 10px 14px; text-align: left; }
.studio-export-list small { font: 11px/1.5 var(--data); color: var(--ink-soft); overflow-wrap: anywhere; }
#tool.studio :is(.studio-export-sheet, .studio-mask-sheet, .review-sheet) :is(input[type="text"], input[type="number"], select) { box-sizing: border-box; min-width: 0; min-height: 44px; max-width: 100%; padding: 10px 12px; border: 1px solid var(--control-border); border-radius: 10px; background: var(--surface); color: var(--ink); font: 13px/1.4 var(--ui); }
#tool.studio .result-export > .thumbnail-panel { display: none; }
.studio-export-covers { margin-top: 12px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.studio-export-covers > summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; font: 600 13px/1.5 var(--ui); }
.studio-export-covers > summary::before { content: '+'; margin-right: 10px; color: var(--accent); }
.studio-export-covers[open] > summary::before { content: '−'; }
.studio-export-covers .thumbnail-panel { margin: 0; padding: 0 0 16px; border: 0; }
.studio-export-covers .thumbnail-panel > h3 { display: none; }
.studio-export-covers .thumbnail-panel > p { font-size: 12px; line-height: 1.65; }
.studio-export-covers .thumbnail-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.studio-export-covers .thumbnail-caption { grid-column: 1 / -1; width: 100%; min-width: 0; }
.studio-export-covers .thumbnail-controls :is(input,select,button) { min-height: 44px; min-width: 0; max-width: 100%; }
.studio-export-covers .thumbnail-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.studio-export-covers .thumbnail-row { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.studio-export-covers .thumbnail-preview { width: 100%; height: auto; max-height: 210px; object-fit: contain; background: #000; }
.studio-export-covers .thumbnail-row figcaption { display: grid; gap: 8px; margin: 10px 0 0; min-width: 0; }
.studio-export-covers .thumbnail-download { display: flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
@media (max-width: 599px) {
  #tool.studio .studio-export-sheet { padding: 18px; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .studio-export-top { top: -18px; margin: -18px -18px 0; padding: 14px 18px 12px; }
  .studio-export-row { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 12px; }
  .studio-export-row > button { grid-column: 2; justify-self: start; }
  .studio-export-covers .thumbnail-controls, .studio-export-covers .thumbnail-out { grid-template-columns: minmax(0, 1fr); }
}
#tool.studio:has(.studio-export-button:not([hidden])) #start-session { background: var(--surface-raised); color: var(--ink); border-color: var(--line); }
#tool.studio .studio-stop { border-color: var(--warning); color: var(--warning); }

#tool.studio .studio-close-pane { margin: 0 0 14px; width: 100%; }
@media (min-width: 1100px) { #tool.studio .studio-close-pane, #tool.studio .mobile-desktop-recommendation { display: none; } }
@media (max-width: 1099px) {
  #tool.studio .studio-body { grid-template-columns: minmax(0, 1fr) 310px; }
  #tool.studio .studio-frames { position: absolute; inset: 0 auto 0 0; width: min(380px, 85vw); z-index: 7; box-shadow: 20px 0 60px #0009; transform: translateX(-110%); visibility: hidden; }
  #tool.studio[data-studio-pane="frames"] .studio-frames { transform: none; visibility: visible; }
  .studio-pane-controls { display: flex; }
  .studio-pane-controls button:last-child { display: none !important; }
  #tool.studio .studio-dock { gap: 10px; padding-inline: 12px; }
  .studio-run-summary { font-size: 11px; }
}
@media (max-width: 699px) {
  #tool.studio .studio-top { gap: 8px; padding: max(8px, env(safe-area-inset-top)) 10px 0; }
  #tool.studio .studio-title { display: none; }
  #tool.studio .studio-top { grid-template-columns: minmax(0, 1fr) auto; }
  .studio-top-actions { gap: 4px; }
  #tool.studio .studio-top-actions .studio-button { padding: 8px; font-size: 12px; }
  #tool.studio .studio-top-actions .studio-back { font-size: 0; gap: 0; }
  #tool.studio .studio-top-actions .studio-back::after { content: 'Back'; font-size: 12px; }
  .studio-help-links { position: fixed; top: 64px; right: 12px; width: min(290px, calc(100vw - 24px)); }
  #tool.studio .studio-modes { justify-self: start; }
  #tool.studio .studio-top #stage-bar { padding-bottom: 6px; column-gap: 4px; overflow: hidden; }
  #tool.studio .studio-top #stage-bar button { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; font-size: 10px; padding: 6px 2px; min-height: 44px; }
  #tool.studio .studio-top #stage-bar button::after { display: none; }
  #tool.studio .studio-body { display: block; }
  #tool.studio .studio-center { height: 100%; padding: 14px; }
  #tool.studio .studio-empty { padding: 24px 18px; }
  #tool.studio .studio-frames, #tool.studio .studio-recipe { position: absolute; inset: 10px 0 0; width: auto; height: auto; z-index: 7; border: 1px solid var(--line); border-radius: 20px 20px 0 0; box-shadow: 0 -15px 60px #0009; transform: translateY(110%); visibility: hidden; }
  #tool.studio[data-studio-pane="frames"] .studio-frames, #tool.studio[data-studio-pane="recipe"] .studio-recipe { transform: none; visibility: visible; }
  #tool.studio .studio-dock { display: grid; grid-template-columns: 1fr minmax(0, 1.15fr); gap: 6px 10px; padding: 10px 10px max(10px, env(safe-area-inset-bottom)); }
  #tool.studio .studio-dock #session-action { width: 100%; grid-column: 2; grid-row: 1 / 3; }
  #tool.studio .studio-dock #start-session-help { max-height: 3.75em; overflow: auto; }
  .studio-run-summary { font-size: 10px; max-width: none; grid-column: 1; }
  .studio-pane-controls { gap: 4px; }
  #tool.studio .studio-pane-controls .studio-button { padding-inline: 9px; font-size: 12px; }
  .studio-pane-controls button:last-child { display: inline-flex !important; }
  #tool.studio .studio-stop { grid-column: 1 / -1; }
  #tool.studio .studio-export-button { grid-column: 2; grid-row: 1; min-height: 44px; min-width: 0; }
  #tool.studio:has(.studio-export-button:not([hidden])) .studio-dock #session-action { grid-column: 1 / -1; grid-row: 2; }
  #tool.studio:has(.studio-export-button:not([hidden])) .studio-run-summary { display: none; }
  #tool.studio:has(.studio-export-button:not([hidden])) #start-session { min-height: 36px; font-size: 12px; }
  #tool.studio:has(.studio-export-button:not([hidden])) #start-session-help { text-align: center; }
  #tool.studio .studio-export-sheet { margin: auto 0 0; width: 100%; max-width: 100%; box-sizing: border-box; max-height: 90dvh; border-radius: 20px 20px 0 0; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
/* A landscape phone needs a picture, not a permanently open recipe column. */
@media (min-width: 700px) and (max-width: 1099px) and (max-height: 500px) {
  #tool.studio .studio-top { padding: 6px 12px; gap: 10px; }
  #tool.studio .studio-title { display: none; }
  #tool.studio .studio-top-actions { grid-column: 3; grid-row: 1; gap: 4px; }
  #tool.studio .studio-top-actions .studio-button { padding-inline: 8px; font-size: 12px; }
  #tool.studio .studio-top #stage-bar { grid-column: 2; grid-row: 1; padding: 0; gap: 2px; }
  #tool.studio .studio-top #stage-bar button { min-width: 44px; min-height: 44px; flex: 1; flex-direction: column; gap: 2px; padding: 3px; font-size: 10px; }
  #tool.studio .studio-top #stage-bar button::after { display: none; }
  #tool.studio .studio-body { display: block; }
  #tool.studio .studio-center { height: 100%; padding: 12px; }
  #tool.studio .studio-frames, #tool.studio .studio-recipe { position: absolute; inset: 0; width: auto; z-index: 7; transform: translateY(110%); visibility: hidden; }
  #tool.studio[data-studio-pane="frames"] .studio-frames, #tool.studio[data-studio-pane="recipe"] .studio-recipe { transform: none; visibility: visible; }
  .studio-pane-controls button:last-child { display: inline-flex !important; }
  #tool.studio .studio-dock { padding-block: 8px; }
  #tool.studio .studio-center #panel:has(#preview-figure:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) 230px; grid-template-rows: min-content min-content 1fr; column-gap: 16px; align-items: start; }
  #tool.studio #panel > * { grid-column: 1 / -1; }
  #tool.studio #panel > #preview-figure { grid-column: 1; grid-row: 1 / 4; margin: 0; }
  #tool.studio #panel > #run-count { grid-column: 2; grid-row: 1; margin: 0; }
  #tool.studio #panel > #status { grid-column: 1 / -1; grid-row: 4; margin: 4px 0; }
  #tool.studio #panel > .studio-picture-tools { grid-column: 2; grid-row: 2 / 4; margin: 4px 0 0; gap: 6px; }
  #tool.studio .studio-picture-tools .studio-button { width: 100%; }
}

/* Compact V5/V7 toolbar composition: stable brand, mode, stage and actions. */
#tool.studio .studio-top {
  grid-template-columns: auto auto minmax(90px, 120px) minmax(264px, 1fr) auto;
  grid-template-rows: minmax(52px, auto);
  gap: 8px 12px;
  align-items: center;
  padding: 6px 14px;
  border-bottom-color: var(--line);
}
.studio-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  font: 700 13px/1.2 var(--ui);
  white-space: nowrap;
}
.studio-brand:hover { color: var(--accent); }
.studio-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 9px; }
.studio-brand-mark { display: block; width: 32px; height: 32px; flex: 0 0 auto; }
.studio-brand { grid-column: 1; grid-row: 1; }
#tool.studio .studio-modes { grid-column: 2; grid-row: 1; }
.studio-title { grid-column: 3; grid-row: 1; gap: 2px; }
.studio-title strong { font-size: 14px; }
.studio-title { max-width: 120px; }
.studio-subtitle { font-size: 10px; }
.studio-top-actions { grid-column: 5; grid-row: 1; gap: 6px; }
.studio-shell-project-slot:empty { display: none; }
.studio-shell-project-slot { min-width: 0; }
.studio-ui-icon { display: block; width: 16px; height: 16px; flex: 0 0 16px; }
.studio-top #stage-bar {
  grid-column: 4 !important;
  grid-row: 1;
  min-width: 0;
  justify-content: center;
  padding: 0 !important;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  scrollbar-width: thin;
}
.studio-top #stage-bar button { min-width: 66px; min-height: 44px; flex: 0 0 auto; padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; background: color-mix(in srgb, var(--surface) 64%, transparent); font-size: 11px; white-space: nowrap; }
#tool.studio .studio-top #stage-bar button::after { display: none !important; content: none !important; }
.studio-top #stage-bar .stage-mark { width: 24px; height: 24px; }
#tool.studio .studio-mode-label { min-height: 44px; border-radius: 8px; }
#tool.studio .studio-modes #mode-picker { width: min(456px, calc(100vw - 24px)); padding: 10px; border-radius: 14px; }
#tool.studio #mode-picker > legend { margin: 0 0 6px; padding: 2px 4px; color: var(--ink-soft); font: 600 12px/1.4 var(--ui); }
#tool.studio .studio-modes .mode-choices { grid-template-columns: minmax(0, 1fr); gap: 4px; }
#tool.studio .studio-modes .mode-card {
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 0;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
}
#tool.studio .studio-modes .mode-card:hover { background: var(--surface); }
#tool.studio .studio-modes .mode-card input { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; opacity: 0; clip-path: inset(50%); }
#tool.studio .studio-modes .mode-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
#tool.studio .studio-modes .mode-card > span { display: grid; grid-template-columns: 32px minmax(0, 1fr) 44px; grid-template-rows: minmax(22px, auto) auto; align-items: center; column-gap: 10px; min-width: 0; }
#tool.studio .studio-modes .mode-choice-title { display: contents; }
#tool.studio .studio-modes .mode-choice-title strong { display: contents; font: 650 13px/1.3 var(--ui); }
#tool.studio .studio-modes .mode-choice-title strong .icon { grid-column: 1; grid-row: 1 / span 2; display: block !important; width: 32px; height: 32px; flex: 0 0 32px; padding: 6px; box-sizing: border-box; border-radius: 8px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); fill: none; stroke: currentColor; }
#tool.studio .studio-modes .mode-choice-title .mode-title-text { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; }
#tool.studio .studio-modes .mode-choice-title > .gloss-q { position: relative; inset: auto; top: auto; right: auto; bottom: auto; left: auto; transform: none; grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: center; display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; border-radius: 8px; }
#tool.studio .studio-modes [data-mode-choice="star-trails"] .mode-choice-title strong .icon,
#tool.studio .studio-modes [data-mode-choice="nightscape"] .mode-choice-title strong .icon { color: #f0a845; background: color-mix(in srgb, #f0a845 16%, var(--surface)); }
#tool.studio .studio-modes [data-mode-choice="deep-sky"] .mode-choice-title strong .icon,
#tool.studio .studio-modes [data-mode-choice="comet"] .mode-choice-title strong .icon,
#tool.studio .studio-modes [data-mode-choice="planetary"] .mode-choice-title strong .icon,
#tool.studio .studio-modes [data-mode-choice="calibration-lab"] .mode-choice-title strong .icon { color: #baa2ff; background: color-mix(in srgb, #baa2ff 16%, var(--surface)); }
#tool.studio .studio-modes .mode-card small { grid-column: 2; grid-row: 2; display: block; align-self: start; margin: 1px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.35; }
#tool.studio .studio-modes .mode-card:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); box-shadow: inset 2px 0 var(--accent); }
#tool.studio .studio-body { grid-template-columns: minmax(250px, 276px) minmax(0, 1fr) minmax(286px, 318px); }
#tool.studio .studio-frames, #tool.studio .studio-recipe { padding: 12px 14px; scrollbar-width: thin; scrollbar-gutter: stable; }
#tool.studio .studio-frames .source-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; }
#tool.studio .studio-frames .source-tabs button { min-height: 54px; grid-template-rows: minmax(18px, auto) 16px; padding: 4px 2px; font-size: 11px; line-height: 1.25; }
#tool.studio .studio-frames .source-tabs [data-source-tab-count],
#tool.studio .studio-frames .role-bucket-heading output,
#tool.studio .studio-frames .role-heading output { color: var(--accent); font-variant-numeric: tabular-nums; }
#tool.studio .studio-frames .role-bucket-grid { gap: 8px; }
#tool.studio .studio-frames .role-bucket-heading h4 { display: flex; align-items: center; gap: 8px; flex: 0 0 136px; width: 136px; min-width: 0; white-space: nowrap; }
#tool.studio .studio-frames .role-bucket-heading h4 > .gloss-q { flex: 0 0 auto; margin-inline-start: auto; }
#tool.studio .studio-recipe .control-field:has(> #trail-blend) { align-self: stretch; width: 100%; }
#tool.studio .studio-recipe #trail-blend { box-sizing: border-box; width: 100%; max-width: 100%; padding-inline: 8px 28px; font-size: 12px; }
#tool.studio .studio-see-effect:disabled { opacity: .5; cursor: not-allowed; }
#tool.studio .studio-frames .role-bucket { padding: 12px; }
#tool.studio .studio-frames .role-bucket-actions { gap: 6px; }
#tool.studio .studio-recipe .studio-recipe-group > summary { min-height: 48px; padding-block: 8px; }
#tool.studio .studio-center { padding: 12px 18px; gap: 10px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; scrollbar-gutter: stable; overflow-anchor: none; }
#tool.studio .studio-empty {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  column-gap: 20px;
  margin: 0 auto;
  padding: 14px 18px;
  max-width: 900px;
  min-height: 210px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.studio-orbit {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(190px, min(20vw, 24vh), 210px);
  max-width: 100%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: none;
  -webkit-mask: none;
  mask: none;
  pointer-events: none;
}
.studio-orbit::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-conic-gradient(from -90deg, color-mix(in srgb, var(--ink-soft) 82%, transparent) 0deg .65deg, transparent .65deg 6deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 8px), #000 calc(100% - 8px) 100%);
  mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 8px), #000 calc(100% - 8px) 100%);
  opacity: .62;
}
.studio-orbit::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-conic-gradient(from -90deg, color-mix(in srgb, var(--accent) 88%, transparent) 0deg 1.15deg, transparent 1.15deg 30deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 12px), #000 calc(100% - 12px) 100%);
  mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 12px), #000 calc(100% - 12px) 100%);
  opacity: .68;
}
.studio-orbit i, .studio-orbit b { display: none; }
#tool.studio .studio-empty-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
#tool.studio .studio-empty .studio-eyebrow, #tool.studio .studio-empty h2, #tool.studio .studio-empty > p, #tool.studio .studio-empty-actions, #tool.studio .studio-shell-return-slot { grid-column: auto; }
#tool.studio .studio-empty .studio-eyebrow { margin: 0; font-size: 10px; }
#tool.studio .studio-empty h2 { max-width: none; margin: 4px 0; font-size: clamp(24px, 2vw, 28px); line-height: 1.2; text-align: center; }
#tool.studio .studio-empty-content > p:not(.studio-eyebrow) { max-width: 54ch; margin: 2px 0; font-size: 13px; line-height: 1.45; }
#tool.studio .studio-empty-content > p { margin: 2px 0; font-size: 13px; line-height: 1.5; }
#tool.studio .studio-empty #context-rail { display: none; }
#tool.studio .studio-empty-actions { justify-content: center; gap: 6px; margin: 8px 0 0; }
#tool.studio .studio-empty-actions .studio-button { min-height: 44px; padding: 8px 12px; font-size: 12px; }
.studio-empty .studio-private { display: none; }
#tool.studio .studio-shell-preview-slot { min-width: 0; width: 100%; max-width: 980px; margin: 0 auto; }
#tool.studio .studio-shell-preview-slot:empty { display: none; }
#tool.studio .studio-shell-preview-slot[hidden] { display: none !important; }
#tool.studio .studio-action-priority-note:not([hidden]) { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
#tool.studio .studio-example { width: min(100%, var(--studio-figure-width, 100%)); margin: 0 auto; padding: 0; border: 0; background: transparent; }
#tool.studio .studio-example-kicker { margin: 0 0 4px; color: var(--accent); font: 500 10px/1.4 var(--data); letter-spacing: .09em; }
#tool.studio .studio-example > h2 { margin: 0 0 8px; font: 650 17px/1.3 var(--ui); }
#tool.studio .studio-example-frame { --studio-example-max-height: min(50dvh, 420px); position: relative; isolation: isolate; width: 100%; max-width: 100%; height: var(--studio-example-max-height); aspect-ratio: auto; margin-inline: auto; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #030507; touch-action: pan-y; }
#tool.studio .studio-example-frame picture { position: absolute; inset: 0; display: block; }
#tool.studio .studio-example-frame picture img { display: block; width: 100%; height: 100%; object-fit: contain; background: #030507; border: 0; border-radius: 0; }
#tool.studio .studio-example-frame[data-example-view="sky-detail"] { width: min(100%, calc(var(--studio-example-max-height) * 1.7777778)); height: auto; aspect-ratio: 16 / 9; }
#tool.studio .studio-example-frame[data-example-view="sky-detail"] picture img { object-fit: cover; object-position: 50% 24%; }
#tool.studio .studio-example-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--example-split, 50%)) 0 0); }
#tool.studio .studio-example-divider { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--example-split, 50%); width: 2px; transform: translateX(-50%); background: var(--accent); pointer-events: none; }
#tool.studio .studio-example-frame::after { content: ''; position: absolute; z-index: 3; left: var(--example-split, 50%); top: 50%; display: block; width: 44px; height: 44px; transform: translate(-50%, -50%); border: 1px solid color-mix(in srgb, var(--accent) 68%, #fff); border-radius: 50%; background: var(--accent); box-shadow: inset 0 1px 0 #ffffff55, 0 2px 8px #000a; pointer-events: none; }
#tool.studio .studio-example-frame > .studio-wipe-glyph { position: absolute; z-index: 4; left: var(--example-split, 50%); top: 50%; width: 20px; height: 14px; transform: translate(-50%, -50%); overflow: visible; color: #17120b; pointer-events: none; }
#tool.studio .studio-example-frame > .studio-wipe-glyph path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#tool.studio .studio-example:has(.studio-example-frame[data-example-view="sky-detail"]) > :is(.studio-example-kicker, h2, .studio-example-caption) { width: min(100%, calc(var(--studio-example-max-height, min(50dvh, 420px)) * 1.7777778)); margin-inline: auto; }
#tool.studio .studio-example-labels { position: absolute; inset: 8px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
#tool.studio .studio-example-label { max-width: 48%; padding: 4px 7px; border: 1px solid #ffffff35; border-radius: 6px; background: #030507d9; color: #fff; font: 600 10px/1.4 var(--ui); overflow-wrap: anywhere; }
#tool.studio .studio-example-split { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
#tool.studio .studio-example-frame:has(.studio-example-split:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
#tool.studio .studio-example-caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; width: 100%; max-width: none; margin-top: 8px; color: var(--ink-soft); font: 12px/1.5 var(--ui); }
#tool.studio .studio-example-caption h3, #tool.studio .studio-example-caption p { grid-column: 1 / -1; margin: 0; }
#tool.studio .studio-example-caption h3 { color: var(--ink); font-size: 12px; }
#tool.studio .studio-example-detail { min-height: 44px; display: inline-flex; align-items: center; }
#tool.studio .studio-example-actions { grid-column: 2; grid-row: 1 / span 3; align-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
#tool.studio .studio-example-actions .studio-button { min-height: 44px; padding: 7px 10px; font-size: 11px; }
#tool.studio .studio-example-return[hidden] { display: none !important; }
#tool.studio .studio-frames .role-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
#tool.studio .studio-frames .role-heading h3 { min-width: 0; margin: 0; font-size: 14px; line-height: 1.35; }
#tool.studio .studio-frames .role-heading .required-word { display: none; }
#tool.studio .studio-frames .role-heading output { flex: 0 0 auto; padding: 0; margin-left: auto; font-size: 12px; }
#tool.studio .studio-frames .role-heading .gloss-q { flex: 0 0 auto; }
#tool.studio .studio-frames .session-intake { margin-top: 8px; }
#tool.studio .studio-dock { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; min-height: 60px; padding: 7px 14px max(7px, env(safe-area-inset-bottom)); }
#tool.studio .studio-dock #session-action { width: min(300px, 32vw); margin: 0 0 0 auto; }
#tool.studio .studio-dock #start-session { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; text-align: center; border-radius: 8px; }
#tool.studio .studio-dock #start-session > .icon { position: static; flex: 0 0 18px; width: 18px; height: 18px; color: inherit; }
#tool.studio .studio-dock #start-session > .session-start-label { min-width: 0; white-space: normal; }
#tool.studio :is(.studio-top-actions .studio-button, .studio-pane-controls .studio-button, .studio-frames button, .studio-recipe button, .studio-dock button, .studio-center button, .studio-frames select, .studio-recipe select) { border-radius: 8px; }
#tool.studio :is(.studio-frames .role-bucket, .studio-recipe .mode-controls) { border-radius: 14px; }
#tool.studio .studio-dock #start-session-help { margin: 3px 0 0; font-size: 10px; line-height: 1.3; }
.studio-run-summary { font-size: 11px; }
.studio-filmstrip { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-width: 0; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.studio-filmstrip[hidden] { display: none; }
.studio-filmstrip-label { flex: 0 0 auto; color: var(--ink-soft); font: 500 10px/1.3 var(--data); white-space: nowrap; }
.studio-filmstrip-items { display: flex; gap: 6px; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.studio-filmstrip-item { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; min-width: 108px; max-width: 180px; height: 30px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.studio-filmstrip-thumb { width: 30px; height: 22px; flex: 0 0 auto; object-fit: cover; border-radius: 3px; background: var(--bg-deep); }
.studio-filmstrip-type { display: grid; place-items: center; width: 30px; height: 22px; flex: 0 0 auto; border-radius: 3px; background: var(--surface-raised); color: var(--accent); font: 600 8px/1 var(--data); }
.studio-filmstrip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font: 9px/1.3 var(--data); }
.studio-filmstrip-more { display: grid; place-items: center; flex: 0 0 auto; min-width: 128px; height: 30px; padding-inline: 8px; border: 1px dashed var(--line); border-radius: 7px; color: var(--ink-soft); font: 10px/1.3 var(--ui); }
#tool.studio .studio-frames [data-role-bucket="flat"] .role-bucket-actions + button.studio-see-effect[data-example-control="flat"] { display: block !important; margin-top: 10px !important; margin-block-start: 10px !important; }
.studio-memory-entry { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; max-width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: 600 12px/1.3 var(--ui); white-space: normal; }
.studio-memory-return { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; max-width: none; min-width: 0; padding: 8px 0; color: var(--ink-soft); font: 11px/1.4 var(--ui); }
.studio-memory-return > :first-child { flex: 1 1 100%; }
.studio-memory-return button { min-height: 44px; max-width: 100%; }
.studio-memory-return[hidden] { display: none !important; }
.studio-shell-return-slot:empty, .studio-shell-return-slot[hidden] { display: none !important; }

/* Once frames are present, let the example/result own the center column. */
#tool.studio .studio-empty[data-has-frames="true"] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  min-height: 0;
  gap: 8px 14px;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: 10px;
}
#tool.studio .studio-empty[data-has-frames="true"] .studio-orbit,
#tool.studio .studio-empty[data-has-frames="true"] .studio-eyebrow,
#tool.studio .studio-empty[data-has-frames="true"] .studio-empty-copy,
#tool.studio .studio-empty[data-has-frames="true"] .studio-private,
#tool.studio .studio-empty[data-has-frames="true"] #context-rail,
#tool.studio .studio-empty[data-has-frames="true"] .studio-empty-content > p:not(.studio-eyebrow) { display: none; }
#tool.studio .studio-empty[data-has-frames="true"] .studio-empty-content { display: contents; }
#tool.studio .studio-empty[data-has-frames="true"] h2 { flex: 1 1 220px; margin: 0; font-size: 14px; line-height: 1.35; }
#tool.studio .studio-empty[data-has-frames="true"] .studio-shell-return-slot { flex: 1 1 100%; }
#tool.studio .studio-empty[data-has-frames="true"] .studio-empty-actions { flex: 0 0 auto; margin: 0 0 0 auto; }
#tool.studio .studio-empty[data-has-frames="true"] .studio-empty-actions .studio-button { min-height: 44px; }

/* Progress remains in the badges; the outline identifies the displayed pane. */
#tool.studio #stage-bar button[data-stage-current="true"] { border-color: transparent; background: color-mix(in srgb, var(--surface) 64%, transparent); }
#tool.studio #stage-bar button[data-stage-current="true"]:not([data-stage-done="true"]) .stage-mark { background: transparent; color: inherit; border-color: var(--control-border); }
#tool.studio #stage-bar button[data-stage-active="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--ink); }

@media (min-width: 700px) and (max-width: 1099px) {
  #tool.studio .studio-top { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: 44px; padding: 6px 12px; gap: 6px 10px; }
  #tool.studio .studio-title { display: none; }
  #tool.studio .studio-top #stage-bar { grid-column: 3; grid-row: 1; }
  #tool.studio .studio-top-actions { grid-column: 4; grid-row: 1; }
  #tool.studio .studio-body { grid-template-columns: minmax(0, 1fr) 286px; }
  #tool.studio .studio-top #stage-bar button { min-width: 44px; width: 44px; flex-basis: 44px; padding-inline: 4px; }
  #tool.studio .studio-top #stage-bar .stage-label { font-size: 0; }
  #tool.studio .studio-title { display: none; }
}
@media (min-width: 700px) and (max-width: 1279px) {
  #tool.studio .studio-title { display: none; }
  #tool.studio .studio-top { grid-template-columns: auto auto minmax(264px, 1fr) auto; }
  #tool.studio .studio-top #stage-bar { grid-column: 3 !important; }
  #tool.studio .studio-top-actions { grid-column: 4; }
  #tool.studio .studio-top #stage-bar button { min-width: 44px; width: 44px; flex-basis: 44px; padding-inline: 4px; }
  #tool.studio .studio-top #stage-bar .stage-label { font-size: 0; }
}
@media (max-width: 699px) {
  #tool.studio .studio-top { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 42px 40px; padding: max(6px, env(safe-area-inset-top)) 10px 4px; gap: 4px 6px; }
  #tool.studio .studio-modes #mode-picker {
    position: fixed;
    top: calc(var(--studio-top-bottom, 97px) + 8px);
    right: 10px;
    left: 10px;
    width: auto;
    max-width: none;
    max-height: max(120px, calc(100dvh - var(--studio-top-bottom, 97px) - 20px));
    overflow-y: auto;
  }
  #tool.studio .studio-brand { grid-column: 1; grid-row: 1; font-size: 11px; gap: 4px; }
  #tool.studio .studio-brand-mark { width: 26px; height: 26px; }
  #tool.studio .studio-brand span { display: none; }
  #tool.studio .studio-brand::after { content: 'Home'; }
  #tool.studio .studio-modes { grid-column: 2; grid-row: 1; }
  #tool.studio .studio-mode-label { min-height: 44px !important; padding: 7px 10px !important; font-size: 12px !important; }
  #tool.studio .studio-title { display: none; }
  #tool.studio .studio-top-actions { grid-column: 3; grid-row: 1; gap: 3px; }
  #tool.studio .studio-top-actions .studio-button { min-height: 44px !important; padding: 6px 8px !important; font-size: 11px !important; }
  #tool.studio .studio-top-actions .studio-back { display: none; }
  #tool.studio .studio-top #stage-bar { grid-column: 1 / -1 !important; grid-row: 2; min-height: 44px; padding: 1px !important; overflow-x: auto; }
  #tool.studio .studio-top #stage-bar button { min-width: 44px; width: 44px; min-height: 44px; flex: 0 0 44px; padding: 4px 5px; }
  #tool.studio .studio-top #stage-bar .stage-label { font-size: 0; }
  #tool.studio .studio-body { display: block; }
  #tool.studio .studio-center { padding: 8px 10px; gap: 8px; }
  #tool.studio .studio-empty { min-height: 196px; row-gap: 4px; padding: 8px 10px; }
  #tool.studio .studio-orbit { width: clamp(190px, 66vw, 196px); }
  #tool.studio .studio-empty h2 { font-size: clamp(21px, 6vw, 24px); }
  #tool.studio .studio-empty > p { font-size: 11px; }
  #tool.studio .studio-empty-actions { gap: 4px; margin-top: 5px; }
  #tool.studio .studio-empty-actions .studio-button { min-height: 44px; padding: 7px 9px; font-size: 11px; }
  #tool.studio .studio-shell-preview-slot { margin-bottom: 4px; }
  #tool.studio .studio-example-kicker { font-size: 9px; }
  #tool.studio .studio-example > h2 { font-size: 15px; }
  #tool.studio .studio-example-frame { --studio-example-max-height: min(42dvh, 320px); width: 100%; height: var(--studio-example-max-height); min-height: 140px; }
  #tool.studio .studio-example-caption { grid-template-columns: minmax(0, 1fr); font-size: 12px; }
  #tool.studio .studio-example-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  #tool.studio .studio-example-actions .studio-button { min-height: 44px; }
  #tool.studio .studio-modes #mode-picker { width: min(430px, calc(100vw - 20px)); max-height: calc(100dvh - 110px); }
  #tool.studio .studio-modes .mode-card { min-height: 0; }
  #tool.studio .studio-dock { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 5px 8px; padding: 6px 10px max(6px, env(safe-area-inset-bottom)); }
  #tool.studio .studio-dock #session-action { width: 100%; grid-column: 2; grid-row: 1 / span 2; }
  #tool.studio .studio-dock #start-session { min-height: 44px; }
  #tool.studio .studio-dock #start-session-help { max-height: 2.7em; overflow: auto; }
  .studio-run-summary { grid-column: 1; font-size: 10px; }
  .studio-filmstrip { gap: 7px; }
  .studio-filmstrip-items { gap: 4px; }
  .studio-filmstrip-item { min-width: 90px; max-width: 135px; height: 28px; }
  .studio-filmstrip-type, .studio-filmstrip-thumb { width: 26px; height: 20px; }
  .studio-memory-entry { max-width: none; min-width: 0; padding: 6px 9px !important; font-size: 11px !important; }
  .studio-memory-return { padding-block: 6px; font-size: 10px; }
}

/* A finished picture gets one compact action row, with its selected frames
   above it. The same shape keeps Stop beside live progress while work runs. */
#tool.studio[data-studio-result-ready="true"] .studio-dock {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  min-height: 0;
  gap: 6px 12px;
  padding: 7px 14px max(7px, env(safe-area-inset-bottom));
}
#tool.studio[data-studio-result-ready="true"] .studio-dock .studio-filmstrip:not([hidden]) { grid-column: 1 / -1; grid-row: 1; min-height: 36px; }
#tool.studio[data-studio-result-ready="true"] .studio-dock .studio-pane-controls { display: none; }
#tool.studio[data-studio-result-ready="true"] .studio-dock .studio-run-summary { grid-column: 1; grid-row: 2; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-run-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.studio-run-info .studio-run-summary { flex: 1 1 auto; min-width: 0; }
#tool.studio .studio-run-info #session-next-step { flex: 0 0 auto; min-height: 44px; margin: 0; padding: 8px; border-radius: 8px; color: var(--accent); font-size: 11px; background: transparent; }
#tool.studio[data-studio-result-ready="true"] .studio-dock .studio-run-info,
#tool.studio[data-studio-running="true"] .studio-dock .studio-run-info { grid-column: 1; grid-row: 2; min-width: 0; }
#tool.studio[data-studio-result-ready="true"] .studio-dock #session-action { position: static !important; inset: auto; grid-column: 2; grid-row: 2; width: auto; min-width: 0; margin: 0; }
#tool.studio[data-studio-result-ready="true"] .studio-dock #start-session { min-height: 44px; margin: 0; padding: 9px 12px; }
#tool.studio[data-studio-result-ready="true"] .studio-dock #start-session-help,
#tool.studio[data-studio-running="true"] .studio-dock #start-session-help,
#tool.studio .studio-dock #start-session-help {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
#tool.studio[data-studio-result-ready="true"] .studio-dock .studio-export-button { grid-column: 3; grid-row: 2; min-width: 112px; min-height: 44px; }
#tool.studio[data-studio-result-ready="true"]:not(:has(.studio-filmstrip:not([hidden]))) .studio-dock .studio-run-summary { grid-row: 1; }
#tool.studio[data-studio-result-ready="true"]:not(:has(.studio-filmstrip:not([hidden]))) .studio-dock .studio-run-info { grid-row: 1; }
#tool.studio[data-studio-result-ready="true"]:not(:has(.studio-filmstrip:not([hidden]))) .studio-dock #session-action,
#tool.studio[data-studio-result-ready="true"]:not(:has(.studio-filmstrip:not([hidden]))) .studio-dock .studio-export-button { grid-row: 1; }

#tool.studio[data-studio-running="true"] .studio-dock {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  min-height: 0;
  gap: 6px 12px;
  padding: 7px 14px max(7px, env(safe-area-inset-bottom));
}
#tool.studio[data-studio-running="true"] .studio-dock .studio-filmstrip:not([hidden]) { grid-column: 1 / -1; grid-row: 1; min-height: 36px; }
#tool.studio[data-studio-running="true"] .studio-dock .studio-pane-controls,
#tool.studio[data-studio-running="true"] .studio-dock #session-action { display: none; }
#tool.studio[data-studio-running="true"] .studio-dock .studio-run-summary { grid-column: 1; grid-row: 2; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tool.studio[data-studio-running="true"] .studio-dock .studio-stop { grid-column: 2; grid-row: 2; min-height: 44px; }
#tool.studio[data-studio-running="true"]:not(:has(.studio-filmstrip:not([hidden]))) .studio-dock .studio-run-summary,
#tool.studio[data-studio-running="true"]:not(:has(.studio-filmstrip:not([hidden]))) .studio-dock .studio-run-info,
#tool.studio[data-studio-running="true"]:not(:has(.studio-filmstrip:not([hidden]))) .studio-dock .studio-stop { grid-row: 1; }
@media (max-width: 699px) {
  #tool.studio[data-studio-result-ready="true"] .studio-dock { grid-template-columns: minmax(56px, 1fr) auto auto; gap: 5px; padding-inline: 10px; }
  #tool.studio[data-studio-result-ready="true"] .studio-dock #start-session { max-width: 100px; padding-inline: 9px; }
  #tool.studio[data-studio-result-ready="true"] .studio-dock .studio-export-button { min-width: 84px; padding-inline: 9px; }
  #tool.studio[data-studio-result-ready="true"] .studio-dock .studio-run-summary { font-size: 10px; }
  #tool.studio[data-studio-running="true"] .studio-dock { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; padding-inline: 10px; }
  #tool.studio[data-studio-running="true"] .studio-dock .studio-run-summary { font-size: 10px; }
}

/* When no files are selected, the dock is only the needed next action. Keep
   the full helper as an accessible description and show its concise copy as
   the visible status. Once files exist, the source strip gets its own row. */
#tool.studio:not([data-studio-result-ready="true"]):not([data-studio-running="true"]) .studio-dock {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  min-height: 0;
  gap: 6px 12px;
  padding: 7px 14px max(7px, env(safe-area-inset-bottom));
}
#tool.studio:not([data-studio-result-ready="true"]):not([data-studio-running="true"]) .studio-dock .studio-pane-controls { display: none; }
#tool.studio:not([data-studio-result-ready="true"]):not([data-studio-running="true"]) .studio-dock .studio-run-summary { grid-column: 1; grid-row: 1; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tool.studio:not([data-studio-result-ready="true"]):not([data-studio-running="true"]) .studio-dock .studio-run-info { grid-column: 1; grid-row: 1; }
#tool.studio:not([data-studio-result-ready="true"]):not([data-studio-running="true"]) .studio-dock #session-action { grid-column: 2; grid-row: 1; width: auto; min-width: 0; margin: 0; }
#tool.studio:not([data-studio-result-ready="true"]):not([data-studio-running="true"]) .studio-dock #start-session { min-height: 44px; padding: 9px 12px; }
#tool.studio:not([data-studio-result-ready="true"]):not([data-studio-running="true"]):has(.studio-filmstrip:not([hidden])) .studio-dock {
  grid-template-rows: auto auto;
}
#tool.studio:not([data-studio-result-ready="true"]):not([data-studio-running="true"]):has(.studio-filmstrip:not([hidden])) .studio-dock .studio-filmstrip { grid-column: 1 / -1; grid-row: 1; min-height: 36px; }
#tool.studio:not([data-studio-result-ready="true"]):not([data-studio-running="true"]):has(.studio-filmstrip:not([hidden])) .studio-dock .studio-run-summary,
#tool.studio:not([data-studio-result-ready="true"]):not([data-studio-running="true"]):has(.studio-filmstrip:not([hidden])) .studio-dock .studio-run-info,
#tool.studio:not([data-studio-result-ready="true"]):not([data-studio-running="true"]):has(.studio-filmstrip:not([hidden])) .studio-dock #session-action { grid-row: 2; }
@media (max-width: 699px) {
  #tool.studio:not([data-studio-result-ready="true"]):not([data-studio-running="true"]) .studio-dock { gap: 5px 8px; padding-inline: 10px; }
}

/* Optional result review is available, not a completed acceptance decision. */
#tool.studio #stage-bar button[data-stage-available="true"] { color: var(--accent); }
#tool.studio #stage-bar button[data-stage-available="true"] .stage-mark { color: var(--accent); background: transparent; border-color: var(--accent); }

/* At tablet widths the picture, sources and recipe each own one pane. Named
   controls remain visible; no source drawer overlaps a persistent recipe. */
@media (min-width: 700px) and (max-width: 1279px) {
  #tool.studio .studio-top #stage-bar button { width: auto; min-width: 66px; flex-basis: auto; gap: 5px; padding-inline: 7px; }
  #tool.studio .studio-top #stage-bar .stage-label { font-size: 11px; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  #tool.studio .studio-top { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 44px 44px; }
  #tool.studio .studio-top-actions { grid-column: 3; grid-row: 1; }
  #tool.studio .studio-top #stage-bar { grid-column: 1 / -1 !important; grid-row: 2; justify-content: center; overflow-x: auto; }
}
@media (max-width: 1099px) {
  #tool.studio .studio-body { display: block; }
  #tool.studio .studio-center { height: 100%; }
  #tool.studio .studio-frames, #tool.studio .studio-recipe { display: none; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 14px 18px; transform: none; visibility: hidden; box-shadow: none; }
  #tool.studio[data-studio-pane="frames"] .studio-frames,
  #tool.studio[data-studio-pane="recipe"] .studio-recipe { display: block; visibility: visible; transform: none; }
  /* A modal review must survive resizing while a side pane is selected.
     Hiding its ancestor also hides the native dialog in the top layer. */
  #tool.studio[data-studio-pane="frames"] .studio-center:not(:has(dialog[open])),
  #tool.studio[data-studio-pane="recipe"] .studio-center:not(:has(dialog[open])) { display: none; }
}
@media (max-width: 699px) {
  #tool.studio .studio-top #stage-bar button:is([data-stage="sources"], [data-stage="recipe"]) { width: auto; min-width: 76px; flex-basis: auto; flex-direction: row; gap: 4px; }
  #tool.studio .studio-top #stage-bar button:is([data-stage="sources"], [data-stage="recipe"]) .stage-label { font-size: 10px; }
  #tool.studio .studio-top #stage-bar { justify-content: flex-start; }
  #tool.studio .studio-run-info { flex-wrap: wrap; gap: 0; }
}
@media (min-width: 700px) and (max-width: 1099px) and (max-height: 500px) {
  #tool.studio .studio-picture-tools .studio-button { height: 44px; min-height: 44px; margin: 0; padding: 4px 8px; font-size: 11px; line-height: 1.25; }
}