@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@400;500;700;800&display=swap');

@font-face {
  font-family: 'Bayon';
  src: url('fonts/Bayon-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #0F0F0F;
  --bg-alt: #202020;
  --accent: #5DD62C;
  --accent-dark: #337418;
  --text: #F8F8F8;
  --danger: #DF2531;

  --font-body: 'Alegreya Sans SC', sans-serif;
  --font-display: 'Bayon', sans-serif;
  --font-label: var(--font-body);
  --font-mono: var(--font-body);

  --nav-w: 260px;
  --gap-sm: 0.5rem;
  --gap-md: 1rem;
  --gap-lg: 2rem;
  --gap-xl: 4rem;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; margin: 0; letter-spacing: 0.02em; }
h1 { font-size: 3.4rem; line-height: 1.05; }
h2 { font-size: 2rem; }
h3 { font-size: 1.4rem; }

p, li, .justified { text-align: justify; text-justify: inter-word; }
.align-left  { text-align: justify; text-align-last: left; }
.align-right { text-align: justify; text-align-last: right; }
.align-center{ text-align: center; text-align-last: center; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

button, input, textarea, select { font-family: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.container {
  width: min(1200px, 100% - 4rem);
  margin-inline: auto;
}

.divider-h {
  border: none;
  height: 1px;
  background: var(--bg-alt);
  margin: var(--gap-md) 0;
}

.divider-v {
  position: relative;
  width: 1px;
  background: var(--bg-alt);
}

.divider-t {
  position: relative;
  width: 1px;
  background: var(--bg-alt);
}
.divider-t::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 220%;
  height: 1px;
  background: var(--bg-alt);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em 1.75em;
  background: var(--bg-alt);
  color: var(--text);
  border: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.btn:hover { transform: translateY(-4px); background: var(--accent); color: var(--bg); }
.btn:active { transform: translateY(-2px); }

.btn-accent { background: var(--accent); color: var(--bg); }
.btn-accent:hover { background: var(--accent-dark); color: var(--text); }

.btn-danger:hover { background: var(--danger); color: var(--text); }

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s var(--ease);
}
.icon-btn:hover { transform: translateY(-6px); }
.icon-btn img { width: 48px; height: 48px; }
img.icon-btn { width: 48px; height: 48px; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--gap-md) var(--gap-lg);
}

.site-header__account {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  padding: 0.6em 1.2em;
  background: var(--bg-alt);
  cursor: pointer;
  transition: background-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.site-header__account:hover { background: var(--accent); color: var(--bg); transform: translateY(-3px); }

.side-nav {
  position: fixed;
  top: 6rem;
  left: 2rem;
  width: var(--nav-w);
  z-index: 30;
}

.side-nav__profile {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding-bottom: var(--gap-md);
  border-bottom: 1px solid var(--bg-alt);
}
a.side-nav__profile { cursor: pointer; transition: color 0.15s var(--ease); }
a.side-nav__profile:hover { color: var(--accent); }
.side-nav__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-alt);
  flex-shrink: 0;
}
.side-nav__avatar img { width: 100%; height: 100%; object-fit: cover; }
.side-nav__info { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.side-nav__name { font-family: var(--font-label); font-size: 1.25rem; }
.side-nav__divider { height: 1px; background: var(--bg-alt); margin: 0.35em 0; }
.side-nav__rank { font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.7; }
.side-nav__id { font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.5; }
.side-nav__rank[hidden], .side-nav__id[hidden] { display: none; }

.side-nav__body {
  position: relative;
  margin-top: var(--gap-md);
  padding: var(--gap-lg) var(--gap-md);
  background: #1c1c1c;
}
.side-nav__body::before,
.side-nav__body::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--accent);
  border-style: solid;
}
.side-nav__body::before {
  top: 0; left: 0;
  border-width: 2px 0 0 2px;
}
.side-nav__body::after {
  bottom: 0; left: 0;
  border-width: 0 0 2px 2px;
}

.side-nav__section { padding-block: var(--gap-md); border-bottom: 1px solid var(--bg-alt); }
.side-nav__section:last-child { border-bottom: none; }
.side-nav__section-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.6em;
  color: var(--accent);
}
.side-nav__link {
  display: block;
  padding: 0.3em 0;
  font-family: var(--font-label);
  font-size: 0.9rem;
  transition: color 0.15s var(--ease), padding-left 0.15s var(--ease);
}
.side-nav__link:hover { color: var(--accent); padding-left: 0.4em; }

