:root {
  --fg: #e4e4e7;
  --dim: #71717a;
  --faint: #3f3f46;
  --line: #1c1c1f;
  --green: #c9a6ff;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #000;
  color: var(--fg);
  font: 400 12px/1.6 var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--green); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
input { font: inherit; color: inherit; background: none; border: 0; outline: none; }
::selection { background: var(--green); color: #000; }
::placeholder { color: var(--faint); }
:focus-visible { outline: 1px solid var(--green); outline-offset: 2px; }

.scan {
  position: fixed; inset: 0; z-index: 9; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
}

.top, main, footer {
  width: min(100% - 32px, 880px);
  margin: 0 auto;
}

.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
}
.wordmark { font-weight: 500; letter-spacing: .08em; }
.top nav { display: flex; align-items: center; gap: 22px; color: var(--dim); }

.logo {
  position: relative; overflow: hidden;
  margin: 6vh auto 8vh;
  width: min(100%, 560px);
}
.logo:not(.canvas) video {
  filter: hue-rotate(125deg) drop-shadow(0 0 10px rgba(201,166,255,.4)) drop-shadow(0 0 36px rgba(201,166,255,.18));
  animation: flicker 7s steps(1) infinite;
}
.logo video {
  display: block; width: 100%;
  mix-blend-mode: screen;
}
.logo.canvas video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; animation: none; filter: none; }
.logo canvas { display: none; width: 100%; mix-blend-mode: screen; }
.logo.canvas canvas { display: block; }
@keyframes flicker {
  0%, 100% { opacity: 1; }
  3%   { opacity: .55; }
  3.6% { opacity: 1; }
  9%   { opacity: .85; }
  9.4% { opacity: 1; }
  21%  { opacity: .4; }
  21.5%{ opacity: .9; }
  22%  { opacity: 1; }
  47%  { opacity: .7; }
  47.8%{ opacity: 1; }
  63%  { opacity: .3; }
  63.4%{ opacity: 1; }
  64%  { opacity: .8; }
  64.5%{ opacity: 1; }
  88%  { opacity: .6; }
  88.6%{ opacity: 1; }
}

section { margin-bottom: 64px; }

.bar {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
  color: var(--dim);
}
.bar span:last-child { margin-left: auto; color: var(--faint); }
#q { flex: 1; min-width: 0; }
#q::-webkit-search-cancel-button { -webkit-appearance: none; }

.row {
  display: grid; align-items: baseline; gap: 16px;
  grid-template-columns: 1fr auto auto;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.row .ver { color: var(--dim); }
.row .get { color: var(--dim); }
.row:hover > span:first-child, .row .get:hover { color: var(--green); }
.none { padding: 24px 0; color: var(--faint); }

footer {
  display: flex; justify-content: space-between;
  padding: 24px 0 32px; color: var(--faint);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logo video, .logo canvas { animation: none; }
}