/* Self-hosted fonts (latin subset) and the humans/agents switch, shared by every page. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-tight-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

#tl-viewbar {
  position: relative; z-index: 30; display: flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 16px; background: #07040d; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
#tl-viewbar .tl-switch {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 300px; height: 32px; padding: 3px;
  border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; outline: none;
}
#tl-viewbar .tl-switch:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 2px #b58cff; }
#tl-viewbar .tl-switch.is-dragging { cursor: grabbing; }
#tl-viewbar .tl-thumb {
  position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); border-radius: 999px;
  background: linear-gradient(135deg, #8f6ad2 0%, #7b3fe4 55%, #5a24c8 100%); box-shadow: 0 0 14px rgba(123, 63, 228, .45);
  transition: transform .26s cubic-bezier(.3, 1.35, .5, 1), background .26s, box-shadow .26s, border-radius .26s;
}
#tl-viewbar .tl-switch[data-state="agent"] .tl-thumb { transform: translateX(100%); }
#tl-viewbar .tl-switch[data-state="agent"] .tl-thumb,
#tl-viewbar .tl-switch.is-past-half .tl-thumb {
  background: #020803; border-radius: 6px; box-shadow: inset 0 0 0 1px #3ee07a, 0 0 14px rgba(62, 224, 122, .35);
}
#tl-viewbar .tl-switch.is-dragging .tl-thumb { transition: background .2s, box-shadow .2s, border-radius .2s; }
#tl-viewbar .tl-opt {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 2px;
  color: rgba(255, 255, 255, .55); text-decoration: none; pointer-events: none; transition: color .2s;
  font: 400 13px/1 Inter, "Inter Placeholder", sans-serif; letter-spacing: 0;
}
#tl-viewbar .tl-opt-agent { font: 700 11px/1 "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: .1em; }
#tl-viewbar .tl-switch[data-state="human"]:not(.is-past-half) .tl-opt-human { color: #fff; }
#tl-viewbar .tl-switch[data-state="agent"] .tl-opt-agent,
#tl-viewbar .tl-switch.is-past-half .tl-opt-agent { color: #3ee07a; text-shadow: 0 0 8px rgba(62, 224, 122, .5); }
#tl-viewbar .tl-caret { display: inline-block; width: 6px; height: 11px; margin-left: 3px; background: currentColor; animation: tl-blink 1.05s steps(1) infinite; }
@keyframes tl-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #tl-viewbar .tl-caret { animation: none; } #tl-viewbar .tl-thumb { transition: none; } }