@charset "UTF-8";
/* The code-review app's styles: the framework's rules and its packs', in the order the framework's always came, then the
   site's look and its own few. A name under web/ is the framework's Sass and one under pack- a pack's, each found through
   sasscompiler.json, so nothing is copied; a name under site/ is the static site's Sass, moved in (F109.1): its values
   right after the framework's colours and its elements right after the framework's, so the site's win where they meet,
   and the landing, the films and its phone rules after the packs'. The colours aren't here: the framework's come first,
   and the theme the person picks loads after this file (themes/; console, the default, is the framework's colours as they
   are). The build makes wwwroot/css/app.css from this. */
/* The framework's colours: what a site with none of its own looks like. Black and white with metallic greys, set in Geist,
   the static site's Console theme. The only colours in it are a muted red for errors and an amber for warnings. A site
   lists this first and its own colours after, so the same name set twice gives the site's. The names are Bootstrap's, and
   a --web- name where it has none; a site that sets some of them keeps these for the rest. */
:root {
  --bs-primary: #ffffff;
  --bs-primary-rgb: 255, 255, 255;
  --bs-danger: #d9675f;
  --bs-danger-rgb: 217, 103, 95;
  --bs-warning: #d4a72c;
  --bs-warning-rgb: 212, 167, 44;
  --bs-body-bg: #070708;
  --bs-body-bg-rgb: 7, 7, 8;
  --bs-secondary-bg: #0d0e10;
  --bs-secondary-bg-rgb: 13, 14, 16;
  --bs-tertiary-bg: #15171a;
  --bs-tertiary-bg-rgb: 21, 23, 26;
  --bs-success-text-emphasis: #c9ccd1;
  --web-success-text-rgb: 201, 204, 209;
  --web-menu-bg: #15171a;
  --web-menu-bg-rgb: 21, 23, 26;
  --web-overlay-rgb: 255, 255, 255;
  --web-shadow-rgb: 0, 0, 0;
  --web-failed-rgb: 217, 103, 95;
  --web-backdrop-rgb: 0, 0, 0;
  --web-hover-rgb: 127, 127, 127;
  --web-primary-deep: #c9ccd1;
  --bs-primary-bg-subtle: #1b1d21; /* a tint of what matters */
  --bs-primary-text-emphasis: #e6e8eb; /* what matters, as text */
  --bs-success: #c9ccd1; /* your messages */
  --web-success-deep: #9aa0a8;
  --bs-success-bg-subtle: #15171a;
  --web-sidebar-foot: #0d0e10; /* the sidebar's footer */
  --web-sidebar-foot-deep: #070708;
  --bs-link-color: #e6e8eb;
  /* The smaller steps the rules use. */
  --web-on-primary: #070708; /* text on an action or on your message */
  --web-bright: #ffffff; /* the brightest text on the dark */
  --web-soft-text: #c9ccd1;
  --web-settings-text: #c9ccd1;
  --web-error-text: #e8a39c;
  --web-photo-text: #333333; /* a caption on a photo's white mat */
  --web-border-hover: #3a3e45;
  --web-scrollbar: #2c2f35;
  --web-dialog-bg: #0d0e10;
  --web-code-number: #c9ccd1;
  --web-code-comment: #7c828a;
  --web-live-dot: #e6e8eb;
  --bs-emphasis-color: #ffffff; /* headings, what's lit */
  --bs-body-color: #e6e8eb;
  --bs-secondary-color: #9aa0a8;
  --bs-tertiary-color: #7c828a;
  --bs-border-color: #2c2f35;
  --web-code-bg: #15171a;
  --web-cta: linear-gradient(180deg, #ffffff 0%, #b9bec6 100%);
  --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --bs-box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .7);
  --web-glow: 0 0 0 4px rgba(var(--bs-primary-rgb), .12), 0 10px 30px -10px rgba(var(--bs-primary-rgb), .25);
  --bs-font-sans-serif: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-monospace: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --web-ease: cubic-bezier(.2, .8, .2, 1);
  --web-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}

/* What only the site's pages need (F109.1, from the static site). Their colours are the framework's own Console look,
   the one copy, listed before this file: black and white with metallic grays, and "chrome", a white-to-steel gradient,
   on what matters. The gutter is the one the framework's site frame reads (SiteShell). */
:root {
  --line: #1b1d21; /* a hairline */
  --faint: #5c6168; /* a slab's small print */
  --steel: linear-gradient(180deg, #e9ebee 0%, #c9ccd1 100%);
  --glow: rgba(255, 255, 255, .12);
  --radius: 10px;
  --radius-small: 8px;
  --site-gutter: 48px;
  --measure: 56ch;
}

/* Animations off on the PC stills the decoration (the hero's typing), never a film: the films are the content and
   play as a video would (FX35). */
@media (prefers-reduced-motion: reduce) {
  *:not(.stage *), *:not(.stage *)::before, *:not(.stage *)::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
  }
}
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font: 14.5px/1.7 var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(var(--bs-primary-rgb), 0.25);
  color: var(--bs-emphasis-color);
}

:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

button {
  font: inherit;
  cursor: pointer;
}

button:disabled {
  cursor: default;
  opacity: 0.4;
}

a {
  color: var(--bs-link-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--web-scrollbar) transparent;
}

/* A quieter line of text, anywhere: a hint, a count, a date. */
.muted {
  color: var(--bs-secondary-color);
}

/* The site's plain elements and the few utilities every site page uses: the chrome headline, the kicker, the buttons,
   the panel. All of it hangs off the frame's root (.site, the framework's SiteShell), so the chat and the admin keep
   the framework's elements (F109.1, Louis's pick: the site's look stays inside the site's frame). */
.site {
  font: 16px/1.6 var(--bs-font-sans-serif);
  color: var(--bs-body-color);
}
.site a {
  color: var(--bs-body-color);
}
.site a:hover {
  color: var(--bs-emphasis-color);
}
.site h1, .site h2, .site h3, .site h4 {
  margin: 0;
  color: var(--bs-emphasis-color);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}
.site h1 {
  font-size: 60px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
.site h2 {
  font-size: 40px;
  font-weight: 700;
}
.site h3 {
  font-size: 22px;
  font-weight: 600;
}
.site h4 {
  font-size: 17px;
  font-weight: 600;
}
.site p {
  margin: 0;
}
.site code {
  font-family: var(--bs-font-monospace);
  font-size: 0.92em;
  color: var(--web-soft-text);
}
.site {
  /* The big words in chrome: a white-to-steel gradient clipped to the letters. */
}
.site .chrome {
  background: var(--web-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site {
  /* A small mono label above a section. */
}
.site .kicker {
  display: block;
  font: 500 12px/1 var(--bs-font-monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bs-tertiary-color);
}
.site .lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--bs-secondary-color);
  max-width: var(--measure);
}
.site .muted {
  color: var(--bs-secondary-color);
  font-size: 15px;
}
.site .btn {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--radius-small);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.site .btn-fill {
  background: var(--bs-emphasis-color);
  color: var(--bs-body-bg);
}
.site .btn-fill:hover {
  background: #e6e8eb;
  color: var(--bs-body-bg);
}
.site .btn-line {
  border: 1px solid var(--web-border-hover);
  color: var(--bs-body-color);
}
.site .btn-line:hover {
  border-color: var(--bs-emphasis-color);
  color: var(--bs-emphasis-color);
}
.site .btn-dark {
  background: var(--bs-body-bg);
  color: var(--bs-emphasis-color);
}
.site .btn-small {
  height: 38px;
  padding: 0 14px;
  font-size: 14px;
}
.site .panel {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius);
  background: var(--bs-secondary-bg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site .panel p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bs-secondary-color);
}
.site .panel.small {
  padding: 20px;
}
.site .panel.small p {
  font-size: 14px;
}

/* Loading and errors */
.loading {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--bs-emphasis-color);
}

.loading img {
  animation: rise 0.6s var(--web-ease) both;
}

.loading-mark {
  border-radius: 18px;
  animation: source-beat 1.1s ease-in-out infinite;
}

.loading-pct {
  font: 600 13px var(--bs-font-monospace);
  color: var(--bs-secondary-color);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  min-height: 1.2em;
}

.loading-pct::after {
  content: var(--blazor-load-percentage-text, "0%");
}

#blazor-error-ui {
  display: none;
  position: fixed;
  inset: auto 16px 16px 16px;
  padding: 12px 18px;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-left: 4px solid var(--bs-primary);
  border-radius: 12px;
  box-shadow: var(--bs-box-shadow);
  z-index: 10;
}

#blazor-error-ui .dismiss {
  float: right;
  cursor: pointer;
}

/* Layout */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w, 280px) 8px minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  transition: grid-template-columns 0.35s var(--web-ease);
}

.resizing .app {
  transition: none;
}

.resizing, .resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.sidebar {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-right: 1px solid var(--bs-border-color);
  display: flex;
  flex-direction: column;
  padding: 20px 14px 16px;
  gap: 14px;
  min-height: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.6px;
  color: var(--bs-emphasis-color);
  padding: 2px 8px;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 4px;
}

.sidebar-top .icon {
  color: var(--bs-secondary-color);
  width: 32px;
  height: 32px;
  place-items: center;
}

.sidebar-top .icon:hover {
  background: rgba(var(--web-overlay-rgb), 0.08);
  color: var(--bs-emphasis-color);
}

.new-chat {
  position: relative;
  border: 0;
  border-radius: 12px;
  padding: 11px 14px;
  font-weight: 600;
  color: var(--web-on-primary);
  text-align: left;
  background: var(--web-cta);
  background-size: 200% 100%;
  background-position: 0% 0;
  box-shadow: 0 6px 16px -8px rgba(var(--bs-primary-rgb), 0.7);
  transition: transform 0.25s var(--web-spring), box-shadow 0.25s var(--web-ease), background-position 0.6s var(--web-ease);
}

.new-chat::before {
  content: "+";
  margin-right: 8px;
  font-weight: 700;
}

.new-chat:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px rgba(var(--bs-primary-rgb), 0.85);
  background-position: 100% 0;
}

.new-chat:active {
  transform: translateY(0) scale(0.98);
}

.chat-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  margin: 0 -4px;
  padding: 0 4px;
}

.chat-item {
  display: flex;
  align-items: center;
  border-radius: 10px;
  position: relative;
  transition: background 0.2s var(--web-ease);
}

.chat-item a {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  color: var(--bs-body-color);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

.chat-item:hover {
  background: rgba(var(--web-overlay-rgb), 0.05);
}

.chat-item.active {
  background: var(--bs-secondary-bg);
  box-shadow: var(--bs-box-shadow-sm);
}

.chat-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 3px;
  background: var(--bs-primary);
}

.chat-item.active a {
  color: var(--bs-emphasis-color);
  font-weight: 600;
}

.chat-item .icon {
  opacity: 0;
  transition: opacity 0.15s;
  color: var(--bs-secondary-color);
}

.chat-item:hover .icon {
  opacity: 1;
}

.sidebar-settings {
  color: var(--web-settings-text);
  font-size: 13px;
}

.sidebar-settings summary {
  cursor: pointer;
  color: var(--web-soft-text);
  list-style: none;
  padding: 4px 8px;
  border-radius: 8px;
}

.sidebar-settings summary::before {
  content: "⚙  ";
}

.settings {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 10px 8px 0;
  color: var(--web-soft-text);
}

.settings input, .settings select {
  background: rgba(var(--web-overlay-rgb), 0.08);
  border: 1px solid rgba(var(--web-overlay-rgb), 0.18);
  color: var(--web-bright);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.settings input:focus, .settings select:focus {
  outline: 0;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25);
}

.settings select option {
  color: var(--bs-emphasis-color);
}

.icon {
  background: none;
  border: 0;
  color: var(--bs-secondary-color);
  font-size: 16px;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}

.icon:hover {
  background: rgba(var(--web-hover-rgb), 0.14);
  color: var(--bs-emphasis-color);
}

.sidebar .icon:hover {
  color: var(--bs-emphasis-color);
}

/* Conversation */
.conversation {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  position: relative;
  background: var(--bs-body-bg);
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: clamp(20px, 4vw, 44px) clamp(14px, 3.5vw, 32px) 16px;
  scroll-behavior: smooth;
}

.messages > * {
  max-width: 800px;
  margin: 0 auto;
}

/* Empty state: a charcoal headline over a faint orange pulse, and suggestions to start with. */
.empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  isolation: isolate;
}

.empty h1 {
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 800;
  letter-spacing: -1.2px;
  margin: 0 0 10px;
  line-height: 1.1;
  color: var(--bs-emphasis-color);
}

.empty h1 .w {
  display: inline-block;
  animation: word 0.7s var(--web-ease) both;
  animation-delay: calc(0.1s + var(--i) * 80ms);
}

.conversation > .messages {
  position: relative;
  z-index: 1;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* The ways in, shared by the packs' views and the sites: a fade, a slide, a soft blink (from the admin's screens, CL58). */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes blink-soft {
  50% {
    opacity: 0.55;
  }
}
/* A page's header, on the admin's pages and the chat's panels alike: the title and its line on the left, the
   actions on the right. */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.page-head h1 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--bs-emphasis-color);
  margin: 0;
}

.page-head p {
  margin: 4px 0 0;
  color: var(--bs-secondary-color);
}

.page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* The cards and the table the admin's pages, the studio and a pack's screen are built from (from the admin's
   shell, CL58): parts many components draw and override, so they stay global. */
.cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  align-items: start;
}

.card-p {
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-xl);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: rise 0.4s var(--web-ease) both;
}

.card-p > p {
  margin: 0;
}

/* A card that holds a modal doesn't rise in: its filled transform animation would trap the modal inside it (F31). */
.card-p.holds-modal {
  animation: none;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--bs-emphasis-color);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.admin-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bs-tertiary-color);
  padding: 6px 10px;
  border-bottom: 1px solid var(--bs-border-color);
}

.admin-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(var(--web-overlay-rgb), 0.05);
  vertical-align: top;
}

.admin-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-table tbody tr {
  cursor: pointer;
  transition: background 0.15s;
}

.admin-table tbody tr:hover {
  background: rgba(var(--web-overlay-rgb), 0.04);
}

.admin-table tbody tr.selected {
  background: var(--bs-primary-bg-subtle);
}

.admin-table code {
  font-size: 12.5px;
}

/* Turns */
.turn {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 34px;
  animation: rise 0.45s var(--web-ease) both;
}

