/* The site's own copy of the typeface. Loaded here because this template
   renders no theme chrome, so the theme's own @font-face never arrives. The
   file is the variable subset the rest of puregpl.com uses, weights 500-800. */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url(../fonts/bricolage-grotesque-subset.woff2) format("woff2-variations");
  font-weight:500 800;font-style:normal;font-display:swap;
}

/* ===========================================================================
   The page chrome. Every token below is lifted from puregpl.com's own
   stylesheet (the .ph block and the --pgpl-* set), so the guide, the shop and
   the plugin are one piece of design. Light only, as the site is.
   =========================================================================== */
:root{
  color-scheme:light;

  /* type, straight from the site */
  --display:"Bricolage Grotesque","Poppins",system-ui,sans-serif;
  --mono:ui-monospace,Menlo,SFMono-Regular,Consolas,monospace;
  --t-3xl:clamp(2.5rem,5.2vw,4.2rem);
  --t-2xl:clamp(1.85rem,3.4vw,2.7rem);
  --t-xl:clamp(1.3rem,2vw,1.6rem);
  --t-lg:1.15rem; --t-md:1rem; --t-sm:.925rem; --t-xs:.8rem;

  /* radii, straight from the site */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-full:999px;

  /* surfaces and ink */
  --bg:#ffffff; --tint:#f6f7fd; --panel:#ffffff;
  --line:rgba(11,14,28,.09); --line-2:rgba(11,14,28,.06); --line-3:rgba(11,14,28,.14);
  --ink:#0b0e1c; --mute:#55607d; --mute-2:#66708b;
  --ultra:#2436e4; --ultra-deep:#1b29b8; --wash:#eef1ff;
  --live:#16a34a; --live-wash:#e8f7ee;
  --warn:#8a6100; --warn-wash:#fdf6e3;
  --grad:linear-gradient(135deg,#2436e4,#5b32e8);
  --glow:0 16px 34px -16px rgba(60,80,255,.95);
  --lift:0 0 0 1px rgba(11,14,28,.06),0 1px 2px rgba(11,14,28,.04),0 18px 34px -24px rgba(11,14,28,.4);
  --rail:292px;
}

*{box-sizing:border-box}
html,body{background:var(--bg)}
body{
  margin:0;color:var(--ink);font-family:var(--display);
  font-size:16.5px;font-weight:500;line-height:1.62;-webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
}
h1,h2,h3,h4{margin:0;font-family:var(--display);letter-spacing:-.03em;line-height:1.14;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--ultra-deep)}
strong{font-weight:700;color:var(--ink)}
code{font-family:var(--mono);font-size:.85em;padding:2px 7px;border-radius:7px;background:var(--wash);color:var(--ultra-deep);white-space:nowrap}
svg{display:block}
:focus-visible{outline:2px solid var(--ultra);outline-offset:3px;border-radius:6px}

/* progress */
/* A logged-in editor gets WordPress's admin bar drawn over the top of the
   page, and the sidebar and progress bar are both pinned to the viewport. Both
   move down by its height rather than hiding underneath it. */
body.admin-bar #bar{top:32px}
body.admin-bar aside{top:32px}
@media screen and (max-width:782px){
  body.admin-bar #bar{top:46px}
  body.admin-bar aside{top:46px}
  body.admin-bar #top{top:46px}
}

#bar{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:3px;z-index:60;pointer-events:none}
#bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .45s cubic-bezier(.2,.8,.2,1)}

