.pp-int {
--f: var(--int-fit, 1);
--g: var(--int-fit-gap, 1);
position: relative;
width: min(100%, calc((var(--int-list-x) + var(--int-row-w)) * var(--f)));
margin-top: calc(var(--int-gap-top) * var(--f));
text-align: left;
color: var(--color-ink);
transition: width var(--dur-int-smoke) var(--ease-reveal);
}
@property --sheet-reveal {
syntax: '<number>';
inherits: false;
initial-value: 1;
}
.pp-int--in {
animation: pp-int-in var(--dur-int-reveal) var(--ease-smoke-show) both;
}
[data-canvas-content][data-revealing] {
--reveal-soft: calc(var(--reveal-h, 0px) * var(--int-reveal-soft));
--reveal-edge: calc(var(--reveal-top, 0px) + (var(--reveal-h, 0px) + var(--reveal-soft)) * var(--sheet-reveal));
mask-image: linear-gradient(to bottom, #000 max(var(--reveal-top, 0px), calc(var(--reveal-edge) - var(--reveal-soft))), transparent var(--reveal-edge));
animation: pp-sheet-reveal var(--dur-int-reveal) var(--ease-reveal-sheet) both;
}
@keyframes pp-sheet-reveal {
from { --sheet-reveal: 0; }
to   { --sheet-reveal: 1; }
}
@keyframes pp-int-in {
from { filter: blur(var(--int-in-blur)); }
to   { filter: blur(0); }
}
.pp-int[data-compact] {
--int-list-x: var(--int-list-x-compact);
}
.pp-int-total {
position: absolute;
z-index: 1;
left: 0;
top: 0;
margin: 0;
pointer-events: none;
transform-origin: calc(80px * var(--f)) calc(40px * var(--f));
transition:
opacity var(--dur-int-smoke-in) var(--ease-smoke-show),
scale var(--dur-int-smoke-in) var(--ease-reveal),
filter var(--dur-int-smoke-in) var(--ease-smoke-clear),
visibility 0s;
}
.pp-int[data-compact] .pp-int-total {
opacity: 0;
scale: var(--int-smoke-scale);
filter: blur(var(--int-smoke-blur));
visibility: hidden;
transition:
opacity var(--dur-int-smoke-out) var(--ease-smoke-hide),
scale var(--dur-int-smoke-out) var(--ease-sink),
filter var(--dur-int-smoke-out) var(--ease-smoke-cloud),
visibility 0s linear var(--dur-int-smoke-out);
}
.pp-shell[data-talk-min] .pp-int:not([data-compact]) .pp-int-total {
transition-delay: var(--int-smoke-delay);
}
.pp-int-count,
.pp-int-count-word,
.pp-int-count-groups {
position: absolute;
white-space: nowrap;
}
.pp-int-count {
left: 0;
top: calc(var(--int-count-y) * var(--f));
font-family: var(--font-script);
font-size: calc(var(--fs-int-count) * var(--f));
line-height: calc(var(--lh-int-count) * var(--f));
letter-spacing: var(--ls-int-count);
}
.pp-int-count-word {
left: calc(var(--int-word-x) * var(--f));
top: calc(var(--int-word-y) * var(--f));
font-family: var(--font-sans);
font-size: calc(var(--fs-int-word) * var(--f));
line-height: calc(var(--lh-int-word) * var(--f));
font-variation-settings: var(--vf-int-often);
}
.pp-int-count-groups {
left: calc(var(--int-word-x) * var(--f));
top: calc(var(--int-groups-y) * var(--f));
font-family: var(--font-script);
font-size: calc(var(--fs-int-groups) * var(--f));
line-height: calc(var(--lh-int-groups) * var(--f));
letter-spacing: var(--ls-int-groups);
}
.pp-int-list {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
gap: calc(var(--int-group-gap) * var(--f));
width: calc(var(--int-row-w) * var(--f));
max-width: calc(100% - var(--int-list-x) * var(--f));
margin-left: calc(var(--int-list-x) * var(--f));
transition: margin-left var(--dur-int-smoke) var(--ease-reveal);
}
.pp-int-group {
position: relative;
}
.pp-int-freq {
position: absolute;
top: 0;
right: calc(100% + var(--int-freq-gap) * var(--g));
font-family: var(--font-sans);
font-size: calc(var(--fs-int-freq) * var(--f));
line-height: calc(var(--lh-int-item) * var(--f));
letter-spacing: var(--ls-int-freq);
font-variation-settings: var(--vf-int-light);
color: var(--color-grey-note);
white-space: nowrap;
cursor: default;
}
.pp-int-items,
.pp-int-subs,
.pp-int-sources {
margin: 0;
padding: 0;
list-style: none;
}
.pp-int-items {
--int-row-gap: calc(var(--int-item-gap) * var(--f));
display: flex;
flex-direction: column;
gap: var(--int-row-gap);
}
.pp-int-row {
display: block;
width: 100%;
padding: 0;
border: 0;
background: none;
color: inherit;
font-family: var(--font-sans);
font-size: calc(var(--fs-int-item) * var(--f));
line-height: calc(var(--lh-int-item) * var(--f));
text-align: left;
cursor: pointer;
position: relative;
transform-origin: left center;
transition: scale var(--dur-grow) var(--ease-grow);
}
.pp-int-items > .pp-int-item > .pp-int-row::after,
.pp-int-subs > .pp-int-item > .pp-int-row::after {
content: '';
position: absolute;
inset-inline: 0;
}
.pp-int-items > .pp-int-item > .pp-int-row::after,
.pp-int-subs > .pp-int-item > .pp-int-row::after {
inset-block: calc(var(--int-row-gap) / -2);
}
:root[data-touch] .pp-int-items {
--int-row-gap: max(calc(var(--int-item-gap) * var(--f)), calc(var(--touch-min) - var(--lh-int-item) * var(--f)));
}
:root[data-touch] :is(.pp-int-subs, .pp-int-sources) {
--int-row-gap: max(calc(var(--int-src-row-gap) * var(--g)), calc(var(--touch-min) - var(--lh-int-src) * var(--f)));
}
.pp-int-row:hover,
.pp-int-row:focus-visible {
scale: var(--scale-text-hover);
}
.pp-int-row:focus-visible {
outline: none;
}
.pp-int-group[data-freq="often"] .pp-int-item--l0 > .pp-int-row { font-variation-settings: var(--vf-int-often); }
.pp-int-group[data-freq="sometimes"] .pp-int-item--l0 > .pp-int-row { font-variation-settings: var(--vf-int-sometimes); }
.pp-int-group[data-freq="rarely"] .pp-int-item--l0 > .pp-int-row { font-variation-settings: var(--vf-int-rarely); }
.pp-int-item--l1 > .pp-int-row {
font-size: calc(var(--fs-int-src) * var(--f));
line-height: calc(var(--lh-int-src) * var(--f));
font-variation-settings: var(--vf-int-sub);
}
.pp-int-reveal {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-int-open) var(--ease-pop);
}
.pp-int-reveal--open {
grid-template-rows: 1fr;
}
.pp-int-inner {
min-height: 0;
overflow: hidden;
}
.pp-int-subs,
.pp-int-sources {
padding-left: calc(var(--int-indent) * var(--g));
}
.pp-int-item--l0 > .pp-int-reveal > .pp-int-inner > .pp-int-subs {
padding-block: calc(var(--int-open-pt) * var(--g)) calc(var(--int-open-pb) * var(--g));
}
.pp-int-item--l1 > .pp-int-reveal > .pp-int-inner > .pp-int-sources {
padding-block: calc(var(--int-sub-open-pt) * var(--g)) calc(var(--int-sub-open-pb) * var(--g));
}
.pp-int-subs {
--int-row-gap: calc(var(--int-src-row-gap) * var(--g));
display: flex;
flex-direction: column;
gap: var(--int-row-gap);
}
.pp-int-sources {
--int-row-gap: calc(var(--int-src-row-gap) * var(--g));
display: flex;
flex-direction: column;
row-gap: var(--int-row-gap);
}
.pp-int-src {
font-family: var(--font-sans);
font-size: calc(var(--fs-int-src) * var(--f));
line-height: calc(var(--lh-int-src) * var(--f));
font-variation-settings: var(--vf-int-light);
hyphens: manual;
cursor: default;
}
.pp-int-sources .pp-int-src {
display: block;
position: relative;
}
.pp-int-sources .pp-int-src::after {
content: '';
position: absolute;
inset-inline: 0;
inset-block: calc(var(--int-row-gap) / -2);
}
.pp-int-item--l1 > .pp-int-reveal--open,
.pp-int-item--l1 > .pp-int-reveal--open .pp-int-src {
cursor: pointer;
}
.pp-int-reveal--open > .pp-int-inner > .pp-int-subs > li,
.pp-int-reveal--open > .pp-int-inner > .pp-int-sources .pp-int-src {
animation: pp-int-line var(--dur-int-open) var(--ease-pop) both;
animation-delay: calc(var(--i) * var(--int-stagger));
}
@keyframes pp-int-line {
from { opacity: 0; translate: 0 var(--int-line-y); }
to   { opacity: 1; translate: 0 0; }
}
.pp-int-wave {
position: absolute;
z-index: -1;
pointer-events: none;
transition: opacity var(--dur-int-wave-fade) var(--ease-fade);
}
.pp-shell[data-talk]:not([data-talk-min]) .pp-int {
--int-wave-pull: 78px;
}
.pp-int-wave-img {
position: absolute;
inset:
var(--int-wave-top)
calc((var(--int-wave-right) + var(--int-wave-pull)) * var(--int-wave-sxr, 1))
var(--int-wave-bottom)
calc(var(--int-wave-left) * var(--int-wave-sxl, 1));
translate: var(--int-spot-dx) 0;
visibility: hidden;
}
.pp-int-note {
position: absolute;
left: calc(var(--int-note-x) * var(--f));
top: 0;
margin: 0;
translate: 0 -50%;
font-family: var(--font-script);
font-size: calc(var(--fs-int-note) * var(--f));
line-height: calc(var(--lh-int-note) * var(--f));
letter-spacing: var(--ls-int-note);
white-space: nowrap;
pointer-events: none;
transition: opacity var(--dur-int-note-fade) var(--ease-fade);
}
.pp-int-gone {
opacity: 0;
}
.pp-int-note:not([data-away]):not([data-empty]) {
transition-duration: var(--dur-int-wave-appear);
transition-delay: var(--int-note-return-delay, 0ms);
}
.pp-int-note[data-away],
.pp-int-note[data-empty] {
opacity: 0;
}
.pp-int-note-text {
display: inline-block;
animation: pp-int-digits var(--dur-int-digits) var(--ease-fade) both;
}
@keyframes pp-int-digits {
from { opacity: 0; filter: blur(var(--int-digits-blur)); }
to   { opacity: 1; filter: blur(0); }
}
.pp-int-note-text--out {
position: absolute;
left: 0;
top: 0;
animation-name: pp-int-digits-out;
}
@keyframes pp-int-digits-out {
from { opacity: var(--note-out-from, 1); filter: blur(0); }
to   { opacity: 0; filter: blur(var(--int-digits-blur)); }
}
.pp-int-cta {
--cta-f: max(calc(var(--cta-fit-min) / 100), calc(1 - (1 - var(--f, 1)) * var(--cta-fit-share) / 100));
display: flex;
align-items: center;
gap: calc(var(--cta-gap) * var(--cta-f));
width: fit-content;
margin: var(--int-cta-gap) auto 0;
padding: calc(var(--cta-pt) * var(--cta-f)) calc(var(--cta-pr) * var(--cta-f)) calc(var(--cta-pb) * var(--cta-f)) calc(var(--cta-pl) * var(--cta-f));
border: 0;
border-radius: var(--radius-pill);
background: var(--color-ink);
color: var(--cta-ink);
white-space: nowrap;
cursor: pointer;
transition: scale var(--dur-cta-scale) var(--spring-bounce);
}
.pp-int-cta[aria-disabled] {
background: var(--color-grey-off);
cursor: default;
}
.pp-int-cta[aria-disabled]:hover,
.pp-int-cta[aria-disabled]:active {
scale: 1;
}
.pp-int-cta:not([aria-disabled]):hover {
scale: var(--scale-cta-hover);
}
.pp-int-cta-label {
font-family: var(--font-sans);
font-size: calc(var(--fs-btn) * var(--cta-f));
line-height: calc(var(--lh-btn) * var(--cta-f));
font-variation-settings: "wght" 600;
text-transform: uppercase;
}
.pp-int-cta-note {
font-family: var(--font-script);
font-size: calc(var(--fs-btn-note) * var(--cta-f));
line-height: calc(var(--lh-btn-note) * var(--cta-f));
}
.pp-int-cta-faces {
display: inline-grid;
}
.pp-int-cta-face {
grid-area: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
gap: calc(var(--cta-gap) * var(--cta-f));
transition:
opacity var(--dur-blur-swap) var(--ease-reveal),
filter var(--dur-blur-swap) var(--ease-reveal);
}
.pp-int-cta-face + .pp-int-cta-face,
.pp-int-cta:is(:hover, :focus-visible) .pp-int-cta-face:first-child {
opacity: 0;
filter: blur(var(--reveal-blur));
}
.pp-int-cta:is(:hover, :focus-visible) .pp-int-cta-face + .pp-int-cta-face {
opacity: 1;
filter: none;
transition-delay: calc(var(--dur-blur-swap) / 2);
}
.pp-int-cta--wave {
position: relative;
isolation: isolate;
background: none;
color: var(--color-ink);
}
.pp-int-cta--wave::before,
.pp-int-cta--wave::after {
content: "";
position: absolute;
--wave-w: var(--wave-rest-w, calc(100% + 2 * var(--hint-spot-h)));
--wave-h: var(--wave-rest-h, calc(100% + 2 * var(--hint-spot-v)));
--wave-dx: var(--wave-rest-dx, 0px);
--wave-dy: var(--wave-rest-dy, var(--hint-spot-dy));
top: 50%;
left: 50%;
width: var(--wave-w);
height: var(--wave-h);
translate: calc(-50% + var(--wave-dx)) calc(-50% + var(--wave-dy));
z-index: -1;
background: var(--dent-image) center / 100% 100% no-repeat;
pointer-events: none;
transition:
opacity var(--dur-icon-hover) var(--ease-icon-hover),
width var(--dur-icon-hover) var(--ease-icon-hover),
height var(--dur-icon-hover) var(--ease-icon-hover),
translate var(--dur-icon-hover) var(--ease-icon-hover);
}
.pp-int-cta--wave:hover::before,
.pp-int-cta--wave:hover::after,
.pp-int-cta--wave:focus-visible::before,
.pp-int-cta--wave:focus-visible::after,
:root[data-wave-view="hover"] .pp-int-cta--wave::before,
:root[data-wave-view="hover"] .pp-int-cta--wave::after {
--wave-w: var(--wave-hover-w, calc(100% + 2 * var(--hint-spot-h)));
--wave-h: var(--wave-hover-h, calc(100% + 2 * var(--hint-spot-v)));
--wave-dx: var(--wave-hover-dx, 0px);
--wave-dy: var(--wave-hover-dy, var(--hint-spot-dy));
}
:root[data-wave-view="rest"] .pp-int-cta--wave:is(:hover, :focus-visible)::before,
:root[data-wave-view="rest"] .pp-int-cta--wave:is(:hover, :focus-visible)::after {
--wave-w: var(--wave-rest-w, calc(100% + 2 * var(--hint-spot-h)));
--wave-h: var(--wave-rest-h, calc(100% + 2 * var(--hint-spot-v)));
--wave-dx: var(--wave-rest-dx, 0px);
--wave-dy: var(--wave-rest-dy, var(--hint-spot-dy));
}
.pp-int-cta--wave::before {
scale: 1 -1;
}
.pp-int-cta--wave::after {
opacity: 0;
}
.pp-int-cta--wave:hover::before,
.pp-int-cta--wave:focus-visible::before {
opacity: 0;
}
.pp-int-cta--wave:hover::after,
.pp-int-cta--wave:focus-visible::after {
opacity: 1;
}
.pp-int-cta--wave:not([aria-disabled]):hover,
.pp-int-cta--wave:focus-visible {
scale: 1;
outline: none;
}
.pp-int-cta--wave .pp-int-cta-label {
font-family: var(--font-sans);
font-size: calc(var(--fs-btn-wave) * var(--cta-f));
font-variation-settings: var(--vf-light);
text-transform: none;
transition: scale var(--dur-grow) var(--ease-grow);
}
.pp-int-cta--wave:hover .pp-int-cta-label,
.pp-int-cta--wave:focus-visible .pp-int-cta-label {
scale: var(--scale-hint-hover);
}
:root[data-wave-view="rest"] .pp-int-cta--wave::before { opacity: 1; }
:root[data-wave-view="rest"] .pp-int-cta--wave::after { opacity: 0; }
:root[data-wave-view="rest"] .pp-int-cta--wave .pp-int-cta-label { scale: 1; }
:root[data-wave-view="hover"] .pp-int-cta--wave::before { opacity: 0; }
:root[data-wave-view="hover"] .pp-int-cta--wave::after { opacity: 1; }
:root[data-wave-view="hover"] .pp-int-cta--wave .pp-int-cta-label { scale: var(--scale-hint-hover); }
.pp-int[data-tiny] .pp-int-note {
display: none;
}
.pp-int[data-cols] {
width: calc(100% + var(--int-bleed, 0px));
}
.pp-int[data-cols] .pp-int-list {
display: grid;
grid-template-columns:
minmax(var(--int-col-1, 0px), 1fr)
minmax(var(--int-col-2, 0px), 1fr);
align-items: start;
width: auto;
max-width: none;
column-gap: calc(var(--int-cols-gap) * var(--f));
margin-left: 0;
}
.pp-int[data-cols] {
padding-left: calc((var(--int-list-x-cols) + var(--int-table-shift)) * var(--f));
padding-right: calc((var(--int-list-x-cols) - var(--int-table-shift)) * var(--f));
}
.pp-int[data-cols][data-compact] {
padding-inline: calc(var(--int-cols-x, var(--int-list-x-compact)) * var(--f));
}
.pp-int[data-cols]:not([data-compact]) > .pp-int-cta,
.pp-int[data-cols]:not([data-compact]) > .pp-acc-ledger {
translate: calc(var(--int-table-shift) * var(--f) * -1) 0;
}
.pp-int > .pp-acc-ledger {
margin-top: var(--int-cta-gap);
}
.pp-int[data-cols] .pp-int-freq {
position: static;
display: block;
}
.pp-int .pp-int-item--l0:has(> .pp-chan-eye) {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
position: relative;
}
.pp-int .pp-int-item--l0:has(> .pp-chan-eye) > .pp-chan-eye {
position: absolute;
top: 0;
height: calc(var(--lh-int-item) * var(--f));
right: calc((var(--int-eye-gap) - var(--int-eye-pad)) * var(--f) + 100%);
}
.pp-int .pp-int-item--l0 > :is(.pp-chan-eye, .pp-chan-trash) {
width: calc((var(--int-eye-size) + var(--int-eye-pad) * 2) * var(--f));
margin-inline: calc(var(--int-eye-pad) * var(--f) * -1);
}
.pp-int .pp-int-item--l0 > :is(.pp-chan-eye, .pp-chan-trash) > svg {
width: calc(var(--int-eye-size) * var(--f));
height: calc(var(--int-eye-size) * var(--f));
}
.pp-int .pp-int-item--l0 > .pp-chan-trash {
width: calc((var(--int-trash-size) + var(--int-eye-pad) * 2) * var(--f));
}
.pp-int .pp-int-item--l0 > .pp-chan-trash > svg {
width: calc(var(--int-trash-size) * var(--f));
height: calc(var(--int-trash-size) * var(--f));
}
.pp-int .pp-int-item--l0 > .pp-chan-trash {
opacity: 0;
pointer-events: none;
}
.pp-int .pp-int-item--l0 > .pp-chan-eye {
order: -1;
flex: none;
opacity: 0;
scale: var(--smoke-scale);
filter: blur(var(--int-swap-blur));
translate: var(--int-eye-slide) 0;
pointer-events: none;
transition:
opacity var(--dur-int-eye) var(--ease-smoke-hide),
scale var(--dur-int-eye) var(--ease-sink),
filter var(--dur-int-eye) var(--ease-smoke-cloud),
translate var(--dur-int-eye) var(--ease-sink);
}
.pp-int .pp-int-item--l0:hover > :is(.pp-chan-eye, .pp-chan-trash),
.pp-int .pp-int-item--l0:has(:focus-visible) > :is(.pp-chan-eye, .pp-chan-trash) {
opacity: 1;
scale: 1;
filter: blur(0);
translate: 0 0;
pointer-events: auto;
transition:
opacity var(--dur-int-eye) var(--ease-smoke-show),
scale var(--dur-int-eye) var(--ease-reveal),
filter var(--dur-int-eye) var(--ease-smoke-clear),
translate var(--dur-int-eye) var(--ease-reveal);
transition-delay: var(--wait-int-eye);
}
.pp-chan .pp-int-item--l0:has(> .pp-chan-trash) {
grid-template-columns: max-content auto;
justify-content: start;
}
.pp-chan .pp-int-item--l0 > .pp-chan-trash {
grid-column: 2;
grid-row: 1;
margin-left: max(0px, calc((var(--int-trash-gap) - var(--int-eye-pad) - var(--int-eye-gap)) * var(--f)));
}
.pp-int .pp-int-item--l0 > .pp-chan-trash {
transition:
opacity var(--dur-int-eye) var(--ease-smoke-hide),
scale var(--dur-int-eye) var(--ease-sink),
filter var(--dur-int-eye) var(--ease-smoke-cloud),
translate var(--dur-int-eye) var(--ease-sink),
color var(--dur-hover) var(--ease-fade);
}
.pp-int .pp-int-item--l0 > .pp-chan-trash:hover,
.pp-int .pp-int-item--l0 > .pp-chan-trash:focus-visible {
color: var(--color-danger);
}
.pp-int .pp-int-item--l0:has(> .pp-chan-eye) > .pp-int-row {
grid-column: 1;
grid-row: 1;
width: 100%;
min-width: min-content;
}
.pp-int .pp-int-item--l0:has(> .pp-chan-eye) > .pp-int-reveal {
grid-column: 1;
grid-row: 2;
}
.pp-int[data-cols] .pp-int-row {
width: 100%;
}
.pp-int[data-cols] .pp-int-note {
opacity: 0;
visibility: hidden;
}
.pp-int[data-cols='4'] .pp-int-list {
grid-template-columns:
minmax(var(--int-col-1, 0px), 1fr)
minmax(var(--int-col-2, 0px), 1fr)
minmax(var(--int-col-3, 0px), 1fr)
minmax(var(--int-col-4, 0px), 1fr);
}
.pp-int[data-cols='3'] .pp-int-list {
grid-template-columns:
minmax(var(--int-col-1, 0px), 1fr)
minmax(var(--int-col-2, 0px), 1fr)
minmax(var(--int-col-3, 0px), 1fr);
}
.pp-fold-toggle {
position: absolute;
top: var(--fold-toggle-top);
bottom: 0;
left: calc(var(--fold-open) + var(--fold-toggle-x));
width: var(--fold-toggle-w);
z-index: calc(var(--z-rail) - 1);
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
transition: left var(--dur-fold) var(--ease-reveal);
}
.pp-fold-toggle:focus-visible {
outline: none;
}
.pp-fold-zone {
position: absolute;
left: 0;
width: var(--fold-toggle-x);
z-index: calc(var(--z-rail) - 1);
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.pp-rail-seal {
transform-origin: left center;
transition: scale var(--dur-grow) var(--ease-grow);
}
.pp-rail-seal:hover {
scale: var(--scale-text-hover);
}
.pp-rail-label:not(.pp-editable) {
cursor: pointer;
}
.pp-rail-row .pp-rail-label {
text-align: left;
}
.pp-rail-dots {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: var(--kebab);
height: var(--kebab);
}
.pp-rail-dots::before {
content: "";
position: absolute;
inset: calc(var(--rail-kebab-hit) * -1);
}
.pp-rail-dots {
isolation: isolate;
}
.pp-rail-dots::after {
content: "";
position: absolute;
z-index: -1;
inset: calc(var(--rail-dots-pad) * -1);
border-radius: var(--radius-hit);
background: transparent;
pointer-events: none;
transition: background-color var(--dur-hover) var(--ease-fade);
}
.pp-rail-dots--on:hover::after,
.pp-rail-dots--on:focus-visible::after {
background: var(--color-icon-hover);
}
.pp-rail-kebab-icon {
width: var(--rail-kebab-icon);
height: var(--rail-kebab-icon);
opacity: 0;
scale: var(--rail-dots-from);
transition:
opacity var(--dur-rail-dots-out) var(--ease-fade),
scale var(--dur-rail-dots-out) var(--ease-fade);
}
.pp-rail-dots--on .pp-rail-kebab-icon,
.pp-rail-dots:focus-visible .pp-rail-kebab-icon {
opacity: 1;
scale: 1;
transition:
opacity var(--dur-rail-dots-in) var(--ease-fade),
scale var(--dur-note-grow) var(--ease-note-grow);
}
.pp-rail-dots--on:hover .pp-rail-kebab-icon,
.pp-rail-dots--on:focus-visible .pp-rail-kebab-icon {
scale: var(--scale-dots-hover);
}
@media (hover: none) {
.pp-rail-row--active .pp-rail-kebab-icon {
opacity: 1;
scale: 1;
}
}
.pp-kebab-slot > button {
transition:
opacity var(--dur-rail-dots-in) var(--ease-fade),
scale var(--dur-note-grow) var(--ease-note-grow);
}
.pp-shell[data-rail-dots] .pp-kebab-slot {
pointer-events: none;
}
.pp-shell[data-rail-dots] .pp-kebab-slot > button {
opacity: 0;
scale: var(--rail-dots-from);
transition:
opacity var(--dur-rail-dots-out) var(--ease-fade),
scale var(--dur-rail-dots-out) var(--ease-fade);
}
.pp-rail-pinned-last {
margin-bottom: var(--rail-pin-gap);
}
.pp-menu-item--danger:hover {
color: var(--color-danger);
}
.pp-rail-drop {
position: absolute;
left: 0;
display: flex;
width: var(--rail-seal);
height: var(--rail-seal);
margin-top: 0;
pointer-events: none;
transition: top var(--dur-pop) var(--ease-pop);
}
.pp-rail-row {
padding-left: calc(var(--rail-seal) + var(--rail-label-gap));
}
.pp-rail-list li {
pointer-events: auto;
}
.pp-rail-row {
cursor: pointer;
}
.pp-rail-row::before {
content: "";
position: absolute;
z-index: -1;
inset-block: calc(var(--rail-row-gap) / -2);
left: calc(var(--rail-list-x) * -1);
right: 0;
cursor: pointer;
}
.pp-rail-row-sign {
position: absolute;
top: 50%;
left: 0;
display: grid;
place-items: center;
width: var(--rail-seal);
height: var(--rail-seal);
translate: 0 -50%;
color: var(--color-ink);
pointer-events: none;
transition: opacity var(--dur-pop) var(--ease-fade);
}
.pp-rail-row--active .pp-rail-row-sign {
opacity: 0;
}
.pp-rail-seal .pp-rail-sign {
transition:
opacity var(--dur-pop) var(--ease-fade),
stroke-width var(--dur-icon-hover) var(--ease-icon-hover),
scale var(--dur-icon-hover) var(--ease-icon-hover);
}
.pp-rail-seal[aria-current='page'] .pp-rail-sign {
opacity: 0;
}
.pp-rail-row:not(.pp-rail-row--active) .pp-rail-label {
font-variation-settings: var(--vf-nav-rest);
}
.pp-rail-label {
transition:
scale var(--dur-grow) var(--ease-grow),
font-variation-settings var(--dur-pop) var(--ease-fade);
}
.pp-rail-seal {
width: var(--rail-seal);
height: var(--rail-seal);
color: var(--color-ink);
}
.pp-rail-sign {
width: var(--rail-sign);
height: var(--rail-sign);
}
.pp-rail-archive-toggle {
transition: translate var(--dur-pop) var(--ease-pop);
}
.pp-rail-icon {
width: var(--rail-icon);
height: var(--rail-icon);
}
.pp-rail-archive-toggle .pp-rail-icon {
transform-origin: 50% 50%;
}
.pp-rail-flight {
position: fixed;
z-index: var(--z-popover);
pointer-events: none;
}
.pp-rail-flight > * {
position: absolute;
inset: 0 auto auto 0;
}
.pp-rail-flight > li {
width: 100%;
list-style: none;
}
.pp-rail-peek {
inset: 0 auto 0 0;
width: calc(var(--fold-edge) + var(--fold-shift));
background: var(--menu-bg);
box-shadow: var(--shadow-above);
animation: pp-rail-peek-in var(--dur-pop) var(--ease-pop) both;
}
@keyframes pp-rail-peek-in {
from {
translate: calc(var(--reveal-y) * -2) 0;
opacity: 0;
}
}
.pp-rail-archive-toggle[aria-disabled='true'] {
cursor: default;
}
.pp-rail-archive {
left: var(--rail-list-x);
gap: var(--rail-row-gap);
transition: top var(--dur-pop) var(--ease-pop);
}
.pp-rail-archive-item {
animation: pp-rail-rise var(--dur-pop) var(--ease-pop) both;
}
@keyframes pp-rail-rise {
from {
translate: 0 var(--rail-rise, calc(60 * var(--vh)));
opacity: 0;
}
to {
translate: 0 0;
opacity: 1;
}
}
.pp-rail-archive .pp-rail-label {
font-variation-settings: var(--vf-nav-rest);
cursor: pointer;
}
.pp-rail-archive .pp-rail-row--current .pp-rail-label {
font-variation-settings: var(--vf-nav);
}
.pp-rail-archive-title {
margin-left: var(--rail-label-gap);
font-family: var(--font-sans);
font-size: var(--fs-nav);
line-height: var(--lh-nav);
font-variation-settings: var(--vf-nav-rest);
color: var(--color-ink);
white-space: nowrap;
animation: pp-tip-in var(--dur-pop) var(--ease-fade) both;
}
.pp-rail-off {
cursor: default;
color: var(--color-grey-note);
}
.pp-shell[data-sheet] .pp-fold-toggle {
left: calc(var(--fold-peek, 0px) + var(--fold-toggle-x) + var(--fold-phone-x, 0px));
width: max(var(--fold-toggle-w), var(--touch-min));
z-index: var(--z-fold-open);
}
.pp-menu-sheet {
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--fold-peek, 0px) + var(--fold-cx) + var(--fold-phone-x, 0px) + var(--fold-thick) / 2);
z-index: var(--z-menu-sheet);
background: var(--color-paper);
mask-image: linear-gradient(to right, #000 calc(100% - var(--fold-edge-soft-w)), transparent);
pointer-events: none;
transition: width var(--dur-fold) var(--ease-reveal);
}
.pp-shell[data-sheet]:not([data-peek]) .pp-menu-sheet {
width: calc(var(--fold-cx) + var(--fold-phone-x, 0px) + var(--fold-thick) / 2);
visibility: hidden;
transition:
width var(--dur-fold) var(--ease-reveal),
visibility 0s var(--dur-fold);
}
.pp-shell[data-sheet] .pp-rail-peek {
display: none;
}
.pp-shell[data-sheet][data-peek] .pp-fold {
z-index: var(--z-fold-open);
}
.pp-shell[data-sheet]:not([data-peek]) {
--fold-z-delay: var(--dur-fold);
}
.pp-shell[data-sheet] {
--rail-label-w: calc(
var(--fold-edge) + var(--fold-shift)
- var(--rail-list-x) - var(--rail-seal) - var(--rail-label-gap) - 8px
- var(--rail-label-gap) - var(--kebab)
);
}
:root:has(.pp-shell[data-sheet] nav[data-rail][data-peek]) :is(.pp-notes, .pp-talk-orb, .composer-dock) {
visibility: hidden;
}
:root[data-phone] {
--fold-phone-x: var(--phone-fold-x);
--kebab-phone-x: var(--phone-kebab-x);
}
.pp-shell[data-sheet] [data-canvas] {
transition: translate var(--dur-fold) var(--ease-reveal);
}
.pp-shell[data-sheet][data-peek] [data-canvas] {
translate: calc(var(--fold-peek, 0px) * var(--menu-sheet-content-share) / -100) 0;
}
:root[data-phone] nav[data-rail] {
transition: opacity var(--dur-fold) var(--ease-reveal);
}
:root[data-phone] nav[data-rail]:not([data-peek]) {
opacity: 0;
pointer-events: none;
}
:root[data-phone] nav[data-rail]:not([data-peek]) * {
pointer-events: none !important;
}
.pp-shell .pp-fold {
opacity: 0 !important;
}
.pp-menu-button {
position: absolute;
left: calc(var(--rail-list-x) + var(--rail-row-h) / 2 - var(--touch-min) / 2);
top: calc(var(--rail-plus-y) + var(--rail-row-h) / 2 - var(--touch-min) / 2);
z-index: calc(var(--z-rail) + 1);
display: grid;
place-items: center;
width: var(--touch-min);
height: var(--touch-min);
padding: 0;
border: 0;
background: transparent;
color: var(--color-ink);
cursor: pointer;
translate: var(--fold-peek, 0px) 0;
transition:
translate var(--dur-fold) var(--ease-reveal),
opacity var(--dur-fold) var(--ease-reveal);
}
.pp-menu-button::before {
content: '';
position: absolute;
inset: calc(var(--menu-button-hit-pad) * -1);
}
.pp-menu-button > span {
grid-area: 1 / 1;
justify-self: start;
margin-left: calc((var(--touch-min) - var(--menu-sign-long)) / 2);
width: var(--menu-sign-long);
height: var(--icon-line);
border-radius: var(--icon-line);
background: currentColor;
transform-origin: center;
transition:
translate var(--dur-fold) var(--ease-reveal),
rotate var(--dur-fold) var(--ease-reveal),
width var(--dur-fold) var(--ease-reveal);
}
.pp-menu-button > span:first-child {
translate: 0 calc(var(--menu-sign-step) / -2);
}
.pp-menu-button > span:last-child {
width: var(--menu-sign-short);
translate: 0 calc(var(--menu-sign-step) / 2);
}
.pp-menu-button > span {
transform-origin: 0 50%;
}
:root { --avatar-now: var(--icon-avatar); }
:root:has(.pp-account-photo) { --avatar-now: var(--icon-avatar-photo); }
.pp-menu-button[data-open] {
translate: 0 0;
}
.pp-menu-button[data-open] > span {
width: var(--menu-sign-arrow);
margin-left: calc((var(--touch-min) - var(--menu-sign-arrow) * 0.7) / 2);
}
.pp-menu-button[data-open] > span:first-child {
translate: 0 0;
rotate: calc(var(--menu-sign-arrow-angle) * -1);
}
.pp-menu-button[data-open] > span:last-child {
translate: 0 0;
rotate: var(--menu-sign-arrow-angle);
}
:root[data-phone] .pp-shell[data-bar-hidden]:not([data-peek]) .pp-menu-button {
translate: 0 calc((var(--rail-plus-y) + var(--touch-min)) * -1);
opacity: 0;
pointer-events: none;
}
:root[data-phone] {
--dur-fold: var(--dur-fold-phone);
}
:root[data-phone] nav[data-rail][data-peek] {
--rail-row-h: var(--phone-rail-row-h);
--rail-row-gap: var(--phone-rail-row-gap);
}
:root[data-phone] nav[data-rail][data-peek] .pp-rail-label {
font-size: var(--phone-rail-fs);
line-height: var(--phone-rail-row-h);
}
:root[data-phone] nav[data-rail][data-peek] {
--rail-sign: var(--phone-rail-sign);
--rail-icon: var(--phone-rail-sign);
--rail-seal: var(--phone-rail-seal);
display: grid;
grid-template-columns: minmax(0, max-content);
grid-template-rows: minmax(0, max-content) auto;
justify-content: center;
align-content: start;
padding-inline: var(--phone-gutter);
right: 0;
}
:root[data-phone] nav[data-rail][data-peek] > .pp-rail-list,
:root[data-phone] nav[data-rail][data-peek] > .pp-rail-foot {
position: relative;
inset: auto !important;
}
:root[data-phone] nav[data-rail][data-peek] .pp-dent > svg,
:root[data-phone] nav[data-rail][data-peek] .pp-rail-drop svg {
width: 100%;
height: 100%;
}
:root[data-phone] nav[data-rail][data-peek] .pp-dent {
width: var(--rail-row-h) !important;
height: var(--rail-row-h) !important;
padding: calc((var(--rail-row-h) - var(--phone-rail-sign)) / 2);
}
:root[data-phone] nav[data-rail][data-peek] > .pp-rail-foot {
flex: none;
margin-top: var(--phone-rail-foot-gap);
gap: var(--rail-row-gap) !important;
}
:root[data-phone] nav[data-rail][data-peek] {
padding-block: var(--phone-rail-top) var(--rail-bottom);
}
:root[data-phone] nav[data-rail][data-peek] > .pp-rail-list {
flex: 0 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
padding-block: calc(var(--rail-row-gap) / 2);
margin-block: calc(var(--rail-row-gap) / -2);
padding-inline: var(--phone-rail-bleed);
margin-inline: calc(var(--phone-rail-bleed) * -1);
}
:root[data-phone] nav[data-rail][data-peek] > .pp-rail-list > .pp-rail-drop {
left: var(--phone-rail-bleed);
}
.pp-rail-foot-rule {
display: none !important;
}
:root[data-phone] nav[data-rail][data-peek] li[data-chat] {
-webkit-touch-callout: none;
user-select: none;
}
nav[data-rail] li[data-chat] {
translate: 0 var(--shift, 0px);
transition: translate var(--dur-block-move) var(--ease-reveal);
}
nav[data-rail] li[data-chat] :is(a, img, svg) {
-webkit-user-drag: none;
user-drag: none;
}
nav[data-rail] li[data-chat][data-dragging] {
visibility: hidden;
translate: var(--drag-x, 0) var(--drag-y, 0);
}
nav[data-rail][data-drag-open] > .pp-rail-list > .pp-rail-drop {
visibility: hidden;
}
.pp-rail-drag-ghost {
position: fixed;
z-index: 1;
pointer-events: none;
translate: var(--drag-x, 0) var(--drag-y, 0);
scale: var(--scale-drag-lift);
transform-origin: var(--rail-row-h) 50%;
animation: pp-drag-lift var(--dur-grow) var(--ease-grow);
}
.pp-rail-drag-ghost[data-over] {
scale: var(--scale-drag-over);
opacity: var(--drag-over-opacity);
transition: scale var(--dur-grow) var(--ease-grow), opacity var(--dur-grow) var(--ease-grow);
}
.pp-rail-drag-ghost > li {
list-style: none;
}
.pp-rail-drag-ghost[data-back] {
scale: 1;
transition:
translate var(--dur-block-move) var(--ease-reveal),
scale var(--dur-block-move) var(--ease-reveal),
opacity var(--dur-block-move) var(--ease-reveal);
}
.pp-rail-drag-ghost[data-eaten] {
scale: var(--scale-drop-eaten);
opacity: 0;
transition:
translate var(--dur-grow) var(--ease-grow),
scale var(--dur-grow) var(--ease-grow),
opacity var(--dur-grow) var(--ease-fade);
}
@keyframes pp-drag-lift {
from { scale: 1; }
}
.pp-rail-foot-item .pp-rail-icon {
transition:
scale var(--dur-grow) var(--ease-grow),
translate var(--dur-grow) var(--ease-grow),
opacity var(--dur-blur-swap) var(--ease-reveal),
filter var(--dur-blur-swap) var(--ease-reveal);
}
nav[data-rail][data-drag] :is(.pp-rail-archive-toggle, .pp-rail-stats) .pp-rail-icon {
scale: calc(var(--scale-drop-ready) + var(--pull, 0) * (var(--scale-drop-over) - var(--scale-drop-ready)));
translate:
calc(var(--pull-x, 0) * var(--pull, 0) * var(--drop-pull-reach))
calc(var(--pull-y, 0) * var(--pull, 0) * var(--drop-pull-reach));
}
nav[data-rail][data-drag] :is(.pp-rail-archive-toggle, .pp-rail-stats)[data-drop-over] .pp-rail-icon {
scale: var(--scale-drop-over);
}
nav[data-rail][data-drag] .pp-rail-archive-toggle.pp-rail-off {
color: var(--color-ink);
}
.pp-rail-foot > .pp-rail-foot-item,
.pp-rail-foot > * > .pp-rail-foot-item {
align-self: flex-start;
}
.pp-rail-swap {
display: inline-grid;
}
.pp-rail-swap > .pp-rail-icon {
grid-area: 1 / 1;
}
.pp-rail-swap > .pp-rail-trash {
color: var(--color-danger);
opacity: 0;
filter: blur(var(--reveal-blur));
pointer-events: none;
}
nav[data-rail][data-drag-trash] .pp-rail-swap > .pp-rail-icon:not(.pp-rail-trash) {
opacity: 0;
filter: blur(var(--reveal-blur));
}
nav[data-rail][data-drag-trash] .pp-rail-swap > .pp-rail-trash {
opacity: 1;
filter: none;
}
nav[data-rail][data-drag] .pp-rail-archive-toggle[data-drop-over] .pp-rail-foot-label {
opacity: 0;
transition: opacity var(--dur-grow) var(--ease-grow);
}
nav[data-rail][data-drag] > .pp-rail-list {
overflow: hidden;
scrollbar-width: none;
}
nav[data-rail][data-drag] > .pp-rail-list::-webkit-scrollbar {
display: none;
}
:root[data-phone] nav[data-rail][data-peek] > .pp-rail-foot {
margin-top: var(--phone-rail-line-gap);
}
:root[data-phone] nav[data-rail][data-peek] .pp-rail-foot-rule {
display: block !important;
width: auto;
margin-inline: calc((100% - (var(--win-w, 100vw) - var(--phone-rail-rule-inset) * 2)) / 2);
margin-bottom: var(--phone-rail-foot-gap-full);
}
:root[data-phone] nav[data-rail][data-peek][data-full] > .pp-rail-list {
mask-image: linear-gradient(to bottom, #000 calc(100% - var(--phone-rail-fade)), transparent);
}
:root[data-phone] .pp-rail-peek {
display: none;
}
:root[data-phone] .pp-shell[data-sheet] .pp-menu-sheet,
:root[data-phone] .pp-shell[data-sheet]:not([data-peek]) .pp-menu-sheet {
width: var(--win-w, 100vw);
mask-image: none;
}
:root[data-phone] .pp-shell[data-sheet][data-peek] .pp-menu-sheet {
opacity: 1;
visibility: visible;
transition: opacity var(--dur-reveal) var(--ease-reveal);
}
:root[data-phone] .pp-shell[data-sheet]:not([data-peek]) .pp-menu-sheet {
opacity: 0;
transition:
opacity var(--dur-fold) var(--ease-reveal),
visibility 0s var(--dur-fold);
}
:root[data-phone] .pp-shell[data-sheet][data-peek] [data-canvas] {
translate: none;
}
:root[data-phone] nav[data-rail][data-peek] > :is(.pp-rail-list, .pp-rail-foot) {
animation: pp-blur-in var(--dur-reveal) var(--ease-smoke-show) both;
}
:root[data-phone] .pp-menu-button {
transition-duration: var(--dur-menu-sign-phone);
}
:root[data-phone] nav[data-rail][data-peek] .pp-rail-foot-item .pp-rail-icon {
margin-inline: calc((var(--rail-seal) - var(--phone-rail-sign)) / 2);
}
.pp-rail-foot-label {
display: none;
}
:root[data-phone] nav[data-rail][data-peek] .pp-rail-foot-item {
display: flex;
align-items: center;
gap: var(--rail-label-gap);
}
:root[data-phone] nav[data-rail][data-peek] .pp-rail-foot-label {
display: inline;
font-family: var(--font-sans);
font-size: var(--phone-rail-fs);
line-height: var(--phone-rail-row-h);
font-variation-settings: var(--vf-nav-rest);
}
:root[data-phone] .pp-kebab-slot,
:root[data-phone] .pp-rail-dots {
display: none !important;
}
:root[data-phone] .pp-topbar {
transition:
translate var(--dur-fold) var(--ease-reveal),
opacity var(--dur-fold) var(--ease-reveal);
}
:root[data-phone] .pp-shell[data-bar-hidden] .pp-topbar {
translate: 0 calc((var(--logo-y) + var(--logo-h)) * -1);
opacity: 0;
}
:root[data-phone] .pp-shell[data-bar-hidden] .pp-topbar * {
pointer-events: none !important;
}
.pp-rail-folder {
display: flex;
flex-direction: column;
gap: var(--rail-row-gap);
}
.pp-rail-folder-head {
height: var(--rail-row-h);
gap: var(--rail-label-gap);
padding: 0;
border: 0;
background: none;
color: var(--color-ink);
cursor: pointer;
}
.pp-rail-folder-head > .pp-rail-icon {
flex: none;
box-sizing: border-box;
width: var(--rail-seal);
padding-inline: calc((var(--rail-seal) - var(--rail-sign)) / 2);
}
.pp-rail-folder-head > .pp-rail-label {
font-variation-settings: var(--vf-nav-rest);
}
.pp-rail-folder-list {
gap: var(--rail-row-gap);
}
.pp-rail-folder-list .pp-rail-archive-item {
animation: pp-blur-in var(--dur-blur-swap) var(--ease-smoke-show) both;
}
.pp-rail-folder-list .pp-rail-label {
font-variation-settings: var(--vf-nav-rest);
color: var(--color-grey-note);
}
.pp-rail-folder-list .pp-rail-row--current .pp-rail-label {
color: var(--color-ink);
}
.pp-rail-archive-toggle--up {
display: none !important;
}
:root[data-phone] .pp-rail-flight {
--rail-row-h: var(--phone-rail-row-h);
--rail-sign: var(--phone-rail-sign);
--rail-icon: var(--phone-rail-sign);
--rail-seal: var(--phone-rail-seal);
}
:root[data-phone] .pp-rail-flight .pp-rail-label {
font-size: var(--phone-rail-fs);
line-height: var(--phone-rail-row-h);
}
.pp-pad-spot::before,
.pp-pad-spot::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
}
.pp-pad-spot::before {
background: radial-gradient(closest-side, var(--pad-shadow-color, var(--switch-spot-shadow-color)) 0%, transparent 100%);
translate: 0 var(--pad-shadow-y, var(--switch-spot-shadow-y));
scale: calc(var(--pad-shadow-size, var(--switch-spot-shadow-size)) / 100);
filter: blur(var(--pad-shadow-blur, var(--switch-spot-shadow-blur)));
}
.pp-pad-spot::after {
background: radial-gradient(
closest-side,
var(--pad-light-color, var(--switch-spot-light-color)) calc(var(--pad-light-core, var(--switch-spot-light-core)) * 1%),
transparent 100%
);
translate: 0 var(--pad-light-y, var(--switch-spot-light-y));
filter: blur(var(--pad-light-blur, var(--switch-spot-light-blur)));
}
.pp-relief-spot {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity var(--dur-spot-look) var(--ease-fade);
}
.pp-relief-spot[data-on] {
opacity: 1;
}
.pp-relief-spot > canvas {
position: absolute;
}
.pp-relief-spot[data-flat] {
background: var(--dent-image) center / 100% 100% no-repeat;
}
.pp-relief-spot[data-flat] > canvas {
display: none;
}
.pp-spot-btn {
position: relative;
isolation: isolate;
display: block;
color: var(--color-ink);
}
.pp-spot-btn:focus-visible {
outline: none;
}
.pp-spot-btn-spot {
position: absolute;
inset:
calc(-1 * var(--spot-btn-top))
calc(-1 * var(--spot-btn-right))
calc(-1 * var(--spot-btn-bottom))
calc(-1 * var(--spot-btn-left));
translate: var(--spot-btn-dx) var(--spot-btn-dy);
z-index: -1;
pointer-events: none;
}
.pp-spot-btn-pad {
position: absolute;
inset: calc(var(--nav-pad-v) * -1) calc(var(--nav-pad-h) * -1);
z-index: -1;
pointer-events: none;
opacity: 0;
scale: var(--nav-pad-from);
transition:
opacity var(--dur-grow) var(--ease-fade),
scale var(--dur-grow) var(--ease-grow);
--pad-shadow-color: var(--nav-pad-shadow-color);
--pad-shadow-y: var(--nav-pad-shadow-y);
--pad-shadow-size: var(--nav-pad-shadow-size);
--pad-shadow-blur: var(--nav-pad-shadow-blur);
--pad-light-color: var(--nav-pad-light-color);
--pad-light-core: var(--nav-pad-light-core);
--pad-light-y: var(--nav-pad-light-y);
--pad-light-blur: var(--nav-pad-light-blur);
}
.pp-spot-btn--quiet:is(:hover, :focus-visible) .pp-spot-btn-pad,
:root[data-relief-view="hover"] .pp-spot-btn--quiet .pp-spot-btn-pad {
opacity: 1;
scale: 1;
}
.pp-spot-btn-label {
display: block;
font-family: var(--font-sans);
font-variation-settings: var(--vf-nav);
font-size: var(--fs-nav);
line-height: var(--lh-nav);
letter-spacing: var(--ls-nav);
white-space: nowrap;
hyphens: manual;
transition: scale var(--dur-grow) var(--ease-grow);
}
.pp-spot-btn:is(:hover, :focus-visible) .pp-spot-btn-label {
scale: var(--scale-hint-hover);
}
:root[data-phone] .pp-spot-btn-pad {
display: none;
}
:root[data-phone] .pp-spot-btn:is(:hover, :focus-visible) .pp-spot-btn-label {
scale: none;
}
.pp-pad-group {
position: relative;
}
.pp-pad-group-spot {
position: absolute;
left: calc(var(--pg-x, 0px) - var(--pad-group-h));
top: calc(var(--pg-y, 0px) - var(--pad-group-v));
width: calc(var(--pg-w, 0px) + var(--pad-group-h) * 2);
height: calc(var(--pg-h, 0px) + var(--pad-group-v) * 2);
z-index: -1;
pointer-events: none;
transition:
left var(--dur-grow) var(--ease-grow),
top var(--dur-grow) var(--ease-grow),
width var(--dur-grow) var(--ease-grow),
height var(--dur-grow) var(--ease-grow);
}
.pp-cover {
position: relative;
height: var(--l-cover-h);
overflow: clip;
color: var(--color-ink);
--logo-w: calc(var(--cover-logo-w) * var(--vw));
--copy-x: calc(var(--cover-logo-x) * var(--vw));
--copy-y: calc(var(--cover-logo-y) * 1%);
--copy-right: calc(var(--cover-copy-right) * var(--vw));
--art-w: calc(var(--cover-img-w) * var(--vw));
--art-left: calc((var(--cover-img-x) - var(--cover-img-w) / 2) * var(--vw));
--art-y: calc(var(--cover-img-y) * 1%);
--left-max: calc(var(--art-left) + var(--art-w) * var(--cover-text-edge) / 100 - var(--copy-x) - var(--cover-text-edge-gap));
--right-w: min(
calc(var(--em-cover-right) * var(--fs-body)),
calc(100 * var(--vw) - var(--copy-right) - var(--art-left) - var(--art-w) * var(--cover-obj-right) / 100 - var(--cover-text-edge-gap))
);
}
.pp-cover-art {
position: absolute;
left: var(--art-left);
top: var(--art-y);
width: var(--art-w);
aspect-ratio: 2048 / 1279;
padding: 0;
border: 0;
background: none;
translate:
calc(var(--drift-x, 0) * var(--cover-drift-art) * var(--vw))
calc(-50% + var(--drift-y, 0) * var(--cover-drift-art) * var(--vw));
cursor: pointer;
}
.pp-cover-art:focus-visible {
outline: none;
}
.pp-cover-frame {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
opacity: 0;
filter: blur(var(--reveal-blur));
user-select: none;
-webkit-user-drag: none;
transition:
opacity var(--dur-blur-swap) var(--ease-reveal),
filter var(--dur-blur-swap) var(--ease-reveal);
}
.pp-cover-frame[data-on] {
opacity: 1;
filter: none;
transition-delay: calc(var(--dur-blur-swap) / 2);
}
.pp-cover-art[data-pressing] img {
visibility: hidden;
}
.pp-cover-copy {
position: absolute;
left: var(--copy-x);
right: var(--copy-right);
top: var(--copy-y);
pointer-events: none;
}
@keyframes pp-smoke-fade { from { opacity: 0; } }
@keyframes pp-smoke-grow { from { scale: var(--cover-smoke-scale); } }
@keyframes pp-smoke-clear { from { filter: blur(var(--cover-smoke-blur)); } }
.pp-cover-logo {
width: var(--logo-w);
margin: 0;
translate:
calc(var(--drift-x, 0) * var(--cover-drift-logo) * var(--vw))
calc(var(--drift-y, 0) * var(--cover-drift-logo) * var(--vw));
visibility: hidden;
}
.pp-cover-logo--in {
visibility: visible;
animation:
pp-smoke-fade var(--dur-cover-smoke-in) var(--ease-smoke-show) backwards,
pp-smoke-grow var(--dur-cover-smoke-in) var(--ease-settle) backwards,
pp-smoke-clear var(--dur-cover-smoke-in) var(--ease-smoke-clear) backwards;
}
.pp-cover-logo > svg {
display: block;
width: 100%;
height: auto;
}
.pp-cover-captions {
position: relative;
translate:
calc(var(--drift-x, 0) * var(--cover-drift-copy) * var(--vw))
calc(var(--drift-y, 0) * var(--cover-drift-copy) * var(--vw));
margin-top: var(--cover-block-mt);
}
.pp-cover-side--right {
position: absolute;
top: 0;
right: 0;
width: var(--right-w);
}
.pp-cover-title {
width: min(calc(var(--title-em, 100) * 1em), var(--left-max));
max-width: 100%;
margin: 0;
font-family: var(--font-script);
font-size: var(--fs-hero-script);
line-height: var(--lh-hero-script);
white-space: pre-line;
text-wrap: balance;
}
.pp-cover-row .pp-cover-title {
width: min(calc(var(--title-em) * 1em), var(--left-max));
}
.pp-cover-row .pp-cover-title:not([style]) {
width: fit-content;
}
.pp-cover-side--right .pp-cover-title {
width: auto;
}
.pp-cover-captions {
--copy-step: calc((100 * var(--vw) - var(--phone-below)) / var(--cover-copy-span));
--fs-cover-legend: clamp(
calc(var(--t-hero-legend-min) * var(--cover-copy-min) * 1px),
calc(var(--t-hero-legend-min) * var(--cover-copy-min) * 1px + var(--t-hero-legend-min) * (1 - var(--cover-copy-min)) * var(--copy-step)),
var(--fs-hero-legend)
);
--fs-cover-text: clamp(
calc(var(--t-body-min) * var(--cover-copy-min) * 1px),
calc(var(--t-body-min) * var(--cover-copy-min) * 1px + var(--t-body-min) * (1 - var(--cover-copy-min)) * var(--copy-step)),
var(--fs-body)
);
}
.pp-cover-legend {
margin: var(--cover-caption-gap) 0 0;
font-family: var(--font-sans);
font-variation-settings: var(--vf-hero-legend);
font-size: var(--fs-cover-legend, var(--fs-hero-legend));
line-height: var(--lh-hero-legend);
letter-spacing: var(--ls-hero-legend);
}
.pp-cover-captions .pp-cover-text {
margin-top: var(--cover-caption-gap);
font-size: var(--fs-cover-text);
line-height: calc(var(--fs-cover-text) * var(--t-body-lh));
}
.pp-cover-captions .pp-cover-legend + .pp-cover-text {
margin-top: var(--cover-legend-gap);
}
.pp-cover-side--left .pp-cover-text {
width: min(calc(var(--em-cover-text-left) * 1em), var(--left-max));
}
.pp-cover-row {
position: relative;
}
.pp-cover-row--to {
width: calc(var(--art-left) + var(--art-w) * var(--aim) / 100 - var(--copy-x));
}
.pp-cover-row--to .pp-cover-title {
max-width: calc(100% - var(--cover-arrow-min) - var(--cover-arrow-gap));
}
.pp-cover-row--from {
margin-left: calc(
var(--art-left) + var(--art-w) * var(--aim) / 100 - (100 * var(--vw) - var(--copy-right) - var(--right-w))
);
}
.pp-cover-row.pp-cover-row--from .pp-cover-title {
width: var(--right-w);
margin-left: auto;
}
.pp-cover-row-arrow {
position: absolute;
height: var(--l-arrow-h);
translate: 0 -50%;
}
@keyframes pp-cover-rise {
from { opacity: 0; top: var(--reveal-y); }
}
.pp-cover-word {
position: relative;
top: 0;
animation: pp-cover-rise var(--dur-cover-word) var(--ease-settle) backwards;
animation-delay: calc(var(--cover-word-step) * var(--i, 0));
}
.pp-cover-dots {
position: absolute;
left: 50%;
bottom: var(--cover-dots-bottom);
height: var(--cover-dots-h);
aspect-ratio: 46 / 13;
translate: -50% 0;
}
.pp-cover-dots > svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.pp-cover-dot {
position: absolute;
top: 50%;
width: var(--space-4);
height: var(--space-4);
padding: 0;
border: 0;
background: none;
translate: -50% -50%;
cursor: pointer;
}
.pp-cover-cta {
position: fixed;
right: var(--cover-cta-right);
bottom: var(--cover-cta-bottom);
z-index: var(--z-fade);
margin: 0;
box-shadow: var(--cover-cta-halo);
}
:root[data-cover='wait'] :is(.pp-landing-nav, .pp-cover-late, .pp-account-link) {
visibility: hidden;
}
:root[data-cover='in'] :is(.pp-landing-nav, .pp-cover-late, .pp-account-link) {
animation:
pp-smoke-fade var(--dur-cover-smoke-in) var(--ease-smoke-show) backwards,
pp-smoke-clear var(--dur-cover-smoke-in) var(--ease-smoke-clear) backwards;
}
:root[data-phone] .pp-cover {
overflow: visible clip;
height: 100svh;
--logo-w: clamp(
calc(var(--cover-phone-logo-w) * var(--vw)),
calc((var(--cover-phone-logo-w-wide) * var(--cover-phone-wide-w) - var(--cover-phone-logo-w) * var(--cover-phone-narrow-w)) / (var(--cover-phone-wide-w) - var(--cover-phone-narrow-w)) * var(--vw)
+ (var(--cover-phone-logo-w) - var(--cover-phone-logo-w-wide)) * var(--cover-phone-narrow-w) * var(--cover-phone-wide-w) / (100 * (var(--cover-phone-wide-w) - var(--cover-phone-narrow-w))) * 1px),
calc(var(--cover-phone-logo-w-wide) * var(--vw))
);
--copy-x: var(--cover-phone-pad);
--copy-right: var(--cover-phone-pad);
--ph-s: var(--cover-phone-short-h);
--ph-t: var(--cover-phone-tall-h);
--copy-y: clamp(
calc(var(--cover-phone-logo-y) * 1svh),
calc((var(--cover-phone-logo-y-tall) * var(--ph-t) - var(--cover-phone-logo-y) * var(--ph-s)) / (var(--ph-t) - var(--ph-s)) * 1svh
+ (var(--cover-phone-logo-y) - var(--cover-phone-logo-y-tall)) * var(--ph-s) * var(--ph-t) / (100 * (var(--ph-t) - var(--ph-s))) * 1px),
calc(var(--cover-phone-logo-y-tall) * 1svh)
);
--art-w: calc(var(--cover-phone-img-w) * var(--vw));
--art-left: calc(var(--cover-phone-img-x) * var(--vw) - var(--art-w) / 2);
--art-y: clamp(
calc(var(--cover-phone-img-y) * 1svh),
calc((var(--cover-phone-img-y-tall) * var(--ph-t) - var(--cover-phone-img-y) * var(--ph-s)) / (var(--ph-t) - var(--ph-s)) * 1svh
+ (var(--cover-phone-img-y) - var(--cover-phone-img-y-tall)) * var(--ph-s) * var(--ph-t) / (100 * (var(--ph-t) - var(--ph-s))) * 1px),
calc(var(--cover-phone-img-y-tall) * 1svh)
);
--foot-y: clamp(
calc(var(--cover-phone-text-y) * 1svh),
calc((var(--cover-phone-text-y-tall) * var(--ph-t) - var(--cover-phone-text-y) * var(--ph-s)) / (var(--ph-t) - var(--ph-s)) * 1svh
+ (var(--cover-phone-text-y) - var(--cover-phone-text-y-tall)) * var(--ph-s) * var(--ph-t) / (100 * (var(--ph-t) - var(--ph-s))) * 1px),
calc(var(--cover-phone-text-y-tall) * 1svh)
);
--foot-arrow: clamp(
calc(var(--cover-phone-arrow) * 1px),
calc((var(--cover-phone-arrow-tall) - var(--cover-phone-arrow)) / (var(--ph-t) - var(--ph-s)) * 100svh
+ (var(--cover-phone-arrow) * var(--ph-t) - var(--cover-phone-arrow-tall) * var(--ph-s)) / (var(--ph-t) - var(--ph-s)) * 1px),
calc(var(--cover-phone-arrow-tall) * 1px)
);
}
:root[data-phone] .pp-cover-logo {
margin-inline: auto;
}
.pp-cover-foot {
position: absolute;
left: var(--cover-phone-pad);
right: var(--cover-phone-pad);
bottom: calc(100% - var(--foot-y));
display: flex;
flex-direction: column;
align-items: center;
gap: var(--cover-phone-arrow-gap);
pointer-events: none;
}
.pp-cover-foot .pp-cover-title {
width: auto;
text-align: center;
}
.pp-cover-foot-arrow {
width: var(--foot-arrow);
height: var(--l-arrow-h);
margin-block: calc((var(--foot-arrow) - var(--l-arrow-h)) / 2);
rotate: 90deg;
}
:root[data-phone] .pp-cover-cta {
left: max(var(--cover-phone-cta-pad), calc(50vw - var(--l-phone-max-w) / 2 + var(--cover-phone-cta-pad)));
right: max(var(--cover-phone-cta-pad), calc(50vw - var(--l-phone-max-w) / 2 + var(--cover-phone-cta-pad)));
bottom: var(--cover-phone-bottom);
width: auto;
justify-content: center;
box-shadow: none;
--cta-f: var(--cover-phone-cta-f);
}
:root[data-phone] .pp-cover-cta::before {
content: '';
position: absolute;
z-index: -1;
top: 50%;
left: calc(var(--cover-phone-cta-pad) * -1);
right: calc(var(--cover-phone-cta-pad) * -1);
bottom: calc((var(--cover-phone-bottom) + var(--space-12)) * -1);
background: var(--color-paper);
pointer-events: none;
}
:root[data-phone] .pp-cover-cta {
background: none;
}
:root[data-phone] .pp-cover-cta::after {
content: '';
position: absolute;
z-index: -1;
inset: 0;
border-radius: inherit;
background: var(--color-ink);
pointer-events: none;
}
.pp-l-page.pp-legal {
padding-top: calc(var(--logo-y) + var(--logo-h) + var(--l-gap-section) / 2);
}
.pp-l-page.pp-legal {
gap: var(--l-gap-block);
}
.pp-l-section.pp-legal-head {
align-items: center;
gap: 0;
text-align: center;
}
.pp-legal-head .pp-legal-pointer {
margin-top: var(--space-4);
}
.pp-legal-head .pp-legal-brand {
margin-top: var(--space-2);
}
.pp-legal-title {
white-space: pre-line;
}
.pp-legal-pointer {
display: flex;
align-items: center;
justify-content: center;
width: var(--l-arrow-h);
height: var(--l-head-arrow-min);
}
.pp-legal-arrow {
flex: none;
width: var(--l-head-arrow-min);
height: var(--l-arrow-h);
rotate: 90deg;
}
.pp-legal-brand {
margin: 0;
font-family: var(--font-script);
font-size: var(--fs-legal-brand);
line-height: var(--lh-legal-brand);
}
.pp-legal-dates {
white-space: pre-line;
color: var(--color-grey-note);
}
.pp-legal-body {
width: min(100%, calc(var(--em-legal) * var(--fs-body)));
margin-inline: auto;
font-family: var(--font-sans);
font-variation-settings: var(--vf-meta);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.pp-legal-body h2 {
margin: var(--l-gap-block) 0 var(--space-4);
font-family: var(--font-display);
font-size: var(--fs-card-h);
line-height: var(--lh-card-h);
font-weight: 700;
}
.pp-legal-body h2:first-child {
margin-top: 0;
}
.pp-legal-body p {
margin: var(--space-3) 0;
}
.pp-legal-body .term {
margin: var(--space-6) 0 0;
font-variation-settings: var(--vf-budget-value);
}
.pp-legal-body .term + p {
margin-top: 0;
}
.pp-legal-body .clause {
margin-top: var(--space-5);
}
.pp-legal-body .n {
display: block;
font-variation-settings: var(--vf-budget-value);
}
.pp-legal-body ul {
margin: var(--space-3) 0;
padding-left: var(--space-5);
}
.pp-legal-body li {
margin: var(--space-2) 0;
}
.pp-legal-body li::marker {
color: var(--color-grey-note);
}
.pp-legal-body a {
text-decoration: underline;
}
.pp-l-page {
position: relative;
display: flex;
flex-direction: column;
gap: var(--l-gap-section);
width: var(--l-container);
margin-inline: auto;
padding-top: calc(var(--l-page-top) * var(--l-cover-h) / 100);
padding-bottom: var(--l-page-pb);
color: var(--color-ink);
}
.pp-l-section {
position: relative;
display: flex;
flex-direction: column;
gap: var(--l-gap-block);
scroll-margin-top: calc(var(--logo-y) + var(--logo-h) + var(--space-6));
}
.pp-l-h2 {
position: relative;
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: 700;
white-space: pre-line;
}
.pp-l-h3 {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-card-h);
line-height: var(--lh-card-h);
font-weight: 700;
}
.pp-l-lead {
margin: 0;
font-family: var(--font-script);
font-size: var(--fs-script);
line-height: var(--lh-script);
text-wrap: balance;
}
.pp-l-text {
margin: 0;
font-family: var(--font-sans);
font-variation-settings: var(--vf-meta);
font-size: var(--fs-body);
line-height: var(--lh-body);
white-space: pre-line;
}
.pp-l-note {
width: fit-content;
max-width: min(100%, calc(var(--em-legend) * var(--fs-body)));
margin: calc(var(--l-gap-note) - var(--l-gap-block)) auto 0;
font-family: var(--font-sans);
font-variation-settings: var(--vf-meta-goal);
font-size: var(--fs-body);
line-height: var(--lh-body);
text-align: center;
}
.pp-l-head-box {
container-type: inline-size;
}
.pp-l-head {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--l-head-gap) calc(var(--l-head-arrow-min) + var(--l-head-arrow-gap) * 2);
}
.pp-l-head > .pp-l-h2 {
flex: none;
max-width: 100%;
white-space: pre;
}
.pp-l-head > .pp-l-lead {
flex: 1 1 calc(var(--em-lead-min) * 1em);
max-width: calc(var(--lead-em) * 1em);
margin-top: max(0px, calc(var(--head-line-y, 0px) - var(--lh-script) / 2));
}
.pp-l-head[data-stacked] > .pp-l-lead {
margin-top: 0;
}
:root:not([data-phone]) .pp-l-head {
flex-wrap: nowrap;
}
:root:not([data-phone]) .pp-l-head > .pp-l-lead {
flex: 0 1 auto;
min-width: 0;
}
@container (max-width: 36rem) {
.pp-l-head > .pp-l-h2 {
white-space: pre-line;
}
}
.pp-l-head-arrow {
position: absolute;
height: var(--l-arrow-h);
translate: 0 -50%;
}
.pp-l-cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--em-col-min) * var(--fs-body))), 1fr));
gap: var(--l-gap-block) var(--l-gap-cols);
}
.pp-l-cols--pair {
width: min(100%, max(calc(var(--l-pair-w) * 1%), calc(2 * var(--em-stats-caption) * var(--fs-body) + var(--l-gap-cols))));
margin-inline: auto;
}
.pp-l-cols--cards {
grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--em-card-min) * var(--fs-body))), 1fr));
}
.pp-l-stat {
display: flex;
flex-direction: column;
gap: var(--l-gap-caption);
width: fit-content;
max-width: 100%;
margin-inline: auto;
}
.pp-l-stat {
translate: calc((100% - var(--cap-w, 100%)) / 2) 0;
}
.pp-l-figure {
display: flex;
justify-content: center;
width: var(--cap-w, 100%);
margin: 0;
font-family: var(--font-script);
hyphens: manual;
}
.pp-l-pair {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
translate: calc(-0.5 * var(--l-unit-weight) * (var(--unit-w, 0px) + var(--l-unit-gap)) + (var(--l-num-shift) + var(--num-own, 0)) * var(--fs-num)) 0;
}
:root[data-l-unit="under"] .pp-l-pair {
translate: calc((var(--l-num-shift) + var(--num-own, 0)) * var(--fs-num)) 0;
}
.pp-l-num {
font-size: var(--fs-num);
line-height: var(--lh-num);
}
.pp-l-unit {
position: absolute;
left: 100%;
top: calc(var(--unit-top, 0px) + var(--l-unit-drop));
margin-left: var(--l-unit-gap);
font-size: var(--fs-unit);
line-height: var(--lh-unit);
white-space: nowrap;
}
:root[data-l-unit="under"] .pp-l-unit {
position: static;
margin-left: 0;
}
.pp-l-stat-caption {
max-width: calc(var(--em-stats-caption) * 1em);
}
.pp-l-legend {
margin: 0;
font-family: var(--font-sans);
font-variation-settings: var(--vf-hero-legend);
font-size: var(--fs-hero-legend);
line-height: var(--lh-hero-legend);
letter-spacing: var(--ls-hero-legend);
}
.pp-l-card {
display: flex;
flex-direction: column;
gap: var(--l-gap-stack);
}
.pp-l-card-shot {
display: block;
width: min(calc(100% * var(--l-card-shot)), calc((var(--l-container) - var(--l-gap-cols)) / 2));
margin-bottom: var(--space-5);
mix-blend-mode: multiply;
}
.pp-l-step {
display: flex;
flex-direction: column;
gap: var(--l-gap-caption);
width: min(100%, calc(var(--em-stats-caption) * var(--fs-body)));
margin: 0 auto;
}
.pp-l-step-art {
display: block;
width: 100%;
aspect-ratio: 403 / 249;
object-fit: contain;
mix-blend-mode: multiply;
}
.pp-l-step-caption {
max-width: calc(var(--em-stats-caption) * 1em);
}
.pp-l-faq {
display: flex;
flex-direction: column;
gap: var(--l-faq-row);
}
.pp-l-faq-item {
display: flex;
flex-direction: column;
}
.pp-l-faq-q {
display: flex;
align-items: baseline;
gap: var(--l-faq-gap);
padding: 0;
border: 0;
border-radius: var(--radius-hit);
background: none;
color: inherit;
text-align: left;
cursor: pointer;
}
.pp-l-faq-text {
font-family: var(--font-script);
font-size: var(--fs-faq-q);
line-height: var(--lh-faq-q);
text-wrap: balance;
}
.pp-l-plus {
position: relative;
flex: none;
width: var(--l-faq-plus);
height: var(--l-faq-plus);
translate: 0 calc(var(--l-faq-plus) * -0.15);
}
.pp-l-plus::before,
.pp-l-plus::after {
content: '';
position: absolute;
inset: calc(50% - var(--icon-line) / 2) 0 auto;
height: var(--icon-line);
background: currentColor;
transition: rotate var(--dur-area-reveal) var(--ease-settle);
}
.pp-l-plus::after {
rotate: 90deg;
}
.pp-l-plus[data-open]::after {
rotate: 0deg;
}
.pp-l-faq-a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-area-reveal) var(--ease-settle);
}
.pp-l-faq-a[data-open] {
grid-template-rows: 1fr;
}
.pp-l-faq-a > div {
min-height: 0;
overflow: hidden;
}
.pp-l-faq-a p {
max-width: calc(var(--em-faq-answer) * 1em);
padding: var(--l-gap-stack) 0 0 calc(var(--l-faq-plus) + var(--l-faq-gap));
opacity: 0;
transition: opacity var(--dur-area-reveal) var(--ease-settle);
}
.pp-l-faq-a[data-open] p {
opacity: 1;
}
.pp-l-rule {
display: block;
height: var(--rule-h);
margin-top: var(--l-faq-row);
}
.pp-l-rule > .pp-rule {
display: block;
width: 100%;
}
.pp-l-foot {
align-items: center;
}
.pp-l-qr {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.pp-l-h2--qr {
font-size: var(--fs-qr-h);
line-height: var(--lh-qr-h);
}
.pp-l-qr img {
display: block;
width: var(--l-qr-w);
max-width: var(--l-qr-max);
}
:root[data-phone] .pp-l-qr {
display: none;
}
.pp-l-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-5);
width: 100%;
}
.pp-l-footer > .pp-l-rule {
width: 100%;
margin-top: 0;
}
.pp-l-footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--l-gap-stack) var(--space-8);
}
.pp-l-social {
display: flex;
gap: var(--l-gap-stack);
}
.pp-l-social svg {
display: block;
width: var(--l-icon-social);
height: var(--l-icon-social);
transition: opacity var(--dur-hover) var(--ease-fade);
}
.pp-l-social a:hover svg {
opacity: var(--l-hover-dim);
}
.pp-l-copy {
margin: 0;
font-family: var(--font-script);
font-size: var(--fs-hero-legend);
line-height: var(--lh-hero-legend);
}
.pp-l-spot {
position: absolute;
left: 50%;
bottom: var(--spot-drop);
z-index: -1;
width: var(--spot-w);
height: var(--spot-h);
translate: calc(-50% + var(--spot-dx)) 0;
pointer-events: none;
}
.pp-l-spot--top {
top: var(--spot-drop);
bottom: auto;
}
.pp-l-word {
display: inline-block;
opacity: 0;
transform: translateY(var(--reveal-y)) scale(var(--l-heading-scale));
transform-origin: 50% 100%;
filter: blur(var(--l-heading-blur));
transition:
opacity var(--dur-reveal) var(--ease-reveal),
transform var(--dur-reveal) var(--ease-reveal),
filter var(--dur-reveal) var(--ease-reveal);
transition-delay: calc(var(--l-in-word) * var(--i, 0));
}
.pp-l-rise {
opacity: 0;
transform: translateY(var(--reveal-y));
filter: blur(var(--reveal-blur));
transition:
opacity var(--dur-reveal) var(--ease-reveal),
transform var(--dur-reveal) var(--ease-reveal),
filter var(--dur-reveal) var(--ease-reveal);
transition-delay: var(--d, 0ms);
}
.pp-l-pop {
opacity: 0;
transform: translateX(calc(var(--l-in-shift) * var(--x, 0))) scale(var(--pop-scale));
transition:
opacity var(--dur-pop) var(--ease-pop),
transform var(--dur-pop) var(--ease-pop);
transition-delay: var(--d, 0ms);
}
.pp-l-section[data-in] :is(.pp-l-word, .pp-l-rise, .pp-l-pop) {
opacity: 1;
transform: none;
filter: none;
}
:root[data-phone] .pp-landing {
--fs-h2: calc(var(--l-container-full) * var(--l-phone-h2));
--fs-script: calc(var(--l-container-full) * var(--l-phone-lead));
--fs-num: calc(var(--l-container-full) * var(--l-phone-num));
--fs-unit: calc(var(--l-container-full) * var(--l-phone-unit));
--l-page-top: var(--l-phone-page-top);
--l-gap-section: calc(var(--l-phone-gap-section) * 1px);
--l-gap-block: calc(var(--l-phone-gap-block) * 1px);
--l-page-pb: calc(var(--l-phone-page-pb) * 1px);
}
:root[data-phone] .pp-l-page {
translate: calc(var(--l-phone-col-shift) * 1px) 0;
}
:root[data-phone] .pp-l-cols--cards {
row-gap: calc(var(--l-phone-gap-cards) * 1px);
}
:root[data-phone] .pp-l-cols,
:root[data-phone] .pp-l-cols--cards {
grid-template-columns: minmax(0, 1fr);
}
:root[data-phone] .pp-l-cols--pair {
width: 100%;
}
:root[data-phone] .pp-l-stat {
width: 100%;
margin-inline: 0;
translate: none;
}
:root[data-phone] .pp-l-figure {
width: 100%;
}
:root[data-phone] .pp-l-pair {
translate: calc(-0.5 * var(--l-unit-weight) * (var(--unit-w, 0px) + var(--l-unit-gap))) 0;
}
:root[data-phone][data-l-unit="under"] .pp-l-pair {
translate: none;
}
:root[data-l-card-shot='center'] .pp-l-card-shot {
margin-inline: auto;
}
:root[data-phone] .pp-l-card-shot {
width: 100%;
margin-bottom: calc(var(--l-phone-shot-gap) * 1px - var(--l-gap-stack));
}
nav[data-rail] {
transition:
opacity var(--dur-blur-swap) var(--ease-reveal),
filter var(--dur-blur-swap) var(--ease-reveal),
visibility 0s linear 0s;
}
:root[data-screen='landing'] nav[data-rail] {
opacity: 0;
filter: blur(var(--reveal-blur));
visibility: hidden;
transition:
opacity var(--dur-blur-swap) var(--ease-reveal),
filter var(--dur-blur-swap) var(--ease-reveal),
visibility 0s linear var(--dur-blur-swap);
}
.pp-landing {
position: fixed;
inset: 0;
z-index: var(--z-content);
overflow-x: clip;
overflow-y: auto;
scrollbar-width: none;
}
.pp-landing > main {
isolation: isolate;
margin-inline: auto;
background: var(--color-paper);
overflow: visible clip;
}
:root[data-phone] .pp-landing > main {
max-width: var(--l-phone-max-w);
}
.pp-landing-nav {
position: fixed;
top: var(--avatar-box-top);
right: calc(var(--avatar-right) + var(--icon-avatar-photo) + var(--space-8));
z-index: var(--z-fade);
display: flex;
align-items: center;
gap: var(--space-8);
height: var(--avatar-box-h);
isolation: isolate;
transition: translate var(--dur-area-reveal) var(--ease-settle);
}
.pp-landing-nav::before {
content: "";
position: absolute;
inset: calc(var(--nav-plate-v) * -1) calc(var(--nav-plate-h) * -1);
z-index: -1;
border-radius: var(--radius-pill);
background: var(--nav-glass-fill-color);
-webkit-backdrop-filter: blur(var(--nav-glass-blur));
backdrop-filter: blur(var(--nav-glass-blur));
--edge-x: var(--nav-glass-edge);
--edge-y: calc(var(--nav-glass-edge) / 2);
-webkit-mask-image:
linear-gradient(to right, transparent, var(--color-ink) var(--edge-x), var(--color-ink) calc(100% - var(--edge-x)), transparent),
linear-gradient(to bottom, transparent, var(--color-ink) var(--edge-y), var(--color-ink) calc(100% - var(--edge-y)), transparent);
mask-image:
linear-gradient(to right, transparent, var(--color-ink) var(--edge-x), var(--color-ink) calc(100% - var(--edge-x)), transparent),
linear-gradient(to bottom, transparent, var(--color-ink) var(--edge-y), var(--color-ink) calc(100% - var(--edge-y)), transparent);
-webkit-mask-composite: source-in;
mask-composite: intersect;
pointer-events: none;
}
:root[data-nav-plate="paper"] .pp-landing-nav::before {
background: var(--color-paper);
-webkit-backdrop-filter: none;
backdrop-filter: none;
-webkit-mask-image: none;
mask-image: none;
filter: blur(var(--nav-plate-blur));
}
.pp-landing-nav[data-hidden] {
translate: 0 calc(-100% - var(--avatar-box-top) - var(--space-2));
}
.pp-hand-pointer {
display: block;
min-width: 0;
}
.pp-hand-pointer > svg {
height: 100%;
}
.pp-landing-menu {
position: absolute;
inset: 0;
z-index: var(--z-menu-sheet);
background: var(--color-paper);
opacity: 0;
visibility: hidden;
transition:
opacity var(--dur-fold) var(--ease-reveal),
visibility 0s var(--dur-fold);
}
.pp-landing-menu-spot {
--menu-x: calc(var(--rail-list-x) + var(--rail-row-h) / 2 - var(--touch-min) / 2);
--menu-y: calc(var(--rail-plus-y) + var(--rail-row-h) / 2 - var(--touch-min) / 2);
position: absolute;
z-index: -1;
left: calc(var(--spot-phone-dx) - var(--spot-phone-left));
top: calc(var(--spot-phone-dy) - var(--spot-phone-top));
width: calc(var(--menu-x) + var(--touch-min) + var(--spot-phone-left) + var(--spot-phone-right));
height: calc(var(--menu-y) + var(--touch-min) + var(--spot-phone-top) + var(--spot-phone-bottom));
pointer-events: none;
transition:
translate var(--dur-fold) var(--ease-reveal),
opacity var(--dur-fold) var(--ease-reveal);
}
.pp-shell[data-bar-hidden] .pp-landing-menu-spot {
translate: 0 calc((var(--rail-plus-y) + var(--touch-min)) * -1);
opacity: 0;
}
.pp-landing-menu[data-open] {
opacity: 1;
visibility: visible;
transition: opacity var(--dur-reveal) var(--ease-reveal);
}
.pp-landing-menu-list {
position: absolute;
top: calc(var(--rail-plus-y) + var(--touch-min) + var(--space-6));
left: var(--phone-col-x);
right: var(--phone-col-x);
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.pp-landing-menu[data-open] .pp-landing-menu-list {
animation: pp-blur-in var(--dur-reveal) var(--ease-smoke-show) both;
}
.pp-landing-menu-item {
width: fit-content;
text-transform: uppercase;
}
.pp-landing-nav-items {
display: flex;
align-items: center;
gap: var(--space-8);
--pad-group-v: var(--nav-pad-v);
}
.pp-pad-group .pp-spot-btn-pad {
display: none;
}
:is(.pp-landing-nav-items, .pp-l-footer-links) > .pp-pad-group-spot {
--pad-shadow-color: var(--nav-pad-shadow-color);
--pad-shadow-y: var(--nav-pad-shadow-y);
--pad-shadow-size: var(--nav-pad-shadow-size);
--pad-shadow-blur: var(--nav-pad-shadow-blur);
--pad-light-color: var(--nav-pad-light-color);
--pad-light-core: var(--nav-pad-light-core);
--pad-light-y: var(--nav-pad-light-y);
--pad-light-blur: var(--nav-pad-light-blur);
}
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
--font-sans: "Roboto Var", Bahnschrift, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
--font-display: "TT Bluescreens", "Pin.Point Display System", Bahnschrift, "Arial Narrow", sans-serif;
--font-script: "TT Nooks", "Pin.Point Script System", Georgia, serif;
--color-paper: #efefef;
}
}
@layer base {
*, ::after, ::before, ::backdrop, ::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring:where(:not(iframe)) {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none !important;
}
}
@layer utilities {
.pointer-events-auto {
pointer-events: auto;
}
.pointer-events-none {
pointer-events: none;
}
.collapse {
visibility: collapse;
}
.visible {
visibility: visible;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
.static {
position: static;
}
.inset-0 {
inset: 0px;
}
.inset-x-0 {
inset-inline: 0px;
}
.top-0 {
top: 0px;
}
.z-\(--z-topbar\) {
z-index: var(--z-topbar);
}
.container {
width: 100%;
@media (width >= 900px) {
max-width: 900px;
}
@media (width >= 1440px) {
max-width: 1440px;
}
@media (width >= 40rem) {
max-width: 40rem;
}
@media (width >= 48rem) {
max-width: 48rem;
}
@media (width >= 64rem) {
max-width: 64rem;
}
@media (width >= 80rem) {
max-width: 80rem;
}
}
.ml-\(--logo-word-gap\) {
margin-left: var(--logo-word-gap);
}
.block {
display: block;
}
.flex {
display: flex;
}
.hidden {
display: none;
}
.table {
display: table;
}
.h-\(--icon-avatar\) {
height: var(--icon-avatar);
}
.h-\(--icon-avatar-photo\) {
height: var(--icon-avatar-photo);
}
.h-\(--logo-h\) {
height: var(--logo-h);
}
.h-\(--logo-word-h\) {
height: var(--logo-word-h);
}
.w-\(--icon-avatar\) {
width: var(--icon-avatar);
}
.w-\(--icon-avatar-photo\) {
width: var(--icon-avatar-photo);
}
.w-\(--logo-mark-w\) {
width: var(--logo-mark-w);
}
.w-\(--logo-word-w\) {
width: var(--logo-word-w);
}
.max-w-none {
max-width: none;
}
.shrink-0 {
flex-shrink: 0;
}
.grow {
flex-grow: 1;
}
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.resize {
resize: both;
}
.items-center {
align-items: center;
}
.overflow-clip {
overflow: clip;
}
.capitalize {
text-transform: capitalize;
}
.italic {
font-style: italic;
}
.underline {
text-decoration-line: underline;
}
.shadow {
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.filter {
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.ease-in-out {
--tw-ease: var(--ease-in-out);
transition-timing-function: var(--ease-in-out);
}
.ease-out {
--tw-ease: var(--ease-out);
transition-timing-function: var(--ease-out);
}
.select-none {
-webkit-user-select: none;
user-select: none;
}
}
@font-face {
font-family: "Pin.Point Display System";
src: local("DIN Condensed Bold"), local("DINCondensed-Bold");
font-weight: 100 900;
font-style: normal;
size-adjust: 90%;
}
@font-face {
font-family: "Pin.Point Script System";
src: local("Georgia Italic"), local("Georgia-Italic");
font-weight: 100 900;
font-style: normal;
size-adjust: 82%;
}
@font-face {
font-family: "TT Bluescreens";
src: url("/assets/fonts/TT_Bluescreens_Pro_Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "TT Nooks";
src: url("/assets/fonts/TT_Nooks_Script_Light.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roboto Var";
src: url("/assets/fonts/KFOmCnqEu92Fr1Mu5mxKOzY.woff2") format("woff2");
font-weight: 100 900;
font-stretch: 75% 100%;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Roboto Var";
src: url("/assets/fonts/KFOmCnqEu92Fr1Mu4mxK.woff2") format("woff2");
font-weight: 100 900;
font-stretch: 75% 100%;
font-style: normal;
font-display: swap;
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;
}
:root {
--vf-display: "wght" 700, "wdth" 75;
--ls-display-twin: 0em;
--font-sign: var(--font-script);
--vf-sign: normal;
--font-retry-after: 1.5s;
--font-retry-every: 10s;
}
[data-fonts='system'] {
--font-display: "Pin.Point Display System", Bahnschrift, "Arial Narrow", sans-serif;
--font-script: "Pin.Point Script System", Georgia, serif;
--font-sans: Bahnschrift, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--ls-display-twin: -0.035em;
--font-sign: var(--font-sans);
--vf-sign: "wght" 200, "wdth" 100;
}
.fv-body {
font-variation-settings: "wdth" 80, "wght" 300;
}
.fv-note {
font-variation-settings: "wdth" 100, "wght" 538;
}
.fv-nav {
font-variation-settings: "wdth" 75, "wght" 400;
}
.fv-pill {
font-variation-settings: "wdth" 90, "wght" 400;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:root {
--color-ink: #303030;
--color-ink-inverse: #fff;
--color-svc-sber: #21a038;
--color-svc-tid: #ffdd2d;
--color-svc-yandex: #fc3f1d;
--color-svc-vk: #0077ff;
--grey-note-alpha: 42;
--color-grey-note: rgb(0 0 0 / calc(var(--grey-note-alpha) / 100));
--color-grey-off: rgb(0 0 0 / 0.32);
--color-struck: #b8b8b8;
--color-rule-soft: rgb(0 0 0 / 0.08);
--color-brand-red: rgb(255 24 71);
--color-mark: #ffcb22;
--color-select: var(--color-ink-inverse);
--color-select-ink: var(--color-ink);
--color-note: var(--color-mark);
--color-note-open: var(--color-mark);
--color-note-grey: rgb(0 0 0 / 0.45);
--color-danger: #d7261e;
--color-mark-hover: rgb(0 0 0 / 0.06);
--color-confirm-veil: rgb(0 0 0 / 0.16);
--color-goto: rgb(0 0 0 / 0.06);
--color-goto-hover: rgb(0 0 0 / 0.12);
--color-icon-hover: rgb(0 0 0 / 0.05);
--color-scrollbar: rgb(0 0 0 / 0.16);
--color-scrollbar-hover: rgb(0 0 0 / 0.32);
--color-note-fill: var(--color-note-open);
--color-note-mark: #efefee;
--color-note-edge-dark: #f7aa02;
--color-note-edge-light: #ffe79a;
--color-note-grip: var(--color-note-edge-dark);
@supports (color: color-mix(in lab, red, red)) {
--color-note-grip: color-mix(in srgb, var(--color-note-edge-dark) 50%, transparent);
}
--color-mic-live: #f7aa02;
--color-promo: #ffb515;
--shadow-card: rgb(0 0 0 / 0.25) 1px 3px 8px -1px,
rgb(0 0 0 / 0.32) 0 0.602187px 0.602187px -1.25px,
rgb(0 0 0 / 0.28) 0 2.28853px 2.28853px -2.5px,
rgb(0 0 0 / 0.11) 0 10px 10px -3.75px,
rgb(255 255 255 / 0.68) 0 1px 1px 0 inset;
--color-sheet: var(--color-ink-inverse);
--color-mark-hover-sheet: rgb(0 0 0 / 0.03);
--color-photo-dim: rgb(0 0 0 / 0.45);
--color-track: rgb(0 0 0 / 0.2);
--radius-card: 14px;
--radius-hit: 10px;
--radius-pill: 9999px;
--ease-settle: linear(0.0000, 0.0292, 0.0997, 0.1876, 0.2823, 0.3787, 0.4667, 0.5469,
0.6201, 0.6821, 0.7355, 0.7823, 0.8206, 0.8527, 0.8802, 0.9022, 0.9204, 0.9358,
0.9480, 0.9579, 0.9663, 0.9728, 0.9781, 0.9825, 0.9860, 0.9888, 0.9911, 0.9928,
0.9943, 0.9955, 0.9964, 0.9971, 0.9977, 0.9982, 0.9985, 0.9989, 1.0000);
--ease-inertia: linear(0 0%, 0.0673 4.2%, 0.2204 8.3%, 0.4032 12.5%, 0.5805 16.7%, 0.7328 20.8%,
0.8522 25%, 0.9382 29.2%, 0.9946 33.3%, 1.0273 37.5%, 1.0425 41.7%, 1.0459 45.8%, 1.0422 50%,
1.0349 54.2%, 1.0265 58.3%, 1.0184 62.5%, 1.0116 66.7%, 1.0063 70.8%, 1.0025 75%, 1 79.2%,
0.9986 83.3%, 0.998 87.5%, 0.9979 91.7%, 0.9981 95.8%, 1 100%);
--ease-draw-in: cubic-bezier(0.55, 0, 0.9, 0.35);
--ease-breath: ease-in-out;
--ease-reveal: var(--ease-settle);
--ease-pop: var(--ease-settle);
--ease-pill-hover: var(--ease-settle);
--ease-sink: var(--ease-draw-in);
--spring-bounce: var(--ease-inertia);
--ease-fade: var(--ease-settle);
--ease-mark-out: var(--ease-settle);
--ease-veil-in: var(--ease-settle);
--ease-smoke-queue: var(--ease-draw-in);
--ease-note-shrink: var(--ease-draw-in);
--pose-lead-in: 0 0, 0.22 -0.15, 0.62 1.18, 1 1;
--pose-lead-out: 0 1, 0.25 1.07, 0.66 -0.07, 1 0;
--pose-soft-in: 0 0, 0.25 -0.12, 0.6 1.14, 1 1;
--pose-soft-out: 0 1, 0.25 1.05, 0.66 -0.06, 1 0;
--pose-heavy-in: 0 0, 0.18 -0.25, 0.5 1.3, 0.7 0.82, 0.86 1.07, 1 1;
--pose-heavy-out: 0 1, 0.2 1.08, 0.62 -0.12, 0.84 0.03, 1 0;
--dur-pose-lead: 0.52s;
--dur-pose-soft: 0.52s;
--dur-pose-heavy: 0.9s;
--pose-delay-lead-in: 0ms;
--pose-delay-soft-in: 40ms;
--pose-delay-heavy-in: 110ms;
--pose-delay-heavy-out: 0ms;
--pose-delay-soft-out: 60ms;
--pose-delay-lead-out: 90ms;
--pose-stagger: 20ms;
--pose-out-slower: 1.2;
--pose-hop: 0.025;
--ease-message: linear;
--ease-message-go: cubic-bezier(0.2, 0.7, 0.3, 1);
--ease-message-settle: ease-in-out;
--ease-smoke-show: var(--ease-settle);
--ease-smoke-clear: linear(0, 0.05 40%, 0.2 65%, 0.55 85%, 1);
--ease-smoke-cloud: linear(0, 0.45 15%, 0.8 35%, 0.95 60%, 1);
--ease-smoke-hide: var(--ease-draw-in);
--dur-reveal: 0.99s;
--dur-pop: 0.63s;
--dur-hover: 0.15s;
--dur-pill-hover: 0.4s;
--dur-block-move: 0.42s;
--dur-letter-out: 0.55s;
--dur-letter-in: 0.5s;
--dur-letter-move: 0.63s;
--dur-blur-swap: 0.38s;
--dur-leave-fold: 0.48s;
--dur-area-reveal: 0.3s;
--reveal-queue-step: 150ms;
--delay-composer: 0.25s;
--dur-composer: 0.24s;
--dur-affordance: 0.2s;
--reveal-y: 10px;
--reveal-blur: 10px;
--pop-scale: 1.06;
}
@media (prefers-reduced-motion: reduce) {
:root {
--dur-reveal: 0.01s;
--dur-pop: 0.01s;
--dur-block-move: 0.01s;
--dur-composer: 0.01s;
--dur-affordance: 0.01s;
--dur-letter-out: 0.01s;
--dur-letter-in: 0.01s;
--dur-letter-move: 0.01s;
--dur-blur-swap: 0.01s;
--delay-composer: 0s;
--dur-pill-hover: 0.01s;
--reveal-y: 0px;
--reveal-blur: 0px;
--pop-scale: 1;
}
}
:root {
--hand-arrow-sw: 0.7px;
--dur-hand-arrow-draw: 700ms;
--hand-arrow-draw-delay: 350ms;
--hand-arrow-windup: 0.33;
--dur-hand-arrow-windup: 160ms;
--hand-arrow-windup-stiff: 700;
--hand-arrow-rest: 0.4;
--hand-arrow-stiff: 300;
--hand-arrow-damp: 15;
--hand-arrow-back-stiff: 170;
--hand-arrow-stretch: 0.16;
--hand-arrow-squash: 0.12;
--hand-arrow-bend: 7;
--hand-arrow-bend-stiff: 260;
--hand-arrow-bend-damp: 11;
--dur-wordmark-ouch: 1000ms;
--dur-wordmark-sigh: 1300ms;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-9: 36px;
--space-10: 40px;
--space-11: 44px;
--space-12: 48px;
--space-13: 52px;
--space-14: 56px;
--space-15: 60px;
--space-16: 64px;
--space-18: 72px;
--space-20: 80px;
--fs-display: 64px;
--lh-display: 56px;
--fs-display-wide: 64px;
--lh-display-share: 0.875;
--title-fit-max: 132px;
--title-fit-short: 4;
--title-fit-long: 16;
--title-fit-lh: 88;
--title-fit-em: 0.45;
--title-lift: 80;
--fs-link: 24px;
--lh-link: 24px;
--ls-link: 0.24px;
--fs-section-wide: 58px;
--fs-section: var(--fs-section-wide);
--lh-section: var(--fs-section-wide);
--fs-section-sm: 32px;
--lh-section-sm: 36px;
--vf-light: "wdth" 75, "wght" 300;
--vf-body-bold: "wdth" 80, "wght" 600;
--fs-script-lead: 22px;
--lh-script-lead: 26px;
--fs-logo-sub: 24px;
--lh-logo-sub: calc(var(--fs-logo-sub) * 1.2);
--fs-script-sub: var(--fs-script-lead);
--lh-script-sub: var(--lh-script-lead);
--ls-script-sub: 0.2px;
--vf-budget-total: "wdth" 75, "wght" 600;
--vf-budget-value: var(--vf-budget-total);
--fs-menu: var(--fs-tip);
--lh-menu: var(--lh-tip);
--ls-menu: 0.2px;
--fs-confirm-title: 36px;
--lh-confirm-title: 40px;
--fs-confirm-text: 16px;
--lh-confirm-text: 20px;
--fs-confirm-btn: var(--fs-text-md);
--lh-confirm-btn: var(--lh-text);
--fs-tip: 14px;
--lh-tip: 18px;
--head-sum-em: 1;
--head-dash-space: 0.045;
--head-dash-after: 0.03;
--head-hang-air: var(--space-2);
--fs-meta-more: var(--fs-meta);
--fs-caption: 16px;
--lh-caption: 20px;
--fs-text-lg: 20px;
--lh-text-lg: 36px;
--fs-text-md: 18px;
--lh-text-md: 32px;
--fs-text: 16px;
--lh-text: 20px;
--fs-text-sm: 14px;
--lh-text-sm: 18px;
--font-text-btn: var(--font-sans);
--vf-text-btn: var(--vf-light);
--fs-text-btn: var(--fs-btn-wave);
--lh-text-btn: var(--lh-text);
--fs-doc-h2: var(--fs-section-sm);
--lh-doc-h2: var(--lh-section-sm);
--fs-doc-text: var(--fs-text-md);
--lh-doc-text: calc(var(--fs-doc-text) * 1.55);
--fs-doc-nav: var(--fs-menu);
--lh-doc-nav: var(--lh-menu);
--fs-doc-bar: var(--fs-meta);
--lh-doc-bar: var(--lh-meta);
--fs-goto: var(--fs-text-sm);
--lh-goto: var(--lh-text);
--fs-body: var(--fs-text);
--lh-body: var(--lh-text);
--fs-meta: var(--fs-text);
--lh-meta: var(--lh-text);
--fs-point: var(--fs-text-md);
--vf-meta: "wdth" 75, "wght" 333;
--vf-meta-goal: "wdth" 75, "wght" 480;
--fs-nav: var(--fs-text);
--lh-nav: 16px;
--vf-nav: "wdth" 75, "wght" 480;
--fs-hint: var(--fs-text);
--lh-hint: 1;
--ls-hint: 0.2px;
--vf-hint: "wdth" 75, "wght" 333;
--fs-note: var(--fs-text);
--lh-note: var(--lh-text);
--ls-note: 0.14px;
--lh-note-input: 16px;
--vf-note: "wdth" 75, "wght" 300;
--vf-note-head: "wdth" 75, "wght" 500;
--fs-composer: var(--fs-text-md);
--lh-composer: 24px;
--ls-composer: 0.2px;
--fs-composer-phone: var(--fs-text-lg);
--lh-composer-phone: 28px;
--vf-composer: "wdth" 75, "wght" 333;
--vw: calc(1vw / var(--page-zoom, 1));
--vh: calc(1vh / var(--page-zoom, 1));
--big-from: 1920px;
--big-5k-w: 2560px;
--big-at-5k: 2.22;
--big-max: 3;
--col-min-wide: 500px;
--col-min: var(--col-min-wide);
--col-max: 900px;
--col: clamp(var(--col-min), calc(45 * var(--vw) - 24px), var(--col-max));
--col-heading: 80%;
--col-lead: 70%;
--head-logo-w: calc(clamp(var(--col-min-wide), calc(45 * var(--vw) - 24px), var(--col-max)) * 0.46);
--entry-doors-x: var(--space-10);
--entry-doors-bottom: var(--space-8);
--entry-doors-gap: var(--space-12);
--entry-doors-stack-gap: var(--space-6);
--wave-ds-rest-w: 281px;
--wave-ds-rest-h: 91px;
--wave-ds-rest-dx: 4px;
--wave-ds-rest-dy: 5px;
--wave-ds-hover-w: 281px;
--wave-ds-hover-h: 91px;
--wave-ds-hover-dx: 4px;
--wave-ds-hover-dy: 3px;
--wave-lite-rest-w: 562px;
--wave-lite-rest-h: 106px;
--wave-lite-rest-dx: 0px;
--wave-lite-rest-dy: 3px;
--wave-lite-hover-w: 562px;
--wave-lite-hover-h: 106px;
--wave-lite-hover-dx: 0px;
--wave-lite-hover-dy: -1px;
--entry-arrow-w: calc(var(--head-logo-w) * 0.55);
--entry-arrow-gap: calc(var(--head-logo-w) * 0.11);
--goto-pv: calc(var(--space-2) - 2px);
--goto-ph: calc(var(--space-4) - 2px);
--goto-gap: var(--space-2);
--col-rule: 71%;
--rule-h: 5.6px;
--dur-rule-draw: 700ms;
--ease-rule-draw: cubic-bezier(0.45, 0.05, 0.3, 1);
--rule-min-w: 300px;
--stage-x-rest: 40px;
--stage-folded-center: 100;
--stage-folded-shift: 1;
--fold-open: 0px;
--stage-fill: 1;
--stage-nudge10: 20;
}
.pp-shell {
--stage-x: calc((var(--stage-x-rest) + var(--stage-nudge10, 0) * 0.2 * var(--vw)) * (1 - var(--stage-folded-pull, 0) / 100) + var(--fold-open) + var(--stage-folded-shift) * 2 * var(--vw) * var(--stage-folded-pull, 0) / 100);
--stage-w: calc((var(--win-w, 100%) - var(--stage-x)) * var(--stage-fill));
--stage-axis: calc(var(--stage-x) + var(--stage-w) / 2);
}
:root {
--gap-lead: 18px;
--gap-rule: var(--space-12);
--gap-link: var(--space-4);
--gap-link-icon: var(--space-2);
--icon-link-box: 24px;
--icon-link-eyes: 40px;
--menu-gap: var(--space-2);
--menu-rise: 5px;
--menu-radius: 0 14px 14px 14px;
--menu-pt: 14px;
--menu-pr: 18px;
--menu-pb: var(--space-4);
--menu-pl: var(--space-4);
--menu-row-gap: var(--space-2);
--menu-item-h: var(--lh-tip);
--menu-icon: 16px;
--menu-icon-gap: 7px;
--menu-bg: var(--color-paper);
--confirm-w: 360px;
--confirm-y: 47%;
--confirm-pt: var(--space-5);
--confirm-pl: 23px;
--confirm-pr: var(--space-5);
--confirm-pb: var(--space-8);
--confirm-brief-pb: calc(var(--confirm-pt) + var(--space-1));
--confirm-radius: var(--radius-card);
--confirm-text-gap: 10px;
--confirm-actions-gap: var(--space-6);
--confirm-btn-gap: var(--space-10);
--confirm-pad-h: var(--space-10);
--confirm-pad-keep: 0.8;
--confirm-btn-pv: var(--space-2);
--confirm-btn-ph: var(--space-4);
--confirm-blur: 6px;
--doc-w: 820px;
--doc-top: var(--space-20);
--doc-pad: var(--space-16);
--doc-section-gap: var(--space-6);
--doc-block-gap: var(--space-4);
--doc-lead-gap: var(--space-2);
--doc-nav-x: var(--space-6);
--doc-nav-w: var(--space-20);
--doc-nav-w-compact: var(--touch-min);
--doc-nav-gap: var(--space-6);
--doc-nav-fade: var(--space-4);
--doc-nav-hold: 350ms;
--doc-nav-icon: var(--space-6);
--doc-nav-label-gap: var(--space-1);
--doc-bar-top: var(--space-5);
--doc-bar-h: var(--space-11);
--doc-bar-pad: var(--space-1);
--doc-bar-btn: var(--space-8);
--doc-bar-icon: var(--space-5);
--doc-bar-sep: var(--space-5);
--doc-bar-lift: var(--doc-photo-bar-gap);
--doc-nav-dim: 0.5;
--doc-block-x: var(--space-18);
--doc-block-pad: var(--space-5);
--doc-block-in: var(--space-8);
--doc-field-x: var(--space-2);
--doc-field-radius: var(--space-1);
--doc-plus-over: var(--space-1);
--doc-frame-w: 0.5px;
--doc-frame-dash: 2 2;
--doc-frame-hold: 1000ms;
--doc-trash: var(--space-8);
--doc-link-w: 320px;
--doc-track-w: 6px;
--doc-track-gap: var(--space-3);
--doc-bottom: var(--space-20);
--doc-field-pad: var(--space-1);
--doc-close: var(--space-9);
--doc-blur: 20px;
--doc-button: var(--space-8);
--doc-button-icon: 18px;
--dur-delete: 480ms;
--rail-pin-gap: var(--space-4);
--rail-plus-gap: var(--space-1);
--vf-nav-rest: "wdth" 75, "wght" 300;
--rail-sign: 20px;
--tip-pt: var(--space-1);
--tip-pb: 6px;
--tip-ph: var(--space-3);
--tip-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card);
--tip-icon-gap: 6px;
--dur-morph-content: 90ms;
--tip-gap: 6px;
--tip-side-gap: var(--space-3);
--tip-text-gap: var(--space-2);
--dur-mark-in: 0.35s;
--dur-mark-out: 0.15s;
--dur-note-mark-w: 0.18s;
--mark-field-w: calc(var(--mark-pad) * 2 + 6px);
--files-word-gap: 0.28em;
--dur-tip: 0.4s;
--wait-tip-fast: 400ms;
--resize-settle: 200ms;
--notice-hold: 1500ms;
--wait-tip-slow: 1000ms;
--wait-tip-near: 120ms;
--wait-tip-warm: 600ms;
--wait-keep-place: 4000ms;
--ease-tip: cubic-bezier(0.22, 0, 0.25, 1);
--tip-cursor-dx: 12px;
--tip-cursor-dy: 20px;
--scale-menu-hover: var(--scale-hint-hover);
--card-col: calc(70 * var(--vw));
--card-col-heading: 80%;
--card-col-lead: 93%;
--card-col-rule: 67%;
--card-rule-min-w: 126px;
--card-gap-lead: var(--space-3);
--card-gap-rule: var(--space-5);
--card-gap-meta: var(--space-2);
--card-head-tail: 14px;
--meta-h: 24px;
--meta-gap: clamp(var(--space-6), calc(2.6 * var(--vw)), var(--space-12));
--meta-gap-wrap: var(--space-2);
--meta-wrap-slack: var(--space-6);
--meta-halo: var(--space-6);
--meta-halo-bottom: calc(var(--card-block-gap) / 2);
--head-zone-gap: var(--space-10);
--meta-icon: 18px;
--meta-icon-gap: var(--space-1);
--meta-value-max: 30ch;
--card-block-gap: calc(var(--space-20) + var(--space-10));
--card-gap-head-audience: var(--card-block-gap);
--card-think-gap: var(--space-12);
--acc-w: 560px;
--acc-avatar: 252px;
--acc-photo-del: var(--space-10);
--acc-head-icon-air: var(--space-6);
--acc-head-rule-tuck: var(--space-1);
--acc-col-gap: 90px;
--acc-sub-tail: 12px;
--acc-pair-share: 65;
--acc-pair-min-company: 260px;
--acc-pair-margin: var(--space-12);
--fs-acc-data: var(--fs-text-lg);
--lh-acc-data: var(--lh-text-lg);
--fs-acc-ref: var(--fs-text-md);
--lh-acc-ref: var(--lh-text-md);
--fs-acc-when: var(--fs-text-md);
--lh-acc-when: var(--lh-text-md);
--lh-acc-when-narrow: 24px;
--fs-acc-name: 64px;
--fs-acc-col-title: 40px;
--acc-bottom-air: 100px;
--acc-block-gap: 76px;
--acc-svc-icon: var(--composer-icon);
--acc-svc-hit: var(--touch-min);
--acc-fill-gap: var(--space-1);
--acc-blank-gap: 60px;
--dur-acc-search: 1800ms;
--dur-acc-self-check: 5000ms;
--acc-send: var(--composer-icon);
--acc-breath-blur: 6px;
--acc-reveal-step: 140ms;
--dur-acc-inn-fly: 700ms;
--acc-reqs-gap: var(--space-2);
--acc-reqs-dot: 0.3em;
--acc-invoice-row-gap: var(--space-7);
--acc-ledger-shown: 5;
--acc-reqs-top: 22px;
--acc-rule-air: 14px;
--acc-company-rows-gap: var(--space-5);
--acc-exit-px: var(--space-4);
--acc-exit-py: 6px;
--acc-exit-right: 54px;
--acc-exit-top: 33px;
--acc-exit-dent-w: 71px;
--acc-exit-dent-h: 28px;
--acc-exit-dent-x: -4px;
--acc-exit-dent-y: 0px;
--acc-exit-dent-opacity: 100;
--acc-grid-gap-x: var(--space-10);
--acc-grid-gap-y: var(--space-2);
--acc-grid-wide: 760px;
--photo-box-w: min(640px, calc(80 * var(--vw)));
--photo-box-h: min(560px, calc(58 * var(--vh)));
--photo-d: min(400px, calc(70 * var(--vw)), calc(44 * var(--vh)));
--photo-y: 44%;
--photo-actions-gap: var(--space-9);
--photo-link-gap: 14px;
--photo-veil: color-mix(in srgb, #efefef 72%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--photo-veil: color-mix(in srgb, var(--color-paper) 72%, transparent);
}
--photo-veil-blur: 10px;
--photo-cross: 76px;
--photo-cross-gap: 18px;
--photo-cross-w: 2px;
--photo-in-blur: 18px;
--photo-in-scale: 0.94;
--dur-photo-in: 450ms;
--dur-photo-cross: 260ms;
--photo-cross-hold: 130ms;
--dur-photo-frame: 650ms;
--dur-photo-sand: 1700ms;
--dur-photo-blur: 800ms;
--photo-blur: 14px;
--photo-close-hit: 40px;
--photo-face-wait: 4000ms;
--photo-busy-after: 500ms;
--photo-sand-size: 1;
--photo-sand-break: 0.32;
--photo-sand-gather: 0.42;
--photo-sand-wave: 0.45;
--photo-sand-spread: 0.2;
--photo-sand-swirl: 5px;
--photo-sand-breath: 0.07;
--photo-sand-period: 900ms;
--photo-sand-alpha: 0.8;
--photo-windup: 160ms;
--photo-windup-scale: 1.05;
--photo-windup-back: 0.04;
--photo-arc: 0.22;
--photo-fly-k: 90;
--photo-fly-damp: 0.62;
--photo-cab-away-k: 25;
--photo-cab-away-damp: 0.95;
--photo-cab-home-k: 55;
--photo-cab-home-damp: 0.75;
--ord-w: 640px;
--ord-top: 96px;
--ord-launched-above: 8px;
--ord-launched-below: 8px;
--ord-bill-top: 18px;
--ord-stage-gap: var(--space-10);
--ord-pay-h-narrow: var(--space-14);
--ord-acts-gap-narrow: 14px;
--ord-was-strike: 1.5px;
--ord-field-gap: 34px;
--ord-payer-share: 40;
--ord-note-gap: var(--space-8);
--ord-promo-gap: var(--space-3);
--ord-doc-head: 0px;
--ord-doc-row: var(--space-2);
--ord-part-gap: var(--space-3);
--ord-row-gap: var(--space-4);
--ord-doc-pay: var(--space-8);
--ord-doc-acts: var(--space-5);
--ord-promo-tuck: var(--space-6);
--ord-pay-f-narrow: 1.3;
--dur-cta-glide: 700ms;
--lh-ord-payer: var(--space-7);
--ord-payer-mail-gap: var(--space-4);
--ord-doc-table: var(--space-2);
--ord-doc-note: var(--space-4);
--ord-doc-end: var(--gap-rule);
--fs-ord-promo: var(--fs-int-freq);
--ord-cta-gap: var(--space-12);
--ord-think-gap: var(--space-12);
--dur-ord-think: 2400ms;
--confirm-body-gap: var(--space-6);
--pay-qr-size: 240px;
--dur-audience-in: 900ms;
--dur-head-fold: var(--dur-audience-in);
--audience-in-blur: 16px;
--audience-in-step: 70ms;
--audience-in-chips: 250ms;
--audience-gap-sub: 9px;
--acc-sub-pull: var(--space-1);
--audience-gap-chips: var(--space-6);
--audience-pill-w: 250px;
--audience-pill-gap: var(--space-3);
--audience-pill-row: 32px;
--audience-chip-gap: 14px;
--audience-chip-row: 28px;
--chip-flow-gap: var(--space-7);
--chip-flow-w: 760px;
--chip-spot-v: 29px;
--chip-spot-h: 60px;
--chip-spot-hover: 35;
--dur-hybrid-out: 900ms;
--audience-gap-plus: calc(var(--fs-int-item) * (var(--int-plus-em) - 0.605));
--audience-plus: 24px;
--audience-search-gap: var(--space-2);
--budget-gap-table: var(--space-2);
--dur-sum-swap-out: 260ms;
--dur-sum-swap-in: 420ms;
--smoke-blur: 8px;
--smoke-scale: 0.72;
--fs-sum: 56px;
--lh-sum: 56px;
--budget-w: 640px;
--budget-col-gap: clamp(var(--space-6), calc(2 * var(--vw)), var(--space-10));
--budget-row-gap: var(--space-5);
--budget-narrow-at: 420px;
--budget-narrow-gap: 6px;
--budget-narrow-top: 4px;
--budget-unit-gap: var(--space-1);
--budget-narrow-col-gap: var(--space-4);
--budget-narrow-label-gap: 2px;
--budget-narrow-line-above: 38px;
--budget-narrow-line-below: 4px;
--budget-narrow-after: 0px;
--budget-total-gap: var(--space-2);
--budget-total-rise: 5px;
--switch-spot-v: 22px;
--switch-spot-h: 57px;
--pad-group-h: var(--switch-spot-h);
--pad-group-v: var(--switch-spot-v);
--switch-gap: var(--space-6);
--switch-spot-light: 0.95;
--switch-spot-light-core: 36;
--switch-spot-light-y: -2px;
--switch-spot-light-blur: 9px;
--switch-spot-shadow: 0.49;
--switch-spot-shadow-color: rgb(0 0 0 / var(--switch-spot-shadow));
--switch-spot-light-color: rgb(255 255 255 / var(--switch-spot-light));
--switch-spot-shadow-y: 8px;
--switch-spot-shadow-size: 61;
--switch-spot-shadow-blur: 3px;
--rail-list-x: 30px;
--rail-plus-y: 80px;
--rail-row-h: 24px;
--rail-row-gap: var(--space-3);
--phone-rail-fs: 22px;
--phone-rail-row-h: var(--space-10);
--phone-rail-row-gap: var(--space-3);
--phone-rail-sign: 28px;
--phone-talk-fs: 20px;
--phone-talk-lh: 28px;
--phone-talk-me-fs: 20px;
--phone-rail-seal: 32px;
--menu-button-hit-pad: var(--space-4);
--phone-rail-top: 73px;
--dur-fold-phone: 0.7s;
--phone-rail-bleed: var(--space-8);
--phone-rail-rule-inset: 32px;
--phone-rail-foot-gap: 80px;
--phone-rail-foot-gap-full: 4px;
--phone-rail-line-gap: 42px;
--phone-rail-fade: var(--space-12);
--dur-menu-sign-phone: var(--dur-reveal);
--dur-drag-hold: 450ms;
--scale-drag-lift: 1.06;
--drag-slop: var(--space-2);
--scale-drop-over: 1.3;
--scale-drop-ready: 1.15;
--scale-drop-eaten: 0.3;
--drop-pull-radius: 64px;
--drop-pull-reach: 4px;
--scale-drag-over: 0.9;
--drag-over-opacity: 0.45;
--menu-sign-long: 22px;
--menu-sign-short: var(--space-3);
--menu-sign-step: 6px;
--menu-sign-arrow: 12px;
--menu-sign-arrow-angle: 45deg;
--rail-seal: 24px;
--rail-label-gap: var(--space-2);
--rail-cut-min: 4;
--rail-label-min: var(--space-12);
--rail-cut-word-slack: 3;
--rail-cut-short-tail: 6;
--rail-label-w: calc(
var(--fold-edge) + var(--fold-shift) + var(--fold-tighten)
- var(--rail-list-x) - var(--rail-seal) - var(--rail-label-gap) - 8px
- var(--rail-label-gap) - var(--kebab)
);
--mark-pad: var(--space-1);
--hint-gap: 0px;
--fit-min: 82;
--fit-digit: 95;
--fit-gap-rate: 150;
--fit-gap-min: var(--space-6);
--hint-row-gap: var(--space-3);
--hint-wrap-gap: var(--space-1);
--hint-pt: 6px;
--hint-pr: var(--space-4);
--hint-pb: 9px;
--hint-pl: var(--space-4);
--hint-spot-v: 25px;
--hint-spot-dy: -4px;
--hint-spot-h: 48px;
--hint-spot: calc(-1 * var(--hint-spot-v) + var(--hint-spot-dy)) calc(-1 * var(--hint-spot-h))
calc(-1 * var(--hint-spot-v) - var(--hint-spot-dy)) calc(-1 * var(--hint-spot-h));
--hint-radius: 999px;
--scale-hint-hover: var(--scale-hover);
--scale-text-hover: var(--scale-hover);
--logo-h: 42px;
--logo-mark-w: 32px;
--logo-word-w: 68px;
--logo-word-h: 28px;
--logo-word-gap: 2px;
--logo-x: 24px;
--logo-y: 12px;
--kebab: 24px;
--rail-kebab-icon: 16px;
--rail-kebab-hit: 8px;
--rail-dots-pad: var(--space-1);
--rail-dots-from: 0.4;
--dur-rail-dots-in: 320ms;
--dur-rail-dots-out: 260ms;
--kebab-y: 20px;
--kebab-gap: 38px;
--kebab-gap-open: 10px;
--kebab-gap-folded: 24px;
--kebab-gap-open-5208: 24px;
--kebab-x: calc(var(--logo-x) + var(--logo-mark-w) + var(--kebab-gap));
--kebab-x-open: calc(
var(--logo-x) + var(--logo-mark-w) + var(--logo-word-gap) + var(--logo-word-w)
+ var(--kebab-gap-open)
);
--kebab-shift: calc(var(--kebab-x-open) - var(--kebab-x));
--chrome-group-pad: var(--space-4);
--chrome-group-w: calc(
var(--kebab-x) - var(--logo-x) + var(--kebab-shift) + var(--kebab)
+ var(--chrome-group-pad)
);
--chrome-group-h: calc(var(--logo-y) + var(--logo-h) + var(--chrome-group-pad));
--rail-icon: var(--rail-sign);
--rail-icon-x: calc(var(--rail-list-x) + var(--rail-row-h) / 2 - var(--rail-icon) / 2);
--rail-icon-gap: var(--rail-row-gap);
--rail-bottom: 40px;
--icon-avatar: var(--space-7);
--icon-avatar-photo: var(--space-10);
--avatar-right: 24px;
--avatar-box-h: 36px;
--avatar-box-top: 12px;
--fold-len: max(837px, calc(100 * var(--vh) + 2px));
--fold-thick: 256px;
--fold-edge-soft: 35%;
--fold-edge-soft-w: calc(var(--fold-thick) * 0.35);
--fold-cx: 57.5px;
--fold-opacity: 0.5;
--fold-shift: 174px;
--fold-shift-min: 40px;
--fold-tighten: 34px;
--rail-collapse-at: 720px;
--rail-cramp-gap: var(--space-3);
--fold-nudge-hover: 7px;
--fold-toggle-x: 56px;
--fold-toggle-w: 40px;
--fold-toggle-top: 64px;
--dur-fold: 0.7s;
--rail-label-in-delay: 100ms;
--rail-label-stagger: 30ms;
--dur-rail-label-in: var(--dur-blur-swap);
--dur-rail-label-out: 160ms;
--fold-edge: 52px;
--composer-dock-w: 80%;
--composer-plate-w: 75%;
--composer-dock-share: 80;
--composer-plate-share: 75;
--composer-grow-from: 1280px;
--composer-grow-to: 480px;
--composer-narrow-share: 84;
--composer-max-h: 300px;
--composer-bottom: 40px;
--fade-h: 180px;
--fade-solid: 64%;
--fade-edge: 80px;
--composer-plate-radius: 100px;
--composer-plate-pl: var(--space-3);
--composer-plate-pr: var(--space-10);
--composer-radius: 32px;
--composer-pt: var(--space-4);
--composer-pr: var(--space-5);
--composer-pb: var(--space-4);
--composer-pl: var(--space-6);
--composer-gap: var(--space-4);
--composer-tools-gap: 10px;
--composer-icon: 24px;
--dent-inset: -21px -32px -21px -39px;
--dent-radius: 100px;
--dent-image: url("/assets/img/dent.png");
--dent-image-note: url("/assets/img/dent-yellow.png");
--composer-question-gap: calc(var(--space-6) - var(--hint-pb));
--composer-question-drop: calc(
var(--composer-question-gap) + var(--lh-composer) + var(--composer-pt)
);
--canvas-pt: var(--space-6);
--canvas-pb: var(--space-6);
--head-anchor: 0.388;
--head-fill-lift: 50;
--dur-head-rise: 1400ms;
--head-rise-far: 240px;
--ease-head-rise: var(--ease-breath);
--optical-top: 35;
--head-top-tall: 48px;
--note-pin: 32px;
--note-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card);
--note-radius-flip: var(--radius-card) 0 var(--radius-card) var(--radius-card);
--note-drop-radius: 0 calc(var(--note-pin) / 2) calc(var(--note-pin) / 2) calc(var(--note-pin) / 2);
--note-drop-radius-flip: calc(var(--note-pin) / 2) 0 calc(var(--note-pin) / 2) calc(var(--note-pin) / 2);
--scale-note-pin-hover: var(--scale-hint-hover);
--note-home-gap: var(--space-4);
--note-cabinet-gap: var(--space-3);
--note-line-gap: var(--space-3);
--note-home-rise: 20px;
--dur-note-fly: 0.8s;
--dur-note-fly-away: 0.9s;
--note-fly-round: 0.55;
--note-away-scroll: 60px;
--lh-note-mark: 24px;
--fs-note-plus: 24px;
--vf-note-plus: "wdth" 100, "wght" 300;
--fs-note-count: 16px;
--vf-note-count: "wdth" 75, "wght" 400;
--note-panel-w: 340.5px;
--note-panel-edge: 24px;
--note-edge-bottom: 40px;
--note-row-gap: var(--space-2);
--note-tools-gap: 15px;
--note-tools-pr: var(--space-1);
--note-input-tools-pr: var(--space-2);
--note-text-gap: var(--space-1);
--note-time-gap: 2px;
--note-icon: 16px;
--note-icon-sw: 0.35px;
--note-file-gap: var(--space-2);
--note-thumb-h: 60px;
--attach-gap: var(--files-word-gap);
--attach-thumb-line: var(--lh-composer);
--attach-thumb-line-max-w: calc(var(--attach-thumb-line) * 2);
--attach-radius-line: var(--space-1);
--attach-thumb: var(--note-thumb-h);
--attach-thumb-max-w: calc(var(--attach-thumb) * 1.5);
--attach-radius: var(--space-2);
--attach-name-max: calc(var(--space-10) * 4);
--view-pad: var(--space-12);
--attach-row-gap: var(--space-2);
--note-pad-top: var(--space-4);
--note-card-pt: var(--note-pad-top);
--note-card-pr: var(--space-6);
--note-card-pb: 18px;
--note-card-pl: var(--space-6);
--note-card-gap: var(--space-1);
--note-input-pt: var(--space-4);
--note-input-pr: var(--space-4);
--note-input-pb: var(--space-4);
--note-input-pl: var(--space-6);
--note-card-gap-in: var(--space-3);
--note-card-edge: 0.5px;
--note-shadow-room: var(--space-6);
--dur-note-open: 225ms;
--ease-note-open: linear(0.0000, 0.0971, 0.2408, 0.3973, 0.5460, 0.6758, 0.7821,
0.8645, 0.9251, 0.9673, 0.9948, 1.0111, 1.0195, 1.0224, 1.0219, 1.0195, 1.0162,
1.0127, 1.0095, 1.0067, 1.0045, 1.0027, 1.0015, 1.0006, 1.0000, 0.9997, 0.9995, 1.0000);
--note-open-from: 0.62;
--ease-note-grow: linear(0.0000, 0.0519, 0.1563, 0.2945, 0.4495, 0.6069, 0.7556, 0.8874, 0.9972,
1.0825, 1.1430, 1.1802, 1.1968, 1.1964, 1.1827, 1.1597, 1.1311, 1.1000,
1.0691, 1.0405, 1.0156, 0.9952, 0.9797, 0.9691, 0.9630, 0.9607, 0.9617,
0.9650, 0.9699, 0.9758, 0.9820, 0.9880, 0.9935, 0.9982, 1.0019, 1.0047,
1.0066, 1.0075, 1.0078, 1.0074, 1.0067, 1.0056, 1.0044, 1.0032, 1.0020,
1.0010, 1.0001, 0.9994, 0.9989, 0.9986, 0.9985, 0.9985, 0.9986, 0.9987,
0.9990, 0.9992, 0.9994, 0.9997, 0.9999, 1.0000);
--dur-note-grow: 983ms;
--note-stagger: 60ms;
--note-gone-pv: var(--space-3);
--note-gone-gap: var(--space-2);
--note-gone-from: 2.4;
--note-x: 16px;
--note-x-inset: var(--space-2);
--note-bar-w: 3px;
--note-bar-gap: 6px;
--note-tear: 56px;
--note-rubber: 0.35;
--note-stretch: 0.14;
--note-magnet: 72px;
--note-magnet-pull: 0.6;
--note-magnet-shrink: 0.85;
--note-mark: 28px;
--dur-note-vanish: 450ms;
--dur-note-live: 1200ms;
--wait-note-undo: 5000ms;
--wait-doc-undo: 3000ms;
--note-dock-bulge: 0.15;
--note-dock-reach: 6px;
--note-grip-h: 12px;
--note-grip-pad: 6px;
--z-fold: 0;
--z-content: 10;
--scrollbar-w: var(--space-1);
--scrollbar-w-hover: var(--space-2);
--scrollbar-inset: var(--space-1);
--scrollbar-pad-y: var(--space-2);
--scrollbar-zone: var(--space-6);
--scrollbar-min: var(--space-10);
--wait-scrollbar-hide: 1000ms;
--z-composer: 30;
--dur-rail-windup: 200ms;
--rail-flight-windup: 6px;
--rail-flight-squash: 0.08;
--dur-rail-flight: 1300ms;
--ease-rail-flight: linear(0.0000, 0.0039, 0.0167, 0.0405, 0.0773, 0.1285, 0.1937,
0.2691, 0.3489, 0.4272, 0.5000, 0.5658, 0.6244, 0.6761, 0.7217, 0.7618, 0.7972, 0.8283,
0.8556, 0.8797, 0.9007, 0.9191, 0.9351, 0.9489, 0.9607, 0.9707, 0.9790, 0.9858, 0.9911,
0.9951, 0.9979, 0.9995, 1.0000);
--rail-flight-arc: 44px;
--rail-flight-arc-share: 0.35;
--rail-flight-rise: 0.75;
--rail-flight-fold: 0.3;
--rail-flight-fold-scale: 0.6;
--rail-flight-unfold: 0.62;
--rail-flight-stretch: 0.12;
--rail-flight-approach: 0.42;
--dur-rail-enter: 140ms;
--rail-flight-enter-scale: 0.1;
--rail-flight-blur: 12px;
--rail-flight-blur-from: 0.5;
--rail-take-peak: 1.15;
--dur-rail-take: 350ms;
--dur-rail-settle: 1400ms;
--rail-land-from: 0.94;
--z-fade: 20;
--z-rail: 40;
--z-menu-sheet: calc(var(--z-rail) - 2);
--z-fold-open: calc(var(--z-rail) - 1);
--z-topbar: 40;
--z-note: 50;
--z-note-pin: 15;
--z-note-carry: 55;
--z-popover: 60;
--z-scrollbar: var(--z-topbar);
--z-choice: var(--z-popover);
--choice-gap: var(--space-2);
--choice-edge: var(--space-4);
--choice-pad-y: var(--space-3);
--choice-pad-x: var(--space-5);
--choice-pad: var(--choice-pad-y) var(--choice-pad-x);
--choice-row-gap: 0px;
--choice-item-pad-y: var(--space-1);
--choice-item-pad-x: var(--space-3);
--choice-item-pad: var(--choice-item-pad-y) var(--choice-item-pad-x);
--dur-choice-open: var(--dur-note-grow);
--dur-choice-close: 320ms;
--dur-choice-fly: 520ms;
--choice-cascade: 16ms;
--z-modal: 80;
--z-tip: calc(var(--z-modal) + 2);
--z-doc-photo: calc(var(--z-modal) + 1);
--doc-photo-frame: 2px;
--doc-photo-corner: var(--space-3);
--doc-photo-min: var(--space-16);
--doc-photo-bar-gap: var(--space-2);
--doc-photo-dot: var(--space-4);
}
@media (max-width: 620px) {
:root {
--col-min: 0px;
}
}
:root {
--phone-below: 780px;
--phone-gutter: var(--space-4);
--kb-inset-min: var(--space-20);
--phone-col-x: calc(var(--avatar-right) + var(--icon-avatar-photo) + var(--space-1));
--touch-min: var(--space-11);
--phone-fold-x: -42px;
--menu-sheet-stop: 100px;
--menu-sheet-content-share: 51;
--topbar-reveal: var(--space-4);
--phone-kebab-x: calc(var(--space-6) * -1);
--phone-display-col: 20;
--phone-section-col: 18;
}
:root[data-phone] {
--fs-text-sm: var(--fs-text);
--lh-text-sm: var(--lh-text);
--fs-tip: var(--fs-text);
--lh-tip: var(--lh-text);
--stage-folded-shift: 0;
--logo-x: var(--space-3);
--avatar-right: var(--space-3);
--icon-avatar-photo: var(--space-8);
--avatar-box-top: calc(var(--avatar-right) - (var(--avatar-box-h) - var(--icon-avatar-photo)) / 2);
--logo-y: calc(var(--avatar-box-top) + (var(--avatar-box-h) - var(--logo-h)) / 2);
--rail-list-x: 18px;
--rail-plus-y: 72px;
--talk-orb-bottom: var(--space-7);
}
:root[data-phone] .pp-shell {
--col: var(--card-col);
--composer-field: var(--card-col);
}
:root[data-phone] {
--col-heading: 100%;
--col-lead: 100%;
--fs-display: min(var(--fs-display-wide), calc(var(--card-col) * var(--phone-display-col) / 100));
--fs-section: min(var(--fs-section-wide), calc(var(--card-col) * var(--phone-section-col) / 100));
--lh-section: var(--fs-section);
--fs-acc-name: var(--fs-display);
--acc-exit-right: var(--avatar-right);
--acc-exit-top: calc(var(--avatar-box-top) + var(--avatar-box-h) / 2);
--phone-flag-overhang: var(--space-2);
--phone-text-ls: -0.2px;
--fs-text-btn: var(--fs-text-lg);
--lh-text-btn: 24px;
--fs-ord-promo: var(--fs-text-lg);
--lh-display: calc(var(--fs-display) * var(--lh-display-share));
}
.pp-shell {
--composer-field-wide: calc(
var(--win-w, 100vw) * var(--composer-dock-share) * var(--composer-plate-share) / 10000
- var(--composer-plate-pl) - var(--composer-plate-pr)
);
--composer-field-narrow: calc(var(--stage-w) * var(--composer-narrow-share) / 100);
--composer-field: calc(
var(--composer-field-wide) * (1 - var(--composer-grow, 0))
+ var(--composer-field-narrow) * var(--composer-grow, 0)
);
--composer-dock-w: calc(var(--composer-field) + var(--composer-plate-pl) + var(--composer-plate-pr));
--col: min(clamp(var(--col-min-wide), calc(45 * var(--vw) - 24px), var(--col-max)), var(--composer-field));
--composer-plate-w: 100%;
}
:root {
--shadow-composer: 0 2px 2px 0 var(--color-ink-inverse),
inset 0 1px 2px 0 rgb(0 0 0 / 0.25),
inset 0 0.602px 0.602px -1.25px rgb(0 0 0 / 0.07),
inset 0 2.289px 2.289px -2.5px rgb(0 0 0 / 0.06),
inset 0 10px 10px -3.75px rgb(0 0 0 / 0.03),
0 0.602px 0.602px -1.25px rgb(0 0 0 / 0.18),
0 2.289px 2.289px -2.5px rgb(0 0 0 / 0.16),
0 10px 10px -3.75px rgb(0 0 0 / 0.06),
0 -6px 20px 0 rgb(255 255 255 / 0.7),
inset 0 3px 3px 0 rgb(0 0 0 / 0.1);
--pill-fill: none;
--shadow-pill: 0 -2px 2px 0 rgb(255 255 255 / 0.65),
inset 0 -1px 1px 0 rgb(0 0 0 / 0.23);
--shadow-pill-gone: 0 0 0 0 rgb(255 255 255 / 0),
inset 0 0 0 0 rgb(0 0 0 / 0);
--shadow-composer-halo: 0 10px 18px 22px var(--color-paper), 0 18px 64px 28px var(--color-paper);
--hints-halo-lift: 8px;
--hints-halo-blur: 19px;
--hints-halo-spread: 24px;
--shadow-hints-halo: 0 calc(var(--hints-halo-lift) * -1) var(--hints-halo-blur) var(--hints-halo-spread)
var(--color-paper),
0 calc(var(--hints-halo-lift) * -1) calc(var(--hints-halo-blur) * 3) calc(var(--hints-halo-spread) / 2)
var(--color-paper);
--icon-line: 1px;
--icon-line-hover: calc(var(--icon-line) * var(--icon-line-grow));
--icon-line-grow: calc(1.3 / 1.2);
--icon-line-head: 0.85;
--icon-stroke: 1.2;
--icon-step: 62px;
--icon-step-top: -66px;
--icon-step-tilt: rotate(39deg);
--icon-card: 54px;
--icon-card-top: -63px;
--icon-card-tilt: rotate(23deg);
--icon-entry: 86px;
--icon-entry-spiral: 57px;
--scale-entry-icon-hover: 1.2;
--icon-entry-rotate: -157deg;
--icon-entry-sw: 0.8;
--icon-kebab-scale-hover: 1.2;
--icon-plus-scale-hover: var(--icon-kebab-scale-hover);
--scale-hover: 1.05;
--scale-hover-strong: 1.2;
--dur-grow: var(--dur-icon-hover);
--ease-grow: var(--ease-icon-hover);
--scale-composer-hover: var(--scale-hover);
--scale-field-breath: 1.006;
--dur-field-breath: 1200ms;
--scale-link-hover: var(--scale-hover);
--scale-block-hover: var(--scale-hover);
--scale-card-hover: 1.02;
--dur-block-hover: var(--dur-grow);
--ease-block-hover: var(--ease-grow);
--head-sub-draw: calc(var(--gap-lead) / -4);
--scale-icon-hover: 1.083;
--scale-dots-hover: 1.25;
--dur-icon-hover: 1s;
--ease-icon-hover: var(--ease-settle);
--shadow-above: 5px 4px 5.8px 0 rgb(128 85 0 / 0.05),
6px 11px 12.6px 0 rgb(127 127 127 / 0.15);
--shadow-doc-sheet: 2px 14px 22.7px 0 rgb(0 0 0 / 0.25),
7px 5px 30.1px 0 rgb(0 0 0 / 0.1);
--shadow-doc-plus: 6px 11px 12.6px 0 rgb(127 127 127 / 0.15);
--focus-ring-w: 2px;
--focus-ring-offset: 3px;
--focus-ring-radius: 2px;
--int-list-x: 261px;
--int-list-x-compact: 80px;
--int-list-x-cols: 172px;
--int-row-w: 480px;
--int-cols-gap: var(--space-4);
--int-cols-slack: 0px;
--int-cols-hyst: 24px;
--int-note-x: 278px;
--int-freq-gap: var(--space-5);
--int-gap-top: calc(var(--fs-int-item) * (var(--int-top-em) - 0.48));
--int-count-y: -76px;
--int-word-x: 29px;
--int-word-y: 212px;
--int-groups-y: 244px;
--int-cap-ratio: 0.71;
--int-item-em: 1.36;
--int-group-em: 2.4;
--int-top-em: 1;
--int-plus-em: 1.4;
--int-line-extra: calc(var(--lh-int-item) - var(--fs-int-item) * var(--int-cap-ratio));
--int-item-gap: calc(var(--fs-int-item) * var(--int-item-em) - var(--int-line-extra));
--int-group-gap: calc(var(--fs-int-item) * var(--int-group-em) - var(--int-line-extra));
--int-indent: var(--space-5);
--int-src-row-gap: var(--space-3);
--int-open-pt: var(--space-2);
--int-open-pb: var(--space-3);
--int-sub-open-pt: var(--space-2);
--int-sub-open-pb: var(--space-3);
--int-wave-max: 128px;
--int-spot-l: -20;
--int-spot-r: 124.5;
--int-spot-dx: -71px;
--int-wave-top: -72px;
--int-wave-bottom: -55px;
--int-wave-left: -389px;
--int-wave-right: -361px;
--int-wave-pull: 0px;
--int-eye-size: 16px;
--int-trash-size: 16px;
--int-eye-pad: var(--space-1);
--int-eye-gap: var(--space-2);
--chan-caps-gap: calc(var(--int-freq-gap) + var(--int-eye-gap) + var(--int-eye-size));
--int-trash-gap: var(--space-5);
--dur-int-eye: 160ms;
--wait-int-eye: 260ms;
--int-eye-slide: 12px;
--int-wave-room: 297;
--fs-int-count: 280px;
--lh-int-count: 380px;
--ls-int-count: 2.8px;
--fs-int-word: var(--fs-text-md);
--lh-int-word: var(--lh-text-md);
--fs-int-groups: 18px;
--lh-int-groups: 28px;
--ls-int-groups: 0.2px;
--fs-int-item: var(--fs-text-md);
--lh-int-item: var(--lh-text-md);
--fs-int-freq: var(--fs-text);
--ls-int-freq: 0.16px;
--fs-int-note: 18px;
--lh-int-note: 24px;
--ls-int-note: 0.18px;
--fs-int-src: var(--fs-text);
--lh-int-src: var(--lh-text);
--vf-int-often: "wdth" 75, "wght" 600;
--vf-int-sometimes: "wdth" 75, "wght" 400;
--vf-int-rarely: "wdth" 75, "wght" 300;
--vf-int-light: "wdth" 75, "wght" 300;
--vf-int-sub: "wdth" 75, "wght" 600;
--dur-int-open: 630ms;
--int-stagger: 40ms;
--int-line-y: -4px;
--dur-int-wave-fade: 360ms;
--dur-int-wave-appear: 520ms;
--dur-int-note-fade: 300ms;
--dur-int-digits: 500ms;
--int-digits-blur: 0px;
--dur-int-digits-out: 80ms;
--dur-int-digits-in: 140ms;
--int-swap-blur: 2.5px;
--wave-slow: 139;
--wave-tail: 130;
--int-scroll-air: var(--space-6);
--int-bottom-air: 120px;
--int-bottom-air-bare: 120px;
--dur-int-reveal: 2400ms;
--int-reveal-soft: 0.35;
--ease-reveal-sheet: cubic-bezier(0.33, 0, 0.4, 1);
--int-in-blur: 24px;
--dur-int-smoke: 900ms;
--dur-int-smoke-in: 600ms;
--dur-int-smoke-out: 900ms;
--int-smoke-delay: 0ms;
--int-smoke-scale: 0.55;
--int-smoke-blur: 40px;
--int-cta-gap: var(--space-12);
--int-table-shift: 78px;
--int-bleed-max: 160px;
--int-bleed-air: var(--space-6);
--cta-pt: var(--space-3);
--cta-pb: var(--space-3);
--cta-pl: var(--space-6);
--cta-pr: var(--space-6);
--cta-gap: var(--space-1);
--fs-btn: 13.6px;
--lh-btn: 17px;
--fs-btn-note: 13.6px;
--lh-btn-note: 13.6px;
--fs-btn-wave: var(--fs-text);
--cta-fit-share: 100;
--cta-fit-min: 90;
--scale-cta-hover: var(--scale-hover);
--dur-cta-scale: 1s;
--cta-ink: var(--color-ink-inverse);
--chan-note-gap: var(--space-6);
--chan-eye-size: 20px;
--chan-eye-hit: 32px;
--chan-cols-air: var(--space-6);
--chan-table-x: var(--space-6);
--page-grid-w: calc(100% - var(--chan-table-x) * 2);
--page-grid-shift: 22;
--int-phone-sub-fs: var(--fs-text-md);
--int-phone-sub-lh: 24px;
--int-phone-sub-gap: var(--space-2);
--int-phone-indent: 0px;
--int-phone-freq-gap: var(--space-1);
--page-grid-mid-x: var(--space-12);
--chan-col-max: 240px;
--chan-word-x: 8px;
--chan-gap-top: calc(var(--fs-int-item) * (var(--int-top-em) - 0.48));
--chan-rule-left: 30px;
--chan-rule-right: 8px;
--chan-total-dx: -40px;
--spot-head-dx: -49px;
--spot-head-rotate: 0;
--spot-head-dy: 20px;
--spot-head-top: 28px;
--spot-head-right: 131px;
--spot-head-bottom: 68px;
--spot-head-left: 75px;
--spot-head-depth: 0.45;
--spot-head-square: 2;
--spot-head-soft: 1;
--spot-head-bowl: 0.03;
--spot-head-lightAngle: 90;
--spot-head-lightHeight: 70;
--spot-head-shadow: 0.18;
--spot-head-highlight: 0.62;
--spot-head-capWhite: 0.66;
--spot-head-capBlur: 1;
--spot-head-capWidth: 1070;
--spot-head-capHeight: 54;
--spot-head-capX: 0;
--spot-head-capY: -25;
--spot-head-capSquare: 2;
--spot-head-rough: 0;
--spot-head-roughScale: 0.02;
--spot-int-top: 0px;
--spot-int-right: 0px;
--spot-int-bottom: 0px;
--spot-int-left: 0px;
--spot-budget-top: 0px;
--spot-budget-right: 0px;
--spot-budget-bottom: 0px;
--spot-budget-left: 0px;
--spot-talk-dx: -194px;
--spot-talk-rotate: 0;
--spot-talk-dy: -182px;
--spot-talk-top: 397px;
--spot-talk-right: -68px;
--spot-talk-bottom: 179px;
--spot-talk-left: -119px;
--spot-talk-shadow: 0.21;
--spot-talk-shadowLeft: 0.33;
--spot-talk-shadowRight: 1.31;
--spot-talk-capWhite: 0.2;
--spot-talk-capWidth: 975;
--spot-talk-capHeight: 141;
--spot-talk-highlight: 0;
--spot-talk-capX: -77;
--spot-talk-capY: -6;
--spot-talk-capSquare: 1.6;
--spot-menu-dx: 157px;
--spot-menu-rotate: 0;
--spot-menu-dy: -75px;
--spot-menu-top: 400px;
--spot-menu-right: -72px;
--spot-menu-bottom: 47px;
--spot-menu-left: 87px;
--spot-menu-depth: 0.85;
--spot-menu-shadowLeft: 0.74;
--spot-menu-shadowRight: 0.88;
--spot-menu-capWidth: 1275;
--spot-menu-capHeight: 400;
--spot-menu-capX: -205;
--spot-phone-dx: -48px;
--spot-phone-rotate: 0;
--spot-phone-dy: -166px;
--spot-phone-top: 141px;
--spot-phone-right: 86px;
--spot-phone-bottom: 306px;
--spot-phone-left: 33px;
--spot-phone-depth: -0.45;
--spot-phone-bowl: 0.12;
--spot-phone-lightAngle: 292;
--spot-phone-shadow: 0.25;
--spot-phone-highlight: 0.96;
--spot-phone-shadowLeft: 1.05;
--spot-phone-shadowRight: 1.08;
--spot-phone-capWhite: 0.85;
--spot-phone-capHeight: 175;
--spot-phone-capX: -102;
--spot-phone-capY: -11;
--spot-sheet-dx: -84px;
--spot-sheet-rotate: 0;
--spot-sheet-dy: -300px;
--spot-sheet-top: -293px;
--spot-sheet-right: 251px;
--spot-sheet-bottom: -179px;
--spot-sheet-left: 147px;
--spot-sheet-depth: var(--spot-site-rest-depth);
--spot-sheet-square: 2.4;
--spot-sheet-soft: var(--spot-site-rest-soft);
--spot-sheet-bowl: 0.03;
--spot-sheet-lightAngle: var(--spot-site-rest-lightAngle);
--spot-sheet-lightHeight: var(--spot-site-rest-lightHeight);
--spot-sheet-shadow: var(--spot-site-rest-shadow);
--spot-sheet-highlight: var(--spot-site-rest-highlight);
--spot-sheet-capWhite: var(--spot-site-rest-capWhite);
--spot-sheet-capBlur: var(--spot-site-rest-capBlur);
--spot-sheet-capWidth: var(--spot-site-rest-capWidth);
--spot-sheet-capHeight: var(--spot-site-rest-capHeight);
--spot-sheet-capX: var(--spot-site-rest-capX);
--spot-sheet-capY: var(--spot-site-rest-capY);
--spot-sheet-capSquare: var(--spot-site-rest-capSquare);
--spot-sheet-rough: var(--spot-site-rest-rough);
--spot-sheet-roughScale: var(--spot-site-rest-roughScale);
--spot-ad-top: 0px;
--spot-ad-right: 0px;
--spot-ad-bottom: 0px;
--spot-ad-left: 0px;
--spot-edge-hold: 12px;
--spot-canvas-step: 128;
--spot-block-stiff: 43;
--spot-block-damp: 30;
--spot-menu-stiff: 40;
--spot-menu-damp: 12.6;
--spot-menu-enter-x: 60;
--spot-menu-enter-w: 180;
--spot-menu-enter-h: 35;
--spot-menu-ghost-sx: 105;
--spot-menu-ghost-sy: 260;
--spot-menu-ghost-dx: 220;
--dur-spot-menu-ghost: 1100ms;
--dur-spot-menu-swap: 900ms;
--spot-near-stiff: 17;
--spot-near-damp: 10.6;
--spot-cross-x: 80;
--spot-cross-w: 100;
--spot-cross-h: 90;
--spot-quiet-leave-w: 112;
--spot-quiet-leave-h: 85;
--spot-quiet-leave-x: 30;
--spot-seen-min: 40px;
--spot-glide-min: 8px;
--spot-site-rest-dx: -41px;
--spot-site-rest-dy: 65px;
--spot-site-rest-top: -36px;
--spot-site-rest-right: 89px;
--spot-site-rest-bottom: -33px;
--spot-site-rest-left: 26px;
--spot-site-rest-depth: 1.05;
--spot-site-rest-square: 2.1;
--spot-site-rest-soft: 1;
--spot-site-rest-bowl: 0.11;
--spot-site-rest-lightAngle: 270;
--spot-site-rest-lightHeight: 59;
--spot-site-rest-shadow: 0.08;
--spot-site-rest-highlight: 0.2;
--spot-site-rest-capWhite: 0.86;
--spot-site-rest-capBlur: 0.75;
--spot-site-rest-capWidth: 1070;
--spot-site-rest-capHeight: 57;
--spot-site-rest-capX: -35;
--spot-site-rest-capY: -44;
--spot-site-rest-capSquare: 2;
--spot-site-rest-rough: 0;
--spot-site-rest-roughScale: 0.002;
--spot-site-hover-dx: -3px;
--spot-site-hover-dy: 37px;
--spot-site-hover-top: 134px;
--spot-site-hover-right: 184px;
--spot-site-hover-bottom: 39px;
--spot-site-hover-left: 159px;
--spot-site-hover-depth: -0.85;
--spot-site-hover-square: 2;
--spot-site-hover-soft: 1;
--spot-site-hover-bowl: 0.11;
--spot-site-hover-lightAngle: 270;
--spot-site-hover-lightHeight: 51;
--spot-site-hover-shadow: 0.08;
--spot-site-hover-highlight: 0.98;
--spot-site-hover-capWhite: 0.86;
--spot-site-hover-capBlur: 0.75;
--spot-site-hover-capWidth: 965;
--spot-site-hover-capHeight: 95;
--spot-site-hover-capX: -35;
--spot-site-hover-capY: -44;
--spot-site-hover-capSquare: 2;
--spot-site-hover-rough: 0;
--spot-site-hover-roughScale: 0.002;
--spot-site-dx: var(--spot-site-rest-dx);
--spot-site-dy: var(--spot-site-rest-dy);
--spot-site-top: var(--spot-site-rest-top);
--spot-site-right: var(--spot-site-rest-right);
--spot-site-bottom: var(--spot-site-rest-bottom);
--spot-site-left: var(--spot-site-rest-left);
--spot-site-depth: var(--spot-site-rest-depth);
--spot-site-square: var(--spot-site-rest-square);
--spot-site-soft: var(--spot-site-rest-soft);
--spot-site-bowl: var(--spot-site-rest-bowl);
--spot-site-lightAngle: var(--spot-site-rest-lightAngle);
--spot-site-lightHeight: var(--spot-site-rest-lightHeight);
--spot-site-shadow: var(--spot-site-rest-shadow);
--spot-site-highlight: var(--spot-site-rest-highlight);
--spot-site-capWhite: var(--spot-site-rest-capWhite);
--spot-site-capBlur: var(--spot-site-rest-capBlur);
--spot-site-capWidth: var(--spot-site-rest-capWidth);
--spot-site-capHeight: var(--spot-site-rest-capHeight);
--spot-site-capX: var(--spot-site-rest-capX);
--spot-site-capY: var(--spot-site-rest-capY);
--spot-site-capSquare: var(--spot-site-rest-capSquare);
--spot-site-rough: var(--spot-site-rest-rough);
--spot-site-roughScale: var(--spot-site-rest-roughScale);
}
:root[data-site-spot='hover'] {
--spot-site-dx: var(--spot-site-hover-dx);
--spot-site-dy: var(--spot-site-hover-dy);
--spot-site-top: var(--spot-site-hover-top);
--spot-site-right: var(--spot-site-hover-right);
--spot-site-bottom: var(--spot-site-hover-bottom);
--spot-site-left: var(--spot-site-hover-left);
--spot-site-depth: var(--spot-site-hover-depth);
--spot-site-square: var(--spot-site-hover-square);
--spot-site-soft: var(--spot-site-hover-soft);
--spot-site-bowl: var(--spot-site-hover-bowl);
--spot-site-lightAngle: var(--spot-site-hover-lightAngle);
--spot-site-lightHeight: var(--spot-site-hover-lightHeight);
--spot-site-shadow: var(--spot-site-hover-shadow);
--spot-site-highlight: var(--spot-site-hover-highlight);
--spot-site-capWhite: var(--spot-site-hover-capWhite);
--spot-site-capBlur: var(--spot-site-hover-capBlur);
--spot-site-capWidth: var(--spot-site-hover-capWidth);
--spot-site-capHeight: var(--spot-site-hover-capHeight);
--spot-site-capX: var(--spot-site-hover-capX);
--spot-site-capY: var(--spot-site-hover-capY);
--spot-site-capSquare: var(--spot-site-hover-capSquare);
--spot-site-rough: var(--spot-site-hover-rough);
--spot-site-roughScale: var(--spot-site-hover-roughScale);
}
:root[data-screen='account'] {
--spot-head-dx: -45px;
--spot-head-dy: 65px;
--spot-head-top: -200px;
--spot-head-right: 34px;
--spot-head-bottom: 23px;
--spot-head-left: -16px;
}
:root[data-screen='analysing'] {
--spot-head-dx: -60px;
--spot-head-dy: -7px;
--spot-head-top: -139px;
--spot-head-right: 131px;
--spot-head-bottom: 125px;
--spot-head-left: -13px;
}
:root[data-screen='find-you'], :root[data-screen='confirm'] {
--spot-head-dx: -104px;
--spot-head-dy: 50px;
--spot-head-top: 131px;
--spot-head-right: 390px;
--spot-head-bottom: 34px;
--spot-head-left: 101px;
}
:root[data-screen='entry-interests'], :root[data-screen='entry-campaign'] {
--spot-head-dx: -49px;
--spot-head-dy: -15px;
--spot-head-top: -71px;
--spot-head-right: 244px;
--spot-head-bottom: 68px;
--spot-head-left: 180px;
}
@property --talk-line-raw {
syntax: "<length>";
inherits: true;
initial-value: 0px;
}
:root {
--talk-halo-fade: 48px;
--talk-halo-room: calc(var(--space-20) * 2);
--talk-share: calc(26 * var(--vw));
--talk-min: 320px;
--talk-max: 420px;
--talk-pad: var(--space-6);
--hyphen-chat-word: 5;
--hyphen-chat-before: 2;
--hyphen-chat-after: 2;
--talk-top-air: var(--space-2);
--talk-top: calc(var(--avatar-box-top) + var(--avatar-box-h) + var(--talk-top-air));
--talk-fade-h: 48px;
--talk-fade-bottom-h: 16px;
--talk-line-w10: 5;
--talk-line-tint: 12;
--color-talk-line: rgb(0 0 0 / calc(var(--talk-line-tint) / 100));
--talk-line-gap: 6px;
--talk-mark-w: calc(var(--talk-mark-h) * 32 / 42);
--talk-line-raw: calc(
var(--talk-pad) - var(--talk-mark-gap) - var(--talk-mark-w) - var(--talk-line-gap) -
var(--talk-line-w10) * 0.1px
);
--dur-talk-focus: var(--dur-area-reveal);
--dur-talk-smoke: 600ms;
--talk-smoke-step: 90ms;
--talk-smoke-blur: 16px;
--talk-smoke-rise: 16px;
--talk-smoke-scale: 0.96;
--talk-feed-bottom: 88px;
--talk-feed-air: var(--space-5);
--talk-gap: var(--space-4);
--talk-place-gap: var(--space-2);
--talk-place-pull: calc(var(--talk-gap) / -2);
--talk-me-fs: 16px;
--talk-mark-h: 24px;
--talk-mark-gap: 6px;
--talk-mark-room: var(--space-6);
--dur-talk: 1s;
--talk-park-at: 0.9;
--park-lead: 22;
--park-tail: 12;
--park-lag: 220;
--park-damp: 0.7;
--park-slim: 0.6;
--dur-talk-me-in: 700ms;
--talk-me-rise: 40px;
--dur-talk-line-in: 650ms;
--talk-line-step: 120ms;
--talk-line-blur: 8px;
--dur-orb-land: 450ms;
--park-fade: 260;
--dur-loader-beat: 700ms;
--talk-content-x: 38px;
--talk-col-share: 100%;
--talk-spot-v: 35px;
--talk-me-indent: var(--space-10);
--spot-slow: 240;
--spot-tail: 130;
--spot-fly-dip: 0;
--spot-away-x: 140px;
--dur-spot-away: 300ms;
--dur-spot-look: calc(4ms * var(--spot-slow));
--dur-spot-hush: 300ms;
--dur-spot-hush-out: 900ms;
--talk-scrollbar-w: 12px;
--talk-icon-hit: 32px;
--talk-collapse-icon: 20px;
--phone-talk-head-icon: 28px;
--talk-head-icons: 18px;
--talk-head-gap: calc(var(--talk-head-icons) - (var(--talk-icon-hit) - var(--talk-collapse-icon)));
--talk-collapse-dx: -22px;
--talk-icon-hover: 1.15;
--talk-strip: calc(var(--avatar-right) * 2 + var(--icon-avatar));
--talk-field-h: 56px;
--talk-dot: 44px;
--talk-dot-icon: var(--space-10);
--dur-talk-fold: 1.1s;
--talk-fold-delay: 120ms;
--dur-talk-hide: 260ms;
--talk-point: 8px;
--talk-orb-at: 0.3;
--dur-orb-point: 120ms;
--dur-orb-leave: 200ms;
--talk-orb-bottom: var(--space-10);
--talk-star-hover: 1.1;
--talk-spark-hover: 1.35;
--talk-spark-fly: 10px;
--talk-spark-turn: 45deg;
--think-gap: var(--space-3);
--think-char: 40ms;
--think-hold: 600ms;
--think-out: 260ms;
--wait-offer-line: 350ms;
--wait-offer-hints: 650ms;
--fs-think: var(--fs-tip);
--lh-think: var(--lh-meta);
--think-dot: 4px;
--think-dot-gap: 3px;
--think-dot-jump: 3px;
--dur-think-dots: 1.2s;
--analyse-gap: var(--space-10);
--dur-analyse-out: 500ms;
--dur-breath: 4600ms;
--breath-rest: 0;
--breath-spread: 18.5;
--breath-far: 0.31;
--breath-reach: 3.2;
--breath-lag: 0.58;
--breath-fade: 1;
--breath-status-gap: var(--space-6);
--breath-status-fs: 16px;
--dur-sand-out: 900ms;
--dur-sand-in: 1400ms;
--sand-in-after: 0ms;
--sand-spread: 40px;
--sand-rise: 24px;
--sand-life: 0.55;
--sand-size: 1;
--sand-alpha: 0.75;
--sand-thin: 1.6;
--dur-sand-cloud: 1800ms;
--sand-cloud-break: 0.35;
--sand-cloud-gather: 0.4;
--sand-cloud-wave: 0.3;
--sand-cloud-spread: 60px;
--sand-cloud-swirl: 10px;
--sand-cloud-rise: 8px;
--sand-cloud-alpha: 0.8;
--dur-breath-settle: 700ms;
--analyse-blur: 24px;
--ad-phone-w: 330px;
--ad-phone-radius: 35px;
--ad-phone-bezel: 8px;
--ad-phone-bezel-color: var(--color-paper);
--ad-phone-shadow: 7px 7px 14.1px 0 rgb(0 0 0 / 0.1), 5px 18px 50px 0 rgb(0 0 0 / 0.25);
--tg-bg: #17212b;
--tg-wall-a: #0f1a24;
--tg-wall-b: #16222e;
--tg-wall-c: #101b26;
--tg-bubble: #1c2a38;
--tg-text: #e7edf3;
--tg-text-2: #c4cdd6;
--tg-muted: #7c8794;
--tg-meta: #697887;
--tg-accent: #62a3e8;
--tg-button: #2f83e0;
--tg-button-hover: #3a8ae0;
--tg-ava: #4a7fb5;
--tg-media-a: #243748;
--tg-media-b: #151f2c;
--ad-stage-gap-top: var(--space-4);
--ad-mark-w: 180px;
--ad-arrow-rise: 48px;
--ad-link-arrow-h: 84px;
--ad-link-gap: var(--space-2);
--ad-link-arrow-color: #fff;
@supports (color: color-mix(in lab, red, red)) {
--ad-link-arrow-color: color-mix(in srgb, #fff 14%, var(--tg-msg-bottom));
}
--fs-ad-mark: var(--fs-text-md);
--lh-ad-mark: 26px;
--fs-ad-mark-note: var(--fs-text-sm);
--lh-ad-mark-note: var(--lh-text-sm);
--ad-mark-after: var(--space-10);
--ad-mark-note-gap: -1px;
--ad-mark-value-note-gap: calc(var(--ad-mark-note-gap) + 3px);
--ad-mark-value-gap: var(--space-2);
--ad-mark-row-gap: var(--space-3);
--ad-mark-gap: var(--space-10);
--ad-mark-top: 52px;
--ad-launch-gap: 18px;
--tg-msg-w: 346px;
--tg-msg-radius: 18px;
--tg-msg-tail-radius: 4px;
--tg-msg-pad: var(--space-3);
--tg-msg-pad-top: var(--space-2);
--tg-msg-pad-bottom: var(--space-2);
--tg-msg-top: #5a63de;
--tg-msg-bottom: #3c8be8;
--tg-msg-ink: #ffffff;
--tg-msg-fs: 16px;
--tg-msg-lh: 22px;
--tg-link-gap: var(--space-2);
--tg-preview-bg: rgb(255 255 255 / 0.14);
--tg-preview-radius: 6px;
--tg-preview-bar: 3px;
--tg-preview-pad: 8px 10px 10px;
--tg-preview-fs: 15px;
--tg-preview-lh: 19px;
--tg-preview-img-gap: var(--space-2);
--tg-preview-img-radius: 4px;
--tg-time-fs: 12px;
--tg-time-ink: rgb(255 255 255 / 0.75);
--tg-date-gap: var(--space-2);
--tg-date-bg: rgb(0 0 0 / 0.22);
--tg-date-ink: #ffffff;
--tg-date-fs: 15px;
--tg-date-h: 26px;
--tg-date-pad: 0 12px;
--ad-post-edit-pad: var(--space-1);
--ad-post-edit-radius: var(--tg-preview-radius);
--ad-post-edit-hover: rgb(255 255 255 / 0.1);
--vf-tg: 'wdth' 100, 'wght' 400;
--vf-tg-strong: 'wdth' 100, 'wght' 600;
--tg-tail-w: 40px;
--tg-tail-h: 44px;
--tg-shadow-x: 10px;
--tg-shadow-y: 32px;
--tg-shadow-blur: 44px;
--tg-shadow-a: 0.23;
--tg-shadow: 0 1px 2px rgb(0 0 0 / 0.12),
var(--tg-shadow-x) var(--tg-shadow-y) var(--tg-shadow-blur) rgb(0 0 0 / var(--tg-shadow-a));
--t-hero-script: 25.5;
--t-hero-script-grow: 1.273;
--t-hero-script-lh: 1.1;
--t-body: 18;
--t-body-grow: 1.125;
--t-body-lh: 1.34;
--t-hero-legend: 15.5;
--t-hero-legend-grow: 1;
--t-hero-legend-lh: 1.5;
--t-nav: 14.5;
--t-nav-grow: 1;
--t-nav-lh: 1.5;
--t-h2: 70;
--t-h2-grow: 1.385;
--t-h2-lh: 0.8;
--t-script: 25;
--t-script-grow: 1.316;
--t-script-lh: 1.2;
--t-num: 181;
--t-num-grow: 1.692;
--t-num-lh: 0.9;
--t-unit: 38;
--t-unit-grow: 1.467;
--t-unit-lh: 0.8;
--t-card-h: 37;
--t-card-h-grow: 1.4;
--t-card-h-lh: 1.0;
--t-qr-h: 31.5;
--t-qr-h-grow: 1.385;
--t-qr-h-lh: 1.05;
--t-legal-brand: 58;
--t-legal-brand-grow: 1.3;
--t-legal-brand-lh: 1;
--t-hero-script-min: calc(var(--t-hero-script) / (1 + (var(--t-hero-script-grow) - 1) * 0.5676));
--t-hero-script-max: calc(var(--t-hero-script-min) * var(--t-hero-script-grow));
--t-body-min: calc(var(--t-body) / (1 + (var(--t-body-grow) - 1) * 0.5676));
--t-body-max: calc(var(--t-body-min) * var(--t-body-grow));
--t-hero-legend-min: calc(var(--t-hero-legend) / (1 + (var(--t-hero-legend-grow) - 1) * 0.5676));
--t-hero-legend-max: calc(var(--t-hero-legend-min) * var(--t-hero-legend-grow));
--t-nav-min: calc(var(--t-nav) / (1 + (var(--t-nav-grow) - 1) * 0.5676));
--t-nav-max: calc(var(--t-nav-min) * var(--t-nav-grow));
--t-h2-min: calc(var(--t-h2) / (1 + (var(--t-h2-grow) - 1) * 0.5676));
--t-h2-max: calc(var(--t-h2-min) * var(--t-h2-grow));
--t-script-min: calc(var(--t-script) / (1 + (var(--t-script-grow) - 1) * 0.5676));
--t-script-max: calc(var(--t-script-min) * var(--t-script-grow));
--t-num-min: calc(var(--t-num) / (1 + (var(--t-num-grow) - 1) * 0.5676));
--t-num-max: calc(var(--t-num-min) * var(--t-num-grow));
--t-unit-min: calc(var(--t-unit) / (1 + (var(--t-unit-grow) - 1) * 0.5676));
--t-unit-max: calc(var(--t-unit-min) * var(--t-unit-grow));
--t-card-h-min: calc(var(--t-card-h) / (1 + (var(--t-card-h-grow) - 1) * 0.5676));
--t-card-h-max: calc(var(--t-card-h-min) * var(--t-card-h-grow));
--t-qr-h-min: calc(var(--t-qr-h) / (1 + (var(--t-qr-h-grow) - 1) * 0.5676));
--t-qr-h-max: calc(var(--t-qr-h-min) * var(--t-qr-h-grow));
--t-legal-brand-min: calc(var(--t-legal-brand) / (1 + (var(--t-legal-brand-grow) - 1) * 0.5676));
--t-legal-brand-max: calc(var(--t-legal-brand-min) * var(--t-legal-brand-grow));
--ls-hero-legend: -0.02em;
--nav-wght: 280;
--hero-legend-wght: 280;
--nav-track: -0.015;
}
.pp-landing {
--fluid-step: calc((100 * var(--vw) - 810px) / 1110);
--fs-hero-script: clamp(calc(var(--t-hero-script-min) * 1px), calc(var(--t-hero-script-min) * 1px + (var(--t-hero-script-max) - var(--t-hero-script-min)) * var(--fluid-step)), calc(var(--t-hero-script-max) * 1px));
--lh-hero-script: calc(var(--fs-hero-script) * var(--t-hero-script-lh));
--fs-body: clamp(calc(var(--t-body-min) * 1px), calc(var(--t-body-min) * 1px + (var(--t-body-max) - var(--t-body-min)) * var(--fluid-step)), calc(var(--t-body-max) * 1px));
--lh-body: calc(var(--fs-body) * var(--t-body-lh));
--fs-hero-legend: clamp(calc(var(--t-hero-legend-min) * 1px), calc(var(--t-hero-legend-min) * 1px + (var(--t-hero-legend-max) - var(--t-hero-legend-min)) * var(--fluid-step)), calc(var(--t-hero-legend-max) * 1px));
--lh-hero-legend: calc(var(--fs-hero-legend) * var(--t-hero-legend-lh));
--vf-nav: "wdth" 75, "wght" var(--nav-wght);
--vf-hero-legend: "wdth" 75, "wght" var(--hero-legend-wght);
--ls-nav: calc(var(--nav-track) * 1em);
--fs-nav: clamp(calc(var(--t-nav-min) * 1px), calc(var(--t-nav-min) * 1px + (var(--t-nav-max) - var(--t-nav-min)) * var(--fluid-step)), calc(var(--t-nav-max) * 1px));
--lh-nav: calc(var(--fs-nav) * var(--t-nav-lh));
--fs-h2: clamp(calc(var(--t-h2-min) * 1px), calc(var(--t-h2-min) * 1px + (var(--t-h2-max) - var(--t-h2-min)) * var(--fluid-step)), calc(var(--t-h2-max) * 1px));
--lh-h2: calc(var(--fs-h2) * var(--t-h2-lh));
--fs-script: clamp(calc(var(--t-script-min) * 1px), calc(var(--t-script-min) * 1px + (var(--t-script-max) - var(--t-script-min)) * var(--fluid-step)), calc(var(--t-script-max) * 1px));
--lh-script: calc(var(--fs-script) * var(--t-script-lh));
--fs-num: clamp(calc(var(--t-num-min) * 1px), calc(var(--t-num-min) * 1px + (var(--t-num-max) - var(--t-num-min)) * var(--fluid-step)), calc(var(--t-num-max) * 1px));
--lh-num: calc(var(--fs-num) * var(--t-num-lh));
--fs-unit: clamp(calc(var(--t-unit-min) * 1px), calc(var(--t-unit-min) * 1px + (var(--t-unit-max) - var(--t-unit-min)) * var(--fluid-step)), calc(var(--t-unit-max) * 1px));
--lh-unit: calc(var(--fs-unit) * var(--t-unit-lh));
--fs-card-h: clamp(calc(var(--t-card-h-min) * 1px), calc(var(--t-card-h-min) * 1px + (var(--t-card-h-max) - var(--t-card-h-min)) * var(--fluid-step)), calc(var(--t-card-h-max) * 1px));
--lh-card-h: calc(var(--fs-card-h) * var(--t-card-h-lh));
--fs-legal-brand: clamp(calc(var(--t-legal-brand-min) * 1px), calc(var(--t-legal-brand-min) * 1px + (var(--t-legal-brand-max) - var(--t-legal-brand-min)) * var(--fluid-step)), calc(var(--t-legal-brand-max) * 1px));
--lh-legal-brand: calc(var(--fs-legal-brand) * var(--t-legal-brand-lh));
--fs-qr-h: clamp(calc(var(--t-qr-h-min) * 1px), calc(var(--t-qr-h-min) * 1px + (var(--t-qr-h-max) - var(--t-qr-h-min)) * var(--fluid-step)), calc(var(--t-qr-h-max) * 1px));
--lh-qr-h: calc(var(--fs-qr-h) * var(--t-qr-h-lh));
--fs-card-p: var(--fs-body);
--lh-card-p: var(--lh-body);
--fs-legend: var(--fs-body);
--lh-legend: var(--lh-body);
--fs-faq-q: var(--fs-hero-script);
--lh-faq-q: var(--lh-hero-script);
}
:root {
--cover-logo-w: 21;
--cover-logo-x: 9.2;
--cover-logo-y: 22.4;
--cover-img-w: 102;
--cover-img-x: 56;
--cover-img-y: 53.2;
--cover-aim-gears: 33.5;
--cover-aim-car-in: 30;
--cover-aim-car-out: 60;
--cover-block-mt: var(--space-4);
--cover-caption-gap: var(--space-2);
--cover-arrow-gap: var(--space-2);
--cover-arrow-min: var(--space-12);
--cover-text-edge: 28;
--cover-obj-right: 76;
--cover-text-edge-gap: var(--space-4);
--cover-cta-right: 28px;
--cover-cta-bottom: 30px;
--cover-dots-bottom: 38px;
--dur-cover-press: 2600ms;
--cover-press-delay: 300ms;
--cover-press-scale: 0.88;
--cover-press-soft: 0.85;
--cover-press-tension: 0.35;
--cover-logo-at: 0.7;
--cover-text-delay: 350ms;
--dur-cover-smoke-in: 1100ms;
--cover-smoke-scale: 1.6;
--cover-smoke-blur: 48px;
--cover-copy-right: 5;
--em-cover-title-1: 14.7;
--em-cover-title-2: 9.9;
--em-cover-text-left: 21.6;
--em-cover-right: 16.6;
--cover-legend-gap: var(--space-2);
--cover-copy-min: 0.8;
--cover-copy-span: 320;
--cover-phone-narrow-w: 375;
--cover-phone-wide-w: 440;
--cover-phone-logo-w: 45;
--cover-phone-logo-w-wide: 51;
--cover-phone-img-w: 162;
--cover-phone-img-x: 46.5;
--cover-phone-pad: var(--space-6);
--l-phone-max-w: 520px;
--cover-phone-cta-f: 1.2;
--cover-phone-cta-pad: var(--space-3);
--cover-phone-bottom: var(--space-6);
--cover-phone-arrow-gap: 3px;
--cover-phone-short-h: 667;
--cover-phone-tall-h: 956;
--cover-phone-logo-y: 11.5;
--cover-phone-logo-y-tall: 15;
--cover-phone-img-y: 55;
--cover-phone-img-y-tall: 58;
--cover-phone-text-y: 84;
--cover-phone-text-y-tall: 84;
--cover-phone-arrow: 86;
--cover-phone-arrow-tall: 124;
--cover-interval: 8000ms;
--dur-cover-word: 550ms;
--cover-word-step: 70ms;
--cover-dots-h: 13px;
--cover-cta-halo: 0 1px 6px 6px var(--color-paper);
--cover-drift-art: 0.8;
--cover-drift-copy: -0.5;
--cover-drift-logo: -0.5;
}
:root[data-phone] {
--cover-drift-art: 3;
--cover-drift-copy: -1.2;
--cover-drift-logo: -1.2;
}
:root {
--l-container-pad: var(--space-6);
--l-container-narrow: 560px;
--l-gap-section: 233;
--l-gap-section-grow: 1.667;
--l-gap-block: 74.5;
--l-gap-block-grow: 1.6;
--l-gap-note: 66;
--l-gap-note-grow: 1.667;
--l-gap-section-min: calc(var(--l-gap-section) / (1 + (var(--l-gap-section-grow) - 1) * 0.5676));
--l-gap-section-max: calc(var(--l-gap-section-min) * var(--l-gap-section-grow));
--l-gap-block-min: calc(var(--l-gap-block) / (1 + (var(--l-gap-block-grow) - 1) * 0.5676));
--l-gap-block-max: calc(var(--l-gap-block-min) * var(--l-gap-block-grow));
--l-gap-note-min: calc(var(--l-gap-note) / (1 + (var(--l-gap-note-grow) - 1) * 0.5676));
--l-gap-note-max: calc(var(--l-gap-note-min) * var(--l-gap-note-grow));
--l-gap-cols: var(--space-10);
--l-gap-stack: var(--space-3);
--l-gap-caption: var(--space-3);
--l-page-pb: var(--space-10);
--l-arrow-h: var(--space-3);
--l-hover-dim: 0.6;
--l-head-gap: var(--space-4);
--l-head-arrow-min: var(--space-20);
--l-head-arrow-gap: var(--space-4);
--em-lead-min: 13;
--em-lead-interests: 25.8;
--em-lead-cases: 17;
--em-lead-how: 24;
--em-lead-bots: 14.2;
--em-col-min: 10;
--em-card-min: 20;
--em-stats-caption: 18;
--em-legend: 44;
--em-faq-answer: 52;
--l-faq-plus: var(--space-4);
--l-faq-gap: var(--space-4);
--l-faq-row: var(--space-6);
--l-qr-w: 50%;
--l-qr-max: 624px;
--l-icon-social: var(--space-10);
--l-spot-w: 132%;
--l-spot-h: calc(var(--space-20) * 3);
--l-spot-drop: calc(var(--space-15) * -1);
--l-spot-dx: 0px;
--spot-landing-depth: var(--spot-site-rest-depth);
--spot-landing-square: var(--spot-site-rest-square);
--spot-landing-soft: var(--spot-site-rest-soft);
--spot-landing-bowl: var(--spot-site-rest-bowl);
--spot-landing-lightAngle: var(--spot-site-rest-lightAngle);
--spot-landing-lightHeight: var(--spot-site-rest-lightHeight);
--spot-landing-shadow: var(--spot-site-rest-shadow);
--spot-landing-highlight: var(--spot-site-rest-highlight);
--spot-landing-capWhite: var(--spot-site-rest-capWhite);
--spot-landing-capBlur: var(--spot-site-rest-capBlur);
--spot-landing-capWidth: var(--spot-site-rest-capWidth);
--spot-landing-capHeight: var(--spot-site-rest-capHeight);
--spot-landing-capX: var(--spot-site-rest-capX);
--spot-landing-capY: var(--spot-site-rest-capY);
--spot-landing-capSquare: var(--spot-site-rest-capSquare);
--spot-landing-rough: var(--spot-site-rest-rough);
--spot-landing-roughScale: var(--spot-site-rest-roughScale);
--em-legal: 42;
--l-phone-h2: 0.168;
--l-phone-lead: 0.062;
--l-phone-num: 0.38;
--l-phone-unit: 0.088;
--l-phone-page-top: 8;
--l-phone-gap-section: 169;
--l-phone-gap-block: 56;
--l-phone-gap-cards: 56;
--l-phone-shot-gap: 16;
--l-phone-col-shift: 8;
--l-phone-page-pb: 170;
--l-card-shot: 0.83;
--cover-aspect: 0.625;
--l-page-top: 20;
--l-pair-w: 66;
--l-unit-drop: 3px;
--l-unit-gap: 5px;
--l-unit-weight: 0.7;
--l-num-shift: -0.04;
--l-in-delay: 500ms;
--l-in-word: 50ms;
--l-in-lead: 100ms;
--l-in-block: 200ms;
--l-in-note: 500ms;
--l-in-shift: var(--space-20);
--l-heading-scale: 1.7;
--l-heading-blur: 23px;
}
.pp-landing {
--l-cover-h: min(calc(100 * var(--vh)), calc(var(--cover-aspect) * 100 * var(--vw)));
--l-container-full: max(
calc((100 - 2 * var(--cover-logo-x)) * var(--vw)),
min(calc(100 * var(--vw) - 2 * var(--l-container-pad)), var(--l-container-narrow))
);
--l-container: var(--l-container-full);
--l-gap-section: clamp(calc(var(--l-gap-section-min) * 1px), calc(var(--l-gap-section-min) * 1px + (var(--l-gap-section-max) - var(--l-gap-section-min)) * var(--fluid-step)), calc(var(--l-gap-section-max) * 1px));
--l-gap-block: clamp(calc(var(--l-gap-block-min) * 1px), calc(var(--l-gap-block-min) * 1px + (var(--l-gap-block-max) - var(--l-gap-block-min)) * var(--fluid-step)), calc(var(--l-gap-block-max) * 1px));
--l-gap-note: clamp(calc(var(--l-gap-note-min) * 1px), calc(var(--l-gap-note-min) * 1px + (var(--l-gap-note-max) - var(--l-gap-note-min)) * var(--fluid-step)), calc(var(--l-gap-note-max) * 1px));
}
:root[data-phone] .pp-landing {
--l-cover-h: calc(100 * var(--vh));
--l-container: calc(100 * var(--vw) - 2 * var(--phone-col-x));
--vw: calc(min(100vw, var(--l-phone-max-w)) / 100 / var(--page-zoom, 1));
}
:root {
--spot-btn-dx: 0px;
--spot-btn-dy: 3px;
--spot-btn-top: 26px;
--spot-btn-right: var(--space-6);
--spot-btn-bottom: 22px;
--spot-btn-left: var(--space-6);
--spot-btn-depth: 0.4;
--spot-btn-hover-depth: -0.4;
--spot-btn-bowl: 0.7;
--spot-btn-shadow: 0.16;
--spot-btn-highlight: 0.7;
--nav-pad-h: 109px;
--nav-pad-v: 25px;
--nav-pad-light: var(--switch-spot-light);
--nav-pad-light-core: var(--switch-spot-light-core);
--nav-pad-light-y: var(--switch-spot-light-y);
--nav-pad-light-blur: var(--switch-spot-light-blur);
--nav-pad-shadow: 0.62;
--nav-pad-shadow-y: var(--switch-spot-shadow-y);
--nav-pad-shadow-size: var(--switch-spot-shadow-size);
--nav-pad-shadow-blur: var(--switch-spot-shadow-blur);
--nav-pad-shadow-color: rgb(0 0 0 / var(--nav-pad-shadow));
--nav-pad-light-color: rgb(255 255 255 / var(--nav-pad-light));
--nav-pad-from: 0.8;
--nav-plate-h: var(--space-8);
--nav-plate-v: var(--space-2);
--nav-plate-blur: 0px;
--nav-glass-blur: 12px;
--nav-glass-edge: 0px;
--nav-glass-fill: 18;
--nav-glass-fill-color: #efefef;
@supports (color: color-mix(in lab, red, red)) {
--nav-glass-fill-color: color-mix(in srgb, var(--color-paper) calc(var(--nav-glass-fill) * 1%), transparent);
}
}
html, body, #root {
height: 100%;
}
body {
margin: 0;
background: var(--color-paper);
color: var(--color-ink);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-variation-settings: "wdth" 80, "wght" 300;
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
}
:focus-visible {
outline: var(--focus-ring-w) solid var(--color-ink);
outline-offset: var(--focus-ring-offset);
border-radius: var(--focus-ring-radius);
}
:is(input:not([type='checkbox'], [type='radio'], [type='range'], [type='button'], [type='submit']), textarea, [contenteditable]:not([contenteditable='false'])):focus-visible {
outline: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
body, .t-hyphens {
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
}
.pp-modules {
--module: calc((100% - var(--int-cols-gap) * 2) / 3);
column-gap: var(--int-cols-gap);
}
.pp-modules[data-modules='2-1'] {
grid-template-columns: calc(var(--module) * 2 + var(--int-cols-gap)) var(--module);
}
.pp-modules[data-modules='1-2'] {
grid-template-columns: var(--module) calc(var(--module) * 2 + var(--int-cols-gap));
}
.t-phrase {
display: inline-block;
}
h1, h2, h3, .t-display, .t-section, .t-section-sm, .t-link, .pp-confirm-title {
hyphens: manual;
}
body {
text-wrap: pretty;
}
h1, h2, h3, .t-display, .t-section, .t-section-sm, .t-link, .pp-confirm-title, .t-script-lead, .t-script-sub, .pp-head-sub, .pp-sub-value, .pp-sub-input {
text-wrap: balance;
}
input, textarea {
hyphens: manual;
}
textarea.pp-edit-para {
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
transition: height var(--dur-block-move) var(--ease-reveal);
}
.t-display, .t-section, .t-section-sm, .t-link, .pp-confirm-title, .pp-title-value, .pp-title-input, .pp-acc-initials {
font-variation-settings: var(--vf-display);
letter-spacing: var(--ls-display-twin);
}
.t-display {
font-family: var(--font-display);
font-size: var(--fs-display);
line-height: var(--lh-display);
color: var(--color-ink);
}
.t-link {
font-family: var(--font-display);
font-size: var(--fs-link);
line-height: var(--lh-link);
letter-spacing: calc(var(--ls-link) + var(--ls-display-twin));
color: var(--color-ink);
}
.pp-link-row .t-link {
text-wrap-mode: nowrap;
}
.pp-link-row--hang {
position: relative;
}
.pp-link-row--hang > span:first-child {
position: absolute;
right: calc(100% + var(--gap-link-icon));
}
.t-section {
font-family: var(--font-display);
font-size: var(--fs-section);
line-height: var(--lh-section);
color: var(--color-ink);
text-wrap: balance;
}
.t-section-sm {
font-family: var(--font-display);
font-size: var(--fs-section-sm);
line-height: var(--lh-section-sm);
color: var(--color-ink);
text-wrap: balance;
}
.t-script-lead {
font-family: var(--font-script);
font-size: var(--fs-script-lead);
line-height: var(--lh-script-lead);
color: var(--color-ink);
}
.t-text-lg, .t-text-md, .t-text, .t-text-sm {
font-family: var(--font-sans);
font-variation-settings: var(--vf-meta);
color: var(--color-ink);
}
.t-text-lg {
font-size: var(--fs-text-lg);
line-height: var(--lh-text-lg);
}
.t-text-md {
font-size: var(--fs-text-md);
line-height: var(--lh-text-md);
}
.t-text {
font-size: var(--fs-text);
line-height: var(--lh-text);
}
.t-text-sm {
font-size: var(--fs-text-sm);
line-height: var(--lh-text-sm);
}
.pp-icon {
stroke-width: var(--icon-line);
transition: stroke-width var(--dur-icon-hover) var(--ease-icon-hover), scale var(--dur-icon-hover) var(--ease-icon-hover);
}
.pp-icon * {
vector-effect: non-scaling-stroke;
}
:is(.composer-plate .pp-icon, .pp-icon:has([data-pose]), .pp-tg .pp-icon) {
stroke-width: calc(var(--icon-sw, var(--icon-stroke)) * var(--icon-box, 1));
}
:is(.composer-plate .pp-icon, .pp-icon:has([data-pose]), .pp-tg .pp-icon) * {
vector-effect: none;
}
:is(.pp-card-icon, .pp-campaign-sign, .pp-step-icon, .pp-entry-icon:not(.pp-entry-icon--pose)) {
stroke-width: calc(var(--icon-line-head) * var(--icon-box, 1));
}
:is(.pp-card-icon, .pp-campaign-sign, .pp-step-icon, .pp-entry-icon:not(.pp-entry-icon--pose)) * {
vector-effect: none;
}
a:hover :is(.pp-card-icon, .pp-campaign-sign, .pp-step-icon, .pp-entry-icon:not(.pp-entry-icon--pose)), button:not([aria-disabled='true']):hover :is(.pp-card-icon, .pp-campaign-sign, .pp-step-icon, .pp-entry-icon:not(.pp-entry-icon--pose)) {
stroke-width: calc(var(--icon-line-head) * var(--icon-box, 1) * var(--icon-line-grow));
}
@supports (color: rgb(from currentColor r g b)) {
:is(.pp-icon, .pp-kebab) {
-webkit-mask-image: linear-gradient(currentColor, currentColor);
mask-image: linear-gradient(currentColor, currentColor);
}
:is(.pp-icon, .pp-kebab) * {
color: rgb(from currentColor r g b / 1);
}
}
a:hover .pp-icon, button:not([aria-disabled='true']):hover .pp-icon {
stroke-width: var(--icon-line-hover);
}
a:hover :is(.composer-plate .pp-icon, .pp-icon:has([data-pose]), .pp-tg .pp-icon), button:not([aria-disabled='true']):hover :is(.composer-plate .pp-icon, .pp-icon:has([data-pose]), .pp-tg .pp-icon) {
stroke-width: calc(var(--icon-sw, var(--icon-stroke)) * var(--icon-box, 1) * var(--icon-line-grow));
}
a:hover .pp-icon:not(.pp-rail-kebab-icon), button:not(.pp-menu-item, .pp-talk-orb, [aria-disabled='true']):hover .pp-icon:not(.pp-rail-kebab-icon), a:focus-visible .pp-icon:not(.pp-rail-kebab-icon), button:not(.pp-menu-item, .pp-talk-orb, [aria-disabled='true']):focus-visible .pp-icon:not(.pp-rail-kebab-icon) {
scale: var(--scale-icon-hover);
}
.pp-head-top, .pp-link-row {
transition: scale var(--dur-block-hover) var(--ease-block-hover);
}
.pp-head-live, .pp-link-row {
will-change: scale;
}
.pp-head-live:hover {
scale: var(--scale-block-hover);
}
.pp-link-row:hover {
scale: var(--scale-link-hover);
}
.pp-link-eyes {
flex: none;
width: var(--icon-link-eyes);
height: var(--icon-link-eyes);
}
.pp-head-live .pp-head-sub {
transition: translate var(--dur-icon-hover) var(--ease-icon-hover);
will-change: translate;
}
.pp-head-live:hover .pp-head-sub {
translate: 0 var(--head-sub-draw);
}
.pp-head-logo {
position: relative;
width: var(--head-logo-w);
margin: 0 auto;
color: var(--color-ink);
}
.pp-hand-arrow {
display: block;
width: 100%;
height: auto;
overflow: visible;
transform-origin: 0 50%;
}
.pp-hand-arrow path {
fill: none;
stroke: currentColor;
stroke-width: var(--hand-arrow-sw);
stroke-linecap: round;
stroke-linejoin: round;
}
.pp-hand-arrow-shaft, .pp-hand-arrow-head {
stroke-dasharray: 1;
animation: pp-hand-arrow-draw var(--dur-hand-arrow-draw) var(--ease-settle) var(--hand-arrow-draw-delay) both;
}
.pp-hand-arrow-head {
animation-duration: calc(var(--dur-hand-arrow-draw) * 0.4);
animation-delay: calc(var(--hand-arrow-draw-delay) + var(--dur-hand-arrow-draw) * 0.8);
}
@keyframes pp-hand-arrow-draw {
from {
stroke-dashoffset: 1;
}
to {
stroke-dashoffset: 0;
}
}
.pp-optical {
display: flex;
flex-direction: column;
align-items: center;
}
.pp-optical::before, .pp-optical::after {
content: "";
flex: var(--optical-top) 1 0;
}
.pp-optical::after {
flex-grow: calc(100 - var(--optical-top));
}
.pp-entry-arrow {
position: absolute;
right: calc(100% + var(--entry-arrow-gap));
top: 50%;
width: var(--entry-arrow-w);
translate: 0 -50%;
pointer-events: none;
}
.pp-head-logo > svg {
display: block;
width: 100%;
height: auto;
}
.pp-wordmark {
overflow: visible;
}
.pp-wordmark :is(.pp-wm-pin, .pp-wm-point, .pp-wm-dot) {
transform-box: fill-box;
transform-origin: 50% 100%;
}
.pp-head-sub--logo {
font-size: var(--fs-logo-sub);
line-height: var(--lh-logo-sub);
white-space: pre-line;
}
.pp-entry-doors {
gap: var(--goto-gap);
}
@media (max-width: 620px) {
.pp-entry-page {
--col: calc(100 * var(--vw) - var(--entry-doors-x) * 2);
--col-lead: 100%;
}
.pp-entry-doors, .pp-entry-doors-list {
flex-direction: column;
justify-content: center;
}
.pp-entry-doors {
gap: var(--entry-doors-stack-gap);
}
}
.pp-entry-icon {
position: absolute;
left: 50%;
top: calc(var(--icon-entry) * -1);
width: var(--icon-entry);
height: var(--icon-entry);
margin-left: calc(var(--icon-entry) / -2);
transition: scale var(--dur-icon-hover) var(--ease-icon-hover), rotate var(--dur-icon-hover) var(--ease-icon-hover), stroke-width var(--dur-icon-hover) var(--ease-icon-hover);
will-change: scale, rotate;
}
.pp-entry-icon--spiral {
--icon-entry: var(--icon-entry-spiral);
}
.pp-head-live:hover .pp-entry-icon {
scale: var(--scale-entry-icon-hover);
rotate: var(--icon-entry-rotate);
}
.pp-entry-icon--pose {
--icon-sw: var(--icon-entry-sw);
}
.pp-head-live:hover .pp-entry-icon--pose {
rotate: none;
}
.pp-step-icon {
position: absolute;
left: 50%;
top: var(--icon-step-top);
width: var(--icon-step);
height: var(--icon-step);
margin-left: calc(var(--icon-step) / -2);
transform: var(--icon-step-tilt);
}
.pp-step-icon--straight {
transform: none;
}
.pp-rule {
position: relative;
width: max(var(--rule-min-w), var(--col-rule));
height: var(--rule-h);
flex-shrink: 0;
max-width: none;
}
.pp-rule > svg {
position: absolute;
left: 0;
top: 50%;
translate: 0 -50%;
color: var(--color-ink);
}
.pp-stage {
transition: margin-left var(--dur-fold) var(--ease-reveal), width var(--dur-fold) var(--ease-reveal);
}
:root[data-resizing] *:not(.pp-spot), :root[data-resizing] *::before, :root[data-resizing] *::after {
transition: none !important;
}
.pp-rail-label, .pp-rail-input {
font-family: var(--font-sans);
font-size: var(--fs-nav);
line-height: var(--lh-nav);
font-variation-settings: var(--vf-nav);
color: var(--color-ink);
white-space: nowrap;
}
.pp-rail-label {
display: block;
min-width: var(--rail-label-min);
max-width: var(--rail-label-w);
overflow: hidden;
text-overflow: ellipsis;
}
.pp-rail-input {
max-width: var(--rail-label-w);
}
.pp-kebab-slot {
pointer-events: auto;
transition: translate var(--dur-affordance) var(--ease-reveal), left var(--dur-fold) var(--ease-reveal);
}
.pp-kebab {
transition: scale var(--dur-icon-hover) var(--ease-icon-hover);
}
button:hover > .pp-kebab {
scale: var(--icon-kebab-scale-hover);
}
:is(a, button):not([aria-disabled='true']):is(:hover, :focus-visible) .pp-icon.pp-icon-plus:not(.pp-x) {
scale: var(--icon-plus-scale-hover);
}
.t-script-sub {
font-family: var(--font-script);
font-size: var(--fs-script-sub);
line-height: var(--lh-script-sub);
letter-spacing: var(--ls-script-sub);
color: var(--color-ink);
}
.t-caption {
font-family: var(--font-script);
font-size: var(--fs-caption);
line-height: var(--lh-caption);
color: var(--color-grey-note);
}
@keyframes pp-pop {
from {
opacity: 0;
transform: scale(var(--pop-scale)) translateY(var(--reveal-y));
}
to {
opacity: 1;
transform: none;
}
}
.pp-pop {
animation: pp-pop var(--dur-pop) var(--ease-pop) backwards;
}
input::selection, textarea::selection {
background: var(--color-select);
color: var(--color-select-ink);
}
.pp-dent {
position: relative;
}
.pp-dent > svg {
position: relative;
z-index: 1;
}
.pp-dent::before {
content: "";
position: absolute;
inset: var(--dent-inset);
border-radius: var(--dent-radius);
background: var(--dent-image) center / cover no-repeat;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-icon-hover) var(--ease-icon-hover);
}
.pp-dent:hover::before {
opacity: 1;
}
.pp-word {
display: inline-block;
white-space: nowrap;
}
.pp-word--long {
white-space: normal;
}
.pp-glyph {
display: inline-block;
}
@keyframes pp-mark-out {
from {
background-color: var(--color-mark);
}
to {
background-color: transparent;
}
}
.pp-mark-out .pp-word {
padding-inline: var(--mark-pad);
margin-inline: calc(var(--mark-pad) * -1);
animation: pp-mark-out var(--dur-mark-out) var(--ease-mark-out) both;
}
.pp-ghosts {
position: fixed;
pointer-events: none;
z-index: var(--z-composer);
filter: url(#pp-sink-grain);
}
.pp-ghosts-anchor {
position: absolute;
left: 0;
top: 0;
}
.pp-ghosts .pp-glyph {
position: absolute;
left: 0;
top: 0;
white-space: pre;
}
@keyframes pp-blur-out {
from {
opacity: 1;
filter: blur(0);
transform: translateY(var(--head-shift-delta, 0px));
}
to {
opacity: 0;
filter: blur(var(--reveal-blur));
transform: translateY(var(--head-shift-delta, 0px));
}
}
@keyframes pp-blur-in {
from {
opacity: 0;
filter: blur(var(--reveal-blur));
}
to {
opacity: 1;
filter: blur(0);
}
}
.pp-blur-out {
animation: pp-blur-out var(--dur-blur-swap) var(--ease-reveal) both;
}
.pp-blur-in {
animation: pp-blur-in var(--dur-blur-swap) var(--ease-reveal) both;
animation-delay: calc(var(--dur-blur-swap) / 2);
}
.pp-account-link {
transition: opacity var(--dur-blur-swap) var(--ease-reveal), filter var(--dur-blur-swap) var(--ease-reveal), visibility 0s linear 0s;
}
.pp-account-link--here {
opacity: 0;
filter: blur(var(--reveal-blur));
visibility: hidden;
pointer-events: none;
transition: opacity var(--dur-blur-swap) var(--ease-reveal), filter var(--dur-blur-swap) var(--ease-reveal), visibility 0s linear var(--dur-blur-swap);
}
.pp-account-photo {
display: block;
border-radius: 50%;
object-fit: cover;
transition: scale var(--dur-icon-hover) var(--ease-icon-hover);
}
.pp-rail-row:hover .pp-rail-sign, .pp-account-link:hover .pp-account-photo, .pp-account-link:hover .pp-icon {
scale: var(--scale-icon-hover);
}
:root[data-photo-flying] .pp-acc-avatar, :root[data-photo-flying] .pp-account-link {
opacity: 0 !important;
filter: none !important;
transition: none !important;
}
.pp-photo-flight {
position: fixed;
z-index: var(--z-topbar);
border-radius: 50%;
object-fit: cover;
pointer-events: none;
transform-origin: 50% 50%;
will-change: transform;
}
.pp-logout {
right: calc(var(--acc-exit-right) - var(--acc-exit-px));
top: var(--acc-exit-top);
translate: 0 -50%;
isolation: isolate;
padding: var(--acc-exit-py) var(--acc-exit-px) calc(var(--acc-exit-py) + 3px);
border: 0;
background: none;
color: var(--color-ink);
font-family: var(--font-text-btn);
font-size: var(--fs-text-btn);
line-height: var(--lh-text-btn);
font-variation-settings: var(--vf-text-btn);
white-space: nowrap;
cursor: pointer;
transform-origin: 100% 50%;
transition: color var(--dur-hover) var(--ease-fade), scale var(--dur-grow) var(--ease-grow), opacity var(--dur-blur-swap) var(--ease-reveal), filter var(--dur-blur-swap) var(--ease-reveal), visibility 0s linear 0s;
}
.pp-logout-pad {
position: absolute;
inset: calc(var(--acc-exit-py) - var(--pad-group-v)) calc(var(--acc-exit-px) - var(--pad-group-h)) calc(var(--acc-exit-py) + 3px - var(--pad-group-v));
z-index: -1;
pointer-events: none;
}
.pp-logout:hover, .pp-logout:focus-visible {
scale: var(--scale-hint-hover);
}
.pp-logout--away {
opacity: 0;
filter: blur(var(--reveal-blur));
visibility: hidden;
pointer-events: none;
transition: opacity var(--dur-blur-swap) var(--ease-reveal), filter var(--dur-blur-swap) var(--ease-reveal), visibility 0s linear var(--dur-blur-swap);
}
.pp-menu {
display: flex;
flex-direction: column;
gap: var(--menu-row-gap);
padding: var(--menu-pt) var(--menu-pr) var(--menu-pb) var(--menu-pl);
border-radius: var(--menu-radius);
background: var(--menu-bg);
box-shadow: var(--shadow-above);
white-space: nowrap;
z-index: var(--z-popover);
transform-origin: 0 0;
animation: pp-menu-in var(--dur-pop) var(--ease-pop) both;
}
@keyframes pp-menu-in {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: none;
}
}
.pp-menu-item {
display: flex;
align-items: center;
gap: var(--menu-icon-gap);
height: max(var(--menu-item-h), var(--menu-icon));
color: var(--color-ink);
}
.pp-menu-icon {
flex: none;
width: var(--menu-icon);
height: var(--menu-icon);
}
.pp-menu-label {
font-family: var(--font-script);
font-size: var(--fs-menu);
line-height: var(--lh-menu);
letter-spacing: var(--ls-menu);
font-weight: 300;
}
.pp-menu-item {
transform-origin: left center;
transition: scale var(--dur-grow) var(--ease-grow);
}
.pp-menu-item:hover {
scale: var(--scale-menu-hover);
}
.pp-menu-item:hover .pp-icon {
stroke-width: var(--icon-line);
}
.pp-tip {
position: fixed;
z-index: var(--z-tip);
display: flex;
align-items: center;
gap: var(--tip-icon-gap);
translate: 0 var(--tip-gap);
padding: var(--tip-pt) var(--tip-ph) var(--tip-pb);
border-radius: var(--tip-radius);
background: var(--menu-bg);
box-shadow: var(--shadow-above);
color: var(--color-ink);
font-family: var(--font-script);
font-size: var(--fs-tip);
line-height: var(--lh-tip);
letter-spacing: var(--ls-menu);
font-weight: 300;
white-space: nowrap;
pointer-events: none;
animation: pp-tip-in var(--dur-tip) var(--ease-tip) both;
}
.pp-tip--right {
translate: var(--tip-side-gap) -50%;
}
.pp-tip--right.pp-tip--text {
translate: var(--tip-text-gap) -50%;
}
.pp-tip--left {
translate: calc(-100% - var(--tip-side-gap)) -50%;
}
.pp-tip--cursor {
translate: var(--tip-cursor-dx) var(--tip-cursor-dy);
}
.pp-tip-icon {
display: flex;
flex: none;
}
.pp-menu--morph {
animation: pp-menu-morph var(--dur-pop) var(--ease-pop) both;
}
.pp-menu--morph > * {
animation: pp-tip-in var(--dur-tip) var(--ease-tip) both;
animation-delay: var(--dur-morph-content);
}
@keyframes pp-menu-morph {
from {
transform: scale(var(--morph-sx, 0.6), var(--morph-sy, 0.3));
}
to {
transform: none;
}
}
@keyframes pp-tip-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.pp-confirm-veil {
position: fixed;
inset: 0;
z-index: var(--z-modal);
background: var(--color-confirm-veil);
backdrop-filter: blur(var(--confirm-blur));
animation: pp-confirm-veil-in var(--dur-hover) var(--ease-veil-in) both;
}
@keyframes pp-confirm-veil-in {
from {
opacity: 0;
backdrop-filter: blur(0);
}
}
.pp-confirm-veil--out {
pointer-events: none;
animation: pp-confirm-veil-out var(--dur-delete) var(--ease-fade) both;
}
@keyframes pp-confirm-veil-out {
to {
opacity: 0;
backdrop-filter: blur(0);
}
}
.pp-confirm-veil--out .pp-confirm {
animation: pp-confirm-out var(--dur-delete) var(--ease-sink) both;
}
.pp-confirm.pp-confirm--brief {
width: auto;
padding-bottom: var(--confirm-brief-pb);
text-align: center;
cursor: default;
}
@keyframes pp-confirm-out {
from {
scale: 1;
opacity: 1;
}
to {
scale: var(--note-open-from);
opacity: 0;
}
}
.pp-confirm {
position: absolute;
left: 50%;
top: var(--confirm-y);
translate: -50% -50%;
width: min(var(--confirm-w), calc(100 * var(--vw) - 32px));
padding: var(--confirm-pt) var(--confirm-pr) var(--confirm-pb) var(--confirm-pl);
border-radius: var(--confirm-radius);
background: var(--menu-bg);
box-shadow: var(--shadow-above);
animation: pp-confirm-in var(--dur-note-grow) var(--ease-note-grow) both;
}
@keyframes pp-confirm-in {
from {
scale: var(--note-open-from);
opacity: 0;
}
to {
scale: 1;
opacity: 1;
}
}
.pp-confirm-title {
font-family: var(--font-display);
font-size: var(--fs-confirm-title);
line-height: var(--lh-confirm-title);
color: var(--color-ink);
}
.pp-confirm-text {
margin: var(--confirm-text-gap) 0 0;
font-size: var(--fs-confirm-text);
line-height: var(--lh-confirm-text);
color: var(--color-ink);
}
.pp-confirm-actions {
display: flex;
justify-content: flex-end;
gap: var(--confirm-btn-gap);
margin-top: var(--confirm-actions-gap);
--pad-group-h: var(--confirm-pad-h);
--pad-group-keep: var(--confirm-pad-keep);
margin-right: calc(var(--confirm-pad-h) - var(--confirm-pr));
}
.pp-confirm-actions--quiet {
justify-content: center;
}
.pp-confirm-body {
display: flex;
justify-content: center;
margin-top: var(--confirm-body-gap);
}
.pp-ord-pay {
display: grid;
justify-items: center;
gap: var(--confirm-body-gap);
}
.pp-ord-qr {
width: var(--pay-qr-size);
height: var(--pay-qr-size);
color: var(--color-ink);
}
.pp-confirm-btn {
position: relative;
padding: 0;
color: var(--color-ink);
font-family: var(--font-text-btn);
font-variation-settings: var(--vf-text-btn);
font-size: var(--fs-confirm-btn);
line-height: var(--lh-confirm-btn);
outline: none;
transition: scale var(--dur-grow) var(--ease-grow), color var(--dur-hover) var(--ease-fade);
}
.pp-confirm-btn::before {
content: '';
position: absolute;
inset: calc(var(--confirm-btn-pv) * -1) calc(var(--confirm-btn-ph) * -1);
}
.pp-confirm-btn:hover, .pp-confirm-btn:focus-visible {
scale: var(--scale-text-hover);
}
.pp-confirm-btn--danger {
color: var(--color-danger);
}
.pp-confirm-btn--quiet {
color: var(--color-grey-note);
}
.pp-confirm-btn--quiet:hover, .pp-confirm-btn--quiet:focus-visible {
color: var(--color-ink);
}
.pp-goto {
padding: var(--goto-pv) var(--goto-ph);
border-radius: var(--radius-pill);
background: var(--color-goto);
color: var(--color-ink);
text-decoration: none;
white-space: nowrap;
font-family: var(--font-sans);
font-size: var(--fs-goto);
line-height: var(--lh-goto);
font-weight: 300;
font-variation-settings: var(--vf-light);
transition: background-color var(--dur-hover) var(--ease-fade);
}
.pp-goto:hover, .pp-goto:focus-visible {
background: var(--color-goto-hover);
outline: none;
}
.pp-goto--script {
font-family: var(--font-script);
font-size: var(--fs-menu);
letter-spacing: var(--ls-menu);
font-variation-settings: normal;
}
.pp-sand-hide {
visibility: hidden;
}
.pp-sand-hide h1 {
visibility: visible;
}
.pp-sand-hide-all {
visibility: hidden;
}
[data-born].pp-pop, [data-born].pp-int--in, [data-born] > *, [data-born] .pp-int--in, [data-born] .pp-audience-cell, .pp-audience--in[data-born] > *, .pp-audience--in[data-born] .pp-audience-cell {
animation: none;
}
:root[data-touch] :is(.pp-doc-button, .pp-ad-post-ai) {
position: relative;
}
:root[data-touch] :is(.pp-chan-eye, .pp-dent, .pp-switch-opt, .pp-talk-orb, .pp-account-link, .pp-doc-button, .pp-ad-post-ai)::after {
content: '';
position: absolute;
inset: min(0px, calc((100% - var(--touch-min)) / 2));
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
}
@property --tw-rotate-y {
syntax: "*";
inherits: false;
}
@property --tw-rotate-z {
syntax: "*";
inherits: false;
}
@property --tw-skew-x {
syntax: "*";
inherits: false;
}
@property --tw-skew-y {
syntax: "*";
inherits: false;
}
@property --tw-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-shadow-alpha {
syntax: "<percentage>";
inherits: false;
initial-value: 100%;
}
@property --tw-inset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-inset-shadow-alpha {
syntax: "<percentage>";
inherits: false;
initial-value: 100%;
}
@property --tw-ring-color {
syntax: "*";
inherits: false;
}
@property --tw-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
syntax: "*";
inherits: false;
}
@property --tw-inset-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
syntax: "*";
inherits: false;
}
@property --tw-ring-offset-width {
syntax: "<length>";
inherits: false;
initial-value: 0px;
}
@property --tw-ring-offset-color {
syntax: "*";
inherits: false;
initial-value: #fff;
}
@property --tw-ring-offset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-blur {
syntax: "*";
inherits: false;
}
@property --tw-brightness {
syntax: "*";
inherits: false;
}
@property --tw-contrast {
syntax: "*";
inherits: false;
}
@property --tw-grayscale {
syntax: "*";
inherits: false;
}
@property --tw-hue-rotate {
syntax: "*";
inherits: false;
}
@property --tw-invert {
syntax: "*";
inherits: false;
}
@property --tw-opacity {
syntax: "*";
inherits: false;
}
@property --tw-saturate {
syntax: "*";
inherits: false;
}
@property --tw-sepia {
syntax: "*";
inherits: false;
}
@property --tw-drop-shadow {
syntax: "*";
inherits: false;
}
@property --tw-drop-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-drop-shadow-alpha {
syntax: "<percentage>";
inherits: false;
initial-value: 100%;
}
@property --tw-drop-shadow-size {
syntax: "*";
inherits: false;
}
@property --tw-ease {
syntax: "*";
inherits: false;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
:root, :host {
--talk-line-raw: 0px;
}
*, ::before, ::after, ::backdrop {
--tw-rotate-x: initial;
--tw-rotate-y: initial;
--tw-rotate-z: initial;
--tw-skew-x: initial;
--tw-skew-y: initial;
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-shadow-alpha: 100%;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-inset-shadow-alpha: 100%;
--tw-ring-color: initial;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset: initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-blur: initial;
--tw-brightness: initial;
--tw-contrast: initial;
--tw-grayscale: initial;
--tw-hue-rotate: initial;
--tw-invert: initial;
--tw-opacity: initial;
--tw-saturate: initial;
--tw-sepia: initial;
--tw-drop-shadow: initial;
--tw-drop-shadow-color: initial;
--tw-drop-shadow-alpha: 100%;
--tw-drop-shadow-size: initial;
--tw-ease: initial;
}
}
}