:root {
  color-scheme: light dark;
  --bg: #ffffff; --fg: #1a1a1a; --muted: #6b6b6b;
  --link: #0a58ca; --border: #e6e6e6; --code-bg: #f4f4f4;
  --input-bg: #ffffff; --fwd-bg: #eef2fb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --fg: #e6e6e6; --muted: #8a8a8a;
    --link: #6cb6ff; --border: #1c1c1c; --code-bg: #0d0d0d;
    --input-bg: #2a2a2a; --fwd-bg: #0a1024;
  }
}
* { box-sizing: border-box; }
body {
  width: 95vw; margin: 0 auto; padding: 1rem;
  font-family: system-ui, -apple-system, sans-serif; line-height: 1.6;
  background: var(--bg); color: var(--fg);
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; display: flex; flex-direction: column; }
a, a:visited { color: var(--link); text-decoration: none; }
::selection {
    background-color: #292;
    color: #000;
}
img, video { max-width: 100%; height: auto; }
video { display: block; }
audio { width: 100%; }
.yt-embed { position: relative; aspect-ratio: 16 / 9; margin: 1rem 0; }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-link { display: block; font-size: .9em; margin-top: .25rem; }
.contact-btn { display: inline-block; padding: .45rem .9rem; border-radius: 6px; background: var(--code-bg); color: var(--fg); border: 1px solid var(--border); text-decoration: none; font-size: .9em; transition: background .15s ease, border-color .15s ease, transform .1s ease; }
.contact-btn:hover { background: var(--input-bg); border-color: var(--muted); transform: translateY(-1px); }
.contact-btn:active { background: var(--border); transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .contact-btn { transition: none; } .contact-btn:hover { transform: none; } }
.about-photo { max-width: 320px; width: 100%; height: auto; border-radius: 10px; display: block; margin: .5rem 0; }
/* Wikidata statements table (About page + in-post). */
.wd { margin: 1rem 0; overflow-x: auto; }
.wd figcaption { font-weight: 600; margin-bottom: .3rem; }
.wd .wd-qid { color: var(--muted); font-weight: 400; font-size: .85em; }
.wd table { border-collapse: collapse; width: 100%; font-size: .9em; }
.wd th, .wd td { text-align: left; padding: .3rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.wd th { color: var(--muted); font-weight: 500; }
.wd-spoiler { margin: 1rem 0; }
.wd-spoiler > summary { cursor: pointer; user-select: none; color: var(--link); }
.wd-spoiler > summary:hover { text-decoration: underline; }
.wd-spoiler .wd { margin-top: .5rem; }
/* Image carousel (opt-in) — swipe is native CSS scroll-snap; JS adds arrows/dots. */
.carousel { position: relative; margin: 1rem 0; }
.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track img { scroll-snap-align: center; flex: 0 0 100%; width: 100%; height: auto; }
.carousel-prev, .carousel-next { position: absolute; top: 50%; transform: translateY(-50%); width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.carousel-prev { left: .4rem; }
.carousel-next { right: .4rem; }
.carousel-dots { display: flex; gap: .35rem; justify-content: center; margin-top: .4rem; }
.carousel-dots button { width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 50%; background: var(--muted); cursor: pointer; }
.carousel-dots button.active { background: var(--fg); }
/* CSS-only click-to-load facade (no JS): the iframe is display:none until the
   hidden checkbox is checked, so loading=lazy defers its fetch until click. */
.yt-embed .yt-toggle { position: absolute; width: 0; height: 0; opacity: 0; }
.yt-embed .yt-facade { position: absolute; inset: 0; cursor: pointer; display: block; }
.yt-embed .yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-embed .yt-btn { position: absolute; inset: 0; margin: auto; width: 4.2rem; height: 3rem; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.65); border-radius: 12px; }
.yt-embed .yt-frame { display: none; }
.ap-embed { margin: 1rem 0; }
.ap-embed iframe { width: 100%; max-width: 660px; height: 175px; border: 0; border-radius: 10px; }
.ap-embed .ap-link { display: block; font-size: .85rem; margin-top: .3rem; }
.ym-embed { margin: 1rem 0; }
.ym-embed iframe { width: 100%; max-width: 900px; height: 180px; border: 0; }
/* Genius (and, if ever embedded, Reddit) ship a light-theme widget with no dark
   option; under a dark OS theme approximate one by inverting luminance and
   rotating hues back so colours stay roughly true. The Genius song embed injects
   an inline `.rg_embed` card (not always an iframe), so target both — but not
   `.rg_embed_link`, the fallback link left after the offline pass strips the JS. */
@media (prefers-color-scheme: dark) {
  .rg_embed,
  iframe[src*="genius.com"],
  iframe[src*="redditmedia.com"],
  iframe[src*="embed.reddit.com"] { filter: invert(1) hue-rotate(180deg); }
}
/* Pinterest offers no dark Pin-widget theme. Its script injects the footer into
   the host page with its current generated logging attributes, so recolour only
   its two white containers and leave the Pin image and avatar untouched. */
@media (prefers-color-scheme: dark) {
  .pin-embed [data-pin-log='embed_pin_follow'][class*='_footer'],
  .pin-embed [data-pin-log='embed_pin_follow'][class*='_container'] {
    background: var(--bg) !important;
    color: var(--fg) !important;
  }
}
.ym-embed .ym-link { display: block; font-size: .85rem; margin-top: .3rem; }
blockquote.instagram-media { max-width: 540px; margin: 1rem 0; padding: .5rem 1rem; }
.sp-embed { margin: 1rem 0; }
.sp-embed iframe { width: 100%; max-width: 660px; height: 152px; border: 0; border-radius: 12px; }
.sp-embed .sp-link { display: block; font-size: .85rem; margin-top: .3rem; }
.bc-embed { margin: 1rem 0; }
.bc-embed iframe { width: 100%; max-width: 400px; height: 120px; border: 0; }
.related { margin: 1rem 0 0; font-size: .9em; }
.related ul { margin: .2rem 0 0; padding-left: 1.2rem; }
/* Poll → static result bars (no JS). */
.tg-poll { margin: 1rem 0; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 8px; }
.tg-poll-q { font-weight: 600; margin-bottom: .2rem; }
.tg-poll-kind { color: var(--muted); font-size: .8em; margin-bottom: .5rem; }
.tg-poll-opts { list-style: none; margin: 0; padding: 0; }
.tg-poll-opts li { margin: .45rem 0; }
.tg-poll-row { display: flex; justify-content: space-between; gap: .5rem; font-size: .9em; }
.tg-poll-pct { color: var(--muted); flex: none; }
.tg-poll-bar { height: 6px; margin-top: .25rem; border-radius: 3px; background: var(--link); min-width: 2px; }
.tg-poll-voters { color: var(--muted); font-size: .85em; margin-top: .5rem; }
.vk-playlist { margin: 1rem 0; }
/* VK's widget is light-only; approximate a dark variant under a dark OS theme. */
@media (prefers-color-scheme: dark) { .vk-playlist iframe { filter: invert(1) hue-rotate(180deg); } }
.yt-embed .yt-toggle:checked ~ .yt-facade { display: none; }
.yt-embed .yt-toggle:checked ~ .yt-frame { display: block; }
.tag { white-space: nowrap; }
pre { background: var(--code-bg); padding: .75rem; border-radius: 4px; overflow-x: auto; }
code { background: var(--code-bg); padding: .1rem .3rem; border-radius: 4px; }
pre code { padding: 0; background: none; }
.site-header { display: flex; gap: .6rem; align-items: center; padding-bottom: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.site-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; }
.site-title { font-weight: 700; text-decoration: none; color: var(--fg); }
.site-header nav a, .site-header nav .here { margin-left: 1.4rem; }
.site-search { margin-left: auto; }
.site-search input, input.site-search {
  background: var(--input-bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: .3rem .55rem; font: inherit; width: 9rem;
  transition: width .2s ease;
}
/* Expand on click/focus — CSS only, no JS. */
.site-search input:focus, input.site-search:focus { width: min(22rem, 60vw); }
input.site-search { margin-left: auto; }
.site-search.els { position: relative; margin-left: auto; }
.search-results {
  position: absolute; right: 0; top: 100%; z-index: 30;
  margin: .25rem 0 0; padding: 0; list-style: none;
  min-width: 14rem; max-width: min(28rem, 80vw); max-height: 60vh; overflow: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
}
.search-results[hidden] { display: none; }
.search-results li { margin: 0; padding: 0; }
.search-results a { display: block; padding: .4rem .6rem; text-decoration: none; color: var(--fg); }
.search-results a:hover, .search-results a:focus { background: var(--input-bg); }
.post-list { list-style: none; padding: 0; }
.post-list li { padding: .2rem 0; }
.post-list time { color: var(--muted); font-size: .85em; margin-left: .5rem; }
.post { margin: 0 0 2.5rem; }
.post.forwarded { background: var(--fwd-bg); border-radius: 8px; padding: .75rem 1rem; }
.about-avatar { float: left; margin: 0 1rem .5rem 0; }
.post-title { margin: 0 0 .25rem; font-size: 1.25rem; }
.more { margin: 2rem 0; }
.views, .meta { color: var(--muted); font-size: .85em; }
.meta { font-size: .9em; }
html { overflow-x: clip; }
.post-meta { position: relative; }
.post-meta::before {
  content: '';
  position: absolute;
  top: .8em;
  left: calc(50% - 50vw);
  right: 100%;
  border-top: 1px solid var(--muted);
  opacity: .45;
  pointer-events: none;
}
article.post:only-of-type .post-meta::before {
	content: none;
}
.tags a { margin-right: .5rem; white-space: nowrap; }
.pager { display: flex; justify-content: space-between; margin: 2rem 0; }
.post-nav { display: flex; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 0; padding-top: 1rem; margin-top: auto; }
.tg-link { margin-top: 1rem; font-size: .9em; }
.spoiler { background: var(--fg); border-radius: 3px; transition: background .1s; }
.spoiler:hover { background: transparent; }
.site-footer { margin-top: 3rem; color: var(--muted); font-size: .8rem; border-top: 1px solid var(--border); padding-top: .5rem; }
blockquote { border-left: 3px solid var(--border); margin: .5rem 0; padding-left: .75rem; color: var(--muted); }
.here { font-weight: 700; }

/* Calendar */
.cal-years { margin: .5rem 0 1.5rem; line-height: 1.9; }
.cal-years a { margin-right: .7rem; }
.cal-ycount { color: var(--muted); font-size: .65em; font-weight: 400; }
.cal-year { margin: 1.5rem 0 .5rem; }
.cal-months { display: flex; flex-wrap: wrap; gap: 1.4rem; }
table.cal { border-collapse: collapse; font-size: .8rem; }
table.cal caption { text-align: left; font-weight: 700; padding-bottom: .3rem; }
table.cal caption .cal-mcount { color: var(--muted); font-weight: 400; font-size: .85em; }
table.cal th { font-weight: 400; color: var(--muted); padding: .1rem; text-align: center; }
table.cal td { width: 1.95rem; height: 1.7rem; text-align: center; padding: 0; }
table.cal td.on a { display: block; line-height: 1.7rem; border-radius: 4px; text-decoration: none; background: var(--code-bg); font-weight: 700; }
table.cal td.off { color: var(--muted); opacity: .45; }
table.cal td.c2 a { font-size: 1.05rem; }
table.cal td.c3 a { font-size: 1.35rem; font-weight: 800; }

/* Recent commits (About page) */
.commits { list-style: none; padding: 0; font-size: .9em; }
.commits li { padding: .15rem 0; }
.commits code { background: var(--code-bg); padding: .05rem .3rem; border-radius: 3px; }
.commits .cdate { color: var(--muted); font-size: .85em; margin-left: .4rem; }

/* Mobile: use more of a narrow screen — less left/right inset. */
@media (max-width: 640px) {
  body { width: auto; padding: 1rem .5rem; }
  .cal-months { gap: .9rem; }
}