:root{color-scheme:light;--bg-start: #ffe4f1;--bg-mid: #fff0f8;--bg-end: #ece1ff;--panel: #fffbfe;--border: #ffc3e0;--text: #5c2a4d;--muted: #a06a91;--accent: #ff5da8;--accent-2: #b073ff;--gold: #ffb84d}*{box-sizing:border-box}body{margin:0;font-family:Quicksand,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);min-height:100vh;background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.75),transparent 38%),radial-gradient(circle at 88% 12%,rgba(176,115,255,.28),transparent 42%),radial-gradient(circle at 90% 85%,rgba(255,93,168,.24),transparent 45%),linear-gradient(135deg,var(--bg-start) 0%,var(--bg-mid) 45%,var(--bg-end) 100%);background-attachment:fixed}.deco-hearts{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}.deco-heart{position:absolute;opacity:.4;animation:floatHeart 10s ease-in-out infinite}.deco-heart.h1{top:8%;left:6%;font-size:2.1rem;animation-duration:10s}.deco-heart.h2{top:16%;right:8%;font-size:1.5rem;animation-duration:8s;animation-delay:1s}.deco-heart.h3{bottom:22%;left:4%;font-size:1.7rem;animation-duration:11s;animation-delay:2s}.deco-heart.h4{bottom:10%;right:9%;font-size:1.9rem;animation-duration:9.5s;animation-delay:.5s}.deco-heart.h5{top:48%;left:50%;font-size:1.3rem;animation-duration:12s;animation-delay:3s}@keyframes floatHeart{0%,to{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-18px) rotate(4deg)}}.app{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:24px 16px 48px;display:flex;flex-direction:column;gap:20px}.app-header{text-align:center}.app-header h1{margin:0 0 4px;font-family:Dancing Script,cursive;font-size:2.9rem;font-weight:700;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.subtitle{margin:0;color:var(--muted);font-size:.95rem;font-weight:500}.stage{position:relative;width:100%}.video-wrap{position:relative;width:100%;aspect-ratio:4 / 3;background:#2a1220;border-radius:24px;overflow:hidden;border:3px solid #fff;box-shadow:0 12px 32px #ff5da84d,0 0 0 6px var(--border)}#video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}#video.mirrored{transform:scaleX(-1)}#overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.capture-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .25s ease}.capture-flash.flash{opacity:.85;transition:none}.shutter-btn{position:absolute;left:50%;bottom:14px;transform:translate(-50%);width:60px;height:60px;border-radius:50%;padding:0;background:#fff;border:4px solid var(--accent);box-shadow:0 4px 16px #ff5da88c;cursor:pointer;transition:transform .1s ease,opacity .15s ease}.shutter-btn:hover:not(:disabled){filter:brightness(.97)}.shutter-btn:active:not(:disabled){transform:translate(-50%) scale(.9)}.shutter-btn:disabled{opacity:.35;cursor:not-allowed}.status{position:absolute;left:12px;bottom:12px;padding:8px 14px;background:#e0399be0;border-radius:14px;font-size:.85rem;font-weight:600;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);max-width:calc(100% - 24px)}.controls{background:var(--panel);border:2px solid var(--border);border-radius:24px;padding:18px 20px;display:flex;flex-direction:column;gap:16px;box-shadow:0 10px 28px #ff5da824}.control-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.control-row label{min-width:90px;color:var(--muted);font-size:.9rem;font-weight:600}.control-row label:before{content:"♥ ";color:var(--accent);font-size:.75em}#bandText{flex:1;min-width:180px;padding:10px 14px;border-radius:14px;border:2px solid var(--border);background:#fff;color:var(--text);font-family:inherit;font-size:.95rem}#bandText:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #ff5da833}.btn{padding:10px 20px;border-radius:999px;border:2px solid var(--border);font-family:inherit;font-size:.95rem;font-weight:700;cursor:pointer;transition:filter .15s ease,opacity .15s ease,transform .1s ease}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff;box-shadow:0 4px 14px #ff5da866}.btn-primary:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}.btn-secondary{background:#fff5fa;color:var(--accent)}.btn-secondary:hover:not(:disabled){background:#ffe6f2}input[type=range]{flex:1;min-width:140px;accent-color:var(--accent)}.range-value{min-width:44px;text-align:right;font-size:.85rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}.chip-row{display:flex;gap:8px;flex-wrap:wrap}.chip{padding:7px 14px;border-radius:999px;border:2px solid var(--border);background:#fff5fa;color:var(--text);font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:filter .1s ease,border-color .1s ease,background .1s ease}.chip:hover{background:#ffe6f2}.chip.selected{border-color:transparent;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 4px 14px #ff5da866}.swatches{display:flex;gap:12px;flex-wrap:wrap}.swatch{--swatch-color: #999;width:44px;height:44px;border-radius:50%;border:11px solid transparent;cursor:pointer;padding:0;background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(135deg,color-mix(in srgb,var(--swatch-color) 55%,white) 0%,var(--swatch-color) 45%,color-mix(in srgb,var(--swatch-color) 55%,black) 100%) border-box;box-shadow:0 3px 8px #5c2a4d2e;transition:transform .1s ease,box-shadow .1s ease}.swatch:hover{transform:scale(1.08)}.swatch.selected{box-shadow:0 0 0 3px var(--accent),0 4px 14px #ff5da866}.hint{margin:0;font-size:.82rem;color:var(--muted);line-height:1.5;background:#fff5fa;border-left:3px solid var(--accent);border-radius:10px;padding:10px 14px}.preview-section{background:var(--panel);border:2px solid var(--border);border-radius:24px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 28px #b073ff24}.preview-header h2{margin:0 0 2px;font-size:1.15rem;font-weight:700;color:var(--accent)}.preview-hint{margin:0;font-size:.82rem;color:var(--muted)}.preview-wrap{position:relative;width:100%;height:220px;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#ffe2f1,#e3d3ff);border:2px solid var(--border);cursor:grab}.preview-wrap:active{cursor:grabbing}#previewCanvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}