body.post-page {
padding-bottom:96px
}

.post-page-main {
margin:0 auto;
max-width:100%;
width:100%
}

.mockScale {
position:relative;
width:100%
}

.mockPost {
background:transparent;
border:0;
border-radius:0;
box-shadow:none;
overflow:visible;
width:100%
}

.mockPost__head {
border-bottom:1px solid #1011140f;
padding:18px 22px 14px
}

.mockBreadcrumbs {
align-items:baseline;
color:#10111499;
display:flex;
flex-wrap:wrap;
font-size:13px;
font-weight:700;
gap:8px;
letter-spacing:.06em;
text-transform:uppercase
}

.mockBreadcrumbs a {
color:inherit;
text-decoration:none
}

.mockBreadcrumbs a:hover {
color:var(--accent);
text-decoration:underline;
text-decoration-color:#4e2a4f59;
text-underline-offset:.2em
}

.mockTitle {
font-size:34px;
font-weight:400;
letter-spacing:-.03em;
line-height:1.12;
margin:10px 0 8px
}

.mockMeta {
color:#1011148f;
font-size:14px;
margin:0
}

.mockHubs {
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:10px
}

.mockTag {
align-items:center;
background:#4e2a4f14;
border:1px solid #4e2a4f24;
border-radius:999px;
color:#4e2a4fe6;
display:inline-flex;
font-size:13px;
font-weight:700;
gap:6px;
padding:6px 10px;
text-decoration:none
}

.mockTag:hover {
background:#4e2a4f1f;
border-color:#4e2a4f47
}

.mockBody {
color:#101114bd;
font-size:16.5px;
line-height:1.68;
padding:18px 22px 22px
}

.mockBody > .post-rt:first-child > :first-child {
margin-top:0
}

.mockBody p,.mockBody .post-rt p {
margin:0 0 10px
}

.mockBody .post-rt h2,.mockBody .post-rt h3,.mockBody .post-rt h4 {
color:var(--ink);
font-weight:800;
letter-spacing:-.02em;
line-height:1.15;
margin:1.35em 0 .45em
}

.mockBody .post-rt h2 {
font-size:1.45rem
}

.mockBody .post-rt h3 {
font-size:1.2rem
}

.mockBody .post-rt h4 {
font-size:1.05rem
}

.mockBody .post-rt ul,.mockBody .post-rt ol {
margin:0 0 12px;
padding-left:1.25em
}

.mockBody .post-rt li {
margin:.28em 0
}

.mockBody .post-rt a {
color:#101114d1;
font-weight:600;
text-decoration:underline;
text-decoration-color:#10111438;
text-underline-offset:.2em
}

.mockBody .post-rt a:hover {
color:var(--accent);
text-decoration-color:var(--accent)
}

.mockBody .post-rt hr {
background:var(--line);
border:0;
height:1px;
margin:1.5rem 0
}

.mockBody .post-rt strong,.mockBody .post-rt-bold {
color:var(--ink);
font-weight:700
}

.mockBody .post-rt code {
background:#4e2a4f0f;
border:1px solid #4e2a4f1f;
border-radius:.35em;
font-family:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;
font-size:.88em;
padding:.1em .38em
}

.mockBody .post-rt-pre {
background:#141518;
border:1px solid #ffffff0f;
border-radius:16px;
color:#e8eaef;
font-size:.84rem;
line-height:1.55;
margin:1.25rem 0;
overflow:auto;
padding:1rem 1.15rem
}

.mockBody .post-rt-pre code {
background:transparent;
border:0;
color:inherit;
padding:0
}

.mockBody .post-rt-blockquote {
border-image:linear-gradient(180deg,var(--accent),var(--accent-2)) 1;
border-left:3px solid transparent;
color:var(--muted);
font-style:italic;
margin:1.25rem 0;
padding:.25rem 0 .25rem 1.15rem
}

.mockBody .post-rt-hashtag {
color:var(--accent);
font-weight:700
}

.mockBody .post-rt-spoiler {
cursor:pointer;
filter:blur(5px);
transition:filter .2s ease
}

.mockBody .post-rt-spoiler:hover {
filter:none
}

.mockSubhead {
color:#1011149e;
font-size:12px;
font-weight:900;
letter-spacing:.1em;
margin:16px 0 8px;
text-transform:uppercase
}

.mockFigure {
background:#ffffff94;
border-radius:22px;
margin:14px 0 16px
}

