.vis-page{padding-block:calc(var(--header-h) + 2rem) 6rem}@media (min-width:1024px){.vis-page{padding-block:calc(var(--header-h) + 3rem) 6rem}}.vis-intro h1{max-width:18ch;margin-top:1.5rem}.vis-intro .lead{max-width:52ch;margin-top:1rem}.vis-placeholder{min-height:70vh}.vis{grid-template-columns:minmax(0,1fr);gap:2.5rem;margin-top:2.5rem;display:grid}@media (min-width:1024px){.vis{grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:start;gap:3.5rem}.vis-stage-col{top:calc(var(--header-h) + 1.5rem);position:sticky}}.vis-subjects{border:1px solid var(--color-navy-800);grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:-1rem;display:grid}@media (min-width:640px){.vis-subjects{grid-template-columns:repeat(2,auto);width:fit-content}}@media (min-width:1024px){.vis-subjects{grid-column:1/-1;margin-bottom:-2rem}}.vis-subject{display:block;position:relative}.vis-subject input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.vis-subject span{text-align:center;color:var(--text-strong);transition:background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);padding:.75rem 1.5rem;font-size:.9375rem;font-weight:500;display:block}.vis-subject input:checked+span{background:var(--color-navy-800);color:var(--color-cream-50)}.vis-subject input:not(:checked):hover+span{background:var(--color-paper-100)}.vis-subject input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}.vis-subject input:disabled{cursor:not-allowed}.vis-step{color:var(--text-muted);align-items:center;gap:.6rem;margin-bottom:.9rem;display:flex}.vis-step .vis-step-note{width:auto;height:auto;color:inherit;font-size:inherit;letter-spacing:.04em;text-transform:none;border:0;font-weight:400;display:inline}.vis-step-note:before{content:"·";margin-inline-end:.6rem}.vis-step span{border:1px solid var(--line-strong);width:1.6rem;height:1.6rem;color:var(--text-strong);letter-spacing:0;font-variant-numeric:lining-nums;place-items:center;font-size:.75rem;display:inline-grid}.vis-stage{background:var(--surface-alt);position:relative}.vis-stage[data-empty=true]{border:1px solid var(--line-strong)}.vis-photo{width:100%;height:auto;display:block}.vis-frame{position:relative}@media (min-width:1024px){.vis-stage{--stage-max-h:calc(100svh - var(--header-h) - 8rem)}.vis-frame{width:min(100%, calc(var(--stage-max-h) * var(--ratio,1.5)));margin-inline:auto}}.vis-expand{color:var(--text-strong);box-shadow:0 1px 0 var(--line);background:#fbf9f4eb;position:absolute;inset-block-start:.6rem;inset-inline-end:.6rem}.vis-expand:hover{background:var(--color-cream-50)}.vis-empty{text-align:center;align-content:center;justify-items:center;gap:1rem;min-height:22rem;padding:clamp(2.5rem,8vw,5rem) 1.5rem;display:grid}.vis-empty-icon{color:var(--text-muted);font-size:3rem}.vis-photo-buttons{flex-wrap:wrap;justify-content:center;gap:.6rem;display:flex}.vis-tips{max-width:40ch}.vis-drop{display:none}@media (pointer:fine){.vis-camera{display:none}.vis-drop{margin-top:-.5rem;display:block}}.vis-reading{background:var(--surface);padding:.75rem 1rem;position:absolute;inset-block-end:0;inset-inline:0}.vis-photo-bar,.vis-legend{margin-top:.75rem}.vis-legend{justify-content:space-between;gap:1rem;display:flex}.vis-progress{gap:.35rem;display:grid}.vis-stage .vis-progress{background:var(--surface);padding-top:1rem}@media (min-width:1024px){.vis-stage .vis-progress{background:#fbf9f4f5;width:min(26rem,100% - 2.5rem);margin-inline:auto;padding:1rem 1.25rem;position:absolute;inset-block-end:1.25rem;inset-inline:0;box-shadow:0 18px 48px #0a2a372e}}.vis-progress .bar{background:var(--color-sand-200);height:3px;display:block;overflow:hidden}.vis-progress .bar span{background:var(--color-navy-800);transform-origin:0;height:100%;transition:transform .25s linear;display:block}html[dir=rtl] .vis-progress .bar span{transform-origin:100%}@media (prefers-reduced-motion:reduce){.vis-progress .bar span{transition:none}}.vis-error{color:var(--error);font-size:var(--fs-small);gap:.5rem;margin-top:.75rem;display:flex}.vis-error svg{flex:none;margin-top:.2rem}.vis-samples{margin-top:1.5rem}.vis-samples ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:.75rem;display:grid}.vis-samples button{cursor:pointer;width:100%;font:inherit;color:var(--text-strong);text-align:start;background:0 0;border:0;gap:.45rem;padding:0;font-size:.875rem;display:grid}.vis-samples img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}.vis-samples button:hover img{outline:1px solid var(--text-strong);outline-offset:2px}.vis-samples button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.vis-recent+.vis-samples{margin-top:1.25rem}.vis-made{margin-top:1.5rem}.vis-made-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1rem;display:flex}.vis-made-head .label{color:var(--text-muted)}.vis-made-head .small{text-align:end}.vis-made ul{gap:.5rem;margin-top:.6rem;padding-block:.3rem;display:flex;overflow-x:auto}.vis-made li{flex:none;position:relative}.vis-made .look{cursor:pointer;outline-offset:2px;background:0 0;border:0;outline:2px solid #0000;padding:0;display:block;position:relative}.vis-made .look[aria-pressed=true]{outline-color:var(--color-navy-800)}.vis-made .look:focus-visible{outline-color:var(--focus)}.vis-made .look img{width:5.5rem;height:auto;display:block}.vis-made[data-picking] .look:not([aria-pressed=true]) img{opacity:.6}.vis-made .look .tick{border:2px solid var(--color-cream-50);width:1.5rem;height:1.5rem;color:var(--color-cream-50);background:#0a2a3759;border-radius:50%;place-items:center;font-size:.8125rem;display:grid;position:absolute;inset-block-start:.3rem;inset-inline-start:.3rem}.vis-made .look[aria-pressed=true] .tick{background:var(--color-navy-800)}.vis-made .remove{width:1.5rem;height:1.5rem;color:var(--color-cream-50);cursor:pointer;background:#0a2a37b3;border:0;place-items:center;padding:0;font-size:.75rem;display:grid;position:absolute;inset-block-start:.2rem;inset-inline-end:.2rem}.vis-made .remove:hover{background:var(--color-navy-900)}.vis-made .remove:focus-visible{outline:2px solid var(--focus);outline-offset:1px}.vis-made-foot{flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:.75rem;display:flex}.vis-made-foot .small{color:var(--text-strong)}.vis-made-foot .text-link{font-size:var(--fs-small)}.vis-compare{min-height:40px;font-size:var(--fs-small);gap:.45rem;padding:.55rem 1.1rem}.vis-compare svg{font-size:1.1rem}.vis-compare:disabled{opacity:.5;cursor:not-allowed}.vis-pair{width:min(100%, calc((100dvh - 9rem) / 2 * var(--ratio,1.5)));gap:1rem;display:grid}@media (min-aspect-ratio:4/3){.vis-pair{width:min(100%, calc((100dvh - 9rem) * var(--ratio,1.5) * 2 + 1rem));grid-template-columns:repeat(2,minmax(0,1fr))}}.vis-pair figure{margin:0}.vis-pair img{width:100%;height:auto;display:block}.vis-pair figcaption{font-size:var(--fs-small);color:var(--color-cream-50);flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;margin-top:.6rem;display:flex}.vis-pair figcaption .text-link{color:var(--color-cream-50)}.vis-lightbox{background:0 0;border:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;overflow:hidden}.vis-lightbox::backdrop{background:#0a2a37f2}.vis-lightbox .inner{place-items:center;width:100%;height:100%;padding:3.75rem 1rem 1.5rem;display:grid}.vis-lightbox-frame{width:min(100%, calc((100dvh - 5.25rem) * var(--ratio,1.5)))}.vis-lightbox-close{color:var(--color-cream-50);position:fixed;inset-block-start:.6rem;inset-inline-end:.6rem}.compare{-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.compare img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.compare .before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}html[dir=rtl] .compare .before{clip-path:inset(0 0 0 calc(100% - var(--split)))}.compare .divider{background:var(--color-cream-50);pointer-events:none;width:2px;margin-inline-start:-1px;position:absolute;inset-block:0}.compare .knob{border:1px solid var(--line-strong);background:var(--color-cream-50);width:2.75rem;height:2.75rem;color:var(--text-strong);place-items:center;font-size:1.25rem;display:grid;position:absolute;top:50%;left:50%;translate:-50% -50%}.compare .slider{opacity:0;cursor:ew-resize;width:100%;height:100%;margin:0;position:absolute;inset:0}.compare:has(.slider:focus-visible){outline:2px solid var(--focus);outline-offset:3px}.compare[data-demo=true] .knob{scale:1.06}.compare .hand{pointer-events:none;animation:vis-hand-in .45s var(--ease-out) both;display:block;position:absolute;top:50%;left:50%}.compare .hand.finger{margin-top:.75rem;translate:-28%}.compare .hand.pointer{margin-top:.1rem;margin-left:.35rem}.compare .hand svg{width:2.25rem;height:2.25rem;color:var(--color-navy-900);display:block}.compare .hand svg path{stroke:var(--color-cream-50);stroke-width:14px;stroke-linejoin:round;paint-order:stroke fill}@keyframes vis-hand-in{0%{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}.vis-measuring{pointer-events:none;background-color:#0a2a3724;background-image:repeating-linear-gradient(#0000 0 calc(12.5% - 1px),#fbf9f44d calc(12.5% - 1px) 12.5%);position:absolute;inset:0;overflow:hidden}.vis-measuring .line{background:var(--color-cream-50);opacity:.25;width:1px;animation:vis-wave 2.6s var(--ease-in-out) infinite both;position:absolute;inset-block:0}@keyframes vis-wave{0%,55%,to{opacity:.25}22%{opacity:.95}}.vis-measuring .tape{inset-inline:0;border-top:2px solid var(--color-cream-50);background:linear-gradient(90deg, var(--color-cream-50) 0 1px, transparent 1px) 0 0 / 10% 100% repeat-x, linear-gradient(90deg, var(--color-cream-50) 0 1px, transparent 1px) 0 0 / 2% 45% repeat-x;height:1.1rem;animation:vis-tape 4.8s var(--ease-in-out) infinite both;position:absolute;top:0}html[dir=rtl] .vis-measuring .tape{animation-name:vis-tape-rtl}@keyframes vis-tape{0%{clip-path:inset(0 100% 0 0)}35%,75%{clip-path:inset(0)}to{clip-path:inset(0 100% 0 0)}}@keyframes vis-tape-rtl{0%{clip-path:inset(0 0 0 100%)}35%,75%{clip-path:inset(0)}to{clip-path:inset(0 0 0 100%)}}@media (prefers-reduced-motion:reduce){.vis-measuring .line,.vis-measuring .tape,.compare .hand{animation:none}.vis-measuring .line{opacity:.4}}.vis-panel{grid-template-columns:minmax(0,1fr);align-content:start;gap:2.25rem;display:grid}.vis-result{border-bottom:1px solid var(--line);padding-bottom:2rem}.vis-actions{gap:.6rem;margin-top:1.25rem;display:grid}.vis-more-actions{font-size:var(--fs-small);flex-wrap:wrap;gap:.75rem 1.5rem;margin-top:1.25rem;display:flex}.vis-more-actions .text-link{align-items:center;gap:.4rem;display:inline-flex}.vis-price{color:var(--text);margin-top:.6rem}.vis-price .text-link{white-space:nowrap}.vis-colours{margin-top:1.5rem}.vis-colours .label{color:var(--text-muted)}.vis-colours ul{scrollbar-width:thin;gap:.6rem;margin-top:.6rem;padding-block:.25rem;display:flex;overflow-x:auto}.vis-colours li{flex:none}.vis-colours li button{cursor:pointer;width:4.25rem;font:inherit;color:var(--text);text-align:center;background:0 0;border:0;justify-items:center;gap:.35rem;padding:0;font-size:.75rem;line-height:1.3;display:grid}.vis-colours .thumb{background:var(--swatch,var(--color-paper-100));width:3.5rem;height:3.5rem;display:block;position:relative;overflow:hidden}.vis-colours .thumb img{object-fit:cover;width:100%;height:100%}.vis-colours .name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;display:block;overflow:hidden}.vis-colours li button:hover .thumb{outline:1px solid var(--text-strong);outline-offset:2px}.vis-colours li button:focus-visible .thumb{outline:2px solid var(--focus);outline-offset:2px}.vis-colours li button:disabled{cursor:not-allowed;opacity:.5}.vis-colours li button[aria-pressed=true] .thumb{outline:2px solid var(--color-navy-800);outline-offset:2px}.vis-colours li button[aria-pressed=true] .name{color:var(--text-strong);font-weight:600}.vis-colours .tick{border:2px solid var(--color-cream-50);background:var(--color-navy-800);width:1.25rem;height:1.25rem;color:var(--color-cream-50);border-radius:50%;place-items:center;font-size:.6875rem;display:grid;position:absolute;inset-block-start:.2rem;inset-inline-end:.2rem}.vis-colours>.small{margin-top:.35rem}.vis-colours-go{width:100%;margin-top:.75rem}.vis-colours-go:disabled{opacity:.45;cursor:not-allowed}.vis-email{background:var(--color-paper-100);gap:.6rem;margin-top:1.1rem;padding:1rem;display:grid}.vis-email label{font-size:var(--fs-small);color:var(--text);font-weight:500}.vis-email-row{gap:.5rem;display:flex}.vis-email input{border:1px solid var(--line-strong);background:var(--color-cream-50);min-width:0;min-height:48px;font:inherit;color:var(--text);flex:1;padding:0 .9rem}.vis-email input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}.vis-email .btn{flex:none}.vis-email .btn:disabled{opacity:.45;cursor:not-allowed}.vis-email .vis-error{margin-top:0}.vis-email-sent{background:var(--color-paper-100);color:var(--text-strong);margin-top:1.1rem;padding:.9rem 1rem}.vis-fabric{align-items:center;gap:.9rem;display:flex}.vis-fabric .thumb{background:var(--swatch,var(--color-paper-100));flex:none;width:4.5rem;height:4.5rem;overflow:hidden}.vis-fabric .thumb img{object-fit:cover;width:100%;height:100%}.vis-fabric .text{flex:1;gap:.15rem;min-width:0;display:grid}.vis-fabric .name{color:var(--text-strong);font-weight:500}.vis-fabric .meta{color:var(--text-muted);font-size:.875rem}.vis-fabric .text-link{font-size:var(--fs-small)}.vis-fabric .role{letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);font-size:.6875rem;font-weight:500}.vis-fabric .row-actions{flex:none;justify-items:end;gap:.3rem;display:grid}.vis-choose{width:100%}.vis-hint{margin-top:.75rem}.vis-rows{border:1px solid var(--line-strong);display:grid}.vis-rows>*+*{border-top:1px solid var(--line)}.vis-rows .vis-fabric{padding:.75rem}.vis-rows .vis-fabric .thumb{width:3.75rem;height:3.75rem}.vis-add{width:100%;font:inherit;color:var(--text-strong);text-align:start;cursor:pointer;background:0 0;border:0;align-items:center;gap:.5rem;padding:.95rem .75rem;font-weight:500;display:flex}.vis-add:hover{background:var(--color-paper-100)}.vis-add:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}.vis-add:disabled{opacity:.5;cursor:not-allowed}.vis-section>.vis-add{border:1px solid var(--line-strong);margin-top:.75rem}.vis-choices+.vis-rows{margin-top:.75rem}.vis-choices{gap:.5rem;display:grid}.vis-choice{display:block;position:relative}.vis-choice input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.vis-choice>span{border:1px solid var(--line-strong);background:var(--surface);color:var(--text-strong);transition:border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);padding:.8rem 1rem;font-size:.9375rem;display:block}.vis-choice input:hover+span{border-color:var(--color-navy-800)}.vis-choice input:checked+span{border-color:var(--color-navy-800);background:var(--color-paper-100);box-shadow:inset 0 0 0 1px var(--color-navy-800)}.vis-choice input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}.vis-options{border-block:1px solid var(--line);padding-block:.9rem}.vis-options summary{cursor:pointer;color:var(--text-strong);font-weight:500}.vis-options summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.vis-options[open] summary{margin-bottom:1rem}.vis-options-body{gap:1.1rem;display:grid}.vis-check{font-size:var(--fs-small);cursor:pointer;align-items:flex-start;gap:.6rem;line-height:1.45;display:flex}.vis-check input{accent-color:var(--color-navy-800);flex:none;margin:.2rem 0 0}.vis-drawn{border:0;gap:.55rem;margin:0;padding:0;display:grid}.vis-drawn legend{font-size:var(--fs-small);color:var(--text-muted);margin-bottom:.55rem;padding:0}.vis-styles{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;display:grid}@media (min-width:640px) and (max-width:1023px){.vis-styles{grid-template-columns:repeat(3,minmax(0,1fr))}}.vis-style{display:block;position:relative}.vis-style input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.vis-style>span{border:1px solid var(--line-strong);background:var(--surface);height:100%;transition:border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);gap:.2rem;padding:.85rem 1rem 1rem;display:grid}.vis-style .style-icon{width:2.5rem;height:2.5rem;color:var(--text-strong);margin-bottom:.25rem}.vis-style .name{color:var(--text-strong);font-weight:500}.vis-style .line{color:var(--text-muted);font-size:.8125rem;line-height:1.4}.vis-style input:hover+span{border-color:var(--color-navy-800)}.vis-style input:checked+span{border-color:var(--color-navy-800);background:var(--color-paper-100);box-shadow:inset 0 0 0 1px var(--color-navy-800)}.vis-style input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}.vis-style input:disabled+span{opacity:.6}.vis-go{gap:.75rem;display:grid}.vis-make{width:100%}.vis-make:disabled{opacity:.45;cursor:not-allowed}.vis-left{color:var(--text-strong);font-weight:500}.vis-banner{background:var(--color-paper-100);border-inline-start:2px solid var(--error);font-size:var(--fs-small);gap:.6rem;padding:1rem 1.1rem;display:flex}.vis-banner svg{color:var(--error);flex:none;margin-top:.15rem;font-size:1.2rem}.vis-banner .btn{margin-top:.75rem}.vis-picker{width:min(560px,100vw)}.vis-picker-body{padding:1rem 1.5rem calc(2rem + env(safe-area-inset-bottom));align-content:start;gap:1.25rem;display:grid;overflow-y:auto}.vis-search{border:1px solid var(--line-strong);background:var(--surface);align-items:center;gap:.6rem;padding-inline:1rem;display:flex}.vis-search svg{color:var(--text-muted);flex:none;font-size:1.2rem}.vis-search input{min-width:0;min-height:48px;font:inherit;color:var(--text-strong);background:0 0;border:0;outline:none;flex:1}.vis-search input::-webkit-search-cancel-button{display:none}.vis-search:focus-within{outline:2px solid var(--focus);outline-offset:1px}.vis-picker .fab-chips{margin-top:0}.vis-saved .label{color:var(--text-muted);margin-bottom:.6rem}.vis-swatches{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem .75rem;display:grid}.vis-swatches button{cursor:pointer;width:100%;font:inherit;text-align:start;background:0 0;border:0;gap:.3rem;padding:0;display:grid}.vis-swatches .thumb{aspect-ratio:1;background:var(--swatch,var(--color-paper-100));display:block;overflow:hidden}.vis-swatches .thumb img{object-fit:cover;width:100%;height:100%}.vis-swatches .name{color:var(--text-strong);font-size:.875rem;font-weight:500}.vis-swatches .meta{color:var(--text-muted);font-size:.8125rem}.vis-swatches button:hover .thumb{outline:1px solid var(--text-strong);outline-offset:2px}.vis-swatches button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.vis-more{justify-self:center}.vis-band .label{color:var(--text-muted);margin-bottom:1rem}.vis-band .btn{margin-top:1.75rem}