/* Circle — the kinship globe's edge set laid flat. Chrome deliberately mirrors
   /kinship/: full-bleed canvas, fixed HUD, one control row, everything else
   behind a panel or dialog. */
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  --bg: #050a1a;
  --surface: rgba(6, 8, 22, 0.94);
  --text: #b0b0c0;
  --textBright: #dcdce8;
  --textMuted: #6b6b84;
  --border: rgba(90, 90, 120, 0.18);
  --btnBg: rgba(14, 16, 32, 0.85);
  --btnBorder: rgba(80, 80, 110, 0.15);
  --accent: #4a9eff;
  --scrim: rgba(5, 10, 26, 0.9);
  background-color: var(--bg);
  background-image:
    radial-gradient(78% 58% at 76% 22%,
      rgba(96, 46, 128, 0.18) 0%, rgba(58, 30, 86, 0.07) 48%, rgba(0, 0, 0, 0) 74%),
    radial-gradient(110% 85% at 50% 46%,
      rgba(46, 74, 158, 0.34) 0%, rgba(28, 34, 92, 0.18) 46%, rgba(0, 0, 0, 0) 76%);
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed;
  color: var(--text);
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
  font-family: system-ui, -apple-system, sans-serif;
}

#chart { display: block; cursor: default; outline: none; touch-action: none; }
#chart:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }

body::before {
  content: ''; position: fixed; inset: 0 0 auto 0; height: 96px; z-index: 90;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--scrim), transparent);
}

.hud {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  text-align: center; z-index: 100; pointer-events: none; max-width: 92vw;
}
.hud h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300; font-size: 34px; letter-spacing: 7px;
  text-transform: uppercase; color: var(--textBright);
}
.hud-sub {
  margin-top: 4px; font-size: 10px; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--textMuted);
}
.hud-sub a { color: inherit; text-decoration: none; pointer-events: auto; }
.hud-sub a:hover { color: var(--text); text-decoration: underline; }

.sites {
  position: fixed; top: 20px; right: 62px; z-index: 100;
  font-size: 10px; letter-spacing: 0.5px; display: flex; gap: 10px;
}
.sites a { color: var(--textMuted); text-decoration: none; }
.sites a:hover { color: var(--textBright); }

.corner-btn {
  position: fixed; top: 16px; right: 16px; z-index: 110;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--btnBg); border: 1px solid var(--btnBorder);
  color: var(--textMuted); cursor: pointer; backdrop-filter: blur(6px);
}
.corner-btn:hover { color: var(--textBright); border-color: var(--border); }
.corner-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.ctrl {
  position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 100; display: flex; justify-content: center; align-items: center;
  gap: 10px; pointer-events: none;
}
.ctrl > * { pointer-events: auto; }

.seg {
  display: inline-flex; overflow: hidden;
  background: var(--btnBg); border: 1px solid var(--btnBorder);
  border-radius: 999px; backdrop-filter: blur(10px);
}
.seg-opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 78px; min-height: 40px; padding: 0 14px;
  border: none; background: none; cursor: pointer;
  color: var(--textMuted); font-size: 16px; letter-spacing: 0.2px;
  transition: color 0.15s, background 0.15s;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--btnBorder); }
.seg-opt:hover { color: var(--text); }
.seg-opt.is-on {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.seg-opt:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; }

.ghost-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: none; border: 1px solid transparent;
  color: var(--textMuted); cursor: pointer;
}
.ghost-btn:hover, .ghost-btn.is-on {
  color: var(--textBright); background: var(--btnBg); border-color: var(--btnBorder);
}
.ghost-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.readout {
  position: fixed; left: 50%; transform: translateX(-50%);
  z-index: 100; max-width: min(92vw, 620px);
  display: flex; flex-direction: column; gap: 2px; text-align: center;
  background: var(--btnBg); border: 1px solid var(--btnBorder);
  border-radius: 12px; padding: 7px 14px; backdrop-filter: blur(10px);
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.readout i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
.r-main { color: var(--textBright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-sub { color: var(--textMuted); font-size: 11.5px; }
.hint {
  position: fixed; left: 0; right: 0; z-index: 99; text-align: center;
  font-size: 11px; color: var(--textMuted); pointer-events: none;
  transition: opacity 0.3s;
}
.hint.hide { opacity: 0; }

.panel {
  position: fixed; left: 50%; transform: translateX(-50%);
  z-index: 105; width: min(94vw, 460px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; backdrop-filter: blur(18px);
  max-height: 60vh; overflow-y: auto; user-select: text;
}
.panel-head { display: flex; gap: 8px; align-items: center; }
.panel input, .panel select {
  flex: 1; min-width: 0; font-size: 16px; padding: 8px 10px;
  background: rgba(0, 0, 0, 0.32); color: var(--textBright);
  border: 1px solid var(--btnBorder); border-radius: 8px;
}
.panel input:focus-visible, .panel select:focus-visible { outline: 1px solid var(--accent); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none; border-radius: 6px;
  background: none; border: 1px solid var(--btnBorder);
  color: var(--textMuted); cursor: pointer;
}
.icon-btn:hover { color: var(--textBright); }
.results { margin-top: 10px; display: flex; flex-direction: column; }
.results button {
  text-align: left; background: none; border: none; cursor: pointer;
  color: var(--text); font: inherit; font-size: 13px; padding: 7px 8px;
  border-radius: 6px;
}
.results button:hover, .results button:focus-visible { background: rgba(255, 255, 255, 0.06); }
.results .meta { color: var(--textMuted); font-size: 11px; }

dialog {
  max-width: 460px; width: calc(100vw - 32px); padding: 20px 22px;
  margin: auto; max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  backdrop-filter: blur(18px); user-select: text;
}
dialog:focus { outline: none; }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dialog-head h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500; font-size: 24px; color: var(--textBright); line-height: 1.15;
}
dialog p { margin: 10px 0; font-size: 12px; line-height: 1.6; }
dialog .key { color: var(--textBright); font-size: 13px; }
dialog .fine { color: var(--text); font-size: 11.5px; }
dialog p a { color: var(--accent); }
dialog p a:hover { color: var(--textBright); }
.dialog-links {
  display: flex; flex-wrap: wrap; gap: 14px;
  border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px;
}
.dialog-links a { color: var(--accent); text-decoration: none; font-size: 12px; }
.dialog-links a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .hud h1 { font-size: 22px; letter-spacing: 4px; }
  .sites { display: none; }
}

/* Social-card capture: ?bare=1 leaves only the drawing. */
body.bare .hud, body.bare .sites, body.bare .corner-btn,
body.bare .ctrl, body.bare .hint, body.bare .readout,
body.bare .panel, body.bare .legend, body.bare::before { display: none !important; }