:root{--bg:#f6f2ec;--fg:#1c1a17;--muted:#6b645a;--card:#fffdf9;--line:#e3dbcf;--accent:#b5562b;--accent-fg:#fff;--error:#b3261e;--radius:14px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#161412;--fg:#f1ebe2;--muted:#a39a8d;--card:#211e1a;--line:#3a342d;--accent:#e07a45}}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--bg);color:var(--fg);margin:0}body{min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);flex-direction:column;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex}.top{padding:14px 16px}.brand{align-items:center;gap:8px;font-size:18px;font-weight:700;display:flex}main{flex:1;width:100%;max-width:860px;margin:0 auto;padding:0 16px 24px}h1{margin:24px 0 8px;font-size:clamp(26px,6vw,40px);line-height:1.15}.lead{color:var(--muted);margin:0 0 24px;font-size:18px}.muted{color:var(--muted)}.actions,.toolbar,.row{flex-wrap:wrap;gap:10px;display:flex}.actions button{flex:200px;padding:16px;font-size:17px}button{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;border-radius:999px;padding:10px 16px}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:600}button:disabled{opacity:.5;cursor:default}.tips{color:var(--muted);margin-top:24px;padding-left:20px}.step[hidden]{display:none}#step-busy{text-align:center;padding:80px 0}.spinner{border:4px solid var(--line);border-top-color:var(--accent);border-radius:50%;width:44px;height:44px;margin:0 auto 16px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.compare{--pos:50%;border-radius:var(--radius);background:var(--card);aspect-ratio:4/3;width:100%;max-height:72dvh;margin:16px auto 8px;position:relative;overflow:hidden}.compare canvas,.before img{width:100%;height:100%;position:absolute;inset:0}.compare{width:min(100%, calc(72dvh * var(--ar,1.333)))}#paint{opacity:.55;pointer-events:none}.compare.painting{touch-action:none;cursor:crosshair;border-radius:0}.before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);position:absolute;inset:0}#slider{opacity:0;cursor:ew-resize;width:100%;height:100%;margin:0;position:absolute;inset:0}.compare:after{content:"";top:0;bottom:0;left:var(--pos);pointer-events:none;background:#fff;width:2px;position:absolute;box-shadow:0 0 0 1px #00000040}.tag{color:#fff;pointer-events:none;background:#0000008c;border-radius:999px;padding:2px 10px;font-size:13px;position:absolute;bottom:10px}.tag-l{left:10px}.tag-r{right:10px}.compare.touching .before,.compare.touching #slider,.compare.touching .tag,.compare.touching:after{display:none}.touch{flex-direction:column;gap:12px}.hint{margin:0}.seg{flex-wrap:wrap;gap:8px;display:flex}.seg label{border:1px solid var(--line);background:var(--card);cursor:pointer;border-radius:999px;padding:8px 14px}.seg label:has(input:checked){border-color:var(--accent)}.range{align-items:center;gap:12px;display:flex}.range input{accent-color:var(--accent);flex:1}.range[hidden],.warn[hidden]{display:none}.warn{color:var(--muted);margin:0;font-size:14px}.error{color:var(--error);background:color-mix(in srgb, var(--error) 10%, transparent);border-radius:10px;padding:10px 14px}.foot{text-align:center;padding:16px;font-size:14px}.foot a{color:var(--muted)}