.mockFigure__media {
border:1px solid #10111414;
border-radius:18px;
display:block;
height:auto;
width:100%
}

.mockFigure__video {
background:#0d0c0b;
border:1px solid #10111414;
border-radius:18px;
display:block;
width:100%
}

.mockFigure__cap {
color:#1011148f;
font-family:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;
font-size:12px;
line-height:1.35;
margin:10px 0 0
}

.mockList {
color:#101114b8;
font-size:15px;
line-height:1.55;
margin:0;
padding-left:1.1em
}

.mockList li {
margin:.3em 0
}

.mockInline,.mockBodyPlain {
color:#101114ad;
font-size:15px;
line-height:1.6;
margin:0 0 10px
}

.mockMuted {
color:#1011148f
}

.mockBodyLink {
color:#101114d1;
font-weight:600;
word-break:break-all
}

.mockLinks {
display:grid;
gap:8px;
list-style:none;
margin:0;
padding:0
}

.mockLinks a {
color:#101114d1;
display:inline;
font-weight:600;
text-decoration:underline;
text-decoration-color:#1011142e;
text-underline-offset:.2em
}

.mockLinks span {
color:#10111499;
display:block;
font-size:14px;
margin-top:2px
}

.mockBlock {
position:relative
}

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

.post-skip:focus {
background:#fff;
border-radius:12px;
box-shadow:0 0 0 2px #4e2a4f59;
clip:auto;
color:var(--accent);
font-size:.875rem;
font-weight:700;
height:auto;
left:12px;
margin:0;
overflow:visible;
padding:.5rem .85rem;
position:fixed;
top:12px;
width:auto;
z-index:50
}

.post-page-foot {
align-items:center;
color:#10111480;
display:flex;
flex-wrap:wrap;
font-size:13px;
font-weight:600;
gap:.35rem .65rem;
letter-spacing:.06em;
margin:1.25rem auto 0;
max-width:min(980px,calc(100% - 10px));
padding:0 4px;
text-transform:uppercase
}

.post-page-foot a {
color:var(--accent);
text-decoration:none
}

.post-page-foot a:hover {
text-decoration:underline;
text-decoration-color:#4e2a4f59;
text-underline-offset:.18em
}

.post-page-foot__sep {
opacity:.45
}

@media (max-width: 900px) {
.hero-mock__body {
padding:14px 14px 12px
}

.mockPost__head {
padding:14px 16px 12px
}

.mockBody {
font-size:16px;
padding:14px 16px 18px
}
}

.tldr {
padding:18px 22px 14px
}

.tldr-list {
list-style:disc;
margin:0;
padding-left:1.25em
}

.tldr-list li+li {
margin-top:.35em
}

.post-sticky-cta {
bottom:18px;
position:fixed;
right:18px;
width:min(360px,calc(100vw - 28px));
z-index:40
}

.post-sticky-cta__card {
align-items:center;
backdrop-filter:blur(10px);
background:#ffffffd9;
border:1px solid #1011141a;
border-radius:18px;
box-shadow:0 18px 55px #1011142e;
display:flex;
gap:14px;
justify-content:space-between;
padding:14px 14px 12px
}

.post-sticky-cta__copy {
min-width:0
}

.post-sticky-cta__title {
font-weight:900;
letter-spacing:.02em;
margin:0
}

.post-sticky-cta__subtitle {
color:#1011149e;
font-size:13px;
line-height:1.25;
margin:4px 0 0
}

.post-sticky-cta__actions {
display:flex;
flex:0 0 auto;
flex-direction:column;
gap:8px
}

.post-sticky-cta__primary,.post-sticky-cta__secondary {
align-items:center;
border-radius:14px;
display:inline-flex;
font-weight:800;
gap:8px;
height:42px;
justify-content:center;
letter-spacing:.02em;
padding:0 14px;
text-decoration:none;
white-space:nowrap
}

.post-sticky-cta__primary {
background:var(--accent-gradient);
color:#fff
}

.post-sticky-cta__primary:hover {
filter:brightness(1.03)
}

.post-sticky-cta__secondary {
background:#4e2a4f14;
border:1px solid #4e2a4f29;
color:#4e2a4fe6
}

.post-sticky-cta__secondary:hover {
background:#4e2a4f1f;
border-color:#4e2a4f42
}

.post-inline-cta {
display:none;
padding:0 22px 22px
}

