.viva-tool{padding-block:28px 48px}.viva-tool>.viva-container{max-width:1160px}.viva-tool-nav{display:flex;gap:28px;border-bottom:1px solid var(--viva-color-line);margin-bottom:24px}.viva-tool-nav a{position:relative;padding:0 0 14px;color:var(--viva-color-ink-soft);font-size:14px;text-decoration:none;min-height:38px}.viva-tool-nav a[aria-current]{color:var(--viva-color-ink);font-weight:600}.viva-tool-nav a[aria-current]::after{content:'';position:absolute;inset:auto 0 -1px;height:2px;background:var(--viva-color-accent)}.viva-tool :is(.viva-tryon__head,.viva-cmatch__head){gap:10px;max-width:800px;margin-bottom:24px}.viva-tool :is(.viva-tryon__title,.viva-cmatch__title){font-size:clamp(28px,3.2vw,42px);line-height:1.12;letter-spacing:-.025em}.viva-tool .viva-eyebrow{margin:0;font-size:11px;letter-spacing:.15em}.viva-tool :is(.viva-tryon__lede,.viva-cmatch__lede){font-size:15px;line-height:1.65;max-width:730px}.viva-tool .viva-button{font-size:14px;min-height:44px;padding:11px 18px}.viva-tool :is(a,button,label):focus-visible{outline:2px solid var(--viva-color-accent);outline-offset:4px}
.viva-tool .viva-tryon__flow{grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:24px}.viva-tool .viva-tryon__stage{min-width:0;position:sticky;top:24px}.viva-tool .viva-tryon__dropzone{aspect-ratio:4/5;min-height:320px;padding:24px;gap:16px;border:1px dashed var(--viva-color-strong-line);background:var(--viva-color-surface-muted)}.viva-tool .viva-tryon__dropzone-title{margin:0;font-size:25px;line-height:1.2}.viva-tool .viva-tryon__dropzone-copy{margin:0;max-width:260px;font-size:14px;line-height:1.6}.viva-tool .viva-tryon__suggest{border:1px solid var(--viva-color-line);border-radius:var(--viva-radius-panel);padding:24px;background:var(--viva-color-surface);gap:16px;min-width:0}.viva-tool .viva-tryon__suggest-status{font-size:13px;line-height:1.5}.viva-tool .viva-tryon__suggest-title{font-size:25px;line-height:1.2;letter-spacing:-.02em}.viva-tool .viva-tryon__picker{gap:12px}.viva-tryon__palette-filters{display:flex;flex-wrap:wrap;gap:6px}.viva-tryon__palette-filters button{font:inherit;font-size:12px;color:var(--viva-color-ink-soft);background:transparent;border:1px solid var(--viva-color-line);border-radius:999px;min-height:36px;padding:6px 12px;cursor:pointer}.viva-tryon__palette-filters button[aria-pressed=true]{color:var(--viva-color-ink);background:var(--viva-color-surface-muted);border-color:var(--viva-color-accent)}.viva-tryon__selected{margin:0;min-height:20px;font-size:12px;line-height:1.5;overflow-wrap:anywhere}.viva-tryon__selected>span{color:var(--viva-color-ink-soft)}.viva-tryon__selected strong{font-weight:500}.viva-tool .viva-tryon__suggest-list{max-width:none;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:4px;margin:0}.viva-tool .viva-tryon__suggest-list>li[hidden]{display:none}.viva-tool .viva-tryon__suggest-item{min-height:72px;padding:8px 2px;gap:7px}.viva-tool .viva-tryon__suggest-swatch{width:38px;height:38px}.viva-tool .viva-tryon__suggest-code{font-size:11px;letter-spacing:0;white-space:nowrap}.viva-tool .viva-tryon__types{border-top:1px solid var(--viva-color-line);padding-top:16px;margin:4px 0 0}.viva-tool .viva-tryon__types-label{font-size:12px;margin:0 0 9px}.viva-tool .viva-tryon__type{font-size:13px;min-height:38px;padding:8px 13px}.viva-tool .viva-tryon__suggest-actions{margin:0;gap:8px}.viva-tool .viva-tryon__suggest-help{font-size:12px;line-height:1.65;margin:0}.viva-tool .viva-tryon__notice{grid-column:1/-1}.viva-tool .viva-tryon__upload-btn{min-height:44px;justify-content:center;font-size:13px;padding:10px 12px}.viva-tool .viva-tryon__stage-actions{margin-top:12px}
.viva-tool .viva-cmatch__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:24px;align-items:stretch}.viva-tool .viva-cmatch__card{padding:28px;gap:18px;min-width:0}.viva-tool .viva-cmatch__step{width:auto;height:auto;justify-content:flex-start;border-radius:0;background:none;color:var(--viva-color-accent);font:600 11px var(--viva-font-body);letter-spacing:.1em;text-transform:uppercase}.viva-tool .viva-cmatch__card-title{margin:0;font-size:26px;line-height:1.2;letter-spacing:-.02em}.viva-tool :is(.viva-cmatch__card-copy,.viva-cmatch__flow-copy){font-size:14px;line-height:1.7}.viva-tool .viva-cmatch__card--upload{min-height:300px}.viva-tool .viva-cmatch__card--contact{gap:18px}.viva-tool .viva-cmatch__card--contact>.viva-button{justify-content:center;align-self:end}.viva-tool .viva-cmatch__colors-link{font-size:13px}.viva-tool .viva-cmatch__pick{gap:8px;margin-top:8px}.viva-tool .viva-cmatch__upload-btn{min-height:44px;font-size:13px}.viva-tool .viva-cmatch__disclaimer{font-size:12px;line-height:1.65}
@media(max-width:749px){.viva-tool{padding-block:20px 32px}.viva-tool-nav{gap:22px;margin-bottom:20px}.viva-tool-nav a{font-size:13px}.viva-tool :is(.viva-tryon__head,.viva-cmatch__head){margin-bottom:20px}.viva-tool .viva-tryon__flow,.viva-tool .viva-cmatch__grid{grid-template-columns:1fr;gap:16px}.viva-tool .viva-tryon__stage{position:static;max-width:none}.viva-tool .viva-tryon__dropzone{aspect-ratio:auto;min-height:260px;padding:24px 18px}.viva-tool .viva-tryon__preview{max-width:420px;margin-inline:auto}.viva-tool .viva-tryon__suggest,.viva-tool .viva-cmatch__card{padding:20px}.viva-tool .viva-tryon__suggest-list{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:2px}.viva-tool .viva-tryon__suggest-actions>.viva-button{flex:1 1 auto;justify-content:center}.viva-tool .viva-cmatch__card--upload{min-height:0}.viva-tool .viva-cmatch__card-title{font-size:24px}.viva-tool .viva-cmatch__work:has(.viva-cmatch__media:not([hidden])){grid-template-columns:1fr}}

.viva-tool :is(.viva-tryon__upload-btn,.viva-cmatch__upload-btn){position:relative}.viva-tool-file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0}.viva-tool :is(.viva-tryon__upload-btn,.viva-cmatch__upload-btn):focus-within{outline:2px solid var(--viva-color-accent);outline-offset:4px}