@import "https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700;900&family=Playfair+Display:ital@1&display=swap";:root{--cream:#fdf6ee;--warm:#f5e6d0;--amber:#e8956d;--deep:#2d1f14;--muted:#8a7060;--green:#7aab8a}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--cream);color:var(--deep);flex-direction:column;min-height:100vh;font-family:Zen Kaku Gothic New,sans-serif;display:flex}body:before{content:"";pointer-events:none;z-index:0;background-image:radial-gradient(circle at 20%,#e8956d12 0%,#0000 50%),radial-gradient(circle at 80% 20%,#7aab8a12 0%,#0000 40%);position:fixed;inset:0}header{z-index:1;align-items:baseline;gap:.75rem;padding:1.2rem 2rem .4rem;display:flex;position:relative}.logo{letter-spacing:-.03em;font-size:1.6rem;font-weight:900}.logo span{color:var(--amber)}.tagline{color:var(--muted);font-family:Playfair Display,serif;font-size:.88rem;font-style:italic}main{z-index:1;flex:1;max-width:1100px;margin:0 auto;padding:.5rem 1.5rem 2rem;position:relative}footer{text-align:center;color:var(--muted);border-top:1px solid var(--warm);z-index:1;background:#fdf6eecc;padding:1.2rem 2rem;font-size:.72rem;position:relative}.hero-text{text-align:center;margin-bottom:1rem}.hero-text h1{margin-bottom:.3rem;font-size:clamp(1.2rem,3vw,1.8rem);font-weight:900;line-height:1.4}.hero-text p{color:var(--muted);font-size:.85rem;line-height:1.7}.info-badge{color:#4a8a60;background:#7aab8a26;border-radius:100px;align-items:center;gap:.4rem;padding:.3rem .8rem;font-size:.7rem;font-weight:700;display:inline-flex}.section-title{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;font-size:.68rem;font-weight:700}.sub-label{color:var(--deep);margin-bottom:.5rem;font-size:.75rem;font-weight:700}.editor-layout{grid-template-columns:1fr 1fr;align-items:start;gap:1.5rem;display:grid}@media (width<=768px){.editor-layout{grid-template-columns:1fr}}.input-panel{flex-direction:column;gap:1rem;display:flex}.panel-section{background:#fff;border-radius:16px;padding:1.1rem;box-shadow:0 2px 12px #2d1f140f}.upload-zone{border:2px dashed var(--amber);cursor:pointer;background:#fdf6ee80;border-radius:12px;align-items:center;gap:1rem;padding:.9rem 1.1rem;transition:all .2s;display:flex}.upload-zone:hover{background:#fff8f4}.upload-zone .icon{flex-shrink:0;font-size:1.9rem;animation:3s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.upload-zone h2{margin-bottom:.1rem;font-size:.85rem;font-weight:700}.upload-zone p{color:var(--muted);font-size:.7rem}.loading-wrap{margin-top:.75rem;display:none}.loading-wrap.visible{display:block}.loading-bar{background:var(--warm);border-radius:100px;height:6px;margin-bottom:.35rem;overflow:hidden}.loading-bar-inner{background:linear-gradient(90deg, var(--amber), var(--green));border-radius:100px;height:100%;animation:1.5s ease-in-out infinite loadAnim}@keyframes loadAnim{0%{width:0;margin-left:0}50%{width:60%;margin-left:20%}to{width:0;margin-left:100%}}.loading-label{text-align:center;color:var(--muted);font-size:.75rem;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.slider-row{color:var(--muted);grid-template-columns:42px 1fr 36px;align-items:center;gap:.5rem;margin-bottom:.4rem;font-size:.72rem;font-weight:700;display:grid}.slider-row input[type=range]{width:100%;accent-color:var(--amber)}.slider-row span{color:var(--muted);text-align:right;font-size:.68rem}.reset-btn{background:var(--warm);color:var(--muted);cursor:pointer;border:none;border-radius:8px;margin-top:.3rem;padding:.3rem .8rem;font-family:Zen Kaku Gothic New,sans-serif;font-size:.72rem;font-weight:700;transition:all .2s}.reset-btn:hover{background:var(--amber);color:#fff}.bg-selector{flex-wrap:wrap;gap:.65rem;display:flex}.bg-thumb{cursor:pointer;border:3px solid #0000;border-radius:10px;width:90px;transition:all .2s;position:relative;overflow:hidden}.bg-thumb:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.bg-thumb.selected{border-color:var(--amber)}.bg-thumb canvas{width:100%;height:auto;display:block}.bg-thumb-label{color:#fff;text-align:center;background:#00000073;padding:3px 0;font-size:.58rem;font-weight:700}.bg-upload-thumb{border:2px dashed var(--amber);background:#fdf6ee80}.bg-upload-thumb:hover{background:#fff8f4}.bg-upload-inner{height:60px;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:.6rem;display:flex}.bg-upload-inner span:first-child{color:var(--amber);font-size:1.3rem}.form-grid{flex-direction:column;gap:.6rem;display:flex}.form-row{grid-template-columns:105px 1fr;align-items:center;gap:.4rem;display:grid}.form-row.full{grid-template-columns:1fr;gap:.25rem}.form-row>label{color:var(--deep);font-size:.75rem;font-weight:700}.form-row input[type=text],.form-row textarea,.form-row select{border:1.5px solid var(--warm);width:100%;color:var(--deep);background:var(--cream);resize:none;border-radius:8px;padding:.4rem .6rem;font-family:Zen Kaku Gothic New,sans-serif;font-size:.8rem;transition:border-color .2s}.form-row input[type=text]:focus,.form-row textarea:focus,.form-row select:focus{border-color:var(--amber);outline:none}.radio-group{flex-wrap:wrap;gap:.7rem;display:flex}.radio-label{cursor:pointer;align-items:center;gap:.22rem;font-size:.75rem;display:flex}.radio-label input{accent-color:var(--amber)}.anim-grid{grid-template-columns:repeat(3,1fr);gap:.45rem;display:grid}.anim-card{background:var(--cream);text-align:center;cursor:pointer;border:2px solid #0000;border-radius:10px;padding:.55rem .35rem;transition:all .2s}.anim-card:hover{border-color:var(--amber);transform:translateY(-1px)}.anim-card.selected{border-color:var(--amber);background:#fff8f4}.anim-card .e{margin-bottom:.12rem;font-size:1.4rem;display:block}.anim-card .n{font-size:.65rem;font-weight:700}.format-grid{grid-template-columns:repeat(4,1fr);gap:.5rem;display:grid}.format-card{border:2px solid var(--warm);text-align:center;cursor:pointer;background:var(--cream);border-radius:10px;padding:.6rem .3rem;transition:all .2s}.format-card:hover{border-color:var(--amber);transform:translateY(-1px)}.format-card.selected{border-color:var(--amber);background:#fff8f4}.fmt-icon{color:var(--amber);margin-bottom:.2rem;font-size:1.6rem;line-height:1}.fmt-45,.fmt-11,.fmt-916,.fmt-169{display:block}.fmt-45{font-size:1.4rem}.fmt-11{font-size:1.2rem}.fmt-916{font-size:1.6rem}.fmt-169{letter-spacing:-.05em;font-size:.9rem}.fmt-name{font-size:.75rem;font-weight:900}.fmt-desc{color:var(--muted);margin-top:.15rem;font-size:.58rem;line-height:1.3}.duration-row{align-items:center;gap:.7rem;margin-bottom:.7rem;font-size:.8rem;font-weight:700;display:flex}.duration-row select{border:1.5px solid var(--warm);background:var(--cream);cursor:pointer;border-radius:8px;padding:.3rem .55rem;font-family:Zen Kaku Gothic New,sans-serif;font-size:.8rem}.export-btn{cursor:pointer;border:none;border-radius:12px;width:100%;margin-bottom:.5rem;padding:.85rem;font-family:Zen Kaku Gothic New,sans-serif;font-size:.9rem;font-weight:700;transition:all .2s;display:block}.btn-video{background:var(--deep);color:var(--cream)}.btn-video:hover:not(:disabled){background:var(--amber);transform:translateY(-2px);box-shadow:0 6px 20px #e8956d4d}.btn-image{background:var(--green);color:#fff}.btn-image:hover:not(:disabled){opacity:.88;transform:translateY(-2px);box-shadow:0 6px 20px #7aab8a4d}.export-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none!important;transform:none!important}.record-progress{margin-top:.5rem}#recordBar{transition:width .1s linear}.preview-panel{position:sticky;top:1rem}.canvas-wrap{cursor:grab;border-radius:20px;overflow:hidden;box-shadow:0 12px 40px #2d1f1426}.canvas-wrap:active{cursor:grabbing}#previewCanvas{touch-action:none;width:100%;height:auto;display:block}.preview-note{color:var(--muted);text-align:center;margin-top:.45rem;font-size:.65rem}.hearts{pointer-events:none;z-index:100;position:fixed;inset:0}.heart{opacity:0;font-size:1.3rem;animation:2s ease-out forwards riseUp;position:absolute}@keyframes riseUp{0%{opacity:1;transform:translateY(0)scale(.5)}to{opacity:0;transform:translateY(-100px)scale(1.2)}}