* { box-sizing: border-box; }
:root { color-scheme: dark; background: #000; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
main { position: fixed; inset: 0; overflow: hidden; }
h1 {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  white-space: nowrap;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(16px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  font-kerning: none;
  font-variant-ligatures: none;
  transform: translate(calc(50vw - 50%), calc(50dvh - 50%));
  user-select: none;
  -webkit-text-stroke: 0.25px currentColor;
}
.ink { display: inline-block; }
.muted { color: #949494; text-shadow: 0 0 4px rgb(148 148 148 / 16%); }
.accent { position: relative; display: inline-block; color: #bceba8; font-weight: 900; -webkit-text-stroke: 0.75px currentColor; }
.accent > span {
  text-shadow: 0 0 2px currentColor,
    0 0 8px color-mix(in srgb, currentColor 80%, transparent),
    0 0 24px color-mix(in srgb, currentColor 50%, transparent);
}
.accent::before {
  content: "ctf";
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 0;
  background: repeating-linear-gradient(180deg,
    rgb(0 0 0 / 32%) 0 1px,
    rgb(255 255 255 / 14%) 1px 2px,
    transparent 2px 4px);
  background-clip: text;
  -webkit-background-clip: text;
  pointer-events: none;
}
.accent::after {
  content: "ctf";
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 0;
  background: linear-gradient(110deg, transparent 36%, rgb(255 255 255 / 15%) 43%, rgb(255 255 255 / 95%) 50%, rgb(255 255 255 / 15%) 57%, transparent 64%);
  background-size: 260% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  opacity: 0;
  pointer-events: none;
  animation: ihatectf-sheen 3s linear infinite paused;
}
main[data-motion="running"] .accent::after { opacity: 1; animation-play-state: running; }
main[data-motion="reduced"] .accent::after,
main[data-motion="off"] .accent::after { animation: none; }
@keyframes ihatectf-sheen {
  0% { background-position: 180% 50%; }
  72%, 100% { background-position: -80% 50%; }
}
.quip {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  max-width: calc(100% - 24px);
  color: #737373;
  font: 500 clamp(14px, 1.6vw, 17px)/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}
.quip-category { color: #545454; }
@media print { h1 { position: static; transform: none !important; } }