/* Starting choices share the Connect surface and the selected theme's accents. */
#app-frame.one-ai[data-screen=starting]{width:min(1040px,100%);padding:0;display:flex;flex-direction:column;--starting-line:rgb(var(--look-accent-rgb,160 214 201)/.22);--starting-surface:rgba(25,40,49,.42);--starting-ink:#edf4f5;--starting-muted:#aec0ca}
.starting-title-row{display:flex;align-items:center;gap:12px}
#app-frame.one-ai .starting-title-row h1{margin:0}
#app-frame.one-ai .starting-back{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid transparent;border-radius:10px;color:var(--starting-muted);transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease}
.starting-back svg{width:24px;height:24px}
#app-frame.one-ai .starting-back:hover:not(:disabled){color:var(--starting-ink);background:rgb(var(--look-accent-rgb,160 214 201)/.09);border-color:var(--starting-line)}
#app-frame.one-ai .starting-heading>p{margin-left:56px}
#app-frame.one-ai .starting-own{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:16px;width:50%;padding:15px 18px;border:1px solid var(--starting-line);border-radius:12px;background:var(--starting-surface);text-align:left;transition:border-color 160ms ease,background-color 160ms ease,box-shadow 160ms ease}
.starting-own-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--starting-line);border-radius:10px;color:var(--look-accent-ink,var(--look-accent,#a0d6c9));background:rgb(var(--look-accent-rgb,160 214 201)/.08)}
.starting-own-icon svg{width:23px;height:23px}
#app-frame.one-ai .starting-own .choice-copy>strong{font-size:18px;line-height:25px;color:var(--starting-ink)}
#app-frame.one-ai .starting-own .choice-copy>span{font-size:14px;line-height:21px;color:var(--starting-muted)}
.starting-gallery-heading{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:20px 0 10px}
.starting-gallery-heading h2{font-size:14px;line-height:22px;font-weight:500;letter-spacing:0;margin:0;color:var(--starting-ink)}
.starting-gallery-heading>span{font-size:12px;line-height:20px;color:var(--starting-muted)}
.starter-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#app-frame.one-ai .starter-choice{appearance:none;display:flex;flex-direction:column;overflow:hidden;min-width:0;text-align:left;border:1px solid var(--starting-line);border-radius:12px;padding:6px;background:var(--starting-surface);color:var(--starting-ink);cursor:pointer;transition:border-color 160ms ease,background-color 160ms ease}
.starter-art{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;width:100%;border-radius:7px;background:#101c2c center/cover no-repeat}
.starter-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity 200ms ease}
[data-preview-playing] .starter-preview{opacity:1}
.starter-art.horizon{background-image:url('../assets/project-starters/horizon.jpg')}
.starter-art.skyline{background-image:url('../assets/project-starters/skyline.jpg')}
.starter-art.territory{background-image:url('../assets/project-starters/territory.jpg')}
.starter-art.beacon{background-image:url('../assets/project-starters/beacon.jpg')}
.starter-art.podium{background-image:url('../assets/project-starters/podium.jpg')}
.starter-art.pulse{background-image:url('../assets/project-starters/pulse.jpg')}
.starter-caption{display:flex;flex-direction:column;gap:3px;padding:10px 8px 8px}
.starter-title{display:flex;justify-content:space-between;align-items:center;gap:12px}
#app-frame.one-ai .starter-title>strong{font-size:18px;line-height:25px;color:var(--starting-ink);font-weight:500}
.starter-kind{font-size:12px;line-height:19px;color:var(--look-accent-ink,var(--look-accent,#a0d6c9))}
.starter-description{font-size:13px;line-height:20px;color:var(--starting-muted);margin-top:3px}
#app-frame.one-ai :is(.starter-choice,.starting-own):hover:not(:disabled){background:rgb(var(--look-accent-rgb,160 214 201)/.06);border-color:rgb(var(--look-accent-rgb,160 214 201)/.65)}
#app-frame.one-ai :is(.starter-choice,.starting-own)[aria-pressed=true]{border-color:var(--look-accent,#a0d6c9);box-shadow:0 0 0 2px var(--look-accent,#a0d6c9),0 0 0 5px rgb(var(--look-accent-rgb,160 214 201)/.1);background:rgb(var(--look-accent-rgb,160 214 201)/.09)}
#app-frame.one-ai[data-screen=starting] :is(button,input):focus-visible{outline:2px solid var(--look-accent,#a0d6c9);outline-offset:3px}
#app-frame.one-ai :is(.starter-choice,.starting-own):disabled{opacity:.6;cursor:wait}
#app-frame.one-ai[data-screen=starting] button:active:not(:disabled){transform:translateY(1px)}
#app-frame.one-ai .starting-back:disabled{opacity:.4;cursor:wait}
.starting-selection{display:flex;flex-direction:column;align-items:stretch;gap:7px;min-height:62px;flex:1;max-width:480px;min-width:0}
.starting-busy:empty{display:none}
.starting-busy{font-size:12px;color:var(--starting-muted)}
.starting-selection>label{font-size:13px;line-height:18px;color:var(--starting-muted);transition:color 160ms ease}
#app-frame.one-ai .starting-selection>input{min-width:0;width:100%;box-sizing:border-box;border:1px solid var(--starting-line);border-radius:8px;background:var(--starting-surface);padding:11px 13px;font:inherit;font-size:15px;line-height:22px;color:var(--starting-ink);transition:border-color 160ms ease,box-shadow 160ms ease}
#app-frame.one-ai .starting-selection>input::placeholder{color:var(--starting-muted);opacity:.75}
.starting-selection:focus-within>label{color:var(--look-accent-ink,var(--look-accent,#a0d6c9))}
#app-frame.one-ai .starting-selection>input:focus{border-color:var(--look-accent,#a0d6c9);box-shadow:0 0 0 3px rgb(var(--look-accent-rgb,160 214 201)/.12);outline:none}
#app-frame.one-ai .starting-footer{padding-block:20px;align-items:flex-end;gap:24px}
.starting-action{flex:none;display:flex;align-items:flex-end;justify-content:flex-end;width:280px;min-height:62px}
.starting-action .primary[hidden]{display:none!important}
#app-frame.one-ai[data-screen=starting] .starting-footer .primary{background:var(--look-accent,#a0d6c9);border-color:var(--look-accent,#a0d6c9);color:var(--look-accent-text,#122d27);min-width:280px;min-height:62px;padding:18px 32px;border-radius:11px;font-size:17px;font-weight:500;line-height:24px;transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease}
#app-frame.one-ai[data-screen=starting] .starting-footer .primary:hover:not(:disabled){background:var(--look-accent-hover,#b9e7dc);border-color:var(--look-accent-hover,#b9e7dc);box-shadow:0 4px 18px rgb(var(--look-accent-rgb,160 214 201)/.12)}
#app-frame.one-ai[data-screen=starting] .starting-footer .primary:disabled{opacity:.55;cursor:wait;box-shadow:none}
/* The logo, strip and gap above this card follow the shared setup anchor (setup-questions.css). */
html[data-look=light] #app-frame.one-ai[data-screen=starting]{--starting-line:rgba(17,53,49,.2);--starting-surface:rgba(255,255,255,.46);--starting-ink:#14211f;--starting-muted:#465854}
html[data-look=light] .starting-footer{border-top-color:rgba(17,53,49,.15)}
html[data-look=light] .starting-footer>span{color:#465854}
@media(max-width:740px){
 #app-frame.one-ai[data-screen=starting]>.connect-card-content{padding:16px 17px}
 .starting-title-row{gap:6px;align-items:flex-start}
 #app-frame.one-ai .starting-back{width:34px;height:38px;margin-left:-5px}
 #app-frame.one-ai .starting-title-row h1{font-size:28px;line-height:36px}
 #app-frame.one-ai .starting-heading>p{margin-left:35px}
 #app-frame.one-ai .starting-own{width:100%;padding:12px;gap:12px;grid-template-columns:36px minmax(0,1fr)}
 .starting-own-icon{width:36px;height:36px}
 #app-frame.one-ai .starting-own .choice-copy>strong{font-size:17px}
 .starting-gallery-heading{align-items:flex-start}
 .starting-gallery-heading>span{max-width:100px;text-align:right}
 .starter-choices{grid-template-columns:1fr;gap:10px}
 #app-frame.one-ai .starter-choice{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;padding:7px;align-items:center}
 .starter-art{aspect-ratio:1.12;height:100%;min-height:94px}
 .starter-caption{padding:3px 5px 3px 0;gap:2px}
 .starter-description{font-size:12px;line-height:18px}
 #app-frame.one-ai .starter-title>strong{font-size:17px}
 .starting-selection{width:100%;max-width:none;gap:6px}
 .starting-selection>label{width:100%}
 #app-frame.one-ai .starting-selection>input{max-width:none}
 #app-frame.one-ai .starting-footer{padding:14px 17px;gap:14px}
 .starting-footer .starting-selection>label{font-size:12px}
 .starting-action{width:100%;min-height:0}
 .starting-action[data-can-start=false]{display:none}
 #app-frame.one-ai[data-screen=starting] .starting-footer .primary{min-width:0;min-height:58px;padding:16px 24px;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){#app-frame.one-ai[data-screen=starting] :is(button,.starter-preview){transition:none}#app-frame.one-ai[data-screen=starting] button:active:not(:disabled){transform:none}}
/* Short landscape windows need one scroll surface: pinning the footer there
   leaves too little room to read or select a complete choice. */
@media(max-height:580px){
 #app-frame.one-ai[data-screen=starting]{overflow-y:auto;scrollbar-width:thin;scroll-padding-block:12px}
 #app-frame.one-ai[data-screen=starting] :is(button,input){scroll-margin-block:12px}
 #app-frame.one-ai[data-screen=starting]>.connect-card-content{flex:none;overflow:visible}
 #app-frame.one-ai[data-screen=starting]>.starting-footer{flex:none}
}
@media(max-height:580px) and (min-width:741px){
 .starter-choices{grid-template-columns:1fr}
 #app-frame.one-ai .starter-choice{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:12px}
 .starter-art{height:100%;min-height:100px}
 .starter-caption{padding-block:8px}
}
/* The first task uses the same choice treatment as the two setup questions. */
.starting-task-list{display:grid;gap:10px;margin-top:18px}
#app-frame.one-ai .starting-task{display:flex;align-items:center;gap:15px;width:100%;padding:15px 18px;border:1px solid var(--starting-line);border-radius:12px;background:var(--starting-surface);text-align:left;color:var(--starting-ink)}
.starting-task-check{display:grid;place-items:center;flex:none;width:22px;height:22px;border:1.5px solid rgb(var(--look-accent-rgb,160 214 201)/.38);border-radius:50%;color:var(--look-accent-text,#122d27);transition:background-color 160ms ease,border-color 160ms ease}
.starting-task-check svg{width:14px;height:14px}
#app-frame.one-ai .starting-task[aria-pressed=true] .starting-task-check{background:var(--look-accent,#a0d6c9);border-color:var(--look-accent,#a0d6c9)}
#app-frame.one-ai .starting-task .choice-copy>strong{font-size:18px;line-height:25px;font-weight:500}
#app-frame.one-ai .starting-task .choice-copy>span{font-size:14px;line-height:21px;color:var(--starting-muted)}
#app-frame.one-ai .starting-task:hover:not(:disabled){border-color:var(--look-accent,#a0d6c9);background:rgb(var(--look-accent-rgb,160 214 201)/.06)}
#app-frame.one-ai .starting-task[aria-pressed=true]{border-color:var(--look-accent,#a0d6c9);box-shadow:0 0 0 1px var(--look-accent,#a0d6c9);background:rgb(var(--look-accent-rgb,160 214 201)/.09)}
#app-frame.one-ai .starting-task:disabled{opacity:.6;cursor:wait}
#app-frame.one-ai .starting-alternatives{margin-top:16px;padding:7px 0;color:var(--starting-muted);font-size:14px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:740px){
 #app-frame.one-ai .starting-task{padding:12px;gap:10px}
 #app-frame.one-ai .starting-task .choice-copy>strong{font-size:16px;line-height:23px}
 #app-frame.one-ai .starting-task .choice-copy>span{font-size:13px;line-height:19px}
}
.starting-files-note{font-size:12px;line-height:18px;color:var(--starting-muted)}
/* Until a first task is chosen, the footer says what comes next rather than offering a name. */
#app-frame.one-ai .starting-pending{justify-content:center}
#app-frame.one-ai .starting-hint{margin:0;font-size:14px;line-height:21px;color:var(--starting-muted)}
/* Optional files for the chosen task: one drop target, then the selection as contained rows. */
.starting-import{margin-top:12px;color:var(--starting-muted);font-size:13px;line-height:19px}
.starting-import [data-starting-drop]{position:relative;display:flex;align-items:center;gap:14px;border:1px dashed rgb(var(--look-accent-rgb,160 214 201)/.34);border-radius:12px;padding:12px 16px;background:rgb(var(--look-accent-rgb,160 214 201)/.035);transition:border-color 160ms ease,background-color 160ms ease}
.starting-import [data-starting-drop]:hover,.starting-import [data-dragging=true]{border-color:rgb(var(--look-accent-rgb,160 214 201)/.7);background:rgb(var(--look-accent-rgb,160 214 201)/.07)}
.starting-import [data-starting-drop]:focus-within{outline:2px solid var(--look-accent,#a0d6c9);outline-offset:2px}
.starting-import-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid var(--starting-line);border-radius:9px;color:var(--look-accent-ink,var(--look-accent,#a0d6c9));background:rgb(var(--look-accent-rgb,160 214 201)/.08)}
.starting-import-icon svg{width:20px;height:20px}
.starting-import label{display:flex;flex-direction:column;gap:1px;min-width:0;pointer-events:none}
.starting-import strong{color:var(--starting-ink);font-size:15px;line-height:22px;font-weight:500}
.starting-import label>span{font-size:13px;line-height:19px}
#app-frame .starting-import input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;margin:0}
#app-frame.one-ai .starting-import>p{margin:8px 2px 0;font-size:12.5px;line-height:18px;color:var(--starting-muted)}
.starting-file-list{list-style:none;display:grid;gap:6px;margin:8px 0 0;padding:0;max-height:132px;overflow-y:auto}
.starting-file-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;min-height:40px;padding:0 4px 0 12px;border:1px solid var(--starting-line);border-radius:9px;background:var(--starting-surface)}
.starting-file-icon{display:grid;color:var(--starting-muted)}
.starting-file-icon svg{width:17px;height:17px}
.starting-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--starting-ink)}
.starting-file-size{font-size:12px;color:var(--starting-muted);font-variant-numeric:tabular-nums}
#app-frame.one-ai .starting-file-list .starting-file-remove{display:grid;place-items:center;width:32px;height:32px;min-height:32px;padding:0;border-radius:8px;color:var(--starting-muted)}
#app-frame.one-ai .starting-file-list .starting-file-remove svg{width:15px;height:15px}
#app-frame.one-ai .starting-file-list .starting-file-remove:hover:not(:disabled){color:var(--starting-ink);background:rgb(var(--look-accent-rgb,160 214 201)/.1)}
@media(max-width:740px){
 .starting-import [data-starting-drop]{gap:12px;padding:11px 12px}
 .starting-import-icon{width:32px;height:32px}
}