.c-ladder{--row:1.9rem;--name:var(--s1);background:var(--night);color:var(--night-text);border:1px solid var(--night-line);border-radius:var(--radius);font-family:var(--sans);margin:0;padding:1.25rem 1.5rem 1.5rem;position:relative}.c-ladder.is-hero{--row:clamp(2.1rem, 4.6vw, 2.9rem);--name:clamp(1.45rem, 3.1vw, 2.15rem);padding:1.5rem clamp(1.25rem,3vw,2.25rem) 2rem}.c-ladder .ceiling{height:var(--row);font:400 var(--s-1)/var(--row) var(--sans);color:var(--night-muted);background:linear-gradient(to top, var(--night-line), transparent) left calc(3ch + .55rem) top / 1px 100% no-repeat;padding-left:calc(3ch + 1.4rem)}.c-ladder .rungs{list-style:none;position:relative}.c-ladder .rungs:before{content:"";background:var(--night-line);width:1px;position:absolute;top:0;bottom:0;left:calc(3ch + .55rem)}.c-ladder .rung{height:var(--row);--heat:var(--night-muted);grid-template-columns:3ch 1.1rem minmax(0,auto) 1fr;align-items:center;column-gap:0;display:grid;position:relative}.c-ladder .rung>*{grid-row:1}.c-ladder .tier{font:500 var(--s-1)/1 var(--sans);color:var(--night-muted);text-align:right;font-variant-numeric:tabular-nums;grid-column:1;padding-right:.6rem}.c-ladder .name{font:400 var(--name)/1 var(--serif);font-variation-settings:"opsz" 48;letter-spacing:-.01em;color:var(--night-muted);opacity:.6;grid-column:3;padding-left:.9rem}.c-ladder .at{font:400 var(--s-1)/1 var(--sans);color:var(--night-muted);font-variant-numeric:tabular-nums;grid-column:4;justify-self:end}.c-ladder .mark{font:500 var(--s-1)/1.2 var(--sans);color:var(--night-text);white-space:nowrap;grid-column:4;justify-self:start;padding-left:1rem}.c-ladder .rung.floor{border-top:1px dashed var(--night-line);margin-top:.35rem}.c-ladder .rung.floor:after{content:"mortal floor";background:var(--night);font:400 var(--s-1)/1.5 var(--sans);color:var(--night-muted);padding:0 .4em;position:absolute;top:-.75em;right:0}.c-ladder [data-tier="0"]{--heat:var(--t0)}.c-ladder [data-tier="1"]{--heat:var(--t1)}.c-ladder [data-tier="2"]{--heat:var(--t2)}.c-ladder [data-tier="3"]{--heat:var(--t3)}.c-ladder [data-tier="4"]{--heat:var(--t4)}.c-ladder [data-tier="5"]{--heat:var(--t5)}.c-ladder [data-tier="6"]{--heat:var(--t6)}.c-ladder [data-tier="7"]{--heat:var(--t7)}.c-ladder [data-tier="8"]{--heat:var(--t8)}.c-ladder [data-tier="9"]{--heat:var(--t9)}.c-ladder [data-tier="10"]{--heat:var(--t10)}.c-ladder .rung.lit .name{color:var(--heat);opacity:1}.c-ladder .rung.lit .tier{color:var(--night-text)}.c-ladder .rung.ghost .name{color:var(--heat);opacity:1}.c-ladder .rung.ghost .tier{color:var(--night-text)}.c-ladder .spark{left:calc(1.65rem + 3ch);top:calc(1.25rem + var(--row) + var(--row) / 2 - .4rem);background:var(--t0);width:.8rem;height:.8rem;transform:translateY(calc(var(--row) * var(--to) + .35rem));border-radius:50%;position:absolute}.c-ladder.is-hero .spark{left:calc(clamp(1.25rem,3vw,2.25rem) + 3ch + .15rem);top:calc(1.5rem + var(--row) + var(--row) / 2 - .4rem)}.c-ladder[data-fall] .spark{transform:translateY(calc(var(--row) * var(--from)));background:var(--t5);box-shadow:0 0 .9rem .3rem color-mix(in oklab, var(--t5) 55%, transparent)}.c-ladder[data-fall] .mark-to{opacity:0}.c-ladder[data-fall].fallen .spark,.c-ladder[data-fall].go .spark{transform:translateY(calc(var(--row) * var(--to) + .35rem));background:var(--t0);box-shadow:none}.c-ladder[data-fall].fallen .rung.lit .name,.c-ladder[data-fall].go .rung.lit .name{color:var(--night-muted);opacity:.6}.c-ladder[data-fall].fallen .rung.ghost .name,.c-ladder[data-fall].go .rung.ghost .name{color:var(--heat);opacity:.42}.c-ladder[data-fall].fallen .mark-to,.c-ladder[data-fall].go .mark-to{opacity:1}.c-ladder[data-fall] .rung.floor .name{color:var(--t0);opacity:1}@media (prefers-reduced-motion:no-preference){.c-ladder[data-fall].go .spark{animation:ub-fall var(--duration) cubic-bezier(.5, 0, .95, .4) var(--start) both}.c-ladder[data-fall].go .rung.lit .name{animation:ub-dim .45s ease-in var(--delay) both}.c-ladder[data-fall].go .rung.ghost .name{animation:ub-ghost .45s ease-in var(--delay) both}.c-ladder[data-fall].go .mark-to{animation:ub-arrive .6s ease-out calc(var(--start) + var(--duration)) both}}@keyframes ub-ghost{0%{color:var(--heat);opacity:1}to{color:var(--heat);opacity:.42}}@keyframes ub-fall{0%{transform:translateY(calc(var(--row) * var(--from)));background:var(--t5);box-shadow:0 0 .9rem .3rem color-mix(in oklab, var(--t5) 55%, transparent)}to{transform:translateY(calc(var(--row) * var(--to) + .35rem));background:var(--t0);box-shadow:0 0 .2rem #0000}}@keyframes ub-dim{0%{color:var(--heat);opacity:1}to{color:var(--night-muted);opacity:.6}}@keyframes ub-arrive{0%{opacity:0}to{opacity:1}}.c-ladder[data-reached] .rung.reached .name{color:var(--heat);opacity:1}.c-ladder .rung.current .name{font-weight:600}.c-ladder .mark-you{display:none}.c-ladder .rung.current .mark-you{display:inline}.c-ladder.is-you .mark{grid-column:4}.c-ladder.is-you .rung{grid-template-columns:3ch 1.1rem minmax(0,auto) auto 1fr}.c-ladder.is-you .at{grid-column:5}@media (width<=520px){.c-ladder .mark{white-space:normal;max-width:9em;padding-left:.6rem}}
