@font-face{font-family:G3Serif;src:url(/fonts/font_serif.ttf)format("truetype");font-display:swap}:root{color:#222;background:#f7f7f7;font-family:Arial,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,select,textarea{font-family:inherit}.app{width:min(1200px,95%);margin:auto;padding:24px 0 60px}header{text-align:center;margin-bottom:28px}header h1{margin-bottom:5px;font-size:32px}h2{margin-bottom:15px;font-size:20px}.template-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:12px;margin-bottom:35px;display:grid}.template-button{cursor:pointer;color:#222;background:#fff;border:2px solid #ddd;border-radius:8px;padding:4px}.template-button.active{background:#dcfce7;border-color:#16a34a}.template-button img{aspect-ratio:9/16;object-fit:cover;border-radius:4px;width:100%;display:block}.template-button span{margin-top:4px;font-size:12px;display:block}.workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:36px;display:grid}.settings{background:#fff;border:1px solid #ddd;border-radius:12px;padding:24px}.settings label{margin:18px 0 8px;font-weight:700;display:block}.settings textarea,.settings select{box-sizing:border-box;border:1px solid #bbb;border-radius:6px;width:100%;padding:12px;font-size:16px}.settings input[type=range]{width:100%}.preview-section{text-align:center}.preview{aspect-ratio:9/16;background:#eee;border-radius:12px;width:100%;max-width:360px;margin:auto;position:relative;overflow:hidden}.preview>img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.preview-title{box-sizing:border-box;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere;text-shadow:1px 1px 2px #000c,-1px -1px 2px #00000080;z-index:4;pointer-events:none;width:84%;font-family:G3Serif,serif;font-weight:700;line-height:1.35;position:absolute;bottom:12%;left:8%}.note{color:#666;margin-top:12px;font-size:13px}.upload-box{background:#f8fafc;border:2px dashed #cbd5e1;border-radius:12px;margin-bottom:28px;padding:18px}.upload-box label{margin:0 0 12px;font-weight:700;display:block}.upload-box input[type=file]{width:100%;max-width:100%;font-size:14px;display:block}.upload-hint{color:#64748b;margin-top:10px;font-size:13px;line-height:1.5}.file-details{overflow-wrap:anywhere;background:#ecfdf5;border-radius:8px;margin-top:15px;padding:12px}.file-details p{margin:6px 0;font-size:13px}.remove-video{color:#fff;cursor:pointer;background:#b91c1c;border:none;border-radius:6px;margin-top:10px;padding:9px 14px}.video-error{color:#b91c1c;margin-top:12px;font-size:13px}.preview-video-area{aspect-ratio:16/9;z-index:3;background:#000;width:100%;position:absolute;top:20.8333%;left:0;overflow:hidden}.preview-video-area video{object-fit:contain;width:100%;height:100%;display:block}.export-panel{border:1px solid #d4d4d4;border-radius:10px;margin-top:28px;padding:18px}.export-panel h2{margin-top:0}.export-panel>p{color:#555;font-size:13px}.export-button,.download-button{text-align:center;color:#fff;cursor:pointer;background:#166534;border:none;border-radius:8px;width:100%;padding:12px 16px;font-weight:700;text-decoration:none;display:block}.export-button:disabled{cursor:not-allowed;background:#a3a3a3}.progress-group{align-items:center;gap:8px;margin:14px 0;display:flex}.progress-group progress{width:100%}.result{margin-top:18px}.result video{width:100%;max-width:250px;margin:8px auto 15px;display:block}@media (width<=700px){.workspace{grid-template-columns:1fr}.template-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.source-step{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;margin-bottom:28px;padding:18px 22px}.source-step h2{margin:0 0 10px}.source-step p{margin:5px 0 13px;line-height:1.6}.source-link{color:#fff;background:#166534;border-radius:8px;padding:11px 17px;font-weight:700;text-decoration:none;display:inline-block}.source-link:hover{background:#14532d}.source-note{color:#475569;font-size:13px}.input-hint{color:#64748b;font-size:13px;line-height:1.5}.reset-position{cursor:pointer;background:#f8fafc;border:1px solid #cbd5e1;border-radius:7px;padding:8px 10px}.color-row{align-items:stretch;gap:10px;display:flex}.color-row select{flex:1}.color-row input[type=color]{cursor:pointer;border:1px solid #bbb;border-radius:7px;width:56px;min-height:44px;padding:3px}.color-swatches{flex-wrap:wrap;gap:7px;margin-top:10px;display:flex}.color-swatch{cursor:pointer;border:2px solid #cbd5e1;border-radius:50%;width:28px;height:28px}.color-swatch.active{outline-offset:2px;outline:3px solid #16a34a}.preview-text-canvas{z-index:4;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.text-drag-handle{z-index:5;color:#166534;cursor:ns-resize;touch-action:none;-webkit-user-select:none;user-select:none;background:#fffef9;border:2px solid #166534;border-radius:9px;width:32px;height:40px;font-size:24px;line-height:1;position:absolute;right:4px;transform:translateY(-50%)}.text-drag-handle:disabled{opacity:.5;cursor:default}