@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url("/assets/v2/fonts/instrument-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url("/assets/v2/fonts/instrument-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Instrument Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/prism/fonts/serif-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Instrument Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/prism/fonts/serif-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Instrument Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/prism/fonts/serif-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Instrument Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/prism/fonts/serif-italic-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --px-bg: #0A0D16;
    --px-bg-2: #0E1320;
    --px-raise: #131A28;
    --px-raise-2: #1A2234;
    --px-raise-3: #222C42;
    --px-glass: rgba(160, 180, 230, .055);
    --px-glass-2: rgba(160, 180, 230, .09);
    --px-line: rgba(225, 232, 255, .09);
    --px-line-2: rgba(225, 232, 255, .16);
    --px-line-3: rgba(225, 232, 255, .28);
    --px-text: #EEF1F7;
    --px-text-2: #AAB3C5;
    --px-text-3: #7D889C;
    --px-lumen: #EEF1F7;
    --px-ink: #0A0D16;
    --px-iris: #8F7BFF;
    --px-glacier: #36D1C4;
    --px-ember: #FFB057;
    --px-good: #49D9A0;
    --px-bad: #FF6F7D;
    --px-accent: var(--px-iris);
    --px-accent-ink: #0A0D16;
    --px-spectrum: linear-gradient(90deg, #FF6A6A, #FFB057 18%, #F5E06A 34%, #5FE3A1 50%, #36C8F0 66%, #6C7CFF 82%, #A47BFF);
    --px-r: 14px;
    --px-r-lg: 22px;
    --px-ease: cubic-bezier(.16, 1, .3, 1);
    --px-spring: cubic-bezier(.34, 1.45, .64, 1);
    --px-font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans CJK SC", "Hiragino Sans", "Apple SD Gothic Neo", sans-serif;
    --px-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --px-bar: 68px;
    --px-foot: 86px;
    --px-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-section="Q"] { --px-accent: var(--px-glacier); }
[data-section="V"] { --px-accent: var(--px-ember); }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.px {
    margin: 0;
    min-height: 100dvh;
    background: var(--px-bg);
    color: var(--px-text);
    font-family: var(--px-font);
    font-size: 16px;
    line-height: 1.5;
    font-feature-settings: "kern", "liga";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}
body.px::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background-image: var(--px-grain);
    opacity: .035;
    mix-blend-mode: screen;
}

:where(.px) :where(img, svg, canvas) { display: block; max-width: 100%; }
:where(.px) :where(h1, h2, h3, p, ul, ol, figure, dl, dd) { margin: 0; }
:where(.px) :where(ul, ol) { padding: 0; list-style: none; }
:where(.px) :where(a) { color: inherit; text-decoration: none; }
:where(.px) :where(button) { font: inherit; color: inherit; }

.px :focus-visible {
    outline: 2px solid color-mix(in srgb, var(--px-accent) 80%, white);
    outline-offset: 3px;
    border-radius: 10px;
}

:where(.px) .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.px-serif { font-family: var(--px-serif); font-weight: 400; letter-spacing: -.01em; }

.px-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -.003em;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .35s var(--px-ease), color .35s var(--px-ease), box-shadow .45s var(--px-ease), transform .3s var(--px-ease);
}
.px-btn:active { transform: scale(.975); }
.px-btn-primary {
    background: var(--px-lumen);
    color: var(--px-ink);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(10, 13, 22, .12), 0 1px 1px rgba(0, 0, 0, .3), 0 12px 34px -14px rgba(238, 241, 247, .55);
}
.px-btn-primary:not([disabled]):hover {
    background: #fff;
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(10, 13, 22, .12), 0 0 0 4px color-mix(in srgb, var(--px-accent) 22%, transparent), 0 16px 44px -14px color-mix(in srgb, var(--px-accent) 70%, transparent);
}
.px-btn-primary[disabled] {
    background: transparent;
    color: var(--px-text-3);
    box-shadow: inset 0 0 0 1px var(--px-line-2);
    cursor: default;
    transform: none;
}
.px-btn-ghost { background: transparent; color: var(--px-text-2); padding: 0 16px; }
.px-btn-ghost:not([disabled]):hover { color: var(--px-text); }
.px-btn-line { background: transparent; color: var(--px-text); box-shadow: inset 0 0 0 1px var(--px-line-2); }
.px-btn-line:not([disabled]):hover { box-shadow: inset 0 0 0 1px var(--px-line-3); background: var(--px-glass); }
.px-btn-line[disabled] { color: var(--px-text-3); cursor: default; opacity: .6; }
.px-btn-lg { height: 56px; padding: 0 34px; font-size: 16.5px; }
.px-btn-sm { height: 38px; padding: 0 16px; font-size: 14px; font-weight: 500; }

