:root{
    --navy:#232F38; --turq:#E46154; --teal:#B13B2F; --ocean:#B13B2F;
    --grey:#7F7F7F; --greyd:#4a5160; --line:#e2e7ec; --bg:#f4f6f8; --card:#fff;
    --ok:#0d7a52; --warn:#a4262c;
    --brand-bright:#E46154; --brand-deep:#232F38; --brand-mid:#B13B2F;
    --on-deep:#fff; --on-bright:#0b1020;
    /* always readable on a near-white tint, whatever the brand is */
    --ink:#12182a;
    /* The documentation layer. Warm paper rather than blue-grey, one accent
       rule, and a dark panel for anything the tool actually produced. A screen
       that explains something is a different job from a screen you work in,
       and it reads better on paper-coloured ground. */
    --paper:#f5f4f1; --papercard:#fff; --paperline:#e4e1db;
    --accent:#d1642a; --term:#2b2b2b; --termhd:#3a3a3a; --termtx:#e8e6e2;
    --termok:#5fcf80; --termbad:#f07a6a; --termdim:#9a978f;
    --label:#8a8578;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    font-family:var(--font-ui, "Helvetica Neue", Helvetica, Arial, sans-serif); background:var(--paper);
    color:#161b25; font-size:15px; line-height:1.55;
  }
  header{
    background:linear-gradient(100deg,var(--g-from) 0%,var(--g-mid) 45%,var(--g-to) 100%);
    color:#fff; padding:22px 32px 20px;
  }
  header .top{display:flex; align-items:center; gap:14px}
  header .top img{height:30px; width:auto; display:block}
  header h1{margin:0; font-size:24px; letter-spacing:-.2px; line-height:1.2}
  header p{margin:4px 0 0; opacity:.86; font-size:13.5px}
  .wrap{max-width:1080px; margin:0 auto; padding:0 20px 80px}

  /* ---------- status strip ---------- */
  .strip{
    background:var(--card); border:1px solid var(--line); border-radius:4px;
    margin:20px 0 10px; padding:14px 18px; display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  }
  .pill{
    font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:4px;
    background:#eef7f8; color:var(--ocean); white-space:nowrap;
  }
  .pill.bad{background:#fdeeee; color:var(--warn)}
  .pill.good{background:#e9f6f0; color:var(--ok)}
  .strip .sp{flex:1}
  .cust{display:flex; align-items:center; gap:10px}
  .cust label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--greyd)}

  input,select,textarea,button{font-family:inherit; font-size:14px}
  input,select,textarea{
    padding:9px 11px; border:1px solid var(--line); border-radius:4px; background:#fff; color:inherit;
  }
  input:focus,select:focus,textarea:focus{outline:2px solid var(--teal); outline-offset:-1px}
  textarea{width:100%; resize:vertical; line-height:1.5}
  button{
    font-weight:650; padding:10px 18px; border-radius:4px; border:1px solid var(--navy);
    background:var(--navy); color:#fff; cursor:pointer;
  }
  button:hover:not(:disabled){background:#0c2372}
  button.ghost{background:#fff; color:var(--navy)}
  button.ghost:hover:not(:disabled){background:#eef3fb}
  button.small{padding:7px 13px; font-size:13px}
  button:disabled{opacity:.4; cursor:not-allowed}

  /* ---------- the step bar, on the Offering Assessment pattern ---------- */
  /* Sticky, because the gate is one press and no scroll. The rail was at the
     top of five thousand pixels, so moving on meant scrolling back up to it or
     down to the after-card at the bottom. */
  .steps{display:flex; border:1px solid var(--line); border-radius:4px; overflow:hidden;
    position:sticky; top:6px; z-index:18; background:var(--card);
    box-shadow:0 2px 10px color-mix(in srgb, var(--navy) 6%, transparent);
         background:#fff; margin:16px 0 4px}
  .sbtn{flex:1; display:flex; gap:10px; align-items:flex-start; text-align:left; cursor:pointer;
        padding:12px 14px; border:0; border-right:1px solid var(--line); background:#fff;
        color:var(--greyd); font-size:13.5px; line-height:1.35}
  .sbtn:last-child{border-right:0}
  .sbtn:hover{background:#f7fafc}
  .sbtn .n{flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:1px solid var(--line);
           display:inline-flex; align-items:center; justify-content:center; font-size:11.5px;
           font-weight:800; font-family:"Courier New",monospace; margin-top:1px}
  .sbtn b{display:block; font-weight:700; color:var(--navy)}
  .sbtn .st{display:block; font-size:11.5px; color:var(--grey); margin-top:2px}
  .sbtn[aria-current=true]{background:var(--navy); color:#fff}
  .sbtn[aria-current=true] b{color:#fff}
  .sbtn[aria-current=true] .st{color:#9fd9e2}
  .sbtn[aria-current=true] .n{border-color:rgba(255,255,255,.55); color:#fff}
  .sbtn[data-done=true] .n{background:var(--ok); border-color:var(--ok); color:#fff}
  .sbtn[data-blocked=true] .st{color:#b3781a}
  .sbtn[aria-current=true][data-blocked=true] .st{color:#ffd79a}
  .blocked{background:#fff7e8; border:1px solid #f0dcb4; border-radius:4px; padding:11px 14px;
           font-size:13px; margin:14px 0 0; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
  .blocked .sp{flex:1}
  .demo{background:#eef7f8; border:1px solid #cfe7ea; border-radius:4px; padding:13px 17px;
        font-size:13.5px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:14px 0 0}
  .demo .sp{flex:1}

  /* ---------- steps ---------- */
  .step{
    display:none;
    background:var(--card); border:1px solid var(--line); border-radius:4px;
    margin:12px 0; overflow:hidden;
  }
  .step.open{display:block}
  .step.done{border-color:#c9e6db}
  .shead{display:none}
  .num{
    flex:none; width:30px; height:30px; border-radius:50%; background:#e8edf5; color:var(--navy);
    font-weight:800; font-size:14px; display:grid; place-items:center;
  }
  .step.done .num{background:var(--ok); color:#fff}
  .step.open .num{background:var(--navy); color:#fff}
  .stitle{font-weight:700; font-size:17px; color:var(--navy)}
  .ssub{display:block; font-size:13px; color:var(--grey); margin-top:2px}
  .stitle{display:block}
  .chev{margin-left:auto; color:var(--grey); font-size:18px; transition:transform .15s}
  .step.open .chev{transform:rotate(90deg)}
  .sbody{display:none; padding:18px 20px 20px}
  /* Two halves of a step, and testers could not see where one ended. What you
     give it is amber down the left, what it returned is blue. */
  .inpane{
    border-left:4px solid #E0A33A; background:#fffdf8; border:1px solid #f0e3cc;
    border-left-width:4px; border-radius:4px; padding:14px 16px 4px; margin:0 0 14px;
  }
  .inpane > .panehd{
    font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
    color:#8a6412; margin:0 0 12px; display:flex; align-items:center; gap:8px;
  }
  .inpane > .panehd::after{content:""; flex:1; height:1px; background:#f0e3cc}
  .inpane > .lab:first-of-type{margin-top:0}
  .gnow{
    display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:14px 0 0;
    background:linear-gradient(100deg, var(--g-from), var(--g-mid) 55%, var(--g-to));
    border:0; border-radius:4px; padding:15px 17px; color:#fff;
  }
  .gnow .num{width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,.22); color:#fff; border:1px solid rgba(255,255,255,.4);
    display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 auto}
  .gnow > div{flex:1; min-width:240px}
  .gnow b{display:block; color:#fff; font-size:15px}
  .gnow span{display:block; color:rgba(255,255,255,.86); font-size:13px; margin-top:2px}
  .gnow button{background:#fff; color:var(--brand-deep); border-color:#fff}
  .gnow button:hover:not(:disabled){background:#eef3fb; color:var(--brand-deep)}
  /* the rail */
  .grail{display:flex; align-items:center; margin:22px 0 18px; padding:6px 22px}
  .glink{
    flex:1 1 auto; height:3px; margin:0 9px; border-radius:4px; background:var(--line);
    position:relative; overflow:hidden;
  }
  .glink::after{
    content:""; position:absolute; inset:0; border-radius:4px; transform-origin:left;
    transform:scaleX(0); background:var(--brand-bright);
    transition:transform .4s cubic-bezier(.4,0,.2,1);
  }
  .glink.lit::after{transform:scaleX(1)}
  .gdot{
    position:relative; z-index:1; width:36px; height:36px; border-radius:50%;
    border:2px solid var(--line); background:#fff; color:var(--grey); cursor:pointer;
    font:inherit; font-weight:700; font-size:14px; padding:0;
    display:flex; align-items:center; justify-content:center;
    transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s, border-color .3s, color .3s;
  }
  .gdot:hover{border-color:var(--ocean)}
  .gdot.past{background:#fff; border-color:var(--brand-bright); color:var(--brand-deep)}
  .gdot.on{background:var(--brand-deep); border-color:var(--brand-deep);
    color:var(--on-deep); transform:scale(1.2)}
  .gdot.on::after{
    content:""; position:absolute; inset:-7px; border-radius:50%;
    border:2px solid var(--brand-bright); animation:gpulse 2.1s ease-out infinite;
  }
  @keyframes gpulse{0%{opacity:.85; transform:scale(.9)} 70%{opacity:0; transform:scale(1.25)} 100%{opacity:0}}
  .gdot.gd-signed{border-color:#0D7A52}
  .gdot.gd-run{border-color:#E0A33A}
  /* The close is computed, so it is finished whenever it is there at all. It
     takes the same green as a validated step. */
  .gdot.gd-computed{background:#0D7A52; border-color:#0D7A52; color:#fff}
  .gdot.gd-computed.on{background:var(--brand-deep); border-color:var(--brand-deep); color:var(--on-deep)}

  /* the card */
  .gcard{
    border:1px solid var(--line); border-left:4px solid var(--line); border-radius:4px;
    background:#fff; padding:16px 18px 14px;
  }
  .gcard.g-signed{border-left-color:#0D7A52}
  .gcard.g-computed{border-left-color:#0D7A52}
  .gcard.g-run{border-left-color:#E0A33A}
  .gcard.g-ready{border-left-color:var(--brand-bright)}
  .gcard.g-optional{border-left-color:var(--grey)}
  .gcard.inright{animation:gin .34s cubic-bezier(.2,.7,.3,1) both}
  .gcard.inleft{animation:ginl .34s cubic-bezier(.2,.7,.3,1) both}
  @keyframes gin{from{opacity:0; transform:translateX(26px)} to{opacity:1; transform:none}}
  @keyframes ginl{from{opacity:0; transform:translateX(-26px)} to{opacity:1; transform:none}}

  /* what goes in, what comes out */
  .gflow{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    background:var(--band); border-radius:4px; padding:16px; margin:4px 0 16px}
  .gside{display:flex; flex-direction:column; gap:7px; flex:1 1 0; min-width:150px}
  .gchip{
    background:#fff; border:1px solid var(--line); border-radius:4px;
    padding:5px 12px; font-size:12px; color:var(--greyd); text-align:center;
    animation:gchipin .4s ease both;
  }
  .gchip.out{
    border-color:color-mix(in srgb, var(--brand-bright) 42%, #dfe5ec);
    background:color-mix(in srgb, var(--brand-bright) 8%, #fff);
    color:var(--ink); font-weight:650;
  }
  @keyframes gchipin{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
  .gpipe{position:relative; flex:0 0 54px; height:3px; background:#dbe3ea; border-radius:4px}
  .gpipe::after{content:""; position:absolute; right:-1px; top:-3.5px;
    border:5px solid transparent;
    border-left-color:color-mix(in srgb, var(--brand-deep) 22%, #dbe3ea)}
  .gpipe i{
    position:absolute; top:-3px; left:0; width:9px; height:9px; border-radius:50%;
    background:var(--brand-bright); box-shadow:0 0 0 3px currentColor; color:rgba(0,0,0,.06);
    animation:gtravel 1.8s ease-in-out infinite;
  }
  @keyframes gtravel{0%{left:0; opacity:0} 18%{opacity:1} 82%{opacity:1} 100%{left:45px; opacity:0}}
  .gbox{
    flex:0 0 auto; background:var(--brand-deep); color:var(--on-deep); border-radius:4px;
    padding:11px 16px; text-align:center; min-width:120px;
  }
  .gbox b{display:block; font-size:13px}
  .gbox span{display:block; font-size:11px; opacity:.8; margin-top:2px}
  .gnav{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:13px 0 0}
  .gnav .sp{flex:1}
  .gnav button[disabled]{opacity:.4; cursor:default}

  @media (prefers-reduced-motion: reduce){
    .gcard.inright, .gcard.inleft, .gchip{animation:none}
    .gdot.on::after, .gpipe i{animation:none}
    .gline i{transition:none}
    .gdot{transition:none}
  }
  .ghd{display:flex; align-items:center; gap:11px; margin:0 0 11px; flex-wrap:wrap}
  .ghd b{color:var(--navy); font-size:16px}
  .gn{width:26px; height:26px; border-radius:50%; background:var(--band); color:var(--navy);
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700}
  .gpill{font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
    border-radius:4px; padding:2px 9px; background:var(--band); color:var(--grey)}
  .gp-signed{background:#e6f4ee; color:#0D7A52}
  .gp-computed{background:#e6f4ee; color:#0D7A52}
  .gp-run{background:#fbf1de; color:#8a6412}
  .gp-ready{background:var(--t-inferred); color:var(--brand-accent-text)}
  /* The grammar block. A narrow fixed gutter so the four labels line up as a
     column somebody reads once, and the values start at the same x on every
     card. A monospace label because it is a key rather than a sentence. */
  .ggram{border-top:1px solid var(--paperline); margin-top:12px; padding-top:11px}
  .grow{display:grid; grid-template-columns:58px 1fr; gap:14px; margin-bottom:7px;
    font-size:13px; line-height:1.6}
  .grow > b{color:var(--label); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
    font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:600; padding-top:3px}
  .grow > span{color:var(--greyd)}
  .gwarn{color:#8a6412}
  /* adding and removing a line */
  .addbar{
    display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin:9px 0 0;
    padding:9px 12px; border:1px dashed var(--line); border-radius:4px; background:#fcfdfe;
  }
  .addbar .sub{font-size:12px}
  .dropx{
    float:right; width:20px; height:20px; padding:0; line-height:1; font-size:15px;
    border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--grey);
    cursor:pointer; margin-left:6px;
  }
  .dropx:hover:not(:disabled){background:#fbe9ea; border-color:#e8c4c6; color:#A4262C}
  .eds{
    font:inherit; font-size:12.5px; padding:3px 7px; border-radius:4px;
    border:1px solid var(--line); background:#fff; max-width:100%;
  }
  .aftcard{
    border:1px solid #cfe0ea; border-left:4px solid var(--brand-bright); border-radius:4px;
    background:#f7fbfd; padding:13px 16px; margin:12px 0 0;
  }
  .afthd{font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
    color:var(--ocean); margin:0 0 10px}
  .aftrow{display:grid; grid-template-columns:118px 1fr; gap:12px; margin-bottom:7px;
    font-size:13px; line-height:1.6}
  .aftrow b{color:var(--navy); font-size:11px; letter-spacing:.03em; text-transform:uppercase;
    padding-top:2px}
  .aftrow span{color:var(--greyd)}
  .skipcard{
    border:1px solid #f0e3cc; border-left:4px solid #E0A33A; border-radius:4px;
    background:#fffdf8; padding:13px 16px; margin:0 0 14px;
  }
  .skipcard.skipran{border-left-color:var(--grey); background:#fafbfc; border-color:var(--line)}
  .skiphd{font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
    color:#8a6412; margin:0 0 8px}
  .skipcard.skipran .skiphd{color:var(--grey)}
  .skipcard p{margin:0 0 7px; font-size:13px; line-height:1.6; color:var(--greyd)}
  .skipcard b{color:var(--navy)}
  .skipfoot{color:var(--grey) !important; font-size:12.5px !important}
  .offhelp{
    margin-top:9px; padding:10px 13px; border-radius:4px; background:#fffdf8;
    border:1px solid #f0e3cc; border-left:4px solid #E0A33A;
    color:var(--greyd); font-size:12.5px; line-height:1.6; font-weight:400;
  }
  .offhelp b{color:var(--navy)}
  /* the connection pill next to the version */
  .nettag{
    display:inline-block; vertical-align:4px; margin-left:8px; font-size:11.5px;
    font-weight:700; border-radius:4px; padding:2px 10px;
    background:#fbe9ea; color:#A4262C; border:1px solid rgba(255,255,255,.35);
  }
  .vtag{
    display:inline-block; vertical-align:4px; margin-left:10px;
    font-size:11.5px; font-weight:700; letter-spacing:.03em;
    background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);
    color:#fff; border-radius:4px; padding:2px 10px; cursor:default;
  }
  .whocard{border:1px solid var(--line); border-radius:4px; background:#fff; padding:12px 14px; margin:0 0 12px}
  .whohd{font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
    color:var(--grey); margin:0 0 9px}
  .whorow{display:flex; flex-wrap:wrap; gap:8px}
  .whopick{display:flex; flex-direction:column; align-items:flex-start; gap:1px;
    background:#f7fbfd; border:1px solid #cfe0ea; border-radius:4px; padding:7px 12px;
    cursor:pointer; text-align:left; font:inherit; color:inherit}
  .whopick:hover{background:#eef6fb; border-color:var(--ocean)}
  .whopick b{font-size:13.5px; color:var(--navy)}
  .whopick span{font-size:11.5px; color:var(--grey)}
  .whofrom{font-size:10px; letter-spacing:.03em; text-transform:uppercase; color:#9aa7b2}
  .whoseat{font-size:12.5px; color:var(--grey); margin-top:9px; line-height:1.5}
  .step.open .sbody{display:block}

  .lab{font-size:12px; font-weight:700; color:var(--navy); margin:16px 0 6px; text-transform:uppercase; letter-spacing:.5px}
  .tagin,.tagcar{
    font-size:10.5px; font-weight:700; letter-spacing:.4px; padding:2px 8px; border-radius:4px;
    margin-left:8px; text-transform:none;
  }
  .tagin{background:#fff3e0; color:#8a5a10}
  .tagcar{background:#eaf6f7; color:var(--ocean)}
  .hint{font-size:12.5px; color:var(--grey); margin:5px 0 0}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
  @media(max-width:820px){.grid2,.grid3{grid-template-columns:1fr}}
  .acts{display:flex; gap:10px; align-items:center; margin-top:18px; flex-wrap:wrap}
  .status{font-size:13px; color:var(--greyd)}
  .status.err{color:var(--warn); font-weight:650}
  .dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--turq); margin-right:7px; animation:pulse 1s infinite}
  @keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

  .carry{
    background:#f4fafb; border:1px solid #dceef1; border-radius:4px; padding:9px 13px;
    font-size:12.5px; color:var(--greyd); margin-top:14px;
  }
  .carry b{color:var(--navy)}

  .out{border:1px solid var(--line); border-radius:4px; padding:2px 18px 14px; margin-top:16px; background:#fcfdfe; overflow-x:auto}
  .out:empty{display:none}
  .out h2,.out h3,.out h4{color:var(--navy); margin:16px 0 6px; font-size:16px}
  .out table{border-collapse:collapse; width:100%; margin:10px 0; font-size:13px}
  .out th{background:var(--navy); color:#fff; text-align:left; padding:7px 9px}
  .out td{border:1px solid var(--line); padding:6px 9px; vertical-align:top}
  .out tr:nth-child(even) td{background:#f7fafb}
  .out ul,.out ol{margin:8px 0 8px 20px; padding:0}
  .out li{margin:3px 0}
  .out p{margin:7px 0}
  .out code{background:#eef1f4; padding:1px 4px; border-radius:4px}

  details{border:1px solid var(--line); border-radius:4px; padding:9px 14px; margin-top:14px; background:#fafbfc}
  summary{cursor:pointer; font-weight:650; color:var(--navy); font-size:13px}
  details pre{white-space:pre-wrap; font-size:12px; color:var(--greyd); line-height:1.45}

  /* ---------- export bar ---------- */
  .exportbar{
    position:sticky; bottom:0; margin-top:22px; background:var(--card);
    border:1px solid var(--line); border-radius:4px; padding:16px 20px;
    display:flex; gap:12px; align-items:center; flex-wrap:wrap;
    box-shadow:0 -2px 16px color-mix(in srgb, var(--navy) 6%, transparent);
  }
  .exportbar .sp{flex:1}
  /* G2. The mode control sits at the far end of the export row. */
  #resExp #edSlot{margin-left:10px}
  .restore{
    background:#fff7e8; border:1px solid #f0dcb4; border-radius:4px; padding:12px 16px;
    display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:13px; margin:0 0 10px;
  }
  .restore .sp{flex:1}
  .note{background:#eaf6f7; border-radius:4px; padding:13px 17px; font-size:13px; margin-top:18px}
  .note b{color:var(--navy)}
  footer{max-width:1080px; margin:0 auto; padding:0 20px 40px; color:var(--grey); font-size:12px}

  /* ---------- header nav ---------- */
  header .hbar{display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap}
  header .hbar .sp{flex:1}
  /* The bar. One segmented control for the three screens the work moves
     through, a hairline, then the quieter places you visit now and then. The
     white pill travels rather than blinking, which is the whole difference
     between this reading as considered and reading as a row of buttons. */
  .nav{
    display:inline-flex; align-items:center; gap:1px; padding:4px;
    border-radius:4px; background:color-mix(in srgb, var(--navy) 13%, transparent);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
    -webkit-backdrop-filter:blur(10px) saturate(1.2);
    backdrop-filter:blur(10px) saturate(1.2);
  }
  .seg{position:relative; display:inline-flex; gap:2px}
  .segpill{
    position:absolute; top:0; left:0; height:100%; width:0; border-radius:4px;
    background:#fff; box-shadow:0 1px 2px color-mix(in srgb, var(--navy) 20%, transparent), 0 3px 10px color-mix(in srgb, var(--navy) 12%, transparent);
    transition:transform .34s cubic-bezier(.34,1.12,.42,1), width .34s cubic-bezier(.34,1.12,.42,1),
               opacity .18s ease;
    pointer-events:none; opacity:0;
  }
  .segpill.show{opacity:1}
  /* Every rule here is prefixed with .nav so it outranks the global
     button:hover, which was painting the live tab navy on navy. */
  .nav .hbtn{
    position:relative; z-index:1; background:transparent; border:0; cursor:pointer;
    color:rgba(255,255,255,.88); font:inherit; font-weight:600; font-size:13px;
    letter-spacing:.005em; padding:6px 13px; border-radius:4px; line-height:1.3;
    white-space:nowrap; transition:color .2s ease, background .2s ease;
    -webkit-font-smoothing:antialiased;
  }
  .nav .hbtn:hover:not(:disabled){background:rgba(255,255,255,.14); color:#fff}
  .nav .seg .hbtn.on,
  .nav .seg .hbtn.on:hover:not(:disabled){background:transparent; color:var(--navy); font-weight:680}
  .nav .hbtn.quiet{color:rgba(255,255,255,.74); font-weight:550; padding:6px 11px}
  .nav .hbtn.quiet:hover:not(:disabled){color:#fff; background:rgba(255,255,255,.14)}
  .nav .hbtn.quiet.on,
  .nav .hbtn.quiet.on:hover:not(:disabled){color:var(--navy); background:#fff; font-weight:650;
    box-shadow:0 1px 2px color-mix(in srgb, var(--navy) 18%, transparent), 0 3px 10px color-mix(in srgb, var(--navy) 10%, transparent)}
  .nav .hbtn:focus-visible{outline:2px solid #fff; outline-offset:2px}
  .navdiv{width:1px; height:17px; background:rgba(255,255,255,.24); margin:0 5px; flex:0 0 auto}
  @media (prefers-reduced-motion: reduce){ .segpill{transition:opacity .1s ease} }
  .fstate{font-size:12px; color:rgba(255,255,255,.86); font-family:"Courier New",monospace}
  .swatch{display:inline-block; width:100%; height:34px; border-radius:4px; border:1px solid var(--line)}

  /* ---------- config screen ---------- */
  .hide{display:none !important}
  .card{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:0 0 20px; margin:14px 0; overflow:hidden}
  /* The plain card header follows the brand. The .k- variants below keep their
     own colours, because those are the section coding and not the brand. */
  .card h2{margin:0 0 14px; font-size:15px; color:var(--on-deep);
    background:var(--brand-deep); padding:11px 22px; font-weight:700}
  .card > *:not(h2){margin-left:22px; margin-right:22px}
  .card > table{width:calc(100% - 44px)}
  /* one colour per kind of card, set on the head band */
  .card.k-brief h2{background:#4a5568}
  .card.k-interviews h2{background:var(--navy)}
  .card.k-strategy h2{background:var(--ocean)}
  .card.k-offering h2{background:#0D7A52}
  .card.k-persona h2{background:var(--teal)}
  .card.k-questions h2{background:#8a5a10}
  .card.k-settings h2{background:var(--ocean)}
  .note{background:#eaf6f7; border-radius:4px; padding:13px 17px; font-size:13px; margin-top:18px}
  .note b{color:var(--navy)}
  .cnote{font-size:12.5px; color:var(--greyd); margin:0 0 14px}
  /* G1. A measure against its target. The line is the target and the fill is
     the verdict the tool already computed. */
  svg.bar{display:block; vertical-align:middle}
  td .bar{margin:1px 0}
  /* The argument's middle tier, in the same shape the deck page draws it. */
  .pyr .gov{font-size:16px; line-height:1.5; margin:0 0 16px; color:var(--navy); font-weight:600}
  .pyr .sup{border-left:3px solid var(--ocean); padding:0 0 0 12px; margin:0 0 14px}
  .pyr .suph{display:block; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
    color:var(--ocean); font-weight:700; margin:0 0 3px}
  .pyr .supc{margin:0 0 3px; font-size:15px; line-height:1.45; color:var(--navy); font-weight:600}
  .pyr .sub{margin:0 0 2px}
  .row{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start}
  .field{display:flex; flex-direction:column; gap:5px; min-width:180px}
  .field label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--greyd)}
  .field .sub{font-size:11.5px; color:var(--grey)}
  /* The card gives its children side margins, so a full-width table ran past
     the right edge and the card clipped its last column. */
  table.cfg{border-collapse:collapse; width:calc(100% - 44px); font-size:13px; margin-top:8px}
  table.cfg th{background:var(--navy); color:#fff; text-align:left; padding:7px 9px; font-weight:600}
  table.cfg td{border:1px solid var(--line); padding:5px 7px; vertical-align:middle}
  table.cfg input{width:100%}
  .mono{font-family:"Courier New",monospace}
  .promptbox{width:100%; min-height:380px; font-family:"Courier New",monospace; font-size:12.5px; line-height:1.45}
  .chips{display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 0}
  .chip{background:#eef3fb; color:var(--navy); border-radius:4px; padding:3px 9px; font-size:11.5px; font-family:"Courier New",monospace}

  /* ---------- results ---------- */
  .rhead{margin:20px 0 2px; font-size:22px; color:var(--navy); font-weight:700}
  .rsub{font-size:13.5px; color:var(--greyd); margin:0 0 6px; max-width:76ch}
  .grid{display:grid; gap:14px}
  .g2{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:repeat(3,1fr)}
  @media(max-width:900px){.g2,.g3{grid-template-columns:1fr}}
  .tile{border:1px solid var(--line); border-radius:4px; padding:14px 16px; background:#fcfdfe}
  .tile .big{font-size:26px; font-weight:800; color:var(--navy); line-height:1.15}
  .tile .cap{font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--grey); font-weight:700}
  .mk{display:inline-block; min-width:22px; text-align:center; border-radius:4px; padding:1px 6px;
      font-size:11px; font-weight:800; font-family:"Courier New",monospace; color:#fff}
  .mk.S,.mk.K{background:var(--ok)} .mk.T{background:var(--ocean)}
  .mk.I,.mk.A{background:#b3781a} .mk.U{background:var(--grey)} .mk.P{background:var(--teal)}
  .mk.W{background:var(--ocean)} .mk.M{background:#8a5a10}
  .pill2{display:inline-block; border-radius:4px; padding:4px 12px; font-size:12.5px; font-weight:700}
  .pill2.pass{background:#e9f6f0; color:var(--ok)}
  .pill2.fail{background:#fdeeee; color:var(--warn)}
  .pill2.sub{background:#f2f4f7; color:var(--greyd)}
  .note.good{border-left:4px solid var(--ok)}
  .note.warn{border-left:4px solid var(--warn);background:#fdf3f3}
  .pill2.gap{background:#fff5e4; color:#8a5a10}
  .pill2.int{background:#e8ebf3; color:var(--brand-deep)}
  .sentence{background:var(--navy); color:#fff; border-radius:4px; padding:18px 22px; font-size:18px; line-height:1.5}
  .bar{display:flex; height:24px; border-radius:4px; overflow:hidden; margin:8px 0 4px}
  .bar span{display:flex; align-items:center; justify-content:center; color:#fff; font-size:11.5px; font-weight:700}
  .keyrow{display:flex; gap:9px; align-items:baseline; font-size:13px; margin:3px 0}
  .keydot{flex:none; width:19px; height:19px; border-radius:50%; color:#fff; font-size:11px; font-weight:800;
          display:grid; place-items:center; margin-top:1px}
  .rtable{border-collapse:collapse; width:100%; font-size:13px}
  .rtable th{background:var(--navy); color:#fff; text-align:left; padding:7px 9px; font-weight:600}
  .rtable td{border:1px solid var(--line); padding:6px 9px; vertical-align:top}
  .empty{border:1px dashed var(--line); border-radius:4px; padding:26px; text-align:center; color:var(--grey); font-size:13.5px}
  .rt{
    border:1px solid var(--line); border-radius:4px; background:#fcfdfe; padding:2px 16px 12px;
    max-height:430px; overflow:auto;
  }
  .rt h2,.rt h3,.rt h4{color:var(--navy); margin:14px 0 6px; font-size:15px}
  .rt table{border-collapse:collapse; width:100%; margin:9px 0; font-size:12.5px}
  .rt th{background:var(--navy); color:#fff; text-align:left; padding:6px 8px; font-weight:600}
  .rt td{border:1px solid var(--line); padding:5px 8px; vertical-align:top}
  .rt tr:nth-child(even) td{background:#f7fafb}
  .rt ul,.rt ol{margin:6px 0 6px 20px; padding:0}
  .rt p{margin:6px 0; font-size:13.5px}
  .rt code{background:#eef1f4; padding:1px 4px; border-radius:4px}

  /* the sign-off strip under every result, and the screen it feeds */
  .cfm{
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    margin-top:12px; padding:10px 13px; border-radius:4px;
    background:#f5f8f9; border:1px solid var(--line);
  }
  .cfm .q{font-size:13px; color:var(--navy); font-weight:600}
  .cfm .why{font-size:12.5px; color:var(--grey); flex:1 1 100%; margin:0}
  .cfm.ok{background:#eff9f3; border-color:#c3e4d1}
  .cfm.ed{background:#fff6ea; border-color:#f0dab8}
  .cfm .full{flex:1 1 100%}
  .cfm textarea{width:100%; min-height:230px}
  .cfm input[type=text]{width:100%}

  .aprop{border:1px solid var(--line); border-radius:4px; padding:14px 16px; margin:12px 0; background:#fcfdfe}
  .aprop h3{margin:0 0 4px; font-size:15px; color:var(--navy)}
  .held{opacity:.72}
  .tagpill{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
           padding:2px 8px; border-radius:4px; background:#eaf6f7; color:var(--ocean); margin:0 0 5px}
  .tagpill.bar{background:#f1f2f4; color:var(--grey)}
  .wiz{
    display:flex; gap:14px; align-items:center; flex-wrap:wrap;
    background:linear-gradient(90deg, color-mix(in srgb, var(--turq) 13%, transparent), color-mix(in srgb, var(--navy) 7%, transparent));
    border:1px solid #cfe6e9; border-radius:4px; padding:13px 16px; margin:16px 0 4px;
  }
  .wiz .num{
    width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:0 0 auto;
  }
  .wiz .txt{flex:1 1 320px; min-width:260px}
  .wiz .txt b{color:var(--navy); font-size:14px}
  .wiz .txt span{display:block; color:var(--grey); font-size:12.5px; margin-top:2px}
  .found{
    border:1px solid #cfe0ea; border-radius:4px; background:#f6fbfd; padding:2px 14px 10px; max-height:330px; overflow:auto;
  }
  .found table{border-collapse:collapse; width:100%; margin:8px 0; font-size:12.5px}
  .found th{background:var(--ocean); color:#fff; text-align:left; padding:5px 8px}
  .found td{border:1px solid var(--line); padding:4px 8px; vertical-align:top}
  .found h3{font-size:13.5px; color:var(--navy); margin:12px 0 4px}
  .tagfound{
    font-size:10.5px; font-weight:700; letter-spacing:.4px; padding:2px 8px; border-radius:4px;
    margin-left:8px; text-transform:none; background:#e6f4ea; color:#1c6b3c;
  }
  body.simple .adv{display:none !important}
  /* H1. The key box lives on the strip with class adv, so in the simple mode
     every first-time user is in it was invisible, and the message on the run
     path told them to paste a key "in the box at the top". The box was there
     and they could not see it. Where a key is needed and missing, it is not an
     advanced control. */
  body.simple .strip #keyBox.needed{display:inline !important}
  #pKey.route{cursor:pointer; text-decoration:underline; text-underline-offset:2px}
  /* On a cold open there is nothing to act on yet, so the screen shows the two
     doors and nothing else. */
  body.cold .steps, body.cold .step, body.cold .exportbar, body.cold .wiz, body.cold .strip{display:none !important}
  body:not(.simple) .simplenote{display:none}
  .simplenote{color:var(--grey)}
  .first{
    border:1px solid #cfe6e9; border-radius:4px; padding:20px 22px; margin:18px 0 4px;
    background:linear-gradient(120deg, color-mix(in srgb, var(--turq) 10%, transparent), color-mix(in srgb, var(--navy) 5%, transparent));
  }
  .first h3{margin:0 0 6px; color:var(--navy); font-size:17px}
  .first p{margin:0 0 14px; font-size:13.5px; color:var(--grey); max-width:78ch}
  .first .doors{display:flex; gap:22px; flex-wrap:wrap}
  .first .door{
    flex:1 1 300px; background:#fff; border:1px solid var(--line); border-radius:4px; padding:15px 16px;
  }
  .first .door b{color:var(--navy); font-size:14px; display:block; margin-bottom:4px}
  .first .door span{font-size:12.5px; color:var(--grey); display:block; margin-bottom:11px}
  .first .door input{width:100%; margin-bottom:9px}
  /* An input and a result are different kinds of thing, so they do not look the
     same. Everything you type sits on white. Everything the model wrote sits in
     a tinted card with its name on it. */
  .resultcard{
    border:1px solid #cfe0ea; border-left:4px solid var(--ocean); border-radius:4px;
    background:#f7fbfd; padding:0 0 14px; margin:14px 0 0; overflow:hidden;
  }
  .resultcard > .rlab{
    font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
    color:#fff; background:var(--ocean); margin:0 0 10px; padding:7px 18px;
  }
  .resultcard > .out{padding:0 18px}
  .helpq{
    display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
    border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ocean);
    font-size:11px; font-weight:700; margin-left:7px; cursor:help; vertical-align:middle;
  }
  .webchip{
    display:inline-flex; gap:8px; align-items:center; font-size:12px; color:var(--grey);
    border:1px solid var(--line); border-radius:4px; padding:4px 11px; margin:14px 0 2px; background:#fff;
  }
  .webchip b{color:var(--navy)}
  .webchip .dotw{width:8px; height:8px; border-radius:50%; background:var(--grey)}
  .webchip.on .dotw{background:var(--ok)}
  .exbar{
    display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:14px 0 0;
    background:#fff3e0; border:1px solid #f0d8b4; border-radius:4px; padding:11px 15px; font-size:13px; color:#8a5a10;
  }
  .exbar b{color:#6b4409}
  /* A real customer interview is not the same warning as an invented one. */
  .door.dnew{border-left:3px solid #B26206}
  .door.dcross{border-left:3px solid var(--ocean)}
  .door.dnew button:not(.ghost){background:#B26206; border-color:#B26206}
  .door.dnew button:not(.ghost):hover:not(:disabled){background:#9a5405}
  .firstfoot{display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-top:16px;
    padding-top:14px; border-top:1px solid var(--line)}
  .firstfoot .sub{margin-left:auto; font-size:12.5px}
  .acgrp{margin-top:14px}
  .acgrp .cap{display:block; margin-bottom:7px; font-size:11.5px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; color:var(--navy)}
  .acrow{display:flex; gap:10px; align-items:flex-start; padding:9px 11px; border-radius:4px;
    border:1px solid var(--line); background:#fff; margin-bottom:6px; font-size:13px; line-height:1.5}
  .acrow.ac-fail{border-left:3px solid #8a2a2f}
  .acrow.ac-warn{border-left:3px solid #E0A33A}
  .acrow b{color:var(--navy)}
  .acrow .fix{margin-top:3px; color:#5a6472; font-size:12.5px; line-height:1.5}

  /* ---- Ask ---- */
  .askwrap{max-width:900px; margin:0 auto; padding:26px 0 40px}
  .askh{font-size:34px; margin:0 0 6px; color:var(--navy); letter-spacing:-.01em}
  .asksub{margin:0 0 18px; color:var(--greyd); font-size:14.5px; line-height:1.6}
  .askbar{display:flex; gap:10px; align-items:stretch}
  .askbar input{flex:1; font:inherit; font-size:16px; padding:14px 16px; border-radius:12px;
    border:1.5px solid var(--line); background:#fff; color:var(--navy)}
  .askbar input:focus{outline:none; border-color:var(--ocean)}
  .askbar button{padding:0 22px; border-radius:12px; font-size:15px}
  .askchips{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 20px}
  .askchip{font:inherit; font-size:13px; padding:7px 13px; border-radius:999px; cursor:pointer;
    border:1px solid var(--line); background:#fff; color:var(--greyd)}
  .askchip:hover{border-color:var(--ocean); color:var(--navy)}
  .askrow{padding:13px 0; border-top:1px solid var(--line)}
  .askrow:first-of-type{border-top:0}
  .askwhat{display:flex; gap:9px; align-items:baseline; font-size:15px; color:var(--navy)}
  .askbits{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:7px}
  .askbits span{font-size:12.5px; color:#5a6472}
  .askbits i{display:block; font-style:normal; font-size:10.5px; text-transform:uppercase;
    letter-spacing:.5px; color:var(--grey); font-weight:700}
  .askfrom{margin-top:14px; font-size:12px; color:var(--grey)}
  .asklist{margin:0; padding-left:20px; color:var(--greyd); font-size:14px; line-height:1.9}
  .askmodel{display:inline-flex; gap:7px; align-items:center; font-size:12.5px; color:var(--greyd);
    padding:7px 13px; border:1px dashed var(--line); border-radius:999px; cursor:pointer}
  .askmodel input{margin:0}
  .tierf{display:flex; flex-direction:column; gap:4px}
  .tierf i{font-style:normal; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px;
    color:var(--grey); font-weight:700}
  .tierf input,.tierf select{font:inherit; font-size:13px; padding:7px 9px; border-radius:5px;
    border:1px solid var(--line); background:#fff; color:var(--navy); min-width:180px}
  .agtrail{margin:10px 0 4px; padding:10px 12px; background:#f4f6f9; border-radius:8px;
    font-size:12px; color:#5a6472}
  .agtrail b{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px;
    color:var(--grey); margin-bottom:5px}
  .agtrail span{display:block; line-height:1.7}
  /* The rule's own id, so a check can be looked up in the ontology rather than
     argued about from its wording. Only the checks that answer to a declared
     constraint carry one. */
  .fix .cid{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px;
    color:#5a6472; background:#eef1f5; border-radius:4px; padding:1px 5px; white-space:nowrap}
  .conbox{border:1px solid var(--line); border-left:3px solid var(--ocean); border-radius:4px;
    padding:14px 16px; background:#fff; margin-top:12px}
  .cont b{font-size:15.5px; color:var(--navy); line-height:1.45}
  .conq{margin:9px 0 0; padding-left:12px; border-left:2px solid var(--line);
    font-style:italic; color:#4a5462; line-height:1.55}
  .conwhy{margin:9px 0 0; font-size:13.5px; line-height:1.55}
  .congrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px;
    margin-top:13px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; line-height:1.5}
  .congrid .cap{display:block; margin-bottom:3px}
  .prlist{display:flex; flex-direction:column; gap:0}
  .prrow{display:grid; grid-template-columns:1fr 210px; gap:14px; padding:11px 0;
    border-bottom:1px solid var(--line); align-items:start}
  .prrow:last-child{border-bottom:0}
  .prwhat b{font-size:14px; color:var(--navy)}
  .prwhat .sub{display:block; margin-top:3px; line-height:1.5}
  .prsrc{text-align:right}
  .fixbar{display:flex; gap:14px; align-items:center; justify-content:space-between;
    border:1px solid #e2adb0; border-left:3px solid #8a2a2f; background:#fdf0f0;
    border-radius:4px; padding:12px 15px; margin:0 0 14px; font-size:13.5px; line-height:1.55}
  .fixbar button{flex:0 0 auto; background:#8a2a2f; border-color:#8a2a2f}
  .fixbar button:hover:not(:disabled){background:#742327}
  .mvhd{font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    color:var(--navy); margin:20px 0 9px; padding-top:14px; border-top:1px solid var(--line)}
  .lans{font-size:12px; line-height:1.45; color:#7a5406; background:#fdf6e7;
    border:1px solid #e0c48b; border-radius:4px; padding:5px 8px; margin:7px 0 0}
  .mvlist{display:flex; flex-direction:column; gap:8px}
  .mvrow{display:flex; gap:11px; align-items:flex-start; border:1px solid var(--line);
    border-left:3px solid var(--line); border-radius:4px; padding:10px 12px; background:#fff}
  .mvn{flex:0 0 22px; height:22px; border-radius:50%; background:#f4f6f9; border:1px solid var(--line);
    text-align:center; font-size:12px; font-weight:700; color:#5a6472; line-height:21px}
  .mvt b{font-size:13.5px; color:var(--navy)}
  .lk{display:inline-block; font-size:11px; font-weight:700; padding:1px 7px; border-radius:4px;
    border:1px solid; margin-left:4px}
  .mvi{font-size:12.5px; margin-top:4px; line-height:1.5}
  .mvi .seen{font-weight:700; color:#1c6b3a}
  .mvi .unseen{font-weight:700; color:#7a5406}
  .pwho{margin:0 0 14px; font-size:14px; line-height:1.6}
  .lead3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px}
  .leadc{position:relative; border:1px solid var(--line); border-top:3px solid #B26206;
    border-radius:4px; padding:14px 14px 13px; background:#fff}
  .leadc .ln{position:absolute; top:10px; right:12px; font-size:26px; font-weight:800;
    color:#B26206; opacity:.22; line-height:1}
  .leadc .lt{font-weight:700; font-size:15px; color:var(--navy); padding-right:26px}
  .leadc .lsc{display:flex; gap:7px; margin:7px 0 8px}
  .leadc .lsc span{font-size:11.5px; font-weight:600; color:#5a6472; background:#f4f6f9;
    border:1px solid var(--line); border-radius:4px; padding:2px 8px; font-variant-numeric:tabular-nums}
  .leadc .lf{font-size:13px; line-height:1.55}
  ol.asks{margin:12px 0 0; padding-left:22px; line-height:1.6}
  ol.asks li{margin:0 0 9px; font-size:13.5px}
  @media(max-width:900px){ .lead3{grid-template-columns:1fr} }
  .condl{margin:6px 0 0; padding-left:2px; font-size:12.5px; line-height:1.5}
  .condl > div{margin:3px 0}
  .sbtn.nbmore{opacity:.66}
  .sbtn.nbmore .n{background:#f4f6f9; color:#5a6472; border:1px solid var(--line)}
  button.pill.modesw{cursor:pointer; font:inherit; font-size:12px; font-weight:700;
    letter-spacing:.01em; border:1px solid var(--line)}
  button.pill.modesw:hover{filter:brightness(.96)}
  .modemenu{position:fixed; z-index:60; width:330px; background:#fff;
    border:1px solid var(--line); border-radius:4px; box-shadow:0 12px 34px rgba(11,26,58,.16);
    padding:8px}
  .mmhd{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:#5a6472; padding:7px 9px 8px}
  .mmrow{display:block; width:100%; text-align:left; background:#fff; color:inherit;
    border:1px solid transparent; border-radius:4px; padding:9px 10px; cursor:pointer; font:inherit}
  .mmrow:hover{background:#f4f7fb}
  .mmrow.on{border-color:var(--ocean); background:#f2f8fb}
  .mmrow b{display:block; font-size:13.5px; color:var(--navy)}
  .mmrow span{display:block; font-size:12px; color:#5a6472; margin-top:2px; line-height:1.45}
  .mmft{font-size:11.5px; color:#5a6472; padding:8px 9px 4px; border-top:1px solid var(--line);
    margin-top:6px}
  .nbfoldbar{display:flex; gap:14px; align-items:center; justify-content:space-between;
    border:1px solid var(--line); border-left:3px solid #B26206; border-radius:4px;
    background:#fffaf3; padding:13px 15px; margin:0 0 14px}
  .nbfoldbar span{display:block; font-size:13px; line-height:1.55; color:#4a5462; margin-top:4px}
  .nbfoldbar button{flex:0 0 auto}
  .nbacts{display:flex; gap:8px; align-items:center; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end}
  #nbToCross{background:#B26206; border-color:#B26206}
  #nbToCross:hover:not(:disabled){background:#9a5405}
  body.nbfold #st1, body.nbfold #st2, body.nbfold #st3, body.nbfold #st4{display:none}
  .cscore{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.02em;
    padding:2px 7px; border-radius:4px; border:1px solid; white-space:nowrap}
  .cscore i{font-style:normal; font-weight:600; opacity:.72; font-variant-numeric:tabular-nums}
  .s-high{color:#1c6b3a; border-color:#9fcfb2; background:#eef8f2}
  .s-some{color:#7a5406; border-color:#e0c48b; background:#fdf6e7}
  .s-low, .s-none{color:#8a2a2f; border-color:#e2adb0; background:#fdf0f0}
  .s-unread{color:#5a6472; border-color:#cfd6de; background:#f4f6f9}
  .expick{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px;
    margin:12px 0 0; padding:14px; border:1px solid var(--line); border-radius:4px; background:#fff;
  }
  .expnote{
    grid-column:1/-1; font-size:12.5px; line-height:1.6; color:#8a2a2f;
    background:#fbe9ea; border:1px solid #e8c4c6; border-radius:4px; padding:10px 13px;
  }
  .expnote b{color:#6d1f24}
  .expcard{
    display:flex; flex-direction:column; align-items:flex-start; gap:5px; text-align:left;
    background:#fff; border:1px solid var(--line); border-radius:4px; padding:12px 14px;
    cursor:pointer; font:inherit; color:inherit; transition:border-color .18s, background .18s;
  }
  .expcard:hover{border-color:var(--brand-bright); background:var(--band)}
  .expcard > b{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--navy)}
  .expreal{
    font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    background:#fbe9ea; color:#8a2a2f; border-radius:4px; padding:2px 7px;
  }
  .expreads{font-size:12px; color:var(--brand-deep); font-weight:600}
  .expnote2{font-size:12px; color:var(--grey); line-height:1.5}
  /* G2. What the session is, beside what the tool is. It was a banner on
     every one of the sixteen Analysis tabs, which is sixteen copies of one
     fact about the file that is open. */
  .extag{display:inline-block; margin-left:8px; padding:2px 9px; border-radius:11px;
    font-size:11.5px; font-weight:700; letter-spacing:.02em; vertical-align:middle;
    background:#FFF3E0; color:#8a5a10; border:1px solid #F0D8B4}
  .extag.real{background:#FBE9EA; color:#8a2a2f; border-color:#E8C4C6}
  .exbar.exreal{background:#fbe9ea; border-color:#e8c4c6; color:#8a2a2f}
  .exbar.exreal b{color:#6d1f24}
  .tourlit{outline:3px solid var(--turq); outline-offset:4px; border-radius:4px; scroll-margin-top:120px}
  .tourpanel{
    position:fixed; right:26px; bottom:26px; width:380px; z-index:60;
    background:#fff; border:1px solid var(--line); border-radius:4px;
    box-shadow:0 14px 40px color-mix(in srgb, var(--navy) 22%, transparent); overflow:hidden;
  }
  .tourpanel .head{background:var(--navy); color:#fff; padding:10px 16px; font-size:12px; font-weight:700; letter-spacing:.4px}
  .tourpanel .body{padding:14px 16px 4px}
  .tourpanel h4{margin:0 0 6px; font-size:15px; color:var(--navy)}
  .tourpanel p{margin:0 0 10px; font-size:13px; color:var(--greyd); line-height:1.5}
  .tourpanel .acts{padding:0 16px 14px; margin:0}
  .jump{display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 18px}
  .jump a{
    font-size:12.5px; text-decoration:none; color:var(--navy); background:#fff;
    border:1px solid var(--line); border-radius:4px; padding:5px 13px;
  }
  .jump a:hover{border-color:var(--ocean); color:var(--ocean)}
  .jump a .n{color:var(--grey); margin-right:6px}
  .sumhead{
    background:var(--navy); color:#fff; border-radius:4px; padding:18px 22px; margin:0 0 14px;
  }
  .sumhead h3{margin:0 0 4px; font-size:17px; color:#fff}
  .sumhead p{margin:0; font-size:13.5px; color:#c9d6ea; max-width:80ch}
  .sumhead .line{font-size:20px; line-height:1.45; margin:12px 0 0; color:#fff}
  .sumgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:13px; margin:14px 0 4px}
  .sumtile{
    display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
    border-radius:4px; padding:14px 16px 15px; text-align:left; cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease;
    font:inherit; color:inherit;
  }
  .sumtile:hover{transform:translateY(-2px); box-shadow:0 6px 18px color-mix(in srgb, var(--navy) 10%, transparent)}
  .sumtile .cap{font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; font-weight:700}
  .sumtile .big{font-size:27px; line-height:1.12; margin-top:6px; font-weight:700; color:var(--navy)}
  .sumtile .sub{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
                margin-top:7px; font-size:12.5px; color:var(--grey)}
  .sumtile .go{margin-top:auto; padding-top:10px; font-size:11.5px; font-weight:600; opacity:0}
  .sumtile:hover .go{opacity:1}
  .sumhead .acts{margin-top:14px}
  .sumhead .acts .status{color:#c9d6ea}
  /* ---- the persona, drawn as the outcome it is ---------------------- */
  .phero{
    display:grid; grid-template-columns:1fr 250px; gap:26px; align-items:center;
    background:linear-gradient(115deg, var(--navy) 0%, #0a3a63 52%, var(--teal) 100%);
    border-radius:4px; padding:24px 26px; color:#fff; margin:2px 0 16px;
  }
  .phL{display:flex; gap:20px; align-items:center}
  .pmed{
    flex:0 0 84px; height:84px; border-radius:50%; background:rgba(255,255,255,.13);
    border:2px solid rgba(255,255,255,.4); display:flex; align-items:center;
    justify-content:center; font-size:29px; font-weight:700; letter-spacing:1px;
  }
  .pname{font-size:31px; font-weight:700; line-height:1.1}
  .ptitle{font-size:14.5px; color:#cfe3ee; margin-top:5px}
  .ppills{margin-top:11px; display:flex; gap:8px; flex-wrap:wrap}
  .ppill{
    font-size:11.5px; font-weight:600; padding:4px 11px; border-radius:4px;
    background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);
  }
  .ppill.warn{background:rgba(214,158,46,.26); border-color:rgba(240,190,90,.55)}
  .phR{text-align:center}
  .pring{position:relative; width:150px; height:150px; margin:0 auto}
  .pring svg{width:150px; height:150px; transform:rotate(-90deg)}
  .pring .mid{
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; pointer-events:none;
  }
  .pring .midn{font-size:33px; font-weight:700; line-height:1}
  .pring .midc{font-size:11px; letter-spacing:.9px; text-transform:uppercase; color:#cfe3ee; margin-top:2px}
  .pkey{display:flex; gap:5px; justify-content:center; flex-wrap:wrap; margin-top:11px; font-size:11px}
  .pkey span{padding:2px 8px; border-radius:4px; background:rgba(255,255,255,.14)}
  .pnote{font-size:10.5px; color:#bcd4e2; margin-top:7px; line-height:1.4}
  .pquote{
    border-left:3px solid var(--teal); background:#f4fafb; border-radius:0 10px 10px 0;
    padding:14px 18px; font-size:16.5px; line-height:1.5; margin:0 0 16px;
  }
  .pfacts{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:0 0 4px}

  /* Everything above arrives rather than appears, so the eye is walked
     through it in the order somebody would say it out loud. */
  .rv{opacity:0}
  .played .rv{animation:rvUp .52s cubic-bezier(.22,.68,.36,1) forwards; animation-delay:var(--d,0s)}
  @keyframes rvUp{from{opacity:0; transform:translateY(13px)} to{opacity:1; transform:none}}
  .pseg{stroke-dasharray:0 9999}
  .played .pseg{animation:pGrow .85s cubic-bezier(.3,.7,.3,1) forwards; animation-delay:var(--d,0s)}
  @keyframes pGrow{from{stroke-dasharray:0 9999} to{stroke-dasharray:var(--seg) 9999}}
  @media (prefers-reduced-motion: reduce){
    .rv, .played .rv{opacity:1; animation:none; transform:none}
    .pseg, .played .pseg{stroke-dasharray:var(--seg) 9999; animation:none}
  }
  @media (max-width:900px){ .phero{grid-template-columns:1fr} }

  /* ---- editing what the pictures are drawn from ---------------------- */
  .edbar{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    background:#fff; border:1px solid var(--line); border-radius:4px;
    padding:9px 14px; margin:0 0 14px; font-size:12.5px;
  }
  .edbar b{color:var(--navy)}
  .edon{background:#fff7e8; border-color:#e0b877}
  .edwarn{
    background:#fdeeee; border:1px solid #e8b4b4; border-radius:4px;
    padding:10px 14px; margin:0 0 14px; font-size:12.5px; line-height:1.5;
  }
  .edwarn b{color:#a4262c}
  .edn{
    width:46px; text-align:center; font:inherit; font-size:13px; font-weight:700;
    color:var(--navy); border:1px solid var(--line); border-radius:4px; padding:3px 0;
  }
  .edn:focus{outline:2px solid var(--ocean); outline-offset:1px}
  .eds{font:inherit; font-size:12px; border:1px solid var(--line); border-radius:4px; padding:2px 4px}
  .edt{
    font:inherit; font-size:13px; width:100%; border:1px solid var(--line);
    border-radius:4px; padding:4px 7px; background:#fffdf8;
  }
  .edtable td{vertical-align:middle}
  .edflag{
    display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.4px;
    text-transform:uppercase; color:#8a5a10; background:#fff2dc;
    border-radius:4px; padding:2px 9px; margin-left:8px;
  }
  /* ---- the buying team ---------------------------------------------- */
  .shapeline{
    background:#eef4f8; border-left:4px solid var(--teal); border-radius:0 10px 10px 0;
    padding:12px 18px; font-size:14.5px; line-height:1.55; margin:0 0 16px;
  }
  .rolechips{display:flex; gap:6px; flex-wrap:wrap}
  .rchip{
    font-size:11px; font-weight:700; letter-spacing:.3px; padding:3px 10px;
    border-radius:4px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.34);
  }
  .rchip.hero{background:var(--turq); color:var(--navy); border-color:var(--turq)}
  .pgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:14px; margin:16px 0 0}
  .pmini{
    border:1px solid var(--line); border-radius:4px; padding:0 0 14px; overflow:hidden;
    background:#fff; display:flex; flex-direction:column;
  }
  .pmini .top{
    background:linear-gradient(120deg, var(--navy), #0d4b73); color:#fff; padding:14px 16px;
    display:flex; gap:13px; align-items:center;
  }
  .pmini .av{
    flex:0 0 46px; height:46px; border-radius:50%; background:rgba(255,255,255,.15);
    border:1.5px solid rgba(255,255,255,.4); display:flex; align-items:center;
    justify-content:center; font-size:17px; font-weight:700;
  }
  .pmini .nm{font-size:17px; font-weight:700; line-height:1.15}
  .pmini .tt{font-size:11.5px; color:#cfe3ee; margin-top:2px}
  .pmini .rc{padding:10px 16px 0}
  .pmini .bd{padding:10px 16px 0; font-size:13px}
  .pmini .bar{display:flex; height:7px; border-radius:4px; overflow:hidden; margin:10px 16px 0}
  .pmini .bar span{display:block}
  .pmini .st{padding:6px 16px 0; font-size:11.5px; color:var(--grey)}
  .gaprow{
    display:grid; grid-template-columns:190px 1fr; gap:14px; padding:12px 0;
    border-top:1px solid var(--line); align-items:start;
  }
  .gaprow .rn{font-weight:700; color:#8a5a10; font-size:13.5px}
  .gapq{font-size:14.5px; color:var(--navy); font-weight:600}
  /* ---- next best actions -------------------------------------------- */
  .nbacard{
    background:#fff; border:1px solid var(--line); border-radius:4px;
    padding:0 0 6px; margin:0 0 16px; overflow:hidden;
  }
  .nbacard > h3{
    margin:0; background:linear-gradient(115deg, #0D7A52, #12996a); color:#fff;
    padding:12px 20px; font-size:15px; display:flex; align-items:center; gap:10px;
  }
  .nbacard > h3 .n{
    background:rgba(255,255,255,.22); border-radius:4px; padding:1px 11px; font-size:12.5px;
  }
  .nbanote{padding:12px 20px 0; font-size:12.5px; color:var(--grey)}
  .nbagrp{padding:12px 20px 0}
  .nbagrp .cap{margin-bottom:7px}
  .nba{
    display:grid; grid-template-columns:26px 1fr 190px 116px; gap:12px;
    align-items:start; padding:10px 0; border-top:1px solid var(--line);
  }
  .nba:first-of-type{border-top:none}
  .nba .idx{
    width:22px; height:22px; border-radius:50%; background:var(--band); color:var(--navy);
    font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
    margin-top:1px;
  }
  .nba .what{font-size:14.5px; font-weight:600; color:var(--navy); line-height:1.4}
  .nba .why{font-size:12.5px; color:var(--grey); margin-top:3px}
  .nba .who{font-size:13px}
  .nba .who .lab{font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--grey)}
  .nba .when{font-size:12px; text-align:right}
  .wpill{
    display:inline-block; font-size:11px; font-weight:700; padding:3px 10px; border-radius:4px;
  }
  .w-now{background:#e9f6f0; color:#0d7a52}
  .w-next{background:#eaf1fb; color:var(--brand-accent-text)}
  .w-us{background:#fff2dc; color:#8a5a10}
  .stripacts{margin:16px 0 0; padding:12px 0 0; border-top:1px dashed var(--line)}
  .stripacts .cap{color:#0D7A52}
  .stripacts ul{margin:6px 0 0 18px; font-size:13.5px}
  .stripacts li{margin:4px 0}
  @media (max-width:880px){ .nba{grid-template-columns:26px 1fr} .nba .who,.nba .when{grid-column:2} }
  /* ---- the trail behind an action ------------------------------------ */
  .nba .what .conf{
    font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
    padding:2px 8px; border-radius:4px; margin-left:8px; vertical-align:1px;
  }
  .c-strong{background:#e9f6f0; color:#0d7a52}
  .c-mixed{background:#fff2dc; color:#8a5a10}
  .c-weak{background:#fdeeee; color:#a4262c}
  .trail{margin-top:7px}
  .trail > summary{
    font-size:12px; color:var(--ocean); cursor:pointer; list-style:none;
  }
  .trail > summary::-webkit-details-marker{display:none}
  .trail > summary::before{content:"▸ "; }
  .trail[open] > summary::before{content:"▾ "; }
  .trailbody{
    border-left:2px solid var(--line); margin:8px 0 2px 3px; padding:2px 0 2px 12px;
  }
  .tstep{display:flex; gap:9px; align-items:flex-start; padding:5px 0; font-size:12.5px}
  .tstep .mk{flex:0 0 auto; margin-top:1px}
  .tstep .rule{
    font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
    color:var(--grey); background:var(--band); border-radius:4px; padding:2px 7px;
  }
  .tstep .src{color:var(--grey); font-size:11.5px}
  /* ---- the checks ----------------------------------------------------- */
  .checks{
    border:1px solid var(--line); border-radius:4px; margin:16px 0 0; overflow:hidden;
  }
  .checks > summary{
    list-style:none; cursor:pointer; padding:10px 16px; font-size:13px;
    display:flex; align-items:center; gap:10px; background:#fff;
  }
  .checks > summary::-webkit-details-marker{display:none}
  .checks.pass > summary{background:#f2faf6}
  .checks.fail > summary{background:#fff7f2}
  .cdot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
  .checks.pass .cdot{background:#0d7a52}
  .checks.fail .cdot{background:#a4262c}
  .checks .cbody{padding:2px 16px 14px; border-top:1px solid var(--line)}
  .vrow{
    display:grid; grid-template-columns:104px 1fr; gap:12px; padding:9px 0;
    border-top:1px solid var(--line); font-size:12.5px; align-items:start;
  }
  .vrow:first-child{border-top:none}
  .vkind{
    font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
    padding:2px 8px; border-radius:4px; text-align:center;
  }
  .k-vocabulary{background:#eaf1fb; color:var(--brand-accent-text)}
  .k-reference{background:#f3ecfb; color:#5b3a8e}
  .k-provenance{background:#fff2dc; color:#8a5a10}
  .k-grounding{background:#fdeeee; color:#a4262c}
  .vrow .fix{color:var(--grey); margin-top:3px}
  .pbar{display:flex; height:9px; border-radius:4px; overflow:hidden; background:var(--band); min-width:90px}
  .pbar span{display:block}
  /* ---- readiness ------------------------------------------------------ */
  .rdcard{border:1px solid var(--line); border-radius:4px; overflow:hidden; margin:0 0 16px; background:#fff}
  .rdcard > h3{
    margin:0; padding:12px 20px; font-size:15px; color:#fff;
    display:flex; align-items:center; gap:12px;
  }
  .rd-good > h3{background:linear-gradient(115deg,#0D7A52,#12996a)}
  .rd-part > h3{background:linear-gradient(115deg,#8a5a10,#b3781a)}
  .rd-thin > h3{background:linear-gradient(115deg,#8c1f24,#a4262c)}
  .rdcard > h3 .n{background:rgba(255,255,255,.22); border-radius:4px; padding:1px 11px; font-size:12.5px}
  .rdnote{padding:12px 20px 0; font-size:12.5px; color:var(--grey)}
  .rdrow{
    display:grid; grid-template-columns:150px 78px 1fr; gap:14px; align-items:start;
    padding:11px 20px; border-top:1px solid var(--line);
  }
  .rdsec{font-weight:700; font-size:13.5px; color:var(--navy)}
  .rdstate{
    font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
    padding:2px 8px; border-radius:4px; text-align:center;
  }
  .st-have{background:#e9f6f0; color:#0d7a52}
  .st-thin{background:#fff2dc; color:#8a5a10}
  .st-none{background:#fdeeee; color:#a4262c}
  .rdwhat{font-size:13px}
  .rdblocks{color:var(--grey); font-size:12px; margin-top:3px}
  .rdq{
    font-size:13px; color:var(--navy); font-weight:600; margin-top:6px;
    background:var(--band); border-radius:4px; padding:7px 11px;
  }
  .rdsteps{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:11px; padding:14px 20px 4px}
  .rdstep{border:1px solid var(--line); border-radius:4px; padding:11px 13px; border-top:3px solid}
  .rdstep .t{font-size:13px; font-weight:700; color:var(--navy)}
  .rdstep .v{font-size:12px; margin-top:5px; color:var(--grey); line-height:1.45}
  /* the value proposition canvas */
  .vpcwrap{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:14px 20px}
  .vpcside{background:var(--band); border-radius:4px; padding:13px 15px}
  .vpcside.vours{background:color-mix(in srgb, var(--brand-bright) 8%, #fff);
    border:1px solid color-mix(in srgb, var(--brand-bright) 30%, #fff)}
  .vhd{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--grey); margin:0 0 11px}
  .vgrp{margin-bottom:11px}
  .vgrp:last-child{margin-bottom:0}
  .vgrp > b{display:block; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--brand-deep); margin:0 0 6px}
  .vchip{display:block; background:#fff; border:1px solid var(--line); border-radius:4px;
    padding:6px 11px; font-size:12.5px; color:var(--greyd); margin-bottom:5px; line-height:1.45}
  .vchip.vmet{border-left:3px solid var(--ok)}
  .vchip.vopen{border-left:3px solid var(--warn); background:#fffdfd}
  .vnone{display:block; font-size:12.5px; color:var(--warn); font-style:normal}

  /* the business model canvas, in its own arrangement */
  .bmcgrid{
    display:grid; gap:8px; padding:14px 20px;
    grid-template-columns:repeat(5,1fr);
    grid-template-areas:
      "kp ka vp cr cs"
      "kp kr vp ch cs"
      "co co rs rs rs";
  }
  .bmcbox{border:1px solid var(--line); border-radius:4px; background:#fff; padding:9px 11px; min-height:74px}
  .bmcbox > b{display:flex; justify-content:space-between; align-items:center; gap:6px;
    font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--brand-deep);
    margin:0 0 6px; font-weight:700}
  .bmcbox ul{margin:0; padding-left:15px}
  .bmcbox li{font-size:12px; color:var(--greyd); line-height:1.45; margin-bottom:2px}
  .bmcbox i{font-size:12px; color:var(--grey); font-style:normal}
  .bmcbox[data-empty]{background:var(--band)}
  .bmk{font-size:9.5px; font-weight:800; border-radius:4px; padding:1px 6px; letter-spacing:0}
  .m-W{background:#e6f4ee; color:#0D7A52}
  .m-M{background:#fbf1de; color:#8a6412}
  .m-U{background:#eef1f5; color:var(--grey)}
  @media (max-width:900px){
    .vpcwrap{grid-template-columns:1fr}
    .bmcgrid{grid-template-columns:repeat(2,1fr); grid-template-areas:none}
    .bmcbox{grid-area:auto !important}
  }
  /* the analysis subtabs */
  .restabs{
    display:flex; align-items:center; gap:3px; flex-wrap:wrap;
    background:#fff; border:1px solid var(--line); border-radius:4px;
    padding:5px; margin:0 0 16px; position:sticky; top:8px; z-index:20;
    box-shadow:0 1px 2px color-mix(in srgb, var(--navy) 5%, transparent), 0 6px 18px color-mix(in srgb, var(--navy) 6%, transparent);
  }
  /* The section bar inside "What it returned". A step 0 answer runs to eight
     screens, and scrolling past seven of them to re-read one is the whole
     complaint. */
  .outnav{
    display:flex; flex-wrap:wrap; gap:3px; padding:8px 16px 0; margin:0 0 2px;
    border-bottom:1px solid #dcebf2;
  }
  .outnav .rtab{font-size:12.5px; padding:6px 11px}
  .outnav .rtab.on{background:var(--navy); color:#fff}
  .outsec.hide{display:none}
  .rtab{
    background:transparent; border:0; cursor:pointer; font:inherit;
    font-size:13px; font-weight:600; color:var(--greyd);
    /* 13px of side padding put the row 5px over and folded one control onto a
       second line on its own. */
    padding:7px 11px; border-radius:4px; white-space:nowrap;
    transition:background .18s ease, color .18s ease;
  }
  .rtab:hover:not(:disabled){background:var(--band); color:var(--navy)}
  .rtab.on, .rtab.on:hover:not(:disabled){
    background:var(--brand-deep); color:var(--on-deep); font-weight:680;
  }
  .rtab:focus-visible{outline:2px solid var(--brand-bright); outline-offset:2px}
  .rtdiv{width:1px; height:18px; background:var(--line); margin:0 4px; flex:0 0 auto}
  /* the steps, folded. A chevron that turns, and a count so somebody knows
     what is behind it before they press it. */
  .rtfold{color:var(--grey)}
  .rtn{font-style:normal; font-size:11px; margin-left:6px; padding:1px 5px; border-radius:8px;
    background:var(--line); color:#5a6472}
  .rtfold::after{content:"\25b8"; display:inline-block; margin-left:7px; font-size:11px;
    transition:transform .18s ease}
  .rtfold.open::after{transform:rotate(90deg)}
  .rtfold.open{color:var(--navy)}
  .rtrow{flex:1 0 100%; display:flex; flex-wrap:wrap; gap:3px; margin-top:4px;
    padding-top:6px; border-top:1px solid var(--line)}
  /* the year, as a shape rather than a list */
  .cstrip{margin:14px 0 4px;border:1px solid var(--line);border-radius:4px;overflow:hidden}
  .crow{display:flex;align-items:stretch;border-top:1px solid var(--line)}
  .crow:first-child{border-top:0}
  .clab{flex:0 0 92px;padding:7px 10px;font-size:13px;color:var(--grey);
        background:var(--wash);display:flex;align-items:center}
  .ccell{flex:1 1 0;min-width:0;padding:7px 4px;text-align:center;border-left:1px solid var(--line);
         display:flex;align-items:center;justify-content:center;gap:3px;min-height:34px}
  .chead{font-size:12px;color:var(--grey);background:var(--wash);text-transform:uppercase;
         letter-spacing:.04em}
  .cdot{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
        border-radius:4px;font-size:12px;font-weight:600;color:#fff;padding:0 5px}
  /* Colour says how the date is known, the same four states the table above
     uses. Whose meeting it is was already the row label, so colouring by that
     too meant four colours carrying one fact between them. */
  .cdot.found{background:var(--ok)} .cdot.told{background:var(--teal)}
  .cdot.computed{background:#8a6412} .cdot.open{background:var(--grey)}
  .cdot.book{background:#fff;color:var(--greyd);border:2px solid #8a6412}
  .cdot.ring{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--navy)}
  .clegend .cdot{min-width:14px;height:14px}
  /* the wheel */
  .cwrap{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;margin:12px 0 4px}
  /* The wheel stays in view while the key scrolls beside it, so a number in
     the list and its dot are on screen together. */
  .cwheelbox{flex:0 1 min(520px, calc(100vh - var(--tabsH, 84px) - 48px));min-width:300px;
             position:sticky;top:calc(var(--tabsH, 84px) + 20px);align-self:flex-start}
  .cwheel{width:100%;height:auto;display:block}
  .cwheel .cwm{font:700 17px var(--font-ui, "Helvetica Neue"), Arial, sans-serif;fill:var(--navy)}
  .cwheel .cwn{font:700 13.5px var(--font-ui, "Helvetica Neue"), Arial, sans-serif}
  .cwheel .cwy{font:700 34px var(--font-ui, "Helvetica Neue"), Arial, sans-serif;fill:var(--navy)}
  .cwheel .cwc{font:13px var(--font-ui, "Helvetica Neue"), Arial, sans-serif;fill:var(--greyd)}
  .cwheel .cwc.warn{fill:#a4262c}
  .cwheel .cwd{cursor:default}
  .ckey{flex:1 1 320px;min-width:280px;font-size:13px}
  .ckeyg{margin:0 0 12px}
  .ckeyg h4{margin:0 0 3px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--navy)}
  .ckeyg h4.warn{color:#a4262c}
  .ckeyr{display:grid;grid-template-columns:24px 1fr auto;gap:2px 8px;align-items:center;padding:3px 4px;
         border-top:1px solid var(--line);border-radius:3px}
  .ckeyr.hl{background:#eef6f8}
  /* A card clips its content to keep the rounded corners, and clipping turns
     sticky off. The clock card has nothing that needs clipping. */
  .card.cardclock{overflow:visible}
  .cwheel .cwd.hl circle{stroke-width:4;filter:drop-shadow(0 0 3px color-mix(in srgb, var(--navy) 45%, transparent))}
  .ckeyr.none{display:block;color:var(--grey)}
  .ckeyr .kn{font-weight:600}
  .ckeyr .kw{color:var(--greyd);white-space:nowrap}
  .ckeyr .kw.warn{color:#a4262c}
  .cdotw{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid;box-sizing:border-box}
  .cdotw.n{width:22px;height:22px;font:700 11px/18px var(--font-ui, "Helvetica Neue"), Arial, sans-serif;text-align:center}
  .cdotw.und{border:2px dashed #a4262c;color:#a4262c;background:#fff}
  .cring{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px dashed var(--navy);box-sizing:border-box}
  .clegend{display:flex;flex-wrap:wrap;gap:14px;margin:9px 0 2px;font-size:13px;
           color:var(--greyd);align-items:center}
  .clegend span.k{display:inline-flex;align-items:center;gap:6px}
  .cmonth{margin:8px 0 0;font-size:13px;color:var(--greyd);line-height:1.55}
  .cmonth b{color:var(--navy)}
  /* ---------- the documentation layer ---------- */
  .doc{padding:6px 0 40px;max-width:1240px}
  .doc h1{font-size:34px;line-height:1.15;margin:0 0 6px;color:#1b1b1b;letter-spacing:-.4px}
  .doc .docsub{margin:0 0 16px;color:var(--greyd);font-size:15px;max-width:900px}
  .doc .rule{height:3px;background:var(--accent);border-radius:2px;margin:0 0 22px}
  .doc .callout{background:var(--term);color:#fff;padding:16px 20px;border-radius:4px;
                font-weight:600;line-height:1.5;margin:0 0 26px;max-width:1100px}
  /* the counts, read live */
  .cstrip2{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--paperline);
    border-radius:4px;background:var(--papercard);margin:4px 0 2px;overflow:hidden}
  .cstrip2 > div{flex:1 1 0;min-width:112px;padding:14px 16px;border-left:1px solid var(--paperline);
    display:flex;flex-direction:column;gap:3px}
  .cstrip2 > div:first-child{border-left:0}
  .cstrip2 b{font-size:27px;line-height:1;color:#1b1b1b;font-weight:700;letter-spacing:-.5px}
  .cstrip2 span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
  .cstripnote{font-size:12.5px;color:var(--grey);margin:7px 0 2px}
  .doclab{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--label);
          font-weight:600;margin:26px 0 10px}
  .docgrid{display:grid;gap:14px}
  .docgrid.six{grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
  .docgrid.three{grid-template-columns:repeat(3,1fr)}
  .docgrid.two{grid-template-columns:repeat(2,1fr)}
  @media (max-width:1180px){ .docgrid.six{grid-template-columns:repeat(3,1fr)}
    .docgrid.three,.docgrid.two{grid-template-columns:1fr} }
  .doccard{background:var(--papercard);border:1px solid var(--paperline);border-radius:4px;
           padding:16px 18px}
  .doccard .n{display:inline-block;background:#ececea;color:#6b6b6b;font-size:11px;
              font-weight:700;padding:2px 7px;border-radius:4px;margin-bottom:9px}
  .doccard h3{margin:0 0 7px;font-size:17px;color:#1b1b1b;letter-spacing:-.1px}
  .doccard h4{margin:0 0 5px;font-size:14.5px;color:#1b1b1b}
  .doccard p{margin:0;color:var(--greyd);font-size:13.5px;line-height:1.5}
  .doccard .kv{margin-top:9px;font-family:ui-monospace,Menlo,Consolas,monospace;
               font-size:12.5px;color:#1b1b1b}
  /* A dark panel for something the tool actually produced, rather than a
     description of it. The three dots are a window, not decoration. */
  .term{background:var(--term);border-radius:4px;overflow:hidden;margin-top:11px}
  .termhd{background:var(--termhd);padding:7px 12px;display:flex;align-items:center;gap:7px;
          font-size:12.5px;color:#cfccc6;font-family:ui-monospace,Menlo,Consolas,monospace}
  .termhd i{width:9px;height:9px;border-radius:50%;display:inline-block}
  .termhd i:nth-child(1){background:#e0794f} .termhd i:nth-child(2){background:#d8b24a}
  .termhd i:nth-child(3){background:#5fcf80}
  .termbody{padding:10px 12px;font-family:ui-monospace,Menlo,Consolas,monospace;
            font-size:12.5px;color:var(--termtx);line-height:1.85}
  .termrow{display:flex;justify-content:space-between;gap:14px;
           border-bottom:1px solid #3a3a3a;padding:3px 0}
  .termrow:last-child{border-bottom:0}
  .termrow em{font-style:normal;color:var(--termdim)}
  .termrow b{font-weight:400;color:var(--termok)}
  .termrow b.bad{color:var(--termbad)}
  .termfile{background:#333;border-radius:4px;padding:6px 10px;margin:5px 0;
            font-size:12.5px;color:var(--termtx)}
  .docrel{background:var(--papercard);border:1px solid var(--paperline);border-radius:4px;
          display:grid;grid-template-columns:190px 1fr;gap:0}
  .docrel > div{padding:13px 16px;border-bottom:1px solid var(--paperline)}
  .docrel > div:nth-child(2n){border-left:1px solid var(--paperline)}
  .docrel b{display:block;font-size:13.5px;color:#1b1b1b;margin-bottom:3px}
  .docrel span{font-size:13px;color:var(--greyd)}
  /* A prompt or a returned block is something the tool produced, so it is set
     as an artefact rather than as body text. Same treatment as the panels in
     the guide, so one idea has one look wherever it appears. */
  .adv pre{background:var(--term);color:var(--termtx);border-radius:4px;padding:13px 15px;
           font-size:12.5px;line-height:1.7;overflow:auto;max-height:420px;border:0}
  .card{border:1px solid var(--paperline)}
  .respane{animation:rpin .22s ease both}
  @keyframes rpin{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
  @media (prefers-reduced-motion: reduce){ .respane{animation:none} }
  .rcrow{padding:13px 20px; border-top:1px solid var(--line)}
  .rcst{margin-left:9px; font-size:10.5px; font-weight:700; letter-spacing:.03em;
    text-transform:uppercase; border-radius:4px; padding:1px 8px; vertical-align:2px}
  .st-differs{background:#fbe9ea; color:#A4262C}
  .st-ours-only{background:#fbf1de; color:#8a6412}
  .st-theirs-only{background:#eaf0f6; color:var(--brand-accent-text)}
  .st-open{background:#fbf1de; color:#8a6412}
  .st-agreed{background:#e6f4ee; color:#0D7A52}
  .rcpair{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:7px}
  .rcpair > div{background:var(--band); border-radius:4px; padding:8px 11px; font-size:13px}
  .rcpair b{display:block; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--grey); font-weight:700; margin-bottom:3px}
  .rcpair i{color:var(--grey)}
  .rdstep .lv{float:right; font-size:10.5px; font-weight:700; letter-spacing:.03em;
    text-transform:uppercase; border-radius:4px; padding:1px 8px}
  .lv-full{background:#e6f4ee; color:#0D7A52}
  .lv-thin{background:#fbf1de; color:#8a6412}
  .lv-no{background:#fbe9ea; color:#A4262C}
  .legend{font-size:12.5px; margin:10px 0 0}
  .legend summary{cursor:pointer; color:var(--ocean); font-weight:600}
  .legend table{border-collapse:collapse; margin:8px 0 2px; font-size:12.5px}
  .legend td{border:1px solid var(--line); padding:4px 9px}
  .srcbar{
    display:flex; gap:12px; align-items:center; flex-wrap:wrap;
    border-radius:4px; padding:11px 14px; margin:16px 0 4px; font-size:13px;
    background:#fff6ea; border:1px solid #f0d8b4; color:#8a5a10;
  }
  .srcbar.on{background:#eff9f3; border-color:#c3e4d1; color:#1c6b3c}
  .srcbar b{color:inherit}
  .picker{border:1px solid var(--line); border-radius:4px; padding:8px; margin-top:8px; background:#fff}
  .picker button{display:block; width:100%; text-align:left; margin:3px 0}
  .adraft{white-space:pre-wrap; font-size:13px; line-height:1.5; border:1px solid var(--line);
          border-radius:4px; background:#fbfdfe; padding:12px 14px; margin:10px 0; max-height:420px; overflow:auto}

/* ==========================================================================
   Toasts, and the question box that replaced the browser's own
   ========================================================================== */
#toasts{position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; z-index:9000; pointer-events:none;
  width:min(560px, calc(100vw - 32px))}
.toast{pointer-events:auto; background:#0b1f3f; color:#fff; border-radius:10px;
  box-shadow:0 8px 28px color-mix(in srgb, var(--navy) 28%, transparent); padding:12px 14px; display:flex; gap:12px;
  align-items:center; opacity:0; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease; position:relative; overflow:hidden}
.toast.in{opacity:1; transform:none}
.toast.good{background:#0d5c42}
.toast.warn{background:#7a4a10}
.toast.err{background:#8c1f26}
.toastsay{flex:1; font-size:14px; line-height:1.4}
.toastsay b{font-weight:650; display:block}
.toastsay .sub{display:block; color:rgba(255,255,255,.78); font-size:12.5px; margin-top:2px}
.toastacts{display:flex; gap:6px; align-items:center}
.toastacts .ghost{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.28)}
.toastacts .ghost:hover{background:rgba(255,255,255,.24)}
.toastacts .undo{font-weight:650}
.toastx{background:none; border:0; color:rgba(255,255,255,.7); font-size:18px;
  line-height:1; cursor:pointer; padding:2px 4px; min-width:28px}
.toastx:hover{color:#fff}
.toastbar{position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.18)}
.toastbar i{display:block; height:2px; width:100%; background:rgba(255,255,255,.55)}

.modalback{position:fixed; inset:0; background:color-mix(in srgb, var(--navy) 42%, transparent); z-index:9500;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .16s ease}
.modalback.in{opacity:1}
.modalbox{background:#fff; border-radius:12px; box-shadow:0 18px 60px color-mix(in srgb, var(--navy) 30%, transparent);
  width:min(560px, 100%); padding:22px 24px 18px}
.modalbox h2{margin:0 0 8px; font-size:19px; color:var(--navy, #232F38)}
.modalbox.danger h2{color:#8c1f26}
.modalbody{font-size:14px; line-height:1.55; color:#3b4656}
.modalacts{display:flex; gap:8px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap}
.modalnote{margin-top:12px; padding-top:10px; border-top:1px solid #e2e7ec;
  font-size:12.5px; line-height:1.5; color:#5a6676}
.modalnote div{margin-top:4px}
@media (prefers-reduced-motion: reduce){
  .toast, .modalback{transition:none}
  .toastbar i{transition:none !important}
}

/* the key, and what the browser remembers of it */
.keykeep{display:inline-flex; align-items:center; gap:6px; margin-left:8px;
  font-size:12px; color:rgba(255,255,255,.82); font-weight:400}
.keykeep input{width:auto; margin:0}
.savestate{display:inline-flex; align-items:center; gap:6px; font-size:12px;
  color:rgba(255,255,255,.78); margin-left:10px; white-space:nowrap}
.savestate:empty{display:none}
.savestate i{width:7px; height:7px; border-radius:50%; background:var(--brand-bright); display:inline-block}
.savestate.saving i{background:#f0b34a}
  .tryfirst{background:var(--brand-bright); color:var(--on-bright);
    font:700 10.5px "IBM Plex Mono", monospace; letter-spacing:.05em; text-transform:uppercase;
    padding:3px 7px; border-radius:5px; white-space:nowrap}