html { scrollbar-gutter:stable; }
/* Film desk: library, canvas and inspector are distinct work surfaces. */
.studio-page { --ink:#273126; --muted:#596651; --action:#4d5b35; --action-hover:#3a4826; --line:#d8dfd2; --input-line:#77836c; --surface:#f4f5ef; --stone:#eaf0e1; font-family:var(--studio-font); background:#f1f3ed; color:var(--ink); }
.studio-page main { max-width:1800px; padding:0 20px 28px; }
.studio-page .site-header { padding:16px 24px; background:#fff; }
.studio-mark { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.5; vertical-align:middle; margin-right:10px; }
.studio-page .brand { font-size:19px; font-weight:600; }
.studio-page .brand span { display:none; }
#editor { display:grid; grid-template-columns:88px 224px minmax(0,1fr) 328px; gap:0 12px; padding-top:20px; align-items:start; overflow-anchor:none; }
.editor-heading { grid-column:1/-1; padding:0 0 20px; gap:16px; }
.editor-heading h1 { font-size:22px; margin:0; font-weight:600; }
.editor-heading>div+div { gap:10px; flex-wrap:wrap; }
.history-toolbar { display:flex; gap:6px; }
#save-status { font-size:12px; }
button,.download { min-height:44px; border-radius:6px; font-size:13px; }
.editor-nav { grid-column:1; grid-row:2; display:flex; flex-direction:column; gap:8px; padding:8px; margin:0; border:0; background:#fff; border-radius:10px; position:sticky; top:16px; }
.editor-nav a { min-height:64px; justify-content:center; text-align:center; padding:8px 4px; border-radius:6px; color:var(--ink); font-size:13px; font-weight:500; }
.editor-nav a[aria-current] { color:white; background:var(--action); text-decoration:none; font-weight:600; }
.editor-nav a:hover:not([aria-current]) { background:#edf1e6; }
.studio-workspace { display:contents; }
.studio-stage { grid-column:3; grid-row:2; min-width:0; position:sticky; top:16px; }
.album-surface { grid-column:2; grid-row:2; min-width:0; background:#fff; padding:16px 10px; border-radius:10px; }
.studio-controls { grid-column:4; grid-row:2; min-width:0; background:#fff; border-radius:10px; padding:24px 20px; height:calc(100dvh - 160px); max-height:calc(100dvh - 160px); overflow:auto; scrollbar-gutter:stable; }
#preview { width:100%; margin:0; padding:16px 8px; border:0; background:transparent; }
#preview .section-heading { align-items:center; margin-bottom:16px; gap:8px; }
#preview .section-heading h2 { margin:0; font-size:14px; }
#duration { font-size:12px; font-variant-numeric:tabular-nums; }
.player { width:100%; aspect-ratio:16/9; max-height:42vh; background:#dfe4d6; border-radius:8px; }
.player img,.player video { width:100%; height:100%; object-fit:contain; }
.preview-navigation { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:16px 0 10px; }
.frame-controls { display:flex; margin:0; gap:6px; }
.frame-controls button { font-size:12px; padding:8px 10px; }
#selected-label { display:none; }
.preview-navigation>label { flex:1; min-width:130px; margin:0; }
#scene-selector { margin:0; font-size:12px; }
.preview-hint { font-size:12px; margin:0; }
#preview:has(#video:not([hidden])) .preview-hint { display:none; }
#preview .preview-actions { display:flex; margin:16px 0 0; }
#render-preview { width:100%; }
.studio-controls h2 { font-size:19px; margin:0 0 20px; }
.studio-controls h3 { font-size:16px; margin-bottom:12px; }
.studio-controls label { font-size:13px; margin-bottom:16px; }
.studio-controls p { font-size:13px; margin-bottom:14px; line-height:1.55; }
.studio-controls input,.studio-controls select,.studio-controls textarea { font-size:14px; border-radius:5px; }
select { appearance:none; padding-right:32px; background:#fff url('/static/select-chevron.svg') right 8px center/16px no-repeat; }
.studio-controls details { margin-top:16px; }
.studio-controls summary { font-size:14px; padding:14px 0; }
.studio-controls details[open] { padding-bottom:16px; }
.studio-controls details[open]>:last-child { margin-bottom:0; }
.studio-controls .two { gap:10px; align-items:end; }
#photos,#personalize,#music-panel,#export { padding:0; margin:0; border:0; scroll-margin-top:24px; }
body:not([data-step="photos"]) #photos,body:not([data-step="personalize"]) #personalize,body:not([data-step="music-panel"]) #music-panel,body:not([data-step="export"]) #export { display:none; }
#scene-inspector { margin:0 0 20px; padding:0; border:0; }
#scene-inspector:not(:has(.photo)) { display:none; }
.inspector-back,.inspector-composition,#inspector-frame,.theme-example { display:none; }
#photo-list { margin:0; }
#photo-list .photo { display:block; border:0; padding:0; background:none; }
#photo-list .photo>button,#photo-list .photo>.meta { display:none; }
#photo-list .tools { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
#photo-list .tools+label { margin-top:16px; }
#photo-list label:has(>input[type="checkbox"]) { display:flex; gap:10px; align-items:center; min-height:44px; }
#dropzone { display:block; padding:16px 12px; text-align:center; background:#f4f6ee; border-radius:6px; }
.upload { position:relative; display:block; width:100%; margin:0; }
#dropzone .upload>span { display:flex; justify-content:center; align-items:center; min-height:46px; margin:0; padding:10px; border-radius:5px; background:var(--action); color:#fff; font-size:13px; }
.upload input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.upload:focus-within { outline:3px solid var(--action); outline-offset:3px; }
#dropzone p { margin:10px 0 16px; font-size:12px; }
#dropzone .upload-limits { margin-top:16px; text-align:left; }
#count { font-size:13px; color:var(--muted); }
#storyboard-area h3 { font-size:14px; margin:0 6px 8px; }
.album-hint { font-size:12px; margin:0 6px 14px; }
#storyboard { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:6px; max-height:calc(100vh - 300px); overflow:auto; scrollbar-gutter:stable; }
.story-tile { min-width:0; border:0; padding:0; background:transparent; }
.story-photo { display:block; width:100%; padding:3px; border:2px solid transparent; border-radius:6px; background:#f3f5ee; }
.story-photo[aria-pressed="true"] { border-color:var(--action); outline-offset:0; }
.story-photo img { display:block; width:100%; height:68px; object-fit:cover; border-radius:3px; }
.story-photo span { display:block; font-size:12px; padding:5px 0; }
.story-select { display:flex; align-items:center; gap:4px; min-height:44px; margin:0; font-size:12px; }
.story-tile>button:not(.story-photo) { min-width:32px; min-height:44px; padding:4px; margin:0 1px 4px 0; font-size:12px; }
.storyboard-navigation { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0; }
.storyboard-navigation button { flex:1; padding:6px; font-size:12px; }
.storyboard-navigation label { order:-1; width:100%; margin:0; font-size:12px; }
.storyboard-navigation select { width:100%; margin:4px 0 0; }
.storyboard-actions { display:flex; padding:12px; background:#edf2e4; border-radius:6px; gap:8px; }
.storyboard-actions[data-empty="true"] { display:none; }
.storyboard-actions label,.storyboard-actions p { font-size:12px; }
.storyboard-actions input { width:100%; }
#story-help { flex-basis:100%; margin:0; }
.theme-choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
.theme-choices button { position:relative; display:block; padding:4px; text-align:left; border:2px solid #b8c2aa; }
.theme-choices button[aria-pressed="true"] { border-color:var(--action); background:#edf2e5; }
.theme-choices img { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; border-radius:3px; }
.theme-choices strong { display:block; font-size:12px; padding:8px 3px; }
.theme-choices span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.selection-tag { display:none; }
[aria-pressed="true"] .selection-tag { display:block; position:absolute; top:7px; right:7px; background:var(--action); color:white; padding:3px 5px; border-radius:3px; font-size:12px; }
#music-list { list-style:none; padding:0; }
#music-list li { padding:14px; margin-bottom:14px; background:#f2f5ec; border:0; border-radius:6px; }
#music-list audio,.library-track audio { width:100%; height:40px; margin:10px 0; }
#music-list details { padding-bottom:12px; }
#music-list .two label { margin-bottom:0; }
#music-list details+button { margin-top:12px; }
#music-controls>button { margin-bottom:10px; }
#music-controls { margin-bottom:16px; }
#music-coverage { padding:12px; background:#eaf0e1; border-radius:5px; }
#music-library { margin-bottom:20px; }
#private-sharing>button,#project-privacy>button,#family-collection>button { display:flex; width:100%; margin-bottom:8px; }
#render-export,#download { width:100%; }
#render-status { padding:14px; margin-top:14px; background:#eaf0e1; border-radius:6px; }
#purchase-status,#stale,#venue-delivery { margin-top:14px; }
.workspace-entry { max-width:640px; margin:64px auto; }
.studio-page footer { padding:24px; font-size:12px; }
#notice { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); max-width:min(640px,calc(100% - 24px)); z-index:30; }
@media(max-width:1400px) { #editor { grid-template-columns:76px 196px minmax(0,1fr) 304px; gap:0 12px; } .studio-controls { padding:20px 16px; } }
@media(max-width:1100px) { #editor { grid-template-columns:200px minmax(0,1fr) 304px; } .editor-nav { grid-column:1/-1; grid-row:2; flex-direction:row; margin-bottom:16px; position:static; } .editor-nav a { flex:1; min-height:44px; } .album-surface,.studio-stage,.studio-controls { grid-row:3; } .album-surface { grid-column:1; } .studio-stage { grid-column:2; } .studio-controls { grid-column:3; } }
@media(max-width:950px) { #editor { grid-template-columns:minmax(0,1fr) 320px; } .studio-stage { grid-column:1; } .studio-controls { grid-column:2; } .album-surface { grid-column:1/-1; grid-row:4; margin-top:16px; } #storyboard { display:flex; max-height:none; } .story-tile { flex:0 0 112px; } }
@media(max-width:700px) { .studio-page main { padding:0 12px 24px; } .studio-page .site-header { padding:16px; } .site-header .dev { display:none!important; } #editor { display:flex; flex-direction:column; padding-top:16px; gap:0; } .editor-heading { flex-direction:column; align-items:flex-start; width:100%; padding-bottom:16px; } .editor-heading>div+div { gap:6px; width:100%; } .editor-heading button { padding:8px 10px; font-size:12px; } #new { margin-left:auto; } .editor-nav { width:100%; position:sticky; top:0; z-index:10; padding:5px; gap:4px; } .studio-stage,.studio-controls,.album-surface { width:100%; position:static; } .studio-stage { order:1; } .studio-controls { order:3; height:auto; max-height:none; min-height:calc(100svh - 80px); overflow:visible; margin-top:16px; } .album-surface { order:2; } #preview { padding:12px 0; } #editor #preview { display:block; } .player { max-height:240px; } .inspector-back { display:inline-flex; min-height:44px; align-items:center; font-size:13px; margin-bottom:8px; } #photos,#personalize,#music-panel,#export { scroll-margin-top:80px; } }
@media(forced-colors:active) { select { appearance:auto; background-image:none; } [aria-current],[aria-pressed="true"] { outline:2px solid Highlight; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }
/* Existing specialist controls retain their geometry and hit areas. */
.photo-review { margin-block: 1rem; padding-block: 1rem; border-block: 1px solid var(--border, #dce0d8); }
.photo-review .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.photo-review-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block: 1rem; }
.photo-review-pair figure { margin: 0; min-width: 0; }
.photo-review-pair img { width: 100%; height: 260px; object-fit: contain; background: #f4f5f1; }
.photo-review-pair figcaption { margin-block: .5rem; font-size: .85rem; }
.photo-review-pair button { width: 100%; }
@media (max-width: 540px) {
  .photo-review-pair { grid-template-columns: 1fr; }
  .photo-review-pair img { height: 210px; }
  .photo-review .section-heading { align-items: flex-start; }
}
.scan-source { position: relative; max-width: 780px; margin-block: 1rem; }
.scan-source img { display: block; width: 100%; height: auto; }
.scan-source svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.scan-source polygon { fill: #62704b22; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.scan-source circle { fill: #52643b; stroke: white; stroke-width: .4; cursor: grab; }
.scan-corners { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
@media(max-width:540px) { .scan-corners { grid-template-columns: 1fr; } }

.scan-source .scan-hit { fill: transparent; stroke: none; pointer-events: all; }
.library-track { padding-block: 1rem; border-bottom: 1px solid #dce0d8; }
.library-track h4, .library-track p { margin-block: .4rem; }
.library-track audio { display: block; width: 100%; margin-block: .6rem; }
.order-preview { list-style: none; margin: 1rem 0; padding: 0; }
.order-preview li { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: .75rem; padding-block: .75rem; border-bottom: 1px solid #dce0d8; }
.order-preview img { width: 72px; height: 60px; object-fit: contain; background: #f4f5f1; }
.order-preview p { margin-block: .4rem; }
.chapter-order-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: .5rem; margin-block: .6rem; }
#batch-organization { flex-basis: 100%; }
.chapter-order-row span, .order-preview strong, .order-preview p { overflow-wrap: anywhere; }

#timing-review { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 28px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
#timing-review::backdrop { background: rgb(20 25 20 / .45); }
#timing-review h2 { margin-top: 0; font-size: 24px; }
#timing-review p { line-height: 1.6; }
#timing-review .actions { display: flex; flex-wrap: wrap; gap: 12px; }
#match-music { margin-block: 8px; }


.review-comment { padding-block: 20px; border-top: 1px solid var(--line); }
.review-comment h4 { margin-bottom: 8px; }
.review-comment p { white-space: pre-wrap; overflow-wrap: anywhere; }
#review-comments:empty { display: none; }


.contribution-clip { display: block; width: 180px; max-width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #20251d; }
@media(max-width:600px) { .contribution:has(.contribution-clip) { flex-wrap: wrap; } .contribution-clip { width: 100%; } }

.contribution > div { min-width: 0; overflow-wrap: anywhere; }
.review-comment { overflow-wrap: anywhere; }



.album-empty { padding:6px; }
.album-empty h2 { font-size:15px; margin:0 0 12px; }
.album-empty p { font-size:13px; color:var(--muted); margin:0; }
.album-surface:has(#storyboard-area:not([hidden])) .album-empty { display:none; }