.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{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-step{color:var(--text-muted);align-items:center;gap:.6rem;margin-bottom:.9rem;display:flex}.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-made{margin-top:1.5rem}.vis-made .label{color:var(--text-muted)}.vis-made ul{gap:.5rem;margin-top:.6rem;display:flex;overflow-x:auto}.vis-made button{cursor:pointer;background:0 0;border:1px solid #0000;flex:none;padding:0}.vis-made button[aria-pressed=true]{border-color:var(--text-strong)}.vis-made img{width:5.5rem;height:auto;display:block}.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{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-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-choose{width:100%}.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}