.planner-header{display:flex;justify-content:space-between;align-items:center;padding-block:28px;border-bottom:1px solid var(--line)}.planner-intro{padding:64px 0 38px;max-width:820px}.planner-intro h1{font-size:clamp(48px,6.5vw,88px);text-transform:uppercase;margin:16px 0 24px}.planner-intro>p:last-child{max-width:630px;color:#50584b}.planner-grid{display:grid;grid-template-columns:minmax(270px,.8fr) minmax(0,1.4fr);gap:34px;align-items:start}.planner-panel{background:#fff;padding:26px;margin-bottom:16px;border:1px solid var(--line);border-radius:4px}.planner-panel .eyebrow{margin-bottom:18px}.upload{display:flex;align-items:center;flex-direction:column;gap:9px;text-align:center;border:1px dashed #8c9a80;padding:24px 10px;background:#f3f5ef;cursor:pointer}.upload-icon{font-size:36px}.upload span:last-of-type,.small{font-size:12px;line-height:1.7;color:#586050}.small{margin-top:14px}.upload input{max-width:100%;font-size:12px}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}fieldset{border:0;padding:0;margin:0}.swatch{cursor:pointer;text-align:center;font-size:11px;position:relative}.swatch input{position:absolute;opacity:0}.swatch span{display:block;aspect-ratio:1;border-radius:50%;border:1px solid #0002;margin-bottom:5px}.swatch input:checked+span{outline:2px solid var(--ink);outline-offset:3px}.swatch input:focus-visible+span{outline:3px solid #526742;outline-offset:3px}.custom-color{display:flex;justify-content:space-between;align-items:center;margin-top:25px}.custom-color input{width:60px;height:38px;padding:2px}.selected-color{font-size:13px;font-weight:600;margin:12px 0 24px}.planner-panel select{display:block;width:100%;padding:12px;background:white;border:1px solid var(--line);margin-top:8px}.planner-panel .button{width:100%;margin-top:22px;justify-content:center}.button:disabled{opacity:.5;cursor:not-allowed}.preview-panel{position:sticky;top:24px;min-width:0}#empty-preview{position:relative;min-height:470px;overflow:hidden;background:#dee3d7}#empty-preview>img{width:100%;height:470px;object-fit:cover;display:block;opacity:.72}#empty-preview>div{position:absolute;inset:auto 0 0;padding:34px;background:linear-gradient(transparent,#f0f1e9 35%)}#empty-preview h2{font-size:46px;margin:16px 0}#empty-preview p{font-size:12px}.compare-stage{position:relative;isolation:isolate;overflow:hidden;background:#e8e9e3;aspect-ratio:3/2}.compare-stage img{position:absolute;width:100%;height:100%;object-fit:contain;inset:0}.tag{position:absolute;top:14px;background:#fffD;padding:5px 10px;font-size:12px}.before-tag{left:14px}.after-tag{right:14px}#slider-label{display:block;font-size:12px;padding:16px;background:white}#slider-label input{display:block;width:100%;accent-color:var(--sage);margin-top:12px}#result-actions{padding:20px;background:white;border:1px solid var(--line)}#result-actions .button{margin-top:20px;display:flex;justify-content:center}#progress{padding:24px;background:#e5ebdd;display:flex;gap:18px;align-items:center}#progress p{margin:0}.spinner{flex-shrink:0;width:24px;height:24px;border:3px solid #adb99f;border-top-color:#34482c;border-radius:50%;animation:spin 1s linear infinite}.disclaimer{padding:0 6px}.planner-bottom{padding:75px 0;max-width:660px}.planner-bottom h2{margin-bottom:20px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:800px){.planner-grid{grid-template-columns:1fr}.preview-panel{position:static;grid-row:1}#empty-preview,#empty-preview>img{min-height:0;height:280px}#empty-preview h2{font-size:32px;margin:8px 0}#empty-preview>div{padding:20px}.planner-intro{padding-top:34px}.planner-header>.text-link{font-size:11px;max-width:110px;text-align:right}.planner-panel{padding:22px}.swatches{grid-template-columns:repeat(4,1fr)}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}}
.compare-stage canvas{position:absolute;inset:0;width:100%;height:100%}#drawing{z-index:2;cursor:crosshair;touch-action:manipulation}.tag{z-index:3;pointer-events:none}.drawing-help{background:#fff;padding:22px}.drawing-help>p:not(.eyebrow){font-size:13px;margin-bottom:12px}.draw-tools{display:flex;gap:8px;flex-wrap:wrap}.draw-tools button{background:#f0f3ea;border:1px solid #9da990;border-radius:3px;padding:8px 12px;font-size:12px}.draw-tools button:disabled{opacity:.45}.edit-switch{display:flex;align-items:center;gap:10px;padding:14px;background:white;font-size:13px}#download{background:none;border:0;padding:0;cursor:pointer}