/* The site's theme: Stripe's Checkout look, adopted everywhere so the embedded form and the pages are one piece.
   Loaded last on every page; it re-points the library's page.css tokens (--paper, --ink, --orange, --blue…) at these values. */
:root{
  --bg:#ffffff;--bg2:#f6f9fc;--ink:#30313d;--ink-2:#6d6e78;--ink-3:#8b8d97;--rule:#e6e6e6;
  --acc:#0570de;--acc2:#0356a8;--acc-soft:#e8f1fc;--danger:#df1b41;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
  --shadow:0 1px 1px rgba(0,0,0,.03),0 3px 6px rgba(0,0,0,.02);--shadow-card:0 2px 5px rgba(50,50,93,.08),0 1px 2px rgba(0,0,0,.05);
  /* aliases for the library's page.css / diagram.css */
  --paper:var(--bg);--panel:var(--bg2);--scene:var(--bg2);--orange:var(--acc);--orange-ink:var(--acc2);--blue:var(--acc);--blue-soft:var(--acc-soft);--stop:var(--danger);
  --mono:var(--sans);--disp:var(--sans);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#ffffff;--bg2:#f6f9fc;--ink:#30313d;--ink-2:#6d6e78;--ink-3:#8b8d97;--rule:#e6e6e6;--paper:#ffffff;--panel:#f6f9fc;--scene:#f6f9fc;--orange:#0570de;--orange-ink:#0356a8;--blue:#0570de;--blue-soft:#e8f1fc;color-scheme:light}}
:root[data-theme="dark"]{--bg:#ffffff;--bg2:#f6f9fc;--ink:#30313d;--ink-2:#6d6e78;--ink-3:#8b8d97;--rule:#e6e6e6;--paper:#ffffff;--panel:#f6f9fc;--scene:#f6f9fc;--orange:#0570de;--orange-ink:#0356a8;--blue:#0570de;--blue-soft:#e8f1fc;color-scheme:light}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
.eyebrow{font-family:var(--sans)!important;font-size:13px!important;font-weight:500;letter-spacing:.02em!important;text-transform:uppercase;color:var(--acc)!important}
h1,h2,h3{font-family:var(--sans);text-transform:none;letter-spacing:-.02em;font-weight:700}
a{color:var(--acc)}
/* the plain pages: sign-in, welcome, callback, not-active */
.plain h1{font-size:clamp(30px,5vw,44px)!important;line-height:1.05;text-transform:none!important;font-family:var(--sans)!important;letter-spacing:-.02em}
.plain p{color:var(--ink-2)}
.plain input{font-family:var(--sans);border:1px solid var(--rule);border-radius:6px;box-shadow:var(--shadow);padding:12px 12px;color:var(--ink);background:#fff}
.plain input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.plain button,.btn{font-family:var(--sans)!important;font-size:15px!important;font-weight:600;letter-spacing:0!important;text-transform:none!important;background:var(--acc);color:#fff;border:0;border-radius:6px;padding:12px 18px;box-shadow:var(--shadow);cursor:pointer}
.plain button:hover,.btn:hover{background:var(--acc2)}
.plain .msg{font-family:var(--sans)!important;font-size:14px!important;color:var(--acc)}
.plain .msg.err{color:var(--danger)}
.plain .fine{color:var(--ink-3)}
/* the members' page chrome around the drawing */
.top{border-bottom:1px solid var(--rule);box-shadow:var(--shadow)}
.top h1{font-size:clamp(20px,3vw,28px)}
.top .who{font-family:var(--sans);font-size:13px;color:var(--ink-2);letter-spacing:0}
.modes button,.replay,.modes .parts,.panel .x{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;background:#fff;color:var(--ink);border:1px solid var(--rule);border-radius:6px;padding:8px 14px;box-shadow:var(--shadow)}
.modes button[aria-pressed="true"]{background:var(--acc);color:#fff;border-color:var(--acc)}
.modes .parts{color:var(--acc);border-color:var(--rule)}
.modes button:hover,.replay:hover,.panel .x:hover{border-color:#c9cbd3}
.stage{background:var(--bg2)}
.stage .hint{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;color:var(--ink-2);background:rgba(255,255,255,.85);border-radius:4px}
.panel{border-left:1px solid var(--rule);box-shadow:-2px 0 8px rgba(50,50,93,.05)}
.panel h2{font-family:var(--sans);font-size:22px;text-transform:none}
.panel .st{font-family:var(--sans);font-size:12px;letter-spacing:.02em;color:var(--acc2)}
.panel .q h3{font-family:var(--sans);font-size:12px;letter-spacing:.04em;font-weight:600;color:var(--acc)}
.panel .q.flow h3{color:var(--acc2)}.panel .q.flow{background:var(--acc-soft)}
.panel .list button{font-family:var(--sans)}
.cap{border-top:1px solid var(--rule)}
.cap .n{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--acc)}
.bar{background:var(--rule)}.bar i{background:var(--acc)}
@media (max-width:760px){.panel{border-top:1px solid var(--rule)}}