.user-message {
  align-self: flex-end;
  max-width: 78%;
  color: var(--web-on-primary);
  background: linear-gradient(135deg, var(--bs-success), var(--web-success-deep));
  border-radius: 20px 20px 6px 20px;
  padding: 11px 16px;
  box-shadow: 0 8px 22px -10px rgba(var(--web-shadow-rgb), 0.7);
}

.user-text {
  white-space: pre-wrap;
}

.user-message .chip {
  background: rgba(var(--web-overlay-rgb), 0.16);
  border-color: rgba(var(--web-overlay-rgb), 0.25);
  color: var(--web-on-primary);
}

.assistant-message {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  font-size: 13px;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  padding: 3px 11px;
}

/* Thinking and tools: quiet until opened */
.thinking summary, .tool summary {
  cursor: pointer;
  color: var(--bs-secondary-color);
  font-size: 13px;
  list-style: none;
  user-select: none;
}

.thinking summary::-webkit-details-marker, .tool summary::-webkit-details-marker {
  display: none;
}

.thinking summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  transition: background 0.2s;
}

.thinking summary:hover {
  background: var(--bs-primary-bg-subtle);
}

.thinking summary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bs-primary);
  box-shadow: 0 0 0 3px var(--bs-primary-bg-subtle);
}

.thinking[open] > summary {
  color: var(--bs-emphasis-color);
}

.tool {
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  background: var(--bs-secondary-bg);
  padding: 9px 13px;
  box-shadow: var(--bs-box-shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tool:hover {
  border-color: var(--web-border-hover);
  box-shadow: var(--bs-box-shadow);
}

.tool.failed .tool-status {
  color: var(--bs-danger);
}

.tool-name {
  font-weight: 600;
  color: var(--bs-emphasis-color);
  margin-right: 6px;
}

.tool pre {
  font-family: var(--bs-font-monospace);
  font-size: 12px;
  background: var(--web-code-bg);
  border-radius: 10px;
  padding: 9px 11px;
  overflow-x: auto;
  max-height: 280px;
  white-space: pre-wrap;
  margin: 4px 0 0;
}

/* Delegation card (F5): who's doing the work, with what, and the work itself, live. While it runs, its border is a
   rotating blue-to-orange ring and the avatar pulses. */
.delegation {
  position: relative;
  background: var(--bs-secondary-bg);
  border-radius: 18px;
  padding: 14px 18px;
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-box-shadow);
  animation: rise 0.45s var(--web-ease) both;
}

.delegation.running {
  border-color: transparent;
  background: linear-gradient(var(--bs-secondary-bg), var(--bs-secondary-bg)) padding-box, conic-gradient(from var(--angle), var(--bs-primary), var(--bs-success-text-emphasis), var(--bs-success), var(--bs-primary)) border-box;
  animation: rise 0.45s var(--web-ease) both, spin 2.6s linear infinite;
}

@keyframes spin {
  to {
    --angle: 360deg;
  }
}
.delegation.failed {
  border-color: rgba(var(--web-failed-rgb), 0.45);
}

.delegation-head {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.delegation-head::-webkit-details-marker {
  display: none;
}

.delegation-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--web-sidebar-foot), var(--web-sidebar-foot-deep));
  color: var(--bs-primary);
  font-weight: 800;
  font-size: 16px;
  flex: none;
  box-shadow: 0 6px 16px -6px rgba(var(--web-shadow-rgb), 0.6);
}

.delegation.running .delegation-avatar {
  animation: ring 1.8s var(--web-ease) infinite;
}

@keyframes ring {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.6);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(var(--bs-primary-rgb), 0);
  }
}
.delegation-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.delegation-agent {
  font-size: 14px;
  color: var(--bs-secondary-color);
}

.delegation-agent strong {
  color: var(--bs-emphasis-color);
  font-weight: 700;
}

.delegation-toolsets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.toolset-chip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: var(--bs-success-bg-subtle);
  color: var(--bs-link-color);
  border-radius: 999px;
  padding: 2px 9px;
}

/* F26: a continued sub-session's chip ("vervolg · sub-1"), told apart from the toolsets. */
.toolset-chip.follow-up {
  background: var(--bs-success-bg-subtle, var(--bs-success-bg-subtle));
  color: var(--bs-success, var(--bs-link-color));
}

.delegation-status {
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 11px;
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.delegation-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.delegation.running .delegation-status {
  background: var(--bs-primary-bg-subtle);
  color: var(--web-primary-deep);
}

.delegation.running .delegation-status::before {
  animation: blink 1s ease-in-out infinite;
}

.delegation.failed .delegation-status {
  background: rgba(var(--bs-danger-rgb), 0.14);
  color: var(--bs-danger);
}

@keyframes blink {
  50% {
    opacity: 0.25;
  }
}
/* Answer text */
.markdown {
  color: var(--bs-body-color);
}

.markdown > :first-child {
  margin-top: 0;
}

.markdown > :last-child {
  margin-bottom: 0;
}

.markdown h1, .markdown h2, .markdown h3 {
  color: var(--bs-emphasis-color);
  letter-spacing: -0.3px;
  line-height: 1.3;
  margin: 22px 0 8px;
}

.markdown strong {
  color: var(--bs-emphasis-color);
}

.markdown code {
  font-family: var(--bs-font-monospace);
  font-size: 13px;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  border-radius: 6px;
  padding: 1px 6px;
}

.markdown pre {
  background: var(--web-code-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  padding: 14px 16px;
  overflow-x: auto;
}

.markdown pre code {
  background: none;
  color: var(--bs-body-color);
  padding: 0;
  font-size: 13px;
}

.markdown blockquote {
  margin: 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--bs-success-text-emphasis);
  color: var(--bs-secondary-color);
}

.markdown td img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 8px;
  background: var(--bs-white);
}

/* A product's photo beside its name (F34, Louis: "the text must not go underneath"): the cell keeps a lane for the photo, so a long name wraps beside it. */
/* Louis: "a min padding around the pics", then bigger, three times: 104 px, a cell tall enough for 10 px above and below. */
.markdown td:has(> img) {
  position: relative;
  padding-left: 128px;
  height: 124px;
}

.markdown img[data-original] {
  cursor: zoom-in;
}

/* The recipe's photo (FX24, Louis: "a fixed size to fit in our chat screen", "some rounded corners"): one fixed box, cropped to fit and never stretched, so a tall or a wide photo takes the same room; the product photos in a list's cells keep their own size above. */
.markdown img:not(td img) {
  display: block;
  width: 100%;
  max-width: 480px;
  height: 320px;
  object-fit: cover;
  border-radius: 16px;
  margin: 10px 0;
  background: var(--bs-border-color);
}

.photo-dialog {
  padding: 16px;
  border: 1px solid var(--bs-border-color);
  border-radius: 18px;
  background: var(--bs-white);
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  cursor: zoom-out;
  animation: fade 0.2s both;
}

.photo-dialog::backdrop {
  background: rgba(var(--bs-black-rgb), 0.7);
}

.photo-dialog img {
  display: block;
  width: min(560px, 100vw - 64px);
  max-height: calc(100vh - 120px);
  object-fit: contain;
}

.photo-dialog p {
  margin: 10px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--web-photo-text);
}

.markdown td:has(> img) > img {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 104px;
  height: 104px;
  margin-right: 0;
}

.markdown table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  overflow: hidden;
}

.markdown th {
  background: var(--web-code-bg);
  color: var(--bs-emphasis-color);
  font-weight: 600;
}

.markdown th, .markdown td {
  border-bottom: 1px solid var(--bs-border-color);
  padding: 8px 12px;
  text-align: left;
}

.markdown li::marker {
  color: var(--bs-primary);
}

/* Status lines */
.working, .delegation-waiting {
  color: var(--bs-secondary-color);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.working {
  background: linear-gradient(90deg, var(--bs-secondary-color) 0%, var(--bs-emphasis-color) 50%, var(--bs-secondary-color) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 1.6s linear infinite;
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
/* F34, Louis: "maybe some small loader icon left of it". Its own colours: the label's text is clipped to its gradient. */
.working .spinner {
  width: 12px;
  height: 12px;
  margin-right: 8px;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(var(--web-overlay-rgb), 0.14);
  border-top-color: var(--bs-primary, var(--bs-primary));
  animation: loader-spin 0.8s linear infinite;
}

@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}
.stopped {
  color: var(--bs-secondary-color);
  font-size: 13px;
  font-style: italic;
}

.error {
  color: var(--web-error-text);
  background: rgba(var(--bs-danger-rgb), 0.1);
  border: 1px solid rgba(var(--bs-danger-rgb), 0.3);
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 14px;
}

.usage {
  font-size: 12px;
  color: var(--bs-tertiary-color);
  font-variant-numeric: tabular-nums;
}

.notice {
  max-width: 800px;
  margin: 0 auto 10px;
  background: var(--bs-primary-bg-subtle);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.35);
  border-radius: 12px;
  padding: 9px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: rise 0.3s var(--web-ease) both;
}

/* Composer: frosted glass with a glowing focus ring */
.composer {
  padding: 10px clamp(12px, 3.5vw, 32px) clamp(14px, 2.5vw, 26px);
  background: linear-gradient(to top, var(--bs-body-bg) 60%, rgba(var(--bs-body-bg-rgb), 0));
}

.composer > * {
  max-width: 800px;
  margin: 0 auto;
}

.composer .attachments {
  margin-bottom: 8px;
}

.input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: rgba(var(--bs-secondary-bg-rgb), 0.9);
  backdrop-filter: blur(14px);
  border: 1px solid var(--bs-border-color);
  border-radius: 22px;
  padding: 9px 9px 9px 12px;
  box-shadow: var(--bs-box-shadow);
  transition: border-color 0.25s var(--web-ease), box-shadow 0.25s var(--web-ease);
}

.input-row:focus-within {
  border-color: rgba(var(--bs-primary-rgb), 0.6);
  box-shadow: var(--web-glow);
}

.input-row textarea {
  flex: 1;
  border: 0;
  outline: 0;
  resize: none;
  font: inherit;
  color: var(--bs-emphasis-color);
  background: none;
  padding: 7px 2px;
  max-height: 240px;
}

.input-row textarea::placeholder {
  color: var(--bs-tertiary-color);
}

.attach {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--bs-secondary-color);
  font-size: 22px;
  font-weight: 300;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.25s var(--web-spring);
}

.attach:hover {
  background: var(--bs-primary-bg-subtle);
  color: var(--web-primary-deep);
  transform: rotate(90deg);
}

.attach input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.send, .stop {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 0;
  font-size: 18px;
  font-weight: 700;
  display: grid;
  place-items: center;
  color: var(--web-on-primary);
  transition: transform 0.25s var(--web-spring), box-shadow 0.25s var(--web-ease), opacity 0.2s;
}

.send {
  background: var(--web-cta);
  background-size: 200% 100%;
  box-shadow: 0 8px 18px -6px rgba(var(--bs-primary-rgb), 0.8);
}

.send:not(:disabled):hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 24px -8px rgba(var(--bs-primary-rgb), 0.9);
}

.send:not(:disabled):active {
  transform: scale(0.94);
}

.stop {
  background: var(--web-sidebar-foot);
  font-size: 12px;
  animation: ring 1.8s var(--web-ease) infinite;
}

/* Code highlighting (highlight.js) */
.hljs-comment, .hljs-quote {
  color: var(--web-code-comment);
  font-style: italic;
}

.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-built_in {
  color: var(--bs-success-text-emphasis);
  font-weight: 600;
}

.hljs-string, .hljs-attr, .hljs-symbol, .hljs-bullet, .hljs-addition {
  color: var(--bs-primary-text-emphasis);
}

.hljs-number, .hljs-regexp, .hljs-variable, .hljs-template-variable {
  color: var(--web-code-number);
}

.hljs-title, .hljs-title.class_, .hljs-title.function_, .hljs-section, .hljs-type, .hljs-name {
  color: var(--bs-link-color);
}

.hljs-meta, .hljs-property, .hljs-params {
  color: var(--bs-secondary-color);
}

.hljs-deletion {
  color: var(--bs-danger);
}

/* Narrow screens: the sidebar stacks on top */
@media (max-width: 600px) {
  .user-message {
    max-width: 90%;
  }
}
/* Less motion when the system asks, unless the user switched the animations on in the sidebar's settings (F24:
   data-motion="on" on <html>, remembered in this browser). */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion=on]) :is(*, *::before, *::after) {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.delegation-chevron {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.12);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
  transition: transform 0.45s var(--web-spring), background 0.3s, color 0.3s, border-color 0.3s;
}

.delegation-chevron::before {
  content: "+";
  font-size: 17px;
  line-height: 1;
  font-weight: 500;
}

.delegation[open] .delegation-chevron {
  transform: rotate(135deg);
  background: var(--web-cta);
  border-color: transparent;
  color: var(--web-on-primary);
  box-shadow: 0 8px 18px -8px rgba(var(--bs-primary-rgb), 0.9);
}

.delegation-head:hover .delegation-chevron {
  background: rgba(var(--bs-primary-rgb), 0.2);
}

.delegation[open] .delegation-head:hover .delegation-chevron {
  background: var(--web-cta);
}

/* The card, its task and its work open and close with a height transition where the browser can animate a details
   element's content (F24); elsewhere they pop as before. */
:root {
  interpolate-size: allow-keywords;
}

.delegation::details-content, .delegation-task::details-content, .delegation-work::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.45s var(--web-ease), content-visibility 0.45s allow-discrete;
}

.delegation[open]::details-content, .delegation-task[open]::details-content, .delegation-work[open]::details-content {
  height: auto;
}

.delegation:not([open]) {
  box-shadow: var(--bs-box-shadow-sm);
}

.delegation:not([open]):hover {
  box-shadow: var(--bs-box-shadow);
}

/* ---- Responsive layout and depth ---- */
/* On a wide screen the sidebar is a plain column beside the chat. */
@media (min-width: 992px) {
  .sidebar {
    position: relative;
    z-index: 3;
    overflow: hidden;
  }
}
/* The resize handle: invisible until hovered, then an orange grip. */
.resizer {
  position: relative;
  cursor: col-resize;
  z-index: 4;
  background: transparent;
  touch-action: none;
}

.resizer::after {
  content: "";
  position: absolute;
  inset: 0 3px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.2s var(--web-ease);
}

.resizer:hover::after, .resizing .resizer::after {
  background: linear-gradient(var(--bs-primary), var(--web-primary-deep));
  box-shadow: 0 0 12px rgba(var(--bs-primary-rgb), 0.6);
}

/* Hidden sidebar: it folds away, and a floating tab brings it back. */
.sidebar-hidden .app {
  grid-template-columns: 0 0 minmax(0, 1fr);
}

