.way{padding:clamp(84px, 13.5vh, 190px) var(--gutter);background-color:var(--ink);color:var(--paper)}.way>div{width:100%;max-width:var(--sheet);--gap:var(--band-gap);--action-col:calc(var(--meta) * 9.5 + 56px);grid-template-columns:var(--label-col) minmax(0, 1fr) var(--action-col);column-gap:var(--gap);--way-title:min(var(--count-rule), calc((100cqw - var(--label-col) - var(--action-col) - 2 * var(--gap)) / 9.33));margin-inline:auto;display:grid;container-type:inline-size}.way-label-hold{grid-area:1/1/3}.way-label{--label-offset:clamp(20px, 4vh, 44px);top:calc(var(--bar-h) + var(--label-offset));margin:0;margin-top:calc(.16 * var(--way-title) - .125 * var(--meta));color:var(--accent);line-height:1;font-size:var(--meta);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;font-weight:600;position:sticky}.way h2{font-size:var(--way-title);letter-spacing:-.005em;text-transform:uppercase;grid-area:1/2;margin:0;line-height:1.06}.way h2>span:not(.draw){color:var(--accent)}.way-lead{font-size:var(--read);color:color-mix(in srgb, var(--paper) 72%, var(--ink));grid-area:2/2;margin:clamp(18px,2.4vw,34px) 0 0;line-height:1.62}.way-more{margin-bottom:calc(.08 * var(--way-title));color:inherit;font-size:var(--meta);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;grid-area:1/3;place-self:end;align-items:center;gap:14px;font-weight:600;text-decoration:none;display:inline-flex}.way-more span{background-color:var(--accent);width:42px;height:42px;color:var(--on-accent);place-items:center;display:grid}.way-more svg{width:18px;height:18px}@media (hover:hover){.way-more:hover span{background-color:color-mix(in srgb, var(--accent) 88%, var(--on-accent))}}.way-board{--way-wish:clamp(64px, 7.4vw, 108px);--cell:100px;grid-area:3/1/auto/-1;margin:clamp(34px,4.6vw,72px) 0 0;position:relative}.way-reset{z-index:4;background-color:var(--accent);height:42px;color:var(--on-accent);font:inherit;font-size:var(--meta);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:0;border-radius:0;align-items:center;gap:8px;padding:0 14px 0 12px;font-weight:600;display:inline-flex;position:absolute;top:0;left:0}.way-reset svg{width:16px;height:16px}@media (hover:hover){.way-reset:hover{background-color:color-mix(in srgb, var(--accent) 88%, var(--on-accent))}}.way-letter{z-index:2;font-family:var(--font-display), var(--font-sans), system-ui, sans-serif;color:var(--accent);visibility:hidden;place-items:center;font-size:clamp(72px,9vw,150px);font-weight:700;line-height:1;display:grid;position:absolute;inset:0}.way-card.is-won{--card-ink:var(--ink);--card-ground:var(--paper);cursor:default}.way-card.is-won .way-letter{visibility:visible}.way-card.is-won .way-icon,.way-card.is-won .way-kind,.way-card.is-won h3,.way-card.is-won .way-text,.way-card.is-won:after{visibility:hidden}.way-confetti{z-index:1;pointer-events:none;width:0;height:0;position:absolute;overflow:visible}.way-confetti i{background-color:var(--accent);width:10px;height:14px;animation:way-confetti 2.8s cubic-bezier(.2, .7, .3, 1) var(--wait) both;position:absolute;top:-7px;left:-5px}.way-confetti .way-bit-1{background-color:var(--paper)}.way-confetti .way-bit-2{background-color:color-mix(in srgb, var(--accent) 55%, var(--paper))}@keyframes way-confetti{0%{opacity:1;transform:translate(0)rotate(0)}60%{transform:translate(calc(var(--dx) * .85), var(--dy)) rotate(calc(var(--spin) * .6));opacity:1}to{transform:translate(var(--dx), calc(var(--dy) + 420px)) rotate(var(--spin));opacity:0}}@media (prefers-reduced-motion:reduce){.way-confetti{display:none}}.way-paper{z-index:0;pointer-events:none;--rule:color-mix(in srgb, var(--ruling) 16%, transparent);box-shadow:inset -1px -1px 0 var(--rule);position:absolute;inset:0}.way-ties{z-index:1;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.way-ties polyline{fill:none;stroke:var(--accent);stroke-width:1px;stroke-linejoin:miter;transition:stroke-width .2s}.way-tie.is-on polyline{stroke-width:2.5px}.way-ties .way-pulse{stroke:var(--paper);stroke-width:3px;stroke-linecap:round;--beam:44px;--len:0px;stroke-dasharray:var(--beam) var(--len);stroke-dashoffset:var(--beam);animation:3.2s ease-in-out infinite way-pulse}.way-tie.is-on .way-pulse{stroke-width:4px}@keyframes way-pulse{0%{stroke-dashoffset:var(--beam)}55%{stroke-dashoffset:calc(-1 * var(--len))}to{stroke-dashoffset:calc(-1 * var(--len))}}@media (prefers-reduced-motion:reduce){.way-ties .way-pulse{display:none}}.way-figure{z-index:2;filter:grayscale();pointer-events:none;background-image:url(/way-figure-dark.webp);background-position:bottom;background-repeat:no-repeat;background-size:contain;position:absolute}:root[data-theme=light] .way-figure{background-image:url(/way-figure-light.webp)}.way-say{z-index:4;pointer-events:none;position:absolute;container-type:inline-size}.way-say span{background-color:var(--paper);max-width:44cqw;color:var(--ink);letter-spacing:.02em;text-transform:uppercase;opacity:0;padding:.6em .8em;font-size:clamp(10px,3.4cqw,13px);font-weight:600;line-height:1.35;position:absolute}.is-in .way-say span{animation:.6s cubic-bezier(.16,1,.3,1) both band-rise}.way-say span:after{content:"";background-color:inherit;width:.6em;height:.6em;position:absolute;rotate:45deg}.way-say span:first-child{top:30cqw;left:1cqw}.is-in .way-say span:first-child{animation-delay:1.5s}.way-say span:first-child:after{bottom:.9em;right:-.3em}.way-say span:last-child{text-align:right;top:62cqw;right:1cqw}.is-in .way-say span:last-child{animation-delay:2.1s}.way-say span:last-child:after{top:.9em;left:-.3em}@media (prefers-reduced-motion:reduce){.way-say span,.is-in .way-say span{opacity:1;animation:none}}.way-cards{z-index:3;margin:0;padding:0;list-style:none;position:absolute;inset:0}.way-card{--card-ink:var(--paper);--card-ground:color-mix(in srgb, var(--paper) 7%, var(--ink));cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;--step:.28s cubic-bezier(.2, .8, .2, 1);transition:transform var(--step), box-shadow var(--step), background-color .34s ease, color .34s ease;--icon:clamp(34px, 3vw, 46px);--pad:clamp(12px, 1.3vw, 18px);--frame-pad:clamp(12px, 1.4vw, 20px);padding:var(--pad) calc(var(--pad) + var(--frame-pad)) calc(var(--pad) + var(--frame-pad));background-color:var(--card-ground);color:var(--card-ink);flex-direction:column;gap:clamp(8px,.8vw,12px);display:flex;position:absolute;top:0;left:0;overflow:hidden}.way-card:active{cursor:grabbing}.way-card.is-held{z-index:5;box-shadow:0 18px 44px -12px color-mix(in srgb, var(--ink) 70%, transparent)}.way-card.is-on{--card-ink:var(--ink);--card-ground:var(--paper)}.way-card.is-swapping{transition:transform var(--step), box-shadow var(--step)}@media (prefers-reduced-motion:reduce){.way-card{transition:none}}.way-card:after{content:"";z-index:0;pointer-events:none;inset:calc(var(--pad) + var(--icon) / 2) var(--pad) var(--pad);--dash:100000px;--dash-gap:6px;background-repeat:no-repeat;background-image:repeating-linear-gradient(to right, var(--accent) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--dash-gap))), repeating-linear-gradient(to bottom, var(--accent) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--dash-gap))), repeating-linear-gradient(to right, var(--accent) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--dash-gap))), repeating-linear-gradient(to bottom, var(--accent) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--dash-gap)));background-position:0 0,100% 0,0 100%,0 0;background-size:100% 1px,1px 100%,100% 1px,1px 100%;position:absolute}.way-card.is-on:after{--dash:7px}.way-card.is-joined-l:after{left:0}.way-card.is-joined-r:after{right:0}.way-card.is-joined-t:after{top:0}.way-card.is-joined-b:after{bottom:0}.way-card>:not(.pixel-swap,.way-letter){z-index:1;position:relative}.way-icon{width:var(--icon);aspect-ratio:1;background-color:var(--accent);color:var(--on-accent);align-self:center;place-items:center;display:grid}.way-icon svg{width:46%;height:46%}.way-kind{text-align:center;font-size:calc(var(--meta) * .9);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:auto 0 0;padding-top:clamp(4px,.5vw,8px);font-weight:600}.way-kind span:last-child{color:color-mix(in srgb, var(--card-ink) 62%, var(--card-ground))}.way-card h3{text-align:center;letter-spacing:-.005em;text-transform:uppercase;margin:0;font-size:clamp(20px,1.9vw,26px);font-weight:700;line-height:1.04}.way-text{text-align:center;color:color-mix(in srgb, var(--card-ink) 72%, var(--card-ground));margin:0 0 auto;font-size:clamp(12px,1vw,14px);line-height:1.55}@media (max-width:1100px){.way-board{height:auto!important}.way-paper,.way-ties,.way-reset,.way-figure{display:none}.way-cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(24px,6vw,36px);display:grid;position:static}.way-card:not(.pixel-in){cursor:default;touch-action:auto;position:relative;width:auto!important;height:auto!important;transform:none!important}}@media (max-width:900px){.way>div{--label-col:0px;--action-col:0px;--gap:0px;grid-template-columns:minmax(0,1fr);row-gap:clamp(18px,3.4vh,30px)}.way-label-hold,.way h2,.way-lead,.way-more,.way-board{grid-area:auto/1}.way-label{margin-top:0;position:static}.way-lead{margin-top:0}.way-more{display:none}.way-board{margin-top:clamp(6px,1.6vw,12px)}.way-cards{grid-template-columns:minmax(0,1fr)}.way-card{padding-bottom:calc(var(--pad) + 2.2 * var(--frame-pad))}.way-kind{padding-top:calc(var(--frame-pad) * 1.2)}}
