/* References: design/refs/aboard (primary), design/refs/upload-zone-x.
   A3: two-state upload layout. Layout ideas: remove.bg and repostgrid. */
@import url('/styles.css');

:root{--brand:#a91950;--soft:#fcebf2;--bg:#f7f8fa;--text:#262626;--muted:#68636b;--line:#e9e4e8}
body{background:#fafafa;font-weight:400}
header{max-width:1200px;min-height:56px;padding:12px 24px;border:0}
.wordmark{font-size:20px;font-weight:600}
main{max-width:1200px;padding:0 24px}
.intro{text-align:center;padding:24px 0 32px}
.intro h1{font-size:52px;line-height:1.1;font-weight:600;letter-spacing:-.035em;margin-bottom:8px}
.intro>p{max-width:800px;margin:auto;font-size:18px;line-height:28px}
.tool{display:grid;gap:16px}
/* Fixed profile width at every count. Canvas aspect ratio supplies extra rows. */
#drop-zone.stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:0;padding:32px 48px;border:0;border-radius:24px;background:#fbe4ee;text-align:left}
.phone,.phone.plain{width:100%;max-width:608px;flex:none;border-radius:24px;padding-top:16px;box-shadow:0 4px 16px #5821390d}
.phone.plain{padding:0;border-radius:12px}
.mock-title{font-size:14px;padding-bottom:12px}
.mock-avatar{width:24px;height:24px;flex-basis:24px}
.mock-tabs{margin-bottom:12px}
.mock-tab{padding:4px 0 12px}
#mock-caption{font-size:12px;padding:12px}
.drop-overlay{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-radius:24px;background:#fcebf2f5;color:var(--brand);font-size:24px;font-weight:600;opacity:0;pointer-events:none}
.drop-overlay span{font-size:40px}
#drop-zone[data-dragging=true]{outline:2px solid var(--brand);outline-offset:-2px}
#drop-zone[data-dragging=true] .drop-overlay{opacity:1}
/* Keep drag targets stable while moving across canvas and mock profile children. */
#drop-zone[data-dragging=true]>*{pointer-events:none}
p.example-credit{max-width:none;text-align:center;font-size:12px;line-height:20px;margin:8px 0 0;color:var(--muted)}
.example-credit a{color:inherit;text-decoration:none}
.example-credit a:hover{text-decoration:underline}
.action-row{display:flex;justify-content:center;align-items:flex-start;gap:16px}
.count{display:flex;flex-wrap:nowrap;gap:0;padding:0 4px;background:#f0edf0;border-radius:999px;height:48px;align-items:center}
.count button{min-width:48px;min-height:40px;height:40px;border:0;border-radius:999px;background:transparent;font-size:15px;padding:8px 16px}
.count button[aria-pressed=true]{background:white;color:var(--brand);box-shadow:0 1px 4px #0000000d}
button,select,input[type=number]{border-radius:12px}
#browse,#generate{height:48px;min-height:48px;border:0;border-radius:999px;padding:0 24px;font-size:15px;font-weight:600;white-space:nowrap}
#browse{background:var(--soft);color:var(--brand)}
#generate{background:var(--brand);color:white}
.upload-action{text-align:center}
.upload-action .small{font-size:12px;line-height:20px;margin-top:4px}
#clip-controls{max-width:608px;width:100%;margin:0 auto;display:flex;align-items:center;gap:16px}
#clip-controls label{margin:0;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
#clip-range{min-width:0;margin:0}
.preview-footnote{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--muted);font-size:12px}
.preview-footnote button{font-size:12px;min-height:44px}
.export-feedback{text-align:center;max-width:720px;width:100%;margin:auto}
#status,#export-note{font-size:13px;line-height:20px;margin:0;max-width:none}
#status:empty,#export-note:empty{display:none}
.more{max-width:800px;margin:16px auto 0;border:0}
.more>summary{text-align:center;color:var(--muted);padding:12px}
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:24px;background:white;border-radius:24px;margin-top:8px}
.options-grid fieldset{margin-bottom:24px}
.options-grid legend{font-weight:600;font-size:16px}
.options-grid .segments{flex-wrap:wrap}
.options-grid .segments button{flex-basis:100%}
.options-grid .preview-options{display:block}
.options-grid .small{font-size:12px}
.options-grid .playback{flex-wrap:wrap}
.options-grid .playback input{flex:1}
#results{max-width:800px;margin:24px auto;background:white;padding:24px;border-radius:24px;box-shadow:0 0 0 1px #0000000a}
.result-actions{margin:0 0 16px}
.result-actions button{border-radius:999px}
.result-actions .primary{background:var(--soft);border:0;color:var(--brand)}
#file-results{gap:8px}
.file-result{padding:12px;gap:16px;border:1px solid var(--line);border-radius:12px;font-size:14px}
.file-result img,.file-result video{width:64px;height:64px;border-radius:12px}
.file-result button{border:0;background:var(--soft);color:var(--brand);border-radius:999px;padding-inline:24px}
#result-order{margin-top:16px}
.mini-guide{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;padding:0;margin:24px 0 0;gap:24px;font-size:13px}
.mini-guide span{display:block;color:var(--brand);font-size:24px;margin-bottom:8px}
.support{max-width:960px;margin:64px auto 0;display:grid;gap:24px}
.support>section{padding:40px;border-radius:24px}
#how{background:#edf5f9}
#faq{background:#f1eff8}
.support h2{font-size:32px;line-height:40px;font-weight:600;margin-bottom:24px}
.short-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 24px;padding:0}
.short-steps li{padding:20px;background:#ffffffb3;border-radius:12px;font-size:14px}
.short-steps span{display:block;font-size:24px;line-height:32px;margin-bottom:12px;color:#506371}
#how>a{font-size:14px;font-weight:600}
#faq details{border-color:#dedbe8}
#faq summary{font-size:15px;padding:16px 0}
#faq p{font-size:14px}
footer{max-width:960px;margin:32px auto 0;font-size:12px;padding:24px 0}
:focus-visible{outline:3px solid var(--brand);outline-offset:4px}
@media(hover:hover){#browse:hover{background:#f8dce8}#generate:hover{background:#941546}}
@media(max-width:767px){
 header{min-height:52px;padding:12px 16px}.wordmark{font-size:18px}
 main{padding:0 16px}
 .intro{padding:20px 0 24px}.intro h1{font-size:42px;line-height:44px;letter-spacing:-.04em;margin-bottom:12px}.intro>p{font-size:15px;line-height:24px;max-width:352px}
 #drop-zone.stage{padding:20px 12px;border-radius:24px}
 .phone,.phone.plain{max-width:608px;border-radius:12px;padding-top:12px}.phone.plain{padding:0}
 .mock-title{font-size:12px;padding-bottom:8px}.mock-tab{padding:4px 0 8px}.mock-tab svg{width:20px;height:20px}.mock-tabs{margin-bottom:8px}#mock-caption{font-size:10px;padding:8px}
 p.example-credit{font-size:12px;line-height:20px;max-width:340px;margin:8px auto 0}
 .action-row{flex-direction:column;align-items:stretch;gap:12px}.count{width:100%}.count button{flex:1}
 .upload-action,#browse,#generate{width:100%}
 .drop-overlay{font-size:20px;text-align:center;padding:16px}
 #clip-controls{flex-direction:column;gap:0;align-items:stretch}#clip-controls label{text-align:center}
 .preview-footnote{gap:12px;font-size:11px}.preview-footnote button{font-size:12px}
 .options-grid{grid-template-columns:1fr;gap:16px;padding:20px}
 #results{padding:16px}.file-result{gap:12px;padding:8px}.file-result img,.file-result video{width:48px;height:48px}.file-result button{padding-inline:16px}
 .mini-guide{grid-template-columns:1fr;gap:16px}.mini-guide li{display:flex;align-items:center;gap:12px}.mini-guide span{margin:0;min-width:24px}
 .support{margin-top:48px;gap:24px}.support>section{padding:24px}.support h2{font-size:28px;line-height:36px}.short-steps{grid-template-columns:1fr;gap:12px}.short-steps li{display:flex;align-items:center;gap:16px;padding:16px}.short-steps span{margin:0}
}


/* A single live canvas shared by landing and editing; no duplicate app IDs. */
.workspace-a3{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);grid-template-areas:"intro upload" "preview upload" "steps upload";column-gap:48px;row-gap:24px;padding-top:48px}
.tool,#source-controls{display:contents}
.intro{grid-area:intro;text-align:left;padding:0}
.intro h1{font-size:56px;line-height:1.1;margin-bottom:16px}
.intro>p{font-size:18px;line-height:28px;max-width:580px;margin:0}
.upload-card{grid-area:upload;background:#fff;border-radius:32px;padding:40px 32px;text-align:center;align-self:center;box-shadow:0 12px 48px rgba(32,35,43,.08)}
#browse.upload-big{width:100%;height:64px;min-height:64px;border-radius:999px;background:var(--brand);color:#fff;font-size:18px;padding:0 16px;white-space:normal}
.upload-card p.small{font-size:12px;line-height:20px;margin:12px 0 0;max-width:none}
.upload-card p.small+p.small{margin-top:4px}
.upload-card hr{border:0;border-top:1px solid var(--line);margin:24px 0 12px}
#try-example{min-height:44px;text-decoration:none;font-size:14px}
.live-preview{grid-area:preview;min-width:0}
#drop-zone.stage{padding:32px;border-radius:32px;background:#fbe4ee}
.phone,.phone.plain{max-width:544px;width:100%}
p.example-credit{font-size:12px;line-height:20px;margin:12px auto 0;color:#68636b}
#mock-caption{display:none}
.landing-steps{grid-area:steps;list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:0;margin:0;font-size:12px;line-height:20px;color:var(--muted)}
.landing-steps span{display:block;color:var(--brand);font-size:24px;line-height:32px;margin-bottom:8px}
.landing-steps li[aria-hidden]{align-self:center;color:#8a8a8a}
body.landing :is(#editor-toolbar,#clip-controls,.preview-footnote,.export-feedback,#results,.more){display:none!important}
body.editing :is(.intro,.upload-card,.landing-steps){display:none}
body.editing .workspace-a3{grid-template-columns:minmax(0,1fr);grid-template-areas:"toolbar" "preview" "clip" "footnote" "options" "status" "results";gap:16px;padding-top:24px}
#editor-toolbar{grid-area:toolbar;margin:0 auto;max-width:960px;width:100%;align-items:center;justify-content:flex-start;gap:16px;scroll-margin-top:16px}
#back{text-decoration:none;padding:0 12px;white-space:nowrap}
#change-file{border:0;background:var(--soft);color:var(--brand);border-radius:999px;height:48px;padding:0 24px;white-space:nowrap}
#generate{margin-left:auto;background:var(--brand);color:#fff}
body.editing .live-preview{width:100%;max-width:960px;justify-self:center}
body.editing #drop-zone.stage{padding:32px}
#clip-controls{grid-area:clip;margin:0 auto}
.preview-footnote{grid-area:footnote}
.more{grid-area:options;width:100%;margin:0 auto}
.export-feedback{grid-area:status}
#results{grid-area:results;width:100%;margin:0 auto}
#page-drop-overlay{display:none;position:fixed;inset:16px;z-index:20;align-items:center;justify-content:center;border:2px dashed var(--brand);border-radius:32px;background:#fcebf2f5;color:var(--brand);font-size:32px;font-weight:600;pointer-events:none;text-align:center;padding:24px}
body.landing.page-dragging #page-drop-overlay{display:flex}
button:active:not(:focus-visible){transform:scale(.97)}
@media(hover:hover){#browse.upload-big:hover,#generate:hover{background:#941546}#change-file:hover{background:#f8dce8}}
@media(max-width:1023px){
 .workspace-a3{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "upload" "preview" "steps";gap:24px;padding-top:24px;max-width:640px;margin:auto}
 .intro h1{font-size:44px;line-height:48px}.intro>p{font-size:17px;line-height:28px}
 .upload-card{padding:32px 24px;width:100%}
 body.editing .workspace-a3{max-width:960px}
 #editor-toolbar{flex-direction:row;flex-wrap:wrap;gap:12px}
 #generate{flex:1;min-width:240px;margin:0}
}
@media(max-width:767px){
 .intro h1{font-size:40px;line-height:44px}.intro>p{font-size:16px;line-height:24px}
 #drop-zone.stage,body.editing #drop-zone.stage{padding:24px 12px}
 .upload-card{padding:32px 20px}.upload-card p.small{font-size:12px}
 #editor-toolbar .count{width:auto;flex:1}#editor-toolbar .count button{padding:8px;min-width:40px}
 #change-file{padding:0 16px}#generate{width:100%;flex-basis:100%}
 .landing-steps{gap:8px;font-size:11px;line-height:20px}.landing-steps li:not([aria-hidden]){flex:1}
 .preview-footnote{flex-wrap:wrap}
}

/* body.landing is the state class; undo the base .landing section spacing on <body>. */
body.landing{margin:0;padding:0;border:0;max-width:none}
#status{font-size:13px!important;line-height:20px!important;color:#8a8f99!important;margin-top:4px!important}
#status:empty{display:none}

/* Real result block: a real profile recording + the in-app steps. */
.real-result{background:#fff;box-shadow:0 12px 48px rgba(32,35,43,.06)}
.real-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
.real-grid figure{margin:0}
.real-banner video{width:100%;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.real-howto video{width:100%;max-width:280px;display:block;margin:0 auto;border-radius:16px;background:#000}
.real-grid figcaption{font-size:13px;line-height:20px;color:#7a7e88;margin-top:8px;text-align:center}
@media(max-width:767px){.real-grid{grid-template-columns:1fr}.real-howto video{max-width:240px}}