.sidebar-hidden .sidebar {
  visibility: hidden;
  padding-left: 0;
  padding-right: 0;
  min-width: 0;
}

.sidebar-tab {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  place-items: center;
  color: var(--bs-emphasis-color);
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-box-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity 0.25s var(--web-ease), transform 0.3s var(--web-spring);
}

.sidebar-hidden .sidebar-tab {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.sidebar-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(var(--bs-primary-rgb), 0.55);
}

/* More depth: layered, tinted shadows that lift on hover. */
.user-message {
  box-shadow: 0 1px 0 rgba(var(--web-overlay-rgb), 0.12) inset, 0 12px 28px -12px rgba(var(--web-shadow-rgb), 0.75), 0 2px 6px rgba(var(--web-shadow-rgb), 0.15);
}

.delegation {
  box-shadow: 0 1px 0 rgba(var(--web-overlay-rgb), 0.05) inset, 0 14px 34px -14px rgba(var(--web-shadow-rgb), 0.28), 0 3px 8px rgba(var(--web-shadow-rgb), 0.06);
  transition: box-shadow 0.3s var(--web-ease), transform 0.3s var(--web-ease);
}

.delegation:not([open]):hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(var(--web-overlay-rgb), 0.05) inset, 0 18px 40px -14px rgba(var(--web-shadow-rgb), 0.34), 0 4px 10px rgba(var(--web-shadow-rgb), 0.08);
}

.tool:hover, .suggestion:hover {
  box-shadow: 0 16px 34px -14px rgba(var(--web-shadow-rgb), 0.3), 0 3px 8px rgba(var(--web-shadow-rgb), 0.06);
}

.input-row {
  box-shadow: 0 1px 0 rgba(var(--web-overlay-rgb), 0.05) inset, 0 18px 40px -18px rgba(var(--web-shadow-rgb), 0.35), 0 4px 12px rgba(var(--web-shadow-rgb), 0.06);
}

.markdown pre {
  box-shadow: 0 1px 0 rgba(var(--web-overlay-rgb), 0.05) inset, 0 8px 20px -14px rgba(var(--web-shadow-rgb), 0.25);
}

/* Below Bootstrap's lg breakpoint: a frosted top bar, and the sidebar slides in as an offcanvas. */
.topbar {
  display: none;
}

@media (max-width: 991.98px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .sidebar-hidden .app {
    grid-template-columns: minmax(0, 1fr);
  }
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(var(--bs-tertiary-bg-rgb), 0.86);
    backdrop-filter: blur(14px);
    color: var(--bs-emphasis-color);
    position: sticky;
    top: 0;
    z-index: 6;
    border-bottom: 1px solid var(--bs-border-color);
  }
  .topbar .brand {
    padding: 0;
  }
  .topbar .icon {
    color: var(--bs-body-color);
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    font-size: 18px;
  }
  .topbar .icon:hover {
    background: rgba(var(--web-overlay-rgb), 0.08);
    color: var(--bs-emphasis-color);
  }
  .sidebar.offcanvas-lg {
    --bs-offcanvas-width: min(320px, 86vw);
    --bs-offcanvas-transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    border-right: 0;
  }
  .sidebar-hidden .sidebar {
    visibility: visible;
  }
}
@media (min-width: 992px) {
  /* At lg Bootstrap makes the offcanvas a plain element again; keep it a full-height column. */
  .sidebar.offcanvas-lg {
    display: flex;
    flex-direction: column;
    visibility: visible;
  }
}
/* Spotlight: cards carry a soft orange light where the mouse is (--mx/--my set by js/chat.js). */
.suggestion, .delegation, .tool {
  position: relative;
  isolation: isolate;
}

.suggestion::after, .delegation::after, .tool::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--bs-primary-rgb), 0.14), transparent 60%);
  transition: opacity 0.3s var(--web-ease);
}

.suggestion:hover::after, .delegation:hover::after, .tool:hover::after {
  opacity: 1;
}

/* Sidebar: items slide a little and show an orange marker; New chat gets a light sweep. */
.chat-item {
  transition: background 0.2s var(--web-ease), transform 0.25s var(--web-spring);
}

.chat-item:hover {
  transform: translateX(3px);
}

.chat-item:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 2px;
  border-radius: 2px;
  background: rgba(var(--bs-primary-rgb), 0.7);
}

.chat-item .icon:hover {
  background: rgba(var(--bs-danger-rgb), 0.18);
  color: var(--bs-danger);
}

.new-chat {
  overflow: hidden;
}

.new-chat::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(var(--web-overlay-rgb), 0.45), transparent);
}

.new-chat:hover::after {
  transition: transform 0.7s var(--web-ease);
  transform: translateX(120%) skewX(-20deg);
}

/* Messages */
.user-message {
  transition: transform 0.25s var(--web-spring), box-shadow 0.25s var(--web-ease);
}

.user-message:hover {
  transform: translateY(-1px);
}

.markdown a {
  color: var(--bs-success-text-emphasis);
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(var(--bs-primary), var(--bs-primary)) 0 100%/0 2px no-repeat;
  transition: background-size 0.3s var(--web-ease), color 0.2s;
}

.markdown a:hover {
  background-size: 100% 2px;
  color: var(--bs-emphasis-color);
}

.markdown tr {
  transition: background 0.15s;
}

.markdown tbody tr:hover {
  background: var(--bs-primary-bg-subtle);
}

.markdown pre {
  transition: border-color 0.2s, box-shadow 0.2s;
}

.markdown pre:hover {
  border-color: var(--web-border-hover);
}

.thinking summary {
  transition: background 0.2s, color 0.2s;
}

.thinking summary:hover {
  color: var(--bs-emphasis-color);
}

/* Delegation cards and tools */
.delegation:hover {
  border-color: rgba(var(--bs-primary-rgb), 0.35);
}

.delegation-head:hover .delegation-chevron {
  transform: scale(1.08);
}

.delegation[open] .delegation-head:hover .delegation-chevron {
  transform: rotate(135deg) scale(1.08);
}

.delegation[open] .delegation-head:hover .delegation-chevron {
  transform: rotate(90deg) translateX(2px);
}

.toolset-chip {
  transition: transform 0.2s var(--web-spring), background 0.2s, color 0.2s;
}

.toolset-chip:hover {
  transform: translateY(-1px);
  background: var(--bs-success);
  color: var(--web-on-primary);
}

.tool {
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.25s var(--web-ease);
}

.tool:hover {
  transform: translateX(2px);
  border-left-color: var(--bs-primary);
}

/* Composer: the send button breathes once there's something to send. */
.input-row:hover {
  border-color: var(--web-border-hover);
}

.send:not(:disabled) {
  animation: breathe 2.4s var(--web-ease) infinite;
}

@keyframes breathe {
  0%, 100% {
    box-shadow: 0 8px 18px -6px rgba(var(--bs-primary-rgb), 0.8);
  }
  50% {
    box-shadow: 0 8px 26px -4px rgba(var(--bs-primary-rgb), 1);
  }
}
/* The pulse and the suggestions fit any width: no sideways scroll, and full-width cards on a phone. */
.messages {
  overflow-x: hidden;
}

/* A faint paper grain over the soft background, so large areas never look flat or digital (fixed, under everything). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.app {
  position: relative;
  z-index: 1;
}

.conversation {
  background: transparent;
}

/* A gradient, not a colour: at lg Bootstrap sets an offcanvas's background-color to transparent !important. */
.sidebar {
  background-image: linear-gradient(color-mix(in srgb, var(--bs-tertiary-bg) 94%, transparent), color-mix(in srgb, var(--bs-tertiary-bg) 94%, transparent));
}

/* Type: balanced headline lines, no lone last words in answers, figures that line up. */
.empty h1 {
  text-wrap: balance;
  letter-spacing: -1.6px;
  font-weight: 800;
}

.markdown p, .markdown li {
  text-wrap: pretty;
}

.markdown {
  font-variant-numeric: tabular-nums;
}

/* Hairlines, not borders: a touch of charcoal mixed into the background, and an inner light on raised surfaces. */
.suggestion, .tool, .delegation, .input-row, .markdown pre, .chip {
  border-color: color-mix(in srgb, var(--bs-emphasis-color) 10%, var(--bs-body-bg));
}

/* The sidebar: a small label over the chats, as in a well-made app. */
.sidebar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--bs-tertiary-color);
  padding: 6px 12px 0;
}

/* Focus is always visible, in orange, and never a browser default. */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--bs-primary) 70%, transparent);
  outline-offset: 3px;
}

.input-row:focus-within {
  border-color: color-mix(in srgb, var(--bs-primary) 55%, var(--bs-body-bg));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-primary) 12%, transparent), 0 18px 40px -18px rgba(var(--web-shadow-rgb), 0.3);
}

/* Scrolling never shifts the layout. */
.messages, .chat-list {
  scrollbar-gutter: stable;
}

/* The tagline under the logo in the sidebar. */
.brand-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.tagline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--bs-secondary-color);
  text-wrap: balance;
  animation: rise 0.7s 0.9s var(--web-ease) both;
}

/* ---- Dark (F20): the glows. Soft orange and green light behind the chat, as in the Sensai look; drawn on the page so
   the sidebar, the chat and the composer's fade all sit over the same light. ---- */
body {
  background: radial-gradient(900px 600px at 78% -8%, rgba(var(--bs-primary-rgb), 0.13), transparent 62%), radial-gradient(800px 600px at 12% 108%, rgba(var(--web-success-text-rgb), 0.09), transparent 60%), radial-gradient(600px 500px at 50% 45%, rgba(var(--bs-primary-rgb), 0.04), transparent 70%), var(--bs-body-bg);
  background-attachment: fixed;
}

.conversation {
  background: transparent;
}

.composer {
  background: linear-gradient(to top, rgba(var(--bs-body-bg-rgb), 0.92) 55%, rgba(var(--bs-body-bg-rgb), 0));
}

.user-message {
  box-shadow: 0 1px 0 rgba(var(--web-overlay-rgb), 0.08) inset, 0 12px 28px -12px rgba(var(--bs-black-rgb), 0.7);
}

.new-chat {
  box-shadow: 0 8px 22px -8px rgba(var(--bs-primary-rgb), 0.6);
}

.tagline {
  color: var(--bs-secondary-color);
}

/* ---- The three panels (F20): sidebar, chat, Werk. From xl (1200px) the Werk panel is a fourth column that folds away
   (.work-hidden); below it, a Bootstrap offcanvas that slides in from the right (out of the grid, so nothing moves). ---- */
@media (min-width: 1200px) {
  .app {
    grid-template-columns: var(--sidebar-w, 280px) 8px minmax(0, 1fr) var(--work-w, 330px);
  }
  .sidebar-hidden .app {
    grid-template-columns: 0 0 minmax(0, 1fr) var(--work-w, 330px);
  }
  .work-hidden .app {
    grid-template-columns: var(--sidebar-w, 280px) 8px minmax(0, 1fr) 0;
  }
  .sidebar-hidden.work-hidden .app {
    grid-template-columns: 0 0 minmax(0, 1fr) 0;
  }
  .work.offcanvas-xl {
    display: flex;
    flex-direction: column;
    visibility: visible;
  }
  /* Its column is 0 wide when folded, so its border would stick out by 1px and give the whole page scrollbars. */
  .work-hidden .work {
    visibility: hidden;
    border: 0;
  }
}
.work {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--bs-body-color);
  border-left: 1px solid var(--bs-border-color);
  /* A gradient, not a colour: Bootstrap makes an offcanvas's background-color transparent at its breakpoint. */
  background-image: linear-gradient(color-mix(in srgb, var(--bs-tertiary-bg) 88%, transparent), color-mix(in srgb, var(--bs-tertiary-bg) 88%, transparent));
}

@media (max-width: 1199.98px) {
  .work.offcanvas-xl {
    --bs-offcanvas-width: min(360px, 90vw);
    --bs-offcanvas-transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    background-color: var(--bs-tertiary-bg);
  }
}
.work-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 16px 12px 20px;
  border-bottom: 1px solid var(--bs-border-color);
}

.work-title {
  font-weight: 800;
  font-size: 16px;
  color: var(--bs-emphasis-color);
}

.work-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--bs-primary-text-emphasis);
  background: var(--bs-primary-bg-subtle);
  border-radius: 999px;
  padding: 1px 8px;
}

.work-head .icon {
  margin-left: auto;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--bs-secondary-color);
}

.work-head .icon + .icon {
  margin-left: 0;
}

.work-head .icon:hover {
  background: rgba(var(--web-overlay-rgb), 0.08);
  color: var(--bs-emphasis-color);
}

.work-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-gutter: stable;
}

.work-item {
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: rise 0.4s var(--web-ease) both;
}

.work-item.running {
  border: 1px solid transparent;
  background: linear-gradient(var(--bs-secondary-bg), var(--bs-secondary-bg)) padding-box, conic-gradient(from var(--angle), var(--bs-primary), var(--bs-success-text-emphasis), var(--bs-primary)) border-box;
  animation: rise 0.4s var(--web-ease) both, spin 2.6s linear infinite;
}

.work-item.running .work-avatar {
  animation: ring 1.8s var(--web-ease) infinite;
}

.work-status {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.work-item.running .work-status {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.work-item.failed .work-status {
  background: rgba(var(--bs-danger-rgb), 0.14);
  color: var(--bs-danger);
}

.work-steps {
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.work-steps::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--bs-primary), var(--bs-success-text-emphasis));
  opacity: 0.45;
}

.work-step {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
  min-width: 0;
  animation: rise 0.3s var(--web-ease) both;
}

.work-step-mark {
  font-weight: 700;
  color: var(--bs-success-text-emphasis);
  width: 12px;
  flex: none;
}

.work-step.waiting, .work-step.waiting .work-step-mark {
  color: var(--bs-primary-text-emphasis);
}

.work-step.failed .work-step-mark {
  color: var(--bs-danger);
}

.work-step-name {
  font-weight: 600;
  color: var(--bs-emphasis-color);
  flex: none;
}

