@font-face {
  font-family: "Iosevka";
  src: url("assets/fonts/iosevka-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Iosevka";
  src: url("assets/fonts/iosevka-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Iosevka";
  src: url("assets/fonts/iosevka-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --lh: 1.5rem;
  --bg: #0f0f0f;
  --bg-raise: #151514;
  --ink: #f4dfcb;
  --dim: #a2937f;
  --faint: #635747;
  --acc: #ec8f52;
  --acc-ink: #0f0f0f;
  --arrow: #93c76f;
  --rule: #2b2925;
  --mono: "Iosevka", "Roboto Mono", ui-monospace, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: var(--rule) var(--bg);
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }
::-webkit-scrollbar-thumb:active { background: var(--acc); }
::-webkit-scrollbar-corner { background: var(--bg); }

body {
  font-family: var(--mono);
  font-size: 1rem;
  line-height: var(--lh);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  cursor: url("assets/cursors/arrow.png") 5 0, default;
  padding-bottom: calc(var(--lh) * 3);
}

a, summary, button, select { cursor: url("assets/cursors/point.png") 9 1, pointer; }
p, pre, h1, h2, li, figcaption { cursor: url("assets/cursors/ibeam.png") 4 9, text; }
input { cursor: url("assets/cursors/ibeam.png") 4 9, text; }

::selection { background: var(--acc); color: var(--acc-ink); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--faint);
  text-underline-offset: 0.2em;
  text-decoration-thickness: from-font;
}
a:hover { color: var(--acc); text-decoration-color: var(--acc); }

b { font-weight: 700; }
.dim { color: var(--dim); }
.acc { color: var(--acc); }
.faint { color: var(--faint); }
.arrow { color: var(--arrow); }

#page {
  position: relative;
  z-index: 2;
  max-width: calc(min(120ch, round(down, 100%, 1ch)));
  margin: 0 auto;
  padding: calc(var(--lh) * 2) 2ch calc(var(--lh) * 3);
}

nav { display: flex; gap: 3ch; margin-bottom: calc(var(--lh) * 2); flex-wrap: wrap; }
nav a { text-decoration: none; color: var(--dim); }
nav a::before { content: "["; visibility: hidden; }
nav a::after { content: "]"; visibility: hidden; }
nav a:hover { color: var(--acc); }
nav a:hover::before, nav a:hover::after { visibility: visible; color: var(--acc); }

.logotype {
  font-weight: 700;
  font-size: 2.25rem;
  line-height: calc(var(--lh) * 2);
  margin-bottom: calc(var(--lh) / 2);
  text-align: center;
}

.sub {
  color: var(--dim);
  margin-bottom: calc(var(--lh) * 2);
  text-align: center;
}
.prompt { color: var(--acc); }

.chips { display: flex; gap: 1.5ch; flex-wrap: wrap; margin-bottom: calc(var(--lh) * 1.5); }
.chip {
  font: inherit;
  background: none;
  border: 0;
  color: var(--dim);
  padding: 0;
  text-decoration: none;
}
.chip::before { content: "["; color: var(--faint); }
.chip::after { content: "]"; color: var(--faint); }
.chip:hover { color: var(--acc); }
.chip:hover::before, .chip:hover::after { color: var(--acc); }
.chip[aria-pressed="true"] { color: var(--acc-ink); background: var(--acc); }
.chip[aria-pressed="true"]::before,
.chip[aria-pressed="true"]::after { color: var(--acc-ink); }
.note { color: var(--faint); text-align: center; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34ch, 1fr));
  gap: var(--lh) 2ch;
}

.card {
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.card:hover { border-color: var(--acc); color: inherit; }
.card .frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.card .frame iframe {
  position: absolute;
  top: 0; left: 0;
  width: 1440px;
  height: 1080px;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.card .frame .hit { position: absolute; inset: 0; }
.card .meta { padding: calc(var(--lh) / 2) 2ch calc(var(--lh) / 2 - 1px); display: block; }
.card .name { font-weight: 700; display: block; }
.card .name::before { content: "> "; color: var(--acc); }
.card:hover .name { color: var(--acc); }
.card .tags { color: var(--faint); display: block; }
.card .tags b { color: var(--dim); font-weight: 400; }

/* empty state */
.empty {
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  padding: calc(var(--lh) * 2) 2ch;
}
.empty pre {
  font-family: var(--mono);
  line-height: var(--lh);
  color: var(--dim);
  overflow-x: auto;
}
.empty .ok { color: var(--acc); }
.empty .hint { color: var(--faint); margin-top: var(--lh); max-width: 72ch; }

/* footer bar */
#bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  justify-content: space-between;
  gap: 2ch;
  background: var(--bg-raise);
  border-top: 2px solid var(--rule);
  padding: calc(var(--lh) / 4) 2ch;
  line-height: var(--lh);
  white-space: nowrap;
  overflow: hidden;
}
#bar a { text-decoration: none; color: var(--dim); }
#bar a:hover { color: var(--acc); }
.barleft { overflow: hidden; text-overflow: ellipsis; }
#clock { color: var(--acc); }

#grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  z-index: 50;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width: 720px) {
  .logotype { font-size: 1.5rem; line-height: calc(var(--lh) * 1.5); }
  .ctrllabel { flex: 0 0 100%; }
  .grid { grid-template-columns: 1fr; }
  #bar .barright { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
}