.guide{--guide-line:color-mix(in oklab, var(--color-line) 88%, var(--color-fg) 6%);--guide-card:color-mix(in oklab, var(--color-surface) 82%, var(--color-ink));isolation:isolate;margin-top:5rem;padding-block:4rem 1rem;position:relative}@media (min-width:40rem){.guide{margin-top:6rem;padding-top:5.5rem}}.guide-bg{z-index:-1;pointer-events:none;border-top:1px solid color-mix(in oklab, var(--color-line) 70%, transparent);background:radial-gradient(circle at 1px 1px, #ffffff13 1px, transparent 1.5px) 0 0 / 22px 22px, linear-gradient(180deg, color-mix(in oklab, var(--color-surface) 45%, var(--color-ink)), var(--color-ink) 30rem);position:absolute;inset:0 calc(50% - 50vw);overflow:hidden;-webkit-mask-image:radial-gradient(120% 75% at 50% 0,#000 35%,#0000 100%);mask-image:radial-gradient(120% 75% at 50% 0,#000 35%,#0000 100%)}.guide-vinyl{fill:none;stroke:#fff1;stroke-width:1px;width:44rem;height:44rem;position:absolute;top:-14rem;right:-16rem;-webkit-mask-image:radial-gradient(closest-side,#000 70%,#0000);mask-image:radial-gradient(closest-side,#000 70%,#0000)}.guide-vinyl-label{fill:#ffffff04;stroke:#ffffff0f}.guide-vinyl-hole{fill:var(--color-ink);stroke:#ffffff14}@media (min-width:64rem){.guide-vinyl{width:60rem;height:60rem;top:-20rem;right:-14rem}}.how-steps{border:1px solid var(--guide-line);background:linear-gradient(180deg, color-mix(in oklab, var(--guide-card) 100%, #fff 2%), var(--guide-card));border-radius:1.25rem;margin-top:2.25rem;display:grid;overflow:hidden;box-shadow:inset 0 1px #ffffff0a,0 24px 48px -32px #000000b3}@media (min-width:64rem){.how-steps{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:3rem}}.how-step{padding:1.25rem 1.25rem 1.6rem}.how-step+.how-step{border-top:1px solid var(--guide-line)}@media (min-width:40rem){.how-step{padding:1.75rem 1.75rem 2rem}}@media (min-width:64rem){.how-step+.how-step{border-top:0;border-left:1px solid var(--guide-line)}}.how-head{align-items:center;gap:.7rem;margin-top:1.4rem;display:flex}.how-num{font-variant-numeric:tabular-nums;width:1.6rem;height:1.6rem;color:var(--color-muted);box-shadow:inset 0 0 0 1px var(--guide-line);border-radius:999px;flex-shrink:0;place-items:center;font-size:.8rem;font-weight:600;display:grid}.how-pic{background:color-mix(in oklab, var(--color-ink) 75%, transparent);height:6rem;box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--color-line) 75%, transparent);border-radius:.75rem;align-items:flex-end;padding:1rem;display:flex;position:relative;overflow:hidden}@media (min-width:40rem){.how-pic{height:7rem}}.how-wave{align-items:center;gap:3px}.how-wave-bar{background:color-mix(in oklab, var(--color-fg) 15%, transparent);border-radius:999px;flex:1;min-width:0}.how-wave-bar[data-hot]{background:var(--color-accent-soft)}.how-slice{background:color-mix(in oklab, var(--color-accent) 12%, transparent);width:calc(6.67% - .1334rem + 6px);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--color-accent-soft) 70%, transparent);border-radius:.4rem;position:absolute;top:.6rem;bottom:.6rem;left:calc(10% + .8rem - 4px)}.how-clips{align-items:stretch;gap:4px}.how-clip{flex-direction:column;flex-basis:0;justify-content:flex-end;gap:.45rem;min-width:0;display:flex}.how-clip-track{background:color-mix(in oklab, var(--color-fg) 6%, transparent);height:2rem;box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--color-fg) 6%, transparent);border-radius:.35rem;position:relative;overflow:hidden}.how-clip-fill{background:color-mix(in oklab, var(--color-fg) 12%, transparent);position:absolute;inset:0}.how-clip:first-child .how-clip-fill{background:var(--color-accent-soft)}@media (min-width:40rem){.how-clip-track{height:2.5rem}}.how-clip-label{text-align:center;font-variant-numeric:tabular-nums;color:var(--color-muted);font-size:.7rem;font-weight:500}.how-score{gap:6px;padding-bottom:0}.how-score-bar{background:color-mix(in oklab, var(--tier-fg) 78%, var(--color-ink));border-radius:.3rem .3rem 0 0;flex:1}.ways-section{margin-top:5.5rem}@media (min-width:40rem){.ways-section{margin-top:7rem}}.ways{gap:.75rem;margin-top:2.25rem;display:grid}@media (min-width:40rem){.ways{grid-template-columns:repeat(2,minmax(0,1fr))}.way-daily,.way-party{grid-column:span 2}}@media (min-width:64rem){.ways{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(14.5rem,auto);gap:1rem;margin-top:3rem}.way-daily{grid-row:span 2}}.way{position:relative}.way-card{isolation:isolate;border:1px solid var(--guide-line);background:linear-gradient(180deg, color-mix(in oklab, var(--guide-card) 100%, #fff 2.5%), var(--guide-card) 55%);height:100%;transition:border-color .2s ease, translate .3s var(--ease-out-expo), box-shadow .3s ease;border-radius:1rem;flex-direction:column;padding:1.25rem;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff09,0 16px 36px -28px #000c}@media (min-width:64rem){.way-card{padding:1.5rem}}.way-card:hover{border-color:color-mix(in oklab, var(--guide-line) 65%, var(--color-muted));box-shadow:inset 0 1px #ffffff0d,0 20px 40px -26px #000000e6}.way-card:has(.way-link:focus-visible){outline:2px solid var(--color-accent-soft);outline-offset:3px}.way-link:after{content:"";z-index:1;border-radius:inherit;position:absolute;inset:0}.way-link:focus-visible{outline:none}.way-icon{width:2.25rem;height:2.25rem;color:var(--c);background:color-mix(in oklab, var(--c) 9%, var(--color-ink));box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c) 22%, var(--color-line));border-radius:.6rem;flex-shrink:0;place-items:center;display:grid}.way-icon svg{width:1.1rem;height:1.1rem}.way-tag{white-space:nowrap;min-height:1.6rem;color:var(--color-muted);box-shadow:inset 0 0 0 1px var(--guide-line);border-radius:999px;align-items:center;padding:.15rem .6rem;font-size:.75rem;font-weight:500;display:inline-flex}.way-title{margin-top:auto;padding-top:1.5rem;font-size:1.3rem;line-height:1.15}.way-body{max-width:44ch;margin-top:.45rem;font-size:.925rem}.way-daily .way-card{min-height:17rem}@media (min-width:40rem){.way-daily .way-card{min-height:20rem}}.way-daily .way-title{letter-spacing:-.04em;font-size:clamp(1.9rem,5vw,2.6rem);font-weight:800;line-height:1.02}.way-daily .way-body{max-width:38ch;font-size:1rem}.way-art{z-index:-1;pointer-events:none;position:absolute}.way-tiers{align-items:flex-end;gap:.3rem;height:2.25rem;display:flex;top:1.25rem;left:4.25rem}@media (min-width:40rem){.way-tiers{gap:.4rem;height:6rem;left:auto;right:8.5rem}}@media (min-width:64rem){.way-tiers{gap:.5rem;height:12.5rem;top:5rem;right:1.5rem}}.way-tier{width:clamp(.5rem,2.2vw,1.6rem);height:calc(28% + var(--i) * 18%);background:color-mix(in oklab, var(--tier-fg) 72%, var(--color-ink));border-radius:.25rem .25rem .1rem .1rem}.way-cards{width:5rem;height:2.5rem;top:1.2rem;left:4rem}@media (min-width:64rem){.way-cards{top:1.4rem;left:4.25rem}}.way-mcard{top:0;left:calc(var(--i) * 1.1rem);width:1.6rem;height:2.2rem;color:color-mix(in oklab, var(--c) 80%, transparent);background:var(--color-raised);box-shadow:inset 0 0 0 1px var(--guide-line), 0 4px 10px -4px #000000b3;rotate:calc(-10deg + var(--i) * 10deg);border-radius:.35rem;place-items:center;display:grid;position:absolute}.way-mcard svg{width:.75rem;height:.75rem}.way-crowd{grid-template-columns:repeat(4,1.1rem);gap:.45rem;display:none;top:1.5rem}@media (min-width:40rem){.way-crowd{display:grid;right:8.5rem}}@media (min-width:64rem){.way-crowd{top:auto;bottom:1.5rem;right:1.5rem}}.way-head{width:1.1rem;height:1.1rem;box-shadow:inset 0 0 0 1px var(--guide-line);border-radius:999px}.way-head:nth-child(-n+2){background:color-mix(in oklab, var(--c) 70%, var(--color-ink));box-shadow:none}@media (min-width:64rem){.way-party .way-body{max-width:calc(100% - 8rem)}}.way-chart{width:calc(100% - 10rem);height:2.25rem;color:var(--c);opacity:.45;top:1.25rem;left:4rem}.way-outro{flex-direction:column;align-items:flex-start;gap:.5rem;margin-top:2rem;font-size:.95rem;display:flex}@media (hover:hover){.way-card:hover{translate:0 -2px}}.rv{--rv-delay:calc(var(--d,0) * 90ms)}@media not (min-width:64rem){.how-step.rv,.way.rv{--rv-delay:0s}}.reveal-ready .rv:not([data-in]){opacity:0;translate:0 16px}.reveal-ready .way.rv:not([data-in]){translate:0 20px}.reveal-ready .rv[data-in]{transition:opacity .56s cubic-bezier(.25, .7, .3, 1) var(--rv-delay), translate .64s var(--ease-out-expo) var(--rv-delay)}@keyframes guide-rise{0%{opacity:0;translate:0 16px}}@supports (animation-timeline:view()){html:not(.reveal-ready) .rv{animation:linear both guide-rise;animation-timeline:view();animation-range:entry calc(var(--d,0) * 6%) entry calc(35% + var(--d,0) * 6%)}}
