:root{color:#0a245d;font-synthesis:none;background:#fffffa;font-family:Nunito,Arial Rounded MT Bold,Arial,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button,a,input,textarea{-webkit-tap-highlight-color:transparent}a{color:inherit}main{isolation:isolate;min-height:100svh;padding:clamp(70px,11.5vh,125px) 24px 235px;position:relative}.scenery{z-index:-1;pointer-events:none;background:url(/harbor.png) bottom/100% no-repeat;position:absolute;inset:0}.content{width:min(860px,100%);margin:auto}.intro{text-align:center;margin-bottom:28px}h1{letter-spacing:-2px;white-space:nowrap;margin:0;font-size:clamp(34px,4.55vw,66px);font-weight:850;line-height:1.1}.subtitle{color:#304679;margin:20px 0 0;font-size:clamp(16px,1.8vw,26px);font-weight:600;line-height:1.3}.composer{background:#fffe;border:1px solid #64b2ff;border-radius:24px;padding:21px;box-shadow:0 7px 18px #549ee905}.composer:not(.status-card){position:relative}.composer:not(.status-card):before{content:"";pointer-events:none;border:1px solid #d7e4ff;border-radius:19px;position:absolute;inset:20px}textarea{resize:vertical;color:#243e77;background:0 0;border:0;outline:0;width:100%;min-height:150px;padding:18px 21px 10px;font-size:22px;line-height:1.5;display:block}textarea::placeholder{color:#8696c3}.composer-footer{justify-content:space-between;align-items:center;gap:14px;padding:16px 12px 12px 21px;display:flex;position:relative}.upload{color:#7388b7;background:0 0;border:0;align-items:center;gap:12px;padding:9px 0;font-size:17px;display:flex}.upload svg{width:28px;height:28px}.upload span{color:#8b9cbe;white-space:nowrap;margin-left:0;font-size:12px}.generate{color:#fff;background:#217eff;border:0;border-radius:19px;justify-content:center;align-items:center;gap:12px;padding:18px 27px;font-size:19px;font-weight:650;text-decoration:none;display:flex}.generate:hover:not(:disabled){background:#116beb}.generate svg{height:19px}.story-hints{text-align:center;color:#738ac0;font-size:17px}.anime-hint{justify-content:center;align-items:center;gap:9px;margin:23px 0 0;display:flex}.anime-hint svg{width:23px;height:23px}.arc{margin-top:32px}.arc p{margin:0;line-height:1.7}.arc p:first-child{color:#3d6098;margin-bottom:0;font-size:19px}.fineprint{color:#92a1bd;text-align:center;margin:16px 0 0;font-size:11px;line-height:1.6}.page-footer{text-align:center;color:#92a1bd;margin-top:18px;font-size:10px}.page-footer summary{cursor:pointer}.page-footer details p{background:#fffffaf0;border-radius:10px;max-width:560px;margin:8px auto;padding:15px;line-height:1.7}.photos{flex-wrap:wrap;gap:12px;padding:10px 20px;display:flex;position:relative}.photo{width:104px}.photo-image{height:88px;position:relative}.photo img{object-fit:cover;border-radius:9px;width:100%;height:100%}.photo button{background:#fff;border:0;border-radius:50%;place-items:center;width:23px;height:23px;display:grid;position:absolute;top:3px;right:3px}.photo input{border:1px solid #d7e4ff;border-radius:4px;width:100%;margin-top:5px;padding:6px 3px;font-size:9px}.error{color:#a34734;background:#fff0ec;border-radius:8px;padding:12px;font-size:13px;line-height:1.5;position:relative}.sr-only{clip:rect(0,0,0,0);width:1px;height:1px;position:absolute;overflow:hidden}:focus-visible{outline-offset:4px;outline:2px solid #4589e8}textarea:focus-visible{outline-offset:-6px;border-radius:16px}.confirmation{color:#0a245d;background:#fffefa;border:1px solid #72b6ff;border-radius:20px;width:min(650px,100% - 32px);padding:35px;box-shadow:0 12px 70px #142c7025}.confirmation::backdrop{background:#20304433}.confirmation h2{text-align:center;margin:8px 0 22px;font-size:27px;line-height:1.2}.story-summary{white-space:pre-wrap;max-height:38vh;margin:0 0 24px;font-size:17px;line-height:1.55;overflow:auto}.close-modal{color:#2d5591;background:0 0;border:0;position:absolute;top:14px;right:14px}.confirmation .generate{border-radius:12px;width:100%;font-size:17px}.edit-story{color:#304c85;background:0 0;border:1px solid #d4e1f9;border-radius:12px;width:100%;margin-top:9px;padding:14px;font-size:16px;display:block}.status-card{padding:32px}.status-kicker{letter-spacing:1px;color:#8094b4;justify-content:center;align-items:center;gap:7px;font-size:10px;display:flex}.status-card h2{text-align:center;margin:14px 0;font-size:29px}.status-message{text-align:center;color:#345589;font-size:15px;line-height:1.6}.film-progress{background:#e9effd;border-radius:20px;height:10px;margin-top:28px;overflow:hidden}.film-progress span{background:#2384ff;border-radius:20px;width:30%;height:100%;animation:2.5s ease-in-out infinite alternate progress;display:block}@keyframes progress{to{transform:translate(233%)}}.stages{gap:10px;margin:22px 0;padding:0;list-style:none;display:flex}.stages li{text-align:center;color:#a1b1d1;flex:1;font-size:11px;line-height:1.4}.stages li span{color:#8c9fc2;background:#e3ebfa;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;margin:0 auto 8px;font-size:10px;display:flex}.stages .current,.stages .done{color:#2f65b0}.stages .current span,.stages .done span{color:#fff;background:#2988ff}.time-note{text-align:center;color:#879cbf;font-size:11px;line-height:1.7}.notify-form{text-align:center;border-top:1px solid #dbe6fa;margin-top:25px;padding-top:22px}.notify-form label{font-size:20px;font-weight:750}.notify-form p{color:#647fae;font-size:13px;line-height:1.7}.notify-form>div{gap:10px;display:flex}.notify-form input{background:#fff;border:1px solid #d3e2fa;border-radius:11px;flex:1;min-width:0;padding:14px}.notify-form button{color:#fff;background:#217eff;border:0;border-radius:11px;padding:14px 20px;font-size:13px}.notify-form small{color:#91a2bf;margin-top:10px;font-size:11px;display:block}.copy-link{color:#577bb1;background:0 0;border:0;justify-content:center;align-items:center;gap:7px;width:100%;padding:18px 0 0;font-size:12px;display:flex}.email-confirmation{background:#f0f6ff;border-radius:10px;align-items:center;gap:10px;margin-top:24px;padding:15px;font-size:13px;line-height:1.6;display:flex}.status-card video{border-radius:12px;width:100%;margin:12px 0 20px}.spin{animation:1.2s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=700px){main{min-height:100svh;padding:70px 18px 170px}.scenery{background-position:bottom;background-size:auto 330px}h1{letter-spacing:-1px;white-space:normal;font-size:clamp(31px,7vw,46px)}.subtitle{margin-top:18px;font-size:16px;line-height:1.45}.desktop-break{display:none}.intro{margin-bottom:24px}.composer{border-radius:20px;padding:12px}.composer:not(.status-card):before{border-radius:15px;inset:11px}textarea{min-height:145px;padding:17px 13px;font-size:17px}.composer-footer{gap:8px;padding:10px}.upload{flex-wrap:wrap;gap:6px;font-size:12px}.upload svg{width:20px;height:20px}.upload span{font-size:10px}.generate{white-space:nowrap;border-radius:13px;gap:6px;padding:13px 15px;font-size:13px}.story-hints{font-size:12px}.anime-hint{gap:5px;margin-top:20px}.anime-hint svg{width:18px;height:18px}.arc{margin-top:23px}.arc p:first-child{font-size:15px}.arc p{line-height:1.8}.fineprint{font-size:10px}.page-footer{margin-top:12px}.confirmation{padding:24px}.confirmation h2{font-size:23px}.story-summary{font-size:15px}.confirmation .generate{font-size:14px}.status-card{padding:22px}.status-card h2{font-size:24px}.notify-form>div{flex-direction:column}.stages li{font-size:9px}}@media (prefers-reduced-motion:reduce){.spin,.film-progress span{animation:none}}@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/nunito-400.ttf)format("truetype")}@font-face{font-family:Nunito;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/nunito-600.ttf)format("truetype")}@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/nunito-700.ttf)format("truetype")}@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/nunito-800.ttf)format("truetype")}@font-face{font-family:Nunito;font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/nunito-900.ttf)format("truetype")}.name-input{color:#243e77;background:0 0;border:0;border-bottom:1px solid #e7edfa;border-radius:0;outline:0;width:calc(100% - 42px);margin:15px 21px 0;padding:0 0 11px;font-size:17px;display:block;position:relative}.name-input::placeholder{color:#8696c3}@media (width<=700px){.name-input{width:calc(100% - 26px);margin:13px 13px 0;font-size:16px}}.detail-hint{color:#334c65;text-wrap:balance;margin:0 0 12px;font-size:13px;line-height:1.5}
