/* ============================================================
     MCP Security Assessment. Built on the Ryvane design system:
     hero card + universe, Fragment Mono eyebrows, Geist + Newsreader
     headlines, #1e1e1e dot-texture sections, ryv-faq accordion,
     one mint accent, generous whitespace. Scoped under .ryv-mcp.
     ============================================================ */
  .ryv-mcp{
    --bg:#1e1e1e; --card:#0d1416; --cream:#f5f3ec;
    /* Text ink. Every value below is >= 4.5:1 on --bg so it is safe for body and
       micro-copy alike; --hint is the only sub-AA step and is reserved for
       decorative marks that never carry meaning on their own. */
    --muted:rgba(245,243,236,0.78);   /* 9.7:1  long-form body */
    --soft:rgba(245,243,236,0.60);    /* 6.3:1  secondary copy */
    --faint:rgba(245,243,236,0.50);   /* 4.9:1  labels, meta, captions */
    --hint:rgba(245,243,236,0.34);    /* 2.9:1  decorative only, never text */
    --line:rgba(245,243,236,0.10); --line-soft:rgba(245,243,236,0.06);
    --mint:#9fd6b5; --sage:#a2b79f; --tan:#d8a373; --orange:#e0835c; --purple:#b59fd6; --red:#e0655c;
    /* Severity ramp reads hot-to-cool so rank is legible without the label:
       red (critical) > orange (high) > tan (medium) > sage (low). The old ramp
       started at orange and ended on two near-identical greens, which made
       medium and low indistinguishable and gave low the brightest accent. */
    --sev-critical:#e0655c; --sev-high:#e0835c; --sev-medium:#d8a373; --sev-low:#a2b79f;
    --sans:"Geist","Geist Placeholder",-apple-system,system-ui,sans-serif;
    --serif:"Newsreader","Newsreader Placeholder",ui-serif,Georgia,serif;
    --mono:"Fragment Mono","Fragment Mono Placeholder",ui-monospace,SFMono-Regular,monospace;
    --code:"Fragment Mono","Fragment Mono Placeholder",ui-monospace,SFMono-Regular,monospace;
    /* Type scale. Sizes were previously picked ad hoc across 9-17px; these are
       the only steps the page is allowed to use for anything below a heading. */
    --t-micro:12px;   /* mono labels, tags, numerals */
    --t-small:14px;   /* captions, meta, card body */
    --t-base:15px;    /* default UI copy */
    --t-body:16px;    /* reading copy inside accordions */
    --t-lead:18px;    /* section leads */
    /* Spacing scale for section rhythm. */
    --sp-sec:88px;    /* between phases */
    --sp-block:64px;  /* between blocks inside a phase */
    width:100%; min-width:0; background:var(--bg); color:var(--cream); font-family:var(--sans);
  }
  .ryv-mcp *{ box-sizing:border-box; }
  .ryv-mcp ::selection{ background:rgba(159,214,181,0.26); color:#fff; }
  .ryv-mcp em{ font-family:var(--serif); font-style:italic; font-weight:400; }
  .ryv-mcp a{ text-decoration:none; }

  /* Form controls do not inherit type by default, and the UA sheet hard-sets
     `font-family:monospace` on code/pre/kbd. Without these two rules the
     trifecta toggles rendered in Arial and every payload block rendered in the
     browser's default fixed font instead of Fragment Mono. */
  .ryv-mcp button, .ryv-mcp input, .ryv-mcp select, .ryv-mcp textarea{
    font-family:inherit; font-size:inherit; letter-spacing:inherit;
  }
  .ryv-mcp code, .ryv-mcp pre, .ryv-mcp kbd, .ryv-mcp samp{ font-family:var(--code); }

  /* One visible focus treatment for every custom control on the page. The
     accordion, pills, toggles, checkboxes and rail were all keyboard-operable
     but drew nothing on focus. */
  .ryv-mcp :focus-visible{ outline:2px solid var(--mint); outline-offset:3px; border-radius:6px; }
  .ryv-mcp .ryv-mcp-check input:focus-visible + .box{ outline:2px solid var(--mint); outline-offset:3px; }

  /* ---------- micro-label: the page's single small-caps voice ----------
     The sheet previously ran two competing label styles: Fragment Mono
     uppercase for section eyebrows, and Geist uppercase for in-card labels
     ("PROCEDURE", "EXAMPLE", "LENS"...). Everything small and uppercase now
     speaks in mono, so the hierarchy is heading -> label -> body, not
     heading -> two-kinds-of-label -> body. */
  .ryv-mcp-label{
    display:block; font-family:var(--mono); font-size:var(--t-micro);
    letter-spacing:0.12em; text-transform:uppercase; color:var(--faint);
    font-weight:400;
  }

  /* The shared nav mega-menu panel needs ~96px top padding on desktop to clear the
     fixed 61px header. theme.css ships a 48px base that the Framer template pages get
     bumped to 96px via page hydration; a bespoke page can't reproduce that, so set it
     directly here (only affects this page's stylesheet). Tablet/phone keep their own. */
  @media (min-width:1138px){
    [data-framer-name="Loading"]{ padding-top:96px !important; }
  }

  /* ---------- shared section vocabulary ----------
     Every section used the same flat 104px, so a new phase and a sub-block
     inside a phase read as the same event and the page had no macro rhythm.
     `--sp-sec` opens a phase; `--sp-block` separates blocks within one; a
     section that continues the previous phase closes up with `.is-continued`. */
  .ryv-mcp-sec{ position:relative; overflow:hidden; padding:var(--sp-sec) 32px; }
  .ryv-mcp-sec.is-continued{ padding-top:0; }
  .ryv-mcp-sec.is-tight{ padding-top:var(--sp-block); }
  /* Intro sections hand off to a phase, not to another phase: full --sp-sec on
     both sides stacked to ~176px and read as a hole mid-page. */
  .ryv-mcp-sec.flush-b{ padding-bottom:var(--sp-block); }
  .ryv-mcp-block{ margin-top:var(--sp-block); }
  .ryv-mcp-sec::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1.4px);
    background-size:26px 26px;
  }
  .ryv-mcp-inner{ position:relative; z-index:1; max-width:1080px; margin:0 auto; }
  .ryv-mcp-inner.narrow{ max-width:760px; }
  .ryv-mcp-eyebrow{
    display:inline-flex; align-items:center; gap:12px; font-family:var(--mono);
    font-size:13px; letter-spacing:0.18em; text-transform:uppercase; color:var(--cream);
    font-weight:500; margin-bottom:26px;
  }
  .ryv-mcp-eyebrow::before{ content:""; width:9px; height:9px; background:var(--cream); flex:0 0 auto; }
  .ryv-mcp-h{ font-size:clamp(34px,4vw,48px); font-weight:500; line-height:1.1; letter-spacing:-0.02em; color:var(--cream); margin:0; }
  .ryv-mcp-lead{ font-size:18px; line-height:1.65; letter-spacing:-0.01em; color:var(--muted); margin:24px 0 0; max-width:640px; }
  .ryv-mcp-lead a, .ryv-mcp p a{ color:var(--mint); text-decoration:none; border-bottom:1px solid rgba(159,214,181,0.35); }

  /* Orphan control for wrapped copy: keeps a final line from collapsing to one
     or two words in leads and card bodies (unsupported browsers ignore it). */
  .ryv-mcp-lead, .ryv-mcp-rm-desc, .ryv-mcp-lc p, .tri-row .tx .d,
  .ryv-mcp-finding-part p, .ryv-mcp-tool p, .ryv-mcp-prereq-head .tt p,
  .ryv-mcp-boundary p, .ryv-mcp-flow-node p{ text-wrap:pretty; }

  /* ---------- hero ---------- */
  .ryv-mcp-hero{ background:var(--bg); padding:9px; width:100%; }
  .ryv-mcp-hero-card{
    position:relative; width:100%; min-height:500px; border-radius:10px; overflow:hidden;
    background:var(--card); display:flex; align-items:flex-end; isolation:isolate;
  }
  .ryv-mcp-hero-bg{
    position:absolute; inset:0; z-index:0;
    background-image:
      radial-gradient(ellipse at 60% 40%, rgba(20,28,32,0) 0%, rgba(15,20,24,0.5) 70%, rgba(10,14,18,0.82) 100%),
      linear-gradient(180deg, rgba(20,30,34,0.35) 0%, rgba(13,20,22,0.7) 100%);
  }
  /* The hero texture was a 2400px raster tile of 589 hard-edged white marks
     (3x4 source px each) drawn at 1482px, i.e. resampled to 61.75%. That put
     each mark on 1.85 x 2.47 device px at 100% display scaling, but 2.31 x 3.09
     at 125%: sizes that sit near a half pixel, so the rasteriser's rounding is a
     coin toss, and the toss is re-thrown whenever the layer paints at a new
     sub-pixel offset, which is every frame of a smooth scroll. Marks flipped
     between two and three pixels wide and between full and partial brightness,
     and because they sit on a 48.165px lattice the whole grid of crossings
     appeared to flicker as boxes. Integer device ratios were clean (peak
     frame-to-frame change 0/255 at 1x and 2x); 1.25x, 1.5x and 1.75x were not
     (119/255), and 125% is the Windows default.

     The fix is the same artwork with the hard edge taken off: ryv-hero-lattice.png
     is the original with each mark's alpha gaussian-blurred (r=1.3) and then
     peak-normalised back to 255, so the marks sit in the same places and read
     as bright as before but fall off gradually. A mark with no edge has no
     "correct" integer width, so nothing flips. Measured over a sub-pixel scroll,
     peak frame-to-frame change fell from 119/255 to 45/255 at 125% scaling.

     Three things that did NOT work, so they are not worth retrying:
       - compositor promotion (translateZ + will-change): 824px -> 823px. The
         rounding happens at composite time too, so it has to be fixed in paint.
       - an integer 48px pitch instead of 48.165px: 61 -> 55. The artefact is
         per-mark rounding, not moire between marks.
       - redrawing the lattice as a repeating radial-gradient at the 48px mark
         pitch. It cut the per-mark flicker, but tiling every 48px instead of
         every 1482px multiplies tile boundaries roughly thirtyfold, and the
         fractional tile size made those boundaries visible as a coarse grid of
         seam lines. Keep the tile large. */
  .ryv-mcp-hero-grid{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background-image:url("/assets/images/ryv-hero-lattice.png");
    background-repeat:repeat; background-size:1482px auto; opacity:0.5;
  }
  .ryv-mcp-hero-inner{ position:relative; z-index:3; width:100%; max-width:1080px; margin:0 auto; padding:150px 48px 64px; }
  .ryv-mcp-hero-eyebrow{
    display:inline-flex; align-items:center; gap:12px; font-family:var(--mono);
    font-size:13px; letter-spacing:0.18em; text-transform:uppercase; color:var(--cream); font-weight:500; margin-bottom:26px;
  }
  .ryv-mcp-hero-eyebrow::before{ content:""; width:9px; height:9px; background:var(--cream); flex:0 0 auto; }
  .ryv-mcp-hero-title{ font-size:clamp(46px,6.4vw,84px); font-weight:500; line-height:1.04; letter-spacing:-0.03em; color:var(--cream); margin:0; max-width:840px; }
  .ryv-mcp-hero-sub{ font-size:20px; line-height:1.45; letter-spacing:-0.02em; color:var(--muted); margin:24px 0 0; max-width:600px; }
  .ryv-mcp-hero-meta{ display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:32px; }
  .ryv-mcp-chip{
    display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
    border:1px solid var(--line); background:rgba(245,243,236,0.03); font-family:var(--sans);
    font-size:13px; letter-spacing:0; color:var(--muted);
  }
  .ryv-mcp-chip .d{ width:6px; height:6px; border-radius:50%; background:var(--mint); flex:0 0 auto; }
  .ryv-mcp-chip.t2 .d{ background:var(--tan); }
  .ryv-mcp-chip.t3 .d{ background:var(--purple); }
  .ryv-mcp-hero-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
  /* --soft instead of --faint plus a dark halo: the stamp sits over the hero
     nebula, where --faint washed out on the orange glow. */
  .ryv-mcp-hero-stamp{
    display:flex; flex-wrap:wrap; gap:6px 10px; margin:24px 0 0;
    font-family:var(--mono); font-size:var(--t-micro); letter-spacing:0.04em; color:var(--soft);
    text-shadow:0 1px 10px rgba(10,14,18,0.9), 0 0 3px rgba(10,14,18,0.7);
  }
  .ryv-mcp-hero-stamp span[aria-hidden]{ color:var(--hint); }

  /* ---------- "how to use this sheet" roadmap ---------- */
  .ryv-mcp-roadmap{ list-style:none; margin:40px 0 0; padding:0; }
  .ryv-mcp-rm-item{ border-top:1px solid var(--line-soft); }
  .ryv-mcp-rm-item:first-child{ border-top:0; }
  .ryv-mcp-rm-link{ display:flex; gap:20px; align-items:flex-start; padding:20px 16px 20px 6px; border-radius:12px; transition:background .18s ease; }
  .ryv-mcp-rm-link:hover{ background:rgba(245,243,236,0.02); }
  .ryv-mcp-rm-num{ flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-family:var(--mono); font-size:var(--t-base); letter-spacing:0.02em; color:var(--mint); background:rgba(159,214,181,0.08); border:1px solid rgba(159,214,181,0.28); }
  .ryv-mcp-rm-body{ padding-top:3px; min-width:0; }
  .ryv-mcp-rm-name{ display:flex; align-items:center; gap:10px; font-size:20px; font-weight:500; letter-spacing:-0.02em; color:var(--cream); }
  .ryv-mcp-rm-arrow{ font-size:var(--t-base); color:var(--faint); transition:color .18s ease, transform .18s ease; }
  .ryv-mcp-rm-link:hover .ryv-mcp-rm-arrow{ color:var(--mint); transform:translate(2px,-2px); }
  .ryv-mcp-rm-desc{ display:block; margin-top:6px; font-size:var(--t-base); line-height:1.55; letter-spacing:-0.01em; color:var(--soft); max-width:660px; }
  .ryv-mcp-rm-desc strong{ color:var(--cream); font-weight:500; }

  /* ---------- "what is MCP" figure ---------- */
  .ryv-mcp-sec--figure{ padding-top:80px; padding-bottom:80px; }
  .ryv-mcp-figure{ margin:28px 0 0; }
  .ryv-mcp-mxn{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:16px; }
  .ryv-mcp-mxn-panel{
    border:1px solid var(--line); border-radius:14px; background:var(--card);
    padding:18px 18px 10px; min-width:0;
  }
  .ryv-mcp-mxn-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
  .ryv-mcp-mxn-head .t{ font-family:var(--mono); font-size:var(--t-micro); font-weight:400; letter-spacing:0.12em; text-transform:uppercase; color:var(--soft); }
  .ryv-mcp-mxn-head .c{ font-family:var(--mono); font-size:12px; letter-spacing:0; color:var(--faint); }
  .ryv-mcp-mxn-panel.is-after .ryv-mcp-mxn-head .c{ color:var(--mint); }
  .ryv-mcp-mxn svg{ display:block; width:100%; height:auto; }
  .ryv-mcp-mxn .box{ fill:rgba(245,243,236,0.03); stroke:var(--line); }
  .ryv-mcp-mxn .lbl{ font-family:var(--sans); font-size:13px; letter-spacing:-0.01em; fill:var(--muted); }
  .ryv-mcp-mxn .node{ opacity:0; transition:opacity .6s ease; }
  .ryv-mcp-mxn .wire{
    stroke:rgba(245,243,236,0.2); stroke-width:1;
    stroke-dasharray:1; stroke-dashoffset:1;
    transition:stroke-dashoffset .9s ease; transition-delay:var(--d,0s);
  }
  .ryv-mcp-mxn-panel.is-after .wire{ stroke:rgba(159,214,181,0.4); }
  .ryv-mcp-mxn .hubg{ opacity:0; transition:opacity .6s ease .35s; }
  .ryv-mcp-mxn .hub{ fill:rgba(159,214,181,0.07); stroke:var(--mint); }
  .ryv-mcp-mxn .hub-lbl{ font-family:var(--mono); font-size:13px; letter-spacing:0.08em; fill:var(--mint); }
  .ryv-mcp-sec--figure.in .ryv-mcp-mxn .node,
  .ryv-mcp-sec--figure.in .ryv-mcp-mxn .hubg{ opacity:1; }
  .ryv-mcp-sec--figure.in .ryv-mcp-mxn .wire{ stroke-dashoffset:0; }
  .ryv-mcp-figure figcaption{ margin:16px auto 0; max-width:680px; text-align:center; font-size:var(--t-small); line-height:1.55; letter-spacing:-0.01em; color:var(--soft); }

  /* ---------- server-lifecycle teaching strip ---------- */
  /* minmax(0,1fr): grid items default to min-width:auto, so the 4-up row
     overflowed the viewport on narrow screens instead of shrinking. */
  .ryv-mcp-lifecycle{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:36px; }
  .ryv-mcp-lc{ display:flex; flex-direction:column; align-items:flex-start; width:100%; text-align:left; border:1px solid var(--line-soft); border-radius:14px; padding:20px 18px; background:rgba(245,243,236,0.02); color:inherit; cursor:pointer; transition:border-color .18s ease, transform .18s ease, background .18s ease; }
  .ryv-mcp-lc:hover{ border-color:var(--line); transform:translateY(-3px); }
  .ryv-mcp-lc .ph{ display:block; font-family:var(--mono); font-size:var(--t-micro); font-weight:400; letter-spacing:0.12em; text-transform:uppercase; color:var(--mint); }
  .ryv-mcp-lc h4{ font-size:18px; font-weight:500; letter-spacing:-0.02em; color:var(--cream); margin:9px 0 8px; }
  .ryv-mcp-lc p{ font-size:var(--t-small); line-height:1.5; letter-spacing:-0.01em; color:var(--soft); margin:0; }
  .ryv-mcp-lc .ct{ display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:14px; font-size:13px; font-weight:500; color:var(--cream); }
  .ryv-mcp-lc .ct svg{ transition:transform .18s ease; }
  .ryv-mcp-lc:hover .ct svg{ transform:translateX(3px); }
  .ryv-mcp-lc.active{ border-color:var(--mint); background:rgba(159,214,181,0.06); }
  .ryv-mcp-lc.active .ct{ color:var(--mint); }

  /* ---------- readiness verification sequence ---------- */
  .ryv-mcp-scene{ position:relative; margin-top:34px; border:1px solid var(--line-soft); border-radius:10px; background:#151717; overflow:hidden; box-shadow:inset 0 1px 0 rgba(245,243,236,.04); }
  .ryv-mcp-scene::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(245,243,236,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(245,243,236,.025) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(90deg,transparent,black 18%,black 82%,transparent); }
  .ryv-mcp-scene svg{ position:relative; display:block; width:100%; height:auto; }
  /* ---------- readiness intake console (abstract systems diagram) ---------- */
  .ryv-mcp-scene.console{ background:#141616; }
  .sc2-svg{ position:relative; display:block; width:100%; height:auto; }
  .sc2-panel{ fill:rgba(245,243,236,.014); stroke:var(--line-soft); }
  .sc2-head{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; fill:var(--faint); }
  .sc2-rule,.sc2-divider{ stroke:var(--line-soft); stroke-width:1; }
  .sc2-label{ font-family:var(--sans); font-size:16px; font-weight:500; letter-spacing:-.01em; fill:var(--cream); }
  .sc2-sub{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; fill:var(--faint); }
  .sc2-pill-txt{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; }
  .sc2-pill-txt.pend{ fill:var(--faint); }
  .sc2-pill-txt.done{ fill:var(--mint); }
  .sc2-pill-check{ fill:none; stroke:var(--mint); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:16; stroke-dashoffset:16; }
  .sc2-row-bg{ fill:var(--mint); opacity:0; }
  .sc2-pill-done{ opacity:0; }
  .sc2-ring-track{ fill:none; stroke:rgba(245,243,236,.08); stroke-width:7; }
  .sc2-ring-prog{ fill:none; stroke:var(--mint); stroke-width:7; stroke-linecap:round; stroke-dasharray:364.4; stroke-dashoffset:364.4; }
  .sc2-tick{ stroke:rgba(245,243,236,.16); stroke-width:1.5; stroke-linecap:round; }
  .sc2-pip{ fill:rgba(245,243,236,.12); }
  .sc2-core-txt{ font-family:var(--mono); font-size:14px; letter-spacing:.2em; }
  .sc2-core-txt.hold{ fill:var(--faint); }
  .sc2-core-txt.ready{ fill:var(--mint); }
  .sc2-core-ready{ opacity:0; }
  .sc2-status-hold{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; fill:var(--faint); }
  .sc2-status-go{ opacity:0; }
  .sc2-status-go-txt{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; fill:var(--mint); }
  .sc2-status-underline{ fill:none; stroke:var(--mint); stroke-width:1.5; stroke-linecap:round; stroke-dasharray:150; stroke-dashoffset:150; }
  .sc2-scan{ opacity:0; transform-box:view-box; transform-origin:0 0; }
  .sc2-scan-line{ stroke:var(--mint); stroke-width:1.5; opacity:.55; }
  .sc2-scan-glow{ fill:url(#sc2-scan-grad); }

  /* choreography: rows verify top-to-bottom, the ring and count follow */
  .ryv-mcp-scene.console.play .sc2-scan{ animation:sc2-sweep 3.6s ease-in-out .5s forwards; }
  @keyframes sc2-sweep{ 0%{opacity:0;transform:translateY(0)} 12%{opacity:1} 88%{opacity:1} 100%{opacity:0;transform:translateY(228px)} }
  .ryv-mcp-scene.console.play .sc2-row-bg{ animation:sc2-bg-in .5s ease-out var(--vd) forwards; }
  @keyframes sc2-bg-in{ to{opacity:.07} }
  .ryv-mcp-scene.console.play .sc2-pill-pending{ animation:sc2-out .3s ease var(--vd) forwards; }
  .ryv-mcp-scene.console.play .sc2-pill-done{ animation:sc2-in .4s ease var(--vd) forwards; }
  .ryv-mcp-scene.console.play .sc2-pill-check{ animation:sc2-draw .4s ease-out var(--vd) forwards; }
  .ryv-mcp-scene.console.play .sc2-pip{ animation:sc2-pip-on .4s ease var(--pd) forwards; }
  @keyframes sc2-pip-on{ to{fill:var(--mint)} }
  .ryv-mcp-scene.console.play .sc2-ring-prog{ animation:sc2-ring 3.6s steps(4,start) .95s forwards; }
  @keyframes sc2-ring{ to{stroke-dashoffset:0} }
  .ryv-mcp-scene.console.play .sc2-core-hold{ animation:sc2-out .35s ease 4.3s forwards; }
  .ryv-mcp-scene.console.play .sc2-core-ready{ animation:sc2-in .5s ease 4.45s forwards; }
  .ryv-mcp-scene.console.play .sc2-status-hold{ animation:sc2-out .35s ease 4.3s forwards; }
  .ryv-mcp-scene.console.play .sc2-status-go{ animation:sc2-in .5s ease 4.45s forwards; }
  .ryv-mcp-scene.console.play .sc2-status-underline{ animation:sc2-draw .6s ease-out 4.6s forwards; }
  @keyframes sc2-in{ from{opacity:0} to{opacity:1} }
  @keyframes sc2-out{ to{opacity:0} }
  @keyframes sc2-draw{ to{stroke-dashoffset:0} }

  .ryv-mcp-replay{ position:absolute; right:14px; bottom:12px; display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid var(--line); border-radius:7px; background:rgba(13,20,22,.88); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:var(--soft); font-family:var(--sans); font-size:12px; font-weight:500; cursor:pointer; transition:color .15s ease,border-color .15s ease; }
  .ryv-mcp-replay:hover{ color:var(--mint); border-color:var(--mint); }

  /* ---------- pre-engagement readiness cards (premium doc-style) ---------- */
  .ryv-mcp-prereqs{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:40px; }
  .ryv-mcp-prereq{
    position:relative; overflow:hidden;
    border:1px solid var(--line-soft); border-radius:20px; padding:28px;
    background:linear-gradient(180deg, rgba(245,243,236,0.028), rgba(245,243,236,0.006));
    box-shadow:inset 0 1px 0 rgba(245,243,236,0.04);
    transition:border-color .18s ease, transform .18s ease;
  }
  .ryv-mcp-prereq:hover{ border-color:var(--line); transform:translateY(-2px); }
  /* per-card accent, drawn only from the existing palette */
  .ryv-mcp-prereq.acc-mint{ --acc:#9fd6b5; --acc-bg:rgba(159,214,181,0.12); --acc-line:rgba(159,214,181,0.32); }
  .ryv-mcp-prereq.acc-purple{ --acc:#b59fd6; --acc-bg:rgba(181,159,214,0.12); --acc-line:rgba(181,159,214,0.32); }
  .ryv-mcp-prereq.acc-orange{ --acc:#e0835c; --acc-bg:rgba(224,131,92,0.12); --acc-line:rgba(224,131,92,0.32); }
  .ryv-mcp-prereq.acc-tan{ --acc:#d8a373; --acc-bg:rgba(216,163,115,0.12); --acc-line:rgba(216,163,115,0.32); }
  .ryv-mcp-prereq-head{ display:flex; align-items:center; gap:13px; }
  .ryv-mcp-prereq-head .num{ display:block; font-family:var(--mono); font-size:var(--t-micro); letter-spacing:0.1em; text-transform:uppercase; color:var(--acc); margin-bottom:6px; }
  /* icon tiles match the "Start here" PASS cards: gradient + noise overlay + white glyph, tinted to each card accent */
  .ryv-mcp-prereq-head .ic{ width:42px; height:42px; flex:0 0 auto; border-radius:11px; position:relative; overflow:hidden; display:grid; place-items:center; }
  .ryv-mcp-prereq-head .ic::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image:url("/assets/images/0W8QRSemHdaCrSMY0upWHfdsmn0.png"); background-repeat:repeat; background-size:118px auto; opacity:0.4; mix-blend-mode:overlay; }
  .ryv-mcp-prereq-head .ic svg{ position:relative; z-index:1; width:21px; height:21px; color:#fff; }
  .ryv-mcp-prereq.acc-mint .ic{ background:linear-gradient(140deg, #5e6f64 0%, #a2b79f 56%, #d2e1ca 100%); }
  .ryv-mcp-prereq.acc-purple .ic{ background:linear-gradient(140deg, #6c588d 0%, #b59fd6 46%, #d8a373 100%); }
  .ryv-mcp-prereq.acc-orange .ic{ background:linear-gradient(140deg, #6c4a3d 0%, #e0835c 55%, #e8c08c 100%); }
  .ryv-mcp-prereq.acc-tan .ic{ background:linear-gradient(140deg, #6e5636 0%, #d8a373 56%, #eed3ae 100%); }
  .ryv-mcp-prereq-head .tt{ flex:1 1 auto; min-width:0; }
  .ryv-mcp-prereq-head h4{ font-size:20px; font-weight:500; letter-spacing:-0.02em; color:var(--cream); margin:0; }
  .ryv-mcp-prereq-head{ align-items:flex-start; }
  .ryv-mcp-prereq-head .tt p{ font-size:var(--t-base); line-height:1.5; letter-spacing:-0.01em; color:var(--soft); margin:6px 0 0; }
  .ryv-mcp-prereq-div{ height:1px; background:var(--line-soft); margin:22px 0 18px; }
  .ryv-mcp-prereq ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .ryv-mcp-prereq li{ display:flex; align-items:flex-start; gap:11px; font-size:var(--t-base); line-height:1.45; letter-spacing:-0.01em; color:var(--soft); }
  .ryv-mcp-prereq li svg{ flex:0 0 auto; width:17px; height:17px; margin-top:1px; color:var(--acc); }

  @media (max-width:820px){
    .ryv-mcp-prereqs{ grid-template-columns:1fr; gap:14px; }
    .ryv-mcp-prereq{ padding:22px; }
    /* the wide scene scales below legible text size on phones/tablets; the cards carry the content there */
    .ryv-mcp-scene{ display:none; }
  }
  @media (prefers-reduced-motion: reduce){
    /* show the finished, all-verified state with no motion */
    .tri-pulse{ animation:none !important; opacity:0 !important; }
    .an-payload{ transition:none !important; }
    .sc2-scan{ opacity:0 !important; animation:none !important; }
    .sc2-row-bg{ opacity:.07 !important; animation:none !important; }
    .sc2-pill-pending{ opacity:0 !important; animation:none !important; }
    .sc2-pill-done{ opacity:1 !important; animation:none !important; }
    .sc2-pill-check,.sc2-status-underline{ stroke-dashoffset:0 !important; animation:none !important; }
    .sc2-pip{ fill:var(--mint) !important; animation:none !important; }
    .sc2-ring-prog{ stroke-dashoffset:0 !important; animation:none !important; }
    .sc2-core-hold,.sc2-status-hold{ opacity:0 !important; animation:none !important; }
    .sc2-core-ready,.sc2-status-go{ opacity:1 !important; animation:none !important; }
    .ryv-mcp-replay{ display:none; }
  }

  /* ---------- trust boundaries ---------- */
  .ryv-mcp-flow{ display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; margin-top:40px; }
  .ryv-mcp-flow-node{ flex:1 1 200px; border:1px solid var(--line-soft); border-radius:14px; padding:22px; background:rgba(245,243,236,0.02); }
  .ryv-mcp-flow-node .role{ font-family:var(--mono); font-size:var(--t-micro); font-weight:400; letter-spacing:0.12em; text-transform:uppercase; color:var(--mint); }
  .ryv-mcp-flow-node h4{ font-size:18px; font-weight:500; letter-spacing:-0.02em; color:var(--cream); margin:10px 0 7px; }
  .ryv-mcp-flow-node p{ font-size:var(--t-base); line-height:1.5; letter-spacing:-0.01em; color:var(--soft); margin:0; }
  .ryv-mcp-flow-arrow{ display:flex; align-items:center; color:var(--hint); font-family:var(--mono); font-size:18px; }
  .ryv-mcp-boundaries{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:1px; margin-top:34px; border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; background:var(--line-soft); }
  .ryv-mcp-boundary{ padding:20px 22px; background:#1c1c1c; }
  .ryv-mcp-boundary .t{ font-family:var(--mono); font-size:var(--t-micro); font-weight:400; letter-spacing:0.12em; text-transform:uppercase; color:var(--tan); }
  .ryv-mcp-boundary p{ font-size:var(--t-base); line-height:1.55; letter-spacing:-0.01em; color:var(--soft); margin:10px 0 0; }

  /* ---------- lethal trifecta (interactive Venn) ---------- */
  .ryv-mcp-trifecta{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:30px; align-items:center; margin-top:36px; }
  .ryv-mcp-venn-wrap{ position:relative; border:1px solid var(--line-soft); border-radius:18px; background:rgba(245,243,236,0.014); padding:14px; }
  .ryv-mcp-venn{ display:block; width:100%; height:auto; overflow:visible; }
  .tri-leg{ cursor:pointer; }
  .tri-leg[data-leg="private"]{ --lc:#b59fd6; }
  .tri-leg[data-leg="untrusted"]{ --lc:#d8a373; }
  .tri-leg[data-leg="exfil"]{ --lc:#a2b79f; }
  .tri-circle{ fill:transparent; stroke:rgba(245,243,236,.14); stroke-width:1.5; transition:fill .3s ease, stroke .3s ease; }
  .tri-leg.on .tri-circle{ stroke:var(--lc); }
  .tri-leg[data-leg="private"].on .tri-circle{ fill:rgba(181,159,214,.13); }
  .tri-leg[data-leg="untrusted"].on .tri-circle{ fill:rgba(216,163,115,.13); }
  .tri-leg[data-leg="exfil"].on .tri-circle{ fill:rgba(162,183,159,.13); }
  .tri-leg:hover .tri-circle{ stroke:var(--lc); }
  .tri-clabel{ font-family:var(--sans); font-size:15px; font-weight:500; letter-spacing:-.01em; fill:var(--soft); transition:fill .3s ease; pointer-events:none; }
  .tri-leg.on .tri-clabel{ fill:var(--cream); }
  .tri-core{ pointer-events:none; }
  .tri-core-ring{ fill:none; stroke:rgba(245,243,236,.12); stroke-width:1.5; transition:stroke .35s ease; }
  .tri-core-dot{ fill:rgba(245,243,236,.10); transition:fill .35s ease; }
  .tri-core-lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; fill:var(--faint); opacity:0; transition:opacity .35s ease; }
  .tri-pulse{ fill:none; stroke:var(--red); stroke-width:2; opacity:0; transform-box:view-box; transform-origin:280px 228px; }
  .ryv-mcp-trifecta.armed .tri-core-dot{ fill:var(--red); }
  .ryv-mcp-trifecta.armed .tri-core-ring{ stroke:rgba(224,101,92,.5); }
  .ryv-mcp-trifecta.armed .tri-core-lbl{ opacity:1; fill:var(--red); }
  .ryv-mcp-trifecta.armed .tri-pulse{ animation:tri-pulse 1.9s ease-out infinite; }
  @keyframes tri-pulse{ 0%{opacity:.5; transform:scale(.55)} 70%{opacity:0; transform:scale(1.75)} 100%{opacity:0} }

  .ryv-mcp-venn-side{ display:flex; flex-direction:column; gap:10px; }
  .tri-row{ display:flex; align-items:flex-start; gap:13px; text-align:left; width:100%; border:1px solid var(--line-soft); border-radius:13px; padding:15px 16px; background:rgba(245,243,236,.02); color:inherit; cursor:pointer; transition:border-color .18s ease, background .18s ease; }
  .tri-row[data-leg="private"]{ --lc:#b59fd6; }
  .tri-row[data-leg="untrusted"]{ --lc:#d8a373; }
  .tri-row[data-leg="exfil"]{ --lc:#a2b79f; }
  .tri-row:hover{ border-color:var(--line); }
  .tri-row[data-leg="private"].on{ border-color:#b59fd6; background:rgba(181,159,214,.08); }
  .tri-row[data-leg="untrusted"].on{ border-color:#d8a373; background:rgba(216,163,115,.08); }
  .tri-row[data-leg="exfil"].on{ border-color:#a2b79f; background:rgba(162,183,159,.08); }
  /* Each row used to carry two controls, an outline dot AND a switch, so the
     interaction model was unclear. The switch is the one control now, sized
     and inked to match the page rather than the UA default. */
  .tri-row .tx{ flex:1 1 auto; min-width:0; }
  .tri-row .tx .h{ display:block; font-size:var(--t-base); font-weight:500; letter-spacing:-.01em; color:var(--cream); }
  .tri-row .tx .d{ display:block; margin-top:4px; font-size:13px; line-height:1.45; letter-spacing:-.01em; color:var(--soft); }
  .tri-sw{ width:38px; height:22px; border-radius:999px; background:rgba(245,243,236,.14); position:relative; flex:0 0 auto; margin-top:2px; transition:background .2s ease; }
  .tri-sw::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--muted); transition:transform .2s ease, background .2s ease; }
  .tri-row.on .tri-sw{ background:var(--lc); }
  .tri-row.on .tri-sw::after{ transform:translateX(16px); background:#141414; }
  .ryv-mcp-verdict{ display:flex; align-items:center; gap:14px; margin-top:6px; padding:16px 18px; border:1px solid var(--line-soft); border-radius:13px; background:rgba(245,243,236,0.02); transition:border-color .25s ease, background .25s ease; }
  .ryv-mcp-verdict .pill{ font-family:var(--mono); font-size:var(--t-micro); font-weight:400; letter-spacing:0.12em; text-transform:uppercase; padding:7px 13px; border-radius:999px; border:1px solid var(--line); color:var(--sage); white-space:nowrap; transition:all .25s ease; }
  .ryv-mcp-verdict p{ margin:0; font-size:var(--t-small); line-height:1.5; letter-spacing:-0.01em; color:var(--soft); }
  .ryv-mcp-trifecta.armed .ryv-mcp-verdict{ border-color:rgba(224,101,92,0.5); background:rgba(224,101,92,0.08); }
  .ryv-mcp-trifecta.armed .ryv-mcp-verdict .pill{ background:var(--red); color:#1a0f0a; border-color:var(--red); }
  .ryv-mcp-trifecta.armed .ryv-mcp-verdict p{ color:var(--cream); }

  /* ---------- anatomy of an attack (stepped walkthrough) ---------- */
  .ryv-mcp-anatomy{ margin:26px 0 6px; border:1px solid var(--line-soft); border-radius:18px; background:rgba(245,243,236,0.014); padding:22px 22px 20px; }
  /* flex-start + a nudged marker: when the eyebrow wraps on phones, the square
     stays pinned to the first line instead of floating between the two. */
  .ryv-mcp-anatomy .an-eyebrow{ display:inline-flex; align-items:flex-start; gap:10px; font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:14px; }
  .ryv-mcp-anatomy .an-eyebrow::before{ content:""; width:7px; height:7px; margin-top:3.5px; flex:0 0 auto; background:var(--tan); }
  .an-diagram > svg{ display:block; width:100%; height:auto; overflow:visible; }
  .an-conn{ stroke:rgba(245,243,236,.14); stroke-width:1.5; fill:none; transition:stroke .3s ease; }
  .an-conn.active{ stroke:var(--mint); }
  .an-node-box{ fill:rgba(245,243,236,.02); stroke:var(--line); transition:fill .3s ease, stroke .3s ease; }
  .an-node.active .an-node-box{ fill:rgba(245,243,236,.045); stroke:rgba(245,243,236,.32); }
  .an-node[data-idx="0"].active .an-node-box{ stroke:var(--tan); }
  .an-node.danger .an-node-box{ stroke:var(--red); fill:rgba(224,101,92,.08); }
  .an-node-label{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; fill:var(--soft); transition:fill .3s ease; }
  .an-node.active .an-node-label{ fill:var(--cream); }
  .an-node-sub{ font-family:var(--sans); font-size:12px; letter-spacing:-.01em; fill:var(--soft); }
  .an-node-glyph{ stroke:var(--faint); transition:stroke .3s ease; }
  .an-node.active .an-node-glyph{ stroke:var(--cream); }
  .an-node[data-idx="0"].active .an-node-glyph{ stroke:var(--tan); }
  .an-node.danger .an-node-glyph{ stroke:var(--red); }
  .an-payload{ transition:transform .55s cubic-bezier(.4,0,.2,1); transform-box:view-box; transform-origin:0 0; }
  .an-payload-box{ fill:#191d1d; stroke:var(--tan); }
  .an-payload-txt{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; fill:var(--tan); }
  .an-payload-drop{ stroke:rgba(216,163,115,.5); stroke-width:1.2; stroke-dasharray:2 3; }
  .an-hidden{ opacity:0; transition:opacity .3s ease; }
  .an-hidden.on{ opacity:1; }
  .an-hidden rect{ fill:rgba(224,101,92,.1); stroke:rgba(224,101,92,.55); }
  .an-hidden text{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; fill:var(--red); }
  .an-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:20px; }
  .an-tab{ font-family:var(--sans); font-size:13px; font-weight:500; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--soft); cursor:pointer; transition:all .15s ease; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; line-height:1; }
  .an-tab .n{ font-family:var(--mono); font-size:var(--t-micro); color:var(--faint); }
  .an-tab:hover{ color:var(--cream); }
  .an-tab.active{ background:rgba(159,214,181,.12); border-color:var(--mint); color:var(--cream); }
  .an-tab.active .n{ color:var(--mint); }
  .an-play{ margin-left:auto; font-family:var(--sans); font-size:13px; font-weight:500; padding:8px 15px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--soft); cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:all .15s ease; white-space:nowrap; line-height:1; }
  .an-play svg{ flex:0 0 auto; }
  .an-play:hover{ border-color:var(--mint); color:var(--mint); }
  .an-caption{ margin-top:16px; display:flex; gap:14px; align-items:baseline; }
  .an-caption .s{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.14em; color:var(--mint); white-space:nowrap; flex:0 0 auto; padding-top:2px; }
  .an-caption p{ margin:0; font-size:var(--t-base); line-height:1.55; letter-spacing:-.01em; color:var(--muted); }
  .an-fallback{ display:none; list-style:none; margin:4px 0 0; padding:0; }
  .an-fallback li{ display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line-soft); }
  .an-fallback li:first-child{ border-top:0; }
  .an-fallback .ft{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--mint); flex:0 0 84px; padding-top:2px; }
  .an-fallback .fc{ font-size:var(--t-base); line-height:1.5; letter-spacing:-.01em; color:var(--muted); }
  @media (max-width:720px){
    .an-diagram{ display:none; }
    .an-fallback{ display:block; }
  }

  /* ---------- filter pills + search ---------- */
  .ryv-mcp-controls{ margin-top:36px; }
  .ryv-mcp-search{
    width:100%; padding:13px 16px 13px 44px; border:1px solid var(--line); border-radius:12px;
    background:rgba(245,243,236,0.02) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a39f96' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 15px center / 17px;
    color:var(--cream); font-family:var(--sans); font-size:var(--t-base);
  }
  .ryv-mcp-search:focus{ outline:none; border-color:var(--mint); }
  .ryv-mcp-search::placeholder{ color:var(--faint); }
  .ryv-mcp-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; align-items:center; }
  .ryv-mcp-pilllabel{ font-family:var(--mono); font-size:var(--t-micro); font-weight:400; letter-spacing:0.12em; text-transform:uppercase; color:var(--faint); margin-right:4px; }
  .ryv-mcp-pill{
    font-family:var(--sans); font-size:13px; font-weight:500; padding:8px 14px; border-radius:999px;
    border:1px solid var(--line); background:transparent; color:var(--soft); cursor:pointer; transition:all .15s ease;
    display:inline-flex; align-items:center; gap:7px;
  }
  .ryv-mcp-pill:hover{ color:var(--cream); border-color:var(--line); }
  .ryv-mcp-pill .sw{ width:8px; height:8px; border-radius:50%; }
  .ryv-mcp-pill .n{ font-family:var(--mono); font-size:var(--t-micro); color:var(--faint); }
  .ryv-mcp-pill[aria-pressed="true"] .n{ color:var(--mint); }
  /* A zero-count lens/severity is "nothing here", not a broken pill: keep the
     border legible (dashed = empty), dim the ink one deliberate step. */
  .ryv-mcp-pill[disabled]{ border-style:dashed; border-color:var(--line-soft); color:var(--faint); cursor:not-allowed; }
  .ryv-mcp-pill[disabled] .sw{ opacity:0.4; }
  .ryv-mcp-pill[aria-pressed="true"]{ background:rgba(159,214,181,0.12); border-color:var(--mint); color:var(--cream); }
  .ryv-mcp-resultline{ display:flex; justify-content:space-between; align-items:center; margin:24px 2px 14px; }
  .ryv-mcp-resultline .ct{ font-family:var(--sans); font-size:var(--t-small); letter-spacing:-0.01em; color:var(--faint); }
  .ryv-mcp-reset{ background:none; border:0; color:var(--mint); font-family:var(--sans); font-size:13px; font-weight:500; cursor:pointer; }

  /* ---------- accordion extensions (built on .ryv-faq-*) ---------- */
  .ryv-mcp .ryv-faq-list{ padding:0 26px; }
  .ryv-mcp-summary-main{ display:flex; align-items:center; gap:13px; flex:1 1 auto; min-width:0; }
  .ryv-mcp-sevdot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
  .sev-critical .ryv-mcp-sevdot, .ryv-mcp-sevdot.sev-critical{ background:var(--sev-critical); }
  .sev-high .ryv-mcp-sevdot, .ryv-mcp-sevdot.sev-high{ background:var(--sev-high); }
  .sev-medium .ryv-mcp-sevdot, .ryv-mcp-sevdot.sev-medium{ background:var(--sev-medium); }
  .sev-low .ryv-mcp-sevdot, .ryv-mcp-sevdot.sev-low{ background:var(--sev-low); }
  .ryv-mcp-summary-name{ font-size:17px; font-weight:500; letter-spacing:-0.01em; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ryv-mcp-summary-id{ font-family:var(--mono); font-size:var(--t-micro); color:var(--faint); flex:0 0 auto; }
  @media (max-width:560px){ .ryv-mcp-summary-id{ display:none; } }

  /* Severity was previously a bare coloured dot, so rank was carried by hue
     alone (WCAG 1.4.1) and two of the four hues were near-identical greens.
     The chip pairs the dot with its word and is the only severity affordance
     the list needs. */
  .ryv-mcp-sevchip{
    display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
    padding:4px 10px 4px 8px; border-radius:999px;
    font-family:var(--mono); font-size:var(--t-micro); letter-spacing:0.06em;
    text-transform:uppercase; border:1px solid var(--sv,var(--line));
    background:color-mix(in srgb, var(--sv,var(--line)) 12%, transparent);
    color:var(--sv,var(--soft));
  }
  .ryv-mcp-sevchip::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--sv,var(--soft)); }
  .ryv-mcp-sevchip.sev-critical{ --sv:var(--sev-critical); }
  .ryv-mcp-sevchip.sev-high{ --sv:var(--sev-high); }
  .ryv-mcp-sevchip.sev-medium{ --sv:var(--sev-medium); }
  .ryv-mcp-sevchip.sev-low{ --sv:var(--sev-low); }
  @media (max-width:620px){
    .ryv-mcp-summary-main{ display:grid; grid-template-columns:1fr; justify-items:start; gap:9px; }
    .ryv-mcp-summary-name{ white-space:normal; max-width:100%; }
  }

  /* ---------- cross-links between runbook, library and scorecard ----------
     The three interactive systems on this page describe the same 30 attacks
     from three angles but had no links between them: a reader scoring MCP07
     or working step 04 had no route to the attacks involved. */
  /* These sit inside .ryv-faq-answer, which styles links as mint text with a
     mint underline. A pill is not a body link, so it opts out explicitly. */
  .ryv-mcp .ryv-mcp-xlink,
  .ryv-mcp .ryv-faq-answer a.ryv-mcp-xlink{
    display:inline-flex; align-items:center; gap:7px; padding:6px 12px;
    border:1px solid var(--line); border-radius:999px; background:rgba(245,243,236,0.02);
    font-size:var(--t-small); letter-spacing:-0.01em; color:var(--soft);
    transition:border-color .15s ease, color .15s ease;
  }
  .ryv-mcp .ryv-mcp-xlink:hover,
  .ryv-mcp .ryv-faq-answer a.ryv-mcp-xlink:hover{ border-color:var(--mint); color:var(--mint); }
  .ryv-mcp-xlink::after{ content:"\2192"; font-family:var(--mono); }
  .ryv-mcp-xlinks{ display:flex; flex-wrap:wrap; gap:8px; }
  .ryv-mcp-xlinks .ryv-mcp-xlink{ font-size:var(--t-small); }

  .ryv-mcp-meta{ font-size:var(--t-small); letter-spacing:-0.005em; color:var(--faint); margin-bottom:18px; }
  /* plain-English lead: the first thing a newcomer reads on each attack */
  .ryv-mcp-plain{ margin-bottom:22px; padding:18px 20px; border:1px solid rgba(159,214,181,0.28); border-radius:14px; background:rgba(159,214,181,0.05); }
  .ryv-mcp-plain-tag{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--mint); margin-bottom:10px; }
  .ryv-mcp-plain-tag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--mint); }
  .ryv-mcp-plain p{ margin:0; font-size:17px; line-height:1.6; letter-spacing:-0.01em; color:var(--cream); }
  .ryv-mcp-detail{ margin-bottom:22px; }
  .ryv-mcp-detail:last-child{ margin-bottom:0; }
  .ryv-mcp-detail-lbl{ font-family:var(--mono); font-size:var(--t-micro); font-weight:400; letter-spacing:0.12em; text-transform:uppercase; color:var(--faint); margin-bottom:10px; }
  .ryv-mcp-detail ul{ margin:0; padding-left:18px; }
  .ryv-mcp-detail li{ font-size:var(--t-body); line-height:1.6; letter-spacing:-0.01em; color:var(--muted); margin-bottom:7px; }
  .ryv-mcp-detail p{ font-size:var(--t-body); line-height:1.6; letter-spacing:-0.01em; color:var(--muted); margin:0; }
  .ryv-mcp-callout{ padding:2px 0 2px 15px; border-left:2px solid var(--line); font-size:var(--t-body); line-height:1.6; letter-spacing:-0.01em; color:var(--muted); }
  .ryv-mcp-callout.impact{ border-left-color:var(--tan); }
  .ryv-mcp-callout.defense{ border-left-color:var(--mint); color:var(--cream); }
  .ryv-mcp-tags{ display:flex; flex-wrap:wrap; gap:7px; }
  .ryv-mcp-tag{ font-family:var(--mono); font-size:12px; padding:4px 9px; border-radius:7px; border:1px solid var(--line-soft); color:var(--soft); background:rgba(245,243,236,0.02); }
  .ryv-mcp-tag.cve{ color:var(--orange); border-color:rgba(224,131,92,0.28); }

  /* ---------- per-attack kill chain (one per risk, inside its accordion) ----------
     Every attack used to draw the same four unlabelled boxes, so thirty different
     techniques looked identical and the diagram carried no information the text
     did not already give. Each stage now names its actor or artifact with an
     icon, hostile parties are marked, and a payload travels the chain when the
     entry opens so the direction of the attack is legible at a glance. */
  .ryv-mcp-flowdiag{ display:flex; flex-wrap:nowrap; align-items:stretch; gap:6px; margin-top:2px; --acc:var(--soft); }
  .ryv-mcp-flowdiag.k-injection{ --acc:#e0835c; }
  .ryv-mcp-flowdiag.k-poisoning{ --acc:#d8a373; }
  .ryv-mcp-flowdiag.k-redirect{ --acc:#b59fd6; }
  .ryv-mcp-flowdiag.k-escalation{ --acc:#e0655c; }
  .ryv-mcp-flowdiag.k-drift{ --acc:#a2b79f; }
  .ryv-mcp-flowdiag.k-dos{ --acc:#9fd6b5; }

  .fd-node{
    position:relative; flex:1 1 0; min-width:0;
    display:flex; flex-direction:column; gap:9px;
    border:1px solid var(--line-soft); border-radius:12px; padding:13px 13px 14px;
    background:rgba(245,243,236,.02);
  }
  .fd-head{ display:flex; align-items:center; gap:9px; }
  .fd-ic{
    flex:0 0 auto; width:27px; height:27px; border-radius:8px;
    display:grid; place-items:center;
    border:1px solid var(--line); background:rgba(245,243,236,.035); color:var(--soft);
  }
  .fd-ic svg{ width:15px; height:15px; display:block; }
  .fd-node .fd-i{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.12em; color:var(--faint); }
  .fd-node .fd-l{ font-size:13px; line-height:1.35; letter-spacing:-.01em; color:var(--muted); }

  /* the adversary's own stages, so the threat actor is findable in one look */
  .fd-node.fd-threat{ border-color:rgba(224,101,92,.34); background:rgba(224,101,92,.05); }
  .fd-node.fd-threat .fd-ic{ border-color:rgba(224,101,92,.45); background:rgba(224,101,92,.12); color:var(--red); }
  .fd-node.fd-threat .fd-i{ color:rgba(224,101,92,.85); }

  .fd-node.fd-impact{ border-color:var(--acc); background:rgba(245,243,236,.035); }
  .fd-node.fd-impact .fd-ic{ border-color:var(--acc); background:color-mix(in srgb, var(--acc) 16%, transparent); color:var(--acc); }
  .fd-node.fd-impact .fd-i{ color:var(--acc); }
  .fd-node.fd-impact .fd-l{ color:var(--cream); }

  .fd-arrow{
    flex:0 0 auto; align-self:center; display:flex; flex-direction:column;
    align-items:center; gap:5px; padding:0 2px;
  }
  .fd-arrow .fd-e{
    font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.04em; color:var(--faint);
    text-align:center; line-height:1.25; max-width:96px; overflow-wrap:anywhere;
  }
  /* the wire: a faint track, an accent fill that draws, and a packet that runs it */
  .fd-wire{ position:relative; display:block; width:46px; height:9px; }
  .fd-wire::before{
    content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; margin-top:-.75px;
    border-radius:2px; background:rgba(245,243,236,.13);
  }
  .fd-wire::after{
    content:""; position:absolute; right:0; top:50%; width:5px; height:5px; margin-top:-2.5px;
    border-right:1.5px solid var(--acc); border-top:1.5px solid var(--acc);
    transform:rotate(45deg) translate(-1px,1px); opacity:.8;
  }
  .fd-fill{
    position:absolute; left:0; top:50%; height:1.5px; margin-top:-.75px; width:100%;
    border-radius:2px; background:var(--acc); transform:scaleX(0); transform-origin:left center;
  }
  .fd-pulse{
    position:absolute; top:50%; left:0; width:6px; height:6px; margin-top:-3px; margin-left:-3px;
    border-radius:50%; background:var(--acc); opacity:0;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent);
  }

  /* choreography, driven entirely by the accordion's open state:
     node in -> wire draws -> packet crosses -> next node. */
  .fd-node, .fd-arrow{ opacity:0; transform:translateY(6px); }
  .ryv-faq-item[data-open="true"] .fd-node,
  .ryv-faq-item[data-open="true"] .fd-arrow{
    animation:fd-in .42s ease forwards; animation-delay:calc(var(--i,0) * .16s);
  }
  .ryv-faq-item[data-open="true"] .fd-arrow{ animation-delay:calc(var(--i,0) * .16s + .1s); }
  .ryv-faq-item[data-open="true"] .fd-fill{
    animation:fd-draw .34s cubic-bezier(.4,0,.2,1) forwards; animation-delay:calc(var(--i,0) * .16s + .22s);
  }
  .ryv-faq-item[data-open="true"] .fd-pulse{
    animation:fd-run .46s cubic-bezier(.4,0,.2,1) forwards; animation-delay:calc(var(--i,0) * .16s + .2s);
  }
  .ryv-faq-item[data-open="true"] .fd-node.fd-impact{
    animation:fd-in .42s ease forwards, fd-land .9s ease .62s 1;
  }
  @keyframes fd-in{ to{ opacity:1; transform:none; } }
  @keyframes fd-draw{ to{ transform:scaleX(1); } }
  @keyframes fd-run{
    0%{ opacity:0; left:0; }
    18%{ opacity:1; }
    82%{ opacity:1; }
    100%{ opacity:0; left:100%; }
  }
  @keyframes fd-land{
    0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--acc) 40%, transparent); }
    100%{ box-shadow:0 0 0 12px transparent; }
  }

  @media (max-width:760px){
    /* stacked: the chain runs top to bottom, so the wire and packet rotate with it */
    .ryv-mcp-flowdiag{ flex-direction:column; align-items:stretch; gap:0; }
    .fd-node{ flex:none; }
    .fd-arrow{ flex-direction:row; gap:10px; align-self:flex-start; padding:7px 0 7px 20px; }
    .fd-wire{ width:9px; height:34px; }
    .fd-wire::before{ left:50%; right:auto; top:0; bottom:0; width:1.5px; height:auto; margin:0 0 0 -.75px; }
    .fd-wire::after{ left:50%; right:auto; top:auto; bottom:0; margin:0 0 0 -2.5px; transform:rotate(135deg) translate(-1px,1px); }
    .fd-fill{ left:50%; top:0; width:1.5px; height:100%; margin:0 0 0 -.75px; transform:scaleY(0); transform-origin:top center; }
    .fd-pulse{ left:50%; top:0; margin-left:-3px; }
    @keyframes fd-draw{ to{ transform:scaleY(1); } }
    @keyframes fd-run{
      0%{ opacity:0; top:0; }
      18%{ opacity:1; }
      82%{ opacity:1; }
      100%{ opacity:0; top:100%; }
    }
  }
  @media (prefers-reduced-motion: reduce){
    /* show the finished chain, no travel */
    .fd-node, .fd-arrow{ opacity:1 !important; transform:none !important; animation:none !important; }
    .fd-fill{ transform:scaleX(1) !important; animation:none !important; }
    .fd-pulse{ display:none; }
  }

  /* code / payload */
  .ryv-mcp-code{ position:relative; margin-top:2px; border:1px solid var(--line-soft); border-radius:10px; background:#15171a; overflow:hidden; }
  .ryv-mcp-code pre{ margin:0; padding:34px 16px 16px; overflow-x:auto; font-family:var(--code); font-size:13px; line-height:1.6; color:#cdd6cf; }
  .ryv-mcp-code-lang{
    position:absolute; top:10px; left:14px; font-family:var(--mono); font-size:var(--t-micro);
    letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  }
  /* the fix block is the one to act on, so it is the one that carries the accent */
  .ryv-mcp-code.is-fix{ margin-top:14px; border-color:rgba(159,214,181,.26); background:#141917; }
  .ryv-mcp-code.is-fix .ryv-mcp-code-lang{ color:var(--mint); }
  .ryv-mcp-copy{ position:absolute; top:8px; right:10px; font-family:var(--mono); font-size:var(--t-micro); padding:5px 10px; border-radius:7px; border:1px solid var(--line); background:rgba(245,243,236,0.04); color:var(--mint); cursor:pointer; }
  .ryv-mcp-copy.copied{ color:#0d1416; background:var(--mint); }

  /* numbered checks: a procedure to work through, not a bag of suggestions */
  .ryv-mcp-steps{ list-style:none; counter-reset:ryvstep; margin:0; padding:0; }
  .ryv-mcp-steps li{
    position:relative; counter-increment:ryvstep; padding-left:34px; margin-bottom:11px;
    font-size:var(--t-body); line-height:1.6; letter-spacing:-.01em; color:var(--muted);
  }
  .ryv-mcp-steps li::before{
    content:counter(ryvstep,decimal-leading-zero);
    position:absolute; left:0; top:2px; width:23px; text-align:right;
    font-family:var(--mono); font-size:var(--t-micro); color:var(--faint);
  }
  /* Inline code inside prose: commands, paths, header names. Scoped to the
     places that carry prose, because `.ryv-mcp-detail code` also matched the
     <code> inside every <pre> and shrank the code blocks to 11px. */
  .ryv-mcp-steps li code, .ryv-mcp-callout code, .ryv-mcp-detail p code{
    font-family:var(--code); font-size:.88em; padding:2px 6px; border-radius:5px;
    background:rgba(245,243,236,.06); color:#cdd6cf; overflow-wrap:anywhere;
  }
  .ryv-mcp-code pre code{ font-size:inherit; padding:0; background:none; border-radius:0; }
  .ryv-mcp-callout.verify{ border-left-color:var(--purple); }

  /* ---------- methodology + checklist ---------- */
  .ryv-mcp-progress{ display:flex; align-items:center; gap:18px; margin-top:36px; margin-bottom:18px; padding:20px 24px; border:1px solid var(--line-soft); border-radius:14px; background:rgba(245,243,236,0.02); }
  .ryv-mcp-progress-track{ flex:1 1 auto; height:6px; border-radius:4px; background:rgba(245,243,236,0.08); overflow:hidden; min-width:80px; }
  .ryv-mcp-progress-track span{ display:block; height:100%; width:0; background:var(--mint); transition:width .35s ease; }
  .ryv-mcp-progress .lbl{ font-family:var(--sans); font-size:var(--t-small); letter-spacing:-0.01em; color:var(--soft); white-space:nowrap; }
  /* Same action as the library/scorecard `.ryv-mcp-reset`, so same ink: the
     faint gray version read as disabled text next to its mint siblings. */
  .ryv-mcp-progress .reset{ background:none; border:0; color:var(--mint); font-family:var(--sans); font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; }
  .ryv-mcp-progress .reset:hover{ color:var(--mint); }
  .ryv-mcp-phasebar{ display:flex; align-items:center; gap:13px; flex:1 1 auto; min-width:0; }
  .ryv-mcp-phasenum{ display:inline-flex; align-items:baseline; gap:6px; font-family:var(--mono); font-size:13px; font-weight:400; color:var(--mint); border:1px solid var(--line); border-radius:7px; padding:5px 9px; flex:0 0 auto; }
  .ryv-mcp-phasenum i{ font-family:var(--mono); font-size:var(--t-micro); font-style:normal; letter-spacing:0.1em; text-transform:uppercase; color:var(--faint); }
  @media (max-width:560px){ .ryv-mcp-phasenum i{ display:none; } }
  /* visually hidden, still announced */
  .ryv-mcp .sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .ryv-mcp-phaseprog{ font-family:var(--sans); font-size:13px; letter-spacing:-0.01em; color:var(--faint); flex:0 0 auto; }
  .ryv-mcp-check{ list-style:none; margin:0 0 18px; padding:0; }
  .ryv-mcp-check li{ margin:0 0 11px; }
  .ryv-mcp-check label{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:var(--t-body); line-height:1.55; letter-spacing:-0.01em; color:var(--muted); }
  .ryv-mcp-check input{ position:absolute; opacity:0; width:0; height:0; }
  .ryv-mcp-check .box{ flex:0 0 auto; width:19px; height:19px; margin-top:1px; border:1.5px solid var(--line); border-radius:6px; display:grid; place-items:center; transition:all .15s ease; }
  .ryv-mcp-check .box svg{ width:12px; height:12px; opacity:0; }
  .ryv-mcp-check input:checked + .box{ background:var(--mint); border-color:var(--mint); }
  .ryv-mcp-check input:checked + .box svg{ opacity:1; }
  /* struck through *and* dropped to the faintest ink made completed checks
     hard to re-read, which is exactly when you re-read them (writing up). */
  .ryv-mcp-check input:checked ~ .txt{ color:var(--soft); text-decoration:line-through; text-decoration-color:var(--hint); }
  .ryv-mcp-toollist{ display:flex; flex-wrap:wrap; gap:7px; }
  .ryv-mcp-toollist .tl{ font-family:var(--mono); font-size:12px; padding:4px 10px; border-radius:7px; border:1px solid var(--line-soft); color:var(--sage); }

  /* ---------- right-side phase rail (floating console) ----------
     Was five bare dashes with labels hidden until hover: it read as decoration,
     gave no hint it was navigation, and named nothing until you found it with a
     mouse. It is now a panel in the same material as the page's other surfaces
     (hairline border, blurred dark glass, mono numerals), and it reports the
     progress the sheet already tracks, so it doubles as the assessment's status
     readout rather than being a decorative scroll-spy.

     It collapses to a 60px numeral column because a permanently open 250px
     panel would sit on top of the 1080px content column at common widths; it
     opens on hover or keyboard focus, and stays open where there is room. */
  .ryv-mcp-rail{
    position:fixed; right:20px; top:50%; transform:translateY(-50%); z-index:30;
    display:flex; flex-direction:column; gap:8px;
    width:60px; padding:8px; overflow:hidden;
    border:1px solid var(--line); border-radius:16px;
    background:rgba(22,24,24,0.72);
    -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
    box-shadow:0 20px 44px rgba(0,0,0,0.34), inset 0 1px 0 rgba(245,243,236,0.05);
    transition:width .28s cubic-bezier(.4,0,.2,1), border-color .2s ease;
  }
  .ryv-mcp-rail:hover, .ryv-mcp-rail:focus-within{ width:248px; border-color:rgba(245,243,236,0.16); }

  .ryv-mcp-rail-head{
    display:flex; align-items:center; justify-content:center; gap:0;
    margin:0; padding:4px 8px 0; white-space:nowrap;
  }
  .ryv-mcp-rail-head .k{
    max-width:0; overflow:hidden; opacity:0;
    font-family:var(--mono); font-size:var(--t-micro); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
    color:var(--mint);
    transition:max-width .28s cubic-bezier(.4,0,.2,1), opacity .2s ease .04s;
  }
  .ryv-mcp-rail:hover .ryv-mcp-rail-head,
  .ryv-mcp-rail:focus-within .ryv-mcp-rail-head{ justify-content:space-between; }
  .ryv-mcp-rail:hover .ryv-mcp-rail-head .k,
  .ryv-mcp-rail:focus-within .ryv-mcp-rail-head .k{ max-width:140px; opacity:1; }
  .ryv-mcp-rail-head .pc{
    font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.04em; color:var(--mint);
    font-variant-numeric:tabular-nums;
  }

  .ryv-mcp-rail-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
  .ryv-mcp-rail-item{
    position:relative; display:flex; align-items:center; gap:11px;
    height:34px; padding:0 9px; border-radius:9px; text-decoration:none;
    color:var(--soft); white-space:nowrap;
    transition:background .16s ease, color .16s ease;
  }
  /* the "you are here" edge marker, inside the row so it tracks the pill */
  .ryv-mcp-rail-item::before{
    content:""; position:absolute; left:2px; top:50%; transform:translateY(-50%) scaleY(.3);
    width:2px; height:16px; border-radius:2px; background:var(--mint);
    opacity:0; transition:opacity .18s ease, transform .18s ease;
  }
  .ryv-mcp-rail-item:hover{ background:rgba(245,243,236,0.05); color:var(--cream); }
  .ryv-mcp-rail-item.active{ background:rgba(159,214,181,0.10); color:var(--mint); }
  .ryv-mcp-rail-item.active::before{ opacity:1; transform:translateY(-50%) scaleY(1); }

  .ryv-mcp-rail-n{
    flex:0 0 auto; width:24px; text-align:center;
    font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.04em;
    color:var(--faint); transition:color .16s ease;
  }
  .ryv-mcp-rail-item:hover .ryv-mcp-rail-n{ color:var(--soft); }
  .ryv-mcp-rail-item.active .ryv-mcp-rail-n{ color:var(--mint); }
  .ryv-mcp-rail-t{
    flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:500; letter-spacing:-0.01em;
    opacity:0; transform:translateX(-5px);
    transition:opacity .2s ease .03s, transform .24s cubic-bezier(.4,0,.2,1) .03s;
  }
  /* live counts, only for the phases whose state the sheet actually tracks */
  .ryv-mcp-rail-c{
    flex:0 0 auto; font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.02em;
    color:var(--faint); font-variant-numeric:tabular-nums;
    opacity:0; transition:opacity .2s ease .03s;
  }
  .ryv-mcp-rail-item.active .ryv-mcp-rail-c{ color:rgba(159,214,181,0.8); }
  .ryv-mcp-rail:hover .ryv-mcp-rail-t, .ryv-mcp-rail:focus-within .ryv-mcp-rail-t,
  .ryv-mcp-rail:hover .ryv-mcp-rail-c, .ryv-mcp-rail:focus-within .ryv-mcp-rail-c{
    opacity:1; transform:none;
  }

  .ryv-mcp-rail-foot{ padding:2px 9px 4px; }
  .ryv-mcp-rail-meter{
    display:block; height:3px; border-radius:3px; overflow:hidden;
    background:rgba(245,243,236,0.10);
  }
  .ryv-mcp-rail-meter i{ display:block; height:100%; width:0; background:var(--mint); transition:width .35s ease; }

  /* Stay open only where the panel clears the 1080px content column with a
     real gutter: 1080 + 2 x (248 panel + 20 offset + 24 gap) = 1664. At 1600
     the panel and the accordion edge were touching. */
  @media (min-width:1680px){
    .ryv-mcp-rail{ width:248px; }
    .ryv-mcp-rail .ryv-mcp-rail-t, .ryv-mcp-rail .ryv-mcp-rail-c{ opacity:1; transform:none; }
    .ryv-mcp-rail .ryv-mcp-rail-head{ justify-content:space-between; }
    .ryv-mcp-rail .ryv-mcp-rail-head .k{ max-width:140px; opacity:1; }
  }
  @media (max-width:1099px){ .ryv-mcp-rail{ display:none; } }
  @media (prefers-reduced-motion: reduce){
    .ryv-mcp-rail, .ryv-mcp-rail *{ transition:none !important; }
  }
  .ryv-mcp-runbook-brief{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:38px; border:1px solid var(--line); background:#181a1a; }
  .ryv-mcp-brief-step{ padding:20px; border-right:1px solid var(--line-soft); }
  .ryv-mcp-brief-step:last-child{ border-right:0; }
  .ryv-mcp-brief-step .n{ font-family:var(--mono); font-size:var(--t-micro); color:var(--mint); text-transform:uppercase; }
  .ryv-mcp-brief-step h3{ margin:9px 0 7px; color:var(--cream); font-size:var(--t-body); font-weight:500; }
  .ryv-mcp-brief-step p{ margin:0; color:var(--soft); font-size:13px; line-height:1.5; }

  .ryv-mcp-phase-intro{ display:grid; grid-template-columns:1fr auto; gap:18px; align-items:start; margin-bottom:20px; }
  .ryv-mcp-phase-intro p{ margin:0; color:var(--muted); font-size:var(--t-base); line-height:1.55; }
  .ryv-mcp-phase-state{ padding:6px 9px; border:1px solid var(--line); border-radius:6px; font-family:var(--mono); font-size:var(--t-micro); color:var(--faint); text-transform:uppercase; white-space:nowrap; }
  .ryv-mcp-phase-state.done{ border-color:rgba(159,214,181,.45); color:var(--mint); }
  .ryv-mcp-evidence{ display:grid; grid-template-columns:1fr 1fr; gap:22px; padding-top:21px; margin-top:20px; border-top:1px solid var(--line-soft); }
  .ryv-mcp-evidence ul{ margin:0; padding-left:18px; }
  .ryv-mcp-evidence li{ margin:0 0 7px; color:var(--soft); font-size:var(--t-small); line-height:1.5; }
  .ryv-mcp-gate{ padding:14px 16px; border-left:2px solid var(--mint); background:rgba(159,214,181,.045); color:var(--muted); font-size:var(--t-small); line-height:1.55; }

  /* ---------- scorecard ---------- */
  .ryv-mcp-score{ border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; margin-top:36px; }
  .ryv-mcp-score-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; padding:16px 22px; background:rgba(245,243,236,0.02); border-bottom:1px solid var(--line-soft); font-family:var(--sans); font-size:var(--t-small); letter-spacing:-0.01em; color:var(--soft); }
  .ryv-mcp-score-bar .st{ display:inline-flex; align-items:center; gap:7px; }
  .ryv-mcp-score-bar .st .d{ width:9px; height:9px; border-radius:50%; }
  .ryv-mcp-score-meter{ flex:1 1 80px; height:6px; border-radius:4px; background:rgba(245,243,236,0.08); overflow:hidden; }
  .ryv-mcp-score-meter span{ display:block; height:100%; width:0; background:var(--mint); transition:width .3s ease; }
  .ryv-mcp-score-row{ display:grid; grid-template-columns:auto 1fr auto auto; gap:10px 14px; align-items:center; padding:16px 22px; border-bottom:1px solid var(--line-soft); }
  .ryv-mcp-score-row:last-child{ border-bottom:0; }
  .ryv-mcp-score-row .rid{ font-family:var(--mono); font-size:var(--t-micro); color:var(--mint); }
  .ryv-mcp-score-row .rt{ font-size:var(--t-body); letter-spacing:-0.01em; color:var(--cream); }
  .ryv-mcp-score-row .rx{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:0.04em; color:var(--faint); background:none; border:0; padding:4px 6px; cursor:pointer; white-space:nowrap; }
  .ryv-mcp-score-row .rx:hover{ color:var(--mint); }
  .ryv-mcp-stog{ display:flex; gap:6px; }
  .ryv-mcp-stog button{ font-family:var(--sans); font-size:13px; font-weight:500; padding:7px 14px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--soft); cursor:pointer; }
  .ryv-mcp-stog button.pass[aria-pressed="true"]{ background:var(--mint); color:#0d1416; border-color:var(--mint); }
  .ryv-mcp-stog button.fail[aria-pressed="true"]{ background:var(--orange); color:#1a0f0a; border-color:var(--orange); }
  /* "not applicable" was previously indistinguishable from "not yet scored":
     both left the row blank, so the bar could not tell an unfinished sheet from
     a finished one with out-of-scope rows. */
  .ryv-mcp-stog button.na[aria-pressed="true"]{ background:rgba(245,243,236,0.14); color:var(--cream); border-color:var(--line); }
  .ryv-mcp-row-pass{ background:rgba(159,214,181,0.04); }
  .ryv-mcp-row-fail{ background:rgba(224,131,92,0.05); }
  .ryv-mcp-row-na{ background:rgba(245,243,236,0.02); }
  .ryv-mcp-row-na .rt{ color:var(--soft); }
  @media (max-width:680px){
    /* Everything hangs off the card's left edge (no ragged second axis under
       the title), and the Pass/Fail/N/A trio becomes a full-width row of
       44px-tall buttons: these are the page's primary touch control. */
    .ryv-mcp-score-row{ grid-template-columns:auto 1fr; row-gap:12px; }
    .ryv-mcp-score-row .rx{ grid-column:1 / -1; justify-self:start; padding-left:0; }
    .ryv-mcp-stog{ grid-column:1 / -1; width:100%; }
    .ryv-mcp-stog button{ flex:1 1 0; min-height:44px; }
  }

  /* ---------- phase 4: report ---------- */
  .ryv-mcp-finding{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:1px; margin-top:36px; border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; background:var(--line-soft); }
  .ryv-mcp-finding--seq{ grid-template-columns:repeat(5,1fr); }
  @media (max-width:1000px){ .ryv-mcp-finding--seq{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:620px){ .ryv-mcp-finding, .ryv-mcp-finding--seq{ grid-template-columns:1fr; } }
  .ryv-mcp-finding-part{ padding:22px; background:#1c1c1c; }
  .ryv-mcp-finding-part .n{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:0.12em; text-transform:uppercase; color:var(--mint); }
  .ryv-mcp-finding-part h4{ font-size:17px; font-weight:500; letter-spacing:-0.02em; color:var(--cream); margin:10px 0 7px; }
  .ryv-mcp-finding-part p{ font-size:var(--t-small); line-height:1.55; letter-spacing:-0.01em; color:var(--soft); margin:0; }
  .ryv-mcp-export{ margin-top:28px; border:1px solid var(--line); border-radius:16px; background:rgba(245,243,236,0.02); padding:24px; }
  .ryv-mcp-export-head{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
  .ryv-mcp-export-head .tt{ flex:1 1 260px; min-width:0; }
  .ryv-mcp-export-head h4{ font-size:18px; font-weight:500; letter-spacing:-0.02em; color:var(--cream); margin:0; }
  .ryv-mcp-export-head p{ font-size:var(--t-small); line-height:1.55; color:var(--soft); margin:6px 0 0; }
  .ryv-mcp-btn{
    display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:10px;
    border:1px solid var(--mint); background:rgba(159,214,181,0.10); color:var(--mint);
    font-family:var(--sans); font-size:var(--t-base); font-weight:500; cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .ryv-mcp-btn:hover{ background:var(--mint); color:#0d1416; }
  .ryv-mcp-btn[hidden]{ display:none; }
  .ryv-mcp-btn.ghost{ border-color:var(--line); background:transparent; color:var(--soft); }
  .ryv-mcp-btn.ghost:hover{ border-color:var(--cream); background:transparent; color:var(--cream); }
  .ryv-mcp-export-out{ margin-top:20px; }
  .ryv-mcp-export-out[hidden]{ display:none; }
  .ryv-mcp-export-out textarea{
    width:100%; min-height:260px; resize:vertical; border:1px solid var(--line-soft); border-radius:10px;
    background:#15171a; color:#cdd6cf; padding:16px; font-family:var(--code); font-size:13px; line-height:1.6;
  }
  .ryv-mcp-export-out textarea:focus{ outline:none; border-color:var(--mint); }

  /* ---------- tooling + refs ---------- */
  .ryv-mcp-tools{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:14px; margin-top:40px; }
  .ryv-mcp-tool{ display:block; border:1px solid var(--line-soft); border-radius:14px; padding:22px; background:rgba(245,243,236,0.02); transition:border-color .18s ease, transform .18s ease; }
  .ryv-mcp-tool:hover{ border-color:var(--line); transform:translateY(-2px); }
  .ryv-mcp-tool .kind{ font-family:var(--mono); font-size:var(--t-micro); font-weight:400; letter-spacing:0.12em; text-transform:uppercase; color:var(--tan); }
  .ryv-mcp-tool h4{ font-size:18px; font-weight:500; letter-spacing:-0.02em; color:var(--cream); margin:12px 0 0; }
  .ryv-mcp-tool p{ font-size:var(--t-base); line-height:1.55; letter-spacing:-0.01em; color:var(--soft); margin:9px 0 0; }
  .ryv-mcp-refs{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
  .ryv-mcp-ref{ display:inline-flex; align-items:center; gap:8px; padding:11px 15px; border:1px solid var(--line-soft); border-radius:10px; background:rgba(245,243,236,0.02); font-size:var(--t-base); letter-spacing:-0.01em; color:var(--cream); }
  .ryv-mcp-ref:hover{ border-color:var(--mint); }
  .ryv-mcp-ref::before{ content:"↗"; color:var(--mint); }
  .ryv-mcp-disclaimer{ margin-top:44px; padding:22px 24px; border:1px solid var(--line-soft); border-radius:14px; background:rgba(245,243,236,0.015); font-size:var(--t-small); line-height:1.65; letter-spacing:-0.005em; color:var(--faint); max-width:820px; }

  /* reveal */
  .ryv-mcp-reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
  .ryv-mcp-reveal.in{ opacity:1; transform:none; }
  .ryv-mcp-reveal:target{ opacity:1; transform:none; }
  .ryv-mcp section[id]{ scroll-margin-top:84px; }
  .ryv-mcp-empty{ padding:40px; text-align:center; font-size:var(--t-base); color:var(--faint); }

  @media (max-width:860px){
    .ryv-mcp-lifecycle{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ryv-mcp-trifecta{ grid-template-columns:1fr; }
    .ryv-mcp-flow-arrow{ transform:rotate(90deg); justify-content:center; }
    .ryv-mcp-flow-node{ flex-basis:100%; }
    .ryv-mcp-runbook-brief{ grid-template-columns:1fr 1fr; }
    .ryv-mcp-brief-step:nth-child(2){ border-right:0; }
    .ryv-mcp-brief-step:nth-child(-n+2){ border-bottom:1px solid var(--line-soft); }
    .ryv-mcp-evidence{ grid-template-columns:1fr; }
  }
  @media (max-width:720px){
    .ryv-mcp-lifecycle{ grid-template-columns:minmax(0,1fr); }
    .ryv-mcp-sec{ padding:72px 22px; }
    .ryv-mcp-hero-inner{ padding:116px 24px 52px; }
    .ryv-mcp-hero-card{ min-height:calc(100svh - 80px); }
    .ryv-mcp-hero-title{ font-size:42px; line-height:1.06; max-width:100%; overflow-wrap:anywhere; }
    .ryv-mcp-hero-title em{ display:block; }
    .ryv-mcp-hero-sub{ width:100%; max-width:300px; font-size:18px; white-space:normal; overflow-wrap:anywhere; }
    .ryv-mcp .ryv-faq-list{ padding:0 18px; }
    .ryv-mcp-progress{ align-items:flex-start; flex-wrap:wrap; }
    .ryv-mcp-progress-track{ order:3; flex-basis:100%; }
    .ryv-mcp-runbook-brief{ grid-template-columns:1fr; }
    .ryv-mcp-brief-step{ border-right:0; border-bottom:1px solid var(--line-soft); }
    .ryv-mcp-brief-step:nth-child(2){ border-right:0; }
    .ryv-mcp-brief-step:last-child{ border-bottom:0; }
    .ryv-mcp-phase-intro{ grid-template-columns:1fr; }
  }
  @media (prefers-reduced-motion: reduce){
    .ryv-mcp-reveal{ transition:none; opacity:1; transform:none; }
    .ryv-mcp-mxn .wire{ transition:none; stroke-dashoffset:0; }
    .ryv-mcp-mxn .node, .ryv-mcp-mxn .hubg{ transition:none; opacity:1; }
  }

  /* ---------- print ----------
     People print and PDF cheatsheets. Without this the page prints as dark
     slabs with every accordion collapsed, i.e. the runbook and the attack
     library both come out empty. */
  @media print{
    /* The sheet is a dark-theme page whose inks are tuned for #1e1e1e. Printed
       on white they all but vanish, so print re-inks the whole subtree rather
       than trying to override class by class, then restores the few marks that
       carry meaning. */
    .ryv-mcp{
      --bg:#fff; --card:#fff; --cream:#111;
      --muted:#222; --soft:#333; --faint:#444; --hint:#777;
      --line:#c9c9c9; --line-soft:#e2e2e2;
      --sev-critical:#a32b1f; --sev-high:#a85a12; --sev-medium:#7a5a20; --sev-low:#3f6b4a;
      --mint:#1f6b45; --sage:#3f6b4a; --tan:#7a5a20; --orange:#a85a12; --purple:#4b3a75; --red:#a32b1f;
      background:#fff; color:#111;
    }
    .ryv-mcp *{ background-image:none !important; box-shadow:none !important; }
    .ryv-mcp *, .ryv-mcp *::before, .ryv-mcp *::after{ animation:none !important; transition:none !important; }

    /* Chrome and controls that mean nothing on paper. */
    nav, footer, #template-overlay, .ryv-mcp-rail, .ryv-mcp-replay,
    .ryv-mcp-controls, .ryv-mcp-resultline, .ryv-mcp-anatomy .an-controls,
    .ryv-mcp-export, .ryv-mcp-progress .reset, .ryv-mcp-copy, .ryv-mcp-hero-cta,
    .ryv-mcp-hero-bg, .ryv-mcp-hero-grid, .ryv-uni-overlay, .ryv-mcp-scene,
    .ryv-mcp-score-row .rx, .ryv-mcp-reset, .ryv-faq-icon,
    .ryv-mcp-rm-arrow, .ryv-mcp-xlink::after{ display:none !important; }

    .ryv-mcp-sec{ padding:20px 0; }
    .ryv-mcp-sec::before{ display:none; }
    .ryv-mcp-hero{ padding:0; }
    .ryv-mcp-hero-card{ min-height:auto; background:#fff; border-bottom:2px solid #111; }
    .ryv-mcp-hero-inner{ padding:0 0 18px; max-width:none; }
    .ryv-mcp-hero-title{ font-size:34pt; }
    .ryv-mcp-hero-sub{ font-size:12pt; color:#333; }
    .ryv-mcp-h{ font-size:20pt; }

    /* Panels become outlined blocks instead of tinted ones. */
    .ryv-mcp-tool, .ryv-mcp-prereq, .ryv-mcp-boundary, .ryv-mcp-finding-part,
    .ryv-mcp-lc, .ryv-mcp-flow-node, .ryv-mcp-brief-step, .ryv-mcp-venn-wrap,
    .ryv-mcp-anatomy, .ryv-mcp-plain, .tri-row, .ryv-mcp-progress, .ryv-mcp-chip,
    .ryv-mcp-score, .ryv-mcp-disclaimer, .ryv-mcp-mxn-panel, .fd-node{
      background:#fff !important; border-color:#c9c9c9 !important;
    }
    .ryv-mcp-boundaries{ background:#c9c9c9 !important; }
    .ryv-mcp-code{ border-color:#c9c9c9 !important; }
    .ryv-mcp-code, .ryv-mcp-code.is-fix{ background:#fafafa !important; border-color:#c9c9c9 !important; }
    .ryv-mcp-code.is-fix{ border-left:3px solid #1f6b45 !important; }
    .ryv-mcp-code pre{ background:transparent !important; color:#111 !important; }
    .ryv-mcp-code-lang{ color:#666 !important; }
    .ryv-mcp-steps li code, .ryv-mcp-callout code, .ryv-mcp-detail p code{ background:#eee !important; color:#111 !important; }
    .ryv-mcp-steps li::before{ color:#666 !important; }
    .ryv-mcp-tag, .ryv-mcp-toollist .tl{ border-color:#c9c9c9 !important; color:#333 !important; }
    .ryv-mcp-prereq-head .ic{ background:#eee !important; }
    .ryv-mcp-prereq-head .ic svg{ color:#333 !important; }

    /* Every accordion prints open: collapsed, the runbook and the attack
       library are the two things a printed sheet is actually for. */
    .ryv-mcp .ryv-faq-answer-wrap{
      display:block !important; height:auto !important; max-height:none !important;
      overflow:visible !important; opacity:1 !important; visibility:visible !important;
    }
    .ryv-mcp .ryv-faq-item{ page-break-inside:avoid; break-inside:avoid; border-bottom:1px solid #ddd; }
    .ryv-mcp .ryv-faq-list{ padding:0; }
    .ryv-mcp-reveal, .ryv-mcp .ryv-reveal{ opacity:1 !important; transform:none !important; }
    /* The kill-chain stages are revealed by an animation, and print disables
       animation, so without this they print as blank space. Force the finished
       frame and re-ink the icon tiles for paper. */
    .fd-node, .fd-arrow{ opacity:1 !important; transform:none !important; }
    .fd-fill{ transform:scaleX(1) !important; }
    .fd-pulse{ display:none !important; }
    .fd-ic{ border-color:#bbb !important; background:#fff !important; color:#333 !important; }
    /* SVG fills are not reached by the background rules above */
    .an-payload-box, .an-node-box, .sc2-panel, .box, .hub{ fill:#fff !important; }
    .an-payload-txt, .an-node-label, .an-node-sub, .lbl, .hub-lbl{ fill:#222 !important; }
    .fd-node.fd-threat{ background:#fff !important; border-color:#a32b1f !important; }
    .fd-node.fd-threat .fd-ic{ border-color:#a32b1f !important; color:#a32b1f !important; }
    .fd-node.fd-impact .fd-ic{ background:#fff !important; }
    .ryv-mcp-sec, .ryv-mcp-prereq, .ryv-mcp-finding-part, .ryv-mcp-flowdiag{ break-inside:avoid; }
    .ryv-mcp h2, .ryv-mcp h3, .ryv-mcp h4{ break-after:avoid; }

    /* Checkboxes need a visible box on paper so the sheet can be worked by hand. */
    .ryv-mcp-check .box{ border:1.5px solid #333 !important; }
    .ryv-mcp-check input:checked + .box{ background:#333 !important; border-color:#333 !important; }
    .ryv-mcp-check input:checked + .box svg path{ stroke:#fff !important; }
    .ryv-mcp-check input:checked ~ .txt{ color:#555 !important; }

    /* Score toggles print as an empty box to tick, not as dead buttons. */
    .ryv-mcp-stog button{ border:1px solid #999 !important; color:#333 !important; background:#fff !important; }
    .ryv-mcp-stog button[aria-pressed="true"]{ background:#333 !important; color:#fff !important; border-color:#333 !important; }

    a[href]{ color:#111 !important; }
  }