.post-inline-cta--visible {
display:block;
padding:0 22px 22px
}

.post-inline-cta__card {
align-items:center;
background:#ffffffb8;
border:1px solid #1011141a;
border-radius:22px;
box-shadow:0 16px 45px #1011141f;
display:flex;
gap:16px;
justify-content:space-between;
padding:16px 18px
}

.post-inline-cta__copy {
min-width:0
}

.post-inline-cta__title {
font-size:18px;
font-weight:900;
letter-spacing:-.01em;
margin:0 0 6px
}

.post-inline-cta__subtitle {
color:#1011149e;
font-size:14px;
line-height:1.4;
margin:0 0 12px
}

.post-inline-cta__actions {
display:flex;
flex:0 0 auto;
flex-direction:column;
gap:10px
}

.post-inline-cta__actions > a {
box-sizing:border-box;
width:100%
}

.post-inline-cta__primary,.post-inline-cta__secondary {
align-items:center;
border-radius:16px;
display:inline-flex;
height:44px;
justify-content:center;
letter-spacing:.02em;
padding:0 16px;
text-decoration:none;
white-space:nowrap
}

.post-inline-cta__actions .pager-btn {
width:100%
}

.post-inline-cta__secondary {
background:#1011140f;
border:1px solid #10111424;
color:#101114e0;
gap:12px
}

.post-inline-cta__secondary:visited {
color:#101114e0
}

.post-inline-cta__secondary:hover {
background:#1011141a;
border-color:#10111438;
color:var(--ink)
}

.post-inline-cta__secondary:focus-visible {
outline:2px solid #10111459;
outline-offset:2px
}

.post-inline-cta__tg {
align-items:center;
color:inherit;
display:inline-flex;
flex-shrink:0;
justify-content:center;
line-height:0
}

.post-inline-cta__tg svg {
display:block
}

.post-end-sentinel {
height:1px
}

.post-page--cta-inline .post-inline-cta[data-post-inline-cta] {
display:block
}

.post-page--at-end .post-sticky-cta {
opacity:0;
pointer-events:none;
transform:translateY(8px)
}

.post-page--at-end .post-inline-cta[data-post-inline-cta] {
display:block
}

.post-cta-modal {
align-items:center;
display:none;
inset:0;
justify-content:center;
padding:clamp(14px,4vw,28px);
position:fixed;
z-index:50
}

.post-cta-modal:not([hidden]) {
display:flex
}

.post-cta-modal__backdrop {
background:#10111459;
border:0;
cursor:pointer;
inset:0;
margin:0;
padding:0;
position:absolute
}

.post-cta-modal__dialog {
margin:0 auto;
max-width:min(440px,calc(100vw - 28px));
position:relative;
width:100%;
z-index:1
}

.post-cta-modal__close {
align-items:center;
background:#ffffffe6;
border:1px solid #10111424;
border-radius:999px;
color:#101114b8;
cursor:pointer;
display:inline-flex;
font-size:22px;
height:36px;
justify-content:center;
line-height:1;
padding:0;
position:absolute;
right:-6px;
top:-10px;
width:36px;
z-index:2
}

.post-cta-modal__close:hover {
background:#fff;
color:var(--ink)
}

.post-inline-cta--modal {
display:block;
padding:0;
width:100%
}

.post-inline-cta--modal .post-inline-cta__card {
align-items:stretch;
flex-direction:column
}

.post-inline-cta--modal .post-inline-cta__copy {
flex:1 1 auto;
min-width:0;
width:100%
}

.post-inline-cta--modal .post-inline-cta__subtitle {
margin-bottom:0
}

.post-inline-cta--modal .post-inline-cta__actions {
width:100%
}

.post-inline-cta--modal .post-inline-cta__primary {
text-align:center;
white-space:normal;
width:100%
}

.post-page--cta-modal-open {
overflow:hidden
}

.post-page--at-end .post-cta-modal {
display:none!important
}

@media (max-width: 720px) {
body.post-page {
padding-bottom:116px
}

.post-sticky-cta {
bottom:14px;
left:14px;
right:14px;
width:auto
}

.post-sticky-cta__card {
flex-wrap:wrap
}

.post-sticky-cta__actions {
flex-direction:row;
width:100%
}

.post-inline-cta {
padding:0 16px 18px
}

.post-inline-cta__card {
align-items:stretch;
flex-direction:column
}

.post-inline-cta__actions {
width:100%
}
}