:root {
--color-accent-foreground: #fff;
--color-contrast: #000;
--color-background: #fff;
--color-background-100: #fbfbfb;
--color-background-200: #f5f5f5;
--color-background-300: #eaeaea;
--color-background-400: #dbdbdb;
--color-grey-translucent: hsla(0, 0%, 90%, 0.5);
--color-foreground: #464646;
--color-secondary: #646464;
--color-mute: #a8a8a8;
--color-border: hsla(0, 0%, 40%, 0.15);
--color-success: #348f3f;
--color-error: #ff4c4c;
--color-white: #fff;
--color-black: #000;
--font-family-headings: var(--gh-font-heading, "Geist", sans-serif);
--font-family-body: var(--gh-font-body, "Geist", sans-serif);
--font-family-button: var(--gh-font-body, "Geist", sans-serif);
--font-large: 1.125rem;
--font-medium: 0.9375rem;
--font-small: 0.8125rem;
--font-x-small: 0.6875rem;
--font-h1: 1.0625rem;
--font-h2: 1rem;
--font-h3: 0.9375rem;
--font-h4: 0.875rem;
--font-h5: 0.8125rem;
--font-h6: 0.75rem;
--font-weight-light: 400;
--font-weight-regular: 450;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--spacing-1: 0.125rem;
--spacing-2: 0.25rem;
--spacing-3: 0.375rem;
--spacing-4: 0.5rem;
--spacing-5: 0.625rem;
--spacing-6: 0.75rem;
--spacing-7: 1rem;
--spacing-8: 1.25rem;
--spacing-9: 1.875rem;
--spacing-10: 2.5rem;
--vertical-rhythm: 0.75rem;
--radius-1: 0.375rem;
--radius-2: 0.5rem;
--radius-3: 1rem;
--layout--width: 1240px;
--layout--gap: 1.25rem;
--featured-image--aspect-ratio: 16/9;
--avatar--size: 2.5rem;
--avatar--font-size: var(--font-medium);
--avatar--color: var(--color-secondary);
--avatar--background-color: var(--color-background-300);
--avatar-hover--background-color: var(--color-background-400);
--button--padding-v: 0.625rem;
--button--padding-h: 1rem;
--button--min-width: auto;
--button--min-height: 2.25rem;
--button--font-size: var(--font-medium);
--button--font-weight: var(--font-weight-medium);
--button--line-height: 1;
--button--border-radius: 2rem;
--button--color: var(--color-accent-foreground);
--button--background-color: var(--ghost-accent-color);
--button--opacity: 1;
--button--transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
--button-hover--color: var(--color-accent-foreground);
--button-hover--background-color: var(--ghost-accent-color);
--button-hover--opacity: 0.9;
--button-sm--padding-v: 0.5rem;
--button-sm--padding-h: 0.75rem;
--button-sm--min-height: 1.875rem;
--button-sm--font-size: var(--font-small);
--button-xs--padding-v: 0.375rem;
--button-xs--padding-h: 0.625rem;
--button-xs--min-height: 1.625rem;
--button-xs--font-size: var(--font-x-small);
--navigation-sidebar--font-size: var(--font-large);
--navigation-sidebar--gap: var(--spacing-2);
--navigation-sidebar--link--padding-v: var(--spacing-5);
--navigation-sidebar--link--padding-h: var(--spacing-6);
--navigation-sidebar--link--gap: var(--spacing-6);
--navigation-sidebar--icon--size: 1.5rem;
--csstools-color-scheme--light: initial;
color-scheme: light;
}
:root[data-color-scheme="dark"] {
--ghost-accent-color: var(--color-dark-accent, var(--color-accent));
--color-accent-foreground: var(--color-dark-accent-foreground, #fff);
--color-contrast: #fff;
--color-background: #1f2023;
--color-background-100: #2b2c30;
--color-background-200: #2f3035;
--color-background-300: #38383d;
--color-background-400: #404046;
--color-grey-translucent: rgba(81, 84, 92, 0.5);
--color-foreground: #c7cbd5;
--color-secondary: #9295a0;
--color-mute: #777a88;
--color-border: hsla(235, 6%, 60%, 0.4);
--csstools-color-scheme--light: ;
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
:root[data-color-scheme="system"] {
--ghost-accent-color: var(--color-dark-accent, var(--color-accent));
--color-accent-foreground: var(--color-dark-accent-foreground, #fff);
--color-contrast: #fff;
--color-background: #1f2023;
--color-background-100: #2b2c30;
--color-background-200: #2f3035;
--color-background-300: #38383d;
--color-background-400: #404046;
--color-grey-translucent: rgba(81, 84, 92, 0.5);
--color-foreground: #c7cbd5;
--color-secondary: #9295a0;
--color-mute: #777a88;
--color-border: hsla(235, 6%, 60%, 0.4);
--csstools-color-scheme--light: ;
color-scheme: dark;
}
}
@media (max-width: 539px) {
:root {
--layout--gap: var(--spacing-7);
}
}
*,
:after,
:before {
box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
:where(svg:not([stroke]):not([fill]):has(> :not([stroke]):not([fill]))) {
fill: currentcolor;
}
body {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-synthesis-weight: none;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}
img {
display: block;
height: auto;
max-width: 100%;
}
p {
margin-bottom: var(--vertical-rhythm);
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
button,
input,
select,
textarea {
font: inherit;
}
hr {
border: 0;
border-top: 1px solid var(--color-border);
color: var(--color-border);
margin: calc(var(--spacing-8) + var(--spacing-1)) 0;
opacity: 1;
}
abbr[title] {
cursor: help;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
}
address {
font-style: normal;
line-height: inherit;
}
ol,
ul {
padding-left: 2rem;
}
dt {
font-weight: var(--font-weight-regular);
}
dd {
margin-left: 0;
}
b,
strong {
font-weight: var(--font-weight-semibold);
}
small,
sub,
sup {
font-size: var(--font-small);
}
sub,
sup {
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
code,
kbd,
pre,
samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
font-size: 1em;
}
pre {
display: block;
overflow: auto;
}
pre code {
color: inherit;
font-size: inherit;
word-break: normal;
}
code {
word-wrap: break-word;
}
a > code {
color: inherit;
}
kbd {
background-color: var(--color-contrast);
border-radius: 4px;
color: var(--color-background);
font-size: 0.875em;
padding: 0.1875rem 0.375rem;
}
kbd kbd {
font-size: 1em;
font-weight: var(--font-weight-regular);
padding: 0;
}
img,
svg {
vertical-align: middle;
}
table {
caption-side: bottom;
}
caption {
color: var(--color-secondary);
padding-bottom: 0.5rem;
padding-top: 0.5rem;
text-align: left;
}
th {
font-weight: var(--font-weight-medium);
text-align: inherit;
text-align: -webkit-match-parent;
}
tbody,
td,
tfoot,
th,
thead,
tr {
border: 0 solid;
border-color: inherit;
}
label {
display: inline-block;
}
button {
border-radius: 0;
}
button:focus:not(:focus-visible) {
outline: 0;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
margin: 0;
}
button,
select {
text-transform: none;
}
[role="button"] {
cursor: pointer;
}
select {
word-wrap: normal;
}
select:disabled {
opacity: 1;
}
[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
display: none !important;
}
[type="button"],
[type="file"]::file-selector-button,
[type="reset"],
[type="submit"],
button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
color: inherit;
}
[type="button"]:not(:disabled),
[type="file"]::file-selector-button:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
cursor: pointer;
}
::-moz-focus-inner {
border-style: none;
padding: 0;
}
textarea {
resize: vertical;
}
fieldset {
border: 0;
margin: 0;
min-width: 0;
padding: 0;
}
legend {
float: left;
font-size: 1rem;
font-weight: var(--font-weight-medium);
line-height: inherit;
margin-bottom: 0.5rem;
padding: 0;
width: 100%;
}
legend + * {
clear: left;
}
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-year-field {
padding: 0;
}
::-webkit-inner-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
outline-offset: -2px;
}
::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
::-webkit-color-swatch-wrapper {
padding: 0;
}
::file-selector-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
font: inherit;
}
output {
display: inline-block;
}
iframe {
border: 0;
display: block;
}
summary {
cursor: pointer;
display: list-item;
}
progress {
vertical-align: baseline;
}
[hidden] {
display: none !important;
}
html {
height: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: var(--color-background);
color: var(--color-foreground);
display: flex;
flex-wrap: wrap;
font-family: var(--font-family-body);
font-size: 16px;
font-style: normal;
font-weight: var(--font-weight-regular);
line-height: 1.5;
margin: 0;
min-height: 100%;
word-break: break-word;
}
body[style*="overflow: hidden"] {
padding-right: var(--scrollbar-width, 0);
}
img {
position: relative;
}
img:before {
background-color: var(--color-background-300);
content: "";
}
img:after,
img:before {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
img:after {
align-items: center;
color: var(--color-foreground);
content: attr(alt);
display: flex;
justify-content: center;
padding: var(--spacing-7);
text-align: center;
}
img[data-letter]:after {
content: attr(data-letter);
padding: 0;
}
#announcement-bar-root {
flex: 0 0 100%;
}
#ghost-portal-root > iframe {
display: none;
}
.screen-reader-text {
border: 0;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px !important;
z-index: 99999;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-contrast);
margin: 0;
}
h1 {
font-size: var(--font-h1);
}
h1,
h2 {
font-family: var(--font-family-headings);
font-weight: var(--font-weight-semibold);
line-height: 1.3;
}
h2 {
font-size: var(--font-h2);
}
h3 {
font-size: var(--font-h3);
}
h3,
h4 {
font-family: var(--font-family-headings);
font-weight: var(--font-weight-semibold);
line-height: 1.3;
}
h4 {
font-size: var(--font-h4);
}
h5 {
font-size: var(--font-h5);
}
h5,
h6 {
font-family: var(--font-family-headings);
font-weight: var(--font-weight-semibold);
line-height: 1.3;
}
h6 {
font-size: var(--font-h6);
}
a {
color: var(--color-contrast);
}
a:hover {
color: var(--ghost-accent-color);
}
.post-content .kg-cta-sponsor-label a,
a {
-webkit-text-decoration: underline;
text-decoration: underline;
text-decoration-color: currentcolor;
text-decoration-thickness: 0.075em;
text-underline-offset: 0.15em;
transition: color 0.1s ease, text-decoration-color 0.1s ease;
}
.post-content .kg-cta-sponsor-label a:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
text-decoration-thickness: 0.075em;
}
.post-content .kg-cta-sponsor-label a:hover,
a:hover {
text-decoration-color: transparent;
}
figcaption {
color: var(--color-secondary);
font-size: var(--font-small);
margin-top: var(--spacing-4);
text-align: center;
}
blockquote {
color: var(--color-contrast);
padding: 0 0 0 var(--spacing-7);
position: relative;
z-index: 1;
}
blockquote:before {
background-color: currentcolor;
bottom: 0;
content: "";
left: 0;
position: absolute;
top: 0;
width: 2px;
}
.post-content :where(ul, ol) {
padding-left: 0;
}
.post-content :where(ul, ol) li + li,
.post-content :where(ul, ol) ol,
.post-content :where(ul, ol) ul {
margin-top: 0.5em;
}
.post-content :where(ul) {
list-style: none;
}
.post-content :where(ul) > li {
padding-left: var(--spacing-8);
position: relative;
}
.post-content :where(ul) > li:before {
background-color: currentcolor;
border-radius: 50%;
content: "";
height: 0.188rem;
left: 0.5rem;
position: absolute;
top: 0.575rem;
width: 0.188rem;
}
.post-content :where(ul) ul > li:before {
background-color: transparent;
border: 1px solid;
}
.post-content :where(ul) ul ul > li:before {
background-color: currentcolor;
border-radius: 0;
}
.post-content :where(ol) {
padding-left: var(--spacing-8);
}
.post-content :where(ol) > li::marker {
font-size: 0.938em;
font-weight: var(--font-weight-medium);
}
.post-content :where(ol) ol {
list-style: lower-alpha;
}
.post-content :where(ol) ol ol {
list-style: lower-roman;
}
b,
strong {
color: var(--color-contrast);
}
li > img,
p > img {
border-radius: var(--radius-2);
}
:not(pre) > code,
mark {
border-radius: var(--radius-1);
padding: var(--spacing-1) var(--spacing-3);
}
:not(pre) > code {
box-shadow: inset 0 0 0 1px var(--color-border);
font-size: 0.875em;
}
:not(pre) > code,
pre {
background-color: var(--color-background-200);
color: var(--color-contrast);
}
pre {
border: 1px solid var(--color-border);
border-radius: var(--radius-2);
clip-path: inset(0 round var(--radius-2));
font-size: var(--font-small);
max-height: 500px;
padding: var(--spacing-7) var(--spacing-8);
}
table {
border: 1px solid var(--color-border);
border-collapse: collapse;
border-spacing: 0;
font-size: 1em;
width: 100%;
word-break: normal;
}
table thead {
border-bottom: 1px solid var(--color-border);
color: var(--color-contrast);
font-weight: var(--font-weight-medium);
}
table tr + tr {
border-top: 1px solid var(--color-border);
}
table td,
table th {
padding: var(--spacing-5) var(--spacing-6);
}
table td + td,
table th + th {
border-left: 1px solid var(--color-border);
}
table tfoot {
border-top: 1px solid var(--color-border);
}
.responsive-table {
overflow-x: auto;
}
form {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: var(--spacing-6);
}
form > p {
margin-bottom: 0;
}
form .icon-check,
form .icon-loader {
display: none;
}
form.loading {
pointer-events: none;
}
form.loading .icon-arrow-right {
display: none;
}
form.loading .icon-loader {
display: block;
}
form.success .icon-arrow-right {
display: none;
}
form.success .icon-check,
label {
display: block;
}
label {
font-size: var(--font-medium);
}
.post-content .kg-signup-card-input,
form :where(input, select, textarea) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--color-background-200);
border: 1px solid var(--color-border);
border-radius: var(--radius-1);
color: var(--color-contrast);
display: block;
font-size: var(--font-medium);
height: auto;
min-height: 2.375rem;
padding: 0.4688rem 0.875rem;
width: 100%;
}
.post-content .kg-signup-card-input::-moz-placeholder,
form :where(input, select, textarea)::-moz-placeholder {
color: var(--color-secondary);
}
.post-content .kg-signup-card-input::placeholder,
form :where(input, select, textarea)::placeholder {
color: var(--color-secondary);
}
label + :where(input, select, textarea) {
margin-top: calc(var(--spacing-2) * -1);
}
form .button,
form button {
margin-top: var(--spacing-2);
}
select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
background-position: calc(100% - 10px) 50%;
background-repeat: no-repeat;
background-size: 10px;
cursor: pointer;
}
textarea {
height: 7rem;
}
[type="checkbox"] {
border-radius: 0.25rem;
}
[type="checkbox"]:before {
height: var(--font-x-small);
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: var(--font-x-small);
}
[type="radio"] {
border-radius: 50%;
}
[type="radio"]:before {
border-radius: 50%;
height: 0.375rem;
width: 0.375rem;
}
label:has([type="radio"]) + label:has([type="radio"]) {
margin-top: calc(var(--spacing-5) * -1);
}
[type="checkbox"],
[type="radio"] {
display: inline-block;
height: 1rem;
margin-right: var(--spacing-3);
min-height: auto;
outline-offset: 3px;
padding: 0;
position: relative;
transition: background-color 0.15s ease, border-color 0.15s ease;
vertical-align: -0.2em;
width: 1rem;
}
[type="checkbox"]:before,
[type="radio"]:before {
background-color: var(--color-background);
content: "";
left: 50%;
opacity: 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.15s ease;
}
[type="checkbox"]:checked,
[type="radio"]:checked {
background-color: var(--color-contrast);
border-color: var(--color-contrast);
}
[type="checkbox"]:checked:before,
[type="radio"]:checked:before {
opacity: 1;
}
[data-color-scheme="dark"] select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-opacity='.8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
[data-color-scheme="system"] select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-opacity='.8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}
}
@media (max-width: 539px) {
.post-content .kg-signup-card-input,
form :where(input, select, textarea) {
font-size: 1.025rem;
}
}
.form-alert {
font-size: var(--font-small);
margin-top: var(--spacing-2);
}
.form-alert,
.form-alert > span {
display: none;
}
.form-alert > .success {
color: var(--color-success);
}
.form-alert > .error {
color: var(--color-error);
}
form.error:has(.error) :where(.form-alert, .error),
form.loading:has(.loading) :where(.form-alert, .loading),
form.success:has(.success) :where(.form-alert, .success) {
display: block;
}
form.error .form-alert:has(.error:empty) {
display: none;
}
.avatar {
align-items: center;
background-color: var(--avatar--background-color);
border-radius: 50%;
color: var(--avatar--color);
display: flex;
font-size: var(--avatar--font-size);
font-weight: var(--font-weight-medium);
height: var(--avatar--size);
justify-content: center;
line-height: var(--avatar--size);
position: relative;
transition: transform 0.15s ease, background-color 0.15s ease;
width: var(--avatar--size);
will-change: transform;
z-index: 1;
}
.avatar img {
border-radius: 50%;
color: transparent;
height: 100%;
left: 0;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
.avatar[data-letter]:before {
bottom: 0;
content: attr(data-letter);
left: 0;
line-height: var(--avatar--size);
position: absolute;
right: 0;
text-align: center;
text-transform: uppercase;
top: 0;
z-index: -1;
}
.avatar-small {
--avatar--size: 18px;
--avatar--font-size: 0.625rem;
}
.avatar-author {
--avatar--size: 100px;
--avatar--font-size: 1rem;
}
a:hover > .avatar,
a[aria-expanded="true"] > .avatar,
button:hover > .avatar {
background-color: var(--avatar-hover--background-color);
transform: scale(1.03);
}
.button,
button[type="submit"] {
align-items: center;
background-color: var(--button--background-color);
border: 0;
border-radius: var(--button--border-radius);
color: var(--button--color);
cursor: pointer;
display: inline-flex;
font-family: var(--font-family-button);
font-size: var(--button--font-size);
font-weight: var(--button--font-weight);
gap: var(--spacing-2);
justify-content: center;
line-height: var(--button--line-height);
min-height: var(--button--min-height);
min-width: var(--button--min-width);
opacity: var(--button--opacity);
outline-offset: 2px;
padding: var(--button--padding-v) var(--button--padding-h);
position: relative;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
transition: var(--button--transition);
z-index: 1;
}
.button svg:where(:not(.icon-loader):not(.icon-check)),
button[type="submit"] svg:where(:not(.icon-loader):not(.icon-check)) {
display: block;
}
.button span:empty,
button[type="submit"] span:empty {
display: none;
}
.button:focus-visible,
button[type="submit"]:focus-visible {
clip-path: none;
}
.button:disabled,
.button[disabled],
button[type="submit"]:disabled,
button[type="submit"][disabled] {
--button--opacity: 0.2;
--button-hover--opacity: 0.2;
cursor: not-allowed;
}
.button:not(:disabled):not([disabled]):focus-visible,
.button:not(:disabled):not([disabled]):hover,
.button[aria-expanded="true"],
button[type="submit"]:not(:disabled):not([disabled]):focus-visible,
button[type="submit"]:not(:disabled):not([disabled]):hover {
background-color: var(--button-hover--background-color);
color: var(--button-hover--color);
opacity: var(--button-hover--opacity);
}
.button-link {
--button--padding-v: 0px;
--button--padding-h: 0px;
--button--min-height: none;
--button--border-radius: 0;
--button--color: var(--color-secondary);
--button--background-color: transparent;
--button-hover--color: var(--color-contrast);
--button-hover--background-color: transparent;
--button-hover--opacity: 1;
}
.pagination-button > .loader {
display: none;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.pagination-button > .loader svg {
height: 1.25em;
width: 1.25em;
}
.pagination-button > .complete {
display: none;
}
.pagination-button.loading > .loader {
display: flex;
}
.pagination-button.loading > .label {
visibility: hidden;
}
.pagination-button.complete > .label {
display: none;
}
.pagination-button.complete > .complete {
display: block;
}
.pagination-button.complete,
.pagination-button.loading {
--button-hover--color: var(--color-contrast);
--button-hover--background-color: transparent;
cursor: default;
}
.pagination-button.complete > .icon,
.pagination-button.loading > .icon {
display: none;
}
.button-skip {
left: var(--spacing-4);
position: absolute;
top: var(--spacing-4);
z-index: 99999;
}
.button-skip:not(:focus-visible) {
opacity: 0;
pointer-events: none;
}
.icon-loader path {
animation: format-icon-loader 0.5s linear infinite;
transform-origin: 50% 50%;
}
@keyframes format-icon-loader {
0% {
transform: rotate(0);
}
to {
transform: rotate(1turn);
}
}
:root {
--lightbox--button--background-color: var(--color-background-300);
}
.logo {
align-self: flex-start;
color: var(--color-contrast);
display: inline-block;
font-weight: var(--font-weight-bold);
line-height: 1.4;
-webkit-text-decoration: none;
text-decoration: none;
}
.logo img {
height: auto;
max-height: var(--logo--max-height, 3.75rem);
transition: transform 0.35s cubic-bezier(0.7, 0.2, 0.3, 0.9);
width: auto;
}
.logo:focus img,
.logo:hover img {
transform: scale(1.05);
}
[data-color-scheme="dark"] .logo-light {
opacity: 0;
pointer-events: none;
position: absolute;
}
@media (prefers-color-scheme: dark) {
[data-color-scheme="system"] .logo-light {
opacity: 0;
pointer-events: none;
position: absolute;
}
}
[data-color-scheme="light"] .logo-dark {
opacity: 0;
pointer-events: none;
position: absolute;
}
@media (prefers-color-scheme: light) {
[data-color-scheme="system"] .logo-dark {
opacity: 0;
pointer-events: none;
position: absolute;
}
}
.dropdown {
--dropdown--translate-x: 0;
--dropdown--offset: var(--spacing-3);
--dropdown--radius: var(--radius-3);
background-clip: padding-box;
background-color: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-3);
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
margin-top: var(--dropdown--offset);
max-width: 260px;
min-width: 160px;
right: -1px;
top: 100%;
transform: translate(var(--dropdown--translate-x), -2px);
transition: visibility 0.15s ease, opacity 0.15s ease, transform 0.2s ease;
width: -moz-max-content;
width: max-content;
}
.dropdown:before {
content: "";
height: var(--dropdown--offset);
left: 0;
position: absolute;
right: 0;
top: calc(var(--dropdown--offset) * -1);
}
.dropdown-share {
position: relative;
}
.dropdown-share > .dropdown {
bottom: 100%;
margin-bottom: var(--dropdown--offset);
margin-top: 0;
padding: var(--spacing-2);
top: auto;
}
.dropdown-share > .dropdown:before {
bottom: calc(var(--dropdown--offset) * -1);
top: auto;
}
.dropdown-share > .dropdown > ul {
list-style: none;
margin: 0;
padding: 0;
}
.dropdown-share > .dropdown a {
-webkit-text-decoration: none;
text-decoration: none;
}
.dropdown-share > .dropdown button {
background-color: transparent;
border: 0;
cursor: pointer;
text-align: left;
width: 100%;
}
.dropdown-share > .dropdown a,
.dropdown-share > .dropdown button {
align-items: center;
border-radius: calc(var(--dropdown--radius) - var(--spacing-3));
color: var(--color-contrast);
display: flex;
gap: var(--spacing-5);
padding: var(--spacing-3) var(--spacing-5);
}
.dropdown-share > .dropdown a > svg,
.dropdown-share > .dropdown button > svg {
height: 1rem;
width: 1rem;
}
.dropdown-share > .dropdown a:hover,
.dropdown-share > .dropdown button:hover {
background-color: var(--color-background-200);
color: var(--color-contrast);
}
.form-subscribe-fields {
position: relative;
width: 100%;
}
.form-subscribe-fields > input {
border-radius: 2rem;
min-height: 2.75rem;
}
.form-subscribe-fields > button {
bottom: var(--spacing-2);
left: auto;
margin-top: 0;
position: absolute;
right: var(--spacing-2);
top: var(--spacing-2);
width: auto;
}
.navigation-sidebar {
margin-left: calc(var(--navigation-sidebar--link--padding-h) * -1);
margin-right: calc(var(--navigation-sidebar--link--padding-h) * -1);
}
.navigation-sidebar > ul {
display: flex;
flex-direction: column;
gap: var(--navigation-sidebar--gap);
line-height: normal;
list-style: none;
margin: 0;
padding: 0;
}
.navigation-sidebar .nav-item {
display: grid;
grid-template-columns: minmax(0, 1fr);
position: relative;
}
.navigation-sidebar .nav-link {
background-color: transparent;
border: 0;
border-radius: 2rem;
color: var(--color-contrast);
display: flex;
font-size: var(--navigation-sidebar--font-size);
gap: var(--navigation-sidebar--link--gap);
max-width: 100%;
padding: var(--navigation-sidebar--link--padding-v) var(--navigation-sidebar--link--padding-h);
text-align: left;
-webkit-text-decoration: none;
text-decoration: none;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
width: -moz-max-content;
width: max-content;
}
.navigation-sidebar .nav-link:not(:focus-visible):before {
bottom: calc(var(--navigation-sidebar--gap) * -0.5);
content: "";
height: calc(1lh + var(--navigation-sidebar--gap) * 1.5 + var(--navigation-sidebar--link--padding-v) * 2);
left: 0;
position: absolute;
right: 0;
top: calc(var(--navigation-sidebar--gap) * -0.5);
}
.navigation-sidebar .nav-link > .label {
flex: 1 0 0%;
}
.navigation-sidebar .nav-link > svg {
flex: 0 0 var(--navigation-sidebar--icon--size);
height: var(--navigation-sidebar--icon--size);
width: var(--navigation-sidebar--icon--size);
}
.navigation-sidebar > ul > li > .nav-link {
padding-right: calc(var(--navigation-sidebar--link--padding-h) + var(--spacing-2));
}
.navigation-sidebar button.nav-link {
cursor: pointer;
}
.navigation-sidebar .nav-link.nav-link-current,
.navigation-sidebar .nav-link:hover,
.navigation-sidebar li:hover > .nav-link {
background-color: var(--color-grey-translucent);
color: var(--color-contrast);
}
.navigation-sidebar .nav-link.nav-link-current {
font-weight: var(--font-weight-medium);
}
.navigation-sidebar .nav-section {
font-size: var(--font-small);
position: relative;
}
.navigation-sidebar .nav-section,
.navigation-sidebar .nav-section > a {
color: var(--color-secondary);
}
.navigation-sidebar .nav-section:not(:first-child) {
margin-top: var(--spacing-6);
}
.navigation-sidebar .nav-section:hover > .nav-link,
.navigation-sidebar .nav-section > .nav-link:hover {
background-color: transparent;
}
.navigation-sidebar .nav-separator {
padding-left: var(--navigation-sidebar--link--padding-h);
padding-right: var(--navigation-sidebar--link--padding-h);
}
.navigation-sidebar .nav-separator:not(:first-child) {
margin-top: var(--spacing-6);
}
.navigation-sidebar .nav-separator:not(:last-child) {
margin-bottom: var(--spacing-6);
}
.navigation-sidebar .nav-separator:before {
border-top: 1px solid var(--color-border);
content: "";
display: block;
}
.navigation-sidebar .collapse-toggle {
--collapse--icon: url('data:image/svg+xml;utf8,');
--collapse--icon--rotate: 90deg;
--collapse--icon--size: var(--navigation-sidebar--icon--size);
--collapse-open--icon--rotate: -90deg;
}
.navigation-sidebar .collapse-toggle > svg {
transition: opacity 0.15s ease;
}
.navigation-sidebar .collapse-toggle:after {
left: var(--navigation-sidebar--link--padding-h);
opacity: 0;
position: absolute;
top: var(--navigation-sidebar--link--padding-v);
transition: opacity 0.15s ease, transform 0.2s ease;
}
.navigation-sidebar .collapse-toggle:focus-visible > svg,
.navigation-sidebar .collapse-toggle:hover > svg,
.navigation-sidebar .nav-item:hover > .collapse-toggle > svg {
opacity: 0;
}
.navigation-sidebar .collapse-toggle:focus-visible:after,
.navigation-sidebar .collapse-toggle:hover:after,
.navigation-sidebar .nav-item:hover > .collapse-toggle:after {
opacity: 1;
}
.navigation-sidebar .collapse {
--navigation-sidebar--gap: var(--spacing-1);
}
.navigation-sidebar .collapse > ul {
display: flex;
flex-direction: column;
gap: var(--navigation-sidebar--gap);
list-style: none;
margin: 0;
padding: 0 0 0 calc(var(--navigation-sidebar--icon--size) + var(--navigation-sidebar--link--gap));
position: relative;
}
.navigation-sidebar .collapse > ul > li:first-child {
padding-top: var(--spacing-2);
}
.navigation-sidebar .collapse > ul:before {
border-left: 1px solid var(--color-border);
bottom: var(--navigation-sidebar--link--padding-v);
content: "";
left: calc(var(--navigation-sidebar--link--padding-h) + var(--navigation-sidebar--icon--size) * 0.5);
position: absolute;
top: 0;
}
.navigation-sidebar .collapse .nav-link {
outline-offset: calc(var(--spacing-1) * -1);
}
.navigation-sidebar .dropdown {
--navigation-sidebar--gap: var(--spacing-1);
left: 100%;
margin-left: var(--dropdown--offset);
margin-top: 0;
top: 0;
}
.navigation-sidebar .dropdown:before {
bottom: 0;
height: auto;
left: auto;
right: 100%;
top: 0;
width: var(--dropdown--offset);
}
.navigation-sidebar .dropdown > ul {
display: flex;
flex-direction: column;
gap: var(--navigation-sidebar--gap);
padding: var(--spacing-2);
}
.navigation-sidebar .dropdown .nav-link {
border-radius: calc(var(--dropdown--radius) - var(--spacing-3));
width: 100%;
}
.navigation-sidebar .dropdown-toggle {
align-items: center;
border-radius: 2rem;
display: flex;
height: calc(var(--navigation-sidebar--icon--size) + var(--navigation-sidebar--link--padding-v) * 2);
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: calc(var(--navigation-sidebar--icon--size) + var(--navigation-sidebar--link--padding-h) * 2);
}
.navigation-sidebar .dropdown-toggle:before {
transform: rotate(-90deg);
}
.navigation-sidebar .dropdown-toggle:focus-visible {
opacity: 1;
}
.navigation-sidebar .navigation-toggle-item {
position: relative;
}
.navigation-sidebar .navigation-toggle {
background-color: transparent;
border: 0;
cursor: pointer;
line-height: normal;
margin-top: var(--navigation-sidebar--gap);
text-align: left;
}
@media (min-width: 540px) {
.navigation-sidebar .navigation-toggle-no-secondary {
display: none;
}
}
@container sidebar (width > 100px) {
.navigation-sidebar .collapse-toggle + .nav-link,
.navigation-sidebar .dropdown,
.navigation-sidebar .dropdown-toggle {
display: none;
}
}
@container sidebar (width < 100px) {
.sidebar-navigation > .navigation-sidebar {
--navigation-sidebar--link--padding-h: var(--navigation-sidebar--link--padding-v);
margin-top: calc(var(--navigation-sidebar--link--padding-v) * -1);
}
.sidebar-navigation > .navigation-sidebar .collapse,
.sidebar-navigation > .navigation-sidebar .collapse-toggle {
display: none;
}
.sidebar-navigation > .navigation-sidebar > ul > li > .nav-link {
padding: var(--navigation-sidebar--link--padding-h);
}
.sidebar-navigation > .navigation-sidebar .navigation-toggle > .label,
.sidebar-navigation > .navigation-sidebar > ul > li:not(:has(> .dropdown)) > .nav-link:not(.nav-section-link) > .label {
animation: feed-hide-label-when-stack 0.01s;
background-color: var(--color-background-300);
border-radius: 2rem;
left: calc(var(--navigation-sidebar--link--padding-h) + var(--navigation-sidebar--icon--size) + var(--navigation-sidebar--link--gap) * 2);
opacity: 0;
padding: var(--spacing-3) var(--spacing-6);
pointer-events: none;
position: absolute;
top: calc(var(--navigation-sidebar--link--padding-v) - var(--spacing-3));
transition: opacity 0.15s ease;
width: -moz-max-content;
width: max-content;
z-index: 2;
}
.sidebar-navigation > .navigation-sidebar .navigation-toggle:focus-visible > .label,
.sidebar-navigation > .navigation-sidebar .navigation-toggle:hover > .label,
.sidebar-navigation > .navigation-sidebar > ul > li:not(:has(> .dropdown)) > .nav-link:not(.nav-section-link):focus-visible > .label,
.sidebar-navigation > .navigation-sidebar > ul > li:not(:has(> .dropdown)) > .nav-link:not(.nav-section-link):hover > .label {
opacity: 1;
}
.sidebar-navigation > .navigation-sidebar > ul > li:has(> .dropdown) > .nav-link > .label {
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
}
.sidebar-navigation > .navigation-sidebar > ul > li:has(> .dropdown) > .nav-link:has(~ .dropdown-toggle:focus-visible) {
opacity: 0;
}
.sidebar-navigation > .navigation-sidebar .nav-section {
display: block;
pointer-events: none;
}
.sidebar-navigation > .navigation-sidebar .nav-section .label {
display: none;
}
.sidebar-navigation > .navigation-sidebar .nav-section:not(:last-child) {
margin-bottom: var(--spacing-6);
}
.sidebar-navigation > .navigation-sidebar .nav-section:not(:first-child) {
margin-top: var(--spacing-6);
}
.sidebar-navigation > .navigation-sidebar .nav-section .nav-section-link {
padding-bottom: 0;
padding-top: 0;
}
.sidebar-navigation > .navigation-sidebar .nav-section .nav-section-link:after {
border-top: 1px solid var(--color-border);
content: "";
display: block;
width: 100%;
}
}
@keyframes feed-hide-label-when-stack {
0%,
to {
opacity: 0;
}
}
:root {
--navigation-mobile--icon--size: 1.25rem;
}
@media (max-width: 539px) {
body:has(> .navigation-mobile) {
padding-bottom: calc(var(--navigation-mobile--icon--size) + var(--spacing-5) * 2 + var(--spacing-6));
}
}
.navigation-mobile {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: color-mix(in srgb, var(--color-background), transparent 20%);
bottom: 0;
box-shadow: 0 -1px 0 0 var(--color-border);
left: 0;
position: fixed;
width: calc(100% - var(--scrollbar-width, 0px));
z-index: 10000;
}
@media (min-width: 540px) {
.navigation-mobile {
display: none;
}
}
.navigation-mobile > ul {
display: flex;
list-style: none;
margin: 0;
padding: 0 var(--spacing-5);
position: relative;
}
.navigation-mobile > ul > li {
flex: 1 0 0%;
}
.navigation-mobile .nav-link {
align-items: center;
border-radius: 50%;
color: var(--color-contrast);
display: flex;
font-size: var(--font-small);
font-weight: var(--font-weight-medium);
justify-content: center;
padding: var(--spacing-5) var(--spacing-3);
width: 100%;
}
.navigation-mobile .nav-link:after {
background-color: transparent;
border-radius: 50%;
content: "";
height: calc(var(--navigation-mobile--icon--size) + var(--spacing-6));
margin-left: calc(var(--navigation-mobile--icon--size) * -1 - var(--spacing-6) * 0.5);
margin-right: calc(var(--spacing-6) * -0.5);
transition: background-color 0.15s ease-in-out;
width: calc(var(--navigation-mobile--icon--size) + var(--spacing-6));
z-index: -1;
}
.navigation-mobile .nav-link > .label {
background-color: var(--color-background-300);
border-radius: 2rem;
bottom: 100%;
left: 50%;
margin-bottom: var(--spacing-2);
max-width: calc(100vw - var(--spacing-7));
opacity: 0;
padding: var(--spacing-2) var(--spacing-5);
pointer-events: none;
position: absolute;
transform: translateX(-50%);
width: -moz-max-content;
width: max-content;
z-index: 1;
}
.navigation-mobile .nav-link > svg {
height: var(--navigation-mobile--icon--size);
width: var(--navigation-mobile--icon--size);
}
.navigation-mobile .nav-link:focus-visible > .label,
.navigation-mobile .nav-link:hover > .label {
opacity: 1;
}
.navigation-mobile .nav-link-current:after,
.navigation-mobile .nav-link:hover:after {
background-color: var(--color-background-300);
}
.navigation-mobile button.nav-link {
background-color: transparent;
border: 0;
cursor: pointer;
}
@media (max-width: 440px) and (min-width: 380px) {
.navigation-mobile li:nth-child(n + 9) {
display: none;
}
}
@media (max-width: 380px) and (min-width: 340px) {
.navigation-mobile li:nth-child(n + 8) {
display: none;
}
}
@media (max-width: 340px) {
.navigation-mobile li:nth-child(n + 7) {
display: none;
}
}
.popover {
--popover--offset: var(--spacing-5);
background-color: var(--color-background);
border-radius: var(--radius-3);
box-shadow: 0 4px 40px -15px rgba(0, 0, 0, 0.3);
margin-left: calc(var(--spacing-4) * -1);
margin-top: var(--popover--offset);
opacity: 0;
position: absolute;
top: 100%;
transform: scale(0.96);
transform-origin: top left;
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
visibility: hidden;
width: 300px;
z-index: 100;
}
.popover:before {
bottom: 100%;
content: "";
height: var(--spacing-5);
left: 0;
position: absolute;
right: 0;
}
[data-color-scheme="dark"] .popover {
box-shadow: 0 4px 30px -12px #000;
}
@media (prefers-color-scheme: dark) {
[data-color-scheme="system"] .popover {
box-shadow: 0 4px 30px -12px #000;
}
}
.popover-container {
display: flex;
flex-direction: column;
max-height: 50vh;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--spacing-4) var(--spacing-4) var(--spacing-7);
position: relative;
z-index: 1;
}
.popover-container > picture {
display: block;
-webkit-mask-image: radial-gradient(circle calc(var(--avatar--size) * 0.5) at calc(var(--avatar--size) * 0.5 + var(--spacing-5)) 100%, transparent calc(var(--avatar--size) * 0.5 + 3px), #000 calc(var(--avatar--size) * 0.5 + 3.5px));
mask-image: radial-gradient(circle calc(var(--avatar--size) * 0.5) at calc(var(--avatar--size) * 0.5 + var(--spacing-5)) 100%, transparent calc(var(--avatar--size) * 0.5 + 3px), #000 calc(var(--avatar--size) * 0.5 + 3.5px));
}
.popover-container > picture > img {
aspect-ratio: 21/9;
background-color: var(--color-background-200);
border-radius: calc(var(--radius-3) - var(--spacing-4));
-o-object-fit: cover;
object-fit: cover;
}
.popover-container > a {
align-self: flex-start;
margin-left: var(--spacing-4);
margin-top: var(--spacing-4);
}
.popover-container > picture + a {
margin-left: var(--spacing-5);
margin-top: calc(var(--avatar--size) * -0.5);
}
.popover-container > picture + a:before {
aspect-ratio: 21/9;
content: "";
left: var(--spacing-4);
position: absolute;
right: var(--spacing-4);
top: var(--spacing-4);
}
.popover-container > div {
color: var(--color-contrast);
font-family: var(--font-family-headings);
font-size: var(--font-h1);
font-weight: var(--font-weight-semibold);
line-height: 1.3;
margin-top: var(--spacing-5);
padding: 0 var(--spacing-5);
}
.popover-container > div > a {
-webkit-text-decoration: none;
text-decoration: none;
}
.popover-container > span {
color: var(--color-secondary);
font-size: var(--font-small);
font-weight: var(--font-weight-medium);
padding: 0 var(--spacing-5);
}
.popover-container > ul {
gap: 0;
margin-bottom: calc(var(--spacing-2) * -1);
margin-top: var(--spacing-2);
padding: 0 var(--spacing-5);
}
.popover-top {
bottom: 100%;
margin-bottom: var(--popover--offset);
margin-top: 0;
top: auto;
transform-origin: bottom left;
}
.popover-top:before {
bottom: auto;
top: 100%;
}
.popover-target:hover ~ .popover,
.popover:hover {
height: auto;
opacity: 1;
overflow: visible;
transform: scale(1);
visibility: visible;
}
.popover-hide {
animation: feed-popover-hide 0.2s ease;
height: 0;
overflow: hidden;
}
@keyframes feed-popover-hide {
0%,
99% {
height: auto;
overflow: visible;
}
to {
height: 0;
overflow: hidden;
}
}
.social-links {
--social-links--gap-v: var(--spacing-1);
--social-links--gap-h: var(--spacing-1);
display: flex;
flex-wrap: wrap;
gap: var(--social-links--gap-v) var(--social-links--gap-h);
list-style: none;
margin: calc(var(--spacing-3) * -1) calc(var(--spacing-4) * -1);
padding: 0;
}
.social-links:empty {
display: none;
}
.social-link {
border-radius: 50%;
display: block;
padding: var(--spacing-4);
position: relative;
transition: background-color 0.2s ease;
}
.social-link:before {
bottom: calc(var(--social-links--gap-v) * -0.5);
content: "";
left: calc(var(--social-links--gap-h) * -0.5);
position: absolute;
right: calc(var(--social-links--gap-h) * -0.5);
top: calc(var(--social-links--gap-v) * -0.5);
}
.social-link:hover {
background-color: var(--color-background-300);
color: var(--color-contrast);
}
.social-link > svg {
display: block;
height: 1em;
width: 1em;
}
.social-link > span {
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
}
.toggle-color-scheme-button {
align-items: center;
background-color: var(--color-background-300);
border: 0;
border-radius: 50%;
cursor: pointer;
display: flex;
height: 1.5rem;
justify-content: center;
padding: 0;
transition: color 0.15s ease, background-color 0.15s ease;
width: 1.5rem;
}
.toggle-color-scheme-button:hover {
background-color: var(--color-background-400);
}
.toggle-color-scheme-button .icon {
display: block;
height: var(--font-small);
position: absolute;
width: var(--font-small);
}
.toggle-color-scheme-button .icon-moon,
.toggle-color-scheme-button .icon-sun {
opacity: 0;
}
[data-color-scheme="light"] .toggle-color-scheme-button .icon-sun {
opacity: 1;
}
[data-color-scheme="light"] .toggle-color-scheme-button .icon-circle-half,
[data-color-scheme="light"] .toggle-color-scheme-button .icon-moon {
opacity: 0;
}
[data-color-scheme="dark"] .toggle-color-scheme-button .icon-moon {
opacity: 1;
}
.tooltip,
[data-color-scheme="dark"] .toggle-color-scheme-button .icon-circle-half,
[data-color-scheme="dark"] .toggle-color-scheme-button .icon-sun {
opacity: 0;
}
.tooltip {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(5, 5, 5, 0.7);
border-radius: 2rem;
box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.26);
color: var(--color-white);
font-size: var(--font-small);
font-weight: var(--font-weight-medium);
margin-top: 4px;
padding: var(--spacing-2) var(--spacing-5);
pointer-events: none;
position: absolute;
right: 50%;
top: 100%;
transform-origin: top;
transition: opacity 0.2s ease;
translate: 50% 0;
width: -moz-max-content;
width: max-content;
z-index: 10;
}
.tooltip:before {
border-bottom: 4px solid rgba(5, 5, 5, 0.7);
border-left: 4px solid transparent;
border-right: 4px solid transparent;
bottom: 100%;
content: "";
height: 0;
left: 50%;
margin-left: -4px;
position: absolute;
width: 0;
}
.tooltip-target {
position: relative;
}
.tooltip-target:hover > .tooltip {
opacity: 1;
}
.post-content .kg-audio-card {
background-color: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-2);
box-shadow: none;
color: var(--color-contrast);
min-height: auto;
padding: var(--spacing-7) var(--spacing-8);
position: relative;
}
.post-content .kg-audio-thumbnail {
border-radius: 0;
height: 22px;
left: var(--spacing-8);
margin: 0;
min-width: auto;
position: absolute;
top: var(--spacing-7);
width: 22px;
}
.post-content .kg-audio-thumbnail.placeholder:before {
background-color: var(--color-accent-foreground);
content: "";
height: 0.75rem;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
width: 0.75rem;
}
.post-content .kg-audio-thumbnail.placeholder svg {
display: none;
}
.post-content .kg-audio-player-container {
display: block;
}
.post-content .kg-audio-seek-slider {
display: block;
flex-basis: 0;
}
.post-content .kg-audio-title {
align-items: center;
color: var(--color-contrast);
display: flex;
font-size: var(--font-medium);
font-weight: var(--font-weight-medium);
margin-bottom: var(--spacing-6);
margin-top: 0;
min-height: 22px;
padding: 0 0 0 calc(var(--spacing-4) + 22px);
}
.post-content .kg-audio-player {
flex-wrap: wrap;
gap: var(--spacing-3);
padding: 0;
}
.post-content .kg-audio-pause-icon,
.post-content .kg-audio-play-icon {
height: 1rem;
padding-right: 0;
width: 1rem;
}
.post-content .kg-audio-pause-icon > svg,
.post-content .kg-audio-play-icon > svg {
height: var(--font-x-small);
width: var(--font-x-small);
}
.post-content .kg-audio-current-time {
min-width: 2.25rem;
padding: 0;
text-align: right;
}
.post-content .kg-audio-current-time,
.post-content .kg-audio-time {
font-size: var(--font-small);
font-weight: var(--font-weight-regular);
}
.post-content .kg-audio-time {
color: var(--color-secondary);
max-width: 3.25rem;
width: auto;
}
.post-content .kg-audio-duration {
margin-left: var(--spacing-3);
min-width: 2.25rem;
padding: 0;
}
.post-content .kg-audio-playback-rate {
border-radius: 0.25rem;
font-size: var(--font-small);
font-weight: var(--font-weight-regular);
justify-content: center;
min-width: 2rem;
padding: 0.15rem 0.25rem;
}
.post-content .kg-audio-playback-rate:hover {
box-shadow: 0 0 0 1px var(--color-border);
}
.post-content .kg-audio-volume-slider {
width: 3.75rem;
}
.post-content .kg-audio-unmute-icon {
margin-right: -6px;
}
blockquote.kg-blockquote-alt {
font-size: var(--font-large);
font-style: normal;
font-weight: var(--font-weight-light);
line-height: 1.4;
padding: var(--spacing-7);
}
blockquote.kg-blockquote-alt:before {
display: none;
}
.post-content .kg-bookmark-card {
position: relative;
}
.post-content .kg-bookmark-card a.kg-bookmark-container {
background-color: var(--color-background);
border: 0;
border-radius: var(--radius-2);
transition: background-color 0.15s ease;
}
.post-content .kg-bookmark-card a.kg-bookmark-container:before {
border: 1px solid var(--color-border);
border-radius: inherit;
bottom: 0;
content: "";
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.post-content .kg-bookmark-card a.kg-bookmark-container:hover {
background-color: var(--color-background-200);
border: 0;
border-radius: var(--radius-2);
}
.post-content .kg-bookmark-container {
gap: var(--spacing-6);
padding: var(--spacing-7) var(--spacing-8);
}
.post-content .kg-bookmark-thumbnail {
background-color: var(--color-background-300);
margin-bottom: calc(var(--spacing-7) * -1);
margin-right: calc(var(--spacing-8) * -1);
margin-top: calc(var(--spacing-7) * -1);
}
.post-content .kg-bookmark-content {
gap: var(--spacing-4);
padding: 0;
}
.post-content .kg-bookmark-title {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: var(--color-contrast);
display: -webkit-box;
font-size: var(--font-medium);
font-weight: var(--font-weight-medium);
overflow: hidden;
}
.post-content .kg-bookmark-description {
-webkit-line-clamp: 3;
color: var(--color-foreground);
font-size: var(--font-small);
line-height: inherit;
margin-top: 0;
max-height: none;
opacity: 1;
}
.post-content .kg-bookmark-metadata {
color: var(--color-contrast);
font-size: var(--font-small);
font-weight: var(--font-weight-medium);
margin-top: var(--spacing-2);
}
.post-content .kg-bookmark-icon {
margin-right: var(--spacing-4);
}
.post-content .kg-bookmark-metadata > span:nth-of-type(2):before {
content: "-";
}
.post-content .kg-bookmark-metadata > :not(img) {
opacity: 1;
}
.kg-btn,
.kg-cta-button,
.kg-header-card-button,
.kg-product-card-button,
.kg-signup-card-button {
border-radius: var(--button--border-radius) !important;
display: inline-flex;
font-family: var(--font-family-button) !important;
font-size: var(--button--font-size) !important;
font-weight: var(--button--font-weight) !important;
height: auto !important;
justify-content: center;
line-height: var(--button--line-height) !important;
min-height: var(--button--min-height) !important;
min-width: var(--button--min-width);
opacity: var(--button--opacity) !important;
outline-offset: 2px;
padding: var(--button--padding-v) var(--button--padding-h) !important;
text-align: center;
transition: var(--button--transition) !important;
}
.kg-btn:hover,
.kg-cta-button:hover,
.kg-header-card-button:hover,
.kg-product-card-button:hover,
.kg-signup-card-button:hover {
opacity: var(--button-hover--opacity) !important;
}
.stop-transition .kg-btn,
.stop-transition .kg-cta-button,
.stop-transition .kg-header-card-button,
.stop-transition .kg-product-card-button,
.stop-transition .kg-signup-card-button {
transition-duration: 0s !important;
}
.kg-btn,
.kg-product-card-button {
background-color: var(--button--background-color) !important;
color: var(--button--color) !important;
}
.kg-btn:hover,
.kg-product-card-button:hover {
background-color: var(--button-hover--background-color) !important;
color: var(--button-hover--color) !important;
}
.post-content .kg-callout-card {
border-radius: var(--radius-2);
color: var(--color-contrast);
gap: var(--spacing-4);
padding: var(--spacing-7) var(--spacing-8);
position: relative;
}
.post-content .kg-callout-card div.kg-callout-emoji {
align-items: center;
align-self: flex-start;
border-radius: 50%;
display: flex;
justify-content: center;
padding-right: 0;
}
.post-content .kg-callout-card-accent {
color: var(--color-accent-foreground);
}
.kg-code-card pre {
margin-bottom: 0;
}
.post-content .kg-cta-card {
border-radius: var(--radius-2);
}
.post-content .kg-cta-sponsor-label-wrapper {
margin: 0 var(--spacing-8);
padding: var(--spacing-7) 0;
}
.post-content .kg-cta-sponsor-label {
font-family: inherit;
font-size: var(--font-x-small);
font-weight: var(--font-weight-semibold);
}
.post-content .kg-cta-image-container img {
border-radius: var(--radius-1);
}
.post-content .kg-cta-content {
gap: var(--spacing-8);
padding: var(--spacing-7) var(--spacing-8) var(--spacing-8);
}
.post-content .kg-cta-has-img .kg-cta-content {
padding-top: var(--spacing-8);
}
.post-content .kg-cta-content-inner {
gap: var(--spacing-8);
}
.post-content .kg-cta-text p {
line-height: inherit;
}
.post-content .kg-cta-has-img .kg-cta-button {
margin-bottom: var(--spacing-2);
}
.post-content .kg-cta-button {
align-self: flex-start;
width: auto;
}
.post-content .kg-cta-button:hover {
opacity: var(--button-hover--opacity);
}
.post-content .kg-cta-bg-white {
background-color: var(--color-background);
border: 1px solid var(--color-border);
box-shadow: none;
}
.post-content .kg-cta-bg-white .kg-cta-sponsor-label-wrapper {
border-color: var(--color-border);
}
.post-content .kg-cta-bg-white .kg-cta-sponsor-label {
color: var(--color-contrast);
}
.post-content .kg-cta-bg-white .kg-cta-sponsor-label a:hover {
color: var(--ghost-accent-color);
opacity: 1;
}
.post-content .kg-cta-bg-white .kg-cta-sponsor-label span:not(a span) {
color: var(--color-secondary);
}
.post-content .kg-cta-bg-grey {
background-color: var(--color-background-200);
}
.post-content .kg-cta-bg-grey .kg-cta-sponsor-label {
color: var(--color-contrast);
}
.post-content .kg-cta-button[style="background-color: #000000; color: #FFFFFF;"] {
background-color: var(--color-contrast) !important;
color: var(--color-background) !important;
}
.post-content .kg-cta-button[style="background-color: #F0F0F0; color: #000000;"] {
background-color: var(--color-background-300) !important;
color: var(--color-contrast) !important;
}
.post-content .kg-cta-button.kg-style-accent {
color: var(--color-accent-foreground) !important;
}
.post-content .kg-embed-card > :where(iframe[src*="player.vimeo.com"], iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"]) {
background-color: var(--color-background-300);
}
.post-content .kg-embed-card > iframe {
border-radius: 0;
}
.post-content .kg-embed-card > iframe[src*="kickstarter.com"][src*="video.html"],
.post-content .kg-embed-card > iframe[src*="player.vimeo.com"],
.post-content .kg-embed-card > iframe[src*="youtube-nocookie.com"],
.post-content .kg-embed-card > iframe[src*="youtube.com"] {
aspect-ratio: 16/9;
height: auto;
width: 100%;
}
.kg-embed-card > .twitter-tweet {
margin: 0 auto;
}
.post-content .kg-file-card {
position: relative;
}
.post-content .kg-file-card a.kg-file-card-container {
background-color: transparent;
border: 0;
border-radius: var(--radius-2);
box-shadow: inset 0 0 0 1px var(--color-border);
color: var(--color-foreground);
gap: var(--spacing-6);
min-height: auto;
padding: var(--spacing-7) var(--spacing-8);
transition: background-color 0.15s ease;
}
.post-content .kg-file-card a.kg-file-card-container:hover {
background-color: var(--color-background-200);
border: 0;
}
.post-content .kg-file-card-contents {
gap: var(--spacing-4);
justify-content: space-evenly;
margin: 0;
}
.post-content .kg-file-card-title {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: var(--color-contrast);
display: -webkit-box;
font-size: var(--font-medium);
font-weight: var(--font-weight-medium);
overflow: hidden;
}
.post-content .kg-file-card-caption {
font-size: var(--font-small);
line-height: inherit;
margin-top: 0;
opacity: 1;
}
.post-content .kg-file-card-caption:empty {
display: none;
}
.post-content .kg-file-card-title + .kg-file-card-caption {
margin-top: var(--spacing-1);
}
.post-content .kg-file-card-metadata {
align-items: flex-end;
color: var(--color-mute);
display: flex;
flex-wrap: wrap;
font-size: var(--font-x-small);
font-weight: var(--font-weight-medium);
gap: 0 var(--spacing-sm);
line-height: inherit;
margin-top: 0;
}
.post-content .kg-file-card-filename {
font-weight: inherit;
}
.post-content .kg-file-card-filesize {
font-size: 1em;
margin-left: auto;
opacity: 1;
}
.post-content .kg-file-card-filesize:before {
display: none;
}
.post-content .kg-file-card-icon {
background-color: var(--ghost-accent-color);
border-radius: var(--radius-1);
flex: 0 0 auto;
min-width: auto;
}
.post-content .kg-file-card-icon:before {
display: none;
}
.post-content .kg-file-card-icon svg {
color: var(--color-accent-foreground);
height: 1rem;
width: 1rem;
}
.post-content .kg-gallery-card {
--gap: var(--spacing-5);
}
.post-content .kg-gallery-image img {
background-color: var(--color-background-300);
-o-object-fit: cover;
object-fit: cover;
}
.post-content .kg-gallery-card:not(.kg-card-hascaption) + .kg-gallery-card,
.post-content .kg-gallery-card:not(.kg-card-hascaption) + .kg-image-card,
.post-content .kg-image-card:not(.kg-card-hascaption) + .kg-gallery-card,
.post-content .kg-image-card:not(.kg-card-hascaption) + .kg-image-card {
margin-top: calc(var(--spacing-4) * -1 + var(--gap));
}
.kg-header-card-text {
padding: var(--header--text--padding) !important;
}
.kg-header-card-heading {
font-size: var(--header--heading--font-size) !important;
font-weight: var(--header--heading--font-weight) !important;
letter-spacing: var(--header--heading--letter-spacing, inherit) !important;
line-height: var(--header--heading--line-height, 1.2) !important;
}
.kg-header-card-subheading {
font-size: var(--header--subheading--font-size) !important;
font-weight: var(--header--subheading--font-weight) !important;
line-height: var(--header--subheading--line-height, inherit) !important;
margin: var(--header--subheading--margin, 0) !important;
}
.kg-header-card-button {
letter-spacing: inherit !important;
margin: var(--header--button--margin, 0) !important;
outline: revert !important;
}
.kg-header-card.kg-layout-split .kg-header-card-content {
grid-template-columns: minmax(0, 1fr);
}
.kg-header-card.kg-layout-split:not(.kg-content-wide) picture {
aspect-ratio: 16/9;
}
.kg-header-card.kg-layout-split.kg-content-wide .kg-header-card-image {
aspect-ratio: 16/9;
height: auto !important;
-o-object-fit: cover !important;
object-fit: cover !important;
padding: var(--layout--gap) !important;
}
.kg-header-card[data-background-color="#F0F0F0"] {
background-color: var(--color-background-200) !important;
}
.kg-header-card[data-background-color="#F0F0F0"] .kg-header-card-heading {
color: var(--color-contrast) !important;
}
.kg-header-card[data-background-color="#F0F0F0"] .kg-header-card-subheading {
color: var(--color-foreground) !important;
}
.kg-header-card[data-background-color="accent"].kg-layout-split,
.kg-header-card[data-background-color="accent"]:not(.kg-layout-split):not(:has(> picture)) {
background-color: var(--ghost-accent-color) !important;
}
.kg-header-card[data-background-color="accent"].kg-layout-split .kg-header-card-heading,
.kg-header-card[data-background-color="accent"]:not(.kg-layout-split):not(:has(> picture)) .kg-header-card-heading {
color: var(--color-accent-foreground) !important;
}
.kg-header-card[data-background-color="accent"].kg-layout-split .kg-header-card-subheading,
.kg-header-card[data-background-color="accent"]:not(.kg-layout-split):not(:has(> picture)) .kg-header-card-subheading {
color: color-mix(in srgb, var(--color-accent-foreground), transparent 10%) !important;
}
.kg-header-card:not(.kg-layout-split):has(> picture) .kg-header-card-heading,
.kg-header-card:not(.kg-layout-split):has(> picture) .kg-header-card-subheading {
color: var(--color-white) !important;
}
.kg-header-card[data-background-color="#F0F0F0"] [data-button-color="#ffffff"][data-button-text-color="#000000"] {
background-color: var(--color-background) !important;
color: var(--color-contrast) !important;
}
.kg-header-card[data-background-color="#F0F0F0"] [data-button-color="#000000"][data-button-text-color="#FFFFFF"] {
background-color: var(--color-contrast) !important;
color: var(--color-background) !important;
}
.kg-header-card .kg-style-accent {
color: var(--color-accent-foreground) !important;
}
.kg-header-card {
--header--text--padding: calc(var(--spacing-10) * 2) var(--layout--gap);
--header--heading--font-size: clamp(18px, 13.9286px + 1.0714vw, 30px);
--header--heading--font-weight: var(--font-weight-semibold);
--header--subheading--margin: var(--spacing-7) 0 0;
--header--subheading--font-size: clamp(15px, 14.3214px + 0.1786vw, 17px);
--header--subheading--line-height: 1.5;
--header--button--margin: var(--spacing-8) 0 0;
border-radius: var(--radius-3);
overflow: hidden;
}
.kg-header-card.kg-width-full {
border-radius: 0;
}
.kg-header-card.kg-layout-split:has(picture:first-child) {
--header--text--padding: var(--spacing-8) calc(var(--spacing-10) * 2) calc(var(--spacing-10) * 2) var(--layout--gap);
}
.kg-header-card:not(.kg-layout-split):before {
background-color: color-mix(in srgb, var(--color-black), transparent 70%);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.kg-header-card .kg-header-card-content {
position: relative;
z-index: 1;
}
.kg-gallery-image img,
.kg-image-card img {
background-color: var(--color-background-300);
border-radius: var(--radius-2);
position: relative;
width: 100%;
}
.kg-gallery-image img:after,
.kg-image-card img:after {
background-color: var(--color-secondary);
height: 24px;
left: 50%;
margin-left: -12px;
margin-top: -12px;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
top: 50%;
width: 24px;
}
.kg-image-card.kg-width-full img {
border-radius: 0;
}
.post-content .kg-product-card-container {
background-color: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-2);
box-shadow: none;
color: var(--color-foreground);
gap: var(--spacing-6);
max-width: 440px;
padding: var(--spacing-7);
}
.post-content .kg-product-card-image {
background-color: var(--color-background-300);
border-radius: var(--radius-1);
margin-bottom: var(--spacing-2);
width: 100%;
}
.post-content .kg-product-card h4.kg-product-card-title {
font-family: inherit;
font-size: 1.0625rem;
font-weight: var(--font-weight-semibold);
}
.post-content .kg-product-card-rating {
color: var(--color-contrast);
padding-left: 0;
}
.post-content .kg-product-card-rating svg {
height: var(--font-small);
width: var(--font-small);
}
.post-content .kg-product-card-rating-star {
width: 18px;
}
.post-content .kg-product-card-description:empty {
display: none;
}
.post-content .kg-product-card .kg-product-card-description ol,
.post-content .kg-product-card .kg-product-card-description p,
.post-content .kg-product-card .kg-product-card-description ul {
color: var(--color-foreground);
font-family: inherit;
font-size: inherit;
line-height: inherit;
opacity: 1;
}
.post-content .kg-product-card .kg-product-card-description p:first-of-type {
margin-top: 0;
}
.post-content .kg-product-card a.kg-product-card-button {
margin-top: var(--spacing-2);
}
.kg-signup-card-text {
padding: var(--signup--text--padding) !important;
}
.kg-signup-card-heading {
font-size: var(--signup--heading--font-size) !important;
font-weight: var(--signup--heading--font-weight) !important;
letter-spacing: var(--signup--heading--letter-spacing, inherit) !important;
line-height: var(--signup--heading--line-height, 1.2) !important;
}
.kg-signup-card-subheading {
font-size: var(--signup--subheading--font-size) !important;
font-weight: var(--signup--subheading--font-weight) !important;
line-height: var(--signup--subheading--line-height, inherit) !important;
margin: var(--signup--subheading--margin, 0) !important;
}
.kg-signup-card-form {
margin: var(--signup--form--margin, 0) !important;
}
.kg-signup-card .kg-signup-card-fields {
background-color: transparent;
border: 0;
border-radius: 0;
padding: 0;
}
.kg-signup-card .kg-signup-card-fields > .kg-signup-card-button,
.kg-signup-card .kg-signup-card-fields > .kg-signup-card-input {
margin: 0;
outline: revert;
}
.kg-signup-card-disclaimer {
margin: var(--signup--disclaimer--margin, 0) !important;
}
.kg-signup-card.kg-layout-split .kg-signup-card-content {
grid-template-columns: minmax(0, 1fr);
}
.kg-signup-card.kg-layout-split:not(.kg-content-wide) picture {
aspect-ratio: 16/9;
}
.kg-signup-card.kg-layout-split.kg-content-wide .kg-signup-card-image {
aspect-ratio: 16/9;
height: auto !important;
-o-object-fit: cover !important;
object-fit: cover !important;
padding: var(--layout--gap) !important;
}
.kg-signup-card-form.success .kg-signup-card-success {
font-size: inherit !important;
font-weight: var(--font-weight-medium) !important;
height: auto !important;
line-height: inherit !important;
min-height: 2.75rem;
}
.kg-signup-card[style="background-color: rgb(240, 240, 240);"] {
background-color: var(--color-background-200) !important;
}
.kg-signup-card[style="background-color: rgb(240, 240, 240);"] .kg-signup-card-heading {
color: var(--color-contrast) !important;
}
.kg-signup-card[style="background-color: rgb(240, 240, 240);"] .kg-signup-card-subheading {
color: var(--color-foreground) !important;
}
.kg-signup-card[style="background-color: rgb(240, 240, 240);"] .kg-signup-card-disclaimer {
color: var(--color-secondary) !important;
}
.kg-signup-card .kg-style-accent,
.kg-signup-card.kg-style-accent .kg-signup-card-disclaimer,
.kg-signup-card.kg-style-accent .kg-signup-card-heading,
.kg-signup-card.kg-style-accent .kg-signup-card-subheading {
color: var(--color-accent-foreground) !important;
}
.kg-signup-card .kg-signup-card-button[style="background-color: #000000;color: #FFFFFF;"] {
background-color: var(--color-contrast) !important;
color: var(--color-background) !important;
}
.kg-signup-card .kg-signup-card-button[style="background-color: #ffffff;color: #000000;"] {
background-color: var(--color-background) !important;
color: var(--color-contrast) !important;
}
.kg-signup-card {
--signup--text--padding: calc(var(--spacing-10) * 2) var(--layout--gap);
--signup--heading--font-size: clamp(18px, 14.6071px + 0.8929vw, 28px);
--signup--heading--font-weight: var(--font-weight-semibold);
--signup--subheading--margin: var(--spacing-7) 0 0;
--signup--subheading--font-size: var(--font-medium);
--signup--form--margin: var(--spacing-9) 0 0;
--signup--disclaimer--margin: var(--spacing-5) 0 0;
border-radius: var(--radius-3);
overflow: hidden;
}
.kg-signup-card.kg-width-full {
border-radius: 0;
}
.kg-signup-card.kg-layout-split:has(picture:first-child) {
--signup--text--padding: var(--spacing-8) calc(var(--spacing-10) * 2) calc(var(--spacing-10) * 2) var(--layout--gap);
}
.kg-signup-card:not(.kg-layout-split):before {
background-color: color-mix(in srgb, var(--color-black), transparent 70%);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.kg-signup-card .kg-signup-card-content {
position: relative;
z-index: 1;
}
.kg-signup-card-subheading {
max-width: 400px !important;
width: 100%;
}
.kg-signup-card-fields {
border-radius: 2rem !important;
max-width: 340px !important;
position: relative;
}
.kg-signup-card-fields > .kg-signup-card-input {
border-radius: 2rem;
min-height: 2.75rem;
}
.kg-signup-card-fields > .kg-signup-card-button {
bottom: var(--spacing-2);
left: auto;
position: absolute;
right: var(--spacing-2);
top: var(--spacing-2);
width: auto;
}
.footnote-item > p {
margin-bottom: var(--spacing-1);
}
.post-content .kg-toggle-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-2);
box-shadow: none;
padding: var(--spacing-5) var(--spacing-6);
}
.post-content .kg-toggle-card + .kg-toggle-card {
margin-top: calc(var(--vertical-rhythm) * -1);
}
.post-content .kg-toggle-card h4.kg-toggle-heading-text {
font-size: var(--font-medium);
font-weight: var(--font-weight-medium);
}
.post-content .kg-toggle-content {
transition: opacity 0.2s ease, top 0.2s ease;
}
.post-content .kg-toggle-card-icon {
background-color: var(--color-background-300);
border-radius: calc(var(--radius-1) - 2px);
flex: 0 0 auto;
height: 1rem;
margin-top: 0.1em;
width: 1rem;
}
.post-content .kg-toggle-card-icon svg {
color: var(--color-foreground);
height: 0.475em;
width: 0.475em;
}
.post-content .kg-toggle-card-icon path {
stroke-width: 4px;
}
.post-content .kg-toggle-card .kg-toggle-content > * {
font-size: inherit;
line-height: inherit;
margin-top: var(--spacing-4);
}
.post-content .kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content {
visibility: hidden;
}
.kg-video-card video {
background-color: var(--color-background-300);
border-radius: 0;
}
.kg-video-card .kg-video-hide-animated > button {
visibility: hidden;
}
.kg-video-card.kg-width-full .kg-video-container {
border-radius: 0;
}
.kg-video-card .kg-video-large-play-icon {
height: 3.125rem;
width: 3.125rem;
}
.kg-video-card .kg-video-large-play-icon svg {
width: var(--font-small);
}
.container {
container: layout/inline-size;
display: flex;
font-size: var(--font-medium);
justify-content: center;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.footer > .social-links:has(> li) {
margin-bottom: var(--spacing-4);
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
}
.footer-bottom > .footer-copyright {
flex: 1 0 0%;
margin-bottom: auto;
margin-top: auto;
}
.footer-bottom > .toggle-color-scheme-button {
flex: 0 0 auto;
}
.popup-navigation {
background-color: transparent;
display: flex;
opacity: 1;
overflow-y: auto;
pointer-events: none;
transition: background-color 0.5s ease-in-out, -webkit-backdrop-filter 0.4s ease-in-out;
transition: backdrop-filter 0.4s ease-in-out, background-color 0.5s ease-in-out;
transition: backdrop-filter 0.4s ease-in-out, background-color 0.5s ease-in-out, -webkit-backdrop-filter 0.4s ease-in-out;
visibility: visible;
}
.popup-navigation .navigation-secondary {
margin-bottom: var(--spacing-5);
}
.popup-navigation > .popup-container {
align-self: flex-start;
background-color: var(--color-background);
clip-path: inset(0 70% 0 30%);
display: flex;
flex: 0 0 auto;
flex-direction: column;
max-width: 280px;
min-height: 100%;
padding: var(--layout--gap);
transform: translateX(-30%);
transition: clip-path 0.8s cubic-bezier(0.2, 1, 0.2, 1), transform 0.8s cubic-bezier(0.2, 1, 0.2, 1);
width: 100%;
}
.popup-navigation > .popup-container > nav {
filter: blur(20px);
opacity: 0;
transition: opacity 0.5s ease-in-out, filter 0.7s cubic-bezier(0.2, 1, 0.2, 1);
transition-delay: 0s, 0.3s;
}
.popup-navigation.popup-show {
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
background-color: color-mix(in srgb, var(--color-background-200), transparent 10%);
pointer-events: visible;
transition: background-color 0.3s ease-in-out, -webkit-backdrop-filter 0.3s ease-in-out;
transition: backdrop-filter 0.3s ease-in-out, background-color 0.3s ease-in-out;
transition: backdrop-filter 0.3s ease-in-out, background-color 0.3s ease-in-out, -webkit-backdrop-filter 0.3s ease-in-out;
}
.popup-navigation.popup-show > .popup-container {
clip-path: inset(0);
transform: translateX(0);
}
.popup-navigation.popup-show > .popup-container > nav {
filter: blur(0);
opacity: 1;
transition-delay: 0s;
}
@media (min-width: 540px) {
.popup-navigation .navigation-primary {
display: none;
}
}
.popup-navigation-head {
align-items: flex-start;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: color-mix(in srgb, var(--color-background), transparent 20%);
display: flex;
margin-left: calc(var(--layout--gap) * -1);
margin-right: calc(var(--layout--gap) * -1);
margin-top: calc(var(--layout--gap) * -1);
padding: var(--layout--gap);
position: sticky;
top: 0;
z-index: 3;
}
.popup-navigation-head > .logo {
margin-right: auto;
}
.popup-navigation-head > .button {
--button--padding-v: var(--spacing-3);
--button--padding-h: var(--spacing-3);
--button--min-height: auto;
--button--color: var(--color-contrast);
--button--background-color: var(--color-background-200);
--button-hover--color: var(--color-contrast);
--button-hover--background-color: var(--color-background-300);
margin-bottom: calc(var(--button--padding-v) * -1);
margin-right: calc(var(--button--padding-h) * -1);
margin-top: calc(var(--button--padding-v) * -1);
order: 1;
}
.popup-navigation-head > .button > svg {
height: var(--font-small);
width: var(--font-small);
}
.popup-navigation-button-member {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: color-mix(in srgb, var(--color-background), transparent 20%);
bottom: 0;
display: flex;
font-weight: var(--font-weight-medium);
gap: var(--spacing-5);
left: 0;
margin: auto calc(var(--layout--gap) * -1) calc(var(--layout--gap) * -1);
padding: calc(var(--layout--gap) * 0.5) var(--layout--gap);
position: sticky;
-webkit-text-decoration: none;
text-decoration: none;
transition: background-color 0.2s ease-in-out;
}
.popup-navigation-button-member > .label {
flex: 1 0 0%;
margin-bottom: auto;
margin-top: auto;
}
.popup-navigation-button-member > svg {
margin-top: calc(var(--avatar--size) * 0.5);
transform: translateY(-50%);
}
.popup-navigation-button-member > .avatar,
.popup-navigation-button-member > svg {
flex: 0 0 auto;
}
.popup-navigation-button-member:hover {
background-color: var(--color-background-200);
color: var(--color-contrast);
}
.popup-overlay {
background-color: transparent;
border: 0;
height: 100%;
left: 0;
padding: 0;
position: sticky;
top: 0;
width: 100%;
z-index: -1;
}
.sidebar-widgets {
align-self: start;
display: flex;
flex-direction: column;
gap: var(--spacing-9);
min-height: 100vh;
position: sticky;
top: 0;
will-change: top;
}
@media (max-width: 859px) {
.sidebar-widgets {
display: none;
}
}
.widget-heading {
display: flex;
font-size: var(--font-medium);
font-weight: var(--font-weight-semibold);
gap: var(--spacing-4);
margin-bottom: var(--spacing-7);
}
.widget-heading > svg {
height: 1.133em;
margin-top: 0.125em;
width: 1.133em;
}
.widget-heading:after {
border-top: 1px solid var(--color-border);
content: "";
flex: 1 0 0%;
margin-left: var(--spacing-2);
margin-top: 0.6em;
}
.widget-author-card > p {
margin-top: var(--spacing-6);
}
.widget-author-card-head {
display: flex;
gap: var(--spacing-1) var(--spacing-4);
}
.widget-author-card-head:has(> span) {
display: grid;
grid-template-columns: var(--avatar--size) minmax(0, 1fr);
}
.widget-author-card-head > a {
grid-row: span 2;
}
.widget-author-card-head > h3 {
align-self: center;
font-size: var(--font-medium);
font-weight: var(--font-weight-medium);
}
.widget-author-card-head > h3 > a {
-webkit-text-decoration: none;
text-decoration: none;
}
.widget-author-card-head > span {
color: var(--color-secondary);
font-size: var(--font-small);
}
.widget-authors-list {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: var(--spacing-7);
}
.widget-authors-card {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
min-height: var(--avatar--size);
padding-left: calc(var(--avatar--size) + var(--spacing-4));
position: relative;
}
.widget-authors-card:before {
background-color: var(--color-grey-translucent);
border-radius: calc(var(--avatar--size) * 0.5 + var(--spacing-3));
bottom: calc(var(--spacing-3) * -1);
content: "";
left: calc(var(--spacing-3) * -1);
opacity: 0;
position: absolute;
right: calc(var(--spacing-7) * -1);
top: calc(var(--spacing-3) * -1);
transition: opacity 0.15s ease;
z-index: -1;
}
.widget-authors-card:hover:before {
opacity: 1;
}
.widget-authors-card > a {
bottom: calc(var(--spacing-7) * -0.5);
left: calc(var(--spacing-3) * -1);
outline-offset: calc(var(--spacing-3) * -1);
position: absolute;
right: auto;
top: calc(var(--spacing-7) * -0.5);
width: calc(var(--layout--sidebar-widgets--width) + var(--spacing-3) - var(--layout--gap) * 2);
z-index: 2;
}
.widget-authors-card > .avatar {
left: 0;
position: absolute;
top: 0;
}
.widget-authors-card > h3 {
font-size: var(--font-medium);
font-weight: var(--font-weight-medium);
margin-bottom: auto;
margin-top: auto;
}
.widget-authors-card > span {
color: var(--color-secondary);
font-size: var(--font-small);
font-weight: var(--font-weight-medium);
}
.widget-footer {
display: flex;
gap: var(--spacing-6);
margin-top: auto;
padding-top: var(--spacing-2);
}
.widget-footer > .footer-copyright {
flex: 1 0 0%;
}
.widget-posts-card {
position: relative;
z-index: 1;
}
.widget-posts-card + .widget-posts-card {
margin-top: var(--spacing-8);
}
.widget-posts-card:before {
border-radius: var(--radius-2);
bottom: calc(var(--spacing-5) * -1);
content: "";
left: calc(var(--spacing-6) * -1);
position: absolute;
right: calc(var(--spacing-6) * -1);
top: calc(var(--spacing-5) * -1);
transition: background-color 0.15s ease;
z-index: -1;
}
.widget-posts-card:hover:before {
background-color: var(--color-grey-translucent);
}
.widget-posts-card > h3 {
font-size: var(--font-medium);
font-weight: var(--font-weight-medium);
}
.widget-posts-card > h3 > a {
color: var(--color-contrast);
display: block;
-webkit-text-decoration: none;
text-decoration: none;
}
.widget-posts-card > h3 > a:before {
bottom: calc(var(--spacing-5) * -1);
content: "";
left: calc(var(--spacing-6) * -1);
position: absolute;
right: calc(var(--spacing-6) * -1);
top: calc(var(--spacing-5) * -1);
}
.widget-posts-card > h3 > a:focus-visible:before {
display: none;
}
.widget-posts-card > p {
margin-top: var(--spacing-4);
}
.widget-recommendations:not(:has(.widget-recommendations-list > .card-recommendation)) {
display: none;
}
.widget-recommendations-list {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.widget-recommendations-list > .card-recommendation {
padding-right: var(--spacing-1);
position: relative;
z-index: 1;
}
.widget-recommendations-list > .card-recommendation:before {
border-radius: 2rem;
bottom: calc(var(--spacing-5) * -1);
content: "";
left: calc(var(--spacing-6) * -1);
position: absolute;
right: calc(var(--spacing-6) * -1);
top: calc(var(--spacing-5) * -1);
transition: background-color 0.15s ease;
z-index: -1;
}
.widget-recommendations-list > .card-recommendation:hover:before {
background-color: var(--color-grey-translucent);
}
.widget-recommendations-list > .card-recommendation > a {
bottom: calc(var(--spacing-5) * -1);
left: calc(var(--spacing-6) * -1);
position: absolute;
top: calc(var(--spacing-5) * -1);
width: calc(var(--layout--sidebar-widgets--width) - var(--layout--gap) * 2 + var(--spacing-6) * 2);
}
.widget-recommendations-list > .card-recommendation > h3 {
align-items: center;
display: flex;
font-size: var(--font-medium);
font-weight: var(--font-weight-medium);
}
.widget-recommendations-list > .card-recommendation picture {
margin-right: var(--spacing-4);
}
.widget-recommendations-list > .card-recommendation img {
border-radius: var(--radius-1);
height: 20px;
-o-object-fit: cover;
object-fit: cover;
position: relative;
width: 20px;
}
.widget-recommendations-list > .card-recommendation img:after,
.widget-recommendations-list > .card-recommendation > p {
display: none;
}
.widget-subscribe > h2 {
display: flex;
font-size: var(--font-medium);
font-weight: var(--font-weight-semibold);
gap: var(--spacing-4);
}
.widget-subscribe > h2 > svg {
height: 1.133em;
margin-top: 0.125em;
width: 1.133em;
}
.widget-subscribe > p {
margin-bottom: 0;
}
.widget-subscribe > form,
.widget-subscribe > p {
margin-top: var(--spacing-7);
}
.widget-subscribe .social-links {
--social-links--gap-v: 0px;
--social-links--gap-h: 0px;
}
.widget-subscribe-head {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-3);
position: relative;
}
.widget-subscribe-head > h2 {
margin-right: auto;
}
.widget-subscribe-head:has(> img) {
display: flex;
flex-direction: column;
min-height: 70px;
padding-left: calc(70px + var(--spacing-7));
padding-top: var(--spacing-6);
}
.widget-subscribe-head > img {
left: 0;
position: absolute;
top: 0;
}
.widget-tags-list {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: var(--spacing-7);
}
.widget-tags-card {
display: flex;
flex-direction: column;
grid-template-columns: var(--avatar--size) minmax(0, 1fr);
min-height: var(--avatar--size);
padding-left: calc(var(--avatar--size) + var(--spacing-4));
position: relative;
}
.widget-tags-card:before {
background-color: var(--color-grey-translucent);
border-radius: calc(var(--avatar--size) * 0.5 + var(--spacing-3));
bottom: calc(var(--spacing-3) * -1);
content: "";
left: calc(var(--spacing-3) * -1);
opacity: 0;
position: absolute;
right: calc(var(--spacing-7) * -1);
top: calc(var(--spacing-3) * -1);
transition: opacity 0.15s ease;
z-index: -1;
}
.widget-tags-card:hover:before {
opacity: 1;
}
.widget-tags-card > a {
bottom: calc(var(--spacing-7) * -0.5);
left: calc(var(--spacing-3) * -1);
outline-offset: calc(var(--spacing-3) * -1);
position: absolute;
right: auto;
top: calc(var(--spacing-7) * -0.5);
width: calc(var(--layout--sidebar-widgets--width) + var(--spacing-3) - var(--layout--gap) * 2);
z-index: 2;
}
.widget-tags-card > h3 {
font-size: var(--font-medium);
font-weight: var(--font-weight-medium);
margin-bottom: auto;
margin-top: auto;
}
.widget-tags-card > span {
color: var(--color-secondary);
font-size: var(--font-small);
font-weight: var(--font-weight-medium);
}
.widget-tags-card > div,
.widget-tags-card > figure {
left: 0;
margin: 0;
position: absolute;
top: 0;
}
.widget-tags-card > div {
background-color: var(--tag--color, var(--avatar--background-color));
border-radius: 50%;
height: var(--avatar--size);
width: var(--avatar--size);
}
.widget-tags-card > div:after {
align-items: center;
content: attr(data-letter);
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.widget-tags-card > div[style]:after {
color: var(--color-white);
}
.widget-tags-card img {
border-radius: 50%;
height: var(--avatar--size);
-o-object-fit: cover;
object-fit: cover;
width: var(--avatar--size);
}
.widget-toc {
font-size: var(--font-medium);
}
.widget-toc:has(.toc-hidden) {
display: none;
}
.toc {
border: 1px solid var(--color-border);
border-radius: var(--radius-2);
padding: var(--spacing-5) var(--spacing-7);
width: 100%;
}
.toc ul {
list-style: none;
margin: 0;
padding: 0;
}
.toc > ul ul {
padding-left: var(--spacing-4);
}
.toc li {
padding: 0;
position: static;
}
.toc li + li {
margin-top: 0;
}
.toc a {
align-items: center;
color: var(--color-secondary);
display: flex;
gap: var(--spacing-3);
line-height: 1.3;
padding: var(--spacing-3) 0;
-webkit-text-decoration: none;
text-decoration: none;
}
.toc a > svg {
flex: 0 0 auto;
height: 1em;
width: 1em;
}
.toc a.active,
.toc a:hover {
color: var(--color-contrast);
-webkit-text-decoration: underline;
text-decoration: underline;
}
.toc-hidden {
opacity: 0;
}
.toc > .toc-unlock-link {
display: none;
}
.section-authors-list {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
}
.section-authors-card {
display: flex;
flex: 1 0 200px;
flex-direction: column;
gap: var(--spacing-1);
padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) calc(var(--avatar--size) + var(--spacing-4) * 2);
position: relative;
}
.section-authors-card > a {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.section-authors-card > .avatar {
left: var(--spacing-4);
position: absolute;
top: var(--spacing-4);
}
.section-authors-card > h3 {
font-size: var(--font-medium);
font-weight: var(--font-weight-medium);
margin-bottom: auto;
margin-top: auto;
}
.section-authors-card > h3 > a {
-webkit-text-decoration: none;
text-decoration: none;
}
.section-authors-card > span:not(.avatar) {
color: var(--color-secondary);
display: flex;
flex-direction: column;
font-size: var(--font-small);
font-weight: var(--font-weight-medium);
line-height: 1.2;
margin-bottom: auto;
overflow: hidden;
}
.section-authors-card > span:not(.avatar) > span {
transition: transform 0.25s ease;
}
.section-authors-card > span:not(.avatar) > span:last-child {
margin-bottom: -1lh;
}
.section-authors-card:hover > span:not(.avatar) > span {
transform: translateY(-1lh);
}
.section-authors-card-head {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
min-height: var(--avatar--size);
padding-left: calc(var(--avatar--size) + var(--spacing-4));
position: relative;
}
.section-authors-card-head > a {
left: 0;
position: absolute;
top: 0;
}
.section-authors-card-head > h3 {
font-size: var(--font-medium);
font-weight: var(--font-weight-medium);
margin-bottom: auto;
margin-top: auto;
}
.section-authors-card-head > h3 > a {
-webkit-text-decoration: none;
text-decoration: none;
}
.section-authors-card-head > span {
color: var(--color-secondary);
font-size: var(--font-small);
font-weight: var(--font-weight-medium);
}
.section-comments {
padding: var(--layout--gap) var(--layout--gap) 0;
}
.section-hero + .post,
.section-hero + .section-authors,
.section-hero + .section-pricing,
.section-hero + .section-recommendations,
.section-hero + .section-tags {
margin-top: var(--spacing-6);
}
.section-hero > .post-media {
margin-bottom: var(--spacing-8);
margin-top: calc(var(--spacing-3) * -1);
}
.section-hero > p {
margin-bottom: 0;
margin-top: var(--vertical-rhythm);
}
.section-pricing .pricing-wrapper {
align-items: center;
display: flex;
flex-direction: column;
position: relative;
width: auto;
}
.section-pricing .pricing-toggle {
align-self: flex-start;
gap: var(--spacing-1);
margin-bottom: var(--spacing-8);
position: relative;
z-index: 1;
}
.section-pricing .pricing-trial {
display: none;
}
.section-pricing .pricing-toggle-monthly,
.section-pricing .pricing-toggle-yearly {
--button--min-height: 2.125rem;
--button--font-size: var(--font-small);
--button--color: var(--color-contrast);
--button--background-color: transparent;
--button-hover--opacity: 1;
--button-hover--color: var(--color-contrast);
--button-hover--background-color: var(--color-background-300);
}
.section-pricing .pricing-toggle-input-monthly:checked ~ .pricing-toggle > .pricing-toggle-monthly,
.section-pricing .pricing-toggle-input-yearly:checked ~ .pricing-toggle > .pricing-toggle-yearly {
--button--background-color: var(--color-background-300);
}
.section-pricing .pricing-container {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-8);
position: relative;
width: 100%;
}
.section-pricing .pricing {
border: 1px solid var(--color-border);
border-radius: var(--radius-3);
display: flex;
flex: 1 0 280px;
flex-direction: column;
padding: var(--spacing-7) var(--spacing-8) var(--spacing-8);
position: relative;
}
.section-pricing .pricing-button {
margin-top: auto;
}
.section-pricing .pricing-header {
align-items: center;
display: flex;
margin-bottom: var(--spacing-6);
width: 100%;
}
.section-pricing .pricing-name {
font-size: var(--font-medium);
font-weight: var(--font-weight-semibold);
}
.section-pricing .pricing-price {
color: var(--color-mute);
font-size: var(--font-x-small);
font-weight: var(--font-weight-medium);
gap: var(--spacing-1);
margin-left: auto;
}
.section-pricing .pricing-price > span:first-child {
color: var(--color-contrast);
font-size: var(--font-medium);
font-weight: var(--font-weight-semibold);
}
.section-pricing .pricing-description {
font-size: var(--font-small);
margin-bottom: var(--spacing-7);
margin-top: 0;
}
.section-pricing .pricing-description:has(+ .button) {
margin-bottom: var(--spacing-8);
}
.section-pricing .pricing-benefits {
font-size: var(--font-small);
list-style: none;
margin: 0 0 var(--spacing-8);
padding: 0;
}
.section-pricing .pricing-benefits > li {
padding-left: 1.5rem;
position: relative;
}
.section-pricing .pricing-benefits > li + li {
margin-top: var(--spacing-6);
}
.section-pricing .pricing-benefits > li:after {
background-color: var(--color-accent-foreground);
content: "";
height: 0.563rem;
left: 0.225rem;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
position: absolute;
top: 0.3rem;
width: 0.563rem;
}
.section-pricing .pricing-benefits > li:before {
background-color: var(--ghost-accent-color);
border-radius: 50%;
content: "";
height: 1rem;
left: 0;
position: absolute;
top: 0.1rem;
width: 1rem;
}
.section-pricing .pricing-discount {
bottom: 0;
color: var(--color-mute);
font-size: var(--font-x-small);
font-weight: var(--font-weight-medium);
left: 0;
position: absolute;
right: 0;
text-align: center;
}
.section-pricing .pricing-signin {
border: 1px solid var(--color-border);
border-radius: var(--radius-2);
padding: var(--spacing-7) var(--spacing-8);
}
.section-pricing .pricing-signin > :where(p) {
margin-bottom: var(--spacing-4);
}
.section-pricing + .post-content {
padding: var(--spacing-7) var(--spacing-8) var(--spacing-8);
}
.section-recommendations > div {
display: flex;
flex-wrap: wrap;
}
.section-recommendations .card-recommendation {
border: 1px solid var(--color-border);
border-radius: var(--radius-3);
flex: 1 0 200px;
padding: var(--layout--gap);
position: relative;
}
.section-recommendations .card-recommendation > a {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.section-recommendations .card-recommendation > h3 {
display: inline;
font-size: var(--font-medium);
font-weight: var(--font-weight-medium);
}
.section-recommendations .card-recommendation > h3 > picture {
display: inline;
float: left;
margin-bottom: calc(var(--spacing-1) * -1);
margin-right: var(--spacing-4);
}
.section-recommendations .card-recommendation > h3 > picture > img {
border-radius: var(--radius-1);
height: 22px;
-o-object-fit: cover;
object-fit: cover;
position: relative;
width: 22px;
}
.section-recommendations .card-recommendation > h3 > picture > img:before {
background-color: var(--color-background-300);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.section-recommendations .card-recommendation > p {
margin-top: var(--spacing-4);
}
.section-tags-list {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-5);
}
.section-tags-card {
border: 1px solid var(--color-border);
border-radius: 2rem;
display: flex;
flex: 1 0 200px;
flex-direction: column;
min-height: calc(var(--avatar--size) + var(--spacing-4) * 2 + 2px);
padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) calc(var(--avatar--size) + var(--spacing-4) * 2);
position: relative;
}
.section-tags-card > a {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.section-tags-card > figure {
margin: 0;
}
.section-tags-card > figure img {
border-radius: 50%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
.section-tags-card > div {
background-color: var(--tag--color, var(--color-background-300));
border-radius: 50%;
}
.section-tags-card > div,
.section-tags-card > figure {
height: var(--avatar--size);
left: var(--spacing-4);
position: absolute;
top: var(--spacing-4);
width: var(--avatar--size);
}
.section-tags-card > h3 {
font-size: var(--font-medium);
font-weight: var(--font-weight-medium);
margin-bottom: auto;
margin-top: auto;
}
.section-tags-card > h3 > a {
-webkit-text-decoration: none;
text-decoration: none;
}
.section-tags-card > span {
color: var(--color-secondary);
font-size: var(--font-small);
font-weight: var(--font-weight-medium);
}
.section-tags-card-head {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
min-height: var(--avatar--size);
padding-left: calc(var(--avatar--size) + var(--spacing-4));
position: relative;
}
.section-tags-card-head > a {
left: 0;
position: absolute;
top: 0;
}
.section-tags-card-head > h3 {
font-size: var(--font-medium);
font-weight: var(--font-weight-medium);
margin-bottom: auto;
margin-top: auto;
}
.section-tags-card-head > h3 > a {
-webkit-text-decoration: none;
text-decoration: none;
}
.section-tags-card-head > span {
color: var(--color-secondary);
font-size: var(--font-small);
font-weight: var(--font-weight-medium);
}
.author {
--avatar--size: 100px;
--avatar--border: 4px;
padding: calc(var(--layout--gap) - var(--spacing-2)) var(--layout--gap);
}
@media (max-width: 1099px) {
.author,
.author .avatar-author {
--avatar--size: 60px;
}
}
.author:has(.author-cover),
.author:has(.avatar-author) {
padding-top: var(--layout--gap);
}
.author > p {
margin-bottom: 0;
margin-top: var(--spacing-7);
}
.author > h1 + span {
margin-top: var(--spacing-2);
}
.author > p + span {
margin-top: var(--spacing-7);
}
.author > span {
color: var(--color-secondary);
display: block;
font-size: var(--font-small);
font-weight: var(--font-weight-medium);
}
.author > h1 {
margin-top: var(--layout--gap);
}
.author-cover {
display: block;
}
.sections-style-card .author-cover,
.sections-style-cloud .author-cover {
border-top-left-radius: var(--radius-3);
border-top-right-radius: var(--radius-3);
overflow: hidden;
}
.author-cover:has(+ .author-head > .avatar) {
-webkit-mask-image: radial-gradient(
circle calc(var(--avatar--size) * 0.5) at calc(var(--avatar--size) * 0.5 + var(--layout--gap) + var(--avatar--border-compensate, 0px)) 100%,
transparent calc(var(--avatar--size) * 0.5 + var(--avatar--border)),
#000 calc(var(--avatar--size) * 0.5 + var(--avatar--border) + 0.5px)
);
mask-image: radial-gradient(
circle calc(var(--avatar--size) * 0.5) at calc(var(--avatar--size) * 0.5 + var(--layout--gap) + var(--avatar--border-compensate, 0px)) 100%,
transparent calc(var(--avatar--size) * 0.5 + var(--avatar--border)),
#000 calc(var(--avatar--size) * 0.5 + var(--avatar--border) + 0.5px)
);
}
.author-cover > img {
aspect-ratio: 21/9;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
.author-cover > img,
div.author-cover {
background-color: var(--color-background-200);
}
div.author-cover {
height: 130px;
}
.author-head > .avatar {
flex: 0 0 auto;
margin-right: auto;
}
.author-head {
align-items: flex-end;
display: flex;
flex-wrap: wrap;
gap: var(--layout--gap);
position: relative;
}
.author-cover + .author-head:has(> .avatar) {
margin-top: calc(var(--avatar--size) * -0.5);
}
.author-head > .social-links-author {
--social-links--gap-v: calc(var(--spacing-3) - 1px);
--social-links--gap-h: calc(var(--spacing-3) - 1px);
flex: 1 0 0%;
justify-content: flex-end;
margin: 0 0 -1px;
}
@media (max-width: 1099px) {
.author-head > .social-links-author {
flex: 0 0 100%;
justify-content: flex-start;
}
}
.author-head > .social-links-author:empty {
display: none;
}
.author-head > .social-links-author > li {
flex: 0 0 auto;
}
.author-head > .social-links-author .label {
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
}
.author-head > .social-links-author a {
background-clip: padding-box;
background-color: var(--color-background);
border: 1px solid var(--color-border);
outline-offset: calc(var(--spacing-3) * -0.5 + 1px);
transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.author-head > .social-links-author a:before {
transition: transform 0.15s ease;
}
.author-head > .social-links-author a:hover {
background-color: var(--color-background-200);
border-color: transparent;
color: var(--color-contrast);
transform: scale(1.15);
}
.author-head > .social-links-author a:hover:before {
transform: scale(0.95);
}
.author-head > .social-links-author a > svg {
display: block;
height: var(--font-small);
width: var(--font-small);
}
.content > .post:not(.custom-page) {
padding: var(--spacing-8);
}
.content > .post:not(.custom-page) > .section-hero {
margin-bottom: var(--spacing-8);
}
.content > .post:not(.custom-page) > p {
margin-bottom: 0;
margin-top: var(--vertical-rhythm);
}
.content > .post:not(.custom-page) > .post-content-wrapper {
margin-top: var(--vertical-rhythm);
}
.post-head {
grid-gap: var(--spacing-1) var(--spacing-6);
display: grid;
gap: var(--spacing-1) var(--spacing-6);
position: relative;
}
.post-head:has(> .post-authors) {
display: grid;
grid-template-columns: var(--avatar--size) auto;
}
.post-head:has(> .post-tag) > .post-authors {
grid-row: span 2;
}
.post-head:not(:has(> .post-tag)) > .post-title > .label {
align-self: center;
}
.post-head:not(:has(> .post-tag)) .post-status-icons {
align-self: start;
}
.post-head:has(.post-author:nth-child(4)) .post-authors {
height: var(--avatar--size);
width: var(--avatar--size);
}
.post-head:has(.post-author:nth-child(4)) .post-authors > .post-author {
position: absolute;
}
.post-head:has(.post-author:nth-child(4)) .post-authors > .post-author > a > .avatar {
height: 22px;
width: 22px;
}
.post-head:has(.post-author:nth-child(4)) .post-authors > .post-author:first-child {
left: 0;
top: 0;
z-index: 3;
}
.post-head:has(.post-author:nth-child(4)) .post-authors > .post-author:nth-child(2) {
right: 0;
top: 0;
z-index: 2;
}
.post-head:has(.post-author:nth-child(4)) .post-authors > .post-author:nth-child(2) > a {
-webkit-mask-image: radial-gradient(circle 22px at calc(-50% + 5.5px) 50%, transparent 50%, #000 calc(50% + 1px));
mask-image: radial-gradient(circle 22px at calc(-50% + 5.5px) 50%, transparent 50%, #000 calc(50% + 1px));
}
.post-head:has(.post-author:nth-child(4)) .post-authors > .post-author:nth-child(3) {
bottom: 0;
left: 0;
z-index: 1;
}
.post-head:has(.post-author:nth-child(4)) .post-authors > .post-author:nth-child(3) > a {
-webkit-mask-image: radial-gradient(circle 22px at 50% calc(-50% + 5.5px), transparent 50%, #000 calc(50% + 1px));
mask-image: radial-gradient(circle 22px at 50% calc(-50% + 5.5px), transparent 50%, #000 calc(50% + 1px));
}
.post-head:has(.post-author:nth-child(4)) .post-authors > .post-author:nth-child(4) {
bottom: 0;
right: 0;
z-index: 0;
}
.post-head:has(.post-author:nth-child(4)) .post-authors > .post-author:nth-child(4) > a {
-webkit-mask-image: radial-gradient(circle 22px at 50% calc(-50% + 5.5px), transparent 50%, #000 calc(50% + 1px));
mask-image: radial-gradient(circle 22px at 50% calc(-50% + 5.5px), transparent 50%, #000 calc(50% + 1px));
}
.post-head:has(.post-author:nth-child(4)) .post-authors > .post-author:nth-child(4) > a > .avatar {
-webkit-mask-image: radial-gradient(circle 22px at calc(-50% + 5.5px) 50%, transparent 50%, #000 calc(50% + 1px));
mask-image: radial-gradient(circle 22px at calc(-50% + 5.5px) 50%, transparent 50%, #000 calc(50% + 1px));
}
.post-head:has(.post-author:last-child:nth-child(3)) .post-authors {
height: var(--avatar--size);
}
.post-head:has(.post-author:last-child:nth-child(3)) .post-authors > .post-author:first-child > a {
-webkit-mask-image: radial-gradient(circle 21px at calc(100% - 5px) calc(100% - 5px), transparent 50%, #000 calc(50% + 1px));
mask-image: radial-gradient(circle 21px at calc(100% - 5px) calc(100% - 5px), transparent 50%, #000 calc(50% + 1px));
}
.post-head:has(.post-author:last-child:nth-child(3)) .post-authors > .post-author:first-child > a > .avatar {
-webkit-mask-image: radial-gradient(circle 21px at calc(100% - 19px) calc(100% - 5px), transparent 50%, #000 calc(50% + 1px));
mask-image: radial-gradient(circle 21px at calc(100% - 19px) calc(100% - 5px), transparent 50%, #000 calc(50% + 1px));
}
.post-head:has(.post-author:last-child:nth-child(3)) .post-authors > .post-author:nth-child(2) {
bottom: -4px;
position: absolute;
right: -4px;
z-index: 2;
}
.post-head:has(.post-author:last-child:nth-child(3)) .post-authors > .post-author:nth-child(3) {
bottom: -4px;
position: absolute;
right: 10px;
z-index: 1;
}
.post-head:has(.post-author:last-child:nth-child(3)) .post-authors > .post-author:nth-child(3) > a {
-webkit-mask-image: radial-gradient(circle 21px at calc(100% + 5px) 50%, transparent 50%, #000 calc(50% + 1px));
mask-image: radial-gradient(circle 21px at calc(100% + 5px) 50%, transparent 50%, #000 calc(50% + 1px));
}
.post-head:has(.post-author:last-child:nth-child(2)) .post-authors {
height: var(--avatar--size);
}
.post-head:has(.post-author:last-child:nth-child(2)) .post-authors > .post-author:first-child > a {
-webkit-mask-image: radial-gradient(circle 21px at calc(100% - 5px) calc(100% - 5px), transparent 50%, #000 calc(50% + 1px));
mask-image: radial-gradient(circle 21px at calc(100% - 5px) calc(100% - 5px), transparent 50%, #000 calc(50% + 1px));
}
.post-head:has(.post-author:last-child:nth-child(2)) .post-authors > .post-author:nth-child(2) {
bottom: -4px;
position: absolute;
right: -4px;
z-index: 1;
}
.post-head .post-authors {
position: relative;
z-index: 1;
}
.post-head > .post-title {
display: flex;
font-size: var(--font-medium);
font-weight: var(--font-weight-semibold);
gap: var(--spacing-6);
line-height: 1.3;
}
.post-head > .post-title > .label {
display: block;
flex: 1 0 0%;
-webkit-text-decoration: none;
text-decoration: none;
}
.post-head > .post-tag {
color: var(--color-secondary);
font-size: var(--font-small);
justify-self: start;
-webkit-text-decoration: none;
text-decoration: none;
}
.post-head > .post-tag:hover {
color: var(--color-contrast);
}
.post-head .post-status-icons {
color: var(--color-contrast);
display: flex;
flex: 0 0 auto;
margin: calc(var(--spacing-4) * -1);
}
.post-head .post-status-icons > span {
padding: var(--spacing-3);
}
.post-head .post-status-icons > span:last-child > .tooltip {
left: auto;
right: 0;
translate: none;
}
.post-head .post-status-icons > span:last-child > .tooltip:before {
left: auto;
margin-left: 0;
margin-right: -4px;
right: calc(0.625rem + var(--spacing-3));
}
.post-head .post-status-icons svg {
height: 1.25rem;
width: 1.25rem;
}
.post-media {
--post--media--radius: var(--radius-3);
margin: var(--vertical-rhythm) auto 0;
max-width: var(--featured-image--max-width);
padding: var(--spacing-3) 0;
position: relative;
width: 100%;
}
.post-media:not(:has(> :first-child)) {
display: none;
}
.post-media > .post-featured-image {
margin: 0;
width: 100%;
}
.post-media > .post-featured-image > picture {
background-color: var(--color-background-300);
display: block;
overflow: hidden;
}
.post-media > .post-featured-image > [aria-expanded="true"] + picture {
border-radius: 0;
}
.post-media > .post-featured-video {
margin: 0;
width: 100%;
}
.post-media > .post-featured-video iframe:not([src*="player.vimeo.com"]),
.post-media > .post-featured-video video {
background-color: transparent;
}
.post-media > .post-featured-image img,
.post-media > .post-featured-video .kg-video-container,
.post-media > .post-featured-video iframe,
.post-media > .post-featured-video video,
.post-media > iframe,
.post-media > video.post-featured-video {
aspect-ratio: var(--featured-image--aspect-ratio);
height: auto;
width: 100%;
}
.post-media > .post-featured-image img,
.post-media > .post-featured-video video,
.post-media > video.post-featured-video {
-o-object-fit: cover;
object-fit: cover;
}
.post-media:has(> .post-featured-video) > .post-featured-image figcaption {
display: none;
}
.post-media:has(> .post-featured-video) > .post-featured-image {
left: 0;
position: absolute;
top: var(--spacing-3);
}
.post-media:has(> .post-featured-video) .lightbox-trigger {
display: none;
}
.post-media > .post-featured-image > picture {
border-radius: var(--post--media--radius);
}
.post-media > .post-featured-video .kg-video-container,
.post-media > .post-featured-video iframe,
.post-media > .post-featured-video video,
.post-media > iframe.post-featured-video,
.post-media > video.post-featured-video {
clip-path: inset(0 round var(--post--media--radius));
}
.post-footer {
align-items: center;
display: flex;
gap: var(--spacing-1);
margin-top: calc(var(--vertical-rhythm) + var(--spacing-3));
position: relative;
}
.post-footer > time {
color: var(--color-secondary);
display: flex;
flex-direction: column;
font-size: var(--font-small);
margin-right: auto;
overflow: hidden;
width: -moz-max-content;
width: max-content;
}
.post-footer > time > span {
transition: transform 0.25s ease;
white-space: nowrap;
}
.post-footer > time > span:first-letter {
text-transform: uppercase;
}
.post-footer > time > span:last-child {
margin-bottom: -1lh;
}
.post-footer > time:hover > span {
transform: translateY(-100%);
}
.post-footer > .button {
flex: 0 0 auto;
margin-bottom: calc(var(--spacing-4) * -1);
margin-top: calc(var(--spacing-4) * -1);
}
.post-footer > .button > .label > span {
color: var(--color-secondary);
padding-right: var(--spacing-2);
}
.post-footer > .button > .label:empty,
.post-footer > .button > .label:has(script) {
display: none;
}
.post-footer > .dropdown-share {
flex: 0 0 auto;
margin: calc(var(--spacing-4) * -1);
}
.post-footer > .button + .dropdown-share {
margin-left: calc(var(--spacing-3) * -1);
}
.post-footer .button {
--button--padding-v: var(--spacing-4);
--button--padding-h: var(--spacing-4);
--button--font-size: var(--font-small);
--button--font-weight: var(--font-weight-regular);
--button--min-height: auto;
--button--color: var(--color-contrast);
--button--background-color: var(--color-transparent);
--button-hover--color: var(--color-contrast);
--button-hover--background-color: var(--color-background-300);
}
.post-footer .button > svg {
height: 1.25rem;
width: 1.25rem;
}
.post-content:not(:first-child),
.post-content > * {
margin-top: var(--vertical-rhythm);
}
.post-content > * {
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.post-content > :first-child {
margin-top: 0;
}
.post-content > :last-child {
margin-bottom: 0;
}
.post-content > :where(h1, h2, h3, h4, h5, h6) {
margin-top: calc(var(--vertical-rhythm) * 3);
scroll-margin-top: var(--vertical-rhythm);
}
.post-content > h1 + :where(h2, h3, h4, h5, h6),
.post-content > h2 + :where(h3, h4, h5, h6),
.post-content > h3 + :where(h4, h5, h6),
.post-content > h4 + :where(h5, h6),
.post-content > h5 + :where(h6) {
margin-top: var(--vertical-rhythm);
}
.post-content > :where(.kg-card) {
margin-bottom: calc(var(--vertical-rhythm) + var(--spacing-3));
margin-top: calc(var(--vertical-rhythm) + var(--spacing-3));
}
.post-content > :where(hr) {
margin-bottom: calc(var(--vertical-rhythm) * 2);
margin-top: calc(var(--vertical-rhythm) * 2);
}
.post-content > .kg-width-wide {
margin-left: calc(var(--layout--gap) * -0.5);
margin-right: calc(var(--layout--gap) * -0.5);
max-width: calc(100% + var(--layout--gap));
}
.post-content > .kg-width-full {
margin-left: calc(var(--layout--gap) * -1);
margin-right: calc(var(--layout--gap) * -1);
max-width: calc(100% + var(--layout--gap) * 2);
}
.post-content-teaser {
position: relative;
}
.post-content-teaser:before {
background-image: linear-gradient(180deg, transparent 0, var(--color-background) 100%);
bottom: 0;
content: "";
height: 150px;
left: 0;
max-height: 100%;
pointer-events: none;
position: absolute;
width: 100%;
z-index: 1;
}
.post-upgrade-cta {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--spacing-6);
margin: var(--spacing-7) auto 0;
max-width: 500px;
padding: var(--spacing-10) 0;
scroll-margin-top: var(--spacing-7);
text-align: center;
width: 100%;
}
.post-upgrade-cta a {
cursor: pointer;
}
.post-upgrade-cta h2 {
font-size: 1.0625rem;
margin-bottom: 0;
}
.post-upgrade-cta p {
margin-bottom: 0;
}
.post-upgrade-cta .button {
margin: var(--spacing-2) 0;
}
.page-error-card {
left: 0;
position: sticky;
top: var(--layout--gap);
}
.page-error-card > p {
margin-top: var(--spacing-4);
}
.tag {
padding: calc(var(--layout--gap) - var(--spacing-2)) var(--layout--gap);
}
.tag:has(> picture) {
padding-top: var(--layout--gap);
}
.tag > picture {
display: block;
}
.tag > picture > img {
aspect-ratio: var(--featured-image--aspect-ratio);
background-color: var(--color-background-300);
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
.tag > picture + h1 {
margin-top: var(--spacing-7);
}
.tag > p {
margin-bottom: 0;
margin-top: var(--vertical-rhythm);
}
.tag > span {
color: var(--color-secondary);
display: block;
font-size: var(--font-small);
font-weight: var(--font-weight-medium);
}
.tag > p + span {
margin-top: var(--vertical-rhythm);
}
.tag > h1 + span {
margin-top: var(--spacing-2);
}
.post-content .kg-audio-thumbnail,
.post-content .kg-video-card video,
.post-content .kg-video-overlay {
clip-path: inset(0 round var(--radius-2));
}
.post-content .kg-video-player-container {
clip-path: inset(0 round 0 0 var(--radius-2) var(--radius-2));
}
.post-content .kg-embed-card > iframe {
clip-path: inset(0 round var(--radius-2));
}