/* SystemFlow - onboarding v2 ("Coach"), help center, multi-selection
   Loaded after styles-v3.css: uses the v4 tokens only (--fg*, --bg*, --surf*,
   --border*, --accent, --r-*), so this layer follows the theme in light and
   dark without owning a single hard-coded palette.

   Type system for this layer:
     - display   : 'Instrument Serif' - welcome/completion headlines only
     - interface : var(--sans)        - titles, body, buttons
     - signal    : var(--mono)        - kickers, counters, keycaps
   Three voices, each with one job. */

/* ══════════════════════ MOTION DESIGN SYSTEM ══════════════════════
   One vocabulary of durations and curves. Nothing below invents its own
   timing. The layer animates in CSS rather than framer-motion: framer is a
   CDN global that can fail to load, and the spotlight must keep working on
   the day it does. */

:root {
  --sf-t1: 100ms;   /* state flicks: hover, press */
  --sf-t2: 150ms;   /* small reveals */
  --sf-t3: 200ms;   /* tooltips, chips */
  --sf-t4: 250ms;   /* cards, menus */
  --sf-t5: 350ms;   /* spotlight morph, panels */
  --sf-t6: 500ms;   /* camera, celebration */

  --sf-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --sf-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --sf-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sf-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  /* The spotlight's flight curve: a whisper of overshoot, shared by the lens,
     the scrim hole and the blur clip so all three land as one object. */
  --sf-glide:  cubic-bezier(0.3, 1.06, 0.34, 1);
  --sf-fly:    420ms;

  --sf-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
}

@keyframes sf-in-pop  { from { opacity: 0; transform: scale(0.96) translateY(8px); }  to { opacity: 1; transform: none; } }
@keyframes sf-in-rise { from { opacity: 0; transform: scale(0.94) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sf-in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sf-in-left { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes sf-in-up   { from { opacity: 0; transform: translateY(12px); }  to { opacity: 1; transform: none; } }

/* ══════════════════════ shared bits ══════════════════════ */

.sf-keys { display: inline-flex; gap: 3px; align-items: center; flex-shrink: 0; }
.sf-keys kbd {
  font: 600 10px/1 var(--mono);
  color: var(--fg-dim);
  background: var(--surf-2);
  border: 1px solid var(--border-dim);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 3px 5px;
  min-width: 16px;
  text-align: center;
  white-space: nowrap;
}

.sf-tour-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-sm, 8px);
  border: 1px solid var(--border2);
  background: var(--surf-2);
  color: var(--fg);
  font: 600 12px/1 var(--sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.16s var(--ease-out), border-color 0.16s, transform 0.12s, opacity 0.16s;
  white-space: nowrap;
}
.sf-tour-btn:hover { background: var(--surf-hi); border-color: var(--border3); }
.sf-tour-btn:active { transform: translateY(1px); }
.sf-tour-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sf-tour-btn.ghost { background: transparent; border-color: transparent; color: var(--fg-dim); }
.sf-tour-btn.ghost:hover { background: var(--surf-2); color: var(--fg); }
.sf-tour-btn.primary {
  background: var(--accent);
  border-color: transparent;
  color: #06110c;
  box-shadow: var(--clay-shadow-sm);
}
.sf-tour-btn.primary:hover { filter: brightness(1.07); }
.sf-tour-btn.primary:disabled { cursor: not-allowed; filter: none; box-shadow: none; }
.sf-tour-btn.lg { height: 38px; padding: 0 18px; font-size: 12.5px; border-radius: 10px; }

/* "Your turn" state: not greyed-out failure, an alive waiting state. */
.sf-tour-btn.primary.waiting {
  opacity: 1;
  background: color-mix(in oklab, var(--accent) 16%, var(--surf-2));
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 38%, transparent);
  box-shadow: none;
}
.sf-hud-wait { display: inline-flex; gap: 3px; margin-left: 2px; }
.sf-hud-wait i {
  width: 3.5px; height: 3.5px; border-radius: 50%;
  background: currentColor;
  animation: sf-wait 1.2s var(--sf-soft) infinite;
}
.sf-hud-wait i:nth-child(2) { animation-delay: 0.15s; }
.sf-hud-wait i:nth-child(3) { animation-delay: 0.3s; }
@keyframes sf-wait { 0%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

@keyframes sf-pop-ok { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }

.sf-tour-x {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--fg-ghost);
  border-radius: 7px; cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.sf-tour-x:hover { background: var(--surf-hi); color: var(--fg); }

/* ══════════════════════ tour overlay ══════════════════════ */

.sf-tour-root { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.sf-tour-root > * { pointer-events: auto; }

.sf-tour-scrim { position: fixed; inset: 0; z-index: 400; animation: sf-in-fade 0.22s var(--ease-out) both; }
/* The hole glides between targets on animatable SVG geometry - no JS per frame. */
.sf-tour-hole {
  transition: x var(--sf-fly) var(--sf-glide), y var(--sf-fly) var(--sf-glide),
              width var(--sf-fly) var(--sf-glide), height var(--sf-fly) var(--sf-glide),
              rx var(--sf-t5) var(--sf-out), ry var(--sf-t5) var(--sf-out);
}

.sf-tour-blur {
  position: fixed;
  inset: 0;
  z-index: 399;
  pointer-events: none;
  backdrop-filter: blur(3px) saturate(0.82);
  -webkit-backdrop-filter: blur(3px) saturate(0.82);
  transition: clip-path var(--sf-fly) var(--sf-glide);
  animation: sf-in-fade var(--sf-t4) var(--sf-out) both;
}
.sf-tour-scrim-fill { fill: rgba(6, 6, 9, 0.74); }
[data-theme="light"] .sf-tour-scrim-fill,
html.light .sf-tour-scrim-fill { fill: rgba(18, 16, 26, 0.42); }

.sf-tour-scrim-plain {
  position: fixed; inset: 0; z-index: 400;
  animation: sf-in-fade 0.22s var(--ease-out) both;
  background: rgba(6, 6, 9, 0.78);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
[data-theme="light"] .sf-tour-scrim-plain,
html.light .sf-tour-scrim-plain { background: rgba(18, 16, 26, 0.34); }

/* ══════════════════════ the lens ══════════════════════
   Four corner brackets and a breathing ring instead of a hard box. All
   geometry is transitioned so the lens flies between targets. */

.sf-lens {
  position: fixed;
  z-index: 401;
  pointer-events: none;
  transition: left var(--sf-fly) var(--sf-glide), top var(--sf-fly) var(--sf-glide),
              width var(--sf-fly) var(--sf-glide), height var(--sf-fly) var(--sf-glide),
              border-radius var(--sf-t5) var(--sf-out);
}
/* A ring, not a lamp. The old version stacked three accent glows (36px spread,
   plus an inner wash) and breathed between them, which lit the element it was
   supposed to be pointing at and washed out its own contents. One hairline, one
   soft contact shadow to lift it off the dimmed page. */
.sf-lens-ring {
  position: absolute; inset: 0;
  border: 1.5px solid color-mix(in oklab, var(--accent) 70%, transparent);
  border-radius: inherit;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 10%, transparent),
              0 6px 22px -8px rgba(0, 0, 0, 0.55);
  transition: border-radius var(--sf-t5) var(--sf-out);
}
/* Only when the step is waiting on the user, and only in the ring's opacity -
   a pulse that changes size makes the whole page feel like it is breathing. */
.sf-lens.pulse .sf-lens-ring { animation: sf-lens-breathe 2.4s var(--sf-soft) infinite; }
@keyframes sf-lens-breathe {
  0%, 100% { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
  50%      { border-color: color-mix(in oklab, var(--accent) 90%, transparent); }
}

/* Corner brackets: the HUD language. They sit just outside the ring. */
.sf-lens-c {
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--accent);
  opacity: 0.95;
  transition: all var(--sf-t5) var(--sf-out);
}
.sf-lens-c.tl { left: -7px;  top: -7px;    border-right: none; border-bottom: none; border-top-left-radius: 6px; }
.sf-lens-c.tr { right: -7px; top: -7px;    border-left: none;  border-bottom: none; border-top-right-radius: 6px; }
.sf-lens-c.bl { left: -7px;  bottom: -7px; border-right: none; border-top: none;    border-bottom-left-radius: 6px; }
.sf-lens-c.br { right: -7px; bottom: -7px; border-left: none;  border-top: none;    border-bottom-right-radius: 6px; }
.sf-lens.pulse .sf-lens-c { animation: sf-corner 2.1s var(--sf-soft) infinite; }
@keyframes sf-corner {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}

/* ══════════════════════ the HUD ══════════════════════
   One instruction surface. Docked bottom-center (or top-center when the
   spotlight needs the bottom). Glass, one thin progress filament, oversized
   step counter - typography does the structure, not boxes. */

.sf-hud {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 402;
  width: min(660px, calc(100vw - 28px));
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--border2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 24px 70px rgba(0, 0, 0, 0.5),
    0 6px 22px rgba(0, 0, 0, 0.35);
  color: var(--fg);
  overflow: hidden;
}
.sf-hud.dock-bottom { bottom: 18px; animation: sf-hud-up 0.34s var(--sf-out) both; }
.sf-hud.dock-top    { top: 62px;    animation: sf-hud-down 0.34s var(--sf-out) both; }
@keyframes sf-hud-up   { from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.98); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes sf-hud-down { from { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.98); } to { opacity: 1; transform: translateX(-50%); } }

.sf-hud.celebrate { animation: sf-pop-ok 0.5s var(--ease-out); }

/* progress filament */
.sf-hud-rail { display: flex; gap: 3px; padding: 0; height: 3px; }
.sf-hud-seg {
  flex: 1; height: 3px; padding: 0;
  border: none; border-radius: 0;
  background: var(--border-dim);
  cursor: default;
  transition: background 0.25s var(--sf-out);
}
.sf-hud-seg.done { background: color-mix(in oklab, var(--accent) 60%, transparent); cursor: pointer; }
.sf-hud-seg.live { background: var(--accent); box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 60%, transparent); }

.sf-hud-main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 18px 14px 16px;
}