.side-nav__lang {
  display: flex;
  justify-content: center;
  gap: var(--gap-sm);
  margin-top: var(--gap-md);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.side-nav__lang button {
  background: none;
  border: 1px solid var(--bg-alt);
  color: var(--text);
  padding: 0.3em 0.7em;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s var(--ease), border-color 0.15s var(--ease);
}
.side-nav__lang button.active,
.side-nav__lang button:hover { opacity: 1; border-color: var(--accent); }

.main {
  margin-left: calc(var(--nav-w) + 6rem);
  padding: var(--gap-xl) var(--gap-lg);
}
@media (max-width: 1024px) {
  .main { margin-left: 0; }
  .side-nav { position: static; width: 100%; margin-bottom: var(--gap-lg); }
}

.site-search {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  background: var(--bg-alt);
  padding: 0.7em 1em;
  margin-bottom: var(--gap-lg);
}
.site-search__icon { width: 20px; height: 20px; color: var(--text); opacity: 0.5; flex-shrink: 0; }
.site-search__input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.site-search__input::placeholder { color: var(--text); opacity: 0.4; }
.site-search__input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }
.site-search:focus-within .site-search__icon { opacity: 1; color: var(--accent); }

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: var(--gap-xl);
  overflow: hidden;
}
.hero__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60vmin;
  max-width: 1500px;
  opacity: 0.12;
  z-index: 0;
}
.hero__title {
  position: relative;
  z-index: 1;
  font-size: clamp(2.4rem, 6vw, 5rem);
}
.hero__welcome {
  position: relative;
  z-index: 1;
  margin-top: var(--gap-md);
  font-family: var(--font-label);
  font-size: 1.1rem;
  opacity: 0.85;
}

.icon-nav {
  display: flex;
  justify-content: center;
  gap: var(--gap-xl);
  margin-top: var(--gap-xl);
  flex-wrap: wrap;
}
.icon-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  font-size: 0.85rem;
  font-family: var(--font-mono);
}

.carousel {
  position: relative;
  margin-top: var(--gap-xl);
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: var(--bg-alt);
}
.carousel__track { display: flex; height: 100%; transition: transform 0.5s var(--ease); }
.carousel__slide { flex: 0 0 100%; height: 100%; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text);
  width: 44px;
  height: 44px;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s var(--ease), transform 0.15s var(--ease);
}
.carousel__arrow:hover { color: var(--accent); transform: translateY(-50%) scale(1.15); }
.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }
.carousel__arrow--prev::before { content: '◀'; font-size: 1.4rem; }
.carousel__arrow--next::before { content: '▶'; font-size: 1.4rem; }

.split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: var(--gap-xl);
  margin-top: var(--gap-xl);
}
.split__col { padding: var(--gap-md) 0; }
.split__divider { background: var(--bg-alt); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split__divider { display: none; }
}

.section-links { display: flex; flex-direction: column; }
.section-links__item {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding: var(--gap-md) 0;
  border-bottom: 1px solid var(--bg-alt);
  cursor: pointer;
  transition: padding-left 0.15s var(--ease), color 0.15s var(--ease);
}
.section-links__item:last-child { border-bottom: none; }
.section-links__item:hover { padding-left: 0.6em; color: var(--accent); }
.section-links__item img { width: 28px; height: 28px; }
.section-links__item .divider-v { height: 32px; }
.section-links__item span { font-family: var(--font-label); font-size: 1.1rem; }

.rating {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gap-sm) var(--gap-md);
  border: 1px solid var(--bg-alt);
}
.rating__controls { display: flex; align-items: center; gap: var(--gap-sm); font-family: var(--font-mono); }
.rating__btn {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.2em;
  transition: color 0.15s var(--ease), transform 0.15s var(--ease);
}
.rating__btn:hover { transform: translateY(-2px); }
.rating__btn[data-vote="up"]:hover,
.rating__btn[data-vote="up"].active { color: var(--accent); }
.rating__btn[data-vote="down"]:hover,
.rating__btn[data-vote="down"].active { color: var(--danger); }
.rating__score { min-width: 2ch; text-align: center; }

