/* Three approved scenario screens; only presentation changes. */
body.script-flow{background:#090a0f;color:#f5f3fb}
.script-flow .flow-main{position:relative;max-width:620px;width:100%;padding:24px 20px max(24px,env(safe-area-inset-bottom));box-sizing:border-box}
.script-flow .flow-header{justify-content:center;height:34px;margin:0 0 36px}
.script-flow .flow-header b{font-size:23px;font-weight:500;letter-spacing:-.8px}.script-flow .flow-header b span{color:#b49aef}
.script-flow .flow-header>a,.script-flow .flow-header>img{display:none}
.script-flow #back{position:absolute;top:19px;left:13px;width:44px;height:44px;min-height:44px;padding:0;margin:0;border:0;background:none;box-shadow:none;font-size:36px;font-weight:200;line-height:1;color:#c4bed7;border-radius:12px}
.script-flow #back:focus-visible{outline:2px solid #b9a6e8;outline-offset:2px}
.script-flow #screen>div:first-child{text-align:center;margin-bottom:26px}
.script-flow #screen h1{font-size:clamp(27px,6.8vw,36px);font-weight:450;letter-spacing:-.8px;line-height:1.15;margin:0 auto;max-width:470px}
.script-flow .intro{font-size:15px;font-weight:400;line-height:1.5;margin:12px 0 0;color:#b3b0bf}
.script-flow[data-story-step=source] #screen>div:first-child{margin:0 auto 34px;max-width:340px}
.script-flow .mode-card{aspect-ratio:939/464;margin-bottom:18px;background:radial-gradient(ellipse at 5% 0,#55536725,transparent 65%),linear-gradient(125deg,#101117,#0e0f15 48%,#1e1c2a);border-radius:25px}
.script-flow .mode-card-art{clip-path:inset(0 0 0 48%);mask-image:linear-gradient(to right,transparent 48%,#000 54%);-webkit-mask-image:linear-gradient(to right,transparent 48%,#000 54%)}
.script-flow .mode-card-art img{width:109.05218%;left:-4.57934%;top:-84.91379%}
.script-flow .mode-card--ai .mode-card-art img{top:-190.94828%}
.script-flow .mode-card-copy{left:5.3%;top:25%;width:49%}
.script-flow .mode-card-copy strong{font-size:clamp(16px,4.85cqw,27px);font-weight:450;letter-spacing:-.6px}
.script-flow .mode-card-description{font-size:clamp(11px,3.2cqw,17px);margin-top:10%;line-height:1.4;letter-spacing:-.2px}
.script-flow .mode-card-arrow{left:5.3%;bottom:14%;width:8%;max-width:28px}
.script-field{display:flex;flex-direction:column;position:relative;overflow:hidden;width:100%;box-sizing:border-box;border-radius:19px;border:1px solid #b8a5e374;background:radial-gradient(ellipse at 3% 0,#65617e26,transparent 45%),linear-gradient(145deg,#191920,#101117 60%,#1b1926);box-shadow:inset 0 1px 1px #e5d5ff29,0 8px 28px #0002;transition:border-color .18s;cursor:text}
.script-field:focus-within{border-color:#c7aff4b3;box-shadow:inset 0 1px 2px #e5d5ff38,0 0 0 2px #ac8de20b}
.script-flow .script-field textarea{display:block;flex:1;resize:none;width:100%;box-sizing:border-box;min-height:260px;height:clamp(260px,43svh,460px);max-height:none;margin:0;padding:20px 18px 12px;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;border-radius:0;font:400 16px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#f1eff7;letter-spacing:0;touch-action:pan-y}
.script-flow .script-field textarea::placeholder{color:#777582}
.script-field-count{padding:0 18px 15px;display:block;color:#8f8b9e;font-size:12px;line-height:1.4;pointer-events:none;font-variant-numeric:tabular-nums}
.script-flow .counter{display:flex;justify-content:space-between;margin:16px 5px 28px;font-size:13px;color:#aaa5b8}.script-flow .counter>span:first-child{order:2}.script-flow .counter>span:last-child{order:1}
.script-flow #screen>.primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;margin-top:25px;padding:16px 18px;border-radius:21px;border:1px solid #b9a5e57a;background:radial-gradient(ellipse at 10% 0,#afa2d329,transparent 72%),linear-gradient(135deg,#292531,#1a1921 65%,#282333);box-shadow:inset 0 1px 2px #eee4ff33,0 8px 24px #0002;color:#e5d6fc;font-size:17px;font-weight:450;letter-spacing:-.2px;animation:none;transition:transform .18s,filter .18s}
.script-flow #screen>.primary:active{transform:scale(.985);filter:brightness(1.1)}.script-flow #screen>.primary:disabled{opacity:.5}
.script-flow[data-story-step=brief] .script-field textarea{height:clamp(220px,32svh,330px);min-height:220px}
.script-flow .duration-picker{margin:28px 0 24px;padding:0 4px}.script-flow .duration-heading>span{font-size:16px;color:#eeebf4}.script-flow .duration-value{font-size:19px;font-weight:400;letter-spacing:-.3px}.script-flow .duration-value small{font-size:15px;color:#ddd7e7}.script-flow .duration-rail{background:#34313d;border:1px solid #a896ca45;box-shadow:inset 0 1px 3px #eee3ff22;height:7px}.script-flow .duration-drop{background:radial-gradient(circle at 30% 20%,#d8c8f7,#7d679e 48%,#342941 90%);width:28px;height:28px;margin-left:-14px;top:18px}.script-flow .duration-ticks button{color:#aaa3bb;font-size:13px}.script-flow .duration-ticks button.duration-selected{color:#eadcff}
@media(max-width:350px){.script-flow .flow-main{padding-inline:15px}.script-flow .intro{font-size:13px}.script-flow .script-field textarea{padding:17px 15px}}
@media(prefers-reduced-motion:reduce){.script-field,.script-flow #screen>.primary{transition:none}}