.wf{min-height:calc(100svh - 73px);padding:0 0 clamp(72px,9vw,128px)}.wf-wrap{flex-direction:column;display:flex}.wf-red,.wf-result[data-color=red]{--wine:radial-gradient(circle at 34% 30%, #a23a52 0%, #6e1a2e 48%, #3f0c19 100%)}.wf-white,.wf-result[data-color=white]{--wine:radial-gradient(circle at 34% 30%, #fbf2c6 0%, #e8d48a 50%, #c3a85a 100%)}.wf-rose,.wf-result[data-color=rose]{--wine:radial-gradient(circle at 34% 30%, #fbd3d0 0%, #ec9ea2 50%, #c96f7a 100%)}.wf-dot,.wf-swatch{background:var(--wine,transparent);border-radius:50%;flex:none;box-shadow:inset 0 0 0 3px #ffffff1a,0 0 0 1px #f2f0ea38}.wf-dot{width:22px;height:22px}.wf-intro{padding-top:clamp(48px,8vw,104px)}.wf-quiz{width:100%;max-width:820px;margin-top:clamp(32px,5vw,56px)}.wf-intro[hidden]+.wf-quiz{margin-top:clamp(24px,4vw,48px)}.wf-bar{justify-content:space-between;align-items:center;gap:16px;min-height:44px;display:flex}.wf-step{font-family:var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--muted-on-night);margin-left:auto;font-size:12px}.wf-ctl{min-height:44px;color:var(--cream);cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;padding:0;font-size:16px;transition:color .2s;display:inline-flex}.wf-ctl[hidden]{display:none}.wf-ctl:hover{color:var(--lilac)}.wf-back .arrow{transition:transform .25s;transform:rotate(180deg)}.wf-back:hover .arrow{transform:rotate(180deg)translate(4px)}.wf-progress{background:#f2f0ea29;height:1px;margin-top:8px}.wf-progress span{background:var(--lilac);transform-origin:0;height:2px;margin-top:-.5px;transition:transform .6s cubic-bezier(.2,.7,.2,1);display:block;transform:scaleX(0)}.wf-q-title{font-family:var(--display);color:var(--cream);margin:clamp(28px,4vw,48px) 0 clamp(20px,3vw,32px);font-size:clamp(30px,4.6vw,56px);line-height:1.06}.wf-q-title:focus,.wf-name:focus{outline:none}.wf-q-title.has-hint{margin-bottom:10px}.wf-q-hint{color:var(--muted-on-night);margin:0 0 clamp(20px,3vw,32px);font-size:16px;line-height:1.45}.wf-options{border-top:1px solid #f2f0ea29}.wf-options li{border-bottom:1px solid #f2f0ea29}.wf-option{width:100%;min-height:76px;color:var(--cream);text-align:left;cursor:pointer;background:0 0;border:0;align-items:center;gap:18px;padding:18px 8px;transition:background-color .25s;display:flex}.wf-option-text{flex-direction:column;flex:auto;gap:4px;min-width:0;display:flex}.wf-option-label{font-family:var(--display);font-size:clamp(24px,3vw,34px);line-height:1.12;transition:transform .25s}.wf-option-note{color:var(--muted-on-night);font-size:15px;line-height:1.45}.wf-option .arrow{color:var(--lilac);flex:none;transition:transform .25s}@media (hover:hover){.wf-option:hover{background:#f2f0ea0a}.wf-option:hover .wf-option-label{transform:translate(2px)}.wf-option:hover .arrow{transform:translate(6px)}}.wf-option:active{background:#f2f0ea14}.wf-option:focus-visible{outline:2px solid var(--lilac);outline-offset:-2px}.wf-q .wf-q-title,.wf-q .wf-q-hint,.wf-q .wf-option{animation:.45s cubic-bezier(.2,.7,.2,1) both wf-in-up}.wf-q[data-dir=forward] .wf-q-title,.wf-q[data-dir=forward] .wf-q-hint,.wf-q[data-dir=forward] .wf-option{animation-name:wf-in-forward}.wf-q[data-dir=back] .wf-q-title,.wf-q[data-dir=back] .wf-q-hint,.wf-q[data-dir=back] .wf-option{animation-name:wf-in-back}.wf-q .wf-option{animation-delay:calc(60ms + var(--i,0) * 45ms)}@keyframes wf-in-up{0%{opacity:0;transform:translateY(10px)}}@keyframes wf-in-forward{0%{opacity:0;transform:translate(16px)}}@keyframes wf-in-back{0%{opacity:0;transform:translate(-16px)}}.wf-result{gap:28px;margin-top:clamp(24px,4vw,48px);display:grid}.wf-result[hidden]{display:none}.wf-result-photo{aspect-ratio:3/2;background:var(--night-2);border-radius:4px;overflow:hidden}.wf-result-photo img{object-fit:cover;width:100%;height:100%}.wf-result-photo.has-bottle{aspect-ratio:4/5;background:#fff;position:relative}.wf-result-photo.has-bottle>picture{display:none}.wf-bottle{position:absolute;inset:6% 0}.wf-bottle[hidden]{display:none}.wf-bottle picture{height:100%;display:block}.wf-result-photo .wf-bottle img{object-fit:contain}@media (width<=559px){.wf-result-photo.has-bottle{aspect-ratio:1}}.wf-kicker{font-family:var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--lilac);align-items:center;gap:14px;font-size:12px;display:flex}.wf-swatch{width:34px;height:34px}.wf-name{font-family:var(--display);color:var(--cream);overflow-wrap:anywhere;margin-top:18px;font-size:clamp(40px,6vw,80px);line-height:1}.wf-line{letter-spacing:.08em;text-transform:uppercase;color:var(--muted-on-night);margin-top:12px;font-size:15px}.wf-note{max-width:34ch;font-family:var(--display);color:var(--cream);margin-top:24px;font-size:clamp(21px,2.2vw,26px);line-height:1.3}.wf-why{max-width:46ch;color:var(--muted-on-night);margin-top:14px;font-size:16px}.wf-inexact{max-width:46ch;color:var(--lilac);margin-top:14px;font-size:15px}.wf-actions{flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:32px;display:flex}.wf-restart{background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/0 1px no-repeat,linear-gradient(#f2f0ea47,#f2f0ea47) 0 calc(100% - 8px)/100% 1px no-repeat;transition:background-size .3s,color .2s}.wf-restart:hover{background-size:100% 1px,100% 1px}.wf-result.is-in .wf-result-photo img{animation:1.4s cubic-bezier(.2,.7,.2,1) both wf-settle}.wf-result.is-in .wf-swatch{animation:.9s cubic-bezier(.2,.7,.2,1) .2s both wf-pour}.wf-result.is-in .wf-name{animation:.8s cubic-bezier(.2,.7,.2,1) .25s both wf-rise}.wf-result.is-in :is(.wf-line,.wf-note,.wf-why,.wf-inexact,.wf-actions){animation:.6s ease-out both wf-in-up}.wf-result.is-in .wf-line{animation-delay:.45s}.wf-result.is-in .wf-note{animation-delay:.55s}.wf-result.is-in :is(.wf-why,.wf-inexact){animation-delay:.65s}.wf-result.is-in .wf-actions{animation-delay:.75s}@keyframes wf-settle{0%{opacity:0;transform:scale(1.06)}}@keyframes wf-pour{0%{opacity:0;transform:scale(.4)}}@keyframes wf-rise{0%{opacity:0;transform:translateY(.35em)}}.js .wf-list{display:none}.wf-list{flex-direction:column;align-items:flex-start;gap:40px;margin-top:clamp(40px,6vw,72px);display:flex}.wf-list-title{font-family:var(--display);font-size:clamp(28px,3.6vw,44px);line-height:1.1}.wf-list-group{align-self:stretch}.wf-list-group h3{font-family:var(--display);align-items:center;gap:12px;font-size:24px;display:flex}.wf-list-group ul{border-top:1px solid #f2f0ea29;margin-top:12px}.wf-list-group li{color:var(--muted-on-night);border-bottom:1px solid #f2f0ea29;flex-direction:column;gap:2px;padding:14px 0;font-size:16px;display:flex}.wf-list-group b{color:var(--cream);font-size:19px;font-weight:400}.wf-list-group small{color:var(--lilac);font-size:14px}@media (width>=900px){.wf-options-pair{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;display:grid}.wf-result{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(40px,5vw,72px)}.wf-result-photo{aspect-ratio:4/5}}@media (width<=559px){.wf-option{gap:14px;padding:16px 4px}.wf-actions .btn{width:100%}}