/* Oversized counter - the mono voice. */
.sf-hud-num {
  font: 300 34px/1 var(--mono);
  letter-spacing: -0.04em;
  color: var(--fg);
  padding-top: 3px;
  flex-shrink: 0;
  display: flex; align-items: baseline;
  user-select: none;
}
.sf-hud-num span { font-size: 12px; color: var(--fg-ghost); font-weight: 500; margin-left: 2px; }

.sf-hud-copy { flex: 1; min-width: 0; }
.sf-hud-kicker {
  font: 700 9px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 4px;
}
.sf-hud-title {
  margin: 0 0 3px;
  font: 650 17px/1.2 var(--sans);
  letter-spacing: -0.015em;
}
.sf-hud-body { font-size: 12.5px; line-height: 1.5; color: var(--fg-dim); }

/* multi-area walk */
.sf-hud-areas { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; }
.sf-hud-area {
  display: grid; gap: 1px;
  padding: 6px 10px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid var(--border-dim);
  cursor: pointer; text-align: left;
  opacity: 0.55;
  transition: opacity 0.18s, background 0.18s, border-color 0.18s, transform 0.18s;
}
.sf-hud-area:hover { opacity: 0.85; background: var(--surf-2); }
.sf-hud-area.active {
  opacity: 1;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border-color: color-mix(in oklab, var(--accent) 42%, transparent);
  transform: translateY(-1px);
}
.sf-hud-area b { font: 600 11px/1.2 var(--sans); color: var(--fg); }
.sf-hud-area.active b { color: var(--accent); }
.sf-hud-area span { font-size: 10px; line-height: 1.3; color: var(--fg-faint); }
.sf-hud-area:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* concept chips */
.sf-hud-chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.sf-hud-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surf-2);
  border: 1px solid var(--border-dim);
  font: 600 10.5px/1 var(--sans);
  color: var(--fg-dim);
  animation: sf-in-pop var(--sf-t4) var(--sf-out) both;
}
.sf-hud-chip i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: sf-flowdot 1.5s var(--sf-soft) infinite;
}
.sf-hud-chip.down i, .sf-hud-chip.in i { background: var(--green); animation-delay: 0.25s; }
.sf-hud-chip.up i { background: var(--amber); }
@keyframes sf-flowdot {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* keycaps */
.sf-hud-keys { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.sf-hud-key {
  display: inline-flex; align-items: center; gap: 7px;
  animation: sf-in-up var(--sf-t4) var(--sf-out) both;
}
.sf-hud-key em { font: 500 10.5px/1 var(--sans); font-style: normal; color: var(--fg-faint); }

/* the task line */
.sf-hud-task {
  display: flex; align-items: center; gap: 8px;
  margin-top: 11px;
  font-size: 12px; line-height: 1.4;
  color: var(--fg);
  transition: color 0.25s;
}
.sf-hud-task-ic {
  width: 17px; height: 17px; flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid color-mix(in oklab, var(--accent) 55%, transparent);
  color: var(--green);
  transition: border-color 0.25s, background 0.25s;
}
.sf-hud-task-ic i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); display: block;
  animation: sf-task-blink 1.4s ease-in-out infinite;
}
@keyframes sf-task-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } }
.sf-hud-task.done .sf-hud-task-ic {
  border-color: var(--green);
  background: color-mix(in oklab, var(--green) 18%, transparent);
}
.sf-hud-task.done .sf-hud-task-ic path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: sf-check-draw 300ms var(--sf-out) 60ms forwards;
}
.sf-hud-task.done .sf-hud-task-text { color: var(--green); font-weight: 600; }

