:root {
  color-scheme: dark;
  --night: #0f1215;
  --page: #161a1f;
  --face: #d4d0c8;
  --face-hi: #ffffff;
  --face-lo: #808080;
  --face-dk: #404040;
  --paper: #ffffff;
  --ink: #000000;
  --ink-soft: #3c3c3c;
  --title-a: #0a246a;
  --title-b: #a6caf0;
  --link: #0000cc;
  --forum-head: #e4ecf7;
  --forum-line: #9fb5d6;
  --forum-strip: #6c8fc7;
  --ui: Tahoma, Verdana, "DejaVu Sans", "Segoe UI", sans-serif;
  --serif: "Times New Roman", Times, "Liberation Serif", "Noto Serif", serif;
}

* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; color: var(--ink); font: 13px/1.45 var(--ui); }
img { max-width: 100%; display: block; }
a { color: var(--link); }

.raised { background: var(--face); box-shadow: inset -1px -1px var(--face-dk), inset 1px 1px var(--face-hi), inset -2px -2px var(--face-lo), inset 2px 2px var(--face); }

.sky { position: fixed; z-index: -1; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); object-fit: cover; background: var(--night); filter: blur(2.5px); pointer-events: none; }

.hero { position: relative; height: clamp(320px, 42vw, 620px); overflow: hidden; }
.hero .title { margin: 0; font: inherit; }
.hero .logo { position: absolute; z-index: 2; left: 50%; top: 45%; height: 76%; width: auto; max-width: none; transform: translate(-50%, -50%); filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .7)); }
.hero .tag { position: absolute; z-index: 2; left: 50%; bottom: 6%; transform: translateX(-50%); margin: 0; padding: 8px 18px; white-space: nowrap; color: #ece9e2; font: 700 13px/1.2 var(--ui); letter-spacing: .16em; text-transform: uppercase; background: rgba(60, 64, 68, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px rgba(255, 255, 255, .18); text-shadow: 2px 2px 3px rgba(0, 0, 0, .75); }

.lang-top { position: absolute; z-index: 3; top: max(12px, env(safe-area-inset-top)); right: 12px; padding: 2px; display: inline-flex; }
.lang-top a, .lang a { font: 700 11px/1 var(--ui); padding: 5px 10px; color: var(--ink); text-decoration: none; background: var(--face); box-shadow: inset -1px -1px var(--face-dk), inset 1px 1px var(--face-hi), inset -2px -2px var(--face-lo); }
.lang-top a[aria-current], .lang a[aria-current] { background: var(--title-a); color: #fff; box-shadow: inset 1px 1px var(--face-dk), inset -1px -1px var(--face-hi); }
.lang-top a:focus-visible, .lang a:focus-visible { outline: 1px dotted var(--ink); outline-offset: -4px; }
.lang { display: inline-flex; }

.col { max-width: 1040px; margin: 0 auto; }

.win { background: var(--face); padding: 3px; box-shadow: inset -1px -1px var(--face-dk), inset 1px 1px var(--face-hi), inset -2px -2px var(--face-lo), inset 2px 2px var(--face); }
.bar { display: flex; align-items: center; gap: 8px; padding: 3px 3px 3px 6px; color: #fff; background: linear-gradient(90deg, var(--title-a), var(--title-b)); }
.bar .t { flex: 1; min-width: 0; margin: 0; font: 700 13px/1.3 var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-x { width: 18px; height: 16px; flex: none; background: var(--face); color: var(--ink); font: 700 11px/14px var(--ui); text-align: center; box-shadow: inset -1px -1px var(--face-dk), inset 1px 1px var(--face-hi), inset -2px -2px var(--face-lo); }
.body { padding: 16px 18px 18px; }

.text { font: 18px/1.55 var(--serif); max-width: 68ch; margin-bottom: 16px; }
.text p { margin: 0 0 10px; }

.social { display: flex; flex-wrap: wrap; gap: 10px; }
.sbtn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; font: 700 13px var(--ui); color: var(--ink); text-decoration: none; }
.sbtn:active { box-shadow: inset 1px 1px var(--face-dk), inset -1px -1px var(--face-hi); }
.sbtn:focus-visible { outline: 1px dotted var(--ink); outline-offset: -5px; }
.sbtn i { width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center; color: #fff; font: 700 10px var(--ui); font-style: normal; }
.sbtn svg { width: 16px; height: 16px; fill: #fff; margin-left: -1px; }
.tg { background: #2aa3df; }
.vk { background: #0077ff; }
.dtf { background: #111; }

.car { position: relative; background: #000; touch-action: pan-y; user-select: none; }
.car img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.car .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border: 0; padding: 0; }
.car .arrow:active { box-shadow: inset 1px 1px var(--face-dk), inset -1px -1px var(--face-hi); }
.car .arrow:focus-visible { outline: 2px dotted var(--ink); outline-offset: -7px; }
.car .prev { left: 10px; }
.car .next { right: 10px; }
.car .arrow::after { content: ""; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.car .prev::after { border-right: 12px solid var(--ink); margin-right: 3px; }
.car .next::after { border-left: 12px solid var(--ink); margin-left: 3px; }
.car .status { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; padding: 4px 8px; background: var(--face); font: 12px var(--ui); box-shadow: inset 0 1px var(--face-hi); }
.car .status .cap, .car .status .num { padding: 1px 6px; box-shadow: inset 1px 1px var(--face-lo), inset -1px -1px var(--face-hi); }
.car .status .cap { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car .status .num { font-variant-numeric: tabular-nums; }

.empty { margin: 0; font: 17px/1.5 var(--serif); color: var(--ink-soft); }
.post { border: 1px solid var(--forum-line); background: var(--paper); margin-bottom: 14px; }
.post .ph { display: flex; justify-content: space-between; gap: 10px; padding: 4px 8px; background: var(--forum-head); border-bottom: 1px solid var(--forum-line); font: 11px var(--ui); font-variant-numeric: tabular-nums; }
.post .ph b { color: var(--forum-strip); }
.post .what { padding: 12px 14px; }
.post h3 { font: 700 21px/1.25 var(--serif); margin: 0 0 8px; }
.post p { font: 17px/1.5 var(--serif); margin: 0 0 10px; }
.post .media { display: grid; gap: 10px; margin-top: 6px; }
.post .media img, .post .media video { max-width: 640px; width: 100%; height: auto; border: 1px solid var(--forum-line); background: #000; }
.pages { font: 11px var(--ui); display: flex; gap: 6px; align-items: center; }
.pages b, .pages a { padding: 1px 6px; border: 1px solid var(--forum-line); background: var(--paper); text-decoration: none; }
.pages b { background: var(--forum-head); }

.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--face); font: 11px var(--ui); box-shadow: inset 0 1px var(--face-hi); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.b88 { width: 88px; height: 31px; display: grid; place-items: center; font: 700 9px/1.1 var(--ui); text-align: center; letter-spacing: .02em; border: 1px solid #000; }
.b88.a { background: var(--night); color: #f0c040; }
.b88.b { background: linear-gradient(var(--title-a), #3a6ea5); color: #fff; }
.b88.c { background: #fff; color: var(--title-a); }

@media (max-width: 640px) {
  .hero { height: min(118vw, 640px); }
  .hero .logo { height: 64%; top: 43%; }
  .hero .tag { white-space: normal; width: max-content; max-width: 88%; text-align: center; font-size: 11px; letter-spacing: .12em; padding: 6px 10px; }
  .body { padding: 14px; }
  .text { font-size: 17px; }
  .car img { aspect-ratio: 4 / 3; }
  .car .arrow { width: 38px; height: 38px; }
}