:root { --ink:#172033; --muted:#5d6675; --line:#c8d1dc; --head:#eef3f8; --accent:#0f5b78; --bg:#f7f8fb; --card:#ffffff; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; color: var(--ink); background: var(--bg); }
.rail { position: fixed; inset: 0 auto 0 0; width: 238px; padding: 14px 14px 24px; border-right: 1px solid var(--line); background: #ffffff; overflow-y: auto; }
.rail img { width: 48px; height: 48px; vertical-align: middle; margin-right: 8px; }
.rail strong { display: inline-block; vertical-align: middle; max-width: 148px; }
.rail nav { display: grid; gap: 5px; margin-top: 18px; }
.tab-button { color: var(--ink); text-align: left; padding: 8px 9px; border-radius: 6px; border: 1px solid transparent; background: transparent; font: inherit; cursor: pointer; }
.tab-button:hover, .tab-button.active { border-color: var(--line); background: var(--head); }
.nav-toggle { position: fixed; left: 8px; top: 8px; z-index: 3; display: none; }
main { margin-left: 238px; padding: 20px 28px 48px; max-width: 1680px; }
.language-switch { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.lang-button { border: 1px solid transparent; border-radius: 5px; background: transparent; padding: 6px 10px; cursor: pointer; font: inherit; }
.lang-button.active { border-color: #8ca5bf; background: #eaf2fa; font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
h1 { margin: 0 0 10px; font-size: 32px; }
h2 { margin: 26px 0 12px; font-size: 23px; }
p { line-height: 1.48; max-width: 1040px; }
.lead { font-size: 18px; color: #243047; }
.panel { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 16px; margin: 14px 0; }
.downloads { display: flex; flex-wrap: wrap; gap: 10px; }
.button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid #8ca5bf; background: #eaf2fa; border-radius: 6px; color: var(--ink); text-decoration: none; font-weight: 600; }
.stats-grid, .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; align-items: start; }
.stat-card, .video-card { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 14px; }
.stat-card img, .video-card img { max-width: 100%; height: auto; display: block; border: 1px solid var(--line); background: #000; }
.stat-card img { cursor: zoom-in; }
.video-card img { width: 80%; margin: 0 auto; }
.meta-list { display: grid; gap: 7px; }
.hash { font-family: Consolas, monospace; overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #fff; border: 1px solid var(--line); padding: 12px; border-radius: 6px; }
.hover-preview { position: fixed; inset: 7vh 7vw auto auto; z-index: 8; display: none; padding: 10px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 46px rgba(20, 30, 48, .28); border-radius: 8px; }
.hover-preview.visible { display: block; }
.hover-preview img { max-width: 54vw; max-height: 68vh; display: block; }
.image-modal { position: fixed; inset: 0; z-index: 10; display: none; place-items: center; background: rgba(8, 14, 26, .86); padding: 24px; }
.image-modal.visible { display: grid; }
.image-modal img { max-width: 96vw; max-height: 92vh; background: white; border: 1px solid #e5eaf2; box-shadow: 0 22px 72px rgba(0, 0, 0, .45); }
.modal-close { position: fixed; right: 18px; top: 16px; padding: 8px 12px; border: 1px solid #c8d1dc; background: #ffffff; border-radius: 6px; cursor: pointer; }
@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .rail { transform: translateX(-242px); transition: transform .18s ease; }
  body.nav-open .rail { transform: translateX(0); }
  main { margin-left: 0; padding-top: 48px; }
  .hover-preview { inset: 56px 10px auto 10px; }
  .hover-preview img { max-width: calc(100vw - 42px); }
}
body.nav-collapsed .rail { width: 58px; overflow: hidden; }
body.nav-collapsed .rail strong, body.nav-collapsed .rail nav button { font-size: 0; }
body.nav-collapsed main { margin-left: 58px; }