/* ===========================================================================
   Conduit website — Night home (2026-10)
   Loaded on the home page only, after night-base.css (fonts, tokens, buttons,
   header). CSS-only, so every locale's home picks it up without a content
   change: the feature numbers and icons are generated here.
   =========================================================================== */

.feature-list svg {
  color: var(--a-accent-text);
}

/* --- Hero: centred, then the product shot over a band ---------------------- */

.hx {
  padding-block: 88px 104px;
}

/* No hue washes: the page has one accent. */
.hx::before,
.hx::after {
  display: none;
}

.hx__pill {
  border-color: var(--line);
  background: var(--card);
  color: var(--ink-2);
  box-shadow: none;
}

.hx__pill:hover {
  border-color: var(--line-hi);
  color: var(--ink);
}

.hx__pill-tag,
:root[data-theme="dark"] .hx__pill-tag {
  background: var(--a-soft);
  color: var(--a-accent-text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hx__pill-tag {
    background: var(--a-soft);
    color: var(--a-accent-text);
  }
}

.hx__title,
.hx__title--long {
  margin-top: 26px;
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.hx__title em,
.hx__rotate {
  color: var(--a-accent-text);
}

.hx__sub {
  max-width: 660px;
  margin-top: 24px;
  color: var(--ink-2);
  font-size: 19px;
  line-height: 1.6;
}

.hx__cta {
  margin-top: 32px;
}

.hx .ticks {
  color: var(--ink-3);
}

.hx .ticks li::before {
  background: var(--ok);
}

.hx__note {
  color: var(--ink-3);
}

/* The dashboard sits in a white frame; a band starts behind its middle and
   runs to the end of the section. */
.hx .stage {
  position: relative;
  max-width: 1248px;
  margin-top: 64px;
}

.hx .stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 40%;
  bottom: -104px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--a-band);
}

.hx .stage .shot {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--a-frame);
  box-shadow: var(--a-shadow);
}

.shot-bar {
  display: none;
}

.hx .stage .shot-body,
.hx .stage img {
  border: 0;
  border-radius: 9px;
}

@media (max-width: 860px) {
  .hx {
    padding-block: 56px 64px;
  }
  .hx .stage {
    margin-top: 44px;
  }
  .hx .stage::before {
    bottom: -64px;
  }
  .hx .stage .shot {
    padding: 6px;
    border-radius: 12px;
  }
}

/* --- Sections -------------------------------------------------------------- */

.sec--tint {
  background: var(--bg);
  border-block: 0;
}

.sec-head h2,
.section-head h2 {
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* "What you can do with it": left-aligned, like a chapter heading. */
#features {
  padding-top: 104px;
}

#features .sec-head--center {
  max-width: none;
  margin-inline: 0;
  text-align: left;
}

#features .sec-head h2 {
  margin-top: 10px;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
}

/* --- Feature tour ------------------------------------------------------------
   Agents and Workflows are full-width rows, copy beside the shot, alternating
   sides; the six after them are cards, two to a row. Each feature opens with
   its number, a rule and an icon, all drawn here:
     .tour__copy::before       the number (gradient text) and the rule
     .tour__name::before       the icon's tinted tile
     .tour__copy::after        the icon (a mask, so it takes the accent)    */

.tour--stacked {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  counter-reset: feature;
}

.tour--stacked .tour__panel,
.tour--stacked .tour__panel.tour__panel--wide,
.tour--stacked .tour__panel + .tour__panel {
  counter-increment: feature;
  margin-top: 0;
}

.tour--stacked .tour__panel.tour__panel--wide .tour__copy {
  position: relative;
  display: block;
}

.tour__copy::before {
  content: counter(feature, decimal-leading-zero);
  display: block;
  /* Room on the right for the icon tile; a little more on the far side of
     the last digit and below it, so the gradient-filled glyphs aren't cut. */
  padding: 0 calc(46px + 16px) 0.04em 0;
  font-size: 56px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  line-height: 0.95;
  background:
    var(--a-num),
    linear-gradient(var(--line), var(--line));
  background-repeat: no-repeat;
  background-size:
    1.3em 100%,
    calc(100% - 1.3em - 46px - 32px) 1px;
  background-position:
    0 0,
    calc(1.3em + 16px) 50%;
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box;
  color: transparent;
}

.tour__copy .tour__name::before,
.tour__copy::after {
  content: "";
  position: absolute;
  top: calc((56px * 0.95 - 46px) / 2);
  right: 0;
  width: 46px;
  height: 46px;
}

.tour__copy .tour__name::before {
  border-radius: 12px;
  background: var(--a-soft);
}

.tour__copy::after {
  background: var(--a-accent-text);
  -webkit-mask: var(--icon) center / 23px 23px no-repeat;
  mask: var(--icon) center / 23px 23px no-repeat;
}