.sf-hud-actions {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  align-self: flex-end;
  padding-bottom: 2px;
}

.sf-hud .sf-tour-x { position: absolute; top: 9px; right: 9px; }

/* ══════════════════════ cinematic welcome / completion ══════════════════════ */

.sf-tour-modal-wrap { position: fixed; inset: 0; z-index: 420; display: grid; place-items: center; }

/* ══════════════════════════ welcome (v2) ══════════════════════════
   One card, two columns, one entrance. Every animated child shares the same
   keyframe and is offset by --i, so the whole screen resolves on a single
   rhythm instead of eleven hand-tuned delays. Nothing loops after it lands:
   a first screen that keeps moving is a first screen you cannot read.        */

.sf-w { --sf-w-step: 55ms; }

.sf-w-scrim {
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--bg) 88%, black);
  backdrop-filter: blur(3px) saturate(0.9);
  -webkit-backdrop-filter: blur(3px) saturate(0.9);
  animation: sf-w-scrim 0.35s var(--sf-out) both;
}
@keyframes sf-w-scrim { from { opacity: 0; } to { opacity: 1; } }

.sf-w-card {
  position: relative;
  z-index: 421;
  width: min(880px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  background: var(--bg-elev);
  border: 1px solid var(--border2);
  border-radius: 16px;
  /* Depth from a real shadow, not from a glow. */
  box-shadow: 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent) inset,
              0 24px 70px -24px rgba(0, 0, 0, 0.7);
  animation: sf-w-card 0.42s var(--sf-out) both;
}
@keyframes sf-w-card {
  from { opacity: 0; transform: translateY(10px) scale(0.994); }
  to   { opacity: 1; transform: none; }
}

.sf-w-main { padding: 40px 34px 32px; display: flex; flex-direction: column; min-width: 0; }
.sf-w-side {
  padding: 40px 32px 32px 30px;
  border-left: 1px solid var(--border-dim);
  background: color-mix(in oklab, var(--fg) 2%, transparent);
  border-radius: 0 16px 16px 0;
  min-width: 0;
}

/* shared stagger */
.sf-w-eyebrow, .sf-w-title, .sf-w-lede, .sf-w-actions,
.sf-w-foot, .sf-w-side-h, .sf-w-list li, .sf-w-note {
  animation: sf-w-in 0.44s var(--sf-out) both;
  animation-delay: calc(0.1s + var(--i, 0) * var(--sf-w-step));
}
@keyframes sf-w-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.sf-w-eyebrow {
  display: flex; align-items: center; gap: 9px;
  font: 500 10.5px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-faint);
  margin-bottom: 22px;
}
.sf-w-eyebrow img { opacity: 0.85; display: block; }
.sf-w-eyebrow i { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-ghost); }

.sf-w-title {
  margin: 0 0 14px;
  font: 550 clamp(28px, 3.6vw, 40px)/1.1 var(--sans);
  letter-spacing: -0.028em;
  color: var(--fg);
  text-wrap: balance;
}
/* One typographic accent, in ink rather than colour. */
.sf-w-title em {
  font-family: var(--sf-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
}

.sf-w-lede {
  margin: 0;
  max-width: 42ch;
  font-size: 14.5px; line-height: 1.62;
  color: var(--fg-dim);
}

.sf-w-actions {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto;
  padding-top: 30px;
  flex-wrap: wrap;
}

.sf-w-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 15px;
  border-radius: 9px;
  border: 1px solid var(--border2);
  background: var(--surface2, transparent);
  color: var(--fg-dim);
  font: 500 13px/1 var(--sans);
  cursor: pointer;
  transition: background 0.16s var(--sf-out), color 0.16s var(--sf-out),
              border-color 0.16s var(--sf-out), transform 0.16s var(--sf-out);
}
.sf-w-btn:hover { color: var(--fg); border-color: var(--border); transform: translateY(-1px); }
.sf-w-btn:active { transform: none; }
.sf-w-btn:focus-visible { outline: 2px solid var(--fg-faint); outline-offset: 2px; }
.sf-w-btn.primary {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
  font-weight: 600;
  padding: 0 17px;
}
.sf-w-btn.primary:hover { background: var(--fg); color: var(--bg); opacity: 0.9; }
.sf-w-btn.quiet { border-color: transparent; background: transparent; color: var(--fg-ghost); }
.sf-w-btn.quiet:hover { color: var(--fg-dim); background: transparent; border-color: transparent; }

