.hp-site { --k-u: 1px; }
.kp { --k-u: calc(var(--kp-w, var(--phone-w)) / 374);
position: relative; flex: none; box-sizing: border-box;
width: var(--kp-w, var(--phone-w));
padding: calc(11 * var(--k-u)); border-radius: calc(56 * var(--k-u)); background: var(--c-ink); rotate: -2deg;
box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--c-deep-line), inset 0 0 0 calc(3 * var(--k-u)) var(--c-ink),
0 calc(60 * var(--k-u)) calc(80 * var(--k-u)) calc(-48 * var(--k-u)) rgba(28, 27, 13, .55), 0 calc(22 * var(--k-u)) calc(34 * var(--k-u)) calc(-22 * var(--k-u)) rgba(28, 27, 13, .4); }
.kp::before { content: ""; position: absolute; left: calc(-3 * var(--k-u)); top: calc(150 * var(--k-u)); width: calc(3 * var(--k-u)); height: calc(50 * var(--k-u)); border-radius: calc(2 * var(--k-u)) 0 0 calc(2 * var(--k-u)); background: var(--c-deep-line); box-shadow: 0 calc(64 * var(--k-u)) 0 var(--c-deep-line); }
.kp::after { content: ""; position: absolute; right: calc(-3 * var(--k-u)); top: calc(190 * var(--k-u)); width: calc(3 * var(--k-u)); height: calc(80 * var(--k-u)); border-radius: 0 calc(2 * var(--k-u)) calc(2 * var(--k-u)) 0; background: var(--c-deep-line); }
[data-ground="deep"] .kp { box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--c-deep-line), inset 0 0 0 calc(3 * var(--k-u)) var(--c-ink), 0 0 0 1px var(--c-deep-line), 0 calc(60 * var(--k-u)) calc(80 * var(--k-u)) calc(-48 * var(--k-u)) rgba(0, 0, 0, .6); }
[data-ground="deep"] .kp::before { background: var(--c-deep-ink-2); box-shadow: 0 calc(64 * var(--k-u)) 0 var(--c-deep-ink-2); }
[data-ground="deep"] .kp::after { background: var(--c-deep-ink-2); }
.kp-isl { position: absolute; z-index: 3; top: calc(21 * var(--k-u)); left: 50%; width: calc(110 * var(--k-u)); height: calc(32 * var(--k-u)); margin-left: calc(-55 * var(--k-u)); border-radius: calc(20 * var(--k-u)); background: var(--c-ink); }
.kp-scr { position: relative; box-sizing: border-box; width: 100%; aspect-ratio: 402 / 874; overflow: hidden;
border-radius: calc(45 * var(--k-u)); background: var(--c-surface); color: var(--c-ink);
font: 400 calc(14 * var(--k-u))/1.35 var(--font-sans); -webkit-font-smoothing: antialiased;
display: flex; flex-direction: column; gap: calc(10 * var(--k-u)); padding: calc(50 * var(--k-u)) calc(11 * var(--k-u)) calc(11 * var(--k-u)); }
.kp-head { display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--k-u)); height: calc(24 * var(--k-u)); flex: none; font-weight: 600; font-size: calc(15 * var(--k-u)); letter-spacing: -.01em; }
.kp-head .k-dot { width: calc(9 * var(--k-u)); height: calc(9 * var(--k-u)); box-shadow: 0 0 0 calc(1.5 * var(--k-u)) var(--c-ink); }
.kp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(10 * var(--k-u)); }
.kp-foot { margin-top: auto; flex: none; }
.k { --k-bg: var(--c-surface); --k-ink: var(--c-ink); --k-ink-2: var(--c-ink-2); --k-line: var(--c-line); --k-sub: var(--c-muted);
--k-edge: var(--border) solid var(--c-ink); --k-shadow: var(--shadow-hard); --k-r: calc(16 * var(--k-u));
--k-pill: var(--c-ink); --k-pill-ink: var(--c-surface); --k-ok-edge: var(--c-ink);
box-sizing: border-box; width: 100%; max-width: calc(320 * var(--k-u));
background: var(--k-bg); color: var(--k-ink); border: var(--k-edge); border-radius: var(--k-r); box-shadow: var(--k-shadow);
font: 400 calc(14 * var(--k-u))/1.35 var(--font-sans); text-align: left; -webkit-font-smoothing: antialiased; }
.k b { font-weight: 600; }
.k svg { display: block; flex: none; }
[data-ground="deep"] .k { --k-shadow: 4px 4px 0 var(--c-accent); }
.kp-scr .k { --k-edge: var(--hairline) solid var(--c-line); --k-shadow: none; --k-r: calc(14 * var(--k-u)); --k-bg: var(--c-surface); --k-ink: var(--c-ink); --k-ink-2: var(--c-ink-2); --k-line: var(--c-line); --k-sub: var(--c-muted); --k-pill: var(--c-ink); --k-pill-ink: var(--c-surface); max-width: none; }
.k-mi { display: block; font: 500 calc(10.5 * var(--k-u))/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--k-ink-2, var(--c-ink-2)); }
.k-sub { font-size: calc(12.5 * var(--k-u)); color: var(--k-ink-2); }
.k-dot { width: calc(11 * var(--k-u)); height: calc(11 * var(--k-u)); border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 calc(1.5 * var(--k-u)) var(--c-ink), 0 0 0 calc(5 * var(--k-u)) rgba(210, 255, 81, .5); flex: none; }
.k-av { width: calc(32 * var(--k-u)); height: calc(32 * var(--k-u)); border-radius: 50%; display: grid; place-items: center; background: var(--c-hero); color: var(--c-ink); font: 700 calc(11 * var(--k-u))/1 var(--font-sans); box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--c-ink); flex: none; }
.k-tag { display: inline-flex; align-items: center; justify-self: start; padding: calc(2 * var(--k-u)) calc(8 * var(--k-u)); border-radius: var(--r-pill); font: 500 calc(10.5 * var(--k-u))/1.35 var(--font-mono); letter-spacing: .03em; white-space: nowrap; color: var(--c-ink); }
.k-ic { width: calc(32 * var(--k-u)); height: calc(32 * var(--k-u)); border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--k-line); flex: none; }
.k-omni { --k-r: var(--r-pill); display: flex; align-items: center; gap: calc(8 * var(--k-u)); padding: calc(5 * var(--k-u)); }
.k-omni .k-ph { flex: 1; color: var(--k-ink-2); }
.kl-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: var(--r-pill); background: var(--g-chip); color: var(--g-chip-ink); font: 500 var(--fs-label)/1 var(--font-mono); }
.kl-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); }
[data-ground="hero"] .kl-eyebrow::before { background: var(--c-hero); }
[data-ground="deep"] .kl-eyebrow::before { background: var(--c-ink); }
.m-mark { text-decoration-line: underline; text-decoration-color: currentColor; text-decoration-thickness: .09em; text-underline-offset: .14em; text-decoration-skip-ink: none; }
.mo-spud { display: inline-flex; flex-direction: column-reverse; align-items: flex-start; gap: 10px; margin: 0; }
.mo-spud img { display: block; width: 104px; height: 104px; }
.mo-spud figcaption { padding: 8px 11px; background: var(--c-surface); color: var(--c-ink); border: var(--border) solid var(--c-ink); border-radius: var(--r-md); font: 600 15px/1.3 var(--font-sans); max-width: 236px; }
.mo-spud--disc { align-items: flex-end; }
.mo-spud--disc .mo-spud__art { width: 128px; height: 128px; border-radius: 50%; background: var(--c-muted); display: grid; place-items: center; }
.mo-spud--disc figcaption { max-width: 134px; }
.phc { position: relative; overflow: hidden; padding-inline: max(var(--gutter-wide), env(safe-area-inset-left, 0px)) max(var(--gutter-wide), env(safe-area-inset-right, 0px)); }
.phc-body { position: relative; max-width: var(--maxw); margin-inline: auto; min-height: 828px; }
.phc-copy { position: relative; z-index: 2; width: 640px; margin: 0 auto; padding-top: 140px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); }
.phc-h1 { margin: 0; font: var(--fw-display) var(--fs-display-1)/var(--lh-display-1) var(--font-sans); letter-spacing: var(--ls-display); text-wrap: balance; max-width: var(--measure-headline); }
.phc-lead { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-lead); color: var(--g-ink-2); max-width: 540px; text-wrap: pretty; }
@media (max-width: 1179px) {
.phc-body { min-height: 0; padding-bottom: 56px; }
.phc-copy { width: auto; padding-top: 48px; }
}
@media (max-width: 699px) {
.phc-copy { padding-top: 28px; gap: 18px; }
}
.psd { padding: 96px max(var(--gutter-wide), env(safe-area-inset-right, 0px)) 104px max(var(--gutter-wide), env(safe-area-inset-left, 0px)); }
@media (max-width: 1179px) {
.psd { padding-block: 72px 80px; }
}
@media (max-width: 699px) {
.psd { padding-block: 64px 72px; }
}
.abx * { box-sizing: border-box; }
.abx p { margin: 0px; }
.abx .ab { position: absolute; left: 0px; top: 0px; width: 600px; height: 600px; overflow: hidden; transform-origin: 0px 0px; transform: scale(var(--s, .6)); color: var(--c-ink); font: 400 16px/1.35 var(--font-sans); -webkit-font-smoothing: antialiased; --k-ok-edge: var(--c-ink); }
.abx .ab:not([data-ground]) { background: rgb(255, 255, 255); }
.abx .ab .abs { position: absolute; margin: 0px; }
.abx .ab p { margin: 0px; }
.abx .ab ul { list-style: none; margin: 0px; padding: 0px; }
.abx .ab .mono { display: block; font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--g-ink-2, var(--c-ink-2)); }
.abx .ab .hand { font: 650 19px/1.2 var(--font-sans); letter-spacing: -0.01em; color: var(--g-ink, var(--c-ink)); }
.abx .ab .sub { font-size: 13.5px; color: var(--c-ink-2); }
.abx .ab .stk { background: var(--c-surface); color: var(--c-ink); border: 2px solid var(--c-ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--c-ink); }
.abx .ab .k { text-align: left; }
.abx .tape { position: absolute; top: -12px; left: 50%; width: 64px; height: 22px; margin-left: -32px; background: var(--c-surface); border: 1.5px solid var(--c-ink); rotate: -4deg; }
.abx .pol { width: 172px; padding: 12px 12px 14px; background: rgb(255, 255, 255); border: 2px solid var(--c-ink); border-radius: 3px; box-shadow: 4px 4px 0 var(--c-ink); display: grid; gap: 9px; }
.abx .pol-img { height: 148px; background: var(--pb); border: 2px solid var(--c-ink); display: grid; place-items: center; }
.abx .ab .pol .hand { font-size: 26px; line-height: 1; text-align: center; }
.abx .pol-chip { justify-self: center; padding: 5px 9px; border-radius: 999px; background: var(--c-ink); color: var(--c-hero); font: 500 10.5px/1.15 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; text-align: center; }
.abx .pol-top { position: absolute; top: -16px; right: -20px; rotate: 10deg; padding: 7px 12px; background: var(--c-pop); border: 2px solid var(--c-ink); box-shadow: 3px 3px 0 var(--c-ink); font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
.abx .vb-m { padding: 0px 0.12em; margin: 0px -0.06em; border-radius: 0.18em; color: var(--c-ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.abx .vb-m--fact { background: var(--c-hero); }
.abx .vb-m--todo { background: var(--c-pop); }
.abx .vb-m--todo2 { background: var(--c-soft); }
.abx .vb-sent { width: 552px; box-sizing: border-box; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); background: var(--c-surface); border: 2px solid var(--c-ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--c-ink); }
.abx .vb-ph { padding: 18px 14px 20px; font-size: 19px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; border-left: 2px dashed var(--c-line-dashed); min-height: 96px; }
.abx .vb-ph:first-child { border-left: 0px; }
.abx .vb-bin { width: 164px; box-sizing: border-box; padding: 40px 12px 14px; display: grid; gap: 4px; text-align: center; justify-items: center; background: var(--bb); border: 2px solid var(--c-ink); border-radius: 10px 10px 26px 26px; box-shadow: 4px 4px 0 var(--c-ink); }
.abx .vb-bin-ic { position: absolute; top: -22px; left: 50%; margin-left: -22px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface); border: 2px solid var(--c-ink); }
.abx .vb-bin b { font-size: 17px; line-height: 1.2; font-weight: 650; }
.abx .vb-bin .mono { color: var(--c-ink); }
.abx .vb-bin .sub { font-size: 13px; }
.abx .ab.r3-auto-sort-c2 .r3as-rec { box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 18px; background: var(--c-ink); color: var(--c-surface); box-shadow: rgba(28, 27, 13, 0.25) 4px 4px 0px; rotate: -1deg; }
.abx .ab.r3-auto-sort-c2 .r3as-rec-h { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 8px; }
.abx .ab.r3-auto-sort-c2 .r3as-rec-h b { font-size: 15px; font-weight: 650; }
.abx .ab.r3-auto-sort-c2 .r3as-rec-t { grid-column: 1 / -1; font: 500 22px/1 var(--font-mono); color: var(--c-hero); }
.abx .ab.r3-auto-sort-c2 .r3as-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; height: 46px; }
.abx .ab.r3-auto-sort-c2 .r3as-bars > span { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.abx .ab.r3-auto-sort-c2 .r3as-bars i { width: 4px; border-radius: 2px; }
.abx .ab.r3-auto-sort-c2 .r3as-bars i.f { background: var(--c-hero); }
.abx .ab.r3-auto-sort-c2 .r3as-bars i.t { background: var(--c-pop); }
.abx .ab.r3-auto-sort-c2 .r3as-bars i.t2 { background: var(--c-soft); }
.abx .ab.r3-profiles-a .r3hero { display: grid; justify-items: center; text-align: center; gap: calc(3*var(--k-u)); padding: calc(12*var(--k-u)) calc(10*var(--k-u)) calc(11*var(--k-u)); }
.abx .ab.r3-profiles-a .r3hero .k-av { width: calc(50*var(--k-u)); height: calc(50*var(--k-u)); font-size: calc(16*var(--k-u)); margin-bottom: calc(3*var(--k-u)); }
.abx .ab.r3-profiles-a .r3hero b { font-size: calc(19*var(--k-u)); letter-spacing: -0.02em; line-height: 1.1; }
.abx .ab.r3-profiles-a .r3hero .k-sub { font-size: calc(11.5*var(--k-u)); color: var(--c-ink-2); }
.abx .ab.r3-profiles-a .r3g { display: flex; gap: calc(4*var(--k-u)); margin-top: calc(4*var(--k-u)); }
.abx .ab.r3-profiles-a .r3t { font: 500 calc(9.5*var(--k-u))/1 var(--font-mono); letter-spacing: 0.03em; padding: calc(3.5*var(--k-u)) calc(7*var(--k-u)); border-radius: 999px; background: var(--c-muted); box-shadow: inset 0 0 0 1px var(--c-ink); }
.abx .ab.r3-profiles-a .r3t--pop { background: var(--c-pop); }
.abx .ab.r3-profiles-a .r3t--soft { background: var(--c-soft); }
.abx .ab.r3-profiles-a .r3tiles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6*var(--k-u)); }
.abx .ab.r3-profiles-a .r3tile { border-radius: calc(12*var(--k-u)); padding: calc(8*var(--k-u)) calc(10*var(--k-u)); display: grid; gap: calc(1*var(--k-u)); box-shadow: inset 0 0 0 calc(1.2*var(--k-u)) var(--c-ink); font-size: calc(11.5*var(--k-u)); line-height: 1.25; }
.abx .ab.r3-profiles-a .r3tile .k-mi { color: inherit; opacity: 0.75; font-size: calc(9.5*var(--k-u)); }
.abx .ab.r3-profiles-a .r3tile b { font-size: calc(14*var(--k-u)); letter-spacing: -0.01em; }
.abx .ab.r3-profiles-a .r3tile--soft { background: var(--c-soft); }
.abx .ab.r3-profiles-a .r3tile--pop { background: var(--c-pop); }
.abx .ab.r3-profiles-a .r3tile--lime { background: var(--c-hero); }
.abx .ab.r3-profiles-a .r3tile--ink { background: var(--c-ink); color: var(--c-surface); }
.abx .ab.r3-profiles-a .r3recent { padding: calc(9*var(--k-u)) calc(11*var(--k-u)); display: grid; gap: calc(6*var(--k-u)); }
.abx .ab.r3-profiles-a .r3row { display: flex; align-items: center; gap: calc(8*var(--k-u)); font-size: calc(12.5*var(--k-u)); font-weight: 600; line-height: 1.2; }
.abx .ab.r3-profiles-a .r3ic { width: calc(22*var(--k-u)); height: calc(22*var(--k-u)); border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; box-shadow: inset 0 0 0 calc(1.2*var(--k-u)) var(--c-ink); }
.abx .ab.r3-profiles-a .r3ic svg { width: calc(12*var(--k-u)); height: calc(12*var(--k-u)); }
.abx .ab.r3-profiles-a .r3ic--soft { background: var(--c-soft); }
.abx .ab.r3-profiles-a .r3ic--lime { background: var(--c-hero); }
.abx .ab.r3-profiles-a .r3likes { display: flex; flex-wrap: wrap; align-items: center; gap: calc(5*var(--k-u)); padding: 0 calc(2*var(--k-u)); }
.abx .ab.r3-profiles-a .r3likes .k-mi { margin-right: calc(2*var(--k-u)); }
.abx .ab.r3-profiles-a .r3chip { font: 600 calc(11.5*var(--k-u))/1 var(--font-sans); padding: calc(6*var(--k-u)) calc(9*var(--k-u)); border-radius: 999px; background: var(--c-muted); box-shadow: inset 0 0 0 1px var(--c-line-dashed); }
.abx .ab.r3-todos-from-capture-b3 .pi-memo { background: rgb(255, 255, 255); border: 2px solid var(--c-ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--c-ink); padding: 14px 16px 16px; font: 16px/1.4 var(--font-sans); color: var(--c-ink); }
.abx .ab.r3-todos-from-capture-b3 .pi-memo header { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.abx .ab.r3-todos-from-capture-b3 .pi-mic { width: 30px; height: 30px; border-radius: 50%; background: var(--c-hero); border: 2px solid var(--c-ink); display: grid; place-items: center; font-size: 15px; }
.abx .ab.r3-todos-from-capture-b3 .pi-mi { font: 500 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-ink-2); }
.abx .ab.r3-todos-from-capture-b3 .pi-wave { margin-left: auto; display: flex; align-items: center; gap: 2px; height: 22px; }
.abx .ab.r3-todos-from-capture-b3 .pi-wave i { width: 3px; border-radius: 2px; background: var(--c-ink); }
.abx .ab.r3-todos-from-capture-b3 .pi-memo p { font-weight: 500; }
.abx .ab.r3-todos-from-capture-b3 .pi-pill { display: flex; align-items: center; gap: 8px; background: var(--c-ink); color: rgb(255, 255, 255); border-radius: 999px; padding: 10px 14px; font: 600 14px/1 var(--font-sans); --k-u: 1px; }
.abx .ab.r3-todos-from-capture-b3 .pi-tape { position: absolute; top: -12px; left: 50%; width: 64px; height: 22px; margin-left: -32px; background: rgba(255, 255, 255, 0.7); border: 1.5px solid rgba(28, 27, 13, 0.5); }
.abx .ab.r3-todos-from-capture-b3 .pi-box { width: 18px; height: 18px; border: 2px solid var(--c-ink); border-radius: 5px; background: rgb(255, 255, 255); flex: 0 0 auto; }
.abx .ab[class*="hpn-"] { cursor: auto; }
.abx .ab[class*="hpn-"] .k-tag { padding: 2px 8px; font-size: 11px; }
.abx .ab.hpn-tools-panel .tp-card { padding: 18px 20px 16px; display: grid; gap: 10px; }
.abx .ab.hpn-tools-panel .tp-h { display: flex; align-items: center; justify-content: space-between; font-size: 22px; letter-spacing: -.02em; }
.abx .ab.hpn-tools-panel .tp-live { background: var(--c-hero); border: 1.5px solid var(--c-ink); }
.abx .ab.hpn-tools-panel ul { margin: 0; padding: 0; list-style: none; display: grid; }
.abx .ab.hpn-tools-panel .tp-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--c-line); }
.abx .ab.hpn-tools-panel .tp-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid var(--c-ink); background: var(--c-muted); }
.abx .ab.hpn-tools-panel .tp-row--web .tp-ic { background: var(--c-soft); }
.abx .ab.hpn-tools-panel .tp-n b { display: block; font-size: 15.5px; line-height: 1.2; }
.abx .ab.hpn-tools-panel .tp-n .sub { font-size: 12.5px; }
.abx .ab.hpn-tools-panel .tp-sw { width: 44px; height: 26px; border-radius: 999px; background: var(--c-ink); position: relative; }
.abx .ab.hpn-tools-panel .tp-sw i { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-hero); }
.abx .ab.hpn-tools-panel .tp-row--off .tp-sw { background: var(--c-line); }
.abx .ab.hpn-tools-panel .tp-row--off .tp-sw i { right: auto; left: 3px; background: var(--c-surface); }
.abx .ab.hpn-tools-panel .tp-f { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--c-line); font: 500 12.5px/1.3 var(--font-sans); color: var(--c-ink-2); }
.abx .ab.hpn-r2, .abx .ab[class*="r2d-"] { cursor: auto; }
.abx .ab .r2-av { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--av, var(--c-hero)); color: var(--c-ink); border: 2px solid var(--c-ink); font: 650 12px/1 var(--font-sans); flex: none; }
.abx .ab.r2d-people-pops .r2p-pop { padding: 14px 16px 16px; display: grid; gap: 10px; z-index: 2; }
.abx .ab.r2d-people-pops .r2p-pop--lime { background: var(--c-hero); }
.abx .ab.r2d-people-pops .r2p-pop--lime .mono { color: var(--c-ink); }
.abx .ab.r2d-people-pops .r2p-ul { display: grid; gap: 9px; }
.abx .ab.r2d-people-pops .r2p-ul li { display: flex; align-items: center; gap: 10px; }
.abx .ab.r2d-people-pops .r2p-ul li > span:last-child { display: grid; gap: 1px; }
.abx .ab.r2d-people-pops .r2p-ul b { font: 650 17px/1.15 var(--font-sans); letter-spacing: -.01em; }
.abx .ab.r2d-people-pops .r2p-ul i { font: 500 12.5px/1.2 var(--font-sans); font-style: normal; color: var(--c-ink-2); }
.abx .ab.r2d-people-pops .r2p-pop--lime .r2p-ul i { color: var(--c-hero-ink-2); }
.abx .ab.r2d-people-pops .r2p-g { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--bg); border: 2px solid var(--c-ink); flex: none; }
.abx .ab.r2d-people-pops .r2p-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-ink); flex: none; }
.abx .ab.r2d-people-pops .r2p-fam { display: flex; align-items: center; gap: 6px; }
.abx .ab.r2d-people-pops .r2p-fam > span:last-child { display: grid; margin-left: 4px; }
.abx .ab.r2d-people-pops .r2p-fam b { font: 650 17px/1.15 var(--font-sans); }
.abx .ab.r2d-people-pops .r2p-fam i { font: 500 12.5px/1.2 var(--font-sans); font-style: normal; color: var(--c-ink-2); }
.abx .ab.r2d-people-pops .r2p-met { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1.5px dashed var(--c-line); font: 600 14px/1.2 var(--font-sans); }
.abx .ab .r2s-note { width: 176px; height: 118px; box-sizing: border-box; padding: 18px 12px 10px; border: 2px solid var(--c-ink); border-radius: 4px 4px 4px 18px; box-shadow: 3px 4px 0 var(--c-ink); background: var(--bg); display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: 8px; color: var(--c-ink); }
.abx .ab .r2s-note .pi-box { width: 16px; height: 16px; margin-top: 1px; }
.abx .ab .r2s-note .pi-tape { width: 54px; height: 18px; margin-left: -27px; top: -10px; }
.abx .ab .r2s-note b { font: 650 15.5px/1.15 var(--font-sans); letter-spacing: -.015em; }
.abx .ab .r2s-owe { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--c-ink); background: var(--c-pop); }
.abx .ab .r2s-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font: 500 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.abx .ab .r2s-tag { background: var(--c-ink); color: var(--c-surface); border-radius: 999px; padding: 4px 7px; white-space: nowrap; font: 500 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.abx .ab.r2d-todos-memo .pi-memo p { font-size: 15px; }
.abx .ab.r2d-todos-memo .r2s-note { width: 140px; height: 150px; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; row-gap: 8px; }
.abx .ab.r2d-todos-memo .r2s-note b { font-size: 16px; }
.abx .ab.r2d-todos-memo .r2s-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
.abx .ab.r2d-todos-memo .r2s-grp { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--c-surface); border: 2px solid var(--c-ink); font: 650 14px/1 var(--font-sans); }
.abx .ab.r2d-todos-memo .r2s-grp b { margin-right: 4px; }
.abx .ab.hpn-r2-tab .r2tb-page { width: 540px; height: 520px; box-sizing: border-box; padding: 14px 18px 16px; background: var(--c-surface); border: 2px solid var(--c-ink); box-shadow: 6px 6px 0 var(--c-ink); display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 8px; color: var(--c-ink); }
.abx .ab.hpn-r2-tab .r2tb-mast { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 8px 12px 6px; background: var(--c-pop); border: 2px solid var(--c-ink); }
.abx .ab.hpn-r2-tab .r2tb-name { font: 700 46px/.9 var(--font-sans); letter-spacing: -.05em; text-transform: uppercase; color: var(--c-ink); }
.abx .ab.hpn-r2-tab .r2tb-meta { font: 500 10px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; text-align: right; max-width: 120px; }
.abx .ab.hpn-r2-tab .r2tb-star { width: 128px; height: 128px; display: grid; place-content: center; text-align: center; background: var(--c-hero); border: 2px solid var(--c-ink); color: var(--c-ink); clip-path: polygon(50% 0, 61% 14%, 79% 7%, 82% 25%, 100% 30%, 90% 47%, 100% 64%, 82% 70%, 80% 89%, 62% 83%, 50% 100%, 38% 84%, 20% 90%, 18% 71%, 0 65%, 10% 48%, 0 31%, 18% 25%, 21% 7%, 39% 14%); rotate: 8deg; }
.abx .ab.hpn-r2-tab .r2tb-star b { font: 700 38px/.9 var(--font-sans); }
.abx .ab.hpn-r2-tab .r2tb-star span { font: 700 11px/1.1 var(--font-sans); text-transform: uppercase; letter-spacing: .04em; max-width: 70px; }
.abx .ab.hpn-r3-tab5 .r3t-page { display: block; position: absolute; width: 544px; height: 520px; padding: 14px 18px; }
.abx .ab.hpn-r3-tab5 .r3t-bar { margin-top: 8px; padding: 5px 8px; background: var(--c-ink); color: var(--c-hero); font: 700 12px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .08em; }
.abx .ab.hpn-r3-tab5 .r3t-st { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; border-bottom: 3px solid var(--c-ink); box-sizing: border-box; }
.abx .ab.hpn-r3-tab5 .r3t-ph { position: relative; flex: 1; min-height: 0; border: 2px solid var(--c-ink); background: var(--bg); overflow: hidden; margin-bottom: 4px; }
.abx .ab.hpn-r3-tab5 .r3t-ph i { position: absolute; left: 50%; bottom: -26px; width: 92px; height: 92px; margin-left: -46px; border-radius: 50% 50% 0 0; background: var(--c-ink); }
.abx .ab.hpn-r3-tab5 .r3t-ph i::before { content: ""; position: absolute; left: 50%; top: -54px; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; background: var(--c-ink); }
.abx .ab.hpn-r3-tab5 .r3t-k { align-self: flex-start; padding: 3px 6px; background: var(--c-pop); border: 1.5px solid var(--c-ink); font: 700 10px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .08em; }
.abx .ab.hpn-r3-tab5 .r3t-st b { font: 700 22px/.95 var(--font-sans); text-transform: uppercase; letter-spacing: -.035em; }
.abx .ab.hpn-r3-tab5 .r3t-st--big b { font-size: 25px; }
.abx .ab.hpn-r3-tab5 .r3t-src { font: 500 9.5px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--c-ink-2); }
.abx .ab.hpn-r3-tab5 .r3t-ticker { width: 372px; font: 700 12.5px/1.3 var(--font-sans); text-transform: uppercase; letter-spacing: -.01em; }
.hp-site { background: var(--c-bg); color: var(--c-ink); }
.hp-sec { padding-block: clamp(64px, 8vw, 112px); padding-left: max(var(--gutter-wide), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter-wide), env(safe-area-inset-right, 0px)); }
.hp-in { max-width: var(--maxw); margin-inline: auto; }
.hp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--board-max)); gap: clamp(32px, 5vw, 88px); align-items: center; }
.hp-row--flip { grid-template-columns: minmax(0, var(--board-max)) minmax(0, 1fr); }
.hp-row--flip .hp-asset { order: -1; justify-self: start; }
.hp-copy { min-width: 0; display: grid; gap: var(--space-5); justify-items: start; align-content: center; }
.hp-h2 { margin: 0; font: var(--fw-display) var(--fs-display-2)/var(--lh-display-2) var(--font-sans); letter-spacing: var(--ls-display); text-wrap: balance; }
.hp-b { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--g-ink-2); max-width: var(--measure-body); text-wrap: pretty; }
.hp-link { font: 600 16px/1.3 var(--font-sans); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 2px; }
.hp-asset { width: 100%; max-width: var(--board-max); justify-self: end; min-width: 0; }
.hp-tile { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; max-width: 100%; border-radius: var(--r-lg); overflow: hidden; border: 2px solid var(--c-ink); box-shadow: 6px 6px 0 var(--c-ink); background: var(--c-surface); }
[data-ground="deep"] .hp-tile { border-color: var(--c-deep-line); box-shadow: 6px 6px 0 var(--c-hero); }
[data-ground="muted"] .hp-tile { box-shadow: 6px 6px 0 var(--c-ink); }
.hp-spud { margin: 8px 0 0; }
.hp-spud figcaption { max-width: 260px; }
@media (max-width: 899px) {
.hp-row, .hp-row--flip { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.hp-row--flip .hp-asset { order: 0; }
.hp-asset { justify-self: center !important; }
}
.hp-close-h { margin: 0; font: var(--fw-display) clamp(44px, 5.6vw, 88px)/.96 var(--font-sans); letter-spacing: var(--ls-closing); text-wrap: balance; }
.mo-spud img.hp-spud-img { display: block; width: 120px; height: 120px; image-rendering: pixelated; }
.mo-spud--disc .mo-spud__art { width: 140px; height: 140px; }
.pp-hero .phc-copy { justify-items: center; }
.pp-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: var(--r-pill); background: var(--c-hero-ink); color: var(--c-hero); font: 500 var(--fs-label, 13px)/1.2 var(--font-mono); text-align: left; }
.pp-eyebrow::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-hero); }
.pp-hero--per .phc-h1 { font-size: clamp(42px, 5.6vw, 84px); }
@property --ph3u { syntax: "<length>"; inherits: true; initial-value: 1px; }
@property --ph3x { syntax: "*"; inherits: false; }
@property --ph3y { syntax: "*"; inherits: false; }
@property --ph3w { syntax: "*"; inherits: false; }
@property --ph3r { syntax: "*"; inherits: false; }
@property --ph3mx { syntax: "*"; inherits: false; }
@property --ph3my { syntax: "*"; inherits: false; }
@property --ph3mw { syntax: "*"; inherits: false; }
@property --ph3mr { syntax: "*"; inherits: false; }
.ph3 { --ph3u: 1px; position: relative; color: var(--c-ink); text-align: left; }
.ph3 * { box-sizing: border-box; }
.ph3 figure { margin: 0; }
.ph3-box { position: relative; display: block; width: 100%; aspect-ratio: var(--ph3W) / var(--ph3H); container-type: inline-size; }
.ph3-in { position: absolute; inset: 0; --ph3u: calc(100cqw / var(--ph3W)); }
.ph3-a { position: absolute; left: calc(var(--ph3x) * var(--ph3u)); top: calc(var(--ph3y) * var(--ph3u)); width: calc(var(--ph3w) * var(--ph3u)); rotate: calc(var(--ph3r, 0) * 1deg); }
.ph3 .hp-spud-img { display: block; image-rendering: pixelated; max-width: none; }
#s-hero[data-hero-v="hero-e"] .phc-h1 { font-size: clamp(40px, 4.4vw, 64px); text-wrap: pretty; }
@media (min-width: 1180px) {
#s-hero[data-hero-v="hero-e"] .phc-body { display: grid; grid-template-columns: minmax(0, 540px) minmax(540px, 1fr); column-gap: clamp(32px, 4vw, 64px); align-items: center; min-height: 0; padding: 28px 0 88px; }
#s-hero[data-hero-v="hero-e"] .phc-copy { width: auto; margin: 0; padding-top: 0; align-items: flex-start; text-align: left; }
#s-hero[data-hero-v="hero-e"] .phc-lead { max-width: 500px; }
}
@media (max-width: 1179px) {
#s-hero[data-hero-v="hero-e"] .phc-copy { max-width: 680px; }
#s-hero[data-hero-v="hero-e"] .pp-hv { margin-top: 48px; }
}
@media (max-width: 699px) {
#s-hero[data-hero-v="hero-e"] .phc-body { padding-bottom: 56px; }
#s-hero[data-hero-v="hero-e"] .pp-hv { margin-top: 36px; }
}
.ph3-sp { display: flex; align-items: flex-end; gap: 4px; }
.ph3-bub { position: relative; display: block; padding: 10px 14px 11px; background: var(--c-surface); color: var(--c-ink); border: 2px solid var(--c-ink); border-radius: 18px; font: 600 16px/1.3 var(--font-sans); letter-spacing: -.01em; text-wrap: pretty; box-shadow: var(--shadow-hard-sm); }
.ph3-bub::after { content: ""; position: absolute; width: 14px; height: 14px; background: var(--c-surface); border: 2px solid var(--c-ink); border-top: 0; border-left: 0; }
.ph3-bub--up::after { left: calc(50% - 7px); top: -9px; rotate: 225deg; }
.ph3-bub--l::after { left: -9px; top: calc(50% - 7px); rotate: 135deg; }
.ph3-th-k { font: 500 max(12px, calc(10.5 * var(--ph3u)))/1.2 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.ph3-tent { position: relative; display: grid; justify-items: center; gap: calc(1 * var(--ph3u)); padding: calc(12 * var(--ph3u)) calc(4 * var(--ph3u)) calc(7 * var(--ph3u)); background: var(--c-surface); border: 2px solid var(--c-ink); border-radius: calc(5 * var(--ph3u)); box-shadow: 0 calc(4 * var(--ph3u)) 0 var(--c-ink); text-align: center; }
.ph3-tent::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(6 * var(--ph3u)); border-bottom: 1.5px solid var(--c-ink); background: var(--c-muted); border-radius: calc(3 * var(--ph3u)) calc(3 * var(--ph3u)) 0 0; }
.ph3-tent b { font: 650 max(12px, calc(19 * var(--ph3u)))/1 var(--font-sans); letter-spacing: -.02em; }
.ph3-tent i { font: 500 max(12px, calc(10 * var(--ph3u)))/1.1 var(--font-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); }
.ph3-pol { position: relative; display: grid; gap: calc(4 * var(--ph3u)); padding: calc(6 * var(--ph3u)) calc(6 * var(--ph3u)) calc(7 * var(--ph3u)); background: var(--c-surface); border: 2px solid var(--c-ink); border-radius: calc(3 * var(--ph3u)); box-shadow: calc(3 * var(--ph3u)) calc(3 * var(--ph3u)) 0 var(--c-ink); }
.ph3-polp { display: block; aspect-ratio: 100 / 80; border: 1.5px solid var(--c-ink); overflow: hidden; }
.ph3-photo-svg { display: block; width: 100%; height: 100%; }
.ph3-hrt { position: absolute; right: calc(-11 * var(--ph3u)); top: calc(-11 * var(--ph3u)); width: calc(32 * var(--ph3u)); height: calc(32 * var(--ph3u)); border-radius: 50%; background: var(--c-pop); border: 2px solid var(--c-ink); display: grid; place-items: center; rotate: 10deg; }
.ph3-hrt svg { display: block; }
.ph3-memo { display: grid; gap: calc(7 * var(--ph3u)); padding: calc(9 * var(--ph3u)) calc(11 * var(--ph3u)) calc(11 * var(--ph3u)); background: var(--c-surface); border: 2px solid var(--c-ink); border-radius: calc(16 * var(--ph3u)) calc(16 * var(--ph3u)) calc(16 * var(--ph3u)) calc(5 * var(--ph3u)); box-shadow: calc(3 * var(--ph3u)) calc(3 * var(--ph3u)) 0 var(--c-ink); }
.ph3-memo-h { display: flex; align-items: center; gap: calc(7 * var(--ph3u)); }
.ph3-mic { flex: none; width: calc(24 * var(--ph3u)); height: calc(24 * var(--ph3u)); border-radius: 50%; background: var(--c-ink); color: var(--c-hero); display: grid; place-items: center; }
.ph3-wv { flex: 1; display: flex; align-items: center; gap: calc(2.2 * var(--ph3u)); height: calc(20 * var(--ph3u)); }
.ph3-wv i { flex: 1; min-width: 1.5px; border-radius: calc(2 * var(--ph3u)); background: var(--c-ink); }
.ph3-memo-t { font: 500 max(12px, calc(9.5 * var(--ph3u)))/1 var(--font-mono); font-style: normal; color: var(--c-ink-2); }
.ph3-memo b { font: 650 max(12px, calc(14 * var(--ph3u)))/1.18 var(--font-sans); letter-spacing: -.01em; }
.ph3-got { display: inline-flex; align-items: center; gap: calc(5 * var(--ph3u)); padding: calc(6 * var(--ph3u)) calc(11 * var(--ph3u)) calc(6 * var(--ph3u)) calc(9 * var(--ph3u)); border-radius: 99px; background: var(--c-ink); color: var(--c-hero); font: 600 max(12px, calc(13 * var(--ph3u)))/1 var(--font-sans); white-space: nowrap; box-shadow: calc(2 * var(--ph3u)) calc(2 * var(--ph3u)) 0 rgba(28, 27, 13, .25); }
.ph3-alex { display: grid; gap: calc(5 * var(--ph3u)); }
.ph3-alex-h { display: flex; align-items: center; gap: calc(6 * var(--ph3u)); }
.ph3-alex-h b { font: 600 max(12px, calc(12 * var(--ph3u)))/1 var(--font-sans); }
.ph3-av { flex: none; width: calc(26 * var(--ph3u)); height: calc(26 * var(--ph3u)); border-radius: 50%; background: var(--c-pop); border: 2px solid var(--c-ink); display: grid; place-items: center; }
.ph3-av svg { display: block; }
.ph3-msg { display: block; padding: calc(9 * var(--ph3u)) calc(11 * var(--ph3u)) calc(10 * var(--ph3u)); background: var(--c-surface); border: 2px solid var(--c-ink); border-radius: calc(5 * var(--ph3u)) calc(16 * var(--ph3u)) calc(16 * var(--ph3u)) calc(16 * var(--ph3u)); box-shadow: calc(3 * var(--ph3u)) calc(3 * var(--ph3u)) 0 var(--c-ink); font: 600 max(12px, calc(14 * var(--ph3u)))/1.25 var(--font-sans); letter-spacing: -.01em; }
.ph3-msg em { font-style: normal; font-weight: 700; }
.ph3-wink { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.28em; }
.ph3-e { width: 100%; max-width: var(--board-max); margin-inline: auto; }
.ph3-est { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 600 / 600; }
.ph3-est > .ph3-a { --ph3u: calc(100cqw / 600); }
.ph3-th { aspect-ratio: 1; }
.ph3-thb { border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-ink); box-shadow: var(--shadow-hard); }
.ph3-thb--2 { background: var(--c-muted); }
.ph3-th-k { text-align: center; color: var(--c-ink-2); }
.ph3-th-l { text-align: center; font: 650 max(12px, calc(15 * var(--ph3u)))/1.15 var(--font-sans); letter-spacing: -.015em; text-wrap: balance; }
.ph3-thb .ph3-tent b { font-size: max(12px, calc(18 * var(--ph3u))); }
.ph3-thb--2 .ph3-pol { padding: calc(5 * var(--ph3u)); }
.ph3-dates { display: flex; align-items: center; gap: calc(4 * var(--ph3u)); }
.ph3-dt { flex: none; width: calc(62 * var(--ph3u)); display: grid; justify-items: center; gap: calc(2 * var(--ph3u)); padding: calc(6 * var(--ph3u)) calc(4 * var(--ph3u)) calc(7 * var(--ph3u)); border: 2px solid var(--c-ink); border-radius: calc(12 * var(--ph3u)); box-shadow: calc(3 * var(--ph3u)) calc(3 * var(--ph3u)) 0 var(--c-ink); }
.ph3-dt i { font: 500 max(12px, calc(10.5 * var(--ph3u)))/1 var(--font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.ph3-dt b { font: 650 max(12px, calc(28 * var(--ph3u)))/1 var(--font-sans); letter-spacing: -.03em; }
.ph3-dt svg { width: calc(16 * var(--ph3u)); height: calc(16 * var(--ph3u)); }
.ph3-dt--n { background: var(--c-pop); rotate: -4deg; }
.ph3-dt--b { background: var(--c-hero); rotate: 4deg; }
.ph3-dt-arr { position: relative; flex: 1; height: 2px; margin: 0 calc(4 * var(--ph3u)) 0 calc(2 * var(--ph3u)); background: repeating-linear-gradient(90deg, var(--c-ink) 0 4px, transparent 4px 7px); }
.ph3-dt-arr::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--c-ink); border-right: 2px solid var(--c-ink); rotate: 45deg; }
.ph3-dates--e .ph3-dt { width: calc(54 * var(--ph3u)); }
.ph3-dates--e .ph3-dt b { font-size: max(12px, calc(24 * var(--ph3u))); }
.ph3-memo--e { padding: calc(8 * var(--ph3u)) calc(10 * var(--ph3u)) calc(10 * var(--ph3u)); }
.ph3-memo--e b { font-size: max(12px, calc(14.5 * var(--ph3u))); }
.ph3-alex--e .ph3-msg { font-size: max(12px, calc(15 * var(--ph3u))); }
.ph3-tl { aspect-ratio: 1; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-ink); }
.ph3-esp { position: absolute; left: calc(50% - 120px); top: calc(258 / 600 * 100%); margin: 0; z-index: 1; }
.ph3-esay { z-index: 2; }
.ph3-esay .ph3-bub { text-align: center; font-size: 17px; }
.ph3-emob { display: none; }
@media (max-width: 699px) {
.ph3-est { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; justify-items: center; }
.ph3-est > .ph3-a { position: relative; left: auto; top: auto; width: 100%; max-width: 172px; rotate: none; }
.ph3-est > .ph3-tl, .ph3-esp, .ph3-esay { display: none; }
.ph3-est > .ph3-th--5 { grid-column: 1 / -1; }
.ph3-emob { display: flex; justify-content: center; margin-bottom: 18px; order: -1; }
.ph3-e { display: flex; flex-direction: column; }
.ph3-emsp { align-items: center; flex-direction: row-reverse; gap: 6px; max-width: 100%; }
.ph3-emsp .ph3-bub { width: 180px; font-size: 15px; }
}
.pp-psv .ps3-wrap { max-width: var(--maxw); margin-inline: auto; }
.ps3-copy { display: grid; gap: 18px; justify-items: start; align-content: start; }
.ps3-h2 { margin: 0; font: var(--fw-display) clamp(32px, 3.5vw, 50px)/1.02 var(--font-sans); letter-spacing: var(--ls-display); text-wrap: balance; max-width: 13em; }
.ps3-b { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--g-ink-2); max-width: 30em; text-wrap: pretty; }
.ps3-spud { margin: 0; }
.ps3-spud figcaption { font-size: 15px; max-width: 220px; }
.ps3-mk { display: inline-flex; align-items: center; gap: 7px; font: 650 16px/1 var(--font-sans); letter-spacing: -.01em; color: var(--c-ink); }
.ps3-mk i { width: 14px; height: 14px; border-radius: 50%; background: var(--c-hero); box-shadow: 0 0 0 2px var(--c-ink); }
.ps3-sc { container-type: inline-size; width: 100%; min-width: 0; }
.ps3-cv { --W: var(--dW); --H: var(--dH); --u: min(1.15px, calc(100cqi / var(--W))); position: relative; width: calc(var(--W) * var(--u)); height: calc(var(--H) * var(--u)); font: 600 max(12.5px, calc(14.5 * var(--u)))/1.2 var(--font-sans); color: var(--c-ink); }
.ps3-it { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); box-sizing: border-box; }
.ps3-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ps3-svg--m { display: none; }
@media (max-width: 760px) {
.ps3-cv { --W: var(--mW); --H: var(--mH); }
.ps3-it { left: calc(var(--mx, var(--x)) * var(--u)); top: calc(var(--my, var(--y)) * var(--u)); width: calc(var(--mw, var(--w)) * var(--u)); height: calc(var(--mh, var(--h)) * var(--u)); }
.ps3-cv .ps3-dk, .ps3-svg--d { display: none; }
.ps3-svg--m { display: block; }
}
.ps3-e { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: stretch; }
.ps3-e-pan { display: flex; flex-direction: column; gap: 34px; padding: 48px 44px 44px; border-radius: var(--r-lg); min-width: 0; }
.ps3-e-p { border: var(--border) solid var(--c-ink); }
.ps3-e-s { border: var(--border) solid var(--c-ink); box-shadow: 6px 6px 0 var(--c-ink); }
.ps3-e .ps3-h2 { font-size: clamp(30px, 3vw, 44px); max-width: 12em; }
.ps3-e-sc { margin-top: auto; }
.ps3-arc { fill: none; stroke: var(--c-ink); stroke-width: 2.2; stroke-dasharray: 2 10; stroke-linecap: round; }
.ps3-streak path, .ps3-floor { fill: none; stroke: var(--c-ink); stroke-width: 2.5; stroke-linecap: round; }
.ps3-ball { --d: 90; width: calc(var(--d) * var(--u)); height: calc(var(--d) * var(--u)); display: grid; place-items: center; transform: translate(-50%, -50%); border-radius: 50%; background: var(--bc); color: var(--bi); border: var(--border) solid var(--c-ink); box-shadow: inset calc(-6 * var(--u)) calc(-7 * var(--u)) 0 rgba(28, 27, 13, .1); text-align: center; z-index: 2; }
.ps3-ball span { padding: 0 6%; font: 600 max(12px, calc(14 * var(--u)))/1.08 var(--font-sans); letter-spacing: -.01em; }
.ps3-ball--fall { transform: translate(-50%, -50%) rotate(-14deg); }
.ps3-ball--floor { --d: 84; transform: translate(-50%, -50%) scaleY(.94); }
.ps3-drop { padding: 5px 9px; border-radius: 7px; background: var(--c-pop); color: var(--c-ink); border: var(--border) solid var(--c-ink); font: 500 max(12px, calc(12.5 * var(--u)))/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; rotate: -8deg; z-index: 3; }
.ps3-e-jug { transform: translate(-50%, -100%); z-index: 1; }
.ps3-e-jug img { display: block; width: 240px; height: 240px; image-rendering: pixelated; }
.ps3-bub { padding: 9px 12px; max-width: 150px; background: var(--c-surface); color: var(--c-ink); border: var(--border) solid var(--c-ink); border-radius: 16px 16px 4px 16px; font: 600 15px/1.25 var(--font-sans); z-index: 3; }
.ps3-e-arr { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: var(--c-surface); color: var(--c-ink); border: var(--border) solid var(--c-ink); box-shadow: 3px 3px 0 var(--c-ink); }
.ps3-e-land { position: relative; margin-top: auto; padding-top: 100px; }
.ps3-e-card { position: relative; max-width: 480px; padding: 20px 22px 18px; border-radius: 22px; background: var(--c-surface); color: var(--c-ink); border: var(--border) solid var(--c-ink); box-shadow: 6px 6px 0 var(--c-ink); display: grid; gap: 14px; }
.ps3-e-ch { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1.5px solid var(--c-line); }
.ps3-e-cm, .ps3-e-gl, .ps3-e-foot { font: 500 12px/1.2 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-2); }
.ps3-e-grp { display: grid; gap: 6px; }
.ps3-e-grp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ps3-e-grp li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ps3-e-grp li i { width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; background: var(--bc); border: var(--border) solid var(--c-ink); }
.ps3-e-grp li b { font: 600 15px/1.25 var(--font-sans); min-width: 0; }
.ps3-e-grp li span { font: 500 13px/1.2 var(--font-sans); color: var(--c-ink-2); text-align: right; white-space: nowrap; }
.ps3-e-foot { margin: 2px 0 0; padding-top: 12px; border-top: 1.5px solid var(--c-line); color: var(--c-ink); }
.ps3-e .ps3-e-sp2 { position: absolute; right: 22px; top: -16px; z-index: 2; flex-direction: row-reverse; align-items: center; gap: 4px; }
.ps3-e-sp2 figcaption { max-width: 150px; border-radius: 16px 16px 4px 16px; }
@media (max-width: 1099px) {
.ps3-e { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.ps3-e-pan { max-width: 640px; width: 100%; box-sizing: border-box; justify-self: center; }
.ps3-e-arr { position: relative; left: auto; top: auto; margin: -8px auto; rotate: 90deg; }
}
@media (max-width: 760px) {
.ps3-e-pan { padding: 30px 20px 26px; gap: 26px; border-radius: 22px; }
.ps3-e-jug img { width: 160px; height: 160px; }
.ps3-ball { --d: 92; }
.ps3-ball--floor { --d: 82; }
.ps3-bub { max-width: 140px; font-size: 14px; }
.ps3-e-land { padding-top: 96px; }
.ps3-e .ps3-e-sp2 { right: 8px; }
.ps3-e-card { padding: 16px 16px 14px; }
.ps3-e-grp li b { font-size: 14.5px; }
}
.abx .ab.pf3 .pf3-sp { image-rendering: pixelated; }
.abx .ab.pf3 .pf3-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c-hero); border: 2px solid var(--c-ink); flex: none; }
.abx .ab.pf3 .pf3-ch { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--c-ink); color: var(--c-surface); font: 500 11px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.abx .ab.pf3 .pf3-ch--sun { color: var(--c-hero); }
.abx .ab.pf3 .pf3-bub { display: inline-block; padding: 9px 14px; border-radius: 16px; background: var(--c-surface); border: 2px solid var(--c-ink); font: 600 15px/1.2 var(--font-sans); white-space: nowrap; box-shadow: 3px 3px 0 var(--c-ink); }
.abx .ab.pf3 .pf3-bub::after { content: ""; position: absolute; width: 12px; height: 12px; background: var(--c-surface); border: 2px solid var(--c-ink); border-top: 0; border-left: 0; }
.abx .ab.pf3 .pf3-bub--l::after { left: -8px; top: 50%; margin-top: -7px; rotate: 135deg; }
.abx .ab.pf3-rain .pf3-pan { overflow: hidden; box-sizing: border-box; border: 2px solid var(--c-ink); border-radius: 26px; box-shadow: var(--shadow-hard, 4px 4px 0 var(--c-ink)); }
.abx .ab.pf3-rain .pf3-pan > svg { position: absolute; left: -2px; top: -2px; }
.abx .ab.pf3-rain .pf3-pan--rain { background: var(--c-line-dashed); }
.abx .ab.pf3-rain .pf3-cl { fill: var(--c-ink-2); stroke: var(--c-ink); stroke-width: 2; }
.abx .ab.pf3-rain .pf3-drops path { stroke: var(--c-ink-2); stroke-width: 2.5; stroke-linecap: round; }
.abx .ab.pf3-rain .pf3-pud { fill: var(--c-ink-2); opacity: .45; }
.abx .ab.pf3-rain .pf3-ph { width: 118px; height: 170px; box-sizing: border-box; padding: 8px; border-radius: 24px; background: var(--c-ink); }
.abx .ab.pf3-rain .pf3-phs { height: 100%; box-sizing: border-box; border-radius: 17px; background: var(--c-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px; position: relative; }
.abx .ab.pf3-rain .pf3-pht { position: absolute; top: 10px; font: 500 10px/1 var(--font-mono); color: var(--c-ink-2); }
.abx .ab.pf3-rain .pf3-phi { color: var(--c-ink-2); }
.abx .ab.pf3-rain .pf3-phs b { font: 650 14px/1.15 var(--font-sans); }
.abx .ab.pf3-rain .pf3-phz { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--c-line-dashed); color: var(--c-ink-2); font: 500 12px/1 var(--font-mono); }
.abx .ab.pf3-rain .pf3-pan--sun { background: var(--c-soft); }
.abx .ab.pf3-rain .pf3-sun { fill: var(--c-hero); stroke: var(--c-ink); stroke-width: 2.5; }
.abx .ab.pf3-rain .pf3-rays2 path { stroke: var(--c-ink); stroke-width: 3; stroke-linecap: round; }
.abx .ab.pf3-rain .pf3-grass { fill: var(--c-hero); stroke: var(--c-ink); stroke-width: 2; }
.abx .ab.pf3-rain .pf3-blanket { stroke: var(--c-ink); stroke-width: 2; }
.abx .ab.pf3-rain .pf3-tg { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: var(--c-surface); border: 2px solid var(--c-ink); box-shadow: 3px 3px 0 var(--c-ink); font: 650 13.5px/1 var(--font-sans); white-space: nowrap; }
.abx .ab.pf3-rain .pf3-mm { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; box-sizing: border-box; border-radius: 18px; background: var(--c-surface); border: 2px solid var(--c-ink); box-shadow: 4px 4px 0 var(--c-ink); z-index: 3; }
.abx .ab.pf3-rain .pf3-mmh { flex-basis: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; margin-right: 2px; }
.abx .ab.pf3-rain .pf3-mmc { padding: 6px 10px; border-radius: 999px; background: var(--c-hero); border: 2px solid var(--c-ink); font: 650 13px/1 var(--font-sans); white-space: nowrap; }
.abx .ab.p3r-gb .p3r-q { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 999px; font: 650 17px/1.2 var(--font-sans); letter-spacing: -.01em; white-space: nowrap; rotate: -1deg; }
.abx .ab.p3r-gb .p3r-board { box-sizing: border-box; padding: 46px 16px 14px; background: var(--c-soft); border: 2px solid var(--c-ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--c-ink); }
.abx .ab.p3r-gb .p3r-lbl { position: absolute; left: 18px; top: 14px; font: 500 12px/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.abx .ab.p3r-gb .p3r-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 10px; }
.abx .ab.p3r-gb .p3r-g { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; height: 92px; padding: 8px 4px 5px; box-sizing: border-box; border: 2px solid var(--c-ink); border-radius: 12px 12px 4px 4px; background: #fff; text-align: center; box-shadow: 0 4px 0 var(--c-ink); }
.abx .ab.p3r-gb .p3r-g--l { background: var(--c-accent); }
.abx .ab.p3r-gb .p3r-g--p { background: var(--c-pop); }
.abx .ab.p3r-gb .p3r-g--c { background: var(--c-muted); }
.abx .ab.p3r-gb .p3r-g.is-on { background: var(--c-ink); color: #fff; translate: 0 -5px; box-shadow: 0 9px 0 var(--c-accent), 0 9px 0 2px var(--c-ink); }
.abx .ab.p3r-gb .p3r-gf { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--c-ink); background: #fff; color: var(--c-ink); font: 700 13px/1 var(--font-sans); box-sizing: border-box; }
.abx .ab.p3r-gb .p3r-g.is-on .p3r-gf { background: var(--c-accent); border-color: var(--c-accent); }
.abx .ab.p3r-gb .p3r-g b { font: 700 15px/1 var(--font-sans); margin-top: 1px; }
.abx .ab.p3r-gb .p3r-gfact { font: 600 12.5px/1.15 var(--font-sans); }
.abx .ab.p3r-gb .p3r-g-st { position: absolute; top: -11px; right: -6px; display: inline-flex; align-items: center; gap: 4px; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; justify-content: center; border: 2px solid var(--c-ink); border-radius: 999px; background: #fff; color: var(--c-ink); font: 500 11px/1 var(--font-mono); letter-spacing: .04em; }
.abx .ab.p3r-gb .p3r-g-st--done { background: var(--c-ink); color: var(--c-accent); text-transform: uppercase; }
.abx .ab.p3r-gb .p3r-g-st--on { background: var(--c-accent); text-transform: uppercase; right: -10px; }
.abx .ab.p3r-gb .p3r-eq { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.abx .ab.p3r-gb .p3r-eq i { width: 2.5px; border-radius: 1px; background: var(--c-ink); }
.abx .ab.p3r-gb .p3r-cap { padding: 12px 16px 13px; box-sizing: border-box; border-radius: 16px; rotate: .6deg; }
.abx .ab.p3r-gb .p3r-cap p { margin: 4px 0 0; font: 600 16.5px/1.3 var(--font-sans); letter-spacing: -.005em; }
.abx .ab.p3r-gb .p3r-player { display: grid; gap: 8px; padding: 12px 16px 14px; box-sizing: border-box; border-radius: 20px; }
.abx .ab.p3r-gb .p3r-pp-top { display: flex; align-items: center; gap: 12px; }
.abx .ab.p3r-gb .p3r-pbtn { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--c-ink); color: var(--c-accent); font-size: 20px; }
.abx .ab.p3r-gb .p3r-pp-t { flex: 1; display: grid; gap: 3px; }
.abx .ab.p3r-gb .p3r-pp-t b { font: 650 17px/1.1 var(--font-sans); }
.abx .ab.p3r-gb .p3r-pp-t span { font: 500 13px/1.1 var(--font-sans); color: var(--c-ink-2); }
.abx .ab.p3r-gb .p3r-pp-t em { font: 500 12.5px/1 var(--font-mono); font-style: normal; color: var(--c-ink); }
.abx .ab.p3r-gb .p3r-sw { display: inline-flex; padding: 3px; border: 2px solid var(--c-ink); border-radius: 999px; background: var(--c-muted); }
.abx .ab.p3r-gb .p3r-sw span { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 999px; font: 600 13px/1 var(--font-sans); }
.abx .ab.p3r-gb .p3r-sw .is-on { background: var(--c-ink); color: var(--c-accent); }
.abx .ab.p3r-gb .p3r-track { position: relative; padding: 0 2px 0 0; }
.abx .ab.p3r-gb .p3r-marks { position: relative; height: 26px; margin-bottom: 4px; }
.abx .ab.p3r-gb .p3r-mk { position: absolute; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--c-ink); background: #fff; font: 700 9.5px/1 var(--font-sans); box-sizing: border-box; color: var(--c-ink); }
.abx .ab.p3r-gb .p3r-mk--p { background: var(--c-pop); }
.abx .ab.p3r-gb .p3r-mk--l { background: var(--c-accent); }
.abx .ab.p3r-gb .p3r-mk--c { background: var(--c-muted); }
.abx .ab.p3r-gb .p3r-mk.is-on { background: var(--c-ink); color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent), 0 0 0 5px var(--c-ink); }
.abx .ab.p3r-gb .p3r-wv2 { display: flex; align-items: center; gap: 3px; height: 28px; }
.abx .ab.p3r-gb .p3r-wv2 i { flex: 1; min-height: 5px; border-radius: 2px; background: var(--c-ink); }
.abx .ab.p3r-gb .p3r-wv2 i:nth-child(n + 8) { background: var(--c-line-dashed); }
.hp-tile { container-type: inline-size; }
.hp-tile > .ab { --s: .59; }
@container (min-width: 400px) {
.hp-tile > .ab { --s: .66; }
}
@container (min-width: 480px) {
.hp-tile > .ab { --s: .8; }
}
@container (min-width: 560px) {
.hp-tile > .ab { --s: .93; }
}
@container (min-width: 592px) {
.hp-tile > .ab { --s: .98; }
}
@supports (width: calc(1px * tan(atan2(100cqw, 600px)))) {
.hp-tile > .ab { --tile-w: 100cqw; --s: tan(atan2(var(--tile-w), 600px)); }
}
.per main { display: block; place-items: normal; }
.phc { padding-block: 0; }
.hp-site { font: 16px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; }
.hp-site :where(b, strong) { font-weight: bolder; }
[data-ground="deep"] :is(a,button):focus-visible{outline-color:var(--c-hero)}
.link.hp-link,.link.hp-link:hover{color:inherit;text-decoration-color:currentColor}
.abx .mo-only { display: none !important; }
@media (max-width: 699px) {
#features .hp-tile.abx:has(> .ab.r3-auto-sort-c2) { aspect-ratio: 366 / 430 !important; height: auto !important; max-height: 477px !important; background: var(--c-soft) !important; }
#features .ab.r3-auto-sort-c2 { width: 600px !important; height: 600px !important; overflow: hidden !important; --mo-s: 0.97; transform: scale(var(--mo-s)) translate(-12px, -2px) !important; }
@supports (width: calc(1px * tan(atan2(100cqw, 600px)))) { #features .ab.r3-auto-sort-c2 { --tile-w: 100cqw; --mo-s: min(1.1, tan(atan2(var(--tile-w), 366px))); transform: scale(var(--mo-s)) translate(calc(-12px + max(0px, (100cqw / var(--mo-s) - 366px) / 2)), -2px) !important; } }
#features .ab.r3-auto-sort-c2 > span.mono,
#features .ab.r3-auto-sort-c2 > div.vb-sent,
#features .ab.r3-auto-sort-c2 > svg,
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(5) > b,
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(5) > span.sub,
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(6) > b,
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(6) > span.sub,
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(7) > b,
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(7) > span.sub { display: none !important; }
#features .ab.r3-auto-sort-c2 > div.r3as-rec { left: 30px !important; top: 20px !important; width: 330px !important; overflow-x: hidden !important; overflow-y: hidden !important; rotate: 0deg !important; }
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(5) { top: 116px !important; display: grid !important; grid-template-columns: 44px 1fr !important; column-gap: 12px !important; row-gap: 4px !important; align-items: center !important; text-align: left !important; padding-top: 14px !important; padding-right: 16px !important; padding-bottom: 14px !important; padding-left: 16px !important; width: 330px !important; height: auto !important; rotate: 0deg !important; box-sizing: border-box !important; }
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(5) > span.vb-bin-ic,
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(6) > span.vb-bin-ic,
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(7) > span.vb-bin-ic { position: static !important; grid-column-start: 1 !important; grid-column-end: auto !important; grid-row-start: 1 !important; grid-row-end: span 2 !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; transform: none !important; }
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(5) > span.mono,
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(6) > span.mono,
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(7) > span.mono { position: static !important; grid-column-start: 2 !important; grid-column-end: auto !important; grid-row-start: 1 !important; grid-row-end: auto !important; text-align: left !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; justify-self: start !important; }
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(6) { left: 30px !important; top: 227px !important; display: grid !important; grid-template-columns: 44px 1fr !important; column-gap: 12px !important; row-gap: 4px !important; align-items: center !important; text-align: left !important; padding-top: 14px !important; padding-right: 16px !important; padding-bottom: 14px !important; padding-left: 16px !important; width: 330px !important; height: auto !important; rotate: 0deg !important; box-sizing: border-box !important; }
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(7) { left: 30px !important; top: 338px !important; display: grid !important; grid-template-columns: 44px 1fr !important; column-gap: 12px !important; row-gap: 4px !important; align-items: center !important; text-align: left !important; padding-top: 14px !important; padding-right: 16px !important; padding-bottom: 14px !important; padding-left: 16px !important; width: 330px !important; height: auto !important; rotate: 0deg !important; box-sizing: border-box !important; }
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(5) > span.vb-ph { display: block !important; grid-column-start: 2 !important; grid-column-end: auto !important; grid-row-start: 2 !important; grid-row-end: auto !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-top-style: none !important; border-right-style: none !important; border-bottom-style: none !important; border-left-style: none !important; border-top-color: currentcolor !important; border-right-color: currentcolor !important; border-bottom-color: currentcolor !important; border-left-color: currentcolor !important; border-image-source: none !important; border-image-slice: 100% !important; border-image-width: 1 !important; border-image-outset: 0 !important; border-image-repeat: stretch !important; font-size: 18px !important; line-height: 1.3 !important; height: auto !important; min-height: 0px !important; width: auto !important; text-align: left !important; justify-self: stretch !important; }
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(5) > span.vb-ph .mo-n1 { display: inline !important; position: static !important; padding-top: 0px !important; padding-right: 2px !important; padding-bottom: 0px !important; padding-left: 2px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; width: auto !important; height: auto !important; }
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(6) > span.vb-ph { display: block !important; grid-column-start: 2 !important; grid-column-end: auto !important; grid-row-start: 2 !important; grid-row-end: auto !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-top-style: none !important; border-right-style: none !important; border-bottom-style: none !important; border-left-style: none !important; border-top-color: currentcolor !important; border-right-color: currentcolor !important; border-bottom-color: currentcolor !important; border-left-color: currentcolor !important; border-image-source: none !important; border-image-slice: 100% !important; border-image-width: 1 !important; border-image-outset: 0 !important; border-image-repeat: stretch !important; font-size: 18px !important; line-height: 1.3 !important; height: auto !important; min-height: 0px !important; width: auto !important; text-align: left !important; justify-self: stretch !important; }
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(6) > span.vb-ph .mo-n1 { display: inline !important; position: static !important; padding-top: 0px !important; padding-right: 2px !important; padding-bottom: 0px !important; padding-left: 2px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; width: auto !important; height: auto !important; }
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(7) > span.vb-ph { display: block !important; grid-column-start: 2 !important; grid-column-end: auto !important; grid-row-start: 2 !important; grid-row-end: auto !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-top-style: none !important; border-right-style: none !important; border-bottom-style: none !important; border-left-style: none !important; border-top-color: currentcolor !important; border-right-color: currentcolor !important; border-bottom-color: currentcolor !important; border-left-color: currentcolor !important; border-image-source: none !important; border-image-slice: 100% !important; border-image-width: 1 !important; border-image-outset: 0 !important; border-image-repeat: stretch !important; font-size: 18px !important; line-height: 1.3 !important; height: auto !important; min-height: 0px !important; width: auto !important; text-align: left !important; justify-self: stretch !important; }
#features .ab.r3-auto-sort-c2 > div.vb-bin:nth-child(7) > span.vb-ph .mo-n1 { display: inline !important; position: static !important; padding-top: 0px !important; padding-right: 2px !important; padding-bottom: 0px !important; padding-left: 2px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; width: auto !important; height: auto !important; }
#s-people .hp-tile.abx:has(> .ab.r3-profiles-a.r2d-people-pops) { aspect-ratio: 435 / 566 !important; height: auto !important; max-height: 570px !important; background: var(--c-soft) !important; }
#s-people .ab.r3-profiles-a.r2d-people-pops { width: 600px !important; height: 600px !important; overflow: hidden !important; --mo-s: 0.81; transform: scale(var(--mo-s)) translate(16px, -22px) !important; }
@supports (width: calc(1px * tan(atan2(100cqw, 600px)))) { #s-people .ab.r3-profiles-a.r2d-people-pops { --tile-w: 100cqw; --mo-s: min(1, tan(atan2(var(--tile-w), 435px))); transform: scale(var(--mo-s)) translate(calc(16px + max(0px, (100cqw / var(--mo-s) - 435px) / 2)), -22px) !important; } }
#s-people .ab.r3-profiles-a.r2d-people-pops > div.kp { left: 74px !important; top: 40px !important; rotate: 0deg !important; }
#s-people .ab.r3-profiles-a.r2d-people-pops > div.kp > div.kp-scr > div.kp-body > div.r3tiles,
#s-people .ab.r3-profiles-a.r2d-people-pops > div.kp > div.kp-scr > div.kp-body > div.r3likes,
#s-people .ab.r3-profiles-a.r2d-people-pops > div.r2p-pop.r2p-pop--lime > ul.r2p-ul > li:nth-child(1) > span:nth-child(2) > i,
#s-people .ab.r3-profiles-a.r2d-people-pops > div.r2p-pop.r2p-pop--lime > ul.r2p-ul > li:nth-child(2) > span:nth-child(2) > i,
#s-people .ab.r3-profiles-a.r2d-people-pops > div.r2p-pop.r2p-pop--lime > ul.r2p-ul > li:nth-child(3) > span:nth-child(2) > i,
#s-people .ab.r3-profiles-a.r2d-people-pops > div.r2p-pop:nth-child(4) { display: none !important; }
#s-people .ab.r3-profiles-a.r2d-people-pops > div.r2p-pop:nth-child(2) { left: 8px !important; top: 62px !important; width: 226px !important; rotate: -3deg !important; z-index: 3 !important; }
#s-people .ab.r3-profiles-a.r2d-people-pops > div.r2p-pop.r2p-pop--lime { left: 176px !important; top: 268px !important; width: 222px !important; height: auto !important; z-index: 3 !important; }
#s-todos .hp-tile.abx:has(> .ab.r3-todos-from-capture-b3.r2d-todos-memo) { aspect-ratio: 336 / 542 !important; height: auto !important; max-height: 627.3px !important; background: var(--c-muted) !important; }
#s-todos .ab.r3-todos-from-capture-b3.r2d-todos-memo { width: 600px !important; height: 600px !important; overflow: hidden !important; --mo-s: 1.05; transform: scale(var(--mo-s)) translate(-12px, -12px) !important; }
@supports (width: calc(1px * tan(atan2(100cqw, 600px)))) { #s-todos .ab.r3-todos-from-capture-b3.r2d-todos-memo { --tile-w: 100cqw; --mo-s: min(1.15, tan(atan2(var(--tile-w), 336px))); transform: scale(var(--mo-s)) translate(calc(-12px + max(0px, (100cqw / var(--mo-s) - 336px) / 2)), -12px) !important; } }
#s-todos .ab.r3-todos-from-capture-b3.r2d-todos-memo > div.pi-memo { left: 30px !important; top: 30px !important; width: 300px !important; rotate: 0deg !important; right: auto !important; bottom: auto !important; position: absolute !important; }
#s-todos .ab.r3-todos-from-capture-b3.r2d-todos-memo > div.pi-pill,
#s-todos .ab.r3-todos-from-capture-b3.r2d-todos-memo > span.r2s-grp,
#s-todos .ab.r3-todos-from-capture-b3.r2d-todos-memo > span.mono { display: none !important; }
#s-todos .ab.r3-todos-from-capture-b3.r2d-todos-memo > div.r2s-note:nth-child(3) { left: 33px !important; top: 222px !important; rotate: 0deg !important; right: auto !important; bottom: auto !important; position: absolute !important; }
#s-todos .ab.r3-todos-from-capture-b3.r2d-todos-memo > div.r2s-note:nth-child(4) { left: 187px !important; top: 222px !important; rotate: 0deg !important; right: auto !important; bottom: auto !important; position: absolute !important; }
#s-todos .ab.r3-todos-from-capture-b3.r2d-todos-memo > div.r2s-note:nth-child(5) { left: 33px !important; top: 386px !important; rotate: 0deg !important; right: auto !important; bottom: auto !important; position: absolute !important; }
#s-todos .ab.r3-todos-from-capture-b3.r2d-todos-memo > div.r2s-note:nth-child(6) { left: 187px !important; top: 386px !important; rotate: 0deg !important; right: auto !important; bottom: auto !important; position: absolute !important; }
#s-interests .hp-tile.abx:has(> .ab.hpn-r2.hpn-r2-tab.hpn-r3-tab5) { aspect-ratio: 388 / 643 !important; height: auto !important; max-height: 743.45px !important; background: var(--c-soft) !important; }
#s-interests .ab.hpn-r2.hpn-r2-tab.hpn-r3-tab5 { width: 600px !important; height: 643px !important; overflow: hidden !important; --mo-s: 0.91; transform: scale(var(--mo-s)) translate(-4px, -1px) !important; }
@supports (width: calc(1px * tan(atan2(100cqw, 600px)))) { #s-interests .ab.hpn-r2.hpn-r2-tab.hpn-r3-tab5 { --tile-w: 100cqw; --mo-s: min(1.15, tan(atan2(var(--tile-w), 388px))); transform: scale(var(--mo-s)) translate(calc(-4px + max(0px, (100cqw / var(--mo-s) - 388px) / 2)), -1px) !important; } }
#s-interests .ab.hpn-r2.hpn-r2-tab.hpn-r3-tab5 > div.r2tb-page.r3t-page { width: 340px !important; height: 600px !important; }
#s-interests .ab.hpn-r2.hpn-r2-tab.hpn-r3-tab5 > div.r2tb-page.r3t-page > div.r3t-bar,
#s-interests .ab.hpn-r2.hpn-r2-tab.hpn-r3-tab5 > div.r2tb-page.r3t-page > div.r3t-st.r3t-st--big:nth-child(3) > span.r3t-src,
#s-interests .ab.hpn-r2.hpn-r2-tab.hpn-r3-tab5 > div.r2tb-page.r3t-page > div.r3t-st.r3t-st--big:nth-child(4),
#s-interests .ab.hpn-r2.hpn-r2-tab.hpn-r3-tab5 > div.r2tb-page.r3t-page > div.r3t-st.r3t-st--big:nth-child(4) > span.r3t-src,
#s-interests .ab.hpn-r2.hpn-r2-tab.hpn-r3-tab5 > div.r2tb-page.r3t-page > div.r3t-st:nth-child(5) > span.r3t-src,
#s-interests .ab.hpn-r2.hpn-r2-tab.hpn-r3-tab5 > div.r2tb-page.r3t-page > div.r3t-st:nth-child(6) > span.r3t-src,
#s-interests .ab.hpn-r2.hpn-r2-tab.hpn-r3-tab5 > div.r2tb-page.r3t-page > div.r3t-st:nth-child(7) > span.r3t-src,
#s-interests .ab.hpn-r2.hpn-r2-tab.hpn-r3-tab5 > div.r2tb-page.r3t-page > p.r3t-ticker,
#s-interests .ab.hpn-r2.hpn-r2-tab.hpn-r3-tab5 > div.r2tb-star { display: none !important; }
#s-interests .ab.hpn-r2.hpn-r2-tab.hpn-r3-tab5 > div.r2tb-page.r3t-page > div.r3t-st.r3t-st--big:nth-child(3) { left: 20px !important; top: 136px !important; width: 300px !important; height: 236px !important; rotate: 0deg !important; right: auto !important; bottom: auto !important; position: absolute !important; }
#s-interests .ab.hpn-r2.hpn-r2-tab.hpn-r3-tab5 > div.r2tb-page.r3t-page > div.r3t-st:nth-child(5) { left: 20px !important; top: 386px !important; width: 300px !important; height: auto !important; rotate: 0deg !important; right: auto !important; bottom: auto !important; position: absolute !important; }
#s-interests .ab.hpn-r2.hpn-r2-tab.hpn-r3-tab5 > div.r2tb-page.r3t-page > div.r3t-st:nth-child(6) { left: 20px !important; top: 452px !important; width: 300px !important; height: auto !important; rotate: 0deg !important; right: auto !important; bottom: auto !important; position: absolute !important; }
#s-interests .ab.hpn-r2.hpn-r2-tab.hpn-r3-tab5 > div.r2tb-page.r3t-page > div.r3t-st:nth-child(7) { left: 20px !important; top: 518px !important; width: 300px !important; height: auto !important; rotate: 0deg !important; right: auto !important; bottom: auto !important; position: absolute !important; }
#s-prep .hp-tile.abx:has(> .ab.p3r-gb) { aspect-ratio: 376 / 341 !important; height: auto !important; max-height: 362.05px !important; background: var(--c-hero) !important; }
#s-prep .ab.p3r-gb { width: 600px !important; height: 600px !important; overflow: hidden !important; --mo-s: 0.94; transform: scale(var(--mo-s)) translate(-12px, -12px) !important; }
@supports (width: calc(1px * tan(atan2(100cqw, 600px)))) { #s-prep .ab.p3r-gb { --tile-w: 100cqw; --mo-s: min(1.05, tan(atan2(var(--tile-w), 376px))); transform: scale(var(--mo-s)) translate(calc(-12px + max(0px, (100cqw / var(--mo-s) - 376px) / 2)), -12px) !important; } }
#s-prep .ab.p3r-gb > div.p3r-q,
#s-prep .ab.p3r-gb > div.p3r-board { display: none !important; }
#s-prep .ab.p3r-gb > div.p3r-cap { left: 30px !important; top: 30px !important; width: 340px !important; rotate: 0deg !important; right: auto !important; bottom: auto !important; position: absolute !important; }
#s-prep .ab.p3r-gb > div.p3r-player { left: 30px !important; top: 156px !important; width: 340px !important; height: auto !important; rotate: 0deg !important; right: auto !important; bottom: auto !important; position: absolute !important; }
#s-drafts .hp-tile.abx:has(> .ab) { aspect-ratio: 407 / 551 !important; height: auto !important; max-height: 555px !important; background: var(--c-soft) !important; }
#s-drafts .ab { width: 600px !important; height: 600px !important; overflow: hidden !important; --mo-s: 0.87; transform: scale(var(--mo-s)) translate(12px, -9px) !important; }
@supports (width: calc(1px * tan(atan2(100cqw, 600px)))) { #s-drafts .ab { --tile-w: 100cqw; --mo-s: min(1, tan(atan2(var(--tile-w), 407px))); transform: scale(var(--mo-s)) translate(calc(12px + max(0px, (100cqw / var(--mo-s) - 407px) / 2)), -9px) !important; } }
#s-drafts .ab > span.mono,
#s-drafts .ab > p.hand { display: none !important; }
#s-drafts .ab > div.pol:nth-child(2) { left: 18px !important; top: 34px !important; z-index: 2 !important; }
#s-drafts .ab > div.pol:nth-child(2) > span.pol-chip,
#s-drafts .ab > div.pol:nth-child(3) > span.pol-chip,
#s-drafts .ab > div.pol:nth-child(4) > span.pol-chip { font-size: 14px !important; width: auto !important; left: 10px !important; right: 10px !important; height: auto !important; padding-top: 5px !important; padding-right: 8px !important; padding-bottom: 5px !important; padding-left: 8px !important; text-align: center !important; }
#s-drafts .ab > div.pol:nth-child(3) { left: 196px !important; top: 58px !important; rotate: 4deg !important; z-index: 2 !important; }
#s-drafts .ab > div.pol:nth-child(4) { left: 104px !important; top: 250px !important; rotate: -1.5deg !important; z-index: 0 !important; }
#connect .hp-tile.abx:has(> .ab.hpn-tools-panel) { aspect-ratio: 366 / 546 !important; height: auto !important; max-height: 604.6px !important; background: var(--c-soft) !important; }
#connect .ab.hpn-tools-panel { width: 600px !important; height: 600px !important; overflow: hidden !important; --mo-s: 0.97; transform: scale(var(--mo-s)) translate(-74px, -52px) !important; }
@supports (width: calc(1px * tan(atan2(100cqw, 600px)))) { #connect .ab.hpn-tools-panel { --tile-w: 100cqw; --mo-s: min(1.1, tan(atan2(var(--tile-w), 366px))); transform: scale(var(--mo-s)) translate(calc(-74px + max(0px, (100cqw / var(--mo-s) - 366px) / 2)), -52px) !important; } }
#connect .ab.hpn-tools-panel > span.mono { display: none !important; }
#connect .ab.hpn-tools-panel > div.tp-card { width: 330px !important; }
#s-final .hp-tile.abx:has(> .ab.pf3.pf3-rain) { aspect-ratio: 396 / 746 !important; height: auto !important; max-height: 750px !important; background: var(--c-hero) !important; }
#s-final .ab.pf3.pf3-rain { width: 600px !important; height: 748px !important; overflow: hidden !important; --mo-s: 0.89; transform: scale(var(--mo-s)) translate(-2px, -2px) !important; }
@supports (width: calc(1px * tan(atan2(100cqw, 600px)))) { #s-final .ab.pf3.pf3-rain { --tile-w: 100cqw; --mo-s: min(1, tan(atan2(var(--tile-w), 396px))); transform: scale(var(--mo-s)) translate(calc(-2px + max(0px, (100cqw / var(--mo-s) - 396px) / 2)), -2px) !important; } }
#s-final .ab.pf3.pf3-rain > div.pf3-pan.pf3-pan--rain { width: 360px !important; height: 250px !important; }
#s-final .ab.pf3.pf3-rain > div.pf3-pan.pf3-pan--rain > span.pf3-ch,
#s-final .ab.pf3.pf3-rain > div.pf3-mm > span.pf3-mmh { font-size: 13px !important; }
#s-final .ab.pf3.pf3-rain > div.pf3-pan.pf3-pan--rain > picture > img.hp-spud-img.pf3-sp { left: 24px !important; top: 96px !important; width: 130px !important; height: 130px !important; }
#s-final .ab.pf3.pf3-rain > div.pf3-pan.pf3-pan--rain > span.pf3-bub.pf3-bub--l { left: 150px !important; top: 110px !important; font-size: 19px !important; }
#s-final .ab.pf3.pf3-rain > div.pf3-pan.pf3-pan--rain > div.pf3-ph,
#s-final .ab.pf3.pf3-rain > div.pf3-pan.pf3-pan--sun > picture:nth-child(6),
#s-final .ab.pf3.pf3-rain > div.pf3-pan.pf3-pan--sun > picture:nth-child(7),
#s-final .ab.pf3.pf3-rain > div.pf3-pan.pf3-pan--sun > picture:nth-child(11) { display: none !important; }
#s-final .ab.pf3.pf3-rain > div.pf3-pan.pf3-pan--sun { top: 370px !important; width: 360px !important; height: 360px !important; }
#s-final .ab.pf3.pf3-rain > div.pf3-pan.pf3-pan--sun > span.pf3-ch.pf3-ch--sun { top: 36px !important; font-size: 13px !important; }
#s-final .ab.pf3.pf3-rain > div.pf3-pan.pf3-pan--sun > span.pf3-tg:nth-child(3) { top: 80px !important; font-size: 16px !important; }
#s-final .ab.pf3.pf3-rain > div.pf3-pan.pf3-pan--sun > span.pf3-tg:nth-child(4) { left: 156px !important; top: 74px !important; font-size: 16px !important; }
#s-final .ab.pf3.pf3-rain > div.pf3-pan.pf3-pan--sun > span.pf3-tg:nth-child(5) { left: 16px !important; top: 128px !important; font-size: 16px !important; }
#s-final .ab.pf3.pf3-rain > div.pf3-pan.pf3-pan--sun > picture:nth-child(8) > img.hp-spud-img.pf3-sp { left: 110px !important; top: 200px !important; width: 140px !important; height: 140px !important; }
#s-final .ab.pf3.pf3-rain > div.pf3-pan.pf3-pan--sun > picture:nth-child(9) > img.hp-spud-img.pf3-sp { left: 22px !important; top: 238px !important; width: 96px !important; height: 96px !important; }
#s-final .ab.pf3.pf3-rain > div.pf3-pan.pf3-pan--sun > picture:nth-child(10) > img.hp-spud-img.pf3-sp { left: 244px !important; top: 238px !important; width: 96px !important; height: 96px !important; }
#s-final .ab.pf3.pf3-rain > div.pf3-mm { left: 20px !important; top: 240px !important; width: 360px !important; height: auto !important; z-index: 4 !important; }
#s-final .ab.pf3.pf3-rain > div.pf3-mm > span.pf3-mmc:nth-child(2),
#s-final .ab.pf3.pf3-rain > div.pf3-mm > span.pf3-mmc:nth-child(3),
#s-final .ab.pf3.pf3-rain > div.pf3-mm > span.pf3-mmc:nth-child(4) { font-size: 16px !important; padding-top: 7px !important; padding-right: 12px !important; padding-bottom: 7px !important; padding-left: 12px !important; }
}