:root{font-family:Avenir Next,Segoe UI,sans-serif;color:#26312c;background:#e6e9e6;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #617359;outline-offset:4px}header{height:76px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}header a{color:inherit;font-size:12px;text-decoration:none}header div{text-align:center}header span{font-size:9px;letter-spacing:.18em;color:#69786b}h1{font-family:Georgia,serif;font-size:23px;font-weight:400;margin:5px 0 0}header button,#show-ui{border:1px solid #74826e55;border-radius:4px;padding:8px 12px;background:#eff2ecb8;color:#54644f;font-size:11px}#frame-container{position:fixed;inset:76px 18px 108px;display:flex;align-items:center;justify-content:center}#frame{position:relative;overflow:hidden;background:#d9dfdc;box-shadow:0 5px 35px #253d2c13}#viewport,#reference-layer,#reference-layer img{position:absolute;inset:0;width:100%;height:100%}canvas{display:block}#reference-layer{pointer-events:none}#reference-layer img{object-fit:fill}#divider{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#fff;box-shadow:0 0 3px #0008;pointer-events:none}#divider span{position:absolute;top:12px;font-size:9px;letter-spacing:.1em;background:#233428b0;color:#fff;padding:5px 7px}#divider span:first-child{right:10px}#divider span:last-child{left:10px}#loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#f2f4eddc;border:1px solid #68776333;padding:18px 23px;max-width:90%;font-size:12px;text-align:center;line-height:1.5;border-radius:4px}footer{position:fixed;bottom:12px;left:12px;right:12px;display:flex;flex-direction:column;align-items:center;gap:9px}.controls{display:flex;gap:20px;padding:6px;background:#f3f5efd9;border:1px solid #69776327;border-radius:6px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.mode-controls,.views{display:flex;gap:3px}.views{border-left:1px solid #74826e33;padding-left:17px}.controls button{border:0;border-radius:3px;background:transparent;color:#53654f;padding:10px 13px;font-size:11px;white-space:nowrap}.controls button.active{background:#526849;color:#f1f4ec}#hint{font-size:10px;margin:0;color:#667860}#comparison-control{font-size:10px;color:#56694d;display:flex;align-items:center;gap:12px}#comparison-control[hidden]{display:none}#comparison{width:200px;accent-color:#526849}#show-ui{position:absolute;right:12px;bottom:12px}.ui-hidden header,.ui-hidden footer{display:none}.ui-hidden #frame-container{inset:0}body[data-mode=photo] #viewport{pointer-events:none}@media(max-width:720px){header{height:66px;padding:0 14px;gap:10px}header span{font-size:7px;letter-spacing:.1em}h1{font-size:17px}header a,header button{font-size:10px}#frame-container{inset:66px 0 135px}.controls{flex-direction:column;gap:4px;align-items:center;max-width:calc(100vw - 20px)}.views{padding-left:0;border-left:0}.controls button{font-size:10px;padding:9px 10px}footer{gap:7px;bottom:15px}#hint{font-size:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}