.how-step:before,.about-feature:before{content:"";inset-inline:0;background:var(--outline-variant);transform-origin:0;height:1px;position:absolute;top:0}.how-step{--how-stagger:.16s}@media (max-width:860px){.how-step{--how-stagger:0s}}.rise-word{vertical-align:top;margin:-.1em 0 -.16em;padding:.1em 0 .16em;display:inline-block;overflow:clip}.rise-word>span{display:inline-block}.rank-card[data-rank=king]:after{content:"";background:linear-gradient(100deg,transparent 30%,var(--sheen)50%,transparent 70%);pointer-events:none;position:absolute;inset:0;transform:translate(-130%)}@property --sample-count{syntax:"<integer>";inherits:false;initial-value:0}@media (prefers-reduced-motion:no-preference){.hero-glint{background-image:linear-gradient(100deg,var(--primary)0% 40%,var(--glint)50%,var(--primary)60% 100%);-webkit-text-fill-color:transparent;animation:hero-glint calc(var(--duration-enter)*4)ease-in-out .52s backwards;background-position:100% 0;background-size:300% 100%;-webkit-background-clip:text;background-clip:text}.hero-settle{animation:hero-settle calc(var(--duration-enter)*7.5)var(--ease-emphasized)backwards}.hero-depth-chip{animation:hero-chip-in var(--duration-enter)var(--ease-emphasized).76s backwards}.sample-option[data-demo="1"]{--demo-at:1.32s}.sample-option[data-demo="2"]{--demo-at:1.92s}.sample-option[data-demo]{animation:sample-press var(--duration-state)var(--ease-emphasized)calc(var(--demo-at) - 80ms)backwards,sample-choose calc(var(--duration-enter)*1.25)var(--ease-spring)var(--demo-at)backwards}.sample-option[data-demo] .sample-box{animation:sample-box calc(var(--duration-enter)*1.25)var(--ease-spring)var(--demo-at)backwards}.sample-option[data-demo] .sample-box path{stroke-dasharray:24;animation:sample-tick var(--duration-enter)var(--ease-emphasized)calc(var(--demo-at) + .1s)backwards}.sample-count[data-demo]{color:#0000;display:inline-block;position:relative}.sample-count[data-demo]:after{--sample-count:var(--sample-final,2);counter-reset:sample-count var(--sample-count);content:counter(sample-count);color:var(--on-primary);text-align:center;animation:.7s linear 1.32s backwards sample-count;position:absolute;inset:0}.sample-confirm[data-demo]{animation:sample-ready calc(var(--duration-enter)*2)var(--ease-emphasized)2.32s backwards}.how-step[data-reveal-state=armed]:before{transform:scaleX(0)}.how-step[data-reveal-state=armed] .how-pennant,.how-step[data-reveal-state=armed] .how-text{opacity:0}.how-step[data-reveal-state=in]:before{animation:reveal-rule calc(var(--duration-enter)*2)var(--ease-emphasized)calc(var(--reveal-i,0)*var(--how-stagger))backwards}.how-step[data-reveal-state=in] .how-pennant{transform-origin:50% 0;animation:pennant-drop calc(var(--duration-enter)*4)linear calc(var(--reveal-i,0)*var(--how-stagger) + .14s)backwards}.how-step[data-reveal-state=in] .how-text{animation:reveal-fade calc(var(--duration-enter)*1.5)var(--ease-emphasized)calc(var(--reveal-i,0)*var(--how-stagger) + .44s)backwards}[data-reveal-state=in] .rank-card{animation:rank-climb calc(var(--duration-enter)*8)var(--ease-emphasized)var(--climb-delay,0s)backwards}[data-reveal-state=in] .rank-card .rank-muted{animation:rank-climb-muted calc(var(--duration-enter)*8)var(--ease-emphasized)var(--climb-delay,0s)backwards}[data-reveal-state=in] .rank-card [data-slot=rank-emblem]{animation:rank-climb-emblem calc(var(--duration-enter)*8)var(--ease-emphasized)var(--climb-delay,0s)backwards,rank-seal calc(var(--duration-enter)*2)var(--ease-spring)var(--climb-delay,0s)backwards}[data-reveal-state=in] .rank-card [data-slot=rank-emblem] svg{animation:rank-seal-icon calc(var(--duration-enter)*2)var(--ease-spring)var(--climb-delay,0s)backwards}[data-reveal-state=in] .rank-card[data-rank=king]:after{animation:rank-sheen calc(var(--duration-enter)*3)var(--ease-emphasized)calc(var(--climb-delay,0s) + .18s)backwards}.topics-ink[data-reveal-state=armed] svg *{stroke-dasharray:100;stroke-dashoffset:100px}.topics-ink[data-reveal-state=in] svg *{stroke-dasharray:100;animation:ink-draw calc(var(--duration-enter)*3)var(--ease-emphasized)calc(80ms + var(--reveal-i,0)*70ms)backwards}[data-reveal-state=armed] .rise-word>span{transform:translateY(115%)}[data-reveal-state=in] .rise-word>span{animation:word-rise calc(var(--duration-enter)*2)var(--ease-emphasized)calc(.16s + var(--word-i,0)*45ms)backwards}[data-reveal-state=armed] .about-copy,[data-reveal-state=armed] .about-feature>*{opacity:0}[data-reveal-state=armed] .about-feature:before{transform:scaleX(0)}[data-reveal-state=in] .about-copy{animation:reveal-fade calc(var(--duration-enter)*1.5)var(--ease-emphasized)calc(.56s + var(--reveal-i,0)*80ms)backwards}[data-reveal-state=in] .about-feature:before{animation:reveal-rule calc(var(--duration-enter)*2)var(--ease-emphasized)calc(.32s + var(--reveal-i,0)*90ms)backwards}[data-reveal-state=in] .about-feature>*{animation:reveal-fade calc(var(--duration-enter)*1.5)var(--ease-emphasized)calc(.5s + var(--reveal-i,0)*90ms)backwards}}@media (prefers-reduced-motion:no-preference) and (min-width:861px){@supports (animation-timeline:scroll()){.hero-depth-banner{animation:linear both hero-depth-banner;animation-timeline:scroll();animation-range:0 700px}.hero-depth-scene{animation:linear both hero-depth-scene;animation-timeline:scroll();animation-range:0 700px}.hero-depth-card{animation:linear both hero-depth-card;animation-timeline:scroll();animation-range:0 700px}.hero-depth-chip{animation:hero-depth-chip linear both,hero-chip-in var(--duration-enter)var(--ease-emphasized).76s backwards;animation-timeline:scroll(),auto;animation-range:0 220px,normal}}}@keyframes hero-glint{0%{background-position:100% 0}to{background-position:0 0}}@keyframes hero-settle{0%{transform:scale(1.08)}}@keyframes hero-depth-banner{0%{transform:translateY(0)}to{transform:translateY(150px)}}@keyframes hero-depth-scene{0%{transform:scale(1)translateY(0)}to{transform:scale(1.16)translateY(6%)}}@keyframes hero-depth-card{0%{transform:translateY(0)rotate(0)}to{transform:translateY(-120px)rotate(-2.5deg)}}@keyframes hero-chip-in{0%{opacity:0;transform:translateY(-6px)}}@keyframes hero-depth-chip{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}@keyframes sample-press{40%{transform:scale(.97)}}@keyframes sample-choose{0%{border-radius:var(--radius-sm);background-color:var(--surface-low);color:var(--on-surface);font-weight:400}}@keyframes sample-box{0%{color:#0000;box-shadow:inset 0 0 0 2px var(--outline);background-color:#0000;border-radius:5px}}@keyframes sample-tick{0%{stroke-dashoffset:-24px}}@keyframes sample-count{0%,13.9%{--sample-count:0;transform:none}14%{--sample-count:1;opacity:.4;transform:translateY(35%)}24%,85.9%{--sample-count:1;opacity:1;transform:none}86%{--sample-count:2;opacity:.4;transform:translateY(35%)}96%,to{--sample-count:2;opacity:1;transform:none}}@keyframes sample-ready{40%{box-shadow:0 0 0 6px color-mix(in srgb,var(--primary)22%,transparent);transform:scale(1.06)}to{box-shadow:0 0 0 12px color-mix(in srgb,var(--primary)0%,transparent)}}@keyframes reveal-rule{0%{transform:scaleX(0)}}@keyframes reveal-fade{0%{opacity:0;transform:translateY(10px)}}@keyframes word-rise{0%{transform:translateY(115%)}}@keyframes ink-draw{0%{stroke-dashoffset:100px}to{stroke-dashoffset:0}}@keyframes pennant-drop{0%{opacity:0;animation-timing-function:ease-in;transform:translateY(-64px)rotate(-14deg)}8%{opacity:1}26%{animation-timing-function:ease-in-out;transform:translateY(0)rotate(-14deg)}44%{animation-timing-function:ease-in-out;transform:translateY(0)rotate(8deg)}60%{animation-timing-function:ease-in-out;transform:translateY(0)rotate(-4.4deg)}74%{animation-timing-function:ease-in-out;transform:translateY(0)rotate(2.2deg)}87%{animation-timing-function:ease-in-out;transform:translateY(0)rotate(-.9deg)}to{opacity:1;transform:translateY(0)rotate(0)}}@keyframes rank-climb{0%,to{background-color:var(--surface-low);color:var(--on-surface)}10%,78%{background-color:var(--rank-bg);color:var(--rank-fg)}}@keyframes rank-climb-muted{0%,to{color:var(--on-surface-variant)}10%,78%{color:color-mix(in srgb,var(--rank-fg)80%,transparent)}}@keyframes rank-climb-emblem{0%,to{background-color:var(--rank-bg);color:var(--rank-fg)}10%,78%{background-color:var(--rank-fg);color:var(--rank-bg)}}@keyframes rank-seal{45%{transform:scale(1.14)rotate(18deg)}}@keyframes rank-seal-icon{45%{transform:rotate(-18deg)}}@keyframes rank-sheen{0%{transform:translate(-130%)}to{transform:translate(130%)}}