@font-face {
  font-family: 'Geist Pixel';
  src: url('GeistPixel-Square.woff2') format('woff2');
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --bg: #ffffff;
  --border: #cccccc;
  --border-light: #eeeeee;
  --text: #000000;
  --text-muted: #666666;
  --blue: #0044ff;
  --btn-bg: #e8e8e8;
  --font: 'Geist Pixel', monospace;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  line-height: 1.6;
  padding: 24px 16px 48px;
  max-width: 1400px;
  margin: 0 auto;
}

a { color: var(--blue); text-decoration: none; }
.muted { color: var(--text-muted); }

header { margin-bottom: 24px; }
h1 { font-size: 64px; line-height: 1; font-weight: normal; }
h1 a { color: inherit; }
h1 a:hover { color: var(--blue); }

.bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.bar:last-of-type { border-bottom: 1px solid var(--border); margin-bottom: 24px; }
#friends { display: contents; }

label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
input, select, button {
  font: inherit;
  font-size: 12px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  padding: 0 8px;
}
input[type=checkbox] { height: auto; accent-color: var(--blue); }
button { background: var(--btn-bg); cursor: pointer; }

#feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px 16px;
}
.video { display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--border-light); }
.video:hover .title { color: var(--blue); }
.video .meta { color: var(--text-muted); }
.who { display: flex; flex-wrap: wrap; gap: 4px; }
.who b { font-weight: normal; color: var(--blue); border: 1px solid var(--blue); padding: 0 4px; }
.who b.mine { color: var(--text-muted); border-color: var(--border); }
.empty { grid-column: 1 / -1; }

footer { margin-top: 48px; padding-top: 12px; border-top: 1px solid var(--border); }
#add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
#add input[name=channel] { width: 260px; }

.views { margin-left: auto; display: inline-flex; gap: 12px; }

#map-view { margin-bottom: 24px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 8px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.dot.shared { background: var(--blue); }
.dot.solo { background: var(--border); }
#map { width: 100%; height: 75vh; min-height: 420px; border: 1px solid var(--border-light); display: block; cursor: grab; user-select: none; -webkit-user-select: none; }
#map.panning { cursor: grabbing; }
#map line { vector-effect: non-scaling-stroke; }
#map text { font-family: var(--font); }
#map .user rect { fill: var(--text); }
#map .user text { fill: var(--bg); }
#map .link { stroke: var(--border-light); }
#map .link.shared { stroke: var(--blue); stroke-opacity: .35; }
#map .channel { cursor: pointer; }
#map .channel .dot { fill: var(--border); r: calc(2px * var(--k, 1)); }
#map .channel.shared .dot { fill: var(--blue); r: calc(5px * var(--k, 1)); }
/* Invisible, larger click targets. */
#map .channel .hit { fill: transparent; r: calc(6px * var(--k, 1)); }
#map .channel.shared .hit { r: calc(14px * var(--k, 1)); }
#map .channel text { font-size: calc(11px * var(--k, 1)); fill: var(--text); paint-order: stroke; stroke: var(--bg); stroke-width: .25em; }
#map .channel:hover .dot { fill: var(--text); r: calc(5px * var(--k, 1)); }
#map.focus .channel:not(.on), #map.focus .link:not(.on) { opacity: .12; }

#shared { margin-top: 24px; columns: 280px; column-gap: 24px; }
#shared h2 { font-size: 12px; font-weight: normal; color: var(--text-muted); column-span: all; margin-bottom: 8px; }
#shared p { break-inside: avoid; }

#player { margin: auto; width: min(1100px, calc(100vw - 32px)); border: 1px solid var(--border); padding: 12px; background: var(--bg); }
#player::backdrop { background: rgba(255, 255, 255, .9); }
#player .frame { aspect-ratio: 16 / 9; background: var(--text); }
#player iframe { width: 100%; height: 100%; border: 0; display: block; }
#player .title { margin-top: 8px; font-size: 13px; }
#player .actions { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
#player .close { margin-left: auto; }

#tip { position: fixed; z-index: 10; pointer-events: none; background: var(--text); color: var(--bg); padding: 2px 6px; font-size: 12px; white-space: nowrap; }