.work-step-args {
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  color: var(--bs-tertiary-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* F30 step 6b: a minion the specialist handed a page to, nested under its step. */
.work-step.minion {
  align-items: flex-start;
}

.work-steps.nested {
  padding-left: 10px;
  margin-top: 2px;
}

.work-steps.nested::before {
  opacity: 0.25;
}

.toolset-chip.model {
  background: var(--bs-primary-bg-subtle, var(--bs-success-bg-subtle));
  color: var(--bs-primary-text-emphasis, var(--bs-link-color));
}

.delegation.minion {
  margin-left: 12px;
}

.delegation.minion .delegation-avatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 13px;
  background: linear-gradient(135deg, var(--bs-success), var(--bs-success-text-emphasis));
  color: var(--web-on-primary);
}

/* Below lg the Werk tab sits over the chat's top right: the messages start under it. */
@media (max-width: 991.98px) {
  .messages {
    padding-top: 64px;
  }
}
/* ---- The sidebar's contents (F20 step 4). ---- */
/* A line icon in the text colour: .ic plus one of the .i-* icons (their --icon). */
.ic {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
}

.side-search kbd, .search-dialog kbd {
  margin-left: auto;
  font: 600 11px var(--bs-font-sans-serif);
  color: var(--bs-tertiary-color);
  background: rgba(var(--web-overlay-rgb), 0.06);
  border: 1px solid var(--bs-border-color);
  border-radius: 6px;
  padding: 1px 6px;
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--bs-body-color);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.side-link:hover {
  background: rgba(var(--web-overlay-rgb), 0.06);
  color: var(--bs-emphasis-color);
}

.side-link .ic {
  color: var(--bs-secondary-color);
}

.side-link:hover .ic {
  color: var(--bs-primary);
}

.sidebar-label {
  padding-top: 14px;
}

.sidebar-label-row .icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 16px;
  color: var(--bs-secondary-color);
}

.chat-item .item-menu {
  opacity: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--bs-secondary-color);
}

.chat-item:hover .item-menu, .chat-item.active .item-menu, .item-menu[aria-expanded=true] {
  opacity: 1;
}

.chat-item .item-menu:hover {
  background: rgba(var(--web-overlay-rgb), 0.08);
  color: var(--bs-emphasis-color);
}

/* The chat menus (Bootstrap dropdowns), in the theme. */
.sidebar .dropdown-menu {
  --bs-dropdown-bg: var(--web-menu-bg);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: rgba(var(--web-overlay-rgb), .07);
  --bs-dropdown-link-hover-color: var(--bs-emphasis-color);
  --bs-dropdown-link-active-bg: rgba(var(--bs-primary-rgb), .2);
  --bs-dropdown-divider-bg: var(--bs-border-color);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 18px 40px -12px rgba(var(--bs-black-rgb), 0.7);
  font-size: 14px;
  min-width: 210px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  padding: 7px 10px;
}

.dropdown-item .ic {
  color: var(--bs-secondary-color);
}

.dropdown-item:hover .ic {
  color: var(--bs-primary);
}

.dropdown-item.danger, .dropdown-item.danger .ic {
  color: var(--bs-danger);
}

/* The footer: a profile card, then the settings. */
.side-footer {
  margin: 0 -14px -16px;
  background: var(--web-sidebar-foot);
}

.profile-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--web-on-primary);
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-success-text-emphasis));
  flex: none;
}

.profile-who {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.profile-who strong {
  color: var(--bs-emphasis-color);
  font-size: 14px;
}

.profile-who small {
  color: var(--bs-secondary-color);
  font-size: 11.5px;
}

/* The chat search (Components/ChatSearch.razor). */
.search-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(var(--web-backdrop-rgb), 0.6);
  backdrop-filter: blur(4px);
  animation: fade 0.2s ease both;
}

.search-dialog {
  position: fixed;
  z-index: 1051;
  top: min(14vh, 120px);
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, 100vw - 32px);
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  border-radius: 18px;
  overflow: hidden;
  background: var(--web-dialog-bg);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 30px 80px -20px rgba(var(--bs-black-rgb), 0.8), 0 0 0 1px rgba(var(--bs-primary-rgb), 0.08);
  animation: pop 0.25s var(--web-spring) both;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.98);
  }
}
.search-result .ic {
  color: var(--bs-secondary-color);
}

.search-result.selected {
  background: rgba(var(--bs-primary-rgb), 0.12);
}

.search-result.selected .ic {
  color: var(--bs-primary);
}

.i-compass {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='m15.5 8.5-2 5-5 2 2-5z'/></svg>");
}

.i-sparkle {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v4M12 17v4M3 12h4M17 12h4M6.5 6.5l2.5 2.5M15 15l2.5 2.5M6.5 17.5 9 15M15 9l2.5-2.5'/></svg>");
}

.i-folder {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h6l2 2h10v11H3z'/></svg>");
}

.i-archive {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4h18v5H3zM5 9v11h14V9M10 13h4'/></svg>");
}

.i-chat {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16v11H9l-5 4z'/></svg>");
}

.chat-title.muted {
  color: var(--bs-secondary-color);
  font-weight: 600;
}

.chat-heading .item-menu {
  opacity: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--bs-secondary-color);
}

.chat-heading .item-menu:hover {
  background: rgba(var(--web-overlay-rgb), 0.08);
  color: var(--bs-emphasis-color);
}

.header-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 13px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bs-body-color);
  background: rgba(var(--web-overlay-rgb), 0.04);
  border: 1px solid var(--bs-border-color);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.header-button:hover, .header-button[aria-expanded=true] {
  color: var(--bs-emphasis-color);
  border-color: rgba(var(--bs-primary-rgb), 0.45);
  background: rgba(var(--web-overlay-rgb), 0.07);
}

.header-button .ic {
  color: var(--bs-primary);
}

.pill-plus {
  height: 36px;
  padding: 0 15px;
  font-size: 13px;
  color: var(--web-on-primary);
  background: var(--web-cta);
  box-shadow: 0 8px 20px -10px rgba(var(--bs-primary-rgb), 0.8);
}

.pill-plus:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(var(--bs-primary-rgb), 0.95);
}

.dropdown-item.active, .dropdown-item:active {
  background: rgba(var(--bs-primary-rgb), 0.14);
  color: var(--bs-emphasis-color);
}

.dropdown-item.active .ic {
  color: var(--bs-primary);
}

/* Every menu in the app, in the theme (the sidebar's rule, for the top bar too). */
.app .dropdown-menu {
  --bs-dropdown-bg: var(--web-menu-bg);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: rgba(var(--web-overlay-rgb), .07);
  --bs-dropdown-link-hover-color: var(--bs-emphasis-color);
  --bs-dropdown-link-active-bg: rgba(var(--bs-primary-rgb), .2);
  --bs-dropdown-divider-bg: var(--bs-border-color);
  --bs-dropdown-header-color: var(--bs-tertiary-color);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 18px 40px -12px rgba(var(--bs-black-rgb), 0.7);
  font-size: 14px;
  min-width: 210px;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .messages {
    padding-top: clamp(20px, 4vw, 44px);
  }
}
.toast-pill .ic {
  color: var(--bs-primary);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.96);
  }
}
@keyframes toast-out {
  to {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
}
.i-check {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>");
}

.i-user {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/></svg>");
}

.locate-button .ic {
  color: var(--bs-primary);
}

/* The message box in the middle of an empty chat, at a width of its own. */
.composer-centred {
  width: min(680px, 100%);
  padding: 6px 0 0;
  background: none;
  animation: rise 0.6s 0.1s var(--web-ease) both;
}

.composer-centred > * {
  max-width: none;
}

.tool-button .ic {
  width: 17px;
  height: 17px;
}

.tool-button-label .ic {
  color: var(--bs-primary);
}

.composer .send, .composer .stop {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.dropup .dropdown-menu {
  margin-bottom: 8px !important;
}

.app .composer .dropdown-menu {
  --bs-dropdown-bg: var(--web-menu-bg);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: rgba(var(--web-overlay-rgb), .07);
  --bs-dropdown-link-hover-color: var(--bs-emphasis-color);
}

@media (max-width: 600px) {
  .tool-button-label {
    font-size: 0;
    gap: 0;
  }
  .tool-button-label .ic {
    margin: 0;
  }
  .model-button {
    font-size: 12px;
  }
}
/* The composer's icons. */
.i-plus {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
}

/* ---- Message actions and sources (F20 step 7). ---- */
.message-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: -6px;
  opacity: 0;
  transition: opacity 0.2s;
}

.turn:hover .message-actions, .message-actions:focus-within, .turn:last-child .message-actions {
  opacity: 1;
}

.action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  min-width: 30px;
  padding: 0 7px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--bs-secondary-color);
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}

.action:hover {
  background: rgba(var(--web-overlay-rgb), 0.07);
  color: var(--bs-emphasis-color);
}

.action .ic {
  width: 15px;
  height: 15px;
}

.i-refresh {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a8 8 0 1 1-2.3-5.7L20 8M20 3v5h-5'/></svg>");
}

.side-link.active {
  background: rgba(var(--web-overlay-rgb), 0.07);
  color: var(--bs-emphasis-color);
}

.side-link.active .ic {
  color: var(--bs-primary);
}

.usage-meter .ic {
  color: var(--bs-primary);
}

.about {
  max-width: 640px;
  margin: 0 auto 22px !important;
  text-wrap: balance;
}

/* The eval pages' shared styles, in their cascade order, so a site lists this one name and not six: what several of
   the studio's components draw and no one component holds, and what a site draws too. A component's own rules sit
   beside it, in its X.razor.scss (CL58). The pages' addresses are on every site, so every site lists it. */
.store-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bs-secondary-color);
}

.store-pill.up .dot {
  background: var(--web-live-dot);
}

.store-pill.down .dot {
  background: var(--bs-danger);
}

.store-banner {
  border-color: var(--bs-danger);
}

.store-banner p {
  margin: 6px 0 0;
  color: var(--bs-secondary-color);
}

.run-table tbody tr.selected td {
  background: rgba(var(--web-overlay-rgb), 0.06);
  color: var(--bs-emphasis-color);
}

.run-panel .danger {
  color: var(--bs-danger);
}

.manual-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--bs-emphasis-color);
}

.manual-head kbd {
  margin-left: auto;
}

.conv-head .row-cost.small {
  margin-left: auto;
}

@keyframes pill-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.55);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(var(--bs-primary-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0);
  }
}
@media (max-width: 991.98px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }
  .conv-row {
    grid-template-columns: 1fr;
  }
}
.trend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trend.small {
  margin: 2px 0 6px;
}

.trend.small .chart {
  padding: 6px 8px;
  background: none;
  border: 0;
  animation: none;
}

.trend.small .trend-svg {
  height: 54px;
}

.trend-panel .chart-head {
  gap: 8px;
}

.trend-grid > .trend-panel {
  justify-content: space-between;
}

@keyframes reveal {
  from {
    width: 0;
  }
}
.trend-point {
  stroke-width: 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  animation: fade 0.4s ease both;
  animation-delay: calc(var(--i, 0) * 120ms + 1s);
}

.trend-point.here {
  stroke-width: 11;
}

.trend.small .trend-point {
  stroke-width: 5;
}

.trend-point:hover, .trend-point.hovered {
  filter: brightness(1.25);
  stroke-width: 10;
}

.mode-rate .rate-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(var(--web-overlay-rgb), 0.06);
  overflow: hidden;
}

.trend-delta.up {
  color: var(--bs-success-text-emphasis);
  background: var(--bs-success-bg-subtle);
}

.trend-delta.down {
  color: var(--bs-danger);
  background: rgba(var(--bs-danger-rgb), 0.14);
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion=on]) :is(.trend-reveal, .trend-point) {
    animation: none;
  }
}
.run-report {
  margin-top: 6px;
}

.run-report h1 {
  font-size: 16px;
  margin: 10px 0 4px;
  color: var(--bs-emphasis-color);
}

.run-report h2 {
  font-size: 14px;
  margin: 14px 0 6px;
  color: var(--bs-primary-text-emphasis);
}

.run-report table {
  width: 100%;
}

.run-transcript {
  max-height: 70vh;
  overflow: auto;
  padding-right: 8px;
}

.run-transcript h1 {
  font-size: 16px;
  margin: 14px 0 4px;
  color: var(--bs-emphasis-color);
}

.run-transcript h2 {
  font-size: 14px;
  margin: 12px 0 6px;
  color: var(--bs-primary-text-emphasis);
}

.run-transcript h3 {
  font-size: 13.5px;
  margin: 10px 0 4px;
}

.run-transcript em {
  color: var(--bs-secondary-color);
}

/* Two columns: the work in the main one, the saved runs as a scrolling list on the right (Louis: it will get long). */
.admin-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.admin-col-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.admin-col-side {
  position: sticky;
  top: 0;
}

.runs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* CL26 (Louis: "make it fancy and human readable"): the Evals page's card. The name and what it proves; the latest run
   as a scorecard, a ring per mode; the runs before it down a timeline of dots, a bar per mode; what it checks in a
   fold. A run's tag and its dot share a colour: green recorded (the model answered), orange replay, grey re-score. */
.eval-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
  padding: 20px 22px;
}

.status-pill.never-run {
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
}

.eval-trend {
  font-size: 13px;
  align-self: flex-start;
}

.eval-mode .donut {
  width: 112px;
  height: 112px;
}

.eval-tl-mode .rate-track {
  display: inline-block;
  width: 84px;
  height: 6px;
  border-radius: 3px;
  background: rgba(var(--web-overlay-rgb), 0.06);
  overflow: hidden;
}

.eval-tl-mode .muted {
  font-size: 11.5px;
  white-space: nowrap;
}

