/* butler on the start page: ivory paper and ink with the claret of its bow
   tie, a warm dark under a dark preference — and its `--help` drawn as a
   terminal card: the prompt, then the commands grouped by the component that
   brings them, in Geist Mono. */
.il-butler { --il: #f07a8c; }
.il-butler .il-name { font-family: "Geist", sans-serif; font-weight: 650; letter-spacing: -0.01em; }
/* The glyph is a mask: the bow tie in each place's accent. */
.il-butler .il-name::before, .band-butler .band-name::before {
  -webkit-mask: url("../marks/butler-glyph.svg") center / contain no-repeat; mask: url("../marks/butler-glyph.svg") center / contain no-repeat;
  margin-right: 0.45em;
}
.il-butler .il-name::before { background: #9b1c31; }
@media (prefers-color-scheme: dark) { .il-butler .il-name::before { background: #f07a8c; } }

.band-butler {
  --band-line: #ddd6c8; --band-accent: #9b1c31; --band-on-accent: #ffffff;
  --bt-card: #fffdf8; --bt-card-line: #ddd6c8; --bt-fg: #1b1a17; --bt-dim: #8c857a; --bt-accent: #9b1c31;
  background: #f6f3ec; color: #1b1a17; font-family: "Geist", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .band-butler {
    --band-line: #33302a; --band-accent: #f07a8c; --band-on-accent: #1f0a0e;
    --bt-card: #1c1a17; --bt-card-line: #33302a; --bt-fg: #ece7dd; --bt-dim: #7a7368; --bt-accent: #f07a8c;
    background: #141311; color: #ece7dd;
  }
}
.band-butler .band-name { font-weight: 650; letter-spacing: -0.02em; }
.band-butler .band-name::before { background: var(--band-accent); }
.band-butler .band-pitch {
  font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", Georgia, serif;
}
.band-butler .band-facts li { color: var(--bt-dim); }
.band-butler .band-links a { border-radius: 8px; font-weight: 600; font-size: 0.875rem; }

.bt-term {
  max-width: 28rem; margin-left: auto; overflow: hidden;
  border: 1px solid var(--bt-card-line); border-radius: 10px; background: var(--bt-card); color: var(--bt-fg);
  font-family: "Geist Mono", monospace; font-size: 0.8125rem; line-height: 1.6; font-variant-ligatures: none;
}
.bt-bar {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--bt-card-line); font-family: "Geist", sans-serif; font-size: 0.75rem; color: var(--bt-dim);
}
.bt-bar i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--bt-card-line); }
.bt-bar span { margin-left: 0.5rem; }
.bt-body { padding: 0.8rem 0.9rem 0.9rem; }
.bt-line { display: block; white-space: pre; }
.bt-prompt { color: var(--bt-accent); }
.bt-next { margin-top: 0.6rem; }
.bt-dim { color: var(--bt-dim); }
.bt-group {
  display: block; margin-top: 0.6rem; font-family: "Geist", sans-serif; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--bt-accent);
}
.bt-cmd { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 0.75rem; }
.bt-cmd b { font-weight: 500; }
.bt-cmd span { color: var(--bt-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-caret { display: inline-block; width: 0.55em; height: 1.05em; vertical-align: -0.15em; background: var(--bt-accent); }
@media (prefers-reduced-motion: no-preference) {
  .bt-caret { animation: bt-blink 1.1s steps(1) infinite; }
  @keyframes bt-blink { 50% { opacity: 0; } }
}
@media (max-width: 30rem) {
  .bt-cmd { grid-template-columns: 7.25rem 1fr; }
  .bt-cmd span { white-space: normal; }
}