/* ---- sidebar: white, the way the site's own surfaces are ---- */
aside{
  position:fixed;top:0;bottom:0;left:0;width:var(--rail);z-index:50;
  display:flex;flex-direction:column;background:var(--panel);
  border-right:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
.brand{padding:26px 24px 20px;display:flex;gap:13px;align-items:center;border-bottom:1px solid var(--line-2)}
.brand .mk{width:44px;height:44px;border-radius:14px;background:var(--grad);display:grid;place-items:center;font-size:21px;font-weight:800;letter-spacing:-.04em;color:#fff;flex:none;box-shadow:var(--glow)}
.brand b{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.brand em{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2);margin-top:3px}
.find{padding:16px 18px 4px;position:relative}
.find svg{position:absolute;left:31px;top:50%;transform:translateY(-50%);color:var(--mute-2)}
.find input{width:100%;padding:10px 12px 10px 36px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--tint);color:var(--ink);font-family:var(--display);font-size:14px;font-weight:500}
.find input::placeholder{color:var(--mute-2);font-weight:500}
.find input:focus{outline:none;border-color:var(--ultra);background:#fff;box-shadow:0 0 0 3px var(--wash)}
nav{flex:1;overflow-y:auto;padding:8px 14px 22px}
nav h4{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2);padding:18px 10px 8px}
nav a{display:flex;gap:11px;align-items:center;padding:9px 11px;border-radius:var(--r-sm);color:var(--mute);text-decoration:none;font-size:14.8px;font-weight:600;transition:background .16s,color .16s}
nav a .n{width:22px;height:22px;border-radius:7px;background:var(--tint);color:var(--mute-2);display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:500;flex:none;transition:inherit;box-shadow:inset 0 0 0 1px var(--line-2)}
nav a:hover{background:var(--tint);color:var(--ink)}
nav a.on{background:var(--grad);color:#fff;box-shadow:0 12px 24px -14px rgba(60,80,255,1)}
nav a.on .n{background:rgba(255,255,255,.22);color:#fff;box-shadow:none}
nav a.hide{display:none}
.foot{padding:14px 24px;border-top:1px solid var(--line-2);font-size:12px;color:var(--mute-2);display:flex;justify-content:space-between;align-items:center;font-weight:600}
.foot b{color:var(--ink);font-family:var(--mono);font-weight:500}

/* mobile bar */
#top{display:none;position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0px));align-items:center;gap:12px}
#top button{background:var(--tint);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm);padding:8px 10px;cursor:pointer;display:grid;place-items:center}
#top b{font-size:15.5px;font-weight:800;letter-spacing:-.025em}
#veil{display:none;position:fixed;inset:0;background:rgba(11,14,28,.34);z-index:45;backdrop-filter:blur(2px)}

/* ---- main, on the site's tint with its aurora wash ---- */
main{
  margin-left:var(--rail);padding:0 44px 96px;
  padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));
  background:
    radial-gradient(900px 460px at 0% -6%,rgba(36,54,228,.07),transparent 62%),
    radial-gradient(760px 420px at 100% 0%,rgba(91,50,232,.06),transparent 60%),
    var(--tint);
  min-height:100vh;
}
.col{max-width:1010px;margin:0 auto}
.sec{display:none;scroll-margin-top:80px}
.sec.on{display:block;animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sec.on{animation:none}#bar i{transition:none}}

/* section header, echoing the site's hero: dot grid behind a big Bricolage title */
.head{position:relative;padding:56px 0 32px;display:flex;flex-direction:column;gap:14px;isolation:isolate}
.head::before{
  content:"";position:absolute;z-index:-1;left:-44px;right:-44px;top:0;height:230px;
  background-image:radial-gradient(circle,rgba(11,14,28,.13) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 66% 74% at 18% 30%,#000 8%,transparent 74%);
  mask-image:radial-gradient(ellipse 66% 74% at 18% 30%,#000 8%,transparent 74%);
  opacity:.75;pointer-events:none;
}
.head .r{display:flex;gap:12px;align-items:center}
.head .chip{width:34px;height:34px;border-radius:11px;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:14px;flex:none;box-shadow:var(--glow)}
.head .eye{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ultra-deep)}
.head h1{font-size:clamp(2rem,4.2vw,3.05rem);font-weight:800;letter-spacing:-.04em;line-height:1.02}
.head .lede{font-size:var(--t-lg);color:var(--mute);max-width:58ch}
.head::after{content:"";height:1px;background:linear-gradient(90deg,var(--line-3),transparent);margin-top:8px}
.bd{display:flex;flex-direction:column;gap:32px;padding-top:34px}
.bd>p{color:var(--mute);max-width:66ch}
h2.s{font-size:var(--t-xl);font-weight:800;letter-spacing:-.03em;margin-top:8px}
h3.s{font-size:1.18rem;font-weight:800;letter-spacing:-.025em;margin-top:2px}

/* frame around a drawn replica */
.frame{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel);overflow:hidden;box-shadow:var(--lift)}
.frame>.cap{display:flex;gap:9px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--line-2);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2);background:var(--tint)}
.frame>.cap i{width:7px;height:7px;border-radius:50%;background:var(--ultra);flex:none;box-shadow:0 0 0 3px var(--wash)}
.frame>.cap em{font-style:normal;margin-left:auto;letter-spacing:0;text-transform:none;font-weight:600;font-size:11.5px;color:var(--mute-2)}
.frame .hold{overflow-x:auto;padding:20px;background:var(--tint);-webkit-overflow-scrolling:touch}
.frame .cap .sw{margin-left:auto;display:inline-flex;align-items:center;gap:6px;letter-spacing:0;text-transform:none;font-weight:600;font-size:11.5px;color:var(--mute-2)}
.frame .cap .sw svg{width:13px;height:13px}
.frame .note-b{padding:13px 20px;border-top:1px solid var(--line-2);font-size:14px;color:var(--mute-2);font-weight:500}
.frame .note-b b,.frame .note-b strong{color:var(--ink);font-weight:700}