#panel-agents { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4M9 4h6M6 8h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2ZM9 13v2M15 13v2'/%3E%3C/svg%3E"); }
#panel-workflows { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM18 9a9 9 0 0 1-9 9'/%3E%3C/svg%3E"); }
#panel-research { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM21 21l-4.3-4.3'/%3E%3C/svg%3E"); }
#panel-writing { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }
#panel-slides { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h20M3 3v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3M12 16v5M8 21h8'/%3E%3C/svg%3E"); }
#panel-apps { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3h6v7H4ZM14 3h6v7h-6ZM14 14h6v7h-6ZM4 14h6v7H4Z'/%3E%3C/svg%3E"); }
#panel-connectors { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5M9 8V2M15 8V2M18 8v5a6 6 0 0 1-12 0V8Z'/%3E%3C/svg%3E"); }
#panel-whitelabel { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4ZM7.5 8.5h.01'/%3E%3C/svg%3E"); }

/* The name is the heading, the benefit the line under it, the detail quieter. */
.tour__copy .tour__name {
  margin: 22px 0 0;
  color: var(--ink);
  font-size: clamp(34px, 3.2vw, 42px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.tour__copy > .tour__lede {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.tour__copy > p:not(.tour__lede) {
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 15.5px;
  line-height: 1.6;
}

.tour__copy > .feature-list {
  margin-top: 16px;
  gap: 8px;
  color: var(--ink-2);
  font-size: 14.5px;
}

.tour__copy .link-arrow {
  display: inline-block;
  margin-top: 16px;
  font-weight: 600;
}

/* The six cards. */
.tour--stacked .tour__panel.tour__panel--wide {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 32px 32px 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--a-shadow-xs);
}

.tour--stacked .tour__panel--wide > .shot,
.tour--stacked .tour__panel--wide > .tour__media {
  margin-top: auto;
  padding-top: 26px;
}

/* The cards centre their items, which would shrink a shot to its content:
   before its image loads that is nothing, so the card grew by the whole shot
   on load and in-page links (#get) landed short. Span the card instead. */
.tour--stacked .tour__panel--wide:nth-child(n + 3) > .shot,
.tour--stacked .tour__panel--wide:nth-child(n + 3) > .tour__media {
  align-self: stretch;
}

.tour--stacked .tour__panel--wide > .tour__media > .shot,
.tour--stacked .tour__panel--wide > .shot {
  border: 0;
  background: none;
  box-shadow: none;
}

.tour--stacked .tour__panel--wide .shot-zoom {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--a-tray);
}

.tour__panel .shot .shot-body,
.tour__panel .shot img {
  border: 0;
  border-radius: 8px;
}

/* The first two: full-width rows, no card, the shot in a white frame. */
.tour--stacked .tour__panel.tour__panel--wide:nth-child(-n + 2) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px 56px;
  align-items: center;
  padding: 40px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.tour--stacked .tour__panel.tour__panel--wide:nth-child(2) {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.tour--stacked .tour__panel.tour__panel--wide:nth-child(2) .tour__copy {
  order: 2;
}

.tour--stacked .tour__panel--wide:nth-child(-n + 2) > .shot {
  margin: 0;
  padding: 0;
}

.tour--stacked .tour__panel--wide:nth-child(-n + 2) .shot-zoom {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--a-frame);
  box-shadow: var(--a-shadow-sm);
}

.tour--stacked .tour__panel--wide:nth-child(-n + 2) .tour__copy::before {
  font-size: clamp(56px, 6vw, 80px);
  background-size:
    1.3em 100%,
    calc(100% - 1.3em - 52px - 32px) 1px;
}

.tour--stacked .tour__panel--wide:nth-child(-n + 2) .tour__copy::before {
  padding-right: calc(52px + 18px);
}

.tour--stacked .tour__panel--wide:nth-child(-n + 2) .tour__name::before,
.tour--stacked .tour__panel--wide:nth-child(-n + 2) .tour__copy::after {
  top: calc((clamp(56px, 6vw, 80px) * 0.95 - 52px) / 2);
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

.tour--stacked .tour__panel--wide:nth-child(-n + 2) .tour__copy::after {
  -webkit-mask-size: 26px 26px;
  mask-size: 26px 26px;
}

.tour--stacked .tour__panel--wide:nth-child(-n + 2) .tour__name {
  font-size: clamp(40px, 4.4vw, 56px);
}

.tour--stacked .tour__panel--wide:nth-child(-n + 2) .tour__lede {
  margin-top: 14px;
  font-size: clamp(19px, 1.7vw, 22px);
}

.tour--stacked .tour__panel--wide:nth-child(-n + 2) .tour__copy > p:not(.tour__lede) {
  font-size: 16.5px;
}

.tour--stacked .tour__panel--wide:nth-child(-n + 2) .feature-list {
  font-size: 15px;
}

@media (max-width: 860px) {
  .tour--stacked {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .tour--stacked .tour__panel.tour__panel--wide {
    padding: 24px 20px 20px;
    border-radius: 18px;
  }
  .tour--stacked .tour__panel.tour__panel--wide:nth-child(-n + 2),
  .tour--stacked .tour__panel.tour__panel--wide:nth-child(2) {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 24px 0;
  }
  .tour--stacked .tour__panel.tour__panel--wide:nth-child(2) .tour__copy {
    order: 0;
  }
  .tour--stacked .tour__panel--wide .shot-zoom,
  .tour--stacked .tour__panel--wide:nth-child(-n + 2) .shot-zoom {
    padding: 6px;
    border-radius: 12px;
  }
}

/* --- CTA, models, cost, download ------------------------------------------ */

.cta-band {
  margin-top: 88px;
}

#providers {
  background: var(--bg-side);
  border-block: 1px solid var(--line);
}

.provider-group,
.platform {
  border-color: var(--line);
  border-radius: 16px;
  background: var(--card);
}
#pricing {
  padding-top: 96px !important;
}

#get {
  background: var(--bg-side);
  border-block: 1px solid var(--line);
}

