/* vskosmatov.pub — основа визуального стиля первой версии */
:root {
  color-scheme: dark;
  --color-background: #1e1e1e;
  --color-text: #d4d4d4;
  --color-description: #bcbcbc;
  --color-muted: #a0a0a0;
  --color-link: #4fc1e8;
  --color-divider: #454545;
  --font-mono: Consolas, "SFMono-Regular", Menlo, Monaco, monospace;
  --content-width: 40rem;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font: 1rem/1.75 var(--font-mono);
  overflow-wrap: anywhere;
}
a { color: var(--color-link); text-underline-offset: 0.2em; }
a:focus-visible { outline: 2px solid var(--color-link); outline-offset: 4px; }
img, video { display: block; max-width: 100%; height: auto; }

.site { width: min(100% - 2.5rem, var(--content-width)); margin-inline: auto; }
.profile { display: flex; align-items: center; gap: 1.375rem; margin: 3.75rem 0 3.5rem; }
.profile__photo { width: 4rem; height: 4rem; flex: none; border-radius: 50%; object-fit: cover; }
.profile__title { margin: 0; color: var(--color-text); font-size: 1.3125rem; line-height: 1.4; font-weight: 600; }
.profile__description { margin: 0.4375rem 0 0.75rem; color: var(--color-description); font-size: 0.875rem; }
.profile__link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; text-decoration: none; }
.profile__link span { text-decoration: underline; text-underline-offset: 0.2em; }
.profile__link:hover span { color: #8bd9f2; }
.profile__link-icon { width: 1.125rem; height: 1.125rem; flex: none; }
.post { padding: 1.75rem 0 2.75rem; border-top: 1px solid var(--color-divider); }
.post__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; color: var(--color-muted); font-size: 0.8125rem; }
.post__body { margin-top: 1.5rem; }
.post__body strong, .post__body b { color: #fff; font-weight: 700; }
.post__formatted { white-space: pre-wrap; }
.post__formatted code { font: inherit; white-space: pre-wrap; }
.post__body > :first-child { margin-top: 0; }
.post__body > :last-child { margin-bottom: 0; }
.post__body img, .post__body video, .post__body audio { display: block; margin: 1.25rem auto; max-width: 100%; }
.video-player { position: relative; width: fit-content; max-width: 100%; margin: 1.25rem auto; }
.post__body .video-player video { margin: 0; }
.video-player__play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 3.75rem; height: 3.75rem; padding: 0 0 0 0.2rem; border: 0; border-radius: 50%; background: rgba(25, 25, 25, 0.72); box-shadow: 0 2px 18px rgba(0, 0, 0, 0.26); color: #fff; font-size: 1.25rem; cursor: pointer; }
.video-player__play[hidden] { display: none; }
.video-player__play:hover { background: rgba(45, 45, 45, 0.9); }
.video-player__play:focus-visible { outline: 2px solid var(--color-link); outline-offset: 4px; }
.post__body pre { overflow-x: auto; white-space: pre; }
.post__body blockquote { margin: 1.25rem 0; padding: 0.75rem 1rem; border-left: 2px solid var(--color-divider); background: #2b2b2b; color: var(--color-description); }
.post__body blockquote > :first-child { margin-top: 0; }
.post__body blockquote > :last-child { margin-bottom: 0; }
.post__body blockquote strong, .post__body blockquote b { color: #dedede; }
.link-preview { display: flex; align-items: stretch; gap: 0.875rem; margin: 1.5rem 0 0; padding: 0.75rem; border: 1px solid #454e52; background: #22282b; text-decoration: none; }
.post__body .link-preview__image { width: 8rem; height: auto; max-height: 6rem; aspect-ratio: 16 / 9; object-fit: cover; flex: none; margin: 0; }
.link-preview__text { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 0.25rem; }
.link-preview__title { color: var(--color-text); font-size: 0.875rem; line-height: 1.45; }
.link-preview__domain { color: var(--color-muted); font-size: 0.75rem; }
.link-preview:hover .link-preview__title { text-decoration: underline; }
.back-to-top { position: fixed; right: max(1rem, calc((100vw - var(--content-width)) / 2 - 4rem)); bottom: max(1.5rem, env(safe-area-inset-bottom)); z-index: 10; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid #555; border-radius: 50%; background: #303030; color: var(--color-text); font: 1.5rem/1 var(--font-mono); cursor: pointer; }
.back-to-top[hidden] { display: none; }
.back-to-top:hover { background: #414141; }
.back-to-top:focus-visible { outline: 2px solid var(--color-link); outline-offset: 4px; }

@media (max-width: 30rem) {
  .profile { align-items: flex-start; gap: 0.9375rem; margin: 3rem 0 2.75rem; }
  .profile__photo { width: 3rem; height: 3rem; }
  .profile__title { font-size: 1.0625rem; }
  .post__body .link-preview__image { width: 5.5rem; }
  .back-to-top { right: 0.75rem; bottom: max(1rem, env(safe-area-inset-bottom)); }
}