.legend{list-style:none;margin:0;padding:18px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:13px 24px;border-top:1px solid var(--line-2)}
.legend li{display:grid;grid-template-columns:24px 1fr;gap:12px;font-size:14.8px;color:var(--mute)}
.legend .k{width:22px;height:22px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:11px;margin-top:3px;box-shadow:0 6px 12px -6px rgba(60,80,255,.9)}
.legend b{color:var(--ink);font-weight:700;display:block}

/* the "how to" block, in the site's wash */
.how{border-radius:var(--r-md);padding:24px 26px;background:linear-gradient(135deg,var(--wash),#fff 72%);border:1px solid rgba(36,54,228,.14)}
.how>b{display:flex;gap:9px;align-items:center;font-size:1.12rem;font-weight:800;letter-spacing:-.025em;margin-bottom:16px;color:var(--ink)}
.how>b svg{color:var(--ultra)}
ol.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:flex;flex-direction:column;gap:14px}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:29px 1fr;gap:14px;align-items:start}
ol.steps li::before{content:counter(s);width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid rgba(36,54,228,.22);color:var(--ultra-deep);display:grid;place-items:center;font-family:var(--mono);font-size:12px;margin-top:1px}
ol.steps b{font-weight:700}
ol.steps span{display:block;color:var(--mute);font-size:15.5px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px}
.dcard{padding:20px 22px;border-radius:var(--r-md);background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s}
.dcard:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.dcard .tag{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-2)}
.dcard h4{font-size:1.1rem;font-weight:800;letter-spacing:-.025em}
.dcard p{font-size:14.8px;color:var(--mute)}
.dcard.pick{border-color:var(--ultra);box-shadow:0 0 0 3px var(--wash)}
.dcard.pick .tag{color:var(--ultra-deep)}
.dcard .ic{width:36px;height:36px;border-radius:12px;background:var(--wash);color:var(--ultra-deep);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(36,54,228,.14)}

