:root {
  color-scheme: dark;
  --bg: #18181b;
  --card: rgba(23, 23, 23, .65);
  --hero: rgba(255, 255, 255, .06);
  --stripe-a: #3b82f6; --stripe-b: #a5b4fc; --stripe-c: #ddd6fe; --gap: rgba(0, 0, 0, .7);
  --aurora-opacity: .3;
  --line: rgba(64, 64, 64, .8);
  --text: #fafafa;
  --muted: #a3a3a3;
  --soft: #d4d4d4;
  --chip: rgba(64, 64, 64, .55);
  --glow-a: rgba(71, 96, 128, .5);
  --glow-b: rgba(120, 130, 150, .22);
  --title-a: #fff;
  --title-b: #8f8f8f;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #fafafa; --hero: rgba(255, 255, 255, .55); --card: rgba(255, 255, 255, .8); --stripe-a: #fde68a; --stripe-b: #fcd34d; --stripe-c: #fef3c7; --gap: rgba(255, 255, 255, .6); --aurora-opacity: .45; --line: rgba(212, 212, 212, .8);
    --text: #171717; --muted: #666; --soft: #404040; --chip: rgba(212, 212, 212, .6);
    --glow-a: rgba(130, 165, 210, .45); --glow-b: rgba(180, 190, 215, .35);
    --title-a: #171717; --title-b: #6b6b6b;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fafafa; --hero: rgba(255, 255, 255, .55); --card: rgba(255, 255, 255, .8); --stripe-a: #fde68a; --stripe-b: #fcd34d; --stripe-c: #fef3c7; --gap: rgba(255, 255, 255, .6); --aurora-opacity: .45; --line: rgba(212, 212, 212, .8);
  --text: #171717; --muted: #666; --soft: #404040; --chip: rgba(212, 212, 212, .6);
  --glow-a: rgba(130, 165, 210, .45); --glow-b: rgba(180, 190, 215, .35);
  --title-a: #171717; --title-b: #6b6b6b;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
img { display: block; }

.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora::before {
  content: ""; position: absolute; inset: -10%; opacity: var(--aurora-opacity); filter: blur(8px);
  background-image:
    repeating-linear-gradient(100deg, transparent 0%, transparent 7%, var(--gap) 10%, var(--gap) 12%, transparent 16%),
    repeating-linear-gradient(100deg, var(--stripe-a) 10%, var(--stripe-b) 15%, var(--stripe-c) 25%, var(--stripe-a) 30%);
  background-size: 300% 200%, 200% 200%;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
  animation: drift 60s linear infinite;
}
@keyframes drift { to { background-position: 300% 50%, 200% 50%; } }

.page { width: min(1024px, 100%); margin: 0 auto; padding: 96px 16px 32px; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 24px;
}

.hero { display: flex; align-items: center; gap: 20px; border-radius: 22px; margin-bottom: 40px; background: var(--hero); }
.avatar {
  flex: none; width: 80px; height: 80px; border-radius: 22px; object-fit: cover; padding: 3px; box-shadow: 0 0 0 1px var(--line);
  display: grid; place-items: center; font-weight: 700; font-size: 24px;
  background: var(--chip); border: 1px solid var(--line);
}
img.avatar { background: #fff; }
.hero-text { min-width: 0; flex: 1; }
.hero h1 {
  font-size: clamp(30px, 6vw, 48px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(to bottom, var(--title-a), var(--title-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--muted); margin-top: 6px; }
.actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.row { display: flex; gap: 8px; }
.icon, .lang {
  height: 36px; min-width: 36px; display: inline-grid; place-items: center; padding: 0;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  color: var(--text); cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, transform .1s ease;
}
.lang { padding: 0 12px; font: 600 12px var(--mono); display: inline-flex; align-items: center; gap: 6px; }
.icon:hover, .lang:hover { background: var(--chip); }
.icon:active, .lang:active { transform: scale(.96); }
.icon svg { width: 16px; height: 16px; }
.icon img { width: 20px; height: 20px; border-radius: 5px; }
:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }

.columns { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 20px; align-items: start; }
.column, .stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.stack { margin-top: 20px; }
.card > h2 { font: 600 16px var(--mono); }
.card > .sub { color: var(--muted); font-size: 14.5px; margin: 4px 0 20px; }
.prose { color: var(--soft); font-size: 15px; }
.prose.interest { margin-top: 8px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; }
.facts small { display: block; color: var(--muted); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.facts b { font-weight: 600; font-size: 15px; }

.entries { display: grid; gap: 22px; }
.entry { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; position: relative; }
.entry:not(:last-child)::after {
  content: ""; position: absolute; left: 17px; top: 44px; bottom: -16px; width: 1px; background: var(--line);
}
.logo {
  width: 36px; height: 36px; border-radius: 9px; object-fit: contain;
  display: grid; place-items: center; font: 700 12px var(--mono); background: var(--chip);
}
img.logo[src*="-tile"] { object-fit: cover; background: #fff; padding: 0; box-shadow: 0 0 0 1px var(--line); }
.entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.entry h3 { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.badge, .tag {
  border-radius: 999px; background: var(--chip); font: 600 10.5px var(--mono);
  letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px;
}
.tag { display: inline-flex; align-items: center; gap: 6px; }
.tag img { width: 14px; height: 14px; object-fit: contain; }
:root[data-theme="light"] img.mono { filter: invert(1); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) img.mono { filter: invert(1); } }
@media print { img.mono { filter: invert(1); } }
.date { color: var(--muted); font-size: 12.5px; margin: 2px 0 0; }
.entry-head + p, .date + p { margin-top: 6px; }
.entry p:not(.date) { color: var(--soft); font-size: 14.5px; }
.more {
  margin-top: 6px; background: none; border: 0; padding: 4px 0; color: var(--text);
  font: 600 13px Inter, sans-serif; cursor: pointer; text-decoration: none; display: inline-block;
}
.more::after { content: " ›"; }
.more[aria-expanded="true"]::after { content: " ⌄"; }
.entry .extra { margin-top: 6px; color: var(--muted); }
.extra[hidden] { display: none; }

.langs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.langs b { display: block; font-weight: 600; }
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.track { display: flex; gap: 10px; width: max-content; animation: slide 26s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.track .tag { padding: 7px 14px; white-space: nowrap; }
@keyframes slide { to { transform: translateX(calc(-50% - 5px)); } }

.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.groups h3 { font-size: 15px; font-weight: 600; }
.groups p { color: var(--muted); font-size: 14px; margin: 4px 0 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

.footer { color: var(--muted); font-size: 13px; text-align: center; padding: 28px 0 8px; }


@media (max-width: 820px) {
  .page { padding-top: 24px; }
  .columns { grid-template-columns: minmax(0, 1fr); }
  .hero { flex-wrap: wrap; padding: 18px; }
  .hero-text { flex-basis: calc(100% - 104px); }
  .actions { align-items: flex-start; width: 100%; }
  .card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora::before, .track { animation: none; }
}
@media print {
  :root, :root[data-theme] {
    color-scheme: light; --bg: #fff; --card: #fff; --line: #ddd; --text: #000; --muted: #444; --soft: #222; --chip: #eee;
    --title-a: #000; --title-b: #000;
  }
  .aurora, .actions, .more, .footer { display: none !important; }
  .page { padding: 0; width: 100%; }
  .card { backdrop-filter: none; -webkit-backdrop-filter: none; padding: 12px; break-inside: avoid; }
  .columns { grid-template-columns: 2fr 3fr; gap: 10px; }
  .column, .stack { gap: 10px; }
  .stack { margin-top: 10px; }
  .hero { margin-bottom: 10px; }
  .extra[hidden] { display: block; }
  .marquee { mask: none; -webkit-mask: none; }
  .track { animation: none; width: auto; flex-wrap: wrap; }
  .track [aria-hidden] { display: none; }
}