.whl{grid-template-columns:clamp(118px,13vw,190px) minmax(0,1fr);grid-template-areas:"art list""art note""art dots";align-items:center;gap:clamp(.9rem,2vw,1.5rem) clamp(1.4rem,3vw,2.6rem);display:grid;position:relative}.whl-art{aspect-ratio:1;border:1px solid var(--i-rule);grid-area:art;align-self:start;position:relative}.whl-art img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .62s var(--ease-in-out);position:absolute;inset:0}.whl-art img.is-on{opacity:1}.whl-list{grid-area:list}.whl-note{grid-area:note}.whl-dots{grid-area:dots}@media (max-width:620px){.whl{grid-template-columns:minmax(0,1fr);grid-template-areas:"art""list""note""dots"}.whl-art{max-width:190px}}.whl-list{height:clamp(150px,20vw,230px);position:relative;-webkit-mask-image:linear-gradient(#0000,#000 22% 78%,#0000);mask-image:linear-gradient(#0000,#000 22% 78%,#0000)}.whl-i{inset-inline:0;white-space:nowrap;letter-spacing:-.035em;transform-origin:12%;transition:transform .62s var(--ease), opacity .62s var(--ease), filter .62s var(--ease);will-change:transform, opacity, filter;margin-top:-.62em;font-size:clamp(1rem,.55rem + 1.55vw,2.05rem);font-weight:500;line-height:1.24;position:absolute;top:50%}.whl-i a{color:var(--i-3);transition:color var(--dur-fast) var(--ease);align-items:baseline;gap:clamp(.6rem,1.6vw,1.4rem);display:inline-flex}.whl-i.is-on a{color:var(--i-1)}.whl-arrow{color:var(--stamp);opacity:0;transition:opacity .42s var(--ease), transform .42s var(--ease);transform:translate(-.5em)}.whl-i.is-on .whl-arrow{opacity:1;transform:none}.whl-note{max-width:46ch;min-height:3.2em;animation:whl-in .52s var(--ease)}@keyframes whl-in{0%{opacity:0;transform:translateY(6px)}}.whl-dots{gap:.5rem;display:flex}.whl-dots button{background:var(--i-rule);cursor:pointer;width:26px;height:3px;transition:background var(--dur-fast) var(--ease);border:0;padding:0}.whl-dots button.is-on{background:var(--stamp)}@media (prefers-reduced-motion:reduce){.whl-i{filter:none!important}.whl-note{animation:none}}@media (hover:hover) and (pointer:fine){.whl-i.is-on a:hover{color:var(--stamp)}.whl-dots button:hover{background:var(--i-2)}}
.fi{width:clamp(46px,5vw,64px);color:var(--t-1);display:block}.fi svg{width:100%;height:auto;display:block}.fi .dr{stroke-dasharray:260;stroke-dashoffset:260px}.fi .gd{opacity:0}.fi .pt{transform-origin:32px 32px;transform:scale(0)}.fi.is-on .dr{animation:.9s cubic-bezier(.16,1,.3,1) forwards fi-draw}.fi.is-on .dr.d2{animation-delay:.18s}.fi.is-on .gd{animation:.6s .52s forwards fi-fade}.fi.is-on .pt{animation:.52s cubic-bezier(.34,1.4,.4,1) .7s forwards fi-drop}@keyframes fi-draw{to{stroke-dashoffset:0}}@keyframes fi-fade{to{opacity:.45}}@keyframes fi-drop{to{transform:scale(1)}}.fl:hover .fi{color:var(--stamp)}.fl:hover .fi.is-on .pt{animation:fi-pulse .62s var(--ease)}@keyframes fi-pulse{40%{transform:scale(1.55)}to{transform:scale(1)}}@media (prefers-reduced-motion:reduce){.fi .dr{stroke-dashoffset:0}.fi .gd{opacity:.45}.fi .pt{transform:none}.fi.is-on .dr,.fi.is-on .gd,.fi.is-on .pt,.fl:hover .fi.is-on .pt{animation:none}}
.ti{width:clamp(52px,5vw,68px);color:inherit;flex:none;display:block}.ti svg{width:100%;height:auto;display:block}.ti .dr{stroke-dasharray:260;stroke-dashoffset:260px}.ti .gd,.ti .f1,.ti .f2,.ti .st{opacity:0}.ti.is-on .dr{animation:.9s cubic-bezier(.16,1,.3,1) forwards ti-draw}.ti.is-on .dr.d2{animation-delay:.16s}.ti.is-on .f1{animation:.5s .38s forwards ti-dim}.ti.is-on .f2{animation:.5s .56s forwards ti-solid}.ti.is-on .gd{animation:.6s .52s forwards ti-guide}.ti.is-on .st{animation:.52s cubic-bezier(.34,1.4,.4,1) .72s forwards ti-solid}@keyframes ti-draw{to{stroke-dashoffset:0}}@keyframes ti-dim{to{opacity:.26}}@keyframes ti-solid{to{opacity:1}}@keyframes ti-guide{to{opacity:.4}}@media (prefers-reduced-motion:reduce){.ti .dr{stroke-dashoffset:0}.ti .gd{opacity:.4}.ti .f1{opacity:.26}.ti .f2,.ti .st{opacity:1}.ti.is-on .dr,.ti.is-on .gd,.ti.is-on .f1,.ti.is-on .f2,.ti.is-on .st{animation:none}}@media (hover:hover) and (pointer:fine){.tl-i:hover .ti{color:var(--stamp)}}