.sf-w-foot {
  margin: 16px 0 0;
  font-size: 11.5px; line-height: 1.5;
  color: var(--fg-ghost);
}
.sf-w-foot b { color: var(--fg-faint); font-weight: 500; }

.sf-w-side-h {
  margin: 0 0 4px;
  font: 500 10.5px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-ghost);
}

.sf-w-list { list-style: none; margin: 0; padding: 0; }
.sf-w-list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-dim);
}
.sf-w-list li:last-child { border-bottom: 0; }
.sf-w-list p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fg-dim); }
.sf-w-n {
  font: 500 10.5px/1.55 var(--mono);
  color: var(--fg-ghost);
  font-variant-numeric: tabular-nums;
}

/* The blank-canvas promise: a plain note with a rule, not a coloured pill. */
.sf-w-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-dim);
  font-size: 11.5px; line-height: 1.55;
  color: var(--fg-faint);
}

@media (max-width: 820px) {
  .sf-w-card { grid-template-columns: 1fr; max-height: calc(100vh - 24px); }
  .sf-w-main { padding: 30px 24px 22px; }
  .sf-w-side {
    border-left: 0;
    border-top: 1px solid var(--border-dim);
    border-radius: 0 0 16px 16px;
    padding: 22px 24px 26px;
  }
  .sf-w-actions { padding-top: 22px; }
  .sf-w-btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-w-card, .sf-w-scrim,
  .sf-w-eyebrow, .sf-w-title, .sf-w-lede, .sf-w-actions,
  .sf-w-foot, .sf-w-side-h, .sf-w-list li, .sf-w-note {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .sf-w-btn { transition: none; }
}

.sf-cine-bg { position: fixed; inset: 0; z-index: 420; pointer-events: none; overflow: hidden; }
/* Neutral, barely-there depth. These used to be two saturated colour orbs at
   0.22 opacity, which lit the whole screen and read as a template. Light, not
   colour: the product's own hue belongs on the canvas, not behind a dialog. */
.sf-cine-orb {
  position: absolute;
  width: 52vmax; height: 52vmax;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.06;
  background: var(--fg);
  animation: sf-orb 22s var(--sf-soft) infinite alternate;
}
.sf-cine-orb.a { left: -16vmax; top: -18vmax; }
.sf-cine-orb.b { right: -18vmax; bottom: -20vmax; animation-delay: -11s; }
@keyframes sf-orb {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vmax, 3vmax, 0) scale(1.12); }
}

.sf-cine-stage {
  position: relative;
  z-index: 421;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 30px 20px;
  text-align: center;
  color: var(--fg);
}



/* Display headline: words rise out of a mask, the last one lands in serif italic. */
.sf-cine-h1 {
  margin: 0 0 14px;
  font: 600 clamp(30px, 4.6vw, 46px)/1.08 var(--sans);
  letter-spacing: -0.03em;
}
.sf-cine-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-right: 0.24em; }
.sf-cine-word i {
  display: inline-block;
  font-style: normal;
  transform: translateY(110%);
  animation: sf-word 0.6s var(--sf-out) both;
}
.sf-cine-word i.accent {
  font-family: var(--sf-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
@keyframes sf-word { to { transform: translateY(0); } }

.sf-cine-lede {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 14px; line-height: 1.65;
  color: var(--fg-dim);
  animation: sf-in-up 0.5s var(--sf-out) both;
}



.sf-cine-actions {
  display: flex; gap: 8px; justify-content: center;
  margin-top: 26px; flex-wrap: wrap;
  animation: sf-in-up 0.5s var(--sf-out) both;
}
.sf-cine-foot {
  margin: 16px 0 0;
  font-size: 11px; color: var(--fg-ghost);
  animation: sf-in-fade 0.6s var(--sf-out) both;
}
.sf-cine-foot b { color: var(--fg-faint); font-weight: 600; }

/* completion */
.sf-cine-seal {
  position: relative;
  width: 64px; height: 64px; margin: 0 auto 20px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--green) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--green) 45%, transparent);
  color: var(--green);
  display: grid; place-items: center;
  animation: sf-in-rise 0.5s var(--sf-spring) both;
}
.sf-cine-seal svg path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: sf-check-draw 500ms var(--sf-out) 350ms forwards;
}
.sf-cine-seal-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  animation: sf-seal-ring 2.4s var(--sf-out) infinite;
}
.sf-cine-seal-ring.d2 { animation-delay: 1.2s; }
@keyframes sf-seal-ring {
  from { opacity: 0.7; transform: scale(1); }
  to   { opacity: 0;   transform: scale(1.9); }
}

.sf-cine-next {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 26px auto 0;
  max-width: 560px;
  text-align: left;
}
.sf-cine-next-card {
  position: relative;
  display: grid; gap: 2px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-elev) 80%, transparent);
  border: 1px solid var(--border2);
  cursor: pointer; text-align: left;
  color: var(--fg);
  transition: background 0.16s, border-color 0.16s, transform 0.16s;
  animation: sf-in-up 0.45s var(--sf-out) both;
}
.sf-cine-next-card:hover {
  background: var(--surf-hi);
  border-color: color-mix(in oklab, var(--accent) 38%, transparent);
  transform: translateY(-2px);
}
.sf-cine-next-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sf-cine-next-card b { font: 600 12.5px/1.3 var(--sans); }
.sf-cine-next-card span { font-size: 11px; line-height: 1.4; color: var(--fg-faint); }
.sf-cine-next-card svg {
  position: absolute; top: 13px; right: 12px;
  color: var(--fg-ghost);
  transition: color 0.16s, transform 0.16s;
}
.sf-cine-next-card:hover svg { color: var(--accent); transform: translateX(2px); }