.eval-kind.rule {
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.eval-kind.model {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

@media (max-width: 575.98px) {
  .eval-card {
    padding: 16px;
  }
  .eval-checks-body {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .eval-checks-body dd {
    margin-bottom: 8px;
  }
  .eval-cost {
    margin-left: 0;
  }
  .eval-score-modes {
    justify-content: space-around;
    gap: 14px;
    padding: 0;
  }
  .eval-mode {
    min-width: 0;
  }
  .eval-mode .donut {
    width: 96px;
    height: 96px;
  }
  .eval-tl-mode {
    gap: 6px;
  }
  .eval-tl-mode .rate-track {
    width: 48px;
  }
}
.eval-list-item.selected {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  border-left-color: var(--bs-primary);
}

.check-script {
  margin: 0;
  font-size: 12px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
  white-space: nowrap;
}

.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill.running {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.status-pill.failed {
  background: rgba(var(--bs-danger-rgb), 0.14);
  color: var(--bs-danger);
}

.runs-head .num, .run-row .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.run-row.selected {
  background: var(--bs-primary-bg-subtle);
}

.fold-note {
  font-weight: 400;
  font-size: 12.5px;
  color: var(--bs-secondary-color);
  margin-left: 4px;
}

.fold:not([open]) > .fold-head .fold-note::before {
  content: "— ";
}

.category-card h4 .muted {
  font-weight: 400;
  font-size: 12px;
  margin-left: auto;
}

.category-line-name .muted {
  font-size: 11.5px;
  margin-left: auto;
}

.trend.compact .trend-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.trend.compact .trend-values > span {
  flex-wrap: wrap;
}

.trend.compact .trend-panel {
  padding: 8px 10px 10px;
  background: none;
}

.trend.compact .trend-svg {
  height: 64px;
}

.trend.compact .chart-head {
  gap: 6px;
  font-size: 12px;
}

.trend.compact .chart-title > strong {
  font-weight: 600;
  font-size: 12px;
  color: var(--bs-secondary-color);
}

.trend.compact .trend-top {
  display: none;
}

.trend.compact > .chart-head {
  display: none;
}

@media (max-width: 1199.98px) {
  .admin-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-col-side {
    position: static;
  }
  .runs-list {
    max-height: none;
  }
}
/* A segmented control (the repeats): buttons in a pill, the chosen one lit; no native dropdown. */
.segmented {
  display: inline-flex;
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bs-body-bg);
}

.segmented button {
  background: transparent;
  border: 0;
  color: var(--bs-secondary-color);
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s;
}

.segmented button + button {
  border-left: 1px solid var(--bs-border-color);
}

.segmented button:hover:not(:disabled) {
  color: var(--bs-emphasis-color);
  background: rgba(var(--web-overlay-rgb), 0.05);
}

.segmented button.active {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

/* A check's card rolls up and down: its header is the summary, with the chip and the last cost; a chevron turns. */
/* F31: one fold for every check card (Louis), not a fold per card. */
/* The live run's conversations, rendered by the chat's TurnView; while a run goes the page is one column. */
.admin-cols.single {
  grid-template-columns: minmax(0, 1fr);
}

.live-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 0 6px;
  border-top: 1px solid var(--bs-border-color);
}

.live-chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bs-secondary-color);
  font-size: 13px;
}

.live-chat .user-message {
  max-width: 70%;
}

/* The live run as a tree (F27): mode → conversation → turn, each a details node with its figures as chips. */
.tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.tree-node {
  border-left: 2px solid var(--bs-border-color);
  margin-left: 4px;
  padding-left: 10px;
}

.tree-node[open] {
  border-left-color: rgba(var(--bs-primary-rgb), 0.45);
}

.tree-node > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
  padding: 7px 8px;
  border-radius: 10px;
  user-select: none;
}

.tree-node > summary::-webkit-details-marker {
  display: none;
}

.tree-node > summary:hover {
  background: rgba(var(--web-overlay-rgb), 0.04);
}

.tree-node > summary .chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--bs-secondary-color);
  border-bottom: 2px solid var(--bs-secondary-color);
  transform: rotate(-45deg);
  transition: transform 0.2s var(--web-ease);
  margin-right: 2px;
}

.tree-node[open] > summary .chevron {
  transform: rotate(45deg);
}

.tree-mode > summary strong {
  color: var(--bs-primary-text-emphasis);
  font-size: 15px;
}

.tree-meta {
  color: var(--bs-tertiary-color);
  font-size: 12.5px;
}

.chip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(var(--web-overlay-rgb), 0.06);
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.chip.ok {
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.chip.bad {
  background: rgba(var(--bs-danger-rgb), 0.14);
  color: var(--bs-danger);
}

/* A guess: neither right nor wrong, but not an answer (F31: a price without its source). */
.chip.warn {
  background: rgba(var(--bs-primary-rgb), 0.14);
  color: var(--bs-primary-text-emphasis);
}

.chip.busy {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.chip.hosts {
  white-space: normal;
  font-weight: 500;
}

.tree-turn-body .user-message {
  max-width: 70%;
}

.run-tabs a.active {
  color: var(--web-on-primary);
  background: var(--web-cta);
  border-color: transparent;
}

/* The studio's rules that lived with the admin's (F27, CL27): what several of its components share and no one
   component holds (CL58, step 4). */
/* ---- The studio's rules that lived with the admin's (F27, CL27, F53.2), kept here until CL58's step 4 moves them
   beside the studio's components; the admin frame's own are in AdminShell.razor.scss since step 3. ---- */
.admin-details summary {
  cursor: pointer;
  color: var(--bs-secondary-color);
  font-weight: 600;
  padding: 6px 0;
}

.admin-markdown {
  font-size: 13.5px;
}

.admin-markdown table {
  border-collapse: collapse;
  font-size: 13px;
  margin: 8px 0;
}

.admin-markdown th, .admin-markdown td {
  border: 1px solid var(--bs-border-color);
  padding: 5px 9px;
}

.admin-pre {
  background: var(--web-code-bg);
  border-radius: 10px;
  padding: 12px;
  font: 12px/1.5 var(--bs-font-monospace);
  max-height: 420px;
  overflow: auto;
}

.run-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.run-controls label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bs-secondary-color);
  font-size: 13px;
}

.run-controls select {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: 9px;
  padding: 5px 10px;
  font: inherit;
}

.run-panel .work-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.run-panel.running .work-status {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.run-panel.failed .work-status {
  background: rgba(var(--bs-danger-rgb), 0.14);
  color: var(--bs-danger);
}

.run-log {
  min-height: 80px;
  white-space: pre-wrap;
}

/* The run's progress as a table (F27, Louis: "bigger and more detailed"): a row per turn, a summary row per conversation. */
.run-table {
  font-size: 13px;
  margin: 6px 0 10px;
}

.run-table td.hosts {
  font-size: 12px;
  color: var(--bs-secondary-color);
  max-width: 360px;
  word-break: break-word;
}

.run-table tr.summary td {
  background: rgba(var(--web-overlay-rgb), 0.03);
  color: var(--bs-emphasis-color);
  border-bottom: 1px solid var(--bs-border-color);
}

.run-table tr.mode td {
  color: var(--bs-primary-text-emphasis);
  padding-top: 12px;
}

.run-table tr.failed td {
  color: var(--bs-danger);
}

.run-table tbody tr {
  cursor: default;
}

.summary-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.summary-table .rate-track {
  display: inline-block;
  vertical-align: middle;
  width: 48px;
  height: 6px;
  margin-right: 8px;
  border-radius: 3px;
  background: rgba(var(--web-overlay-rgb), 0.06);
  overflow: hidden;
}

.run-log {
  max-height: none;
  font-size: 12.5px;
}

/* CL27: the Prompts page's table, one row a prompt, its file under its name. */
.prompts {
  overflow-x: auto;
}

/* F53.2: the strip that says a run is going, on every admin page; the whole line is the link to where it is followed. */
.admin-main .live-run-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 8px 14px;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.35);
  border-radius: 12px;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-body-color);
  font-size: 13px;
  text-decoration: none;
}

.admin-main .live-run-strip:hover {
  color: var(--bs-emphasis-color);
  border-color: rgba(var(--bs-primary-rgb), 0.65);
}

.lvl.in {
  animation: zoom-in 0.4s var(--web-ease) both;
}

@keyframes zoom-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes zoom-out {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(1.01);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.tiles.small {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--bs-body-color);
  font: inherit;
  animation: rise 0.5s var(--web-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: transform 0.25s var(--web-spring), border-color 0.25s, box-shadow 0.25s;
}

button.tile {
  cursor: pointer;
}

button.tile:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--bs-primary-rgb), 0.45);
  box-shadow: var(--web-glow);
}

.tile-value.model {
  font-size: 15px;
  letter-spacing: 0;
}

.chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  padding: 12px 16px 14px;
  animation: rise 0.5s var(--web-ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.chart-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.chart-head.lead strong {
  font-size: 16px;
}

@keyframes grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.turn-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  background: none;
  border: 0;
  padding: 4px 2px 8px;
  color: var(--bs-body-color);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}

.turn-head {
  cursor: default;
  padding: 6px 8px 8px;
}

.turn-head:hover {
  background: none;
}

/* F31: a row's ways on are its buttons only (Louis): Speel af opens the chats, the link goes into the costs. */
.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.turn-head .row-actions {
  margin-left: 4px;
}

.turn-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bs-primary-text-emphasis);
  background: none;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.45);
  border-radius: 999px;
  padding: 3px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.turn-open:hover, .turn-open:focus-visible {
  background: rgba(var(--bs-primary-rgb), 0.14);
}

.turn-open.quiet {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.turn-open.quiet:hover, .turn-open.quiet:focus-visible {
  color: var(--bs-primary-text-emphasis);
  border-color: rgba(var(--bs-primary-rgb), 0.45);
  background: rgba(var(--bs-primary-rgb), 0.08);
}

.row-cost.small {
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.turn-head .turn-cost {
  margin-left: auto;
}

.explorer-q {
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--bs-success-bg-subtle);
  color: var(--bs-emphasis-color);
}

.explorer-q .muted {
  margin-right: 8px;
  font-size: 12px;
}

.xreplay .turn {
  margin-bottom: 0;
}

.xreplay .user-message {
  max-width: 70%;
}

/* The modes side by side at every level (Louis), in the run's order; one under the other when the screen is narrow. */
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 20px;
  align-items: start;
}

.compare-head .muted {
  font-weight: 400;
  font-size: 12.5px;
  margin-left: auto;
}

.explorer-think {
  white-space: pre-wrap;
  color: var(--bs-secondary-color);
  font-size: 13px;
  border-left: 2px solid var(--bs-border-color);
  margin: 6px 0;
  padding: 2px 10px;
}

.explorer-calls {
  font-size: 12.5px;
  padding-left: 20px;
}

/* Taller cards (Louis), all the same: the rings in the middle of the room under the card's head. */
.chart-pair > .chart {
  min-height: 320px;
  padding: 16px 18px 20px;
}

.chart-pair > .chart > .donuts {
  flex: 1;
  align-items: center;
  padding: 14px 0 6px;
}

/* A chart's title explains itself on hover or focus (Louis): what it shows, good, bad and why. The card it sits in rises
   above its neighbours while the note is open (a grid item takes a z-index), so the next card can't cover it. */
.chart-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: help;
  border-radius: 6px;
  outline: none;
}

.chart:has(.chart-title:hover, .chart-title:focus-visible) {
  z-index: 5;
}

/* A section that rolls up (Louis): its head, a chevron that turns, folds it. */
.fold {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fold > .fold-head {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--bs-emphasis-color);
  padding: 4px 2px;
  border-radius: 8px;
}

.fold > .fold-head::-webkit-details-marker {
  display: none;
}

.fold > .fold-head:hover {
  color: var(--bs-primary-text-emphasis);
}

.fold-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--bs-secondary-color);
  border-bottom: 2px solid var(--bs-secondary-color);
  transform: rotate(-45deg);
  transition: transform 0.2s var(--web-ease);
}

.fold[open] > .fold-head .fold-chevron {
  transform: rotate(45deg);
}

.donut {
  width: 136px;
  height: 136px;
  transform: rotate(0deg);
}

@keyframes sweep {
  from {
    stroke-dasharray: 0 100;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion=on]) .explorer * {
    animation: none !important;
    transition: none !important;
  }
}
.notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  font-size: 13.5px;
}

.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--bs-primary-text-emphasis);
  cursor: pointer;
  text-decoration: underline;
}

.agreement-bar .rate-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(var(--web-overlay-rgb), 0.06);
  overflow: hidden;
}

.calibration-verdict.short {
  color: var(--bs-primary-text-emphasis);
}

.studio-draft.active {
  border-color: var(--bs-primary);
}

/* File tree */
.file-tree {
  flex: 1;
  overflow: auto;
  font-size: 13px;
}

.tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree-row {
  display: block;
  width: 100%;
  padding: 2px 6px;
  border: none;
  border-radius: var(--bs-border-radius);
  background: none;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-row:hover {
  background: rgba(var(--web-overlay-rgb), 0.05);
}

.tree-row.selected {
  background: var(--bs-secondary-bg);
  color: var(--bs-emphasis-color);
  box-shadow: inset 2px 0 0 var(--bs-primary);
}

.tree-row.folder {
  color: var(--bs-emphasis-color);
  font-weight: 500;
}

.tree-row.locked {
  color: var(--bs-tertiary-color);
  cursor: default;
}

.caret {
  display: inline-block;
  width: 1em;
  color: var(--bs-tertiary-color);
}

.tree > li {
  animation: fade-in 0.2s var(--web-ease) both;
}

.tree-loading, .tree-error {
  padding: 4px 8px;
  color: var(--bs-tertiary-color);
  font-size: 12px;
}

.tree-error {
  color: var(--bs-danger);
}

/* File and diff viewers */
.file-viewer {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  animation: slide-in 0.28s var(--web-ease) both;
}

.file-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}

.file-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.file-path {
  color: var(--bs-emphasis-color);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-meta {
  font-size: 12px;
  color: var(--bs-secondary-color);
}

.file-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.file-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  background: var(--web-code-bg);
}

.file-body pre {
  margin: 0;
  padding: 12px 0;
  font: 13px/1.5 var(--bs-font-monospace);
}

.gutter {
  position: sticky;
  left: 0;
  padding: 12px 10px 12px 16px !important;
  text-align: right;
  color: var(--bs-tertiary-color);
  background: var(--web-code-bg);
  border-right: 1px solid var(--bs-border-color);
  user-select: none;
}

.code {
  padding-left: 12px !important;
  padding-right: 16px !important;
  tab-size: 4;
}

.added {
  color: var(--bs-primary);
}

.removed {
  color: var(--bs-danger);
}

.diff-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--web-code-bg);
  font: 13px/1.5 var(--bs-font-monospace);
}

.diff-row {
  display: flex;
  min-width: max-content;
}

.diff-row .ln {
  flex: 0 0 3.5em;
  padding: 0 8px;
  text-align: right;
  color: var(--bs-tertiary-color);
  user-select: none;
  border-right: 1px solid var(--bs-border-color);
}

.diff-text {
  position: relative;
  padding: 0 12px;
  white-space: pre;
  tab-size: 4;
}

.diff-add {
  background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
  color: var(--bs-emphasis-color);
}

.diff-add .diff-text::before {
  content: "+";
  position: absolute;
  left: 2px;
  color: var(--bs-primary);
}

.diff-del {
  background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
  color: var(--bs-emphasis-color);
}

.diff-del .diff-text::before {
  content: "-";
  position: absolute;
  left: 2px;
  color: var(--bs-danger);
}

.diff-ctx {
  color: var(--bs-secondary-color);
}

.diff-hunk {
  color: var(--bs-link-color);
  background: color-mix(in srgb, var(--bs-link-color) 8%, transparent);
}