.px-glyph { width: 30px; height: 30px; flex: none; overflow: visible; }

.px-app {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100dvh;
    background:
        radial-gradient(1100px 520px at 50% -18%, color-mix(in srgb, var(--px-accent) 13%, transparent), transparent 72%),
        radial-gradient(900px 700px at 50% 120%, rgba(30, 40, 70, .55), transparent 70%),
        var(--px-bg);
    overflow: hidden;
    isolation: isolate;
}
.px-app::before {
    content: "";
    position: absolute;
    inset: -20% -30%;
    z-index: -1;
    background: linear-gradient(112deg, transparent 38%, color-mix(in srgb, var(--px-accent) 5%, transparent) 47%, rgba(238, 241, 247, .025) 50%, transparent 58%);
    pointer-events: none;
}

.px-bar { position: relative; z-index: 5; }
.px-bar-in {
    display: flex;
    align-items: center;
    gap: 18px;
    height: var(--px-bar);
    padding: 0 clamp(16px, 3.2vw, 36px);
}
.px-brand { display: flex; align-items: center; gap: 11px; }
.px-brand-name { font-family: var(--px-serif); font-size: 24px; line-height: 1; letter-spacing: -.01em; }
.px-where { display: flex; flex-direction: column; justify-content: center; min-width: 0; height: 34px; margin-left: 8px; padding-left: 18px; border-left: 1px solid var(--px-line-2); }
.px-where-sec { font-family: var(--px-serif); font-style: italic; font-size: 16px; line-height: 1.1; color: var(--px-accent); transition: color .8s var(--px-ease); }
.px-where-sub { font-size: 13px; line-height: 1.35; color: var(--px-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-bar-gap { flex: 1; }
.px-count { display: flex; align-items: baseline; gap: 6px; color: var(--px-text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.px-count strong { font-family: var(--px-serif); font-weight: 400; font-size: 26px; line-height: 1; color: var(--px-text); letter-spacing: -.02em; }
.px-timer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 4px 0 2px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    color: var(--px-text);
    transition: color .4s;
}
.px-timer svg { width: 30px; height: 30px; overflow: visible; }
.px-timer .bez { fill: none; stroke: var(--px-line-2); stroke-width: 1; }
.px-timer .tik { stroke: var(--px-line-3); stroke-width: 1; }
.px-timer .rng { fill: none; stroke: var(--px-accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t, 1)); transform: rotate(-90deg); transform-origin: 15px 15px; transition: stroke-dashoffset 1s linear, stroke .4s; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--px-accent) 70%, transparent)); }
.px-timer .dot { fill: var(--px-lumen); }
.px-timer.is-low { color: var(--px-ember); }
.px-timer.is-low .rng { stroke: var(--px-ember); }
.px-timer.is-crit { color: var(--px-bad); animation: px-blink 1s steps(2, start) infinite; }
.px-timer.is-crit .rng { stroke: var(--px-bad); }
@keyframes px-blink { 50% { color: var(--px-text); } }
.px-icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--px-text-3); cursor: pointer; transition: color .25s, background .25s; }
.px-icon-btn:hover { color: var(--px-text); background: var(--px-glass); }
.px-icon-btn svg { width: 20px; height: 20px; }
#px-sound[aria-pressed="false"] .px-wave { opacity: 0; }
#px-sound .px-wave { transition: opacity .3s; }
#px-sound[aria-pressed="true"] { color: var(--px-text); }
.px-exit { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--px-text-3); font-size: 14px; cursor: pointer; transition: color .25s, background .25s; }
.px-exit:hover { color: var(--px-text); background: var(--px-glass); }
.px-exit-x { display: none; width: 18px; height: 18px; }

.px-ruler {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(10px, 2vw, 22px);
    padding: 0 clamp(16px, 3.2vw, 36px) 12px;
}
.px-ruler::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--px-line-2) 12%, var(--px-line-2) 88%, transparent);
}
.px-ruler-seg { position: relative; }
.px-ruler-ticks { display: flex; justify-content: space-between; align-items: flex-end; height: 16px; }
.px-ruler-ticks i { position: relative; width: 1px; height: 6px; background: var(--px-line-2); transition: height .5s var(--px-ease), background .5s var(--px-ease), box-shadow .5s; }
.px-ruler-ticks i.is-major { height: 10px; background: var(--px-line-3); }
.px-ruler-seg[data-s="P"] { --c: var(--px-iris); }
.px-ruler-seg[data-s="Q"] { --c: var(--px-glacier); }
.px-ruler-seg[data-s="V"] { --c: var(--px-ember); }
.px-ruler-ticks i.is-done { background: color-mix(in srgb, var(--c) 75%, white); }
.px-ruler-ticks i.is-now { height: 16px; width: 2px; background: var(--c); box-shadow: 0 0 10px 1px var(--c); }
.px-ruler-ticks i.is-now::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -7px;
    width: 6px;
    height: 6px;
    background: var(--c);
    transform: translateX(-50%) rotate(45deg);
    border-radius: 1px;
}
.px-ruler-name { display: block; margin-top: 6px; font-family: var(--px-serif); font-style: italic; font-size: 13px; color: var(--px-text-3); transition: color .6s; }
.px-ruler-seg.is-current .px-ruler-name { color: var(--px-text); }
.px-ruler-fill { position: absolute; left: 0; bottom: -12px; height: 1px; background: var(--c); width: calc(var(--f, 0) * 100%); box-shadow: 0 0 8px var(--c); transition: width .6s var(--px-ease); }