.list {
  border-top: 1px solid var(--bg-alt);
}
.list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: var(--gap-md) 0;
  border-bottom: 1px solid var(--bg-alt);
  cursor: pointer;
  transition: padding-left 0.15s var(--ease);
}
.list__row:hover { padding-left: 0.5em; }
.list__row-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.list__row-avatar img { width: 100%; height: 100%; object-fit: cover; }
.list__row-main { flex: 1; }
.list__row-title { font-family: var(--font-label); font-size: 1rem; }
.list__row-meta { font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.6; }
.list__row-desc {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 0.2em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list__row-arrow { opacity: 0.5; transition: opacity 0.15s var(--ease), transform 0.15s var(--ease); }
.list__row:hover .list__row-arrow { opacity: 1; transform: translateX(4px); }
.list__empty { padding: var(--gap-md) 0; opacity: 0.5; font-family: var(--font-mono); font-size: 0.9rem; }

.pagination {
  display: flex;
  justify-content: center;
  gap: var(--gap-md);
  padding: var(--gap-md) 0;
  border-bottom: 1px solid var(--bg-alt);
  font-family: var(--font-mono);
}
.pagination button {
  background: none;
  border: none;
  color: var(--text);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.15s var(--ease);
}
.pagination button.active,
.pagination button:hover { opacity: 1; color: var(--accent); }

.comment {
  display: flex;
  gap: var(--gap-md);
  padding: var(--gap-md) 0;
  position: relative;
}
.comment + .comment { border-top: 1px solid var(--bg-alt); }
.comment__thread { border-left: 1px solid var(--bg-alt); padding-left: var(--gap-md); margin-left: 1.4rem; }
.comment__avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; cursor: pointer; }
.comment__avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment__body { flex: 1; }
.comment__author { font-family: var(--font-mono); font-size: 0.85rem; cursor: pointer; }
.comment__author:hover { color: var(--accent); }
.comment__text { margin-top: 0.3em; font-size: 0.95rem; }
.comment__footer { display: flex; align-items: center; gap: var(--gap-md); margin-top: 0.5em; }
.comment.collapsed .comment__text,
.comment.collapsed .comment__footer,
.comment.collapsed .comment__thread { display: none; }
.comment__toggle { background: none; border: none; color: var(--text); opacity: 0.5; cursor: pointer; font-family: var(--font-mono); font-size: 0.8rem; }
.comment__toggle:hover { opacity: 1; }

.account-preview {
  position: absolute;
  z-index: 50;
  width: 260px;
  background: var(--bg-alt);
  border: 1px solid var(--bg);
  padding: var(--gap-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0.15s;
}
.account-preview.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.account-preview__avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; margin-inline: auto; }
.account-preview__avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-preview__name { text-align: center; margin-top: 0.5em; font-family: var(--font-label); }
.account-preview__username { text-align: center; font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.6; }
.account-preview__desc { margin-top: var(--gap-sm); padding-top: var(--gap-sm); border-top: 1px solid var(--bg); font-size: 0.85rem; text-align: justify; }
.account-preview__actions { display: flex; justify-content: space-around; margin-top: var(--gap-md); }
.account-preview__actions button { background: none; border: none; cursor: pointer; }
.account-preview__actions img { width: 28px; height: 28px; }
.account-preview__actions button:hover img { transform: translateY(-4px); }
.account-preview__actions img { transition: transform 0.15s var(--ease); }

.article {
  max-width: 860px;
}
.article__ratingbar { margin-bottom: var(--gap-lg); }
.article__meta {
  display: flex;
  gap: var(--gap-lg);
  padding: var(--gap-md) 0;
  border-bottom: 1px solid var(--bg-alt);
  margin-bottom: var(--gap-lg);
}
.article__figure { margin: var(--gap-lg) 0; }
.article__figure--left { float: left; margin-right: var(--gap-lg); max-width: 40%; }
.article__figure--right { float: right; margin-left: var(--gap-lg); max-width: 40%; }
.article__figure--center { margin-inline: auto; max-width: 70%; }
.article__figure figcaption { font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.6; margin-top: 0.4em; text-align: center; }
.article__footnote { position: relative; cursor: help; }
.article__footnote::before {
  content: '';
  position: absolute;
  left: -0.6em;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}
.article__footnote:hover::before { opacity: 1; }
.article__highlight { background: linear-gradient(to bottom, rgba(93, 214, 44, 0.25), rgba(93, 214, 44, 0.1)); padding: 0 0.1em; }
.article__redacted {
  background: #000;
  color: #000;
  user-select: none;
  cursor: not-allowed;
}
.article__redacted.unlocked { background: none; color: inherit; user-select: text; cursor: text; }