/* ══════════════════════ ghost cursor ══════════════════════ */

.sf-ghost-layer { position: fixed; inset: 0; z-index: 403; pointer-events: none; }

.sf-ghost-trail {
  position: absolute; top: 0; left: 0;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--accent);
  filter: blur(2px);
  will-change: transform, opacity;
}

.sf-ghost-cursor {
  position: absolute; top: 0; left: 0;
  will-change: transform;
  transition: scale var(--sf-t1) var(--sf-out), filter var(--sf-t3) var(--sf-out);
}
.sf-ghost-cursor.pressed { scale: 0.82; }
.sf-ghost-cursor.moving  { filter: blur(0.35px); }

.sf-ghost-arrow {
  position: relative;
  fill: var(--fg);
  stroke: var(--bg);
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
}

.sf-ghost-glow {
  position: absolute;
  left: -12px; top: -12px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 45%, transparent) 0%, transparent 68%);
  transition: transform var(--sf-t3) var(--sf-out), opacity var(--sf-t3) var(--sf-out);
  opacity: 0.8;
}
.sf-ghost-cursor.pressed .sf-ghost-glow { transform: scale(1.45); opacity: 1; }

.sf-ghost-carry {
  position: absolute; left: 20px; top: 20px;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--accent);
  color: #06110c;
  font: 600 11px/1 var(--sans);
  white-space: nowrap;
  box-shadow: 0 14px 30px color-mix(in oklab, var(--accent) 40%, transparent);
  animation: sf-carry-in var(--sf-t3) var(--sf-spring) both, sf-carry-sway 1.6s var(--sf-soft) infinite;
  transform-origin: -8px -8px;
}
@keyframes sf-carry-in {
  from { opacity: 0; transform: scale(0.86) rotate(-5deg); }
  to   { opacity: 1; transform: scale(1) rotate(-2deg); }
}
@keyframes sf-carry-sway {
  0%, 100% { rotate: -2deg; }
  50%      { rotate: 1.5deg; }
}

.sf-ghost-ripple {
  position: absolute; left: 0; top: 0;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: sf-ripple var(--sf-t6) var(--sf-out) forwards;
}
@keyframes sf-ripple {
  from { opacity: 0.9; transform: scale(0.35); }
  to   { opacity: 0;   transform: scale(3.6); }
}

/* Narration bubble: a quiet line of intent under the hand ("Grab any
   component"), toggled imperatively by the ghost layer. Neutral surface, not
   accent - the accent belongs to the thing being pointed at. */
.sf-ghost-say {
  position: absolute; left: 20px; top: 32px;
  padding: 5px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
  border: 1px solid var(--border2);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  color: var(--fg-dim);
  font: 500 11px/1.35 var(--sans);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transform-origin: top left;
  transition: opacity var(--sf-t3) var(--sf-out), transform var(--sf-t3) var(--sf-out);
  pointer-events: none;
}
.sf-ghost-say.on { opacity: 1; transform: none; }

/* ══════════════════════ success burst ══════════════════════ */

.sf-burst { position: fixed; z-index: 404; pointer-events: none; width: 0; height: 0; }
.sf-burst-ring {
  position: absolute; left: 0; top: 0;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%;
  border: 2.5px solid var(--green);
  animation: sf-burst-ring var(--sf-t6) var(--sf-out) forwards;
}
.sf-burst-ring.delay { animation-delay: 110ms; border-color: var(--accent); }
@keyframes sf-burst-ring {
  from { opacity: 0.95; transform: scale(0.3); }
  to   { opacity: 0;    transform: scale(2.6); }
}

.sf-burst-check {
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: var(--green);
  color: #06110c;
  display: grid; place-items: center;
  box-shadow: 0 8px 26px color-mix(in oklab, var(--green) 55%, transparent);
  animation: sf-check-in 420ms var(--sf-spring) both, sf-check-out 260ms var(--sf-out) 700ms forwards;
}
@keyframes sf-check-in  { from { opacity: 0; transform: scale(0.3) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes sf-check-out { to { opacity: 0; transform: scale(0.86); } }
.sf-burst-check path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sf-check-draw 320ms var(--sf-out) 120ms forwards;
}
@keyframes sf-check-draw { to { stroke-dashoffset: 0; } }

.sf-confetti {
  position: absolute; left: 0; top: 0;
  width: 7px; height: 3px; margin: -1.5px 0 0 -3.5px;
  border-radius: 1px;
  background: var(--c, var(--accent));
  animation: sf-confetti 800ms var(--sf-out) forwards;
}
@keyframes sf-confetti {
  from { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to   { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)) scale(0.6); }
}

/* ══════════════════════ autopilot ══════════════════════ */

.sf-pilot {
  position: fixed;
  left: 50%; top: 14px;
  transform: translateX(-50%);
  z-index: 405;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 7px 7px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elev) 90%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--border2);
  box-shadow: var(--clay-shadow), 0 12px 40px rgba(0, 0, 0, 0.35);
  animation: sf-hud-down var(--sf-t4) var(--sf-out) both;
  max-width: calc(100vw - 24px);
}
.sf-pilot-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; flex-shrink: 0; }
.sf-pilot-eq i {
  width: 3px; border-radius: 2px;
  background: var(--accent);
  animation: sf-eq 1s var(--sf-soft) infinite;
}
.sf-pilot-eq i:nth-child(1) { height: 6px; }
.sf-pilot-eq i:nth-child(2) { height: 11px; animation-delay: 0.18s; }
.sf-pilot-eq i:nth-child(3) { height: 8px;  animation-delay: 0.36s; }
@keyframes sf-eq { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }

.sf-pilot-label {
  font: 700 9.5px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  flex-shrink: 0;
}
.sf-pilot-step {
  font: 500 12px/1.2 var(--sans);
  color: var(--fg-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 240px;
}
.sf-pilot-frac { font: 600 11px/1 var(--mono); color: var(--fg); flex-shrink: 0; }
.sf-pilot-frac em { font-style: normal; color: var(--fg-ghost); }

/* ══════════════════════ cinema: letterbox + captions ══════════════════════
   Hands-free runs read as a film, not a dialog: soft letterbox gradients top
   and bottom, and a subtitle strip where the HUD would be. Nothing here is
   clickable - the pilot bar owns exit. */

.sf-letterbox {
  position: fixed; left: 0; right: 0;
  height: 92px;
  z-index: 401;
  pointer-events: none;
}
.sf-letterbox.top {
  top: 0;
  background: linear-gradient(rgba(4, 4, 6, 0.62), transparent);
  animation: sf-lbox-top 0.6s var(--sf-out) both;
}
.sf-letterbox.bottom {
  bottom: 0;
  background: linear-gradient(transparent, rgba(4, 4, 6, 0.68));
  animation: sf-lbox-bot 0.6s var(--sf-out) both;
}
@keyframes sf-lbox-top { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes sf-lbox-bot { from { transform: translateY(100%); }  to { transform: none; } }

.sf-caption {
  position: fixed;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  z-index: 402;
  display: flex; align-items: center; gap: 14px;
  max-width: min(720px, calc(100vw - 28px));
  padding: 10px 18px 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elev) 78%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--border2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  color: var(--fg);
  pointer-events: none;
  animation: sf-caption-in 0.42s var(--sf-out) both;
}
@keyframes sf-caption-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

.sf-caption-idx {
  font: 300 26px/1 var(--mono);
  letter-spacing: -0.04em;
  color: var(--fg);
  flex-shrink: 0;
}
.sf-caption-idx em { font-style: normal; font-size: 11px; color: var(--fg-ghost); }

.sf-caption-copy { display: grid; gap: 2px; min-width: 0; }
.sf-caption-copy b { font: 650 14px/1.25 var(--sans); letter-spacing: -0.01em; }
.sf-caption-line {
  display: block;
  font-size: 12px; line-height: 1.45;
  color: var(--fg-dim);
  animation: sf-in-up var(--sf-t4) var(--sf-out) both;
}

.sf-caption-dots { display: flex; gap: 4px; flex-shrink: 0; margin-left: 4px; }
.sf-caption-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--border2);
  transition: background 0.3s var(--sf-out), transform 0.3s var(--sf-out);
}
.sf-caption-dots i.done { background: color-mix(in oklab, var(--accent) 55%, transparent); }
.sf-caption-dots i.live { background: var(--accent); transform: scale(1.35); }

/* ══════════════════════ empty-canvas hint ══════════════════════ */

.sf-empty-hint {
  position: absolute;
  left: calc(var(--sf-left-w, 258px) + 40px);
  top: 42%;
  z-index: 12;
  display: flex; align-items: center; gap: 14px;
  max-width: min(520px, calc(100% - var(--sf-left-w, 258px) - 80px));
  animation: sf-in-left 0.36s var(--ease-out) 0.3s both;
}
.sf-empty-arrow {
  color: var(--accent);
  opacity: 0.7;
  flex-shrink: 0;
  animation: sf-arrow-nudge 2.4s var(--ease-out) infinite;
}
@keyframes sf-arrow-nudge {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50%      { transform: translateX(-7px); opacity: 0.9; }
}
.sf-empty-copy { display: grid; gap: 4px; }
.sf-empty-copy strong { font: 700 17px/1.25 var(--sans); color: var(--fg); letter-spacing: -0.01em; }
.sf-empty-copy span { font-size: 12.5px; line-height: 1.5; color: var(--fg-faint); max-width: 40ch; }
.sf-empty-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .sf-empty-hint { left: 50%; transform: translateX(-50%); text-align: center; flex-direction: column; }
  .sf-empty-arrow { display: none; }
}

/* ══════════════════════ progressive tips ══════════════════════ */

.sf-tip {
  position: fixed;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  z-index: 320;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px 9px 12px;
  border-radius: 999px;
  background: var(--bg-elev);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border2);
  box-shadow: var(--clay-shadow), 0 16px 40px rgba(0, 0, 0, 0.3);
  max-width: min(600px, calc(100vw - 32px));
  animation: sf-in-pop 0.3s var(--ease-out) both;
}
.sf-tip-ic { color: var(--accent); display: inline-flex; flex-shrink: 0; }
.sf-tip-text { font-size: 12px; color: var(--fg-dim); line-height: 1.35; }
.sf-tip-x {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--fg-ghost);
  font-size: 11px; border-radius: 6px; cursor: pointer;
}
.sf-tip-x:hover { background: var(--surf-hi); color: var(--fg); }

/* ══════════════════════ marquee + multi-selection ══════════════════════ */

.sf-marquee {
  position: absolute;
  z-index: 15;
  pointer-events: none;
  border: 1.5px solid var(--accent);
  border-radius: 4px;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent), 0 4px 20px rgba(0, 0, 0, 0.2);
  animation: sf-in-fade var(--sf-t1) var(--sf-out) both;
}

