@font-face {
  font-family: "Freesentation";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-1Thin.woff2") format("woff2");
}
@font-face {
  font-family: "Freesentation";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-2ExtraLight.woff2") format("woff2");
}
@font-face {
  font-family: "Freesentation";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-3Light.woff2") format("woff2");
}
@font-face {
  font-family: "Freesentation";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-4Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Freesentation";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-5Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Freesentation";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-6SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Freesentation";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-7Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Freesentation";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-8ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: "Freesentation";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-9Black.woff2") format("woff2");
}
:root,
[data-theme=light] {
  --color-base: #ffffff;
  --color-contrast: #000000;
  --color-primary: #0000ee;
  --link-hover-bg: #000000;
  --link-hover-color: #ffffff;
  --color-muted: rgba(0, 0, 0, 0.55);
  --color-subtle-bg: rgba(0, 0, 0, 0.06);
  --color-code-bg: rgba(0, 0, 0, 0.08);
  --color-backdrop: rgba(255, 255, 255, 0.92);
  color-scheme: light;
}

[data-theme=dark] {
  --color-base: #000000;
  --color-contrast: #efefef;
  --color-primary: #ff0100;
  --link-hover-bg: #ffffff;
  --link-hover-color: #000000;
  --color-muted: rgba(239, 239, 239, 0.6);
  --color-subtle-bg: rgba(255, 255, 255, 0.08);
  --color-code-bg: rgba(255, 255, 255, 0.1);
  --color-backdrop: rgba(0, 0, 0, 0.92);
  color-scheme: dark;
}

:root {
  --content-size: 1020px;
  --spacing-30: 0.5rem;
  --spacing-40: 1.125rem;
  --spacing-50: clamp(1.625rem, 3vw, 2.25rem);
  --spacing-60: clamp(2.25rem, 6vw, 4.5rem);
  --spacing-70: clamp(3.375rem, 9vw, 6.75rem);
  --spacing-80: clamp(4.5rem, 12vw, 9rem);
  --font-family-sans: 'Freesentation', 'Pretendard Variable',
    'Pretendard', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    sans-serif;
  --font-family-mono: 'Freesentation', 'Pretendard Variable',
    'Pretendard', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  --font-size-x-small: clamp(0.875rem, 0.8rem + 0.32vw, 1.215rem);
  --font-size-small: clamp(1rem, 0.9rem + 0.45vw, 1.458rem);
  --font-size-medium: clamp(1.125rem, 0.96rem + 0.72vw, 1.75rem);
  --font-size-large: clamp(1.35rem, 1.12rem + 0.95vw, 2.1rem);
  --font-size-x-large: clamp(1.6rem, 1.3rem + 1.2vw, 2.52rem);
  --font-size-xx-large: clamp(1.85rem, 1.45rem + 1.55vw, 3.024rem);
  --line-height-base: 1.285714286;
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 12px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-base);
  color: var(--color-contrast);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-medium);
  font-weight: 400;
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.theme-transition body,
html.theme-transition a,
html.theme-transition button,
html.theme-transition pre,
html.theme-transition code,
html.theme-transition blockquote,
html.theme-transition .theme-toggle-link,
html.theme-transition .query-header,
html.theme-transition .embed-youtube,
html.theme-transition .embed-tweet,
html.theme-transition .embed-tweet__media-grid,
html.theme-transition .embed-tweet__media-btn,
html.theme-transition .embed-tweet__video-wrap,
html.theme-transition .embed-tweet__footer {
  transition: background-color 0.22s var(--ease-smooth), color 0.22s var(--ease-smooth), border-color 0.22s var(--ease-smooth);
}

@keyframes viewFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.view-enter {
  animation: viewFadeIn 0.26s var(--ease-smooth) both;
}

@media (prefers-reduced-motion: reduce) {
  .view-enter {
    animation: none;
  }
}
a {
  color: var(--color-contrast);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.1em;
  transition: background-color 0.15s ease, color 0.15s ease;
}
a:hover {
  background-color: var(--link-hover-bg);
  color: var(--link-hover-color);
  text-decoration: none;
}
a:focus-visible {
  outline: 1px dashed var(--color-contrast);
  outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 400;
  line-height: calc(1em + 0.5rem);
  color: var(--color-contrast);
}

h1 {
  font-size: var(--font-size-xx-large);
  font-weight: bold;
}

h2 {
  font-size: var(--font-size-x-large);
  font-weight: bold;
}

