:root {
  --fg: #f2f2f2;
  --dim: #6b6b6b;
  --pad: clamp(16px, 3vw, 36px);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
  background: #000;
  overflow: hidden;
}

body {
  color: var(--fg);
  font: 400 12px/1.5 "Geist Mono", ui-monospace, Menlo, monospace;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}

#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 1.2s ease;
  cursor: grab;
  touch-action: none;
}

#gl.dragging,
#gl.dragging.on-sphere { cursor: grabbing; }

.gl-ready #gl { opacity: 1; }

main {
  position: fixed;
  inset: 0;
  padding: var(--pad);
  pointer-events: none;
}

main > * { position: absolute; margin: 0; pointer-events: auto; }

h1 {
  top: var(--pad);
  left: var(--pad);
  font: inherit;
}

a {
  color: var(--fg);
  text-decoration: none;
}

a:hover { color: #000; background: var(--fg); }

:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

::selection { background: var(--fg); color: #000; }

/* Quick links, top right */

.quick {
  top: var(--pad);
  right: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  max-width: min(340px, calc(100vw - 2 * var(--pad) - 150px));
}

.quick details { text-align: right; }

.quick summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  color: var(--dim);
  transition: color 0.2s;
}

.quick summary::-webkit-details-marker { display: none; }

.quick summary::after {
  content: "+";
  display: inline-block;
  width: 1ch;
  margin-left: 1ch;
  transition: transform 0.25s ease;
}

.quick summary:hover,
.quick details[open] summary { color: var(--fg); }

.quick details[open] summary::after { transform: rotate(45deg); }

.quick ul {
  list-style: none;
  margin: 6px 0 12px;
  padding: 0 0 0 12px;
  border-right: 1px solid var(--dim);
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.quick details[open] ul { animation: drop 0.3s ease both; }

.quick li { max-width: 100%; }

.quick a::after { content: " \2197"; }

.quick a .pub {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
}

.quick a .meta {
  display: block;
  color: var(--dim);
  margin-top: 2px;
}

.quick a:has(.pub)::after { content: none; }

.quick a:hover .meta { color: #000; }

@keyframes drop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Bottom row */

.links {
  bottom: var(--pad);
  left: var(--pad);
  display: flex;
  gap: 20px;
}

.year {
  bottom: var(--pad);
  right: var(--pad);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* Notices: only for things the visitor must know */

.notice {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pad) + 40px);
  transform: translate(-50%, 6px);
  margin: 0;
  max-width: calc(100vw - 2 * var(--pad));
  padding: 6px 10px;
  background: var(--fg);
  color: #000;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.notice.on { opacity: 1; transform: translate(-50%, 0); }

#gl.on-sphere { cursor: pointer; }
#gl:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}