@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{color-scheme:light;--ink:#18201e;--muted:#737d77;--line:#e2e6df;--paper:#f5f7f2;--lime:#d9fa72;--green:#203c32}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.65 'DM Sans','Noto Sans Thai',sans-serif}button,input,select{font:inherit}button,a,label,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #8bab3a;outline-offset:3px}a{color:inherit}button{color:inherit}h1,h2,p{margin:0}h1{font-size:clamp(25px,2.6vw,37px);font-weight:600;letter-spacing:-1px;line-height:1.4}h2{font-size:18px;font-weight:600}input,select{min-width:0}button{border:0}.topbar{height:84px;display:flex;align-items:center;gap:22px;padding:0 4%;border-bottom:1px solid var(--line);background:#fff}.wordmark{display:flex;align-items:center;text-decoration:none;font-size:25px;font-weight:700;letter-spacing:-1px}.wordmark-light{font-weight:400}.mark{display:grid;place-items:center;width:35px;height:35px;margin-right:10px;background:var(--lime);font-size:17px;border-radius:11px}.beta{font-size:12px;color:#707871;letter-spacing:1.4px;border-left:1px solid var(--line);padding-left:22px}.top-right{margin-left:auto;display:flex;align-items:center;gap:28px;font-size:14px;color:var(--muted)}.quiet{background:transparent;font-size:14px;color:#52634e;text-decoration:underline;text-underline-offset:4px;padding:5px}.page-heading{display:flex;align-items:center;justify-content:space-between;margin:40px 0 32px;gap:20px}.eyebrow{font-size:12px;letter-spacing:2px;color:#627651;margin-bottom:10px}.intro{color:var(--muted);margin-top:10px}.format-chip{display:flex;align-items:center;gap:12px;font-size:27px;border:1px solid #d8ded1;border-radius:13px;padding:12px 17px;white-space:nowrap}.format-chip span{font-size:11px;letter-spacing:1px;max-width:70px;white-space:normal}main{max-width:1320px;padding:0 40px;margin:auto}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:36px}.editor{display:grid;gap:18px;align-content:start}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px}.section-title{display:flex;align-items:center;gap:12px;margin-bottom:22px}.step{font-size:12px;background:#f1f4ea;border:1px solid #e4e9dc;border-radius:7px;display:grid;place-items:center;width:29px;height:29px;color:#586a43}.meta{font-size:13px;color:var(--muted)}.section-title .meta,.section-title .quiet{margin-left:auto}.dropzone{border:1.5px dashed #c7d0bd;border-radius:13px;min-height:220px;display:flex;align-items:center;justify-content:center;gap:7px;flex-direction:column;background:#fbfcf8;cursor:pointer;padding:20px;text-align:center;transition:.2s}.dropzone.dragover{background:#edf8d1;border-color:#668f25}.dropzone>span:not(.upload-icon):not(.button){font-size:13px;color:var(--muted)}.upload-icon{font-size:25px;border:1px solid #d9e0d0;border-radius:50%;width:42px;height:42px;margin-bottom:2px}.dropzone input{position:absolute;width:1px;height:1px;opacity:0}.button{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--lime);padding:13px 21px;border-radius:10px;color:#1d2a17;font-weight:600;font-size:16px;text-decoration:none}.button.small{font-size:14px;padding:7px 20px;margin-top:10px}.privacy-note{font-size:13px;color:#7a8374;margin-top:14px;display:flex;gap:7px}.fields{display:grid;gap:16px}.fields.two{grid-template-columns:1fr 1fr}.fields label,.field{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:500}.field{margin-top:17px}input:not([type=file]):not([type=range]):not([type=checkbox]),select{border:1px solid #dce2d7;background:#fff;border-radius:8px;padding:11px 12px;min-height:45px;color:#273123;width:100%;font-size:15px}input::placeholder{color:#9ba297}.hint{font-size:13px;color:#7e867a;line-height:1.65;margin-top:11px}.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.style-card{text-align:left;padding:8px;background:#fff;border:1.5px solid #e3e7df;border-radius:11px}.style-card.selected{border-color:#6e8a37;box-shadow:0 0 0 1px #6e8a37}.swatch{height:75px;border-radius:6px;display:flex;align-items:center;justify-content:space-between;padding:12px;font:600 29px 'DM Sans',sans-serif}.swatch i{width:31px;height:5px;background:currentColor}.swatch.island{background:#203c32;color:#f1dfac}.swatch.bold{background:#252222;color:#fa9370}.swatch.minimal{background:#eef0ec;color:#353d38}.style-card strong{display:block;font-size:14px;margin:8px 3px 0}.style-card small{display:block;font-size:12px;color:var(--muted);margin:3px}.settings{grid-template-columns:.85fr 1.25fr 1.4fr;margin-top:23px}.settings select{font-size:13px;padding:10px 8px}.toggle-row{display:flex;gap:12px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);cursor:pointer}.toggle-row input{accent-color:#567731;width:18px;height:18px}.toggle-row strong{font-size:14px;font-weight:500;display:block}.toggle-row small{font-size:12px;color:var(--muted);display:block}.music-symbol{margin-left:auto;font-size:23px;color:#748268}.preview-sticky{position:sticky;top:22px}.preview-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.preview-title h2{font-size:15px}.phone{position:relative;background:#19251f;aspect-ratio:9/16;max-height:490px;margin:auto;border:7px solid #fff;border-radius:23px;box-shadow:0 12px 40px #25332212;overflow:hidden;width:276px}.phone canvas{width:100%;height:100%;display:block}.empty-preview{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#f2f6ea;background:radial-gradient(ellipse at top right,#304a37,#17251d 75%);gap:18px;padding:20px}.empty-mark{width:65px;height:65px;background:#d9fa7212;border:1px solid #a9c87938;border-radius:20px;display:grid;place-items:center;color:var(--lime);font-size:26px}.empty-preview strong{font-size:20px;line-height:1.6}.empty-preview span{color:#a6b29d;font-size:13px}.playback{display:flex;align-items:center;gap:12px;max-width:290px;margin:16px auto}.play-btn{border-radius:50%;background:white;border:1px solid var(--line);width:33px;height:33px;font-size:12px;flex-shrink:0}.playback input{accent-color:#547441;width:100%}.export-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;margin-top:22px}.export-info{display:flex;flex-direction:column;gap:4px}.export-info strong{font-size:16px}.export-info span{font-size:13px;color:var(--muted)}.export{width:100%;margin-top:16px;justify-content:space-between}.export-card .hint{font-size:12px}.honest-note{text-align:center;font-size:12px;color:#8b9286;line-height:1.8;margin-top:17px}.storyboard-empty{font-size:14px;color:#929b8b;padding:20px;text-align:center;border:1px dashed var(--line);border-radius:10px;margin-top:16px}footer{display:flex;align-items:center;gap:22px;margin:48px 0 25px;border-top:1px solid var(--line);padding-top:22px;font-size:12px;color:#8b9585}footer>span{font-size:12px;letter-spacing:1px}footer button{margin-left:auto}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#17291f;color:white;border-radius:12px;padding:14px 22px;max-width:min(90vw,600px);z-index:10;box-shadow:0 5px 30px #0002;display:none;font-size:15px}#toast.show{display:block}dialog{max-width:520px;border:0;border-radius:18px;padding:28px;box-shadow:0 20px 80px #0003;color:var(--ink)}dialog::backdrop{background:#15251c66}.dialog-head{display:flex;justify-content:space-between;gap:24px}dialog ol{padding-left:24px;line-height:2}dialog p{font-size:14px;color:var(--muted);margin-top:12px}.mobile-break{display:none}[hidden]{display:none!important}.file-list{display:grid;gap:7px;margin-top:12px}.file-row{display:flex;gap:10px;align-items:center;padding:7px;border:1px solid var(--line);border-radius:9px}.file-row img{width:45px;height:54px;object-fit:cover;border-radius:5px;background:#f0f0eb}.file-detail{min-width:0;flex:1}.file-detail strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.file-detail span{font-size:12px;color:var(--muted)}.file-actions{display:flex;gap:4px}.icon-btn{background:#f3f5ef;border-radius:6px;padding:5px 7px;font-size:14px}.scene{border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:10px;display:grid;grid-template-columns:52px 1fr;gap:12px}.scene img{width:52px;height:75px;object-fit:cover;border-radius:5px}.scene-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.scene-head strong{font-size:13px}.scene-head span{font-size:12px;color:var(--muted)}.scene input{font-size:13px!important;padding:7px!important;min-height:34px!important;margin:3px 0}.scene-edit{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:6px}.scene-edit label{font-size:12px;color:#64705f}.progress-track{height:6px;background:#eff2e9;border-radius:8px;overflow:hidden;margin-top:20px}#progressFill{height:100%;width:0;background:#627f35;transition:width .2s}.progress-label{display:flex;align-items:center;justify-content:space-between;margin-top:7px;font-size:12px;color:var(--muted)}.download{margin-top:13px;background:#203c32;color:white}.exporting .editor{pointer-events:none;opacity:.65}.exporting #resetBtn{pointer-events:none;opacity:.4}.exporting #playBtn,.exporting #scrubber{pointer-events:none;opacity:.4}
@media(min-width:1400px){.phone{width:290px;max-height:520px}}@media(max-width:1050px){main{padding:0 24px}.workspace{grid-template-columns:minmax(0,1fr) 310px;gap:22px}.panel{padding:19px}.settings{grid-template-columns:1fr 1fr}.settings label:last-child{grid-column:1/-1}.top-right>span{display:none}.format-chip{display:none}.styles{gap:7px}.style-card small{font-size:12px}.phone{width:255px}}@media(max-width:760px){.topbar{height:70px;padding:0 20px;gap:13px}.wordmark{font-size:22px}.beta{font-size:10px;padding-left:13px}.top-right{margin-left:auto}.workspace{display:flex;flex-direction:column}.preview-column{order:-1}.preview-sticky{position:static;display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:start}.preview-title{grid-column:1/-1;margin-bottom:0}.phone{width:140px;border-width:4px;border-radius:13px;grid-row:2/5}.playback{grid-column:2;margin:5px 0;width:100%}.export-card{grid-column:2;margin:0;padding:13px;grid-row:2}.export-info strong{font-size:14px}.export-info span{font-size:12px}.export{font-size:14px;padding:10px;margin-top:10px}.export-card .hint{font-size:11px}.playback{grid-row:3}.honest-note{grid-column:2;grid-row:4;text-align:left;margin:0;font-size:11px}.empty-preview{gap:8px;padding:8px}.empty-mark{width:35px;height:35px;font-size:16px;border-radius:10px}.empty-preview strong{font-size:12px}.empty-preview span{font-size:10px}.page-heading{margin:25px 0 22px}.eyebrow{font-size:10px}.intro{font-size:14px}.panel{border-radius:14px}.section-title{margin-bottom:16px}.fields.two{grid-template-columns:1fr}.workspace{gap:23px}.styles{gap:8px}.style-card strong{font-size:12px}.style-card small{font-size:11px}.swatch{height:62px;font-size:24px}.dropzone{min-height:200px}.dropzone strong{font-size:15px}footer p{display:none}.mobile-break{display:block}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}