h3 {
  font-size: var(--font-size-large);
}

h4 {
  font-size: var(--font-size-medium);
}

h5,
h6 {
  font-size: var(--font-size-small);
}

p {
  margin: 0;
  line-height: calc(1em + 0.5rem);
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

blockquote {
  margin: var(--spacing-50) 0;
  padding-left: var(--spacing-50);
  border-left: 1px solid var(--color-contrast);
  font-style: italic;
}

pre {
  margin: var(--spacing-50) 0;
  padding: var(--spacing-40);
  border: 1px solid var(--color-contrast);
  background-color: var(--color-code-bg);
  font-family: var(--font-family-mono);
  font-size: 0.85em;
  line-height: 1.5;
  overflow-x: auto;
}
pre code {
  background: none;
  padding: 0;
  border: 0;
  font-size: inherit;
}

code {
  font-family: var(--font-family-mono);
  font-size: 0.85em;
  background-color: var(--color-code-bg);
  padding: 0.1em 0.35em;
}

hr {
  border: 0;
  border-bottom: 1px solid var(--color-contrast);
  margin: var(--spacing-50) 0;
}

ul,
ol {
  padding-left: var(--spacing-50);
}

.site-shell {
  flex: 1 0 auto;
  width: 100%;
}

.trellick-columns {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--spacing-50);
  width: 100%;
  padding-left: var(--spacing-50);
  padding-right: var(--spacing-50);
}

.col-left {
  flex: 0 0 16%;
  max-width: 16%;
}

.col-center {
  flex: 1 1 auto;
  min-width: 0;
}

.col-right {
  flex: 0 0 16%;
  max-width: 16%;
}

.sticky-panel {
  position: sticky;
  top: 0;
  padding-top: var(--spacing-60);
}

.main-area {
  padding-top: var(--spacing-60);
  max-width: var(--content-size);
  width: 100%;
}

.footer-columns {
  margin-top: auto;
  padding-top: var(--spacing-60);
  padding-bottom: var(--spacing-50);
  padding-left: var(--spacing-50);
  padding-right: var(--spacing-50);
}

.site-footer {
  font-size: var(--font-size-x-small);
  line-height: calc(1em + 0.4rem);
  color: var(--color-contrast);
}

@media (max-width: 900px) {
  .trellick-columns {
    flex-direction: column;
    gap: 0;
  }
  .col-left,
  .col-center,
  .col-right {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
  }
  .sticky-panel {
    position: static;
    padding-top: var(--spacing-50);
  }
  .main-area {
    padding-top: var(--spacing-50);
  }
  .col-right .sticky-panel {
    padding-top: var(--spacing-60);
  }
  .footer-columns .col-left,
  .footer-columns .col-right {
    display: none;
  }
}
.site-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-title {
  font-size: var(--font-size-medium);
  font-weight: 400;
  line-height: calc(1em + 0.5rem);
  margin: 0;
}
.site-title a {
  text-decoration: none;
  color: var(--color-contrast);
}
.site-title a:hover {
  background-color: var(--link-hover-bg);
  color: var(--link-hover-color);
  text-decoration: none;
}

.theme-toggle-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--color-contrast);
  font-family: inherit;
  font-size: var(--font-size-x-small);
  font-weight: 400;
  line-height: var(--line-height-base);
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.1em;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.theme-toggle-link:hover {
  background-color: var(--link-hover-bg);
  color: var(--link-hover-color);
  text-decoration: none;
}
.theme-toggle-link:focus-visible {
  outline: 1px dashed var(--color-contrast);
  outline-offset: 3px;
}

.query-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-30) var(--spacing-40);
  margin-bottom: var(--spacing-50);
  padding-bottom: var(--spacing-30);
  border-bottom: 1px solid var(--color-contrast);
}
.query-header__title {
  font-size: var(--font-size-medium);
  font-weight: 400;
  line-height: calc(1em + 0.5rem);
}
.query-header__reset {
  font-size: var(--font-size-x-small);
}

.post-list {
  list-style: none;
  margin: 0 0 var(--spacing-60) 0;
  padding: 0;
}
.post-list > .post-item + .post-item {
  margin-top: var(--spacing-40);
}