.diff-hunk .diff-text {
  padding-top: 4px;
  padding-bottom: 4px;
}

.diff-note, .diff-row.diff-note {
  color: var(--bs-tertiary-color);
  font-style: italic;
  padding: 4px 12px;
}

/* Changes (source control) */
.changes-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}

.changes-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
}

.branch {
  color: var(--bs-emphasis-color);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commit-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.commit-box textarea {
  resize: vertical;
  min-height: 3em;
  max-height: 30vh;
}

.committed {
  color: var(--bs-primary);
  font-size: 12px;
  overflow-wrap: anywhere;
  animation: fade-in 0.3s both;
}

.committed::before {
  content: "✓ ";
}

.selection-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.selection-bar button {
  padding: 2px 8px;
  font-size: 12px;
}

.confirm {
  color: var(--bs-warning);
  font-size: 12px;
  animation: blink-soft 1.6s infinite;
}

.change-group {
  display: flex;
  flex-direction: column;
}

.group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  color: var(--bs-secondary-color);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.count {
  padding: 0 5px;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  font-weight: 400;
}

.change-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 4px;
  border-radius: var(--bs-border-radius);
  transition: background 0.12s;
  animation: fade-in 0.2s both;
}

.change-row:hover {
  background: rgba(var(--web-overlay-rgb), 0.05);
}

.change-row.selected {
  background: var(--bs-secondary-bg);
  box-shadow: inset 2px 0 0 var(--bs-primary);
}

.change-file {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 6px;
  align-items: baseline;
  padding: 3px 0;
  border: none;
  background: none;
  text-align: left;
}

.change-name {
  white-space: nowrap;
}

.change-folder {
  color: var(--bs-tertiary-color);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.letter {
  width: 1.2em;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  color: var(--bs-secondary-color);
  font-family: var(--bs-font-monospace);
}

.letter-M {
  color: var(--bs-warning);
}

.letter-A, .letter-U {
  color: var(--bs-primary);
}

.letter-D {
  color: var(--bs-danger);
}

.letter-R {
  color: var(--bs-link-color);
}

/* Branches and history */
.history-row {
  align-items: flex-start;
}

.history-item {
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.history-item .change-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-item .change-folder {
  max-width: 100%;
}

.change-name.merged {
  color: var(--bs-secondary-color);
}

.pending-label {
  align-self: center;
  padding: 0 6px;
  color: var(--bs-warning);
  font-size: 11px;
  white-space: nowrap;
}

.changes-panel .tree-error {
  white-space: pre-line;
}

button.small {
  padding: 2px 8px;
  font-size: 12px;
  align-self: center;
}

.sha {
  color: var(--bs-warning);
  font-family: var(--bs-font-monospace);
  font-size: 0.92em;
}

.ref {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: var(--bs-link-color);
  font-size: 10px;
  line-height: 1.5;
}

.history-commits {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  font-family: var(--bs-font-sans-serif);
}

.history-commit {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 3px 6px;
  border: none;
  border-radius: var(--bs-border-radius);
  background: none;
  color: var(--bs-body-color);
  text-align: left;
}

.history-commit:hover {
  background: rgba(var(--web-overlay-rgb), 0.05);
}

.commit-body {
  margin: 0;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  white-space: pre-wrap;
  font: inherit;
}

.patch-file {
  border-bottom: 1px solid var(--bs-border-color);
}

.patch-file-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  padding: 6px 12px;
  background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
  font-family: var(--bs-font-sans-serif);
}

.patch-file-head .change-name {
  color: var(--bs-emphasis-color);
  font-weight: 600;
  overflow-wrap: anywhere;
  white-space: normal;
}

input[type=checkbox] {
  accent-color: var(--bs-primary);
}

.hidden {
  display: none !important;
}

/* The home page's hero: the headline on the left, the live turn on the right. */
.hero {
  padding: 88px var(--site-gutter) 64px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px;
  align-items: center;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hero-text .lede {
  max-width: 46ch;
}

.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* The live turn in the hero: a terminal-like panel whose lines fade in on their own delays (--d, set in the markup) and
   loop every 14 seconds, with a blinking caret on the answer and a rule that draws itself before the cost line. */
.turn {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius);
  background: var(--bs-secondary-bg);
  overflow: hidden;
}

.turn-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bs-border-color);
  font: 12px var(--bs-font-monospace);
  color: var(--bs-tertiary-color);
}

.turn-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--web-border-hover);
}

.turn-head span:last-child {
  margin-left: 8px;
}

.turn-body {
  padding: 18px 20px;
  font: 13.5px/1.75 var(--bs-font-monospace);
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.ln {
  opacity: 0;
  animation: turn-line 14s linear infinite;
  animation-delay: var(--d);
}

.ln-prompt {
  color: var(--bs-emphasis-color);
}

.ln-think {
  color: var(--bs-tertiary-color);
  font-style: italic;
}

.ln-guard {
  color: var(--bs-tertiary-color);
  padding-left: 1.5em;
}

.ln-tool {
  color: var(--web-soft-text);
}

.ln-arg {
  color: var(--bs-tertiary-color);
}

.ln-answer {
  color: var(--bs-body-color);
}

.ln-cost {
  color: var(--bs-secondary-color);
  padding-top: 10px;
}

.ln-cost strong {
  color: var(--bs-emphasis-color);
}

.turn-bill {
  margin-top: auto;
  padding-top: 14px;
}

.bill-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--bs-emphasis-color), var(--web-border-hover));
  animation: turn-bill 14s linear infinite;
}

.caret {
  display: inline-block;
  width: 8px;
  height: 15px;
  margin-left: 4px;
  background: var(--bs-body-color);
  vertical-align: -2px;
  animation: turn-caret 1s step-end infinite;
}

