:root {
  --bg: #0a0c0d;
  --fg: #e9e7e1;
  --dim: #7d827f;
  --accent: #ff5a1f;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --pad: clamp(16px, 3vw, 32px);
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 300 12px/1.5 var(--mono);
  letter-spacing: .04em;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
@media (pointer: fine) {
  body, a, button { cursor: none; }
}

canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#cursor { pointer-events: none; z-index: 10; }

.ui { position: fixed; inset: 0; padding: var(--pad); pointer-events: none; z-index: 5; }
.ui a, .ui button { pointer-events: auto; }

.crop { position: absolute; width: 14px; height: 14px; border: 0 solid var(--dim); opacity: .6; }
.crop.tl { top: 10px; left: 10px; border-top-width: 1px; border-left-width: 1px; }
.crop.tr { top: 10px; right: 10px; border-top-width: 1px; border-right-width: 1px; }
.crop.bl { bottom: 10px; left: 10px; border-bottom-width: 1px; border-left-width: 1px; }
.crop.br { bottom: 10px; right: 10px; border-bottom-width: 1px; border-right-width: 1px; }

.top, .bottom { position: absolute; left: var(--pad); right: var(--pad); display: flex; justify-content: space-between; gap: 24px; }
.top { top: var(--pad); }
.bottom { bottom: var(--pad); color: var(--dim); align-items: flex-end; }
.id { display: flex; align-items: center; gap: 10px; letter-spacing: .22em; font-weight: 400; }
.meta { display: flex; gap: 28px; color: var(--dim); }

.k { color: var(--dim); text-transform: uppercase; letter-spacing: .2em; font-size: 10px; margin-bottom: 18px; }

.hero { position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%); }
.hero h1 {
  font: 300 clamp(30px, 4.4vw, 60px)/1.04 "Space Grotesk", sans-serif;
  letter-spacing: -.02em;
}

.vectors { position: absolute; right: var(--pad); bottom: calc(var(--pad) + 56px); display: flex; flex-direction: column; align-items: flex-start; min-width: 240px; }
.vectors button {
  all: unset; display: flex; gap: 14px; width: 100%; padding: 7px 0;
  border-top: 1px solid #ffffff14; color: var(--dim); transition: color .2s, padding-left .25s;
}
.vectors button span { color: #ffffff40; transition: color .2s; }
.vectors button.on, .vectors button:hover, .vectors button:focus-visible { color: var(--fg); padding-left: 8px; }
.vectors button.on span { color: var(--accent); }

.bottom a { color: var(--fg); text-decoration: none; border-bottom: 1px solid #ffffff30; padding-bottom: 2px; }
.bottom a:hover { border-color: var(--accent); }
.bottom .links { display: flex; gap: 20px; flex-wrap: wrap; }
.bottom .links a + a { color: var(--dim); border-color: transparent; }
.bottom .links a + a:hover { color: var(--fg); }

@media (max-width: 1100px) {
  #stats { display: none; }
}
@media (max-width: 760px) {
  .meta span:first-child, #stats { display: none; }
  .bottom { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
  .hero { top: calc(var(--pad) + 56px); transform: none; }
  .vectors { left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + 68px); min-width: 0; }
  .vectors .k { display: none; }
}
@media (max-height: 560px) and (max-width: 760px) {
  .vectors { display: none; }
}