.tsst {
--tsst-gap: 32px;
--tsst-rm-h: 220px;
--tsst-fade-h: 90px;
--tsst-fade-color: #fff;
--tsst-hl: rgba(255, 210, 0, .5);
--tsst-hl-h: 100%;
--tsst-g1: #6a5cff;
--tsst-g2: #ff4f8b;
--tsst-gangle: 90deg;
--tsst-prog-color: #6a5cff;
--tsst-prog-track: transparent;
--tsst-prog-h: 4px;
--tsst-toc-w: 240px;
--tsst-toc-top: 24px;
--tsst-toc-active: #6a5cff;
--tsst-tip-bg: #111318;
--tsst-tip-color: #fff;
--tsst-scroll-offset: 80px;
position: relative;
}
.tsst-sr {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} .tsst-layout {
display: flex;
flex-direction: column;
gap: var(--tsst-gap);
}
.tsst-main {
min-width: 0;
width: 100%;
}
@media (min-width: 1025px) {
.tsst-toc-left .tsst-layout,
.tsst-toc-right .tsst-layout {
display: grid;
grid-template-columns: var(--tsst-toc-w) minmax(0, 1fr);
align-items: start;
}
.tsst-toc-right .tsst-layout {
grid-template-columns: minmax(0, 1fr) var(--tsst-toc-w);
}
.tsst-toc-right .tsst-toc {
order: 2;
}
.tsst-toc-left .tsst-toc,
.tsst-toc-right .tsst-toc {
position: sticky;
top: var(--tsst-toc-top);
max-height: calc(100vh - var(--tsst-toc-top) - 24px);
overflow: auto;
}
.admin-bar .tsst-toc-left .tsst-toc,
.admin-bar .tsst-toc-right .tsst-toc {
top: calc(var(--tsst-toc-top) + 32px);
}
}
.tsst.tsst-toc-empty .tsst-layout {
display: block;
} .tsst-content {
overflow-wrap: break-word;
}
.tsst-content > :first-child {
margin-top: 0;
}
.tsst-content > :last-child {
margin-bottom: 0;
}
.tsst-content img {
max-width: 100%;
height: auto;
}
.tsst-content :is(h1, h2, h3, h4, h5, h6) {
scroll-margin-top: var(--tsst-scroll-offset);
break-after: avoid;
break-inside: avoid;
}
.tsst-content :is(h1, h2, h3, h4, h5, h6):focus {
outline: none;
}
.tsst-content :is(figure, blockquote, pre, table, img) {
break-inside: avoid;
} .tsst-dropcap .tsst-content > p:first-of-type {
display: flow-root; }
.tsst-dropcap .tsst-content > p:first-of-type::first-letter {
float: left;
font-size: 3.6em;
line-height: .85;
font-weight: 700;
margin: .06em .12em 0 0;
} .tsst-grad-headings .tsst-content :is(h1, h2, h3, h4, h5, h6),
.tsst-grad-bold .tsst-content :is(strong, b),
.tsst-grad-all .tsst-content {
background-image: linear-gradient(var(--tsst-gangle), var(--tsst-g1), var(--tsst-g2));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
} .tsst-content mark {
color: inherit;
background-color: transparent;
padding: 0 .12em;
border-radius: .15em;
background-image: linear-gradient(var(--tsst-hl), var(--tsst-hl));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% var(--tsst-hl-h);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.tsst-hl-marker {
--tsst-hl-h: 42%;
}
.tsst-hl-underline {
--tsst-hl-h: .14em;
}
.tsst-hl-underline .tsst-content mark {
border-radius: 0;
padding: 0;
}
.tsst-hl-animate .tsst-content mark {
background-size: 0% var(--tsst-hl-h);
transition: background-size .9s cubic-bezier(.25, .8, .25, 1);
}
.tsst-hl-animate .tsst-content mark.is-inview {
background-size: 100% var(--tsst-hl-h);
} .tsst-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 20px;
font-size: .875em;
}
.tsst-readtime {
display: inline-flex;
align-items: center;
gap: 6px;
opacity: .85;
}
.tsst-readtime svg {
width: 1.1em;
height: 1.1em;
flex: none;
}
.tsst-actions {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
}
.tsst button.tsst-btn {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 6px 14px;
min-height: 34px;
border: 1px solid rgba(127, 127, 127, .35);
border-radius: 999px;
background: transparent;
color: inherit;
font: inherit;
font-size: inherit;
line-height: 1.2;
text-transform: none;
letter-spacing: normal;
box-shadow: none;
cursor: pointer;
transition: background-color .2s, color .2s, border-color .2s, transform .15s;
}
.tsst button.tsst-btn:hover {
background-color: rgba(127, 127, 127, .1);
}
.tsst button.tsst-btn:active {
transform: scale(.96);
}
.tsst button.tsst-btn:focus-visible,
.tsst button.tsst-readmore:focus-visible,
.tsst button.tsst-toc-toggle:focus-visible,
.tsst-toc-list a:focus-visible {
outline: 2px solid var(--tsst-g1);
outline-offset: 2px;
}
.tsst button.tsst-btn[hidden] {
display: none !important;
}
.tsst-btn svg {
width: 1.05em;
height: 1.05em;
flex: none;
}
.tsst-btn .tsst-ico-alt {
display: none;
}
.tsst-btn.is-active .tsst-ico-main,
.tsst-btn.is-done .tsst-ico-main {
display: none;
}
.tsst-btn.is-active .tsst-ico-alt,
.tsst-btn.is-done .tsst-ico-alt {
display: inline;
}
.tsst-icons-only button.tsst-btn {
padding: 6px;
width: 34px;
justify-content: center;
}
.tsst-icons-only .tsst-btn-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
} .tsst-rm-enabled .tsst-body {
position: relative;
overflow: hidden;
max-height: var(--tsst-rm-h);
transition: max-height .55s cubic-bezier(.4, 0, .2, 1);
}
.tsst-fade {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: var(--tsst-fade-h);
background: linear-gradient(to bottom, transparent, var(--tsst-fade-color));
pointer-events: none;
transition: opacity .35s;
}
.tsst.is-expanded .tsst-fade {
opacity: 0;
}
.tsst-rm-enabled.tsst-rm-short .tsst-body {
max-height: none;
}
.tsst-rm-short .tsst-fade,
.tsst-rm-short .tsst-readmore-wrap {
display: none;
}
.tsst-readmore-wrap {
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
.tsst button.tsst-readmore {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: var(--tsst-rm-btn-w, auto);
margin: 0;
padding: 10px 20px;
border: 1px solid rgba(127, 127, 127, .35);
border-radius: 999px;
background: transparent;
color: inherit;
font: inherit;
font-weight: 600;
line-height: 1.2;
text-transform: none;
box-shadow: none;
cursor: pointer;
transition: background-color .2s, color .2s, border-color .2s;
}
.tsst button.tsst-readmore:hover {
background-color: rgba(127, 127, 127, .1);
}
.tsst-readmore svg {
width: 1em;
height: 1em;
transition: transform .3s;
}
.tsst.is-expanded .tsst-readmore svg {
transform: rotate(180deg);
} .tsst-toc {
padding: 18px 20px;
border: 1px solid rgba(127, 127, 127, .22);
border-radius: 12px;
background: rgba(127, 127, 127, .04);
font-size: .92em;
}
.tsst-toc[hidden] {
display: none;
}
.tsst-toc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.tsst-toc-title {
font-weight: 700;
}
.tsst button.tsst-toc-toggle {
display: inline-flex;
margin: 0;
padding: 4px;
border: 0;
border-radius: 6px;
background: transparent;
color: inherit;
line-height: 0;
box-shadow: none;
cursor: pointer;
}
.tsst button.tsst-toc-toggle:hover {
background: rgba(127, 127, 127, .12);
}
.tsst-toc-toggle svg {
width: 18px;
height: 18px;
transition: transform .25s;
}
.tsst-toc-toggle[aria-expanded="false"] svg {
transform: rotate(-90deg);
}
.tsst .tsst-toc-list {
list-style: none;
margin: 12px 0 0;
padding: 0;
}
.tsst .tsst-toc-list[hidden] {
display: none;
}
.tsst .tsst-toc-list li {
margin: 0;
padding: 0;
}
.tsst .tsst-toc-list li::before {
content: none;
}
.tsst-toc-list a {
display: block;
padding: 5px 8px 5px calc(12px + var(--lvl, 0) * 14px);
border-left: 2px solid rgba(127, 127, 127, .2);
color: inherit;
text-decoration: none;
opacity: .78;
transition: opacity .2s, color .2s, border-color .2s;
}
.tsst-toc-list a:hover {
opacity: 1;
}
.tsst-toc-list a.is-active {
opacity: 1;
border-left-color: var(--tsst-toc-active);
color: var(--tsst-toc-active);
font-weight: 600;
} .tsst-progress {
position: fixed;
left: 0;
right: 0;
top: 0;
height: var(--tsst-prog-h);
background: var(--tsst-prog-track);
z-index: 99999;
pointer-events: none;
}
.tsst-progress--bottom {
top: auto;
bottom: 0;
}
.admin-bar .tsst-progress--top {
top: 32px;
}
@media (max-width: 782px) {
.admin-bar .tsst-progress--top {
top: 46px;
}
}
.tsst-progress-bar {
display: block;
width: 100%;
height: 100%;
background: var(--tsst-prog-color);
transform: scaleX(0);
transform-origin: 0 50%;
will-change: transform;
} .tsst-share-tip {
position: absolute;
z-index: 100000;
display: flex;
gap: 2px;
padding: 4px;
border-radius: 10px;
background: var(--tsst-tip-bg, #111318);
color: var(--tsst-tip-color, #fff);
box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
opacity: 0;
pointer-events: none;
transform: translate(-50%, -100%) translateY(-6px) scale(.96);
transition: opacity .15s, transform .15s;
}
.tsst-share-tip.is-below {
transform: translate(-50%, 0) translateY(6px) scale(.96);
}
.tsst-share-tip.is-visible {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -100%) translateY(-10px);
}
.tsst-share-tip.is-below.is-visible {
transform: translate(-50%, 0) translateY(10px);
}
.tsst-share-tip::after {
content: "";
position: absolute;
left: 50%;
bottom: -5px;
width: 10px;
height: 10px;
background: inherit;
transform: translateX(-50%) rotate(45deg);
}
.tsst-share-tip.is-below::after {
top: -5px;
bottom: auto;
}
.tsst-share-tip button.tsst-tip-btn {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin: 0;
padding: 0;
border: 0;
border-radius: 7px;
background: transparent;
color: inherit;
box-shadow: none;
cursor: pointer;
transition: background-color .15s;
}
.tsst-share-tip button.tsst-tip-btn:hover,
.tsst-share-tip button.tsst-tip-btn:focus-visible {
background: rgba(255, 255, 255, .16);
outline: none;
}
.tsst-share-tip svg {
width: 16px;
height: 16px;
} @media (prefers-reduced-motion: reduce) {
.tsst *,
.tsst-share-tip {
transition: none !important;
}
.tsst-hl-animate .tsst-content mark {
background-size: 100% var(--tsst-hl-h);
}
}