.sf-selbox {
  position: absolute;
  pointer-events: none;
  border: 1.5px dashed color-mix(in oklab, var(--accent) 75%, transparent);
  border-radius: 12px;
  background: color-mix(in oklab, var(--accent) 5%, transparent);
  animation: sf-selbox-pop var(--sf-t4) var(--sf-spring) both;
}
@keyframes sf-selbox-pop {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.sf-selbox-count {
  position: absolute;
  top: -11px; left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #06110c;
  font: 700 10px/1.6 var(--mono);
  white-space: nowrap;
  box-shadow: 0 4px 12px color-mix(in oklab, var(--accent) 40%, transparent);
}

/* ══════════════════════ dependency trace ══════════════════════ */

.sf-trace-on  { transition: opacity var(--sf-t5) var(--sf-out), filter var(--sf-t5) var(--sf-out); }
.sf-trace-off {
  opacity: 0.12;
  filter: saturate(0.25) blur(0.6px);
  transition: opacity var(--sf-t5) var(--sf-out), filter var(--sf-t5) var(--sf-out);
}

.sf-trace-root {
  position: absolute;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--accent), 0 0 30px 6px color-mix(in oklab, var(--accent) 40%, transparent);
  animation: sf-lens-breathe 1.8s var(--ease-out) infinite;
}
.sf-trace-tag {
  position: absolute;
  pointer-events: none;
  padding: 1px 6px;
  border-radius: 999px;
  font: 600 9px/1.5 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transform: translateY(-2px);
}
.sf-trace-tag.down { background: var(--accent-dim); color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
.sf-trace-tag.up   { background: var(--amber-dim);  color: var(--amber);  border: 1px solid color-mix(in oklab, var(--amber) 40%, transparent); }

/* ══════════════════════ context-menu header ══════════════════════ */

.ctx-head {
  padding: 6px 10px 5px;
  font: 700 9.5px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 3px;
}

/* ══════════════════════ Help Center ══════════════════════ */

.sf-help-wrap { position: fixed; inset: 0; z-index: 430; display: grid; place-items: center; }

.sf-help {
  position: relative;
  z-index: 431;
  display: grid;
  grid-template-columns: 216px 1fr;
  width: min(900px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 48px));
  border-radius: var(--r-lg, 16px);
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--border2);
  box-shadow: var(--clay-shadow), 0 32px 80px rgba(0, 0, 0, 0.45);
  color: var(--fg);
  animation: sf-in-rise 0.28s var(--ease-out) both;
}

.sf-help-nav {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 10px;
  background: var(--surf-2);
  border-right: 1px solid var(--border-dim);
  overflow-y: auto;
}
.sf-help-brand {
  display: flex; align-items: center; gap: 7px;
  padding: 2px 6px 10px;
  font: 700 13px/1 var(--sans);
  letter-spacing: -0.01em;
}
.sf-help-replay { width: 100%; margin-bottom: 10px; }

.sf-help-navitem {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  border-radius: var(--r-sm, 8px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-dim);
  font: 500 12px/1 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sf-help-navitem:hover { background: var(--surf-hi); color: var(--fg); }
.sf-help-navitem.active {
  background: var(--surf-hi);
  color: var(--fg);
  border-color: var(--border-dim);
  font-weight: 600;
}
.sf-help-navitem.active svg { color: var(--accent); }
.sf-help-navitem:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.sf-help-nav-foot { margin-top: auto; padding: 10px 8px 2px; display: grid; gap: 6px; }
.sf-help-nav-foot a { font-size: 11px; color: var(--fg-ghost); text-decoration: none; }
.sf-help-nav-foot a:hover { color: var(--accent); }

.sf-help-main { display: flex; flex-direction: column; min-width: 0; }

.sf-help-searchbar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-dim);
  color: var(--fg-ghost);
  flex-shrink: 0;
}
.sf-help-search {
  flex: 1; min-width: 0;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--fg);
  font: 400 13px/1 var(--sans);
  outline: none;
}
.sf-help-search::placeholder { color: var(--fg-ghost); }

.sf-help-body { flex: 1; overflow-y: auto; padding: 18px 22px 26px; }
.sf-help-h { margin: 0 0 4px; font: 700 16px/1.3 var(--sans); letter-spacing: -0.01em; }
.sf-help-lede { margin: 0 0 16px; font-size: 12.5px; color: var(--fg-faint); line-height: 1.5; }
.sf-help-empty { font-size: 12.5px; color: var(--fg-faint); line-height: 1.6; }

.sf-help-article { margin-top: 16px; }
.sf-help-article h4 { margin: 0 0 5px; font: 600 13px/1.3 var(--sans); color: var(--fg); }
.sf-help-article p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--fg-dim); max-width: 66ch; }
.sf-help-jump {
  margin-top: 6px; padding: 0;
  border: none; background: none;
  color: var(--accent);
  font: 600 11.5px/1 var(--sans);
  cursor: pointer;
}
.sf-help-jump:hover { text-decoration: underline; }

.sf-help-keygroup { margin-top: 18px; }
.sf-help-keygroup h4 {
  margin: 0 0 6px;
  font: 700 9.5px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--fg-ghost);
}
.sf-help-keys { display: grid; gap: 3px; }
.sf-help-keyrow {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 7px 10px;
  border-radius: var(--r-sm, 8px);
  background: var(--surf-2);
  border: 1px solid var(--border-dim);
  font-size: 12px;
  color: var(--fg-dim);
}
.sf-help-cta { margin-top: 20px; }

/* ══════════════════════ responsive ══════════════════════ */