.article__related { margin-top: var(--gap-xl); }
.article__comments { margin-top: var(--gap-xl); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease), visibility 0.2s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  width: min(380px, 90vw);
  background: var(--bg-alt);
  padding: var(--gap-lg);
  transform: translateY(12px);
  transition: transform 0.2s var(--ease);
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal__title { font-family: var(--font-label); font-size: 1.2rem; margin-bottom: var(--gap-md); }
.modal__checkbox { display: flex; align-items: flex-start; gap: 0.6em; font-size: 0.9rem; margin-bottom: var(--gap-lg); }
.modal__actions { display: flex; border-top: 1px solid var(--bg); }
.modal__actions button {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  padding: 0.9em;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background-color 0.15s var(--ease);
}
.modal__actions button + button { border-left: 1px solid var(--bg); }
.modal__actions button[data-action="confirm"]:hover { background: var(--accent); color: var(--bg); }
.modal__actions button[data-action="cancel"]:hover { background: var(--danger); color: var(--text); }
.modal__divider { text-align: center; font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.5; margin: var(--gap-md) 0; }
.modal__input {
  width: 100%;
  background: var(--bg);
  border: 1px solid #333;
  color: var(--text);
  padding: 0.7em;
  margin-bottom: var(--gap-md);
}
.modal__denied { color: var(--danger); font-size: 0.85rem; margin-top: var(--gap-sm); display: none; }
.modal__denied.visible { display: block; }

.keycard {
  width: 340px;
  aspect-ratio: 16 / 10;
  background: linear-gradient(to bottom, var(--bg-alt), var(--bg));
  display: flex;
  flex-direction: column;
  border: 1px solid #333;
}
.keycard__top { display: flex; align-items: center; gap: var(--gap-md); padding: var(--gap-md); flex: 1; }
.keycard__icon { width: 64px; height: 64px; flex-shrink: 0; }
.keycard__username { font-family: var(--font-label); font-size: 1.2rem; }
.keycard__rank { font-family: var(--font-mono); font-size: 0.85rem; opacity: 0.8; }
.keycard__id { font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.6; letter-spacing: 0.05em; }
.keycard__strip { height: 24px; background: var(--text); }
.keycard__footer { height: 32px; background: var(--accent-dark); }

.profile-header { display: flex; align-items: flex-start; gap: var(--gap-md); padding-bottom: var(--gap-md); border-bottom: 1px solid var(--bg-alt); }
.profile-header__avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.profile-header__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-header__main { min-width: 0; }
.profile-header__name { font-family: var(--font-label); font-size: 1.5rem; display: inline; }
.profile-header__badge {
  display: inline-block;
  margin-left: 0.7em;
  padding: 0.15em 0.6em;
  background: var(--accent-dark);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.profile-header__id { font-family: var(--font-mono); font-size: 0.8rem; opacity: 0.6; margin-top: 0.2em; }
.profile-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  margin: var(--gap-md) 0 0;
}
.profile-header__meta-item { display: flex; flex-direction: column; gap: 0.15em; }
.profile-header__meta-item dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.profile-header__meta-item dd { margin: 0; font-family: var(--font-label); font-size: 0.95rem; }
.profile-header__actions { margin-left: auto; display: flex; gap: var(--gap-md); flex-shrink: 0; }
.profile-header__actions button { background: none; border: none; cursor: pointer; }
.profile-header__actions img { width: 26px; height: 26px; transition: transform 0.15s var(--ease); }
.profile-header__actions button:hover img { transform: translateY(-4px); }

.profile-desc { margin-top: var(--gap-md); position: relative; }
.profile-desc__text { padding-right: 6rem; }
.profile-desc__edit {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s var(--ease);
}
.profile-desc__edit:hover { opacity: 1; }
.profile-desc__form { margin-top: var(--gap-sm); }
.profile-desc__form-actions { display: flex; gap: var(--gap-sm); margin-top: var(--gap-sm); }
.profile-desc__form-actions .btn { padding: 0.5em 1.25em; font-size: 0.85rem; }

.profile-gallery {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  margin-top: var(--gap-lg);
}
.profile-gallery__main {
  flex: 2;
  aspect-ratio: 16/9;
  background: var(--bg-alt);
  cursor: default;
}
.profile-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.profile-gallery__thumb {
  flex: 1;
  aspect-ratio: 4/3;
  background: var(--bg-alt);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.15s var(--ease);
}
.profile-gallery__thumb:hover { opacity: 0.85; }
.profile-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.profile-gallery__arrow { background: none; border: none; color: var(--text); cursor: pointer; font-size: 1.4rem; flex-shrink: 0; transition: color 0.15s var(--ease), transform 0.15s var(--ease); }
.profile-gallery__arrow:hover { color: var(--accent); transform: scale(1.15); }
@media (max-width: 640px) {
  .profile-gallery__thumb { display: none; }
}