.platform {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.platform svg {
  margin: 0 0 12px;
}

.platform h3 {
  font-size: 18px;
}

.platform-dl__link {
  padding: 10px 12px;
  border-color: var(--line-hi);
  border-radius: 10px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  text-align: center;
}

.platform-dl__link:first-child {
  border-color: var(--a-accent);
  background: var(--a-accent);
  color: var(--a-on-accent);
}

.platform-dl__link:hover,
.platform-dl__link:focus-visible {
  border-color: var(--a-accent);
  background: var(--a-soft);
  color: var(--a-accent-text);
}

.platform-dl__link:first-child:hover,
.platform-dl__link:first-child:focus-visible {
  background: var(--a-accent);
  color: var(--a-on-accent);
  filter: brightness(1.08);
}


/* --- Live hero (hero-live.js): the app's areas, animated in a mock window.
   Scoped under .fh; the window is always the app's light theme, so its
   colours are fixed on purpose. --------------------------------------- */

.fh .picker { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.fh .picker button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; }
.fh .picker button:hover { color: var(--ink); border-color: var(--line-hi); }
.fh .picker button:focus-visible { outline: 2px solid var(--a-accent-text); outline-offset: 2px; }
.fh .picker button[aria-pressed="true"] { color: var(--ink); border-color: var(--a-accent-text); background: var(--a-soft); }
.fh .picker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.fh .progress { position: relative; z-index: 1; width: min(320px, 100%); height: 3px; margin: 14px auto 0; border-radius: 2px; background: var(--line); overflow: hidden; }
.fh .progress span { display: block; height: 100%; background: var(--a-accent-text); transform-origin: left; transform: scaleX(0); }

.fh .win {
  position: relative; z-index: 1; display: grid; grid-template-columns: 76px minmax(0, 1fr);
  height: 620px; padding: 10px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px; background: #ffffff; box-shadow: var(--a-shadow);
  color: #16181d; font-family: var(--font-ui); font-size: 12.5px; line-height: 1.45; text-align: left;
}
.fh .win > * { min-width: 0; }
.fh .rail { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0; border-radius: 9px 0 0 9px; background: #1e2052; color: #c9cbf2; }
.fh .rail .logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #2c2f73; }
.fh .rail .rl-brand { margin: 2px 0 4px; color: #fff; font-size: 11px; font-weight: 700; }
.fh .rail .it { position: relative; display: grid; justify-items: center; gap: 1px; width: 64px; padding: 3px 0; font-size: 9.5px; line-height: 1.3; }
.fh .rail .it .ic { display: grid; place-items: center; width: 34px; height: 22px; border-radius: 7px; transition: background 0.35s, color 0.35s; }
.fh .rail .it.on { color: #fff; font-weight: 600; }
.fh .rail .it.on .ic { background: #4b4ded; }
.fh .rail .it.ping .ic::after { content: ""; position: absolute; top: 3px; right: 15px; width: 8px; height: 8px; border-radius: 50%; background: #5ce0a0; box-shadow: 0 0 0 0 rgba(92, 224, 160, 0.7); animation: fh-ping 1.2s ease-out 2; }
.fh .rail .sep { width: 40px; height: 1px; margin: 2px 0; background: rgba(201, 203, 242, 0.18); }
.fh .rail .gap { flex: 1; }
@keyframes fh-ping { to { box-shadow: 0 0 0 10px rgba(92, 224, 160, 0); } }

.fh .main { position: relative; overflow: hidden; border-radius: 0 9px 9px 0; background: #f6f6f8; }
.fh .sc { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr); animation: fh-scin 0.45s ease both; }
.fh .sc.out { animation: fh-scout 0.32s ease both; }
@keyframes fh-scin { from { opacity: 0; } }
@keyframes fh-scout { to { opacity: 0; } }

/* Reveal: hidden until .on, then rises in. */
.fh .rv:not(.on) { display: none !important; }
.fh .rv.on { animation: fh-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes fh-rise { from { opacity: 0; transform: translateY(8px); } }
.fh .fade { opacity: 0; transition: opacity 0.45s ease; }
.fh .fade.on { opacity: 1; }
.fh .still *, .fh .still *::before, .fh .still *::after { animation-duration: 0s !important; transition-duration: 0s !important; }

.fh .cursor { position: absolute; z-index: 30; left: 70%; top: 70%; width: 20px; height: 20px; pointer-events: none; opacity: 0; transition: left 0.7s cubic-bezier(0.45, 0, 0.2, 1), top 0.7s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.3s; }
.fh .cursor.on { opacity: 1; }
.fh .cursor svg { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); }
.fh .cursor::after { content: ""; position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #4b4ded; opacity: 0; }
.fh .cursor.click::after { animation: fh-ring 0.5s ease-out; }
@keyframes fh-ring { 0% { opacity: 1; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2); } }
.fh .pressed { transform: scale(0.94); filter: brightness(0.95); }

/* Shared chat parts */
.fh .col { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid #e1e3ea; background: #f6f6f8; }
.fh .col-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; overflow: hidden; border-bottom: 1px solid #eceef3; color: #5f6573; white-space: nowrap; }
.fh .col-top span { overflow: hidden; color: #3a3f4a; text-overflow: ellipsis; }
.fh .msgs { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 0; padding: 14px 12px; overflow: hidden; }
.fh .msgs > * { flex: none; }
.fh .bubble { align-self: flex-end; max-width: 90%; padding: 9px 12px; border: 1px solid #e1e3ea; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(22, 24, 29, 0.04); }
.fh .think { display: flex; align-items: center; gap: 6px; color: #5f6573; font-size: 11.5px; }
.fh .tool { display: flex; align-items: center; gap: 8px; padding: 7px 10px; overflow: hidden; border: 1px solid #e1e3ea; border-radius: 9px; background: #fff; color: #3a3f4a; font-family: var(--font-mono); font-size: 10.5px; white-space: nowrap; }
.fh .tool b { color: #16181d; font-weight: 600; }
.fh .ok { color: #12804a; }
.fh .tool .t { margin-left: auto; color: #8990a2; }
.fh .fcard { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #e1e3ea; border-radius: 10px; background: #fff; }
.fh .fcard .fi { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #e1e3ea; border-radius: 7px; color: #5f6573; }
.fh .fcard b { display: block; font-weight: 600; }
.fh .fcard small { color: #5f6573; font-size: 11px; }
.fh .fcard .btn-ghost { margin-left: auto; }
.fh .reply { color: #2b2f38; }
.fh .reply strong { font-weight: 600; }
.fh .composer { display: grid; gap: 10px; margin: 0 10px 10px; padding: 10px 12px; border: 1px solid #e1e3ea; border-radius: 12px; background: #fff; color: #8990a2; }
.fh .composer .row { display: flex; align-items: center; gap: 8px; color: #3a3f4a; font-family: var(--font-mono); font-size: 10.5px; }
.fh .composer .row .dot { color: #4b4ded; }
.fh .composer .send { display: grid; place-items: center; width: 22px; height: 22px; margin-left: auto; border-radius: 6px; background: #eef0ff; color: #4b4ded; }
.fh .btn-ghost, .fh .btn-pri { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid #e1e3ea; border-radius: 8px; background: #fff; color: #16181d; font-size: 12px; white-space: nowrap; transition: transform 0.15s; }
.fh .btn-pri { border-color: #4b4ded; background: #4b4ded; color: #fff; font-weight: 600; }
.fh .pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; }
.fh .tabs { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-bottom: 1px solid #eceef3; color: #5f6573; }
.fh .tabs .on { padding: 2px 8px; border: 1px solid #e1e3ea; border-radius: 6px; background: #fff; color: #16181d; }
.fh .tabs .x { margin-left: auto; }
.fh .tabs .tb-badge { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-left: 4px; border-radius: 8px; background: #eef0ff; color: #2a2aa8; font-size: 10px; }
.fh .file { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.fh .file .name { overflow: hidden; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fh .file .kind { flex: none; color: #5f6573; font-family: var(--font-mono); font-size: 10px; white-space: nowrap; }
.fh .file .right { display: flex; flex: none; align-items: center; gap: 8px; margin-left: auto; }
.fh .seg { display: flex; overflow: hidden; border: 1px solid #e1e3ea; border-radius: 7px; font-size: 11px; }
.fh .seg span { padding: 2px 9px; }
.fh .seg span:first-child { background: #fff; font-weight: 600; }
.fh .seg span:last-child { background: #f1f2f5; color: #5f6573; }
.fh .foot { display: flex; justify-content: space-between; padding: 6px 12px; color: #5f6573; font-family: var(--font-mono); font-size: 10px; }

/* ---------- Chat: the LLM explainer ---------- */
.fh .sc-chat { grid-template-columns: 310px minmax(0, 1fr); }
.fh .sc-chat .cv { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #0c0f2a; }
.fh .sc-chat canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* ---------- Slides ---------- */
.fh .sc-slides { grid-template-columns: minmax(0, 1fr) 290px; }
.fh .deck { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 12px 14px 10px; }
.fh .deck-top { display: flex; align-items: center; gap: 8px; }
.fh .deck-top .ttl { margin-left: 6px; overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fh .deck-top .sp { flex: 1; }
.fh .dk-crumbs { margin: 8px 0 10px; color: #5f6573; }
.fh .dk-crumbs b { color: #16181d; }
.fh .dk-crumbs i { display: inline-block; width: 6px; height: 6px; margin: 0 4px 1px; border-radius: 50%; background: #4b4ded; }
.fh .deck-body { display: grid; flex: 1; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; min-height: 0; }
.fh .thumbs { display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.fh .th { position: relative; flex: none; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid transparent; border-radius: 6px; background: #141017; transition: border-color 0.3s; }
.fh .th.cur { border-color: #4b4ded; }
.fh .th .num { position: absolute; left: 3px; bottom: 2px; padding: 0 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.88); color: #16181d; font-size: 8.5px; font-weight: 700; }
.fh .mini { position: absolute; inset: 14% 10% 12% 12%; display: flex; flex-direction: column; gap: 7%; }
.fh .mini > i { display: block; height: 6%; min-height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.32); }
.fh .mini > i.t { height: 11%; background: rgba(255, 255, 255, 0.85); }
.fh .mini > i.e { width: 26%; height: 5%; background: #ff6a3d; }
.fh .w4 { width: 40%; } .fh .w5 { width: 50%; } .fh .w6 { width: 62%; } .fh .w7 { width: 72%; } .fh .w8 { width: 84%; }
.fh .ms { display: flex; flex: 1; gap: 10%; }
.fh .ms b { position: relative; flex: 1; border-top: 1px solid rgba(255, 255, 255, 0.3); }
.fh .ms b::before { content: ""; position: absolute; left: 0; top: 22%; width: 64%; height: 34%; border-radius: 1px; background: #ff6a3d; }
.fh .mc { display: flex; flex: 1; align-items: flex-end; gap: 7%; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.fh .mc b { flex: 1; height: var(--h); background: #6b5f5a; }
.fh .mc b.d { height: 10%; background: #ff6a3d; }
.fh .upd { opacity: 0; transition: opacity 0.4s; }
.fh .th.fresh .upd { opacity: 1; }
.fh .stagebox { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 14px; border: 1px solid #e1e3ea; border-radius: 12px; background: #fff; }
.fh .slide { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: radial-gradient(120% 95% at 100% 0%, #3d1c12 0%, #150d0f 52%, #0d0a0c 100%); color: #f3eee9; container-type: inline-size; }
.fh .face { position: absolute; inset: 0; padding: 7cqw 6.5cqw; opacity: 0; transition: opacity 0.5s; }
.fh .face.on { opacity: 1; }
.fh .face .eb { color: #ff7a45; font-family: var(--font-mono); font-size: 1.6cqw; font-weight: 600; letter-spacing: 0.16em; }
.fh .face h5 { margin: 1.6cqw 0 3.4cqw; font-size: 4.6cqw; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.fh .sl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5cqw; }
.fh .stat { padding-top: 2.6cqw; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.fh .stat .big { color: #ff6a3d; font-size: 9cqw; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.fh .stat p { margin-top: 1.6cqw; color: #b9b0aa; font-size: 2cqw; line-height: 1.35; }
.fh .stat.hid { opacity: 0; transform: translateX(3cqw); transition: opacity 0.55s, transform 0.55s; }
.fh .stat.hid.on { opacity: 1; transform: none; }
.fh .face .sl-fine { position: absolute; left: 6.5cqw; bottom: 4.5cqw; color: #8c827c; font-family: var(--font-mono); font-size: 1.3cqw; }
.fh .chart { display: flex; align-items: flex-end; gap: 6cqw; height: 22cqw; padding: 0 3cqw; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.fh .grp { display: flex; flex: 1; align-items: flex-end; gap: 1.2cqw; height: 100%; }
.fh .bar { position: relative; flex: 1; height: 0; border-radius: 0.6cqw 0.6cqw 0 0; transition: height 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.fh .bar.full { background: #6b5f5a; }
.fh .bar.delta { background: #ff6a3d; transition-delay: 0.25s; }
.fh .bars-on .bar { height: var(--h); }
.fh .bar::after { content: attr(data-v); position: absolute; bottom: 100%; left: 50%; padding-bottom: 0.6cqw; color: #e8dcd4; font-family: var(--font-mono); font-size: 1.45cqw; white-space: nowrap; opacity: 0; transform: translateX(-50%); transition: opacity 0.4s 0.8s; }
.fh .bars-on .bar::after { opacity: 1; }
.fh .xl { display: flex; gap: 6cqw; padding: 1.3cqw 3cqw 0; color: #b9b0aa; font-size: 1.8cqw; }
.fh .xl span { flex: 1; text-align: center; }
.fh .legend { display: flex; gap: 3cqw; margin-top: 2cqw; color: #b9b0aa; font-size: 1.6cqw; }
.fh .legend i { display: inline-block; width: 1.4cqw; height: 1.4cqw; margin-right: 0.8cqw; border-radius: 0.3cqw; vertical-align: -0.1cqw; }
.fh .pager { margin-top: 10px; color: #3a3f4a; text-align: center; }
.fh .ask { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid #e1e3ea; background: #fff; }
.fh .ask-tabs { display: flex; gap: 18px; padding: 10px 14px 0; border-bottom: 1px solid #eceef3; color: #5f6573; }
.fh .ask-tabs span { padding-bottom: 8px; }
.fh .ask-tabs .on { border-bottom: 2px solid #16181d; color: #16181d; font-weight: 600; }
.fh .ask .msgs { background: #fff; }
.fh .asst { padding-left: 10px; border-left: 2px solid #c9cbf2; color: #2b2f38; }
.fh .asst ul { margin: 0; padding: 0; list-style: none; color: #5f6573; font-family: var(--font-mono); font-size: 10.5px; }
.fh .asst li { margin-bottom: 3px; }
.fh .asst li::before { content: "✓ "; color: #12804a; }
.fh .chipdone { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 2px 8px; border: 1px solid #e1e3ea; border-radius: 8px; color: #12804a; font-size: 11.5px; }
.fh .presenter { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; background: #050405; opacity: 0; pointer-events: none; transition: opacity 0.5s; }
.fh .presenter.on { opacity: 1; }
.fh .presenter .slide { width: min(820px, 88cqw, calc((620px - 120px) * 16 / 9)); }
.fh .presenter .pbar { display: flex; gap: 18px; color: #8c827c; font-family: var(--font-mono); font-size: 11px; }
.fh .sc-slides { container-type: inline-size; }

/* ---------- Apps ---------- */
.fh .sc-apps { grid-template-columns: 300px minmax(0, 1fr); }
.fh .btn-save { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 1px solid #c9cbf2; border-radius: 7px; background: #eef0ff; color: #2a2aa8; font-size: 11px; font-weight: 600; transition: transform 0.15s; }
.fh .chip-sites { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 1px solid #e1e3ea; border-radius: 999px; color: #3a3f4a; font-size: 11px; }
.fh .app { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.fh .app-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid #eceef3; }
.fh .app-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #1b9e8f; color: #fff; }
.fh .app-head b { font-size: 14.5px; font-weight: 600; }
.fh .app-head .cnt { margin-left: auto; color: #5f6573; font-size: 11px; }
.fh .app-body { display: grid; flex: 1; grid-template-columns: 220px minmax(0, 1fr); min-height: 0; border-top: 1px solid #eceef3; }
.fh .plist { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; overflow: hidden; }
.fh .cat { display: flex; align-items: center; gap: 6px; margin: 8px 4px 3px; color: #5f6573; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; }
.fh .cat i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.fh .pl { padding: 5px 8px; border-left: 3px solid transparent; border-radius: 7px; transition: background 0.3s, border-color 0.3s; }
.fh .pl b { display: block; font-size: 12.5px; font-weight: 600; }
.fh .pl span { color: #5f6573; font-size: 10.5px; }
.fh .pl.act { border-left-color: var(--c); background: #f3f4f7; }
.fh .map { position: relative; overflow: hidden; background: #ece8e1; }
.fh .mapin { position: absolute; inset: 0; transition: transform 1.1s cubic-bezier(0.3, 0.7, 0.2, 1); }
.fh .mapin svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fh .pin { position: absolute; width: 22px; height: 28px; margin: -27px 0 0 -11px; opacity: 0; transform: translateY(-20px); transition: opacity 0.3s, transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
.fh .pin.on { opacity: 1; transform: none; }
.fh .pin.hot::after { content: ""; position: absolute; left: 3px; bottom: -6px; width: 16px; height: 8px; border-radius: 50%; border: 2px solid var(--c); animation: fh-halo 1.2s ease-out infinite; }
@keyframes fh-halo { from { opacity: 1; transform: scale(0.6); } to { opacity: 0; transform: scale(2.2); } }
.fh .popup { position: absolute; z-index: 2; width: 200px; padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2); opacity: 0; transform: translate(-50%, calc(-100% - 40px)) scale(0.92); transition: opacity 0.35s, transform 0.35s; }
.fh .popup.on { opacity: 1; transform: translate(-50%, calc(-100% - 40px)); }
.fh .popup .tag { padding: 1px 7px; border-radius: 999px; background: #d6455d; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; }
.fh .popup b { display: block; margin: 6px 0 2px; font-size: 13.5px; }
.fh .popup p { color: #3a3f4a; font-size: 11.5px; }
.fh .zoomctl { position: absolute; top: 10px; left: 10px; z-index: 2; display: grid; overflow: hidden; border: 1px solid #cfd2dc; border-radius: 6px; background: #fff; }
.fh .zoomctl span { display: grid; place-items: center; width: 24px; height: 24px; font-size: 15px; }
.fh .zoomctl span + span { border-top: 1px solid #e1e3ea; }
.fh .attrib { position: absolute; right: 0; bottom: 0; z-index: 2; padding: 1px 6px; background: rgba(255, 255, 255, 0.8); color: #5f6573; font-size: 9.5px; }
.fh .toast { position: absolute; right: 18px; bottom: 18px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: #16181d; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(10px); transition: opacity 0.35s, transform 0.35s; }
.fh .toast.on { opacity: 1; transform: none; }
.fh .toast .ok { color: #5ce0a0; }

/* ---------- Workflows ---------- */
.fh .sc-flow { display: flex; flex-direction: column; }
.fh .wf-head { display: flex; gap: 16px; padding: 14px 18px 10px; background: #fff; }
.fh .wf-head h4 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.fh .wf-head p { max-width: 560px; margin: 3px 0 9px; color: #3a3f4a; font-size: 13px; }
.fh .wf-chips { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin: 0; padding: 0; }
.fh .wf-chips span { padding: 2px 10px; border: 1px solid #e1e3ea; border-radius: 999px; color: #5f6573; font-size: 11.5px; }
.fh .wf-chips b { color: #16181d; font-weight: 500; }
.fh .wf-btns { display: flex; align-items: flex-start; gap: 8px; margin-left: auto; }
.fh .wf-tabs { display: flex; gap: 20px; padding: 0 18px; border-bottom: 1px solid #e1e3ea; background: #fff; color: #5f6573; }
.fh .wf-tabs span { padding: 6px 0 8px; }
.fh .wf-tabs .on { border-bottom: 2px solid #4b4ded; color: #16181d; font-weight: 600; }
.fh .wf-body { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) 290px; min-height: 0; }
.fh .canvas { position: relative; overflow: hidden; background-color: #f3f4f7; background-image: radial-gradient(#d3d6df 1px, transparent 1px); background-size: 16px 16px; }
.fh .canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fh .edge { fill: none; stroke: #c3c7d3; stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: stroke 0.3s; }
.fh .edge.flow { stroke: #4b4ded; stroke-dasharray: 5 5; animation: fh-dash 0.5s linear infinite; }
.fh .edge.done { stroke: #86c9a5; }
@keyframes fh-dash { to { stroke-dashoffset: -10; } }
.fh .node { position: absolute; width: 206px; padding: 7px 10px 8px; border: 1px solid #e1e3ea; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transform: translate(-50%, -50%); transition: border-color 0.3s, box-shadow 0.3s; }
.fh .node.start { border-style: dashed; background: #fafafb; }
.fh .node .nh { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600; }
.fh .node .st { display: inline-flex; align-items: center; gap: 5px; color: #8990a2; font-size: 10.5px; font-weight: 500; }
.fh .node p { margin-top: 3px; color: #3a3f4a; font-size: 11px; line-height: 1.35; }
.fh .node.n-run { border-color: #4b4ded; box-shadow: 0 0 0 3px rgba(75, 77, 237, 0.13); }
.fh .node.n-run .st { color: #4b4ded; }
.fh .node.n-run .st::before { content: ""; width: 9px; height: 9px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fh-spin 0.8s linear infinite; }
.fh .node.n-done { border-color: #a9dcbf; }
.fh .node.n-done .st { color: #12804a; }
.fh .node.n-ask { border-color: #e0a030; box-shadow: 0 0 0 3px rgba(224, 160, 48, 0.18); }
.fh .node.n-ask .st { color: #a35a00; }
@keyframes fh-spin { to { transform: rotate(360deg); } }
.fh .side { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 16px; overflow: hidden; border-left: 1px solid #e1e3ea; background: #fff; }
.fh .side h6 { margin: 0; font-size: 14px; font-weight: 700; }
.fh .pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: #f1f2f5; color: #5f6573; font-size: 11.5px; }
.fh .pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fh .pill.p-run { background: #eef0ff; color: #2a2aa8; }
.fh .pill.p-ask { background: #fff4e0; color: #a35a00; }
.fh .pill.p-done { background: #e6f6ec; color: #12804a; }
.fh .log { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; color: #3a3f4a; font-family: var(--font-mono); font-size: 10.5px; }
.fh .log li::before { content: "✓ "; color: #12804a; }
.fh .approve { padding: 10px 12px; border: 1px solid #f0c983; border-radius: 10px; background: #fffaf0; }
.fh .approve b { display: block; margin-bottom: 3px; }
.fh .approve p { color: #3a3f4a; font-size: 11.5px; }
.fh .approve .btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.fh .result b { display: block; margin-bottom: 4px; font-size: 13px; }
.fh .result p { color: #3a3f4a; font-size: 12px; line-height: 1.55; }
.fh .result .btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ---------- Research ---------- */
.fh .sc-research { grid-template-columns: 340px minmax(0, 1fr); }
.fh .rs { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid #e1e3ea; border-radius: 12px; background: #fff; }
.fh .rs-h { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.fh .rs-h span { margin-left: auto; color: #5f6573; font-family: var(--font-mono); font-size: 10px; font-weight: 400; }
.fh .stages { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.fh .stages li { display: flex; align-items: center; gap: 8px; color: #9aa0ae; font-size: 12px; }
.fh .stages li::before { content: ""; display: grid; flex: none; place-items: center; width: 13px; height: 13px; border: 1.5px solid #c9ccd6; border-radius: 50%; color: #fff; font-size: 8px; font-weight: 700; line-height: 1; }
.fh .stages li.doing { color: #16181d; font-weight: 500; }
.fh .stages li.doing::before { border-color: #4b4ded; border-right-color: transparent; animation: fh-spin 0.8s linear infinite; }
.fh .stages li.done { color: #3a3f4a; }
.fh .stages li.done::before { content: "✓"; border-color: #12804a; background: #12804a; }
.fh .stages em { color: #5f6573; font-family: var(--font-mono); font-size: 10.5px; font-style: normal; }
.fh .qchips { display: flex; flex-wrap: wrap; gap: 5px; }
.fh .qchip { padding: 2px 7px; border-radius: 6px; background: #f1f2f5; color: #3a3f4a; font-family: var(--font-mono); font-size: 10px; }
.fh .srcs { display: grid; }
.fh .src { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 4px 0; border-top: 1px solid #f0f1f4; }
.fh .src .n { color: #5f6573; font-family: var(--font-mono); font-size: 10.5px; }
.fh .src b { display: block; overflow: hidden; font-size: 11.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.fh .src u { color: #4b4ded; font-family: var(--font-mono); font-size: 10px; text-decoration: none; }
.fh .src .rst { color: #8990a2; font-size: 10.5px; white-space: nowrap; }
.fh .src.read .rst { color: #3a3f4a; }
.fh .cred { margin-left: 5px; padding: 0 6px; border-radius: 999px; font-size: 9.5px; }
.fh .cred.hi { background: #e6f6ec; color: #12804a; }
.fh .cred.md { background: #fff4e0; color: #a35a00; }
.fh .rs-btns { display: flex; gap: 8px; }
.fh .rep { flex: 1; min-height: 0; padding: 20px 28px; overflow: hidden; }
.fh .rep h3 { font-size: 23px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.fh .rep .meta { margin: 10px 0 14px; color: #3a3f4a; font-size: 12.5px; font-style: italic; }
.fh .rep h4 { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.fh .rep p { color: #2b2f38; font-size: 13.5px; line-height: 1.65; }
.fh .sent { opacity: 0; transition: opacity 0.6s; }
.fh .sent.on { opacity: 1; }
.fh .cite { margin-left: 2px; padding: 0 3px; border-radius: 4px; background: #eef0ff; color: #2a2aa8; font-family: var(--font-mono); font-size: 10.5px; }
.fh .rep .left { margin-top: 12px; color: #5f6573; font-size: 12px; }

@media (max-width: 1100px) {
  .fh .sc-chat, .fh .sc-apps { grid-template-columns: 260px minmax(0, 1fr); }
  .fh .sc-research { grid-template-columns: 300px minmax(0, 1fr); }
  .fh .sc-slides { grid-template-columns: minmax(0, 1fr) 250px; }
  .fh .app-body { grid-template-columns: 190px minmax(0, 1fr); }
  .fh .wf-body { grid-template-columns: minmax(0, 1fr) 250px; }
  .fh .node { width: 180px; }
}
@media (max-width: 760px) {
  .fh .win { grid-template-columns: minmax(0, 1fr); height: 470px; padding: 6px; border-radius: 12px; }
  .fh .rail { display: none; }
  .fh .main { border-radius: 8px; }
  .fh .sc-chat, .fh .sc-apps, .fh .sc-research, .fh .sc-slides { grid-template-columns: minmax(0, 1fr); }
  /* Chat, Apps and Research: the conversation first, then the result once
     the scene adds .swapped, so the prompt is seen before what it built. */
  .fh .sc-chat .pane, .fh .sc-apps .pane, .fh .sc-research .pane, .fh .sc.swapped .col { display: none; }
  .fh .sc.swapped .pane { display: flex; animation: fh-scin 0.45s ease both; }
  /* Slides goes back and forth: each request, then the slide it changes. */
  .fh .sc-slides:not(.swapped) .deck, .fh .sc-slides.swapped .ask { display: none; }
  .fh .sc-slides:not(.swapped) .ask, .fh .sc-slides.swapped .deck { animation: fh-scin 0.45s ease both; }
  .fh .sc-slides .ask { border-left: 0; }
  .fh .thumbs, .fh .deck-top .btn-ghost, .fh .deck-top .sel, .fh .wf-head p, .fh .side, .fh .app-body .plist, .fh .wf-chips span:nth-child(n + 2) { display: none; }
  .fh .deck-body, .fh .wf-body, .fh .app-body { grid-template-columns: minmax(0, 1fr); }
  .fh .node { width: 46%; padding: 6px 8px; }
  .fh .node p { display: none; }
  /* Keep the file name readable: the toggle and the sites chip don't fit beside it. */
  .fh .file .seg, .fh .file .chip-sites { display: none; }
}