:root{color-scheme:light;--paper:#edf2f6;--ink:#23374b;--muted:#56697b;--accent:#324968;--line:#ccd7df;--surface:#fff;--focus:#b14c6a;font-family:"PingFang TC","Noto Sans TC",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}header{max-width:1080px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none;font-weight:700;font-size:18px}.brand-mark{font-size:30px;font-weight:400;line-height:1}.privacy{font-size:12px;color:var(--muted)}main{max-width:960px;margin:auto;padding:34px 28px 20px}.intro{margin-bottom:32px}.intro h1{font-size:clamp(28px,4vw,42px);font-weight:650;letter-spacing:-1px;line-height:1.4;margin:0 0 12px}.intro p{margin:0;color:var(--muted);font-size:15px}.workspace{display:grid;grid-template-columns:minmax(0,380px) minmax(0,380px);gap:72px;align-items:start}.preview-section{position:sticky;top:20px}.preview-heading,.preview-footer{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted);min-height:40px}.preview-heading{font-weight:600}.story{position:relative;width:100%;aspect-ratio:9/16;background:white;box-shadow:0 12px 35px #23374b12}.story canvas{display:block;width:100%;height:100%}.tiles{position:absolute;inset:0}.tile{position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;border:0;background:transparent;color:var(--muted);font:inherit;padding:0;min-height:0;border-radius:0}.tile.empty{font-size:13px;gap:8px}.tile.empty::before{content:"＋";font-size:26px;font-weight:300}.tile.selected{box-shadow:inset 0 0 0 3px var(--focus)}.tile.filled .tile-label{position:absolute;left:8px;bottom:8px;padding:4px 7px;border-radius:4px;color:white;background:#182635b8;font-size:11px}.tile:not(.empty):hover{background:#ffffff12}.preview-footer span{font-size:11px}.controls{padding-top:8px}fieldset{border:0;padding:0;margin:0;min-width:0}h2{font-size:17px;margin:0 0 12px;font-weight:650}.control-block{padding:20px 0;border-bottom:1px solid var(--line)}.control-block:first-child{padding-top:0}p{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 16px}.hint{font-size:12px;margin:12px 0 0;line-height:1.8}.primary,.secondary,button,select,input{font:inherit}button,a,select,input{touch-action:manipulation}button{cursor:pointer;min-height:44px;border-radius:8px;transition:background .15s}.primary{border:1px solid var(--accent);background:var(--accent);color:#fff;padding:13px 18px;font-weight:600;width:100%}.primary:hover:not(:disabled){background:#203956}.secondary{border:1px solid var(--line);background:white;padding:10px 16px;color:var(--ink)}button:disabled,fieldset:disabled{opacity:.5;cursor:default}.text-button{background:transparent;border:0;padding:8px 0;color:var(--accent);font-size:13px}.danger{color:#a33148}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-size:14px}select{max-width:190px;border:1px solid var(--line);border-radius:6px;color:var(--ink);background:white;min-height:44px;padding:8px}input[type=color]{width:60px;height:40px;border:1px solid var(--line);padding:4px;background:white;border-radius:6px}.slider-row{display:grid;grid-template-columns:48px 1fr;align-items:center;min-height:44px;font-size:14px}input[type=range]{width:100%;accent-color:var(--accent);min-height:40px}.section-heading,.button-row{display:flex;justify-content:space-between;align-items:center;gap:16px}.section-heading h2{margin:0}.editor{background:#e3eaf1;padding:16px!important;border-radius:8px;margin-top:16px}.filename{font-size:12px;overflow-wrap:anywhere;margin:4px 0 12px}.export{margin-top:8px}#status{font-size:13px;line-height:1.7;padding:18px 0 8px;color:var(--muted);overflow-wrap:anywhere}#status.error{color:#a33148}progress{width:100%;height:10px;accent-color:var(--accent)}#progress-wrap{text-align:right}.result{margin-top:24px;padding:20px;background:white;border-radius:10px}.result video{display:block;max-height:380px;width:100%;background:#121212;margin-bottom:16px}.download{display:block;text-align:center;color:var(--accent);padding:14px;font-size:14px}.result .primary{margin-top:0}footer{font-size:12px;color:var(--muted);text-align:center;margin:48px 0 10px}a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}[hidden]{display:none!important}
@media(max-width:700px){header{padding:16px 20px}.privacy{font-size:11px}main{padding:24px 20px 16px}.intro{margin-bottom:20px}.intro h1{font-size:28px}.workspace{grid-template-columns:1fr;gap:20px}.preview-section{position:static;max-width:330px;width:100%;margin:auto}.controls{padding-top:0}.control-block:first-child p{font-size:13px}.intro h1 br{display:initial}.intro p{font-size:13px}.result video{max-height:460px}footer{margin-top:32px;padding-bottom:env(safe-area-inset-bottom)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}