:root{--ink:#161513;--muted:#716d67;--paper:#f7f4ef;--white:#fff;--line:#ded8cf;--accent:#9a6548;--soft:#ece4da}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}
.topbar{height:76px;padding:0 max(24px,5vw);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-weight:600;letter-spacing:.02em}.brand-mark{width:36px;height:36px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font:italic 600 21px "Playfair Display"}
.privacy{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}.privacy span{width:7px;height:7px;background:#63866c;border-radius:50%}
main{width:min(1180px,calc(100% - 40px));margin:auto}.hero{text-align:center;padding:68px 20px 48px}.eyebrow{color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.22em;margin:0 0 14px}.hero h1{font:600 clamp(38px,5vw,64px)/1.05 "Playfair Display";max-width:750px;margin:0 auto}.hero h1 em{color:var(--accent)}.subhead{color:var(--muted);max-width:580px;margin:20px auto 0;line-height:1.65}
.studio{background:var(--white);border:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) 350px;min-height:560px;box-shadow:0 20px 55px rgba(52,42,32,.07)}
.preview-panel{background:#1e1d1b;min-height:560px;display:grid;place-items:center;position:relative;overflow:hidden}.empty-state{text-align:center;color:white}.empty-state h2{font:600 27px "Playfair Display";margin:20px 0 8px}.empty-state p{color:#aaa7a2;font-size:13px;margin:0 0 22px}.upload-icon{width:66px;height:66px;margin:auto;border:1px solid #5d5a55;border-radius:50%;display:grid;place-items:center}.upload-icon svg,.export svg{width:23px;fill:none;stroke:currentColor;stroke-width:1.5}
button,.download{font:600 13px "DM Sans";cursor:pointer;border:0}.primary{background:var(--accent);color:white;padding:13px 23px;transition:.2s}.primary:hover{background:#814f36}.secondary{background:white;color:var(--ink);padding:12px 18px;border:1px solid var(--line)}.full{width:100%}.controls{padding:30px}.step-heading{display:flex;gap:14px;align-items:start}.step-heading>span{font:600 13px "Playfair Display";color:var(--accent);padding-top:3px}.step-heading h2{font:600 21px "Playfair Display";margin:0 0 4px}.step-heading p{font-size:12px;color:var(--muted);margin:0}.controls>.secondary{margin-top:17px}.controls hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.logo-choice{margin-top:20px}.control-title{display:flex;justify-content:space-between;align-items:end}.control-title strong{font-size:12px}.control-title small{font-size:9px;color:var(--muted)}.logo-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.logo-option{display:flex;align-items:center;gap:9px;padding:7px;background:white;border:1px solid var(--line);color:var(--ink)}.logo-option.active{border-color:var(--accent);background:#fbf6f2}.logo-option>span:last-child{font-size:11px}.logo-swatch{width:38px;height:32px;display:grid;place-items:center;overflow:hidden}.logo-swatch.dark{background:#252422}.logo-swatch.light{background:#f1eee9}.logo-swatch img{width:28px;height:28px;object-fit:contain}
.position-grid{width:132px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:20px 0 28px}.position-grid button{height:39px;background:#f5f1eb;border:1px solid transparent;position:relative}.position-grid button:after{content:"";position:absolute;width:7px;height:7px;border:1px solid #978f86;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.position-grid button:hover,.position-grid button.active{border-color:var(--accent);background:#f8eee8}.position-grid button.active:after{background:var(--accent);border-color:var(--accent)}
.range-label{display:flex;justify-content:space-between;font-size:12px;font-weight:600;margin:17px 0 8px}.range-label output{color:var(--accent)}input[type=range]{appearance:none;width:100%;height:3px;background:var(--soft);accent-color:var(--accent)}input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent)}.export{display:flex;align-items:center;justify-content:center;gap:10px}.export:disabled{opacity:.45;cursor:not-allowed}
.format-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.format-row strong{display:block;font-size:12px}.format-row small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.format-row select{font:600 13px "DM Sans";color:var(--ink);background:white;border:1px solid var(--line);border-radius:0;padding:10px 28px 10px 12px}
.video-stage{position:relative;max-width:100%;max-height:560px;display:flex}.video-stage video{max-width:100%;max-height:560px;display:block}.video-stage img{position:absolute;width:20%;opacity:.9;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.hidden{display:none!important}.progress-wrap{margin-top:15px}.progress-track{height:4px;background:var(--soft)}.progress-track span{display:block;width:0;height:100%;background:var(--accent);transition:width .25s}.progress-wrap p{font-size:11px;color:var(--muted);text-align:center}
.result{margin:64px auto;background:white;border:1px solid var(--line);padding:40px;text-align:center}.result h2{font:600 35px "Playfair Display";margin:0 0 24px}.result video{display:block;max-width:100%;max-height:600px;margin:auto;background:#111}.result-actions{display:flex;justify-content:center;gap:10px;margin-top:24px}.download{text-decoration:none;display:inline-block}
footer{text-align:center;color:var(--muted);font-size:11px;letter-spacing:.05em;padding:45px 20px}
@media(max-width:800px){body{padding-bottom:env(safe-area-inset-bottom)}main{width:min(100% - 24px,600px)}.topbar{height:62px;padding:0 16px}.brand{font-size:14px}.studio{grid-template-columns:1fr}.preview-panel{min-height:300px}.video-stage,.video-stage video{max-height:65vh}.controls{padding:24px 20px}.hero{padding:42px 4px 30px}.hero h1{font-size:39px}.subhead{font-size:14px}.privacy{display:none}.position-grid{width:100%;grid-template-columns:repeat(3,1fr);gap:8px}.position-grid button{height:46px}.range-label{margin-top:23px}input[type=range]{height:5px}.result{padding:24px 12px;margin-top:35px}.result-actions{flex-direction:column}.result-actions>*{width:100%}.export{min-height:50px}.format-row select{min-height:44px;font-size:16px}}
@media(max-width:380px){.hero h1{font-size:34px}.controls{padding:22px 16px}.preview-panel{min-height:250px}}