.px-main { position: relative; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--px-line-2) transparent; }
.px-stage {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(18px, 3.4vh, 42px) clamp(16px, 3vw, 36px);
}
.px-stage.is-enter { animation: px-in .7s var(--px-ease) both; }
.px-stage.is-leave { animation: px-out .26s ease-in both; }
@keyframes px-in { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
@keyframes px-out { to { opacity: 0; transform: translateY(-6px); filter: blur(3px); } }

.px-ask { max-width: 720px; margin: 0 auto clamp(16px, 3vh, 32px); text-align: center; }
.px-ask h1 { font-size: clamp(20px, 2.3vw, 26px); font-weight: 560; letter-spacing: -.016em; line-height: 1.25; text-wrap: balance; }
.px-ask p { margin-top: 8px; color: var(--px-text-2); font-size: 15px; text-wrap: pretty; }

.px-foot { position: relative; z-index: 5; }
.px-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--px-line) 12%, var(--px-line) 88%, transparent); }
.px-foot-in {
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--px-foot);
    padding: 0 clamp(16px, 3.2vw, 36px);
    padding-bottom: env(safe-area-inset-bottom);
}
.px-foot-note { flex: 1; min-width: 0; font-size: 13px; color: var(--px-text-3); text-align: center; }
.px-foot-note kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--px-line-2), 0 1px 0 var(--px-line-2); font: 500 11.5px/1.6 var(--px-font); color: var(--px-text-2); text-align: center; }
.px-foot.is-hidden { display: none; }

.px-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--px-foot) + 18px);
    z-index: 60;
    max-width: calc(100vw - 32px);
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--px-lumen);
    color: var(--px-ink);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .8);
    transform: translate(-50%, 14px);
    opacity: 0;
    pointer-events: none;
    transition: transform .45s var(--px-ease), opacity .3s;
}
.px-toast.is-on { transform: translate(-50%, 0); opacity: 1; }

.px-inter { position: relative; width: min(920px, 100%); margin: auto; text-align: center; }
.px-inter-pre { font-family: var(--px-serif); font-style: italic; font-size: clamp(16px, 1.8vw, 19px); color: var(--px-text-2); }
.px-inter h1 {
    margin-top: 6px;
    font-family: var(--px-serif);
    font-weight: 400;
    font-size: clamp(46px, min(8.6vw, 10.5vh), 104px);
    letter-spacing: -.035em;
    line-height: .95;
    text-wrap: balance;
}
.px-inter-tag { margin-top: 14px; font-size: clamp(16px, 1.9vw, 19px); color: var(--px-text-2); }
.px-inter-how { max-width: 540px; margin: 16px auto 0; font-size: 16px; line-height: 1.6; color: var(--px-text-2); text-wrap: pretty; }
.px-inter-art { position: relative; width: min(760px, 100%, max(320px, calc((100dvh - 470px) * 2.6))); margin: 0 auto clamp(4px, 1.5vh, 14px); }
.px-inter.is-compact .px-inter-art { width: min(500px, 100%, max(300px, calc((100dvh - 560px) * 2.6))); }
.px-inter.is-compact h1 { font-size: clamp(40px, min(6.4vw, 8vh), 76px); }
.px-inter-art svg { width: 100%; height: auto; overflow: visible; }
.px-inter-demo {
    position: relative;
    width: min(470px, 100%, max(260px, calc((100dvh - 520px) * 1.6)));
    aspect-ratio: 16 / 10;
    margin: 0 auto clamp(14px, 2.6vh, 28px);
}
.px-inter-go { margin-top: clamp(24px, 4vh, 38px); display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.px-levels { display: inline-flex; align-items: flex-end; gap: 14px; margin-top: 22px; color: var(--px-text-3); font-size: 13px; }
.px-levels-bars { display: inline-flex; align-items: flex-end; gap: 4px; height: 18px; }
.px-levels-bars i { width: 3px; border-radius: 1px; background: color-mix(in srgb, var(--px-accent) 55%, var(--px-line-2)); }

.px-subs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 780px;
    margin: clamp(22px, 3.6vh, 34px) auto 0;
}
.px-subs li { flex: 1 1 130px; padding: 4px 18px; text-align: center; border-left: 1px solid var(--px-line); }
.px-subs li:first-child { border-left: 0; }
.px-subs b { display: block; font-size: 15px; font-weight: 560; }
.px-subs span { display: block; margin-top: 3px; font-size: 13px; color: var(--px-text-3); }