@keyframes turn-line {
  0%, 2% {
    opacity: 0;
    transform: translateY(4px);
  }
  6%, 92% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
@keyframes turn-caret {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@keyframes turn-bill {
  0%, 60% {
    width: 0;
  }
  75%, 100% {
    width: 100%;
  }
}
/* The bands a page is made of: a kicker, a heading, a grid of panels; the stat tiles; the rules list; the contact
   strip in steel at the foot of the home page. */
.band {
  padding: 72px var(--site-gutter);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.band-movie {
  gap: 18px;
}

.band-note {
  font-size: 14px;
  color: var(--bs-tertiary-color);
}

.band-note a {
  color: var(--bs-secondary-color);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Code shown as it stands in the repo: it scrolls inside its own box rather than widening the page. */
.listing {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
}

.stat {
  gap: 8px;
}

.stat-value {
  font: 700 44px/1 var(--bs-font-monospace);
  letter-spacing: -0.03em;
}

.stat-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--bs-secondary-color);
}

.rules {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bs-border-color);
  max-width: 72ch;
}

.rules li {
  padding: 14px 0;
  border-bottom: 1px solid var(--bs-border-color);
  font-size: 15px;
  line-height: 1.6;
  color: var(--bs-secondary-color);
}

.rules strong {
  color: var(--bs-emphasis-color);
  font-weight: 600;
}

.strip-contact {
  margin: 0 var(--site-gutter) 72px;
  padding: 48px;
  border-radius: 14px;
  background: var(--steel);
  color: var(--bs-body-bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.strip-contact h2 {
  color: var(--bs-body-bg);
  font-size: 32px;
}

.strip-contact p {
  color: #3d4148;
  max-width: var(--measure);
}

.strip-contact .btn {
  margin-top: 6px;
}

/* What the two films share: a 1280×720 stage scaled to its container, a floor seen from above (CSS perspective, the
   camera a transform on the floor), the parts as slabs raised off it, the travelling light and its shadow, the flat
   detail card, the caption strip. Each film's own positions, camera and timing are in short.css and detail.css. */
/* The stage keeps its 16:9 drawing size and scales down with its container: tan(atan2(a, b)) is a / b as a number. */
.movie {
  width: 100%;
  aspect-ratio: 16/9;
  container-type: inline-size;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--bs-border-color);
}

.stage {
  position: relative;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  transform-origin: 0 0;
  transform: scale(tan(atan2(100cqw, 1280px)));
  background: radial-gradient(ellipse at 50% 30%, #121316 0%, var(--bs-body-bg) 70%);
  font-family: var(--bs-font-sans-serif);
}

/* The scene paints under the flat layer: a slab raised off the floor would otherwise show through the caption strip. */
.camera {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 720px;
  perspective: 1900px;
  perspective-origin: 50% 45%;
  z-index: 1;
}

.title, .cards, .strip, .cap, .bar, .steps {
  z-index: 2;
}

.floor {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 720px;
  transform-style: preserve-3d;
  transform-origin: 640px 380px;
  animation: camera var(--loop) ease-in-out infinite;
  background-image: linear-gradient(#141619 1px, transparent 1px), linear-gradient(90deg, #141619 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: 20px 20px;
}

/* A part: a slab 26px above the floor; the stack of 1px shadows draws its side. */
.part {
  position: absolute;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius-small);
  background: linear-gradient(180deg, var(--bs-tertiary-bg), #0f1013);
  color: #b4b8be;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 0 12px;
  font: 600 16px/1.25 var(--bs-font-sans-serif);
  transform: translateZ(26px);
  box-shadow: 0 1px 0 #1d2024, 0 2px 0 #1b1e22, 0 3px 0 #191c20, 0 4px 0 #17191d, 0 5px 0 #15171b, 0 6px 0 #131519, 0 7px 0 #111316, 0 8px 0 #0f1114, 0 24px 40px rgba(0, 0, 0, 0.7);
  animation: var(--loop) linear infinite;
}

.part small {
  font: 12px/1.3 var(--bs-font-monospace);
  color: var(--bs-tertiary-color);
  font-weight: 400;
}

.part i {
  position: absolute;
  left: -10px;
  top: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bs-body-color);
  color: var(--bs-body-bg);
  font: 600 12px/24px var(--bs-font-monospace);
  font-style: normal;
  text-align: center;
}

.part.core {
  transform: translateZ(60px);
  box-shadow: 0 1px 0 #24272c, 0 2px 0 #22252a, 0 4px 0 #1f2227, 0 6px 0 #1c1f24, 0 8px 0 #191c21, 0 10px 0 #16191e, 0 12px 0 #14171b, 0 14px 0 #121519, 0 16px 0 #101316, 0 40px 60px rgba(0, 0, 0, 0.8);
}

.part.slab {
  left: 490px;
  width: 400px;
  height: 60px;
  font-size: 15px;
  transform: translateZ(40px);
}

.part.slab small {
  font-size: 11.5px;
}

/* The plate core's slabs sit on, in the detailed film. */
.plate {
  position: absolute;
  left: 470px;
  top: 80px;
  width: 440px;
  height: 560px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(20, 22, 26, 0.6);
  transform: translateZ(8px);
}

.plate span {
  position: absolute;
  left: 14px;
  top: 10px;
  font: 500 11px/1 var(--bs-font-monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bs-tertiary-color);
}

/* A pool of light on the floor under the part at work. */
.pool {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  opacity: 0;
  animation: var(--loop) linear infinite;
}

/* The wires between the parts. */
.wire {
  position: absolute;
  background: var(--line);
  transform: translateZ(2px);
}

/* The turn: a light flying above the slabs, and its shadow on the floor. */
.dot {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bs-emphasis-color);
  box-shadow: 0 0 18px var(--bs-emphasis-color), 0 0 40px rgba(255, 255, 255, 0.5);
  transform: translateZ(90px);
  animation: travel var(--loop) linear infinite;
}

.shadow {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  filter: blur(3px);
  animation: travel var(--loop) linear infinite;
}

/* Flat on the screen, in front of the scene: the title, the detail card, the caption strip, the progress. */
.title {
  position: absolute;
  left: 60px;
  top: 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.title-text {
  font: 700 28px/1.1 var(--bs-font-sans-serif);
  color: var(--bs-emphasis-color);
  letter-spacing: -0.02em;
}

.cards {
  position: absolute;
  right: 48px;
  top: 40px;
  width: 400px;
}

.card {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
  padding: 16px 18px;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius);
  background: rgba(10, 11, 13, 0.92);
  opacity: 0;
  animation: var(--loop) linear infinite;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card b {
  font: 600 18px/1.2 var(--bs-font-sans-serif);
  color: var(--bs-emphasis-color);
}

.card code {
  font: 12px/1.4 var(--bs-font-monospace);
  color: var(--bs-tertiary-color);
}

.card ul {
  margin: 4px 0 0;
  padding-left: 16px;
  font: 14px/1.55 var(--bs-font-sans-serif);
  color: var(--web-soft-text);
}

.card em {
  font: 12px/1.4 var(--bs-font-monospace);
  font-style: normal;
  color: var(--bs-emphasis-color);
  background: var(--line);
  border-radius: 4px;
  padding: 4px 8px;
  margin-top: 4px;
  display: inline-block;
}

.strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(180deg, rgba(7, 7, 8, 0), var(--bs-body-bg) 40%);
}

.cap {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 650px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  opacity: 0;
  animation: var(--loop) linear infinite;
}

.cap b {
  font: 600 12px/1 var(--bs-font-monospace);
  letter-spacing: 0.14em;
  color: var(--bs-tertiary-color);
  white-space: nowrap;
}

.cap span {
  font: 500 18px/1.3 var(--bs-font-sans-serif);
  color: var(--bs-emphasis-color);
}

.bar {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 636px;
  height: 2px;
  background: var(--line);
}

.bar i {
  display: block;
  height: 100%;
  background: var(--bs-emphasis-color);
  animation: bar var(--loop) linear infinite;
}

.steps {
  position: absolute;
  left: 60px;
  top: 618px;
  display: flex;
  gap: 6px;
}

.steps i {
  height: 3px;
  background: var(--bs-border-color);
  animation: var(--loop) linear infinite;
}

@keyframes bar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
/* The short film (36 s, six scenes of 6 s): where each part stands, the camera's moves, when each part lights up, the
   light's path, and when each card and caption shows. A scene's window is a share of the loop: 1 is 0–16%, 2 is
   16–33%, 3 is 33–50%, 4 is 50–67%, 5 is 67–84%, 6 is 84–100%. The parts are numbered in the order the turn reaches
   them. */
.film-short {
  --loop: 36s;
}

.film-short .floor {
  animation-name: camera-s;
}

.film-short .dot, .film-short .shadow {
  animation-name: travel-s;
}

.film-short .steps i {
  width: 188.3333333333px;
}

/* Where the parts stand (the floor is 1280×720; its centre, 640×380, is what the camera turns around). */
.film-short .p-host {
  left: 60px;
  top: 300px;
  width: 200px;
  height: 120px;
  animation-name: lit-host-s;
}

.film-short .p-comp {
  left: 330px;
  top: 300px;
  width: 200px;
  height: 120px;
  animation-name: lit-comp-s;
}

.film-short .p-ident {
  left: 330px;
  top: 120px;
  width: 200px;
  height: 90px;
  animation-name: lit-ident-s;
}

.film-short .p-packs {
  left: 330px;
  top: 480px;
  width: 200px;
  height: 90px;
  animation-name: lit-packs-s;
}

.film-short .p-core {
  left: 600px;
  top: 260px;
  width: 260px;
  height: 200px;
  font-size: 20px;
  animation-name: lit-core-s;
}

.film-short .p-model {
  left: 960px;
  top: 120px;
  width: 240px;
  height: 120px;
  animation-name: lit-model-s;
}

.film-short .p-tools {
  left: 960px;
  top: 320px;
  width: 240px;
  height: 120px;
  animation-name: lit-tools-s;
}

.film-short .p-ledger {
  left: 960px;
  top: 520px;
  width: 240px;
  height: 120px;
  animation-name: lit-ledger-s;
}

.film-short .w1 {
  left: 260px;
  top: 359px;
  width: 70px;
  height: 2px;
}

.film-short .w2 {
  left: 530px;
  top: 359px;
  width: 70px;
  height: 2px;
}

.film-short .w3 {
  left: 430px;
  top: 210px;
  width: 2px;
  height: 90px;
}

.film-short .w4 {
  left: 430px;
  top: 420px;
  width: 2px;
  height: 60px;
}

.film-short .w5 {
  left: 860px;
  top: 359px;
  width: 100px;
  height: 2px;
}

.film-short .w6 {
  left: 910px;
  top: 180px;
  width: 2px;
  height: 400px;
}

.film-short .w7 {
  left: 910px;
  top: 180px;
  width: 50px;
  height: 2px;
}

.film-short .w8 {
  left: 910px;
  top: 580px;
  width: 50px;
  height: 2px;
}

.film-short .pool-host {
  left: 20px;
  top: 260px;
  width: 280px;
  height: 200px;
  animation-name: pool-host-s;
}

.film-short .pool-comp {
  left: 290px;
  top: 260px;
  width: 280px;
  height: 200px;
  animation-name: pool-comp-s;
}

.film-short .pool-core {
  left: 540px;
  top: 200px;
  width: 380px;
  height: 320px;
  animation-name: pool-core-s;
}

.film-short .pool-model {
  left: 920px;
  top: 80px;
  width: 320px;
  height: 200px;
  animation-name: pool-model-s;
}

.film-short .pool-tools {
  left: 920px;
  top: 280px;
  width: 320px;
  height: 200px;
  animation-name: pool-tools-s;
}

.film-short .pool-ledger {
  left: 920px;
  top: 480px;
  width: 320px;
  height: 200px;
  animation-name: pool-ledger-s;
}

.film-short .c1 {
  animation-name: show-s1;
}

.film-short .c2 {
  animation-name: show-s2;
}

.film-short .c3 {
  animation-name: show-s3;
}

.film-short .c4 {
  animation-name: show-s4;
}

.film-short .c5 {
  animation-name: show-s5;
}

.film-short .c6 {
  animation-name: show-s6;
}

.film-short .k1 {
  animation-name: step-s1;
}

.film-short .k2 {
  animation-name: step-s2;
}

.film-short .k3 {
  animation-name: step-s3;
}

.film-short .k4 {
  animation-name: step-s4;
}

.film-short .k5 {
  animation-name: step-s5;
}

.film-short .k6 {
  animation-name: step-s6;
}

/* The camera: wide at the start and the end, otherwise flown in on the part at work (translate centres it, scale is
   the zoom) and panned from one to the next. */
@keyframes camera-s {
  0% {
    transform: rotateX(38deg) rotateZ(-12deg) scale(1) translate(0, 0);
  }
  4%, 13% {
    transform: rotateX(22deg) rotateZ(-5deg) scale(1.7) translate(480px, 20px);
  }
  18%, 30% {
    transform: rotateX(22deg) rotateZ(-5deg) scale(1.3) translate(210px, 35px);
  }
  35%, 47% {
    transform: rotateX(22deg) rotateZ(-5deg) scale(0.92) translate(-200px, 185px);
  }
  52%, 64% {
    transform: rotateX(22deg) rotateZ(-5deg) scale(1.3) translate(-265px, 10px);
  }
  69%, 81% {
    transform: rotateX(22deg) rotateZ(-5deg) scale(1.3) translate(-265px, -90px);
  }
  86%, 97% {
    transform: rotateX(22deg) rotateZ(-5deg) scale(1.7) translate(480px, 20px);
  }
  100% {
    transform: rotateX(38deg) rotateZ(-12deg) scale(1) translate(0, 0);
  }
}
/* The light's path, part to part. */
@keyframes travel-s {
  0% {
    left: 250px;
    top: 352px;
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  12% {
    left: 330px;
    top: 352px;
  }
  14% {
    left: 330px;
    top: 352px;
  }
  26% {
    left: 530px;
    top: 352px;
  }
  28% {
    left: 600px;
    top: 352px;
  }
  30% {
    left: 860px;
    top: 352px;
  }
  34% {
    left: 960px;
    top: 180px;
  }
  40% {
    left: 960px;
    top: 180px;
  }
  44% {
    left: 860px;
    top: 352px;
  }
  48% {
    left: 860px;
    top: 352px;
  }
  52% {
    left: 960px;
    top: 380px;
  }
  58% {
    left: 960px;
    top: 380px;
  }
  62% {
    left: 860px;
    top: 352px;
  }
  66% {
    left: 860px;
    top: 352px;
  }
  70% {
    left: 960px;
    top: 580px;
  }
  74% {
    left: 960px;
    top: 580px;
  }
  78% {
    left: 860px;
    top: 352px;
  }
  80% {
    left: 600px;
    top: 352px;
  }
  90% {
    left: 250px;
    top: 352px;
    opacity: 1;
  }
  92% {
    opacity: 0;
  }
  100% {
    left: 250px;
    top: 352px;
    opacity: 0;
  }
}
/* When each part is lit (white edge and text), and the identity and packs dropping onto the floor in scene 2. */
@keyframes lit-host-s {
  0%, 12% {
    border-color: #fff;
    color: #fff;
  }
  16%, 78% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  84%, 100% {
    border-color: #fff;
    color: #fff;
  }
}
@keyframes lit-comp-s {
  0%, 12% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  16%, 26% {
    border-color: #fff;
    color: #fff;
  }
  30%, 100% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
}
@keyframes lit-ident-s {
  0%, 18% {
    opacity: 0.2;
    transform: translateZ(120px) translateY(-20px);
  }
  22%, 100% {
    opacity: 1;
    transform: translateZ(26px);
  }
}
@keyframes lit-packs-s {
  0%, 20% {
    opacity: 0.2;
    transform: translateZ(120px) translateY(20px);
  }
  24%, 100% {
    opacity: 1;
    transform: translateZ(26px);
  }
}
@keyframes lit-core-s {
  0%, 26% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  30%, 80% {
    border-color: #fff;
    color: #fff;
    background: linear-gradient(180deg, #1f2226, #15171a);
  }
  86%, 100% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
}
@keyframes lit-model-s {
  0%, 30% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  34%, 42% {
    border-color: #fff;
    color: #fff;
  }
  46%, 100% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
}
@keyframes lit-tools-s {
  0%, 48% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  52%, 60% {
    border-color: #fff;
    color: #fff;
  }
  64%, 100% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
}
@keyframes lit-ledger-s {
  0%, 66% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  70%, 96% {
    border-color: #fff;
    color: #fff;
  }
  100% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
}
@keyframes pool-host-s {
  0%, 12% {
    opacity: 1;
  }
  16%, 78% {
    opacity: 0;
  }
  84%, 100% {
    opacity: 1;
  }
}
@keyframes pool-comp-s {
  0%, 12% {
    opacity: 0;
  }
  16%, 26% {
    opacity: 1;
  }
  30%, 100% {
    opacity: 0;
  }
}
@keyframes pool-core-s {
  0%, 26% {
    opacity: 0;
  }
  30%, 80% {
    opacity: 1;
  }
  86%, 100% {
    opacity: 0;
  }
}
@keyframes pool-model-s {
  0%, 30% {
    opacity: 0;
  }
  34%, 42% {
    opacity: 1;
  }
  46%, 100% {
    opacity: 0;
  }
}
@keyframes pool-tools-s {
  0%, 48% {
    opacity: 0;
  }
  52%, 60% {
    opacity: 1;
  }
  64%, 100% {
    opacity: 0;
  }
}
@keyframes pool-ledger-s {
  0%, 66% {
    opacity: 0;
  }
  70%, 96% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* The card and the caption of each scene, and the step marks. */
@keyframes show-s1 {
  0% {
    opacity: 0;
  }
  3%, 13% {
    opacity: 1;
  }
  16%, 100% {
    opacity: 0;
  }
}
@keyframes show-s2 {
  0%, 16% {
    opacity: 0;
  }
  19%, 30% {
    opacity: 1;
  }
  33%, 100% {
    opacity: 0;
  }
}
@keyframes show-s3 {
  0%, 33% {
    opacity: 0;
  }
  36%, 47% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@keyframes show-s4 {
  0%, 50% {
    opacity: 0;
  }
  53%, 64% {
    opacity: 1;
  }
  67%, 100% {
    opacity: 0;
  }
}
@keyframes show-s5 {
  0%, 67% {
    opacity: 0;
  }
  70%, 81% {
    opacity: 1;
  }
  84%, 100% {
    opacity: 0;
  }
}
@keyframes show-s6 {
  0%, 84% {
    opacity: 0;
  }
  87%, 98% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes step-s1 {
  0%, 16% {
    background: #fff;
  }
  17%, 100% {
    background: #2c2f35;
  }
}
@keyframes step-s2 {
  0%, 16% {
    background: #2c2f35;
  }
  17%, 33% {
    background: #fff;
  }
  34%, 100% {
    background: #2c2f35;
  }
}
@keyframes step-s3 {
  0%, 33% {
    background: #2c2f35;
  }
  34%, 50% {
    background: #fff;
  }
  51%, 100% {
    background: #2c2f35;
  }
}
@keyframes step-s4 {
  0%, 50% {
    background: #2c2f35;
  }
  51%, 67% {
    background: #fff;
  }
  68%, 100% {
    background: #2c2f35;
  }
}
@keyframes step-s5 {
  0%, 67% {
    background: #2c2f35;
  }
  68%, 84% {
    background: #fff;
  }
  85%, 100% {
    background: #2c2f35;
  }
}
@keyframes step-s6 {
  0%, 84% {
    background: #2c2f35;
  }
  85%, 100% {
    background: #fff;
  }
}
/* The detailed film (60 s, ten scenes of 6 s): where each part stands, the camera, the lighting, the light's path, and
   when each card and caption shows. A scene's window is 10% of the loop: scene n runs from (n−1)·10% to n·10%. The
   six slabs inside core are the chat pipeline's middleware, outermost first (ChatPipeline.cs). */
.film-detail {
  --loop: 60s;
}

.film-detail .floor {
  animation-name: camera-d;
}

.film-detail .dot, .film-detail .shadow {
  animation-name: travel-d;
}

.film-detail .steps i {
  width: 110.6px;
}

.film-detail .p-host {
  left: 40px;
  top: 300px;
  width: 180px;
  height: 100px;
  animation-name: lit-host-d;
}

.film-detail .p-spec {
  left: 40px;
  top: 480px;
  width: 180px;
  height: 100px;
  animation-name: lit-spec-d;
}

.film-detail .p-comp {
  left: 260px;
  top: 300px;
  width: 180px;
  height: 100px;
  animation-name: lit-comp-d;
}

.film-detail .p-ident {
  left: 260px;
  top: 140px;
  width: 180px;
  height: 80px;
  animation-name: lit-ident-d;
}

.film-detail .p-packs {
  left: 260px;
  top: 480px;
  width: 180px;
  height: 80px;
  animation-name: lit-packs-d;
}

.film-detail .s1 {
  top: 120px;
  animation-name: lit-s1-d;
}

.film-detail .s2 {
  top: 200px;
  animation-name: lit-s2-d;
}

.film-detail .s3 {
  top: 280px;
  animation-name: lit-s3-d;
}

.film-detail .s4 {
  top: 360px;
  animation-name: lit-s4-d;
}

.film-detail .s5 {
  top: 440px;
  animation-name: lit-s5-d;
}

.film-detail .s6 {
  top: 520px;
  animation-name: lit-s6-d;
}

.film-detail .p-model {
  left: 960px;
  top: 100px;
  width: 260px;
  height: 90px;
  animation-name: lit-model-d;
}

.film-detail .p-tools {
  left: 960px;
  top: 230px;
  width: 260px;
  height: 90px;
  animation-name: lit-tools-d;
}

.film-detail .p-summ {
  left: 960px;
  top: 360px;
  width: 260px;
  height: 90px;
  animation-name: lit-summ-d;
}

.film-detail .p-ledger {
  left: 960px;
  top: 490px;
  width: 260px;
  height: 90px;
  animation-name: lit-ledger-d;
}

.film-detail .w1 {
  left: 220px;
  top: 349px;
  width: 40px;
  height: 2px;
}

.film-detail .w2 {
  left: 440px;
  top: 349px;
  width: 30px;
  height: 2px;
}

.film-detail .w3 {
  left: 350px;
  top: 220px;
  width: 2px;
  height: 80px;
}

.film-detail .w4 {
  left: 350px;
  top: 400px;
  width: 2px;
  height: 80px;
}

.film-detail .w5 {
  left: 910px;
  top: 145px;
  width: 50px;
  height: 2px;
}

.film-detail .w6 {
  left: 910px;
  top: 275px;
  width: 50px;
  height: 2px;
}

.film-detail .w7 {
  left: 910px;
  top: 405px;
  width: 50px;
  height: 2px;
}

.film-detail .w8 {
  left: 910px;
  top: 535px;
  width: 50px;
  height: 2px;
}

.film-detail .w9 {
  left: 130px;
  top: 400px;
  width: 2px;
  height: 80px;
}

.film-detail .pool-host {
  left: -20px;
  top: 260px;
  width: 300px;
  height: 180px;
  animation-name: pool-host-d;
}

.film-detail .pool-comp {
  left: 200px;
  top: 120px;
  width: 300px;
  height: 460px;
  animation-name: pool-comp-d;
}

.film-detail .pool-core {
  left: 430px;
  top: 40px;
  width: 520px;
  height: 640px;
  animation-name: pool-core-d;
}

.film-detail .pool-right {
  left: 920px;
  top: 60px;
  width: 340px;
  height: 560px;
  animation-name: pool-right-d;
}

.film-detail .pool-spec {
  left: -20px;
  top: 440px;
  width: 300px;
  height: 180px;
  animation-name: pool-spec-d;
}

.film-detail .c1 {
  animation-name: show-d1;
}

.film-detail .c2 {
  animation-name: show-d2;
}

.film-detail .c3 {
  animation-name: show-d3;
}

.film-detail .c4 {
  animation-name: show-d4;
}

.film-detail .c5 {
  animation-name: show-d5;
}

.film-detail .c6 {
  animation-name: show-d6;
}

.film-detail .c7 {
  animation-name: show-d7;
}

.film-detail .c8 {
  animation-name: show-d8;
}

.film-detail .c9 {
  animation-name: show-d9;
}

.film-detail .c10 {
  animation-name: show-d10;
}

.film-detail .k1 {
  animation-name: step-d1;
}

.film-detail .k2 {
  animation-name: step-d2;
}

.film-detail .k3 {
  animation-name: step-d3;
}

.film-detail .k4 {
  animation-name: step-d4;
}

.film-detail .k5 {
  animation-name: step-d5;
}

.film-detail .k6 {
  animation-name: step-d6;
}

.film-detail .k7 {
  animation-name: step-d7;
}

.film-detail .k8 {
  animation-name: step-d8;
}

.film-detail .k9 {
  animation-name: step-d9;
}

.film-detail .k10 {
  animation-name: step-d10;
}

/* The camera: in on the host, across to the composition, down core's six layers (scene 3 tracks the light), then over
   to the tools, the summariser and the ledger with core's top layer in view, wide, in on the specialist and the host,
   wide again for the replay. */
@keyframes camera-d {
  0% {
    transform: rotateX(38deg) rotateZ(-12deg) scale(1) translate(0, 0);
  }
  3%, 8% {
    transform: rotateX(22deg) rotateZ(-5deg) scale(1.7) translate(510px, 30px);
  }
  11%, 17% {
    transform: rotateX(22deg) rotateZ(-5deg) scale(1.3) translate(290px, 40px);
  }
  20% {
    transform: rotateX(18deg) rotateZ(-3deg) scale(1.7) translate(-50px, 230px);
  }
  27% {
    transform: rotateX(18deg) rotateZ(-3deg) scale(1.7) translate(-50px, -170px);
  }
  31%, 37% {
    transform: rotateX(22deg) rotateZ(-5deg) scale(1.35) translate(-250px, 168px);
  }
  41%, 47% {
    transform: rotateX(22deg) rotateZ(-5deg) scale(1.35) translate(-250px, 102px);
  }
  51%, 57% {
    transform: rotateX(22deg) rotateZ(-5deg) scale(1.3) translate(-250px, -2px);
  }
  60% {
    transform: rotateX(38deg) rotateZ(-12deg) scale(1) translate(0, 0);
  }
  63%, 68% {
    transform: rotateX(22deg) rotateZ(-5deg) scale(1.5) translate(510px, -60px);
  }
  72%, 79% {
    transform: rotateX(22deg) rotateZ(-5deg) scale(1.5) translate(510px, 30px);
  }
  82%, 88% {
    transform: rotateX(22deg) rotateZ(-5deg) scale(1.7) translate(510px, 30px);
  }
  92%, 98% {
    transform: rotateX(34deg) rotateZ(-10deg) scale(1.05) translate(0, 0);
  }
  100% {
    transform: rotateX(38deg) rotateZ(-12deg) scale(1) translate(0, 0);
  }
}
@keyframes travel-d {
  0% {
    left: 122px;
    top: 342px;
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  8% {
    left: 342px;
    top: 342px;
  }
  17% {
    left: 342px;
    top: 342px;
  }
  18% {
    left: 682px;
    top: 142px;
  }
  20% {
    left: 682px;
    top: 222px;
  }
  22% {
    left: 682px;
    top: 302px;
  }
  24% {
    left: 682px;
    top: 382px;
  }
  26% {
    left: 682px;
    top: 462px;
  }
  27% {
    left: 682px;
    top: 542px;
  }
  28% {
    left: 1082px;
    top: 137px;
  }
  31% {
    left: 1082px;
    top: 137px;
  }
  32% {
    left: 682px;
    top: 142px;
  }
  34% {
    left: 1082px;
    top: 267px;
  }
  37% {
    left: 682px;
    top: 142px;
  }
  38% {
    left: 682px;
    top: 142px;
  }
  40% {
    left: 1082px;
    top: 397px;
  }
  46% {
    left: 682px;
    top: 222px;
  }
  48% {
    left: 682px;
    top: 222px;
  }
  50% {
    left: 1082px;
    top: 527px;
  }
  55% {
    left: 682px;
    top: 382px;
  }
  58% {
    left: 682px;
    top: 142px;
  }
  61% {
    left: 122px;
    top: 522px;
  }
  68% {
    left: 682px;
    top: 142px;
  }
  70% {
    left: 682px;
    top: 142px;
  }
  74% {
    left: 122px;
    top: 342px;
  }
  89% {
    left: 122px;
    top: 342px;
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    left: 122px;
    top: 342px;
    opacity: 0;
  }
}
@keyframes lit-host-d {
  0%, 8% {
    border-color: #fff;
    color: #fff;
  }
  10%, 69% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  71%, 89% {
    border-color: #fff;
    color: #fff;
  }
  91%, 100% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
}
@keyframes lit-comp-d {
  0%, 9% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  11%, 17% {
    border-color: #fff;
    color: #fff;
  }
  19%, 100% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
}
@keyframes lit-ident-d {
  0%, 11% {
    opacity: 0.2;
    transform: translateZ(120px) translateY(-20px);
  }
  14%, 100% {
    opacity: 1;
    transform: translateZ(26px);
  }
}
@keyframes lit-packs-d {
  0%, 12% {
    opacity: 0.2;
    transform: translateZ(120px) translateY(20px);
  }
  15%, 100% {
    opacity: 1;
    transform: translateZ(26px);
  }
}
@keyframes lit-s1-d {
  0%, 17% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  19%, 20% {
    border-color: #fff;
    color: #fff;
  }
  22%, 27% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  29%, 37% {
    border-color: #fff;
    color: #fff;
  }
  39%, 100% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
}
@keyframes lit-s2-d {
  0%, 19% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  20%, 21% {
    border-color: #fff;
    color: #fff;
  }
  23%, 47% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  49%, 53% {
    border-color: #fff;
    color: #fff;
  }
  55%, 100% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
}
@keyframes lit-s3-d {
  0%, 21% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  22%, 23% {
    border-color: #fff;
    color: #fff;
  }
  25%, 100% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
}
@keyframes lit-s4-d {
  0%, 23% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  24%, 25% {
    border-color: #fff;
    color: #fff;
  }
  27%, 52% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  54%, 57% {
    border-color: #fff;
    color: #fff;
  }
  59%, 100% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
}
@keyframes lit-s5-d {
  0%, 25% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  26%, 27% {
    border-color: #fff;
    color: #fff;
  }
  29%, 91% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  93%, 98% {
    border-color: #fff;
    color: #fff;
    background: linear-gradient(180deg, #1f2226, #15171a);
  }
  100% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
}
@keyframes lit-s6-d {
  0%, 26% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  27%, 28% {
    border-color: #fff;
    color: #fff;
  }
  30%, 100% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
}
@keyframes lit-model-d {
  0%, 27% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  28%, 31% {
    border-color: #fff;
    color: #fff;
  }
  33%, 100% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
}
@keyframes lit-tools-d {
  0%, 32% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  33%, 36% {
    border-color: #fff;
    color: #fff;
  }
  38%, 100% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
}
@keyframes lit-summ-d {
  0%, 40% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  41%, 46% {
    border-color: #fff;
    color: #fff;
  }
  48%, 100% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
}
@keyframes lit-ledger-d {
  0%, 50% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
  51%, 57% {
    border-color: #fff;
    color: #fff;
  }
  59%, 100% {
    border-color: #2c2f35;
    color: #b4b8be;
  }
}
@keyframes lit-spec-d {
  0%, 60% {
    border-color: #2c2f35;
    color: #b4b8be;
    opacity: 0.55;
  }
  62%, 68% {
    border-color: #fff;
    color: #fff;
    opacity: 1;
  }
  70%, 100% {
    border-color: #2c2f35;
    color: #b4b8be;
    opacity: 0.55;
  }
}
@keyframes pool-host-d {
  0%, 8% {
    opacity: 1;
  }
  10%, 69% {
    opacity: 0;
  }
  71%, 89% {
    opacity: 1;
  }
  91%, 100% {
    opacity: 0;
  }
}
@keyframes pool-comp-d {
  0%, 9% {
    opacity: 0;
  }
  11%, 17% {
    opacity: 1;
  }
  19%, 100% {
    opacity: 0;
  }
}
@keyframes pool-core-d {
  0%, 17% {
    opacity: 0;
  }
  19%, 57% {
    opacity: 1;
  }
  59%, 91% {
    opacity: 0;
  }
  93%, 98% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes pool-right-d {
  0%, 27% {
    opacity: 0;
  }
  28%, 57% {
    opacity: 1;
  }
  59%, 100% {
    opacity: 0;
  }
}
@keyframes pool-spec-d {
  0%, 60% {
    opacity: 0;
  }
  62%, 68% {
    opacity: 1;
  }
  70%, 100% {
    opacity: 0;
  }
}
@keyframes show-d1 {
  0% {
    opacity: 0;
  }
  2%, 8% {
    opacity: 1;
  }
  10%, 100% {
    opacity: 0;
  }
}
@keyframes show-d2 {
  0%, 10% {
    opacity: 0;
  }
  12%, 18% {
    opacity: 1;
  }
  20%, 100% {
    opacity: 0;
  }
}
@keyframes show-d3 {
  0%, 20% {
    opacity: 0;
  }
  22%, 28% {
    opacity: 1;
  }
  30%, 100% {
    opacity: 0;
  }
}
@keyframes show-d4 {
  0%, 30% {
    opacity: 0;
  }
  32%, 38% {
    opacity: 1;
  }
  40%, 100% {
    opacity: 0;
  }
}
@keyframes show-d5 {
  0%, 40% {
    opacity: 0;
  }
  42%, 48% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@keyframes show-d6 {
  0%, 50% {
    opacity: 0;
  }
  52%, 58% {
    opacity: 1;
  }
  60%, 100% {
    opacity: 0;
  }
}
@keyframes show-d7 {
  0%, 60% {
    opacity: 0;
  }
  62%, 68% {
    opacity: 1;
  }
  70%, 100% {
    opacity: 0;
  }
}
@keyframes show-d8 {
  0%, 70% {
    opacity: 0;
  }
  72%, 78% {
    opacity: 1;
  }
  80%, 100% {
    opacity: 0;
  }
}
@keyframes show-d9 {
  0%, 80% {
    opacity: 0;
  }
  82%, 88% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0;
  }
}
@keyframes show-d10 {
  0%, 90% {
    opacity: 0;
  }
  92%, 98% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes step-d1 {
  0%, 9% {
    background: #fff;
  }
  10%, 100% {
    background: #2c2f35;
  }
}
@keyframes step-d2 {
  0%, 9% {
    background: #2c2f35;
  }
  10%, 19% {
    background: #fff;
  }
  20%, 100% {
    background: #2c2f35;
  }
}
@keyframes step-d3 {
  0%, 19% {
    background: #2c2f35;
  }
  20%, 29% {
    background: #fff;
  }
  30%, 100% {
    background: #2c2f35;
  }
}
@keyframes step-d4 {
  0%, 29% {
    background: #2c2f35;
  }
  30%, 39% {
    background: #fff;
  }
  40%, 100% {
    background: #2c2f35;
  }
}
@keyframes step-d5 {
  0%, 39% {
    background: #2c2f35;
  }
  40%, 49% {
    background: #fff;
  }
  50%, 100% {
    background: #2c2f35;
  }
}
@keyframes step-d6 {
  0%, 49% {
    background: #2c2f35;
  }
  50%, 59% {
    background: #fff;
  }
  60%, 100% {
    background: #2c2f35;
  }
}
@keyframes step-d7 {
  0%, 59% {
    background: #2c2f35;
  }
  60%, 69% {
    background: #fff;
  }
  70%, 100% {
    background: #2c2f35;
  }
}
@keyframes step-d8 {
  0%, 69% {
    background: #2c2f35;
  }
  70%, 79% {
    background: #fff;
  }
  80%, 100% {
    background: #2c2f35;
  }
}
@keyframes step-d9 {
  0%, 79% {
    background: #2c2f35;
  }
  80%, 89% {
    background: #fff;
  }
  90%, 100% {
    background: #2c2f35;
  }
}
@keyframes step-d10 {
  0%, 89% {
    background: #2c2f35;
  }
  90%, 100% {
    background: #fff;
  }
}
/* The site's pages at phone and tablet widths: one column, a 16px gutter, no sideways scroll. The frame's own phone
   rules (the menu wrapping) sit beside SiteShell in the framework. The films keep their 16:9 stage and scale down with
   it (movie/stage); on a phone they stay legible at the card's size, so a page offers them full-width. */
@media (max-width: 900px) {
  :root {
    --site-gutter: 24px;
  }
  .site h1 {
    font-size: 44px;
  }
  .site h2 {
    font-size: 30px;
  }
  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 48px;
  }
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  :root {
    --site-gutter: 16px;
  }
  .site h1 {
    font-size: 36px;
  }
  .site h2 {
    font-size: 26px;
  }
  .grid-2, .grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .stat-value {
    font-size: 34px;
  }
  .strip-contact {
    margin: 0 var(--site-gutter) 48px;
    padding: 28px;
  }
  .turn-body {
    min-height: 0;
    font-size: 12px;
  }
}
/* The empty chat: the title and a line, above the message box. A theme can add to it, as retro's boot screen does. */
.empty {
  color: var(--bs-secondary-color);
  text-align: center;
}

.empty h1 {
  margin: 0 0 8px;
  font: 600 32px/1.2 var(--web-font-display, var(--bs-font-sans-serif));
  color: var(--bs-emphasis-color);
}

.boot {
  display: none;
}

.hint {
  color: var(--bs-secondary-color);
  animation: fade-in 0.5s 0.15s var(--web-ease) both;
}