:where([data-product="v11"]) .v11-weight { display: flex; align-items: center; gap: 1.75rem; }
:where([data-product="v11"]) .v11-weight .wnum { font-size: 7rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #fff; }
:where([data-product="v11"]) .v11-weight .wnum small { font-size: 2.5rem; margin-left: .25rem; }
:where([data-product="v11"]) .v11-weight .body { color: rgba(255,255,255,.85); font-size: 1.5rem; line-height: 1.5; }
:where([data-product="v11"]) .v11-wear .v11-wfine { color: rgba(255,255,255,.6); }
:where([data-product="v11"]) .v11-wear .lead { color: rgba(255,255,255,.85); }
@media (orientation: portrait) {
:where([data-product="v11"]) .chap.v11-wear .shade-l { background: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.75) 38%, rgba(0,0,0,0) 58%); }
:where([data-product="v11"]) .media-col .color-stage { max-width: none; }
}
:where([data-product="v11"]) .daily .dfact { display: flex; flex-direction: column; gap: 1rem; animation: v11-dfact-in .5s var(--ease-out); }
:where([data-product="v11"]) .daily .dfact[hidden] { display: none; }
:where([data-product="v11"]) .daily .dnum { font-size: 8rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #27324a; }
:where([data-product="v11"]) .daily .dnum small { font-size: 2rem; font-weight: 600; margin-left: .75rem; letter-spacing: 0; color: var(--ink-2); }
@keyframes v11-dfact-in { from { opacity: 0; transform: translateY(1rem); } }
:where([data-product="v11"]) .daily .copy-col { max-width: 52rem; }
:where([data-product="v11"]) .daily .dfacts { display: grid; min-height: 22rem; align-content: start; }
:where([data-product="v11"]) .dstage { position: relative; width: min(100%, 48rem); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--bg-2); }
:where([data-product="v11"]) .dstage img { position: relative; z-index: 1; width: 82%; mix-blend-mode: multiply; }
:where([data-product="v11"]) .dwave, :where([data-product="v11"]) .drops { position: absolute; inset: 0; pointer-events: none; transition: opacity .5s; }
:where([data-product="v11"]) .dwave i { position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 1; margin: -20% 0 0 -20%; border-radius: 50%; border: .3rem solid rgba(58,109,240,.45); animation: v11-dwave 2.7s var(--ease-out) infinite; opacity: 0; }
:where([data-product="v11"]) .dwave i:nth-child(2) { animation-delay: .9s; }
:where([data-product="v11"]) .dwave i:nth-child(3) { animation-delay: 1.8s; }
@keyframes v11-dwave { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
:where([data-product="v11"]) .drops { z-index: 2; opacity: 0; }
:where([data-product="v11"]) .drops i { position: absolute; top: -8%; width: calc(2.2rem * var(--s)); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff 0 18%, rgba(255,255,255,.35) 30%, rgba(120,150,200,.25) 70%, rgba(60,80,120,.45) 100%); box-shadow: inset 0 -.2rem .4rem rgba(40,60,100,.25); animation: v11-drop 2.4s linear infinite; }
@keyframes v11-drop { from { transform: translateY(0); } to { transform: translateY(54rem); } }
:where([data-product="v11"]) .dstage[data-d="sweat"] .dwave { opacity: 0; }
:where([data-product="v11"]) .dstage[data-d="sweat"] .drops { opacity: 1; }
@media (orientation: portrait) {
:where([data-product="v11"]) .daily .dnum { font-size: 6.5rem; }
:where([data-product="v11"]) .dstage { width: min(100%, 52rem); }
}
:where([data-product="v11"]) .swatches { display: flex; gap: 1.5rem; align-items: center; }
:where([data-product="v11"]) .swatch { display: flex; flex-direction: column; align-items: center; gap: .75rem; font-size: 1.25rem; font-weight: 600; min-width: 6rem; min-height: 6rem; }
:where([data-product="v11"]) .swatch i { width: 4.5rem; height: 4.5rem; border-radius: 50%; outline: .2rem solid transparent; outline-offset: .25rem; transition: outline-color .25s; }
:where([data-product="v11"]) .swatch[aria-pressed="true"] i { outline-color: var(--ink); }
:where([data-product="v11"]) .dark .swatch[aria-pressed="true"] i { outline-color: #fff; }
:where([data-product="v11"]) .color-stage { position: relative; width: 100%; max-width: 50rem; aspect-ratio: 2 / 1; }
:where([data-product="v11"]) .color-stage img { position: absolute; top: 0; height: 100%; width: 50%; object-fit: contain; border-radius: var(--radius-l); transition: opacity .6s var(--ease); background: #fff; }
:where([data-product="v11"]) .color-stage img:nth-child(2n) { left: 50%; }
:where([data-product="v11"]) .color-stage img.hide { opacity: 0; }
@media (orientation: portrait) {
}
:where([data-product="v11"]) .span-demo { --bud: .2361; width: 100%; max-width: 52rem; display: grid; gap: 2.5rem; }
:where([data-product="v11"]) .span-bar { position: relative; height: 4.5rem; border-radius: 2.25rem; overflow: hidden; }
:where([data-product="v11"]) .span-bar i { position: absolute; inset: 0; border-radius: inherit; transform-origin: left; }
:where([data-product="v11"]) .span-bar .sb-bud { background: linear-gradient(90deg, #a8935f, #c9b48a); transition: transform .7s var(--ease-out); }
:where([data-product="v11"]) .span-bar .sb-case { background: #fff; transform: scaleX(0); opacity: 0; transition: transform 1.3s var(--ease-out), opacity .2s; }
:where([data-product="v11"]) .zoomed .span-bar .sb-bud { transform: scaleX(var(--bud)); }
:where([data-product="v11"]) .revealed .span-bar .sb-case { transform: scaleX(1); opacity: 1; }
:where([data-product="v11"]) .span-axis { position: relative; height: 2.5rem; font-size: 1.5rem; color: var(--dark-ink-2); font-variant-numeric: tabular-nums; }
:where([data-product="v11"]) .span-axis > * { position: absolute; top: 0; white-space: nowrap; }
:where([data-product="v11"]) .span-axis .ax-0 { left: 0; }
:where([data-product="v11"]) .span-axis .ax-bud { left: 100%; transform: translateX(-100%); color: #c9b48a; transition: left .7s var(--ease-out), transform .7s var(--ease-out); }
:where([data-product="v11"]) .span-axis .ax-case { right: 0; color: #fff; opacity: 0; visibility: hidden; transition: opacity .4s .9s, visibility 0s 1.3s; }
:where([data-product="v11"]) .zoomed .span-axis .ax-bud { left: calc(var(--bud) * 100%); transform: translateX(-50%); }
:where([data-product="v11"]) .revealed .span-axis .ax-case { opacity: 1; visibility: visible; transition: opacity .4s .9s, visibility 0s .9s; }
@media (orientation: portrait) {
:where([data-product="v11"]) .span-demo { max-width: none; }
}
:where([data-product="v11"]) .bignum { --num-grad: linear-gradient(100deg, #f4ead6 0%, #c9b48a 100%); }