@layer components{.screen-preview-note{position:fixed;right:var(--space-8);bottom:var(--space-8);z-index:30;padding:var(--space-4) var(--space-8);border-radius:var(--radius-pill);background:var(--color-surface-raised);color:var(--color-ink-muted);box-shadow:var(--shadow-soft)}.loading-step{display:flex;gap:var(--space-8);text-align:center}.loading-step,.loading-step-tick{align-items:center;justify-content:center}.loading-step-tick{display:inline-flex;flex-shrink:0;width:var(--space-20);height:var(--space-20);border-radius:var(--radius-10);background:var(--color-peach);color:var(--color-coral)}.loading-step .spinner{flex-shrink:0}.progress-bar{height:var(--space-8);width:100%;overflow:hidden;border-radius:var(--radius-pill);background:var(--color-surface-sunk)}.progress-bar>span{display:block;height:100%;border-radius:inherit;background:var(--color-coral)}.segmented{display:flex;gap:var(--space-4);min-height:var(--space-48);width:100%;padding:var(--space-4);border-radius:var(--radius-pill);background:var(--color-surface-sunk)}.segmented>button{display:flex;align-items:center;justify-content:center;gap:var(--space-6);flex:1;min-width:0;padding:var(--space-8) var(--space-4);border-radius:inherit;color:var(--color-ink-muted)}.segmented>[aria-pressed=true]{color:var(--color-ink);background:var(--color-surface-raised);box-shadow:var(--shadow-soft)}.before-after{position:relative;width:100%;height:100%;min-height:300px;border-radius:var(--radius-22);overflow:hidden}.compare-side{position:absolute;inset:0}.compare-side img{object-fit:cover}.compare-before{clip-path:inset(0 calc(100% - var(--comparison-split)) 0 0)}.compare-divider{top:0;bottom:0;width:3px;transform:translateX(-50%)}.compare-divider,.compare-handle{position:absolute;left:var(--comparison-split);background:var(--color-surface-raised)}.compare-handle{top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:var(--space-48);height:var(--space-48);border-radius:var(--radius-pill);box-shadow:var(--shadow-lift)}.compare-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}.before-after:has(.compare-range:focus-visible){outline:2px solid var(--color-coral-deep);outline-offset:3px}.compare-after-tag,.compare-before-tag{position:absolute;bottom:var(--space-12);pointer-events:none}.compare-before-tag{left:var(--space-12)}.compare-open{pointer-events:auto;cursor:zoom-in}.compare-after-tag,.compare-favourite{right:var(--space-12)}.compare-favourite{position:absolute;top:var(--space-12);color:var(--color-coral)}.compare-favourite[aria-pressed=true] svg{fill:currentColor}.action-row{display:flex;align-items:center;gap:var(--space-12);width:100%;min-height:var(--space-56);padding:var(--space-12) var(--space-16);border-radius:var(--radius-20);background:var(--color-surface);text-align:left;white-space:normal}.action-row>svg{flex-shrink:0}.action-row-end{margin-left:auto;display:inline-flex;flex-shrink:0}.action-row-locked{color:var(--color-ink-muted)}.action-button:disabled,.action-row:disabled{opacity:.55;cursor:not-allowed}.action-button{flex-direction:column;gap:var(--space-6);width:78px;max-width:100%;white-space:normal;text-align:center}.action-button,.action-circle{display:flex;align-items:center}.action-circle{position:relative;justify-content:center;width:var(--space-56);height:var(--space-56);border-radius:var(--radius-pill);background:var(--color-surface-raised);box-shadow:var(--shadow-soft)}.action-button[aria-pressed=true] .action-circle{color:var(--color-coral)}.action-button[aria-pressed=true] .action-circle>svg{fill:currentColor}.action-button-locked .action-circle{background:var(--color-surface-sunk);box-shadow:none}.action-pip{position:absolute;top:-14px;right:-4px;display:flex;align-items:center;gap:var(--space-2);height:22px;padding-inline:var(--space-8);border-radius:var(--radius-pill);background:var(--color-coral);color:var(--color-on-coral);box-shadow:var(--shadow-ring-inner)}.action-button-locked .action-pip{width:var(--space-24);padding:0;justify-content:center;background:var(--color-ink)}@media (hover:hover){.action-row:hover{background:var(--color-surface-sunk)}.action-button:hover .action-circle,.segmented>button:hover{filter:brightness(.93)}}}