.blog-post {
  display: flex;
  gap: var(--gap-md);
  padding: var(--gap-md) 0;
}
.blog-post + .blog-post { border-top: 1px solid var(--bg-alt); }
.blog-post__avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.blog-post__avatar img { width: 100%; height: 100%; object-fit: cover; }
.blog-post__body { flex: 1; }
.blog-post__author { font-family: var(--font-mono); font-size: 0.85rem; opacity: 0.85; }
.blog-post__text { margin-top: 0.3em; font-size: 0.95rem; }
.blog-post__footer { display: flex; align-items: center; gap: var(--gap-md); margin-top: 0.6em; }
.blog-post__footer .rating { padding: 0.3em 0.7em; }
.blog-post__time { font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.5; }

.tabs {
  display: flex;
  gap: var(--gap-lg);
  margin-top: var(--gap-lg);
  border-bottom: 1px solid var(--bg-alt);
  font-family: var(--font-label);
}
.tabs__item {
  padding-bottom: 0.6em;
  cursor: pointer;
  opacity: 0.6;
  border-bottom: 2px solid transparent;
  transition: opacity 0.15s var(--ease), border-color 0.15s var(--ease);
}
.tabs__item.active,
.tabs__item:hover { opacity: 1; border-color: var(--accent); }
.tab-panel { display: none; margin-top: var(--gap-lg); }
.tab-panel.active { display: block; }

.friend-row {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding: var(--gap-md) 0;
  border-bottom: 1px solid var(--bg-alt);
}
.friend-row__avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
.friend-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.friend-row__name { font-family: var(--font-label); }
.friend-row__username { font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.6; }
.friend-row__actions { margin-left: auto; display: flex; gap: var(--gap-md); }
.friend-row__actions button { background: none; border: none; cursor: pointer; }
.friend-row__actions img { width: 22px; height: 22px; transition: transform 0.15s var(--ease); }
.friend-row__actions button:hover img { transform: translateY(-4px); }

.form { max-width: 480px; }
.form__group { margin-bottom: var(--gap-md); }
.form__label { display: block; font-family: var(--font-mono); font-size: 0.8rem; opacity: 0.8; margin-bottom: 0.4em; }
.form__input, .form__textarea {
  width: 100%;
  background: var(--bg-alt);
  border: none;
  border-bottom: 1px solid #333;
  color: var(--text);
  padding: 0.7em;
  transition: border-color 0.15s var(--ease);
}
.form__input:focus, .form__textarea:focus { border-color: var(--accent); }
.form__hint { font-size: 0.75rem; opacity: 0.5; margin-top: 0.3em; }
.form__checkbox { display: flex; align-items: center; gap: 0.6em; font-size: 0.9rem; }

.form__error { color: var(--danger); font-size: 0.75rem; margin-top: 0.3em; display: none; }
.form__group.invalid .form__input,
.form__group.invalid .form__textarea { border-color: var(--danger); }
.form__group.invalid .form__error { display: block; }
.form__submit { margin-top: var(--gap-lg); }
.form__status { margin-top: var(--gap-md); font-family: var(--font-mono); font-size: 0.85rem; opacity: 0.85; }
.form__note { margin-bottom: var(--gap-lg); opacity: 0.75; font-size: 0.9rem; }
.form__switch { margin-top: var(--gap-lg); font-size: 0.85rem; opacity: 0.7; }
.form__switch a { color: var(--accent); }

.test {
  max-width: 560px;
}
.test__progress {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  opacity: 0.6;
  margin-bottom: var(--gap-md);
}
.test__question {
  font-family: var(--font-label);
  font-size: 1.2rem;
  margin-bottom: var(--gap-md);
}
.test__options { display: flex; flex-direction: column; }
.test__option {
  padding: var(--gap-md);
  background: var(--bg-alt);
  cursor: pointer;
  margin-bottom: 1px;
  transition: background-color 0.15s var(--ease), padding-left 0.15s var(--ease);
}
.test__option:hover { background: #2a2a2a; padding-left: calc(var(--gap-md) + 0.4em); }
.test__option.selected { background: var(--accent-dark); }
.test__cooldown {
  padding: var(--gap-lg);
  border: 1px solid var(--bg-alt);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.test__cooldown strong { color: var(--danger); }

.keycard-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-lg);
  padding: var(--gap-xl) 0;
}
.keycard-reveal__status {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  opacity: 0.7;
}
.keycard-reveal .keycard {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.keycard-reveal .keycard.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
  h1 { font-size: 2.2rem; }
  .container { width: min(100%, 100% - 2rem); }
  .side-nav { left: 1rem; right: 1rem; width: auto; }
  .article__figure--left, .article__figure--right { float: none; max-width: 100%; margin: var(--gap-md) 0; }
  .icon-nav { gap: var(--gap-lg); }
  .split { gap: var(--gap-lg); }
  .keycard { width: 100%; }
}