.post-item {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-40);
}
.post-item__thumb-link {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  margin-top: 4px;
  display: block;
  background-color: var(--color-subtle-bg);
  overflow: hidden;
  text-decoration: none;
}
@media (max-width: 480px) {
  .post-item__thumb-link {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
  }
}
.post-item__thumb-link:hover {
  background-color: var(--color-subtle-bg);
  color: var(--color-contrast);
}
.post-item__thumb-link:hover .post-item__thumb {
  transform: scale(1.05);
}
.post-item__thumb {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  transition: transform 0.25s var(--ease-smooth);
}
.post-item__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-contrast);
  font-size: var(--font-size-x-small);
  color: var(--color-muted);
  user-select: none;
}
.post-item__meta {
  min-width: 0;
  flex: 1 1 auto;
}
.post-item__date {
  display: block;
  font-size: var(--font-size-x-small);
  line-height: var(--line-height-base);
  color: var(--color-contrast);
}
.post-item__title {
  margin: 0;
  font-size: var(--font-size-medium);
  font-weight: 400;
  line-height: calc(1em + 0.5rem);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.post-item__title a {
  text-decoration: none;
  color: var(--color-contrast);
}
.post-item__title a:hover {
  background-color: var(--link-hover-bg);
  color: var(--link-hover-color);
  text-decoration: none;
}
.post-item__summary {
  margin-top: 0.2rem;
  font-size: var(--font-size-x-small);
  color: var(--color-muted);
  line-height: 1.45;
}

.single-post {
  margin-bottom: var(--spacing-70);
}
.single-post__back {
  display: inline-block;
  margin-bottom: var(--spacing-40);
  font-size: var(--font-size-x-small);
}
.single-post__header {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--spacing-40);
  margin-bottom: var(--spacing-50);
}
.single-post__thumb-btn {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background-color: var(--color-subtle-bg);
  cursor: zoom-in;
  overflow: hidden;
  display: block;
}
.single-post__thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s var(--ease-smooth);
}
.single-post__thumb-btn:hover img {
  transform: scale(1.06);
}
.single-post__thumb-placeholder {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-contrast);
  font-size: var(--font-size-x-small);
  color: var(--color-muted);
}
.single-post__heading-wrap {
  min-width: 0;
  flex: 1 1 auto;
}
.single-post__date {
  display: block;
  font-size: var(--font-size-x-small);
  line-height: var(--line-height-base);
}
.single-post__title {
  font-size: var(--font-size-medium);
  font-weight: 400;
  line-height: calc(1em + 0.5rem);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.single-post__featured-media {
  margin: 0 0 var(--spacing-50) 0;
}
.single-post__featured-media img {
  display: block;
  max-width: 100%;
  height: auto;
}
.single-post__content {
  margin-top: var(--spacing-50);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.single-post__content > * + * {
  margin-top: var(--spacing-40);
}
.single-post__content h1,
.single-post__content h2,
.single-post__content h3,
.single-post__content h4,
.single-post__content h5,
.single-post__content h6 {
  margin-top: var(--spacing-60);
  margin-bottom: var(--spacing-40);
}
.single-post__content p {
  line-height: calc(1em + 0.5rem);
}
.single-post__content strong,
.single-post__content b {
  font-weight: 700;
}
.single-post__content ul,
.single-post__content ol {
  margin-top: var(--spacing-40);
  margin-bottom: var(--spacing-40);
}
.single-post__content ul li + li,
.single-post__content ol li + li {
  margin-top: 0.35rem;
}
.single-post__content ul.lexical-checklist {
  list-style: none;
  padding-left: 0;
}
.single-post__content ul.lexical-checklist li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.single-post__content figure,
.single-post__content figure.lexical-media {
  margin: var(--spacing-50) 0;
}
.single-post__content figure img,
.single-post__content figure.lexical-media img {
  display: block;
  max-width: 100%;
  height: auto;
}
.single-post__content figure figcaption,
.single-post__content figure.lexical-media figcaption {
  margin-top: var(--spacing-30);
  font-size: var(--font-size-x-small);
  color: var(--color-muted);
}
.single-post__content > .embed-youtube,
.single-post__content > .embed-tweet {
  margin-top: var(--spacing-50);
  margin-bottom: var(--spacing-50);
}
.single-post__content > .embed-youtube:first-child,
.single-post__content > .embed-tweet:first-child {
  margin-top: 0;
}
.single-post__content > .embed-youtube:last-child,
.single-post__content > .embed-tweet:last-child {
  margin-bottom: 0;
}
.single-post__footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-40);
  margin-top: var(--spacing-50);
  font-size: var(--font-size-x-small);
}

