.prob-sol,.prob-media,.prob-bar{display:none}.js .problem{--t:opacity .7s var(--ease-out),transform .7s var(--ease-out),filter .7s var(--ease-out);--m:.5s var(--ease-out);--lt:.6s var(--ease-out)}.js .prob-stage{z-index:0;height:100svh;position:sticky;top:0}.js .prob-track{z-index:1;margin-top:-100svh;position:relative}.js .prob-pain{min-height:70svh}.js .prob-sol{opacity:0;filter:blur(4px);pointer-events:none;transition:var(--t);grid-area:1/1;display:block;transform:translateY(16px)}.js .prob-q{transition:var(--t);grid-area:1/1}.js .problem[data-step="3"] .prob-sol{opacity:1;filter:none;pointer-events:auto;transform:none}.js .problem[data-step="3"] .prob-q{opacity:0;filter:blur(4px);transform:translateY(-24px)}.js .prob-end{height:80svh;padding:0}.js .prob-end>*{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.js .prob-pain{opacity:.25;transition:var(--t)}.js :is(.problem[data-step="0"] [data-s="0"],.problem[data-step="1"] [data-s="1"],.problem[data-step="2"] [data-s="2"]).prob-pain{opacity:1}@media (min-width:901px){.js .prob-media{display:block}.js .prob-pain:first-child{min-height:140svh;padding-top:calc(3rem + 70svh);position:relative}}.prob-cue{display:none}@media (min-width:901px){.js .prob-cue{font:500 13px/1 var(--font-body);letter-spacing:.04em;color:var(--color-ink-2);transition:opacity var(--m);flex-direction:column;align-items:flex-start;gap:12px;display:flex;position:absolute;top:calc(70svh - 4rem);left:0}}.js .prob-cue-l{width:5px;height:48px;position:relative}.js .prob-cue-l:before{content:"";background:var(--color-hair);width:1px;position:absolute;top:0;bottom:0;left:2px}.js .prob-cue-l i{background:var(--color-ember);width:5px;height:5px;animation:prob-cue 1.8s var(--ease-inout) infinite;border-radius:9999px;position:absolute;top:0;left:0}@keyframes prob-cue{0%{opacity:0;transform:translateY(0)}25%{opacity:1}75%{opacity:1}to{opacity:0;transform:translateY(43px)}}.js .prob-scrolled .prob-cue{opacity:0}.shot .prob-cue-l i{animation-play-state:paused}@media (min-width:901px) and (max-height:760px){.js .prob-stage>div{padding-top:10svh}.js .prob-media>div:first-child{max-height:36svh}}.js .prob-ly{opacity:0;filter:blur(8px);transition:opacity var(--lt),transform var(--lt),filter var(--lt);transform:scale(1.04)}.js .prob-x{opacity:0;transition:opacity var(--m);grid-area:1/1}.js :is(.problem[data-step="0"] [data-i="0"],.problem[data-step="1"] [data-i="1"],.problem[data-step="2"] [data-i="2"],.problem[data-step="3"] [data-i="3"]):is(.prob-ly,.prob-x){opacity:1;filter:none;transform:none}.js .prob-chip{background:color-mix(in srgb,var(--color-bg) 55%,transparent);-webkit-backdrop-filter:blur(16px)saturate(160%);backdrop-filter:blur(16px)saturate(160%);box-shadow:inset 0 1px 0 var(--color-hair);display:grid}@media (prefers-reduced-transparency:reduce){.js .prob-chip{background:var(--color-panel-2);-webkit-backdrop-filter:none;backdrop-filter:none}}.js .prob-pc{background:var(--color-ink-3);clip-path:inset(0 9px round 3px);width:24px;transition:clip-path var(--m),background-color var(--m)}.js :is(.problem[data-step="0"] [data-i="0"],.problem[data-step="1"] [data-i="1"],.problem[data-step="2"] [data-i="2"]).prob-pc{clip-path:inset(0 round 3px);background:var(--color-ember)}.js .problem[data-step="3"] .prob-pc{clip-path:inset(0 round 3px);background:var(--color-ice)}@media (max-width:900px){.js .prob-stage{z-index:2;background:color-mix(in srgb,var(--color-bg) 90%,transparent);height:auto}.js .prob-stage>div{height:auto;padding-block:16px}.js .prob-stage h2,.js .prob-sol>p:first-child{font-size:28px}.js .prob-sol>p+p{display:none}.js .prob-track{margin-top:0}.js .prob-bar{display:block}.js .prob-barf{background:var(--color-ember);transform:scaleX(var(--p,0));transition:background-color var(--m)}.js .problem[data-step="3"] .prob-barf{background:var(--color-ice)}}@media (prefers-reduced-motion:reduce){.js .problem{--t:opacity .2s linear;--m:.2s linear;--lt:.2s linear}.js :is(.prob-sol,.prob-q,.prob-ly){filter:none!important;transform:none!important}.js .prob-pc{transition:background-color var(--m)}.js .prob-cue-l i{margin-top:-2.5px;animation:none;top:50%}}
