/* vaultless — every style for the site.
 *
 * Kept in a file rather than inline so the CSP can say `style-src-elem 'self'`.
 * With the stylesheet external, the only inline styling the policy still has to
 * allow is the style ATTRIBUTES the scripts set (bar widths, show/hide), which
 * `style-src-attr 'unsafe-inline'` covers on its own — an injected stylesheet
 * element is then refused outright.
 */
  :root{
    --bg-0:#07090b; --bg-1:#0d1114; --bg-2:#141a1f; --bg-3:#1a2228;
    --line:#1e262b; --line-bright:#2f3d45;
    /* --ink-2 was #6b817c, about 4.3:1 on the card surface — under the 4.5:1
       AA floor, and used for exactly the small text where it matters most
       (placeholders, result meta, format captions, the footer). #7d938e is
       5.4:1 on cards and 6.1:1 on the page ground, at the same temperature. */
    --ink-0:#eaf4f1; --ink-1:#a3bab5; --ink-2:#7d938e;
    --cyan:#5eead4; --cyan-hot:#8affe4; --cyan-dim:#2f6b62;
    --violet:#a98bff; --amber:#f2b263; --red:#ef6a5f; --green:#5ee89a;
    --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --sans:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --r:16px; --r-sm:10px;
    --shadow:0 8px 32px rgba(0,0,0,.5);
    --glow:0 0 0 1px rgba(94,234,212,.35), 0 0 28px rgba(94,234,212,.22);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg-0); color:var(--ink-0); font-family:var(--sans);
    font-size:17px; line-height:1.55; min-height:100vh;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  ::selection{background:var(--cyan-dim);color:#fff;}
  a{color:var(--cyan);text-underline-offset:3px;}
  h1,h2,h3{line-height:1.2;margin:0;}

  /* animated backdrop ------------------------------------------------ */
  #rain{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.5;pointer-events:none;}
  .aurora{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(900px 500px at 15% -5%, rgba(94,234,212,.16), transparent 60%),
      radial-gradient(700px 500px at 92% 8%, rgba(169,139,255,.13), transparent 60%),
      radial-gradient(900px 600px at 50% 105%, rgba(94,234,212,.07), transparent 60%);
    animation:drift 22s ease-in-out infinite alternate;
  }
  @keyframes drift{to{transform:translate3d(0,-18px,0) scale(1.04);}}

  .wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:22px 20px 90px;}

  /* header ------------------------------------------------------------ */
  header.top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:30px;}
  .brand{display:flex;align-items:center;gap:12px;}
  .brand .mark{
    font-family:var(--mono);font-weight:700;font-size:16px;color:#04100d;
    background:linear-gradient(135deg,var(--cyan-hot),var(--cyan));
    padding:6px 9px;border-radius:8px;box-shadow:0 0 22px rgba(94,234,212,.45);
  }
  .brand h1{font-size:23px;letter-spacing:-.02em;font-weight:600;}
  .brand small{display:block;color:var(--ink-2);font-family:var(--mono);font-size:11.5px;}
  .head-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

  .seg{display:flex;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:3px;}
  .seg button{
    font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);background:none;border:0;
    padding:7px 16px;border-radius:999px;cursor:pointer;transition:.18s;min-height:36px;
  }
  .seg button[aria-pressed="true"]{background:var(--cyan);color:#04100d;box-shadow:0 0 16px rgba(94,234,212,.4);}
  .seg button:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:2px;}

  .conn{
    display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;color:var(--ink-1);
    background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  }
  .dot{width:9px;height:9px;border-radius:50%;background:var(--ink-2);flex:none;}
  .dot.live{background:var(--green);box-shadow:0 0 12px var(--green);animation:pulse 1.8s ease-in-out infinite;}
  @keyframes pulse{50%{opacity:.45;}}

  /* hero -------------------------------------------------------------- */
  .hero{text-align:center;padding:6px 0 34px;}
  .hero h2{font-size:clamp(30px,5.2vw,50px);font-weight:600;letter-spacing:-.03em;margin-bottom:12px;}
  .hero h2 .grad{
    background:linear-gradient(100deg,var(--cyan-hot),var(--violet));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero p{color:var(--ink-1);font-size:18px;max-width:620px;margin:0 auto;}

  /* steps ------------------------------------------------------------- */
  .steps{display:grid;gap:16px;}
  .card{
    background:linear-gradient(180deg,rgba(20,26,31,.92),rgba(13,17,20,.92));
    border:1px solid var(--line);border-radius:var(--r);padding:22px;
    box-shadow:var(--shadow);backdrop-filter:blur(10px);
  }
  .card.step{transition:border-color .25s, box-shadow .25s;}
  .card.step:focus-within{border-color:var(--cyan-dim);box-shadow:var(--shadow),0 0 0 1px var(--cyan-dim);}
  .step-h{display:flex;align-items:center;gap:13px;margin-bottom:6px;}
  .num{
    width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;
    font-family:var(--mono);font-weight:700;font-size:15px;
    background:var(--bg-3);color:var(--cyan);border:1px solid var(--cyan-dim);
  }
  .card.done .num{background:var(--cyan);color:#04100d;border-color:var(--cyan);box-shadow:0 0 18px rgba(94,234,212,.45);}
  .step-h h3{font-size:20px;font-weight:600;}
  .help{color:var(--ink-1);font-size:15px;margin:0 0 16px 47px;}
  @media(max-width:560px){.help{margin-left:0;}}

  /* inputs ------------------------------------------------------------ */
  .pw-row{display:flex;gap:10px;}
  input[type=password],input[type=text],input[type=number]{
    flex:1;width:100%;font:inherit;font-size:18px;color:var(--ink-0);
    background:var(--bg-0);border:1.5px solid var(--line-bright);border-radius:var(--r-sm);
    padding:15px 16px;transition:.18s;min-height:56px;
  }
  input::placeholder{color:var(--ink-2);}
  input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(94,234,212,.14);}
  input[type=password]{font-family:var(--mono);letter-spacing:.14em;}

  button{font-family:inherit;}
  .btn{
    font:inherit;font-size:16px;font-weight:600;cursor:pointer;border-radius:var(--r-sm);
    padding:15px 22px;min-height:56px;border:1.5px solid var(--line-bright);
    background:var(--bg-3);color:var(--ink-0);transition:.18s;display:inline-flex;
    align-items:center;justify-content:center;gap:9px;
  }
  .btn:hover:not(:disabled){border-color:var(--cyan-dim);background:var(--bg-2);transform:translateY(-1px);}
  .btn:active:not(:disabled){transform:translateY(1px) scale(.99);}
  .btn:disabled{opacity:.4;cursor:not-allowed;}
  .btn:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:3px;}
  .btn.primary{
    background:linear-gradient(135deg,var(--cyan-hot),var(--cyan));color:#04100d;border-color:transparent;
    box-shadow:0 0 26px rgba(94,234,212,.32);font-size:18px;padding:18px 30px;min-height:62px;
  }
  .btn.primary:hover:not(:disabled){box-shadow:0 0 40px rgba(94,234,212,.5);}
  .btn.small{font-size:14px;padding:10px 15px;min-height:44px;}
  .btn.wide{width:100%;}
  .actions{display:flex;gap:12px;flex-wrap:wrap;}

  /* strength ---------------------------------------------------------- */
  .strength{margin-top:14px;}
  .sbar{height:8px;border-radius:999px;background:var(--bg-3);overflow:hidden;}
  .sbar i{display:block;height:100%;width:0;border-radius:999px;transition:width .45s cubic-bezier(.2,.8,.2,1),background .45s;}
  .stext{font-size:13.5px;color:var(--ink-1);margin-top:8px;display:flex;justify-content:space-between;gap:10px;}

  /* accounts ---------------------------------------------------------- */
  .chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px;}
  .chip{
    font:inherit;font-size:14.5px;cursor:pointer;border-radius:999px;padding:9px 16px;min-height:42px;
    background:var(--bg-3);border:1.5px solid var(--line-bright);color:var(--ink-1);transition:.16s;
    display:inline-flex;align-items:center;gap:8px;
  }
  .chip:hover{border-color:var(--cyan-dim);color:var(--ink-0);}
  .chip[aria-pressed="true"]{background:var(--cyan);color:#04100d;border-color:var(--cyan);font-weight:600;box-shadow:0 0 18px rgba(94,234,212,.35);}
  .chip .x{opacity:.55;font-size:16px;line-height:1;}
  .chip .x:hover{opacity:1;}
  .chip.add{border-style:dashed;color:var(--ink-2);}
  .stepper{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  /* The number must never be squeezed to nothing on a narrow screen. */
  .stepper input{flex:0 1 110px;min-width:86px;max-width:130px;text-align:center;font-family:var(--mono);font-size:20px;}
  .stepper #addAccount{white-space:nowrap;}
  .rnd{width:52px;height:52px;flex:none;border-radius:50%;font-size:24px;padding:0;min-height:52px;}

  /* formats ----------------------------------------------------------- */
  .fmt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px;}
  .fmt-opt{
    cursor:pointer;border:1.5px solid var(--line-bright);border-radius:var(--r-sm);
    padding:15px 16px;background:var(--bg-0);transition:.16s;min-height:64px;
    display:flex;flex-direction:column;justify-content:center;gap:3px;
  }
  .fmt-opt:hover{border-color:var(--cyan-dim);}
  .fmt-opt .ft{font-weight:600;font-size:15.5px;}
  .fmt-opt .fs{font-family:var(--mono);font-size:12px;color:var(--ink-2);}
  .fmt-opt.active{border-color:var(--cyan);background:rgba(94,234,212,.08);box-shadow:0 0 0 3px rgba(94,234,212,.1);}
  .fmt-opt.active .fs{color:var(--cyan);}
  .fmt-opt:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:2px;}

  /* result ------------------------------------------------------------ */
  .result{
    border:1.5px solid var(--cyan-dim);border-radius:var(--r);padding:26px;text-align:center;
    background:linear-gradient(180deg,rgba(94,234,212,.07),rgba(13,17,20,.92));position:relative;overflow:hidden;
  }
  .result.empty{border-color:var(--line);background:linear-gradient(180deg,rgba(20,26,31,.9),rgba(13,17,20,.9));}
  .pw{
    font-family:var(--mono);font-size:clamp(20px,4.4vw,34px);font-weight:600;letter-spacing:.04em;
    word-break:break-all;color:var(--cyan-hot);text-shadow:0 0 26px rgba(94,234,212,.45);margin:6px 0 4px;
  }
  .pw.hidden-pw{filter:blur(11px);user-select:none;}
  .placeholder{color:var(--ink-2);font-size:16px;padding:14px 0;}
  .result-meta{display:flex;justify-content:center;gap:8px 20px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);margin-top:10px;}
  .demo-badge{
    display:none;align-items:center;gap:8px;justify-content:center;margin-bottom:14px;
    background:rgba(242,178,99,.14);border:1px solid var(--amber);color:var(--amber);
    border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;
  }
  .demo-badge.on{display:inline-flex;}
  .result .actions{justify-content:center;margin-top:18px;}
  @keyframes popin{from{opacity:0;transform:translateY(10px) scale(.96);}to{opacity:1;transform:none;}}
  .pw.reveal{animation:popin .45s cubic-bezier(.2,.9,.3,1.2);}

  /* handshake stage --------------------------------------------------- */
  /* Colour carries meaning here, and only meaning: cyan is a value in the
     clear on your machine, violet is a value that has been disguised and is
     safe to hand over, green is the shared secret both halves agree on. The
     readout changes colour as the value changes hands. */
  .stage{
    height:0;overflow:hidden;opacity:0;
    transition:height .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
  }
  .stage.on{height:228px;opacity:1;}

  .stage-rail{display:flex;align-items:center;justify-content:center;height:104px;}
  .party{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none;width:112px;}
  .party-box{
    width:64px;height:64px;border-radius:19px;display:grid;place-items:center;position:relative;
    background:linear-gradient(158deg,var(--bg-3),var(--bg-1));
    border:1.5px solid var(--line-bright);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
    transition:border-color .55s ease, box-shadow .55s ease, transform .55s cubic-bezier(.2,.9,.3,1.2);
  }
  .party-glyph{
    font-family:var(--mono);font-size:25px;font-weight:600;color:var(--ink-2);
    transition:color .55s ease, text-shadow .55s ease;
  }
  /* Deliberately NOT uppercased: these name the actual scalars, and "YOU HOLD R"
     severs the tie to the lowercase r sitting in the box above it. */
  .party-name{
    font-family:var(--mono);font-size:11px;letter-spacing:.09em;
    color:var(--ink-2);transition:color .55s ease;white-space:nowrap;
  }
  .party.hot .party-box{
    border-color:var(--cyan);transform:translateY(-3px);
    box-shadow:0 0 34px rgba(94,234,212,.34), inset 0 1px 0 rgba(255,255,255,.09);
  }
  .party.hot .party-glyph{color:var(--cyan-hot);text-shadow:0 0 18px rgba(94,234,212,.7);}
  .party.hot .party-name{color:var(--ink-1);}

  /* the oracle's seal — rings that break outward each time it stamps */
  .seal-ring{
    position:absolute;inset:-5px;border-radius:23px;border:1.5px solid var(--cyan);
    opacity:0;pointer-events:none;
  }
  #viz[data-stage="stamping"] .seal-ring{animation:sealPulse 2.1s ease-out infinite;}
  #viz[data-stage="stamping"] .seal-ring.two{animation-delay:1.05s;}
  @keyframes sealPulse{
    0%{opacity:.9;transform:scale(.82);}
    70%{opacity:.18;}
    100%{opacity:0;transform:scale(1.45);}
  }

  /* the channel between the two parties */
  .channel{flex:1;max-width:232px;min-width:70px;height:64px;position:relative;}
  .channel-line,.channel-pulse{
    position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;
  }
  .channel-line{
    background:linear-gradient(90deg,transparent,var(--line-bright) 14%,
               var(--line-bright) 86%,transparent);
  }
  .channel-pulse{
    background:linear-gradient(90deg,transparent,var(--cyan),transparent);
    opacity:0;transition:opacity .45s ease;
  }
  #viz[data-stage="sending"] .channel-pulse,
  #viz[data-stage="returning"] .channel-pulse{opacity:.55;animation:channelGlow 2.2s ease-in-out infinite;}
  @keyframes channelGlow{0%,100%{opacity:.2;}50%{opacity:.7;}}

  .packet{
    position:absolute;top:50%;margin-top:-6px;display:flex;gap:3px;opacity:0;pointer-events:none;
  }
  .packet i{
    width:7px;height:12px;border-radius:2px;background:var(--cyan);
    box-shadow:0 0 14px rgba(94,234,212,.85);
  }
  /* Outbound is violet: by then the point is blinded, and the colour is the
     whole point — that is the thing the oracle is allowed to see. */
  #packetOut i{background:var(--violet);box-shadow:0 0 14px rgba(169,139,255,.85);}
  #packetOut i:nth-child(2){animation-delay:.06s;}
  #packetOut i:nth-child(3){animation-delay:.12s;}
  #viz[data-stage="sending"] #packetOut{animation:flyOut 1.05s cubic-bezier(.4,0,.5,1) forwards;}
  #viz[data-stage="returning"] #packetIn{animation:flyIn 1.05s cubic-bezier(.4,0,.5,1) forwards;}
  @keyframes flyOut{
    0%{left:0;opacity:0;transform:scale(.6);}
    14%{opacity:1;transform:scale(1);}
    86%{opacity:1;transform:scale(1);}
    100%{left:calc(100% - 29px);opacity:0;transform:scale(.6);}
  }
  @keyframes flyIn{
    0%{left:calc(100% - 29px);opacity:0;transform:scale(.6);}
    14%{opacity:1;transform:scale(1);}
    86%{opacity:1;transform:scale(1);}
    100%{left:0;opacity:0;transform:scale(.6);}
  }

  /* the actual bytes */
  .readout{
    display:flex;align-items:flex-start;gap:12px;margin-top:12px;padding:12px 14px;
    background:var(--bg-0);border:1px solid var(--line);border-radius:var(--r-sm);
  }
  .readout-tag{
    flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.04em;
    color:var(--cyan);background:rgba(94,234,212,.09);border:1px solid var(--cyan-dim);
    border-radius:5px;padding:4px 9px;min-width:78px;text-align:center;white-space:nowrap;
    transition:color .5s ease, border-color .5s ease, background .5s ease;
  }
  .readout-hex{
    flex:1;min-width:0;font-family:var(--mono);font-size:12px;line-height:1.62;
    letter-spacing:.055em;color:var(--ink-1);word-break:break-all;
    transition:color .5s ease;
  }
  /* disguised — safe to hand over */
  #viz[data-stage="blinding"] .readout-tag,
  #viz[data-stage="sending"] .readout-tag,
  #viz[data-stage="stamping"] .readout-tag,
  #viz[data-stage="returning"] .readout-tag{
    color:var(--violet);border-color:rgba(169,139,255,.45);background:rgba(169,139,255,.1);
  }
  #viz[data-stage="blinding"] .readout-hex,
  #viz[data-stage="sending"] .readout-hex,
  #viz[data-stage="returning"] .readout-hex{color:#c3b1ff;}
  #viz[data-stage="stamping"] .readout-hex{color:var(--ink-2);}
  /* the shared secret */
  #viz[data-stage="unblinding"] .readout-tag,
  #viz[data-stage="done"] .readout-tag{
    color:var(--green);border-color:rgba(94,232,154,.45);background:rgba(94,232,154,.1);
  }
  #viz[data-stage="unblinding"] .readout-hex,
  #viz[data-stage="done"] .readout-hex{color:#9df0c0;}

  .viz-label{
    text-align:center;font-family:var(--mono);font-size:12.5px;color:var(--cyan);
    margin:12px 0 0;min-height:18px;letter-spacing:.02em;
  }
  /* Only the stage is animated open; the caption is a live region and must stay
     in the accessibility tree, so it is never display:none. */
  .stage:not(.on) .viz-label{opacity:0;}
  .viz-label{transition:opacity .4s ease;}

  @media(max-width:560px){
    .stage.on{height:268px;}
    .party{width:84px;}
    .party-box{width:54px;height:54px;border-radius:16px;}
    .readout{flex-direction:column;gap:8px;}
    .readout-tag{min-width:0;align-self:flex-start;}
  }

  /* trace / expert ---------------------------------------------------- */
  body:not(.expert) .expert-only{display:none;}
  body.expert .simple-only{display:none;}

  .trace-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
  .trace-head h3{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:500;}
  .clear{font:inherit;font-family:var(--mono);font-size:12px;color:var(--ink-2);background:none;border:0;cursor:pointer;padding:6px 10px;border-radius:6px;}
  .clear:hover{color:var(--cyan);background:var(--bg-3);}
  #trace{
    font-family:var(--mono);font-size:12.5px;line-height:1.75;max-height:230px;overflow-y:auto;
    background:var(--bg-0);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;
  }
  #trace .row{display:flex;gap:11px;}
  #trace .t{color:var(--ink-2);flex:none;}
  #trace .step{color:var(--cyan);flex:none;min-width:34px;}
  #trace .msg{color:var(--ink-1);word-break:break-word;}
  #trace .err{color:var(--red);word-break:break-word;}
  #trace .empty{color:var(--ink-2);font-style:italic;}

  /* docs -------------------------------------------------------------- */
  details.learn{margin-top:16px;border:1px solid var(--line);border-radius:var(--r);background:rgba(13,17,20,.85);overflow:hidden;}
  details.learn>summary{
    cursor:pointer;padding:18px 22px;font-weight:600;font-size:17px;list-style:none;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
  }
  details.learn>summary::-webkit-details-marker{display:none;}
  details.learn>summary::after{content:'+';font-family:var(--mono);font-size:22px;color:var(--cyan);transition:.25s;}
  details.learn[open]>summary::after{transform:rotate(45deg);}
  details.learn>summary:hover{background:var(--bg-2);}
  details.learn>summary:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:-2px;}
  .learn-body{padding:0 22px 22px;}
  .docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
  @media(max-width:820px){.docs-grid{grid-template-columns:1fr;}}
  .doc-p{color:var(--ink-1);font-size:15.5px;margin:0 0 12px;}
  .doc-steps,.doc-list{color:var(--ink-1);font-size:15px;padding-left:20px;margin:0 0 12px;}
  .doc-steps li,.doc-list li{margin-bottom:9px;}
  .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);}
  .doc-code{
    font-family:var(--mono);font-size:13px;background:var(--bg-0);border:1px solid var(--line);
    border-radius:var(--r-sm);padding:14px;overflow-x:auto;color:var(--ink-1);
  }
  .pin-table{width:100%;border-collapse:collapse;font-size:14px;color:var(--ink-1);}
  .pin-table td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top;}
  .pin-table td:first-child{color:var(--ink-0);width:38%;}
  code,em{font-family:var(--mono);font-style:normal;color:var(--cyan);}

  .foot{
    display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:34px;
    padding-top:20px;border-top:1px solid var(--line);
    font-family:var(--mono);font-size:12px;color:var(--ink-2);
  }
  .badge{color:var(--cyan);}
  .badge.warn{color:var(--amber);}

  /* Visually hidden, still announced. */
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }

  /* in-page dialog ---------------------------------------------------- */
  dialog.ask{
    max-width:min(520px,calc(100vw - 32px));width:100%;border:1px solid var(--line-bright);
    border-radius:var(--r);background:var(--bg-2);color:var(--ink-0);
    padding:26px;box-shadow:var(--shadow);font-family:var(--sans);
  }
  dialog.ask::backdrop{background:rgba(3,5,7,.72);backdrop-filter:blur(3px);}
  dialog.ask h3{font-size:20px;font-weight:600;margin-bottom:12px;}
  dialog.ask p{color:var(--ink-1);font-size:15px;margin:0 0 12px;}
  dialog.ask .ask-label{display:block;font-size:14px;color:var(--ink-1);margin:14px 0 8px;}
  dialog.ask input{width:100%;}
  dialog.ask .ask-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;margin-top:20px;}
  dialog.ask .btn.danger{
    background:linear-gradient(135deg,var(--red),#c9483e);color:#fff;
    border-color:transparent;box-shadow:0 0 22px rgba(239,106,95,.3);
  }
  dialog.ask [hidden]{display:none;}

  .toast{
    position:fixed;left:50%;bottom:30px;transform:translate(-50%,200%);z-index:50;
    opacity:0;visibility:hidden;pointer-events:none;
    max-width:min(560px,calc(100vw - 32px));text-align:center;
    background:var(--cyan);color:#04100d;font-weight:600;padding:14px 26px;border-radius:22px;
    box-shadow:0 8px 40px rgba(94,234,212,.45);
    transition:transform .38s cubic-bezier(.2,.9,.3,1.3), opacity .25s, visibility .25s;
  }
  .toast.on{transform:translate(-50%,0);opacity:1;visibility:visible;}

  /* home / entry ------------------------------------------------------ */
  /* Visibility is expressed by HIDING, never by forcing a display type: these
     classes sit on buttons, sections and plain containers alike, so imposing
     one value on all of them turns block containers into inline rows. When the
     element should be visible no rule applies at all and it keeps its own. */
  body:not(.in-app) .app-only{display:none;}
  body:not(.oracle-hw) .hw-only{display:none;}
  body:not(.oracle-paper) .paper-only{display:none;}

  .choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;}
  .choice{
    font:inherit;text-align:left;cursor:pointer;color:var(--ink-0);
    background:linear-gradient(180deg,rgba(20,26,31,.92),rgba(13,17,20,.92));
    border:1.5px solid var(--line-bright);border-radius:var(--r);padding:26px;
    display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;
    transition:transform .2s cubic-bezier(.2,.9,.3,1.2), border-color .2s, box-shadow .2s;
  }
  .choice::after{
    content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;
    background:radial-gradient(420px 200px at 50% 0%, rgba(94,234,212,.16), transparent 70%);
  }
  .choice:hover{transform:translateY(-4px);border-color:var(--cyan-dim);box-shadow:var(--shadow),0 0 34px rgba(94,234,212,.18);}
  .choice:hover::after{opacity:1;}
  .choice:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:3px;}
  .ch-mark{
    width:46px;height:46px;display:block;color:var(--cyan);
    transition:color .4s ease, transform .5s cubic-bezier(.2,.9,.3,1.2);
  }
  .choice:hover .ch-mark{color:var(--cyan-hot);transform:translateY(-2px) scale(1.04);}
  .choice[aria-pressed="true"] .ch-mark{color:var(--cyan-hot);}
  .ch-title{font-size:21px;font-weight:600;letter-spacing:-.01em;}
  .ch-body{color:var(--ink-1);font-size:15px;line-height:1.55;flex:1;}
  .ch-tag{
    align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line-bright);
    border-radius:999px;padding:5px 11px;
  }
  .ch-tag.good{color:var(--cyan);border-color:var(--cyan-dim);background:rgba(94,234,212,.07);}
  .ch-cta{color:var(--cyan);font-weight:600;font-size:16px;margin-top:4px;}
  /* Warnings that must be read before a choice is made, not after it fails. */
  .ch-warn{
    color:var(--amber);font-size:14px;line-height:1.5;
    border-left:2px solid var(--amber);padding-left:11px;
  }
  .ch-warn.block{display:block;margin:0;max-width:62ch;}
  .ch-warn[hidden]{display:none;}

  .just-looking{text-align:center;color:var(--ink-2);margin:30px auto 0;font-size:15px;max-width:600px;}
  .linky{
    font:inherit;font-size:15px;color:var(--cyan);background:none;border:0;padding:0;
    cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  }
  .linky:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:3px;}
  @media(max-width:560px){.choice{padding:22px;}}

  /* setup forks ------------------------------------------------------- */
  .fork{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:6px;}
  .forkbtn{
    font:inherit;text-align:left;cursor:pointer;color:var(--ink-0);background:var(--bg-0);
    border:1.5px solid var(--line-bright);border-radius:var(--r-sm);padding:16px 18px;
    display:flex;flex-direction:column;gap:5px;transition:.18s;min-height:76px;
  }
  .forkbtn:hover{border-color:var(--cyan-dim);transform:translateY(-1px);}
  .forkbtn:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:3px;}
  .forkbtn[aria-pressed="true"]{border-color:var(--cyan);background:rgba(94,234,212,.08);box-shadow:0 0 0 3px rgba(94,234,212,.1);}
  .fk-t{font-weight:600;font-size:16px;}
  .fk-s{color:var(--ink-1);font-size:14px;line-height:1.45;}
  .forkbtn[aria-pressed="true"] .fk-s{color:var(--ink-0);}
  .fork-panel{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);}
  .fork-panel[hidden]{display:none;}
  .ready-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
  .ready-line{
    margin-top:18px;font-family:var(--mono);font-size:13px;color:var(--ink-2);
    display:flex;align-items:center;gap:8px;min-height:20px;
  }
  .ready-line.ready{color:var(--green);}
  .ready-line.ready::before{content:'✓';font-weight:700;}

  /* entropy pad ------------------------------------------------------- */
  .entropy{margin-bottom:20px;}
  .entropy-pad{
    display:block;width:100%;max-width:330px;aspect-ratio:1;touch-action:none;cursor:crosshair;
    background:var(--bg-0);border:1.5px dashed var(--line-bright);border-radius:var(--r-sm);
    transition:border-color .25s;
  }
  .entropy-pad:hover{border-color:var(--cyan-dim);}
  .entropy-pad.full{border-style:solid;border-color:var(--green);}

  .what-strip{
    list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:14px;padding:0;margin:0 0 40px;
  }
  .what-strip li{display:flex;flex-direction:column;gap:6px;padding:0 2px;}
  .what-strip strong{font-size:16px;color:var(--cyan);}
  .what-strip span{color:var(--ink-1);font-size:14.5px;line-height:1.5;}

  .choice[aria-pressed="true"]{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(94,234,212,.12);}
  .choice[aria-pressed="true"]::after{opacity:1;}
  .continue-row{text-align:center;margin:22px 0 6px;}
  .continue-hint{color:var(--ink-2);font-size:14px;margin:10px 0 0;}

  /* paper oracle ------------------------------------------------------ */
  .sheet-panel{margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-0);}
  .sheet-status{font-family:var(--mono);font-size:13px;color:var(--ink-2);margin-bottom:12px;}
  .sheet-status.good{color:var(--green);}
  .sheet-label{display:block;font-size:14px;color:var(--ink-1);margin:14px 0 8px;}
  .sheet-error{color:var(--red);font-size:14px;margin-top:10px;min-height:20px;}
  .scan-video{width:100%;max-width:340px;border-radius:var(--r-sm);border:1px solid var(--line-bright);background:#000;display:block;}
  #sheetManual{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;}
  .warn-box{
    border:1px solid var(--amber);background:rgba(242,178,99,.09);border-radius:var(--r-sm);
    padding:16px 18px;margin-bottom:18px;font-size:15px;color:var(--ink-1);
  }
  .warn-box strong{color:var(--amber);display:block;margin-bottom:8px;}
  .warn-box ul{margin:0;padding-left:20px;}
  .warn-box li{margin-bottom:7px;}
  .printable{background:#fff;color:#000;border-radius:var(--r-sm);padding:26px;text-align:center;margin-top:18px;}
  .printable h4{font-family:var(--mono);font-size:15px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 16px;color:#000;}
  .printable .qr{width:220px;height:220px;image-rendering:pixelated;}
  .sheet-meta{display:flex;justify-content:center;gap:28px;margin:16px 0 12px;font-family:var(--mono);font-size:12px;}
  .sheet-meta .k{display:block;color:#666;text-transform:uppercase;letter-spacing:.08em;font-size:10px;}
  .sheet-meta .v{display:block;color:#000;font-size:14px;font-weight:600;}
  .sheet-code{
    font-family:var(--mono);font-size:13px;line-height:1.9;word-spacing:.2em;color:#000;
    background:#f3f3f3;border-radius:6px;padding:12px;margin:0 auto;max-width:430px;word-break:break-word;
  }
  .sheet-note{font-size:11.5px;color:#444;max-width:430px;margin:14px auto 0;line-height:1.5;}


  /* ====================================================================
     Choreography and depth.

     Motion here is deliberately unhurried: this is a page where something is
     genuinely being computed, and animation that snaps implies a lookup. Every
     duration below is paced to be readable rather than fast. All of it is
     switched off wholesale by the reduced-motion block at the end of this file.
     ==================================================================== */

  /* cards arrive in sequence rather than all at once ------------------- */
  @keyframes riseIn{
    from{opacity:0;transform:translateY(18px) scale(.985);}
    to{opacity:1;transform:none;}
  }
  body.in-app .steps > *{animation:riseIn .7s cubic-bezier(.2,.8,.2,1) backwards;}
  body.in-app .steps > *:nth-child(1){animation-delay:.04s;}
  body.in-app .steps > *:nth-child(2){animation-delay:.12s;}
  body.in-app .steps > *:nth-child(3){animation-delay:.2s;}
  body.in-app .steps > *:nth-child(4){animation-delay:.28s;}
  body.in-app .steps > *:nth-child(5){animation-delay:.36s;}
  body.in-app .steps > *:nth-child(6){animation-delay:.44s;}
  body:not(.in-app) .hero,
  body:not(.in-app) .what-strip,
  body:not(.in-app) #homeStep1{animation:riseIn .75s cubic-bezier(.2,.8,.2,1) backwards;}
  body:not(.in-app) .what-strip{animation-delay:.08s;}
  body:not(.in-app) #homeStep1{animation-delay:.16s;}

  /* a completed step stamps a check over its number -------------------- */
  .num{position:relative;overflow:hidden;}
  .card.done .num::after{
    content:'✓';position:absolute;inset:0;display:grid;place-items:center;
    background:var(--cyan);color:#04100d;font-size:17px;font-weight:700;
    animation:stampIn .55s cubic-bezier(.2,.9,.3,1.5) backwards;
  }
  @keyframes stampIn{
    from{opacity:0;transform:scale(.4) rotate(-18deg);}
    to{opacity:1;transform:none;}
  }

  /* the primary action carries a slow sheen ---------------------------- */
  #deriveBtn{position:relative;overflow:hidden;}
  #deriveBtn::after{
    content:'';position:absolute;top:0;bottom:0;width:55%;left:-60%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
    animation:sheen 6.5s cubic-bezier(.4,0,.3,1) infinite;pointer-events:none;
  }
  #deriveBtn:disabled::after{animation:none;}
  @keyframes sheen{0%,62%{left:-45%;}100%{left:118%;}}

  /* depth on the cards ------------------------------------------------- */
  .card{position:relative;}
  .card::before{
    content:'';position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  }
  .card.step{transition:border-color .45s ease, box-shadow .45s ease;}
  .choice{transition:transform .38s cubic-bezier(.2,.9,.3,1.2), border-color .38s ease, box-shadow .38s ease;}
  .choice::after{transition:opacity .5s ease;}
  .forkbtn{transition:border-color .32s ease, transform .32s cubic-bezier(.2,.9,.3,1.2), background .32s ease;}

  /* the result ---------------------------------------------------------- */
  .result{transition:border-color .6s ease, background .6s ease;}
  .result:not(.empty){
    border-color:var(--cyan-dim);
    box-shadow:0 0 44px rgba(94,234,212,.1), inset 0 1px 0 rgba(255,255,255,.05);
  }
  /* The password already lands character by character (see revealPassword),
     so the container only has to bloom underneath it. */
  .pw.reveal{animation:pwBloom 1.9s cubic-bezier(.2,.8,.2,1) backwards;}
  @keyframes pwBloom{
    0%{text-shadow:0 0 0 rgba(94,234,212,0);letter-spacing:.16em;opacity:.55;}
    45%{text-shadow:0 0 40px rgba(94,234,212,.75);}
    100%{text-shadow:0 0 26px rgba(94,234,212,.45);letter-spacing:.04em;opacity:1;}
  }
  .pw{transition:filter .5s ease;}

  /* the connection dot breathes rather than blinks ---------------------- */
  .dot.live{animation:pulse 2.6s ease-in-out infinite;}

  /* toast dwells long enough to be read --------------------------------- */
  .toast{transition:transform .5s cubic-bezier(.2,.9,.3,1.3), opacity .35s, visibility .35s;}

  /* the dialog arrives ------------------------------------------------- */
  dialog.ask[open]{animation:askIn .42s cubic-bezier(.2,.9,.3,1.2);}
  dialog.ask[open]::backdrop{animation:fadeIn .42s ease;}
  @keyframes askIn{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
  @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

  /* insecure context -------------------------------------------------- */
  /* Deliberately not dismissible. A "continue anyway" button on this would be
     clicked through, and the thing it guards is the master phrase. */
  .insecure-gate{
    position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;
    background:rgba(4,6,8,.94);backdrop-filter:blur(6px);overflow-y:auto;
  }
  .insecure-gate[hidden]{display:none;}
  .insecure-card{
    max-width:620px;background:var(--bg-2);border:1.5px solid var(--red);
    border-radius:var(--r);padding:30px 32px;box-shadow:0 20px 70px rgba(0,0,0,.6);
  }
  .insecure-mark{
    display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
    background:var(--red);color:#1a0603;font-family:var(--mono);font-weight:700;
    font-size:24px;margin-bottom:16px;
  }
  .insecure-card h2{font-size:23px;font-weight:600;margin-bottom:14px;letter-spacing:-.01em;}
  .insecure-card p{color:var(--ink-1);font-size:15.5px;line-height:1.6;margin:0 0 13px;}
  .insecure-card p:last-child{margin-bottom:0;}
  .insecure-card code{
    font-family:var(--mono);font-size:.88em;color:var(--amber);
    background:var(--bg-0);padding:.12em .4em;border-radius:4px;
  }
  .insecure-also{
    border-left:2px solid var(--amber);padding-left:13px;color:var(--ink-2) !important;
  }
  @media(max-width:560px){.insecure-card{padding:22px 20px;}}

  @media print{
    body{background:#fff;}
    #rain,.aurora,.toast{display:none !important;}
    /* A password on paper is the one thing this project exists to avoid, so an
       accidental Ctrl+P never carries one — with or without the class below. */
    /* #viz carries the live derivation values, S included — an OPRF output on
       paper is the same mistake as a password on paper. */
    #resultCard,#passphrase,#sheetManual,#trace,#viz{display:none !important;}
    /* sheet.js lifts #printable to the top of <body> and sets this class, so
       there is no app left in the flow to paginate into blank pages. */
    body.printing-sheet > *{display:none;}
    body.printing-sheet > #printable{display:block;margin:0;padding:0;}
  }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
    html{scroll-behavior:auto;}
    #rain{display:none;}
  }