.px-art-beam { stroke-dasharray: 1; stroke-dashoffset: 1; animation: px-draw 1.1s var(--px-ease) .15s forwards; }
.px-art-prism { opacity: 0; animation: px-fade .9s var(--px-ease) .45s forwards; }
.px-art-band { transform-box: fill-box; transform-origin: 0% 50%; transform: scaleX(0); animation: px-grow 1.3s var(--px-ease) forwards; }
.px-art-band.b1 { animation-delay: .8s; }
.px-art-band.b2 { animation-delay: .9s; }
.px-art-band.b3 { animation-delay: 1s; }
.px-art-label { opacity: 0; animation: px-fade .8s var(--px-ease) 1.5s forwards; }
@keyframes px-draw { to { stroke-dashoffset: 0; } }
@keyframes px-fade { to { opacity: 1; } }
@keyframes px-grow { to { transform: scaleX(1); } }

.px-langs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 820px;
    margin: clamp(22px, 3.6vh, 34px) auto 0;
    border-top: 1px solid var(--px-line);
}
.px-lang {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--px-line);
    background: transparent;
    text-align: start;
    cursor: pointer;
    transition: background .25s var(--px-ease);
}
.px-lang::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--px-line-3); transition: background .25s, box-shadow .25s; }
.px-lang:hover { background: var(--px-glass); }
.px-lang[aria-pressed="true"] { background: color-mix(in srgb, var(--px-accent) 9%, transparent); }
.px-lang[aria-pressed="true"]::before { background: var(--px-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--px-accent) 25%, transparent), 0 0 12px var(--px-accent); }
.px-lang b { display: block; font-size: 16.5px; font-weight: 500; line-height: 1.2; }
.px-lang span { display: block; font-size: 12px; color: var(--px-text-3); }

.px-dialog {
    width: min(440px, calc(100vw - 32px));
    padding: 28px;
    border: 0;
    border-radius: var(--px-r-lg);
    background: linear-gradient(180deg, #161E2F, #111827);
    color: var(--px-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--px-line-2), 0 40px 90px -20px rgba(0, 0, 0, .85);
}
.px-dialog::backdrop { background: rgba(4, 6, 12, .72); backdrop-filter: blur(8px); }
.px-dialog h2 { font-family: var(--px-serif); font-weight: 400; font-size: 30px; letter-spacing: -.02em; line-height: 1.05; }
.px-dialog p { margin: 10px 0 24px; color: var(--px-text-2); font-size: 15px; line-height: 1.55; }
.px-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.px-loading { display: grid; place-items: center; gap: 16px; min-height: 40vh; color: var(--px-text-3); font-size: 14px; }
.px-loader { width: 72px; height: 44px; overflow: visible; }
.px-loader .ray { stroke-dasharray: 1; stroke-dashoffset: 1; animation: px-ray 1.6s var(--px-ease) infinite; }
.px-loader .ray.r2 { animation-delay: .12s; }
.px-loader .ray.r3 { animation-delay: .24s; }
@keyframes px-ray { 0% { stroke-dashoffset: 1; opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

.px-done-wrap { display: grid; place-items: center; min-height: 60vh; text-align: center; gap: 16px; }
.px-done-wrap h1 { font-family: var(--px-serif); font-weight: 400; font-size: clamp(44px, 7vw, 80px); letter-spacing: -.03em; line-height: 1; }
.px-done-wrap p { color: var(--px-text-2); }

@media (max-width: 720px) {
    :root { --px-bar: 58px; --px-foot: 78px; }
    .px-brand-name, .px-exit-label, .px-count, .px-foot-note, .px-ruler-name { display: none; }
    .px-exit-x { display: block; }
    .px-exit { padding: 0 10px; }
    .px-where { margin-left: 0; padding-left: 14px; }
    .px-bar-in { gap: 10px; }
    .px-foot-in .px-btn-primary { flex: 1; }
    .px-btn-lg { height: 54px; padding: 0 24px; }
    .px-ruler { padding-bottom: 8px; gap: 8px; }
    .px-ruler-fill { bottom: -8px; }
    .px-langs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .px-subs li { flex-basis: 45%; border-left: 0; padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .px *, .px *::before, .px *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
[dir="rtl"] .px-stage { direction: ltr; }
[dir="rtl"] .px-stage [dir="rtl"], [dir="rtl"] .px-stage .vb { direction: rtl; }