:root{--ink:#171814;--muted:#74776d;--line:#dedfd8;--cream:#f4f3ed;--lime:#d9ff43;--white:#fff}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--cream)}button,input,textarea{font:inherit}button{cursor:pointer}header{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 30px;position:relative;z-index:4}.logo{display:flex;align-items:center;gap:10px;font:700 20px Manrope}.logo>i{width:30px;height:30px;background:var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;gap:2px}.logo>i b{height:13px;width:3px;background:var(--lime);border-radius:3px;transform:rotate(24deg)}.logo>i b:nth-child(2){height:18px}.logo>span{font-size:9px;background:var(--lime);padding:2px 4px;border-radius:3px;margin-left:-6px}.trust{margin-left:40px;padding-left:26px;border-left:1px solid var(--line);font-size:11px;color:var(--muted)}.link{margin-left:auto;border:0;background:none;font-size:12px}.progress{height:66px;background:#fff;display:flex;justify-content:center;align-items:center;gap:12px;border-bottom:1px solid var(--line)}.progress div{display:flex;align-items:center;gap:8px;color:#aaaca4;font-size:11px}.progress div b{border:1px solid #cfd0c9;width:23px;height:23px;display:grid;place-items:center;border-radius:50%;font-size:10px}.progress div.active{color:var(--ink);font-weight:600}.progress div.active b{background:var(--ink);border-color:var(--ink);color:var(--lime)}.progress>i{width:42px;height:1px;background:var(--line)}.upload-view{min-height:calc(100vh - 136px);display:grid;grid-template-columns:1fr 1fr;align-items:center;max-width:1160px;margin:auto;padding:50px}.kicker{font-size:10px;letter-spacing:.16em;color:#777a70;font-weight:700;margin:0 0 10px}.hero-copy h1{font:600 50px/1.08 Manrope;letter-spacing:-.055em;margin:0 0 20px}.hero-copy h1 em{font-style:normal;color:#7b7e72}.hero-copy>p:not(.kicker){color:var(--muted);font-size:15px;line-height:1.7;max-width:510px;margin-bottom:26px}.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:var(--ink);color:#fff;border:0;border-radius:8px;padding:14px 18px;font-weight:600;font-size:13px;text-decoration:none;cursor:pointer}.cta span{color:var(--lime)}.cta.small{padding:11px 15px;gap:18px}.hero-copy small{display:block;font-size:10px;color:#989a92;margin-top:12px}.hero-visual{height:430px;position:relative}.before-card,.after-card{position:absolute;width:310px;height:350px;background:#fff;border-radius:8px;padding:9px;box-shadow:0 18px 50px rgba(30,30,20,.18);transform:rotate(-5deg);left:35px;top:30px}.after-card{left:210px;top:65px;transform:rotate(5deg)}.before-card>div,.after-card>div{height:100%;background:linear-gradient(160deg,#ddd7cb 0 35%,#8a6d52 36% 66%,#d7cfc0 67%);border-radius:5px}.after-card>div{background:linear-gradient(160deg,#e5dfd3 0 35%,#463126 36% 66%,#e0d8ca 67%)}.before-card span,.after-card span{position:absolute;top:18px;left:18px;background:#fff;padding:5px 8px;border-radius:4px;font-size:9px;font-weight:700}.spark{position:absolute;right:10px;top:40px;width:54px;height:54px;background:var(--lime);border-radius:50%;display:grid;place-items:center;font-size:22px}.studio{height:calc(100vh - 136px);grid-template-columns:minmax(0,1fr) 350px}.studio:not([hidden]){display:grid}.studio-main{display:grid;grid-template-rows:94px minmax(0,1fr) 64px;min-width:0}.studio-head{background:#fff;border-bottom:1px solid var(--line);padding:18px 25px;display:flex;align-items:center}.studio-head h2{font:600 21px Manrope;margin:0 0 2px}.studio-head p:last-child{margin:0;color:var(--muted);font-size:11px}.zoom{margin-left:auto;display:flex;border:1px solid var(--line);background:#fff;border-radius:7px;overflow:hidden}.zoom button{border:0;background:#fff;width:31px;height:30px}.zoom span{font-size:10px;width:45px;display:grid;place-items:center}.workarea{position:relative;overflow:auto;display:grid;place-items:center;background-color:#ebeae4;background-image:linear-gradient(45deg,#e4e3dc 25%,transparent 25%),linear-gradient(-45deg,#e4e3dc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e4e3dc 75%),linear-gradient(-45deg,transparent 75%,#e4e3dc 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}.tools{position:absolute;z-index:3;top:15px;left:15px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:5px;display:flex;gap:3px;box-shadow:0 5px 20px rgba(0,0,0,.08)}.tools button{border:0;background:#fff;border-radius:6px;padding:7px 9px;display:flex;align-items:center;gap:5px;font-size:10px}.tools button b{font-size:13px}.tools button.active{background:var(--ink);color:#fff}.tools button.active b{color:var(--lime)}.canvas-box{position:relative;line-height:0}.canvas-box canvas{display:block;box-shadow:0 15px 50px rgba(20,20,15,.2);cursor:crosshair}.smart-tip{position:absolute;top:14px;left:50%;transform:translateX(-50%);line-height:1;background:rgba(20,21,18,.88);color:#fff;border-radius:18px;padding:9px 14px;font-size:10px;white-space:nowrap}.smart-tip::first-letter{color:var(--lime)}.brush-ring{position:fixed;border:1px solid var(--lime);box-shadow:0 0 0 1px #171814;border-radius:50%;pointer-events:none;display:none;z-index:5}.studio-foot{display:flex;align-items:center;justify-content:space-between;background:#fff;border-top:1px solid var(--line);padding:0 20px}.studio-foot>div{font-size:11px;color:var(--muted)}.green-dot{display:inline-block;width:7px;height:7px;background:#9ac600;border-radius:50%;margin-right:8px}.secondary{background:#f1f0eb;border:0;border-radius:7px;padding:10px 13px;font-size:11px}aside{background:#fff;border-left:1px solid var(--line);padding:28px 23px;overflow:auto}aside h3{font:600 23px Manrope;margin:5px 0 8px}aside>div>p:not(.kicker){font-size:12px;color:var(--muted);line-height:1.6}.control{font-size:11px;margin-top:24px;display:block}.control output{float:right;color:var(--muted)}.control input{display:block;width:100%;margin-top:12px;accent-color:var(--ink)}.hint{display:flex;gap:10px;background:#f1f2e9;border-radius:8px;padding:12px;margin-top:24px}.hint>b{color:#7c980d}.hint p{font-size:10px;line-height:1.5;margin:0;color:var(--muted)}.hint strong{display:block;color:var(--ink)}.search{border:1px solid var(--line);height:38px;border-radius:7px;display:flex;align-items:center;gap:7px;padding:0 10px;margin-top:18px}.search input{border:0;outline:0;width:100%;font-size:11px}.chips{display:flex;gap:5px;margin:12px 0}.chips button{border:0;background:#f0efe9;border-radius:16px;padding:7px 9px;font-size:9px}.chips button.active{background:var(--ink);color:#fff}.swatches{display:grid;grid-template-columns:1fr 1fr;gap:9px}.swatch{border:1px solid transparent;background:#fff;padding:4px;border-radius:7px;text-align:left}.swatch.active{border-color:var(--ink)}.swatch i{display:block;height:72px;border-radius:4px}.swatch b,.swatch span{display:block;font-size:10px;margin-top:5px}.swatch span{font-size:9px;color:var(--muted);margin-top:1px}.result{position:fixed;inset:0;background:var(--cream);z-index:10;overflow:auto}.result-top{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px}.result-top>div{display:flex;gap:8px}.result-copy{text-align:center;padding:28px 0 20px}.result-copy h2{font:600 33px Manrope;letter-spacing:-.04em;margin:0}.result-copy p:last-child{font-size:12px;color:var(--muted)}.compare{position:relative;width:min(850px,86vw);height:min(54vw,520px);margin:auto;overflow:hidden;border-radius:10px;background:#222;box-shadow:0 18px 55px rgba(30,30,20,.2)}.compare canvas{position:absolute;width:100%;height:100%;object-fit:contain;background:#222}.after-clip{position:absolute;inset:0;overflow:hidden;width:50%}.after-clip canvas{width:min(850px,86vw);max-width:none}.divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;pointer-events:none}.divider i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;background:#fff;border-radius:50%;display:grid;place-items:center;font-style:normal;box-shadow:0 4px 16px #0005}.compare>input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}.lead{max-width:850px;margin:18px auto 35px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:14px 16px;display:flex;align-items:center}.lead div{display:flex;flex-direction:column;font-size:12px}.lead span{font-size:10px;color:var(--muted);margin-top:3px}.lead button{margin-left:auto}dialog{border:0;border-radius:12px;padding:30px;width:min(480px,92vw);box-shadow:0 25px 80px #0005}dialog::backdrop{background:#171814aa;backdrop-filter:blur(4px)}dialog h2{font:600 28px Manrope;margin:3px 0}dialog>p:not(.kicker){font-size:12px;color:var(--muted)}dialog .close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:22px}form{display:grid;gap:11px;margin-top:20px}form label{font-size:10px;font-weight:600}form input,form textarea{display:block;width:100%;border:1px solid var(--line);border-radius:7px;padding:10px;margin-top:5px;font-size:12px;outline:0}form textarea{height:70px;resize:vertical}.success{text-align:center;padding:35px}.success>b{display:grid;place-items:center;margin:auto;width:45px;height:45px;background:var(--lime);border-radius:50%;font-size:22px}
@media(max-width:800px){.upload-view{grid-template-columns:1fr;padding:35px}.hero-visual{display:none}.studio:not([hidden]){display:block;height:auto}.studio-main{height:72vh}aside{border-left:0}.progress span,.trust{display:none}.progress>i{width:25px}.tools button span{display:none}.hero-copy h1{font-size:38px}}