@layer theme,base;@layer components{.pg-num,.pg-bar{display:none}.proc-body{margin-block-start:2rem;position:relative}.proc-side{z-index:1;align-items:center;gap:1rem;padding-block:1rem;display:flex;position:relative}.proc-num{color:var(--ink);font-size:clamp(3.6rem,15vw,5rem);line-height:.9;display:flex}.proc-roll{block-size:.9em;color:var(--muted);display:inline-block;overflow:hidden}.proc-digits{transform:translateY(calc(var(--step,0) * -.9em));flex-direction:column;transition:transform .6s cubic-bezier(.65,0,.35,1);display:flex}.proc-field{z-index:-1;pointer-events:none;position:absolute;inset:0;overflow:visible}.proc-fx{opacity:var(--fo,.5);filter:drop-shadow(0 10px 30px #00000080);position:absolute}html.motion .proc-fx{animation:float var(--fd,4s) ease-in-out infinite alternate;animation-delay:calc(var(--fd,4s) * -.5)}@media not (min-width:48rem){.proc-fx{inline-size:2rem!important}.proc-fx:nth-child(n+4){display:none}}.proc-line{display:none}.proc-steps{gap:4rem;padding-block:2rem 1rem;display:grid}@media not (min-width:48rem){html.motion .proc[data-pager] .proc-side{display:none}html.motion .proc[data-pager] .proc-steps{padding-block:0 12svh;display:block}html.motion .proc[data-pager] .proc-step{box-sizing:border-box;block-size:calc(100svh - 4.75rem - var(--corner-b) - var(--corner-h) - 3.5rem);border-radius:var(--radius-l);background:linear-gradient(160deg, #2b4a423d, #0f2a241a 58%), var(--color-panel);border:1px solid #eee8dc1f;flex-direction:column;justify-content:center;gap:.25rem;margin-block-end:1rem;padding:1.5rem 1.375rem 1.75rem;display:flex;position:sticky;inset-block-start:4.75rem;overflow:auto;box-shadow:0 -24px 60px #0000008c}html.motion .proc[data-pager] .pg-num{color:var(--ink);margin-block:auto .5rem;font-size:clamp(4rem,22vw,6rem);line-height:.9;display:block}html.motion .proc[data-pager] .pg-bar{order:-1;gap:.375rem;padding-block-end:1rem;display:flex}html.motion .proc[data-pager] .pg-bar i{background:#eee8dc29;border-radius:2px;flex:1;block-size:3px}html.motion .proc[data-pager] .pg-bar i[data-on]{background:var(--color-copper)}}@media (min-width:48rem){.proc-side{background:0 0;flex-direction:column;justify-content:flex-start;align-self:start;align-items:flex-start;gap:1.5rem;block-size:100svh;padding-block-start:clamp(9rem,24svh,15rem);position:sticky;inset-block-start:0}.proc-num{font-size:var(--text-numeral)}.proc-line{background:var(--line);inline-size:1px;display:block;position:absolute;inset-block:0;inset-inline-start:45.8333%}.proc-fill{background:var(--ink);transform-origin:50% 0;position:absolute;inset:0}html.motion .proc[data-fx] .proc-fill{transform:scaleY(0)}.proc-steps{gap:34vh;padding-block:36vh}.proc-body{grid-template-rows:auto}.proc-side,.proc-steps{grid-row:1}}}@layer utilities;