/* notes */
.note{display:grid;grid-template-columns:30px 1fr;gap:14px;padding:18px 20px;border-radius:var(--r-md);font-size:15.6px;border:1px solid}
.note .ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;margin-top:1px;color:#fff;flex:none}
.note b{display:block;margin-bottom:3px;color:var(--ink);font-weight:700}
.note p{color:var(--mute)}.note p+p{margin-top:8px}
.note.info{background:linear-gradient(135deg,var(--wash),#fff 78%);border-color:rgba(36,54,228,.16)}.note.info .ic{background:var(--ultra)}
.note.good{background:linear-gradient(135deg,var(--live-wash),#fff 78%);border-color:rgba(22,163,74,.2)}.note.good .ic{background:var(--live)}
.note.warn{background:linear-gradient(135deg,var(--warn-wash),#fff 78%);border-color:rgba(138,97,0,.2)}.note.warn .ic{background:var(--warn)}

/* tables */
.tw{overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--line);background:var(--panel)}
table.doc{width:100%;border-collapse:collapse;min-width:520px;font-size:15.4px}
table.doc th{text-align:left;padding:14px 20px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2);border-bottom:1px solid var(--line);background:var(--tint)}
table.doc td{padding:14px 20px;border-top:1px solid var(--line-2);color:var(--mute);vertical-align:top}
table.doc tbody tr:hover td{background:var(--tint)}
table.doc td:first-child{color:var(--ink);font-weight:700}
table.doc td b{color:var(--ink);font-weight:700}
table.doc .m{font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums}

/* the site's green tick list */
ul.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
ul.ticks li{display:grid;grid-template-columns:22px 1fr;gap:12px;color:var(--mute);font-size:15.6px}
ul.ticks .t{width:20px;height:20px;border-radius:50%;background:var(--live-wash);color:var(--live);display:grid;place-items:center;margin-top:3px;box-shadow:inset 0 0 0 1px rgba(22,163,74,.2)}
ul.ticks b{color:var(--ink);font-weight:700}

/* questions */
details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);margin-bottom:10px;overflow:hidden;transition:border-color .16s}
details[open]{border-color:rgba(36,54,228,.24);box-shadow:var(--lift)}
summary{cursor:pointer;padding:16px 20px;font-weight:700;font-size:16.3px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--mute-2);border-bottom:2px solid var(--mute-2);transform:rotate(45deg);flex:none;margin-top:-4px;transition:transform .2s}
details[open] summary::after{transform:rotate(-135deg);margin-top:2px;border-color:var(--ultra)}
details .ans{padding:0 20px 18px;color:var(--mute);font-size:15.6px;max-width:66ch}

/* pager */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:50px;padding-top:30px;border-top:1px solid var(--line)}
.pager a{display:flex;flex-direction:column;gap:3px;padding:17px 20px;border-radius:var(--r-md);background:var(--panel);border:1px solid var(--line);text-decoration:none;transition:border-color .16s,transform .16s,box-shadow .16s}
.pager a:hover{border-color:var(--ultra);transform:translateY(-2px);box-shadow:var(--lift)}
.pager span{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2)}
.pager b{font-size:1.05rem;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.pager a.next{text-align:right;align-items:flex-end}
.pager a.ghost{visibility:hidden}

@media (max-width:1000px){
  :root{--rail:0px}
  aside{transform:translateX(-100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);width:292px;box-shadow:0 30px 60px -30px rgba(11,14,28,.4)}
  aside.open{transform:none}
  #top{display:flex}#veil.open{display:block}
  main{padding:0 20px 84px}
  .head{padding-top:36px}
  .head::before{left:-20px;right:-20px}
}
@media (prefers-reduced-motion:reduce){aside{transition:none}.pager a:hover,.dcard:hover{transform:none}}
@media (max-width:560px){
  body{font-size:16px}
  .note{grid-template-columns:1fr}.note .ic{display:none}
  .pager{grid-template-columns:1fr}.legend{grid-template-columns:1fr}
  .how{padding:20px}
}

/* numbered keys inside a drawn replica, matching the legend under it */
.legend-k{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#2436e4,#5b32e8);color:#fff;font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:500;vertical-align:middle;margin-right:6px;letter-spacing:0;text-transform:none;box-shadow:0 4px 10px -3px rgba(36,54,228,.85)}

/* ===========================================================================
   .ui — the plugin, drawn. Values copied from the plugin's connect.css so the
   two cannot drift: ink #0b0e1c on #f6f7fd, 22px panels, the 135deg
   ultramarine-to-violet gradient, 42x24 switches, 42px tiles.
   =========================================================================== */
.ui,.ui-mail{
  --i:#0b0e1c; --pp:#f6f7fd; --sl:#55607d; --mu:#66708b;
  --ln:rgba(11,14,28,.09); --ln2:rgba(11,14,28,.06); --lns:rgba(11,14,28,.18);
  --ul:#2436e4; --uld:#1b29b8; --wh:#eef1ff;
  --gr:linear-gradient(135deg,#2436e4,#5b32e8);
  --ok:#16a34a; --okbg:rgba(22,163,74,.09); --wn:#8a6100; --wnbg:#fdf6e3; --bd:#b42323; --bdbg:#fdecec;
  --mn:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --rd:16px; --rdl:22px;
  --sh:0 0 0 1px rgba(11,14,28,.06),0 1px 2px rgba(11,14,28,.04),0 18px 34px -24px rgba(11,14,28,.4);
  --gl:0 14px 28px -14px rgba(60,80,255,.7);
  font-family:"Bricolage Grotesque","Poppins",system-ui,sans-serif;
  font-size:15px;line-height:1.6;color:var(--i);
}
.ui{
  background:radial-gradient(900px 420px at 0% -10%,rgba(36,54,228,.08),transparent 60%),
             radial-gradient(700px 380px at 100% 0%,rgba(91,50,232,.07),transparent 60%),var(--pp);
  padding:26px;border-radius:var(--rdl);min-width:680px;
}
.ui.narrow{min-width:0}
.ui *,.ui-mail *{box-sizing:border-box}
.ui p,.ui-mail p{margin:0}

/* header */
.ui-head{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.ui-logo{flex:none;width:52px;height:52px;border-radius:16px;background:var(--gr);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;letter-spacing:-.04em;box-shadow:var(--gl),inset 0 1px 0 rgba(255,255,255,.35)}
.ui-head h1{margin:0;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--i);font-family:inherit}
.ui-head p{margin:4px 0 0;color:var(--sl);font-size:14px}

/* tabs */
.ui-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;margin-bottom:22px;padding:5px;border-radius:999px;background:rgba(255,255,255,.86);box-shadow:var(--sh)}
.ui-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;font-size:14px;font-weight:700;color:var(--sl);text-decoration:none;background:transparent}
.ui-tab.on{background:var(--i);color:#fff;box-shadow:0 8px 18px -10px rgba(11,14,28,.6)}
.ui-tab svg{width:16px;height:16px;opacity:.8}
.ui-tab.on svg{opacity:1}
.ui-n{font-family:var(--mn);font-size:11.5px;font-weight:500;background:rgba(11,14,28,.08);color:var(--sl);border-radius:999px;padding:1px 7px}
.ui-tab.on .ui-n{background:var(--ul);color:#fff}

/* panels */
.ui-panel{background:#fff;border:0;border-radius:var(--rdl);box-shadow:var(--sh);padding:26px;margin-bottom:18px}
.ui-panel:last-child{margin-bottom:0}
.ui-ph{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.ui-ph h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.015em;color:var(--i);font-family:inherit;display:flex;align-items:center;gap:10px}
.ui-ph h2 svg{width:20px;height:20px;color:var(--ul)}
.ui-note{margin:0 0 16px;color:var(--sl);font-size:14px}

/* the membership banner */
.ui-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;padding:30px;border-radius:var(--rdl);color:#fff;margin-bottom:24px;
  background:radial-gradient(640px 320px at 8% 0%,rgba(255,255,255,.22),transparent 62%),
             radial-gradient(520px 320px at 100% 120%,rgba(255,140,220,.34),transparent 60%),
             radial-gradient(420px 260px at 70% -20%,rgba(80,220,255,.28),transparent 60%),
             linear-gradient(135deg,#1f2fd8 0%,#3b3ae6 55%,#6a2fe8 100%);
  box-shadow:0 0 0 1px rgba(11,14,28,.07),0 26px 44px -24px rgba(11,14,28,.5),inset 0 1px 0 rgba(255,255,255,.28)}
.ui-hero::after{content:"";position:absolute;z-index:-1;width:460px;height:460px;right:-140px;top:-230px;border-radius:50%;border:60px solid rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.1)}
.ui-kick{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:rgba(255,255,255,.78);margin-bottom:10px}
.ui-kick::before{content:"";width:8px;height:8px;border-radius:50%;background:#7CFFB2;box-shadow:0 0 0 4px rgba(124,255,178,.22)}
/* On the first-run screen the same kicker is ultramarine, not green. */
.ui-kick.setup{color:var(--ul)}
.ui-kick.setup::before{background:var(--ul);box-shadow:0 0 0 4px var(--wh)}
.ui-hero h2{margin:0;font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.05;font-family:inherit}
.ui-meta{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.ui-meta li{padding:7px 15px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:999px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.94);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.ui-meta b{font-family:var(--mn);font-weight:500;font-variant-numeric:tabular-nums}
.ui-quota{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:var(--rd);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}
.ui-dial{width:74px;height:74px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--mn);font-size:20px;font-weight:500;color:#fff;background:conic-gradient(#fff 0 100%,rgba(255,255,255,.25) 0);position:relative}
.ui-dial::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#3b3ae6}
.ui-dial span{position:relative;z-index:1}
.ui-quota div{font-size:13px;color:rgba(255,255,255,.92)}
.ui-quota .tr{height:6px;border-radius:999px;background:rgba(255,255,255,.28);margin:8px 0 6px;overflow:hidden}
.ui-quota .tr i{display:block;height:100%;width:100%;background:#fff;border-radius:999px}
.ui-quota small{font-size:11.5px;color:rgba(255,255,255,.7)}

/* table */
.ui-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.ui-table th{text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--mu);padding:0 14px 12px;border-bottom:1px solid var(--ln);white-space:nowrap}
.ui-table td{padding:16px 14px;border-bottom:1px solid var(--ln2);vertical-align:middle;color:var(--sl)}
.ui-table tr:last-child td{border-bottom:0}
.ui-table td:last-child{white-space:nowrap}
.ui-plugin{display:flex;align-items:center;gap:14px;min-width:0}
.ui-tile{flex:none;width:42px;height:42px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;letter-spacing:-.02em;color:var(--uld);background:linear-gradient(160deg,#fff,var(--wh));box-shadow:inset 0 0 0 1px rgba(36,54,228,.14),0 6px 14px -10px rgba(36,54,228,.5)}
.ui-tile.new{color:#fff;background:var(--gr);box-shadow:var(--gl),inset 0 1px 0 rgba(255,255,255,.3)}
.ui-tile.quiet{color:var(--mu);background:var(--pp);box-shadow:inset 0 0 0 1px var(--ln)}
.ui-name{color:var(--i);font-weight:700;font-size:15px;letter-spacing:-.01em;display:block;line-height:1.3;white-space:nowrap}
.ui-slug{display:inline-block;font-family:var(--mn);font-size:11.5px;color:var(--mu);background:var(--pp);box-shadow:inset 0 0 0 1px var(--ln2);border-radius:7px;padding:2px 8px;margin-top:6px;white-space:nowrap}
.ui-ver{font-family:var(--mn);font-variant-numeric:tabular-nums;color:var(--i);font-size:13.5px}
.ui-vnew{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;color:var(--uld);background:var(--wh);box-shadow:inset 0 0 0 1px rgba(36,54,228,.16);font-weight:600;font-family:var(--mn);font-size:13.5px}
.ui-vnew::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ul);box-shadow:0 0 0 3px rgba(36,54,228,.16)}

/* segmented switch */
.ui-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--pp);box-shadow:inset 0 0 0 1px var(--ln);white-space:nowrap}
.ui-opt{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--mu);text-decoration:none}
.ui-opt.on{background:#fff;color:var(--i);box-shadow:0 0 0 1px var(--ln),0 4px 10px -6px rgba(11,14,28,.4)}

/* switch */
.ui-sw{position:relative;display:inline-block;width:42px;height:24px;vertical-align:middle}
.ui-sw i{position:absolute;inset:0;border-radius:999px;background:rgba(11,14,28,.16);box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.ui-sw i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(11,14,28,.3)}
.ui-sw.on i{background:var(--gr);box-shadow:var(--gl)}
.ui-sw.on i::after{transform:translateX(18px)}

/* pills */
.ui-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.ui-pill.ok{background:var(--okbg);color:var(--ok);padding:5px 12px 5px 8px;box-shadow:inset 0 0 0 1px rgba(22,163,74,.16)}
.ui-pill.ok i{width:16px;height:16px;border-radius:50%;background:var(--ok);position:relative;flex:none}
.ui-pill.ok i::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:7px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.ui-pill.ultra{background:var(--wh);color:var(--uld);box-shadow:inset 0 0 0 1px rgba(36,54,228,.16)}
.ui-pill.mute{background:var(--pp);color:var(--mu)}
.ui-pill.warn{background:var(--wnbg);color:var(--wn)}
.ui-pill.warn i,.ui-pill.ultra i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* buttons */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 20px;border-radius:999px;border:1px solid var(--lns);background:#fff;color:var(--i);font-family:inherit;font-size:14px;font-weight:700;line-height:1.4;text-decoration:none;cursor:default}
.ui-btn.small{padding:7px 15px;font-size:12.5px}
.ui-btn.primary{background:var(--gr);border-color:transparent;color:#fff;box-shadow:var(--gl)}
.ui-btn.danger{border-color:transparent;background:var(--bdbg);color:var(--bd)}
.ui-btn svg{width:15px;height:15px}

/* master strip, cards, ticks, fields */
.ui-master{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;margin-bottom:26px;border-radius:var(--rd);background:linear-gradient(135deg,#e9edff,#f4f0ff);box-shadow:inset 0 0 0 1px rgba(36,54,228,.12)}
.ui-master b{display:block;font-size:15px;font-weight:700;color:var(--i)}
.ui-master span{display:block;color:var(--sl);font-size:14px}
.ui-field{margin-bottom:20px}
.ui-label{display:block;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--i);margin-bottom:7px}
.ui-help{margin:10px 0 0;color:var(--sl);font-size:13.5px}
.ui-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.ui-card{position:relative;display:block;padding:16px 18px;border-radius:var(--rd);background:#fff;box-shadow:inset 0 0 0 1px var(--lns)}
.ui-card.on{background:linear-gradient(160deg,#fff,var(--wh));box-shadow:inset 0 0 0 2px var(--ul),0 14px 28px -20px rgba(36,54,228,.6)}
.ui-card .tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mu);background:var(--pp);border-radius:999px;padding:3px 9px}
.ui-card.on .tag{background:var(--ul);color:#fff}
.ui-card b{display:block;margin-top:10px;font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--i)}
.ui-card .rng{display:block;font-family:var(--mn);font-size:12px;color:var(--mu);margin-top:4px}
.ui-card .dot{position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;background:var(--ul);display:grid;place-items:center}
.ui-card .dot::after{content:"";width:4px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translate(-1px,-1px)}
.ui-when{display:flex;flex-wrap:wrap;gap:12px}
.ui-when-item{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--rd);background:var(--pp);box-shadow:inset 0 0 0 1px var(--ln2);font-size:14px;font-weight:600}
.ui-select{padding:8px 14px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--ln);color:var(--uld);font-weight:700;font-size:14px}
.ui-ticks{display:grid;gap:8px}
.ui-tick{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--ln);font-size:14.5px;font-weight:600;color:var(--i);max-width:520px}
.ui-tick i{flex:none;width:22px;height:22px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1px var(--lns);position:relative}
.ui-tick.on{background:var(--wh);box-shadow:inset 0 0 0 1px rgba(36,54,228,.28)}
.ui-tick.on i{background:var(--gr);box-shadow:none}
.ui-tick.on i::after{content:"";position:absolute;left:8px;top:4px;width:5px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.ui-input{display:inline-flex;align-items:center;padding:10px 14px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--ln);font-family:var(--mn);font-size:13.5px;color:var(--mu);min-width:280px}
.ui-steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 22px;padding:0}
.ui-step{padding:16px 18px;border-radius:var(--rd);background:var(--pp);box-shadow:inset 0 0 0 1px var(--ln2)}
.ui-step .num{width:28px;height:28px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px var(--ln);color:var(--ul);display:grid;place-items:center;font-family:var(--mn);font-size:13px;margin-bottom:10px}
.ui-step.last .num{background:var(--gr);color:#fff;box-shadow:var(--gl)}
.ui-step em{display:block;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mu);margin-bottom:4px}
.ui-step span{font-size:14px;color:var(--i);font-weight:600}
.ui-rev{color:var(--mu);font-size:13px}
.ui-row-between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ui-quiet{color:var(--mu);font-size:13px;margin-top:10px}

/* the setup screen */
.ui-setup{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);border-radius:var(--rdl);overflow:hidden;box-shadow:var(--sh);background:#fff}
.ui-setup .l{padding:30px}
.ui-setup .r{padding:30px;color:#fff;background:linear-gradient(135deg,#2436e4,#5b32e8);display:flex;flex-direction:column;gap:20px}
.ui-setup h2{margin:0;font-size:29px;font-weight:800;letter-spacing:-.03em;line-height:1.08;font-family:inherit}
.ui-setup .lead{margin:14px 0 0;color:var(--sl);font-size:14.5px}
.ui-setup .r-step{display:grid;grid-template-columns:30px 1fr;gap:13px}
.ui-setup .r-step .b{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;font-family:var(--mn);font-size:13px}
.ui-setup .r-step b{display:block;font-size:15px;font-weight:700}
.ui-setup .r-step span{font-size:13.5px;color:rgba(255,255,255,.8)}

/* the logs list */
.ui-event{display:grid;grid-template-columns:70px 46px auto;column-gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--ln2)}
.ui-event:last-child{border-bottom:0}
.ui-event time{font-family:var(--mn);font-size:12.5px;color:var(--mu);line-height:1.3}
.ui-event time b{display:block;font-weight:500;color:var(--i);font-size:13.5px}
.ui-mark{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border-radius:999px;text-align:center}
.ui-mark.ok{background:var(--okbg);color:var(--ok)}
.ui-mark.fail{background:var(--bdbg);color:var(--bd)}
.ui-mark.info{background:var(--pp);color:var(--mu)}
.ui-event p{font-size:14px;color:var(--i)}

/* the WordPress plugins page */
.wp{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:13px;line-height:1.5;color:#3c434a;background:#fff;border:1px solid #c3c4c7;border-radius:4px;overflow:hidden;min-width:600px}
.wp .r{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr);gap:20px;padding:12px 16px;background:#f6f7f7;align-items:start}
.wp .r.act{background:#f0f6fc;border-left:4px solid #72aee6;padding-left:12px}
.wp .t{font-weight:600;color:#1d2327;font-size:14px}
.wp .lk{color:#2271b1}
.wp .rowlinks{margin-top:4px;font-size:13px}
.wp .desc{color:#3c434a}
.wp .meta{margin-top:6px;color:#50575e}
.wp .upd{background:#fff;border-left:4px solid #dba617;padding:10px 16px;display:flex;gap:10px;align-items:flex-start;font-size:13px}
.wp .upd svg{flex:none;color:#d63638;margin-top:2px}
.wp .via{color:#2436e4;font-weight:600}

/* the emails */
.ui-mail{background:#f6f7fd;padding:24px;border-radius:14px;min-width:0}
.ui-mail .top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.ui-mail .bnd{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:-.02em;color:#0b0e1c}
.ui-mail .bnd .m{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#2436e4,#5b32e8);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:800}
.ui-mail .when{font-size:12.5px;color:#66708b}
.ui-mail .card{background:#fff;border-radius:14px;padding:26px;border-top:4px solid var(--tone,#16a34a);box-shadow:0 1px 2px rgba(11,14,28,.06)}
.ui-mail .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:var(--tonebg,rgba(22,163,74,.1));color:var(--tone,#16a34a)}
.ui-mail h2{margin:14px 0 0;font-size:26px;font-weight:800;letter-spacing:-.03em;color:#0b0e1c;font-family:inherit;line-height:1.1}
.ui-mail .lead{margin:10px 0 0;color:#55607d;font-size:15px}
.ui-mail .lbl{margin:22px 0 8px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tone,#16a34a)}
.ui-mail .list{background:#f6f7fd;border-radius:12px;padding:4px 16px}
.ui-mail .li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid rgba(11,14,28,.06)}
.ui-mail .li:last-child{border-bottom:0}
.ui-mail .li b{display:block;font-size:14.5px;font-weight:700;color:#0b0e1c}
.ui-mail .li em{display:block;font-style:normal;font-family:var(--mn);font-size:12px;color:#66708b}
.ui-mail .li .v{font-family:var(--mn);font-size:14px;font-weight:600;color:var(--tone,#16a34a)}
.ui-mail .fine{margin:14px 0 0;font-size:13px;color:#66708b}
.ui-mail .foot{margin:16px 0 0;font-size:12.5px;color:#66708b;line-height:1.6}
.ui-mail .foot b{color:#0b0e1c}