@media (max-width: 760px) {
  .sf-help { grid-template-columns: 1fr; height: calc(100vh - 24px); }
  .sf-help-nav {
    flex-direction: row; overflow-x: auto; gap: 6px;
    border-right: none; border-bottom: 1px solid var(--border-dim);
    padding: 10px;
  }
  .sf-help-brand, .sf-help-nav-foot { display: none; }
  .sf-help-replay { width: auto; margin: 0; flex-shrink: 0; }
  .sf-help-navitem { white-space: nowrap; flex-shrink: 0; }

  .sf-hud-main { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .sf-hud-num { display: none; }
  .sf-hud-actions { width: 100%; justify-content: flex-end; align-self: auto; }
  .sf-pilot-step { display: none; }
  .sf-cine-next { grid-template-columns: 1fr; }
}

/* ══════════════════════ REDUCED MOTION ══════════════════════
   The whole point of the layer above is movement, so honouring this setting
   means switching it off wholesale. Everything still works: the lens still
   lands on the right element, demos are skipped by the engine, tasks still
   validate. It just holds still. */
@media (prefers-reduced-motion: reduce) {
  .sf-lens.pulse .sf-lens-ring, .sf-lens.pulse .sf-lens-c,
  .sf-hud-task-ic i, .sf-hud-wait i,
  .sf-empty-arrow,
  .sf-trace-root,
  .sf-hud, .sf-cine-stage *, .sf-cine-orb, .sf-cine-word i,
  .sf-help, .sf-tip, .sf-empty-hint,
  .sf-tour-scrim, .sf-tour-scrim-plain, .sf-tour-blur,
  .sf-pilot, .sf-pilot-eq i, .sf-hud-chip, .sf-hud-chip i, .sf-hud-key,
  .sf-letterbox, .sf-caption, .sf-caption-line,
  .sf-burst-ring, .sf-burst-check, .sf-burst-check path, .sf-confetti,
  .sf-ghost-carry, .sf-ghost-ripple,
  .sys-node, .card-node, .sf-edge, .context-menu, .sf-toast,
  .sys-node.selected::after,
  .sys-node.bottleneck, .card-node.bottleneck,
  .sf-marquee, .sf-selbox,
  .sf-cine-seal, .sf-cine-seal-ring, .sf-cine-seal svg path, .sf-cine-next-card {
    animation: none !important;
  }
  .sf-cine-word i { transform: none; }
  .sf-ghost-layer { display: none; }
  .sf-lens, .sf-tour-hole, .sf-tour-blur,
  .sys-node, .card-node, .btn, .sf-tour-btn, .palette-item { transition: none !important; }
  .sys-node:hover, .card-node:hover,
  .btn:hover, .sf-tour-btn:hover, .palette-item:hover { transform: none; }
}

/* ══════════════════════ A CANVAS THAT FEELS ALIVE ══════════════════════
   Each of these answers a question the user is already asking: Is this
   selected? Am I holding it? Did it land? Motion answers faster than a label. */

.sys-node, .card-node {
  /* transform is NOT transitioned: position rides the transform (via --tx/--ty)
     and must track the cursor 1:1 during drags and tutorial autopilot moves. */
  transition:
    box-shadow var(--sf-t4) var(--sf-out),
    border-color var(--sf-t3) var(--sf-out);
}

.sys-node  { animation: sf-node-drop 480ms var(--sf-spring) both; }
/* Node position lives in --tx/--ty (translate3d set in styles.css) - every
   transform here MUST compose with it or the node teleports to the origin. */
.card-node { animation: sf-node-drop 480ms var(--sf-spring) both; }
@keyframes sf-node-drop {
  0%   { opacity: 0; transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) - 16px), 0) scale(0.4); }
  60%  { opacity: 1; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1.08); }
  100% { opacity: 1; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1); }
}

.sys-node:hover  { transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) - 2px), 0) scale(1.06); z-index: 3; }
.card-node:hover { transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) - 3px), 0); z-index: 3; }

.sys-node.selected  { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1.1); }
.card-node.selected { transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) - 1px), 0); }

.sys-node.dragging,
.card-node.dragging {
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1.12) rotate(-1.6deg);
  z-index: 8;
  cursor: grabbing;
  animation: none;
  /* no transform transition while dragging: 1:1 cursor tracking */
  transition: box-shadow var(--sf-t3) var(--sf-out);
}
.card-node.dragging { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1.04) rotate(-1deg); }

.sys-node.selected::after {
  content: "";
  position: absolute; inset: -7px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--accent) 55%, transparent);
  animation: sf-sel-breathe 2.4s var(--sf-soft) infinite;
  pointer-events: none;
}
@keyframes sf-sel-breathe {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.045); }
}

.sys-node.bottleneck, .card-node.bottleneck {
  animation: sf-strain 900ms var(--sf-soft) infinite;
}
/* Nodes are positioned by translate3d(var(--tx),var(--ty)) on the base
   .sys-node/.card-node rule - a keyframe with a bare scale() replaces that
   transform entirely and teleports the node to the canvas origin (reads as
   "bottleneck nodes disappear/jump elsewhere"). Must compose with position,
   same fix as nodeCrashPulse in styles.css. */
@keyframes sf-strain {
  0%, 100% { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1); }
  50%      { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1.035); }
}

.sf-edge { animation: sf-edge-in var(--sf-t6) var(--sf-out) both; }
@keyframes sf-edge-in {
  0%   { opacity: 0; filter: drop-shadow(0 0 6px var(--accent)); }
  55%  { opacity: 1; filter: drop-shadow(0 0 10px var(--accent)); }
  100% { opacity: 1; filter: none; }
}

/* ══════════════════════ MICRO-INTERACTIONS ══════════════════════
   Nothing appears instantly. Nothing vanishes instantly. */

.btn, .sf-tour-btn, .rp-tab, .cat-chip, .palette-item {
  transition:
    transform var(--sf-t1) var(--sf-out),
    background var(--sf-t2) var(--sf-out),
    border-color var(--sf-t2) var(--sf-out),
    box-shadow var(--sf-t2) var(--sf-out),
    color var(--sf-t2) var(--sf-out);
}
.btn:hover, .sf-tour-btn:hover { transform: translateY(-1px); }
.btn:active, .sf-tour-btn:active { transform: translateY(1px) scale(0.985); }

.palette-item:hover { transform: translateX(3px); }
.palette-item:active { transform: scale(0.98); cursor: grabbing; }

.context-menu {
  transform-origin: top left;
  animation: sf-menu-in var(--sf-t3) var(--sf-spring) both;
}
@keyframes sf-menu-in {
  from { opacity: 0; transform: scale(0.9) translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.sf-toast { animation: sf-in-pop var(--sf-t4) var(--sf-spring) both; }
.sf-bottleneck-chip { animation: sf-in-pop var(--sf-t4) var(--sf-spring) both; }

/* ══════════════════════ PERFORMANCE ══════════════════════
   Everything above animates transform / opacity / filter only, so a canvas
   with hundreds of nodes still moves at 60fps and never triggers layout. */