.ff { --ink: #0A1428; --bone: #F4F1EA; --ember: #E85D2F; --amber: #F5B14A; --muted: #A6C4C9;
    --slate: #33566B; --line: rgba(244,241,234,.16);
    color: var(--bone); font-family: Inter, system-ui, sans-serif; position: relative; }
  .ff *, .ff *::before, .ff *::after { box-sizing: border-box; }
  .ff-bar { display: flex; gap: 12px 20px; align-items: center; justify-content: space-between;
    flex-wrap: wrap; margin: 0 0 10px; }
  .ff-intro { min-width: 0; flex: 1 1 320px; }
  .ff-title { font-weight: 600; font-size: 24px; line-height: 1.2; font-family: Fraunces, Georgia, serif; margin: 0; text-wrap: balance; }
  .ff-hint { margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
  .ff-controls { display: flex; gap: 8px; flex-wrap: wrap; }
  .ff-pill { font-weight: 600; font-size: 14px; line-height: 1; font-family: Inter, system-ui, sans-serif; border: 0; border-radius: 999px; padding: 0 18px;
    min-height: 44px; cursor: pointer; }
  .ff-primary { background: var(--ember); color: var(--ink); }
  .ff-ghost { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1.5px var(--ember); }
  .ff-pill:focus-visible, .ff-step:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
  .ff-tourbar { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: 0 0 10px; }
  .ff-tourbar[hidden] { display: none; }
  .ff-step { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent;
    color: var(--bone); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 22px; line-height: 1;
    cursor: pointer; flex: none; }
  .ff-step:disabled { opacity: .35; cursor: default; }
  .ff-stop { margin: 0; flex: 1 1 240px; min-width: 0; }
  .ff-narrow .ff-stop { order: -1; flex-basis: 100%; }
  .ff-stop b { font-weight: 600; font-size: 19px; line-height: 1.2; font-family: Fraunces, Georgia, serif; }
  .ff-stop .ff-count { color: var(--muted); font-weight: 600; font-size: 12px; line-height: 1; font-family: 'JetBrains Mono', Menlo, monospace; letter-spacing: .06em;
    text-transform: uppercase; margin-left: 8px; }
  .ff-stop .ff-cap { display: block; color: var(--muted); font-size: 15px; margin-top: 3px; }
  .ff-figure { margin: 0; }
  .ff-viewport { position: relative; overflow: hidden; border-radius: 8px; background: var(--ink);
    touch-action: manipulation; }
  @media (max-width: 699px) {
    .ff-viewport { aspect-ratio: 1 / 1; }
    .ff:not(.ff-live) .ff-viewport { display: flex; flex-direction: column; justify-content: center; }
  }
  .ff-camera { transform-origin: 0 0; }
  .ff-camera.ff-glide { transition: transform .65s cubic-bezier(.2,.7,.2,1); }
  .ff-canvas { position: relative; }
  .ff-canvas svg { display: block; width: 100%; height: auto; }
  .ff-poster, .ff-poster img { display: block; width: 100%; height: auto; }
  .ff-canvas svg.ff-main { position: relative; z-index: 1; }
  .ff-canvas svg.ff-underlay, .ff-canvas svg.ff-overlay { position: absolute; inset: 0; height: 100%; }
  .ff-canvas svg.ff-underlay { z-index: 0; }
  .ff-canvas svg.ff-overlay { z-index: 2; pointer-events: none; }
  .ff path[color] { fill: currentColor; stroke: currentColor; }
  .ff-hit { position: absolute; z-index: 3; background: transparent; border: 0; padding: 0; margin: 0;
    border-radius: 40%; cursor: pointer; min-width: 28px; min-height: 28px;
    transform: translate(-50%, -50%); }
  .ff-hit[hidden] { display: none; }
  .ff-hit:focus-visible { outline: 2px solid var(--ink); box-shadow: 0 0 0 4px var(--amber); }
  .ff-narrow .ff-hit { pointer-events: none; }
  .ff-bubble { position: absolute; z-index: 6; width: min(320px, 80%); background: var(--bone);
    color: var(--ink); border-radius: 14px; padding: 12px 40px 13px 14px; left: 0; top: 0;
    box-shadow: 0 12px 30px rgba(0,0,0,.5); font-size: 15px; line-height: 1.45; pointer-events: none; }
  .ff-bubble::after { content: ""; position: absolute; left: clamp(16px, var(--tail, 50%), calc(100% - 16px));
    bottom: -9px; margin-left: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: var(--bone); }
  .ff-bubble.ff-below::after { top: -9px; bottom: auto; border: 9px solid transparent;
    border-top: 0; border-bottom-color: var(--bone); }
  .ff-who { font-weight: 700; font-size: 15px; margin: 0 0 6px; }
  .ff-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
  .ff-chip { font-weight: 700; font-size: 11px; line-height: 1; font-family: 'JetBrains Mono', Menlo, monospace; letter-spacing: .05em; text-transform: uppercase;
    padding: 5px 8px; border-radius: 999px; color: var(--ink); }
  .ff-chip.ff-exp { background: transparent; box-shadow: inset 0 0 0 1px rgba(10,20,40,.25);
    display: inline-flex; align-items: center; gap: 6px; }
  .ff-chip.ff-exp i { width: 9px; height: 9px; border-radius: 2px; background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(10,20,40,.3); }
  .ff-says { margin: 0; min-height: 3em; }
  .ff-close { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border: 0;
    border-radius: 50%; background: transparent; color: var(--slate); font-size: 22px; line-height: 1;
    cursor: pointer; pointer-events: auto; }
  .ff-close:focus-visible { outline: 2px solid var(--slate); }
  .ff-card { display: none; position: relative; margin-top: 10px; background: var(--bone); color: var(--ink);
    border-radius: 12px; padding: 12px 44px 12px 14px; min-height: 120px; font-size: 15px; line-height: 1.45; }
  .ff-narrow .ff-card { display: block; }
  .ff-card .ff-empty { color: #5A6678; margin: 0; }
  .ff-caption { margin-top: 16px; color: var(--muted); font-size: 14px; line-height: 1.5; }
  .ff-key { display: grid; gap: 10px; }
  .ff-key-title { margin: 0; font-weight: 700; font-size: 12px; line-height: 1; font-family: 'JetBrains Mono', Menlo, monospace; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ember); }
  .ff-key-models { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
  .ff-key-models li { display: flex; align-items: center; gap: 8px; color: var(--bone); }
  .ff-ico { width: 28px; height: 30px; flex: none; object-fit: contain; }
  .ff-key-row { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .ff-key-row .ff-ico { width: 64px; height: 26px; }
  .ff-key-label { color: var(--bone); }
  .ff-sw-item { white-space: nowrap; }
  .ff-sw { width: 12px; height: 12px; border-radius: 3px; background: var(--c); display: inline-block;
    margin-left: 6px; box-shadow: inset 0 0 0 1px rgba(244,241,234,.25); }
  .ff-c-direction { --c: #E85D2F; }
  .ff-c-evidence { --c: #57A78F; }
  .ff-c-commercial { --c: #F5B14A; }
  .ff-c-technical { --c: #5E93D2; }
  .ff-c-finance { --c: #F4F1EA; }
  .ff-c-legal { --c: #33566B; }
  .ff-c-quality { --c: #AC8CE4; }
  .ff-c-production { --c: #D8C4A8; }
  .ff-c-learning { --c: #8A5A3B; }
  .ff-cast { margin-top: 14px; border-top: 1px solid var(--line); }
  .ff-cast summary { cursor: pointer; color: var(--bone); font-weight: 600; min-height: 44px;
    display: flex; align-items: center; }
  .ff-cast summary:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
  .ff-cast-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 28px;
    padding-bottom: 8px; }
  .ff-cast h3 { font-weight: 600; font-size: 17px; line-height: 1.3; font-family: Fraunces, Georgia, serif; color: var(--bone); margin: 12px 0 6px; }
  .ff-cast ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .ff-cast li b { color: var(--bone); font-weight: 600; }
  .ff-cast .ff-meta { font-weight: 600; font-size: 11px; line-height: 1; font-family: 'JetBrains Mono', Menlo, monospace; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted); }
  .ff-cast .ff-says { display: block; min-height: 0; color: var(--muted); }
  .ff-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* motion */
  @keyframes ff-hop { 0%, 100% { transform: none; } 35% { transform: translateY(-9px); }
    60% { transform: translateY(1px); } }
  @keyframes ff-glow { from { opacity: .8; } to { opacity: 1; } }
  @keyframes ff-flicker { 0%, 100% { opacity: 1; } 45% { opacity: .72; } 70% { opacity: .92; } }
  @keyframes ff-scan { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
  .ff-hop { animation: ff-hop .55s ease-out 1; }
  .ff [data-entity="crucible"][data-part="melt"] { animation: ff-glow 2.2s ease-in-out infinite alternate; }
  .ff [data-entity="ladle"][data-part="stream"] { animation: ff-flicker .9s linear infinite; }
  .ff [data-entity="ladle"][data-part="sparks"] { animation: ff-flicker .6s steps(2) infinite; }
  .ff [data-entity="checker-scan"] { animation: ff-scan 1.8s ease-in-out infinite; }
  .ff.ff-paused [data-entity="crucible"][data-part="melt"], .ff.ff-paused [data-entity="ladle"][data-part="stream"],
  .ff.ff-paused [data-entity="ladle"][data-part="sparks"], .ff.ff-paused [data-entity="checker-scan"] { animation-play-state: paused; }
  /* the magnifier, desktop only */
  .ff-lens-btn[hidden] { display: none; }
  .ff-loupe { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; --r: 120px; }
  .ff-loupe[hidden] { display: none; }
  .ff-lens { position: absolute; left: calc(-1 * var(--r)); top: calc(-1 * var(--r));
    width: calc(2 * var(--r)); height: calc(2 * var(--r)); border-radius: 50%; overflow: hidden;
    background: var(--ink); pointer-events: auto; cursor: grab; touch-action: none;
    box-shadow: 0 0 0 3px var(--bone), 0 0 0 7px rgba(10,20,40,.6), 0 18px 36px rgba(0,0,0,.55); }
  .ff-lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.16), transparent 42%);
    box-shadow: inset 0 0 20px rgba(0,0,0,.45); }
  .ff-lens.ff-dragging { cursor: grabbing; }
  .ff-lens.ff-on-agent { cursor: pointer; }
  .ff-lens:focus-visible { outline: 3px solid var(--amber); outline-offset: 8px; }
  .ff-lens-ctl { position: absolute; width: 34px; height: 34px; border: 0; border-radius: 50%;
    display: grid; place-items: center; padding: 0; cursor: pointer; pointer-events: auto;
    background: var(--ink); color: var(--bone); box-shadow: 0 0 0 2px var(--bone), 0 6px 14px rgba(0,0,0,.45); }
  .ff-lens-ctl:hover { background: var(--ember); color: var(--ink); }
  .ff-lens-ctl:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
  .ff-lens-ctl svg { width: 14px; height: 14px; display: block; }
  .ff-lens-pause { left: calc(var(--r) * .906 - 17px); top: calc(var(--r) * .423 - 17px); }
  .ff-lens-hide { left: calc(var(--r) * .454 - 17px); top: calc(var(--r) * .891 - 17px); }
  .ff-lens-view { position: absolute; left: 0; top: 0; pointer-events: none; }
  .ff-lens-view svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }

  /* On the website the floor sits on the ink band of "What it does", wider than the reading
     column on desktop, and edge to edge on a phone. */
  .ff { --ffw: min(1200px, calc(100vw - 48px)); background: var(--ink); margin: 36px 0 12px; line-height: 1.5; }
  @media (min-width: 1000px) { .ff { width: var(--ffw); margin-inline: calc((100% - var(--ffw)) / 2); } }
  @media (max-width: 699px) { .ff-viewport { margin-inline: max(-24px, calc(50% - 50vw)); border-radius: 0; } }
  .ff p, .ff ul, .ff h3 { max-width: none; }
  .ff-full { margin: 6px 0 0; font-size: 14px; }
  .ff-full a { color: var(--bone); }