.post-navigation,
.query-pagination {
  margin-top: var(--spacing-70);
  margin-bottom: var(--spacing-70);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-50);
}

.post-navigation {
  font-size: var(--font-size-x-small);
}

.sidebar {
  display: flex;
  flex-direction: column;
}

.sidebar-group {
  padding-bottom: var(--spacing-50);
}
.sidebar-group__title {
  font-size: var(--font-size-x-small);
  font-weight: 400;
  line-height: calc(1em + 0.5rem);
  margin: 0 0 var(--spacing-40) 0;
}

.sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar-list li {
  margin: 0;
  line-height: var(--line-height-base);
}
.sidebar-list li + li {
  margin-top: 0.15rem;
}
.sidebar-list a,
.sidebar-list a.is-active {
  color: var(--color-contrast);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.1em;
  font-weight: 400;
}
.sidebar-list a:hover,
.sidebar-list a.is-active:hover {
  background-color: var(--link-hover-bg);
  color: var(--link-hover-color);
  text-decoration: none;
}

.state-message {
  padding: var(--spacing-30) 0;
  color: var(--color-muted);
  font-size: var(--font-size-medium);
}
.state-message--error {
  color: var(--color-contrast);
}
.state-message--error p + p {
  margin-top: var(--spacing-30);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-50);
  background-color: var(--color-backdrop);
  cursor: zoom-out;
  animation: viewFadeIn 0.18s var(--ease-smooth) both;
}
.lightbox[hidden] {
  display: none;
}
.lightbox__inner {
  position: relative;
  max-width: min(90vw, 960px);
  max-height: 88vh;
  border: 1px solid var(--color-contrast);
  background-color: var(--color-base);
  padding: var(--spacing-30);
  cursor: default;
}
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(88vh - 3rem);
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox__caption {
  margin-top: var(--spacing-30);
  font-size: var(--font-size-x-small);
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-40);
}
.lightbox__close {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-contrast);
  font-family: inherit;
  font-size: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lightbox__close:hover {
  background-color: var(--link-hover-bg);
  color: var(--link-hover-color);
  text-decoration: none;
}

.embed-youtube {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  margin: var(--spacing-50) 0;
  border: 1px solid var(--color-contrast);
  border-radius: 0;
  background-color: var(--color-subtle-bg);
  overflow: hidden;
}
.embed-youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  display: block;
}

blockquote.embed-tweet,
.embed-tweet {
  margin: var(--spacing-50) 0;
  padding: var(--spacing-40);
  border: 1px solid var(--color-contrast);
  border-radius: 0;
  background-color: var(--color-base);
  color: var(--color-contrast);
  font-style: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}
