:root{--ink:#183028;--paper:#fbfaf7;--ivory:#f2eee5;--line:#d8d1c5}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif}header{height:76px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}header a:first-child{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}header span{font:25px Georgia}header b{font-size:9px;letter-spacing:2px}header>a:last-child{color:inherit;text-decoration:none}.intro{padding:90px 6vw 55px;display:grid;grid-template-columns:1.15fr .85fr;gap:8vw}.intro p{font-size:10px;letter-spacing:2px;color:#88775f}.intro h1{margin:15px 0;font:clamp(48px,6vw,82px)/1 Georgia;letter-spacing:-3px}.intro div{align-self:end;color:#5e6b64;line-height:1.7}.workspace{padding:0 6vw 100px;display:grid;grid-template-columns:1.4fr .6fr;gap:25px}.stage{position:relative;min-height:650px;background:#1a2822;display:grid;place-items:center;overflow:hidden}.stage>button{border:0;background:none;color:#fff;display:grid;gap:14px;place-items:center;font-size:44px;cursor:pointer}.stage>button strong{font-size:18px}.stage>button small{font-size:11px;color:#b8c2bd}.canvas-stack{position:relative;width:100%;height:100%}.canvas-stack canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.canvas-stack #afterWrap{position:absolute;inset:0;clip-path:inset(0 45% 0 0)}#zone{position:absolute;border:1px dashed #fff9;border-radius:50%;pointer-events:none}#line{position:absolute;top:0;bottom:0;left:55%;width:1px;background:#fff;display:grid;place-items:center;color:#fff}#compare{position:absolute;left:5%;right:5%;bottom:18px;width:90%}aside{padding:28px;background:var(--ivory)}aside>p{color:#657169;font-size:12px;line-height:1.6}aside h2{font:29px Georgia}label{display:grid;gap:7px;margin:15px 0;font-size:11px}select,input[type=range]{width:100%}select{padding:11px;border:1px solid var(--line);background:#fff}.primary{display:inline-block;padding:14px 17px;border:0;background:var(--ink);color:#fff;text-decoration:none}.buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}.buttons button{padding:12px;border:1px solid #a89c8b;background:#fff}.note{padding:80px 6vw;background:#d7c8b2;display:grid;grid-template-columns:1fr 1fr;gap:8vw}.note h2{font:50px/1 Georgia}.note p{line-height:1.7}@media(max-width:900px){.intro,.workspace,.note{grid-template-columns:1fr}.stage{min-height:520px}}@media(max-width:600px){.intro{padding-top:60px}.intro h1{font-size:48px}.workspace{padding-inline:0}.stage{min-height:440px}.note{padding:65px 6vw}}