blockquote.embed-tweet--loading, blockquote.embed-tweet--fallback,
.embed-tweet--loading,
.embed-tweet--fallback {
  background-color: var(--color-subtle-bg);
}
blockquote.embed-tweet__skeleton, blockquote.embed-tweet__fallback-head,
.embed-tweet__skeleton,
.embed-tweet__fallback-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-40);
}
blockquote.embed-tweet__status,
.embed-tweet__status {
  font-family: "JetBrains Mono", var(--font-family-mono);
  font-size: var(--font-size-x-small);
  line-height: 1.3;
  color: var(--color-muted);
}
blockquote.embed-tweet__raw-link, blockquote.embed-tweet__fallback-url,
.embed-tweet__raw-link,
.embed-tweet__fallback-url {
  display: inline-block;
  margin-top: var(--spacing-30);
  font-family: "JetBrains Mono", var(--font-family-mono);
  font-size: var(--font-size-x-small);
  line-height: 1.4;
  word-break: break-all;
}
blockquote.embed-tweet__fallback-badge,
.embed-tweet__fallback-badge {
  font-family: "JetBrains Mono", var(--font-family-mono);
  font-size: var(--font-size-x-small);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-contrast);
}
blockquote.embed-tweet__fallback-msg,
.embed-tweet__fallback-msg {
  margin-top: var(--spacing-30);
  font-size: var(--font-size-x-small);
  line-height: 1.45;
  color: var(--color-muted);
}
blockquote.embed-tweet__header,
.embed-tweet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-40);
}
blockquote.embed-tweet__author,
.embed-tweet__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
blockquote.embed-tweet__avatar,
.embed-tweet__avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-contrast);
  border-radius: 0;
  object-fit: cover;
  display: block;
  background-color: var(--color-subtle-bg);
}
blockquote.embed-tweet__author-meta,
.embed-tweet__author-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.55rem;
  min-width: 0;
}
blockquote.embed-tweet__name,
.embed-tweet__name {
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-contrast);
}
blockquote.embed-tweet__handle,
.embed-tweet__handle {
  font-family: "JetBrains Mono", var(--font-family-mono);
  font-size: var(--font-size-x-small);
  line-height: 1.25;
  color: var(--color-muted);
}
blockquote.embed-tweet__origin,
.embed-tweet__origin {
  flex: 0 0 auto;
  font-family: "JetBrains Mono", var(--font-family-mono);
  font-size: var(--font-size-x-small);
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.12em;
}
blockquote.embed-tweet__body,
.embed-tweet__body {
  margin-top: var(--spacing-40);
  font-size: var(--font-size-small);
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
}
blockquote.embed-tweet__media-grid,
.embed-tweet__media-grid {
  margin-top: var(--spacing-40);
  display: grid;
  gap: 1px;
  border: 1px solid var(--color-contrast);
  border-radius: 0;
  background-color: var(--color-contrast);
  overflow: hidden;
}
blockquote.embed-tweet__media-grid--1,
.embed-tweet__media-grid--1 {
  grid-template-columns: minmax(0, 1fr);
}
blockquote.embed-tweet__media-grid--2,
.embed-tweet__media-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
blockquote.embed-tweet__media-grid--2 .embed-tweet__media-btn,
.embed-tweet__media-grid--2 .embed-tweet__media-btn {
  aspect-ratio: 4/3;
}
blockquote.embed-tweet__media-grid--2 img,
.embed-tweet__media-grid--2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
blockquote.embed-tweet__media-grid--3,
.embed-tweet__media-grid--3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
blockquote.embed-tweet__media-grid--3 .embed-tweet__media-btn:first-child,
.embed-tweet__media-grid--3 .embed-tweet__media-btn:first-child {
  grid-row: span 2;
  height: 100%;
}
blockquote.embed-tweet__media-grid--3 .embed-tweet__media-btn:not(:first-child),
.embed-tweet__media-grid--3 .embed-tweet__media-btn:not(:first-child) {
  aspect-ratio: 4/3;
}
blockquote.embed-tweet__media-grid--3 img,
.embed-tweet__media-grid--3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
blockquote.embed-tweet__media-grid--4,
.embed-tweet__media-grid--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
blockquote.embed-tweet__media-grid--4 .embed-tweet__media-btn,
.embed-tweet__media-grid--4 .embed-tweet__media-btn {
  aspect-ratio: 16/10;
}
blockquote.embed-tweet__media-grid--4 img,
.embed-tweet__media-grid--4 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
blockquote.embed-tweet__media-btn,
.embed-tweet__media-btn {
  appearance: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  display: block;
  background-color: var(--color-base);
  cursor: zoom-in;
  overflow: hidden;
}
blockquote.embed-tweet__media-btn img,
.embed-tweet__media-btn img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  transition: transform 0.25s var(--ease-smooth);
}
blockquote.embed-tweet__media-btn:hover img,
.embed-tweet__media-btn:hover img {
  transform: scale(1.03);
}
blockquote.embed-tweet__media-btn:focus-visible,
.embed-tweet__media-btn:focus-visible {
  outline: 1px dashed var(--color-contrast);
  outline-offset: -3px;
}
blockquote.embed-tweet__video-wrap,
.embed-tweet__video-wrap {
  margin-top: var(--spacing-40);
  border: 1px solid var(--color-contrast);
  border-radius: 0;
  background-color: #000000;
  overflow: hidden;
}
blockquote.embed-tweet__video-wrap video,
.embed-tweet__video-wrap video {
  display: block;
  width: 100%;
  max-height: 540px;
  height: auto;
  border: 0;
  border-radius: 0;
}
blockquote.embed-tweet__footer,
.embed-tweet__footer {
  margin-top: var(--spacing-40);
  padding-top: var(--spacing-30);
  border-top: 1px solid var(--color-subtle-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
blockquote.embed-tweet__date,
.embed-tweet__date {
  font-family: "JetBrains Mono", var(--font-family-mono);
  font-size: var(--font-size-x-small);
  line-height: 1.2;
  color: var(--color-muted);
}

/*# sourceMappingURL=style.css.map */