/* Fivebar glass layer. Loaded after each page's own styles; it only restyles surfaces (cards, panels, nav,
   buttons), never layout or content. Remove the <link> to go back to the flat paper look. */
:root{
  --g-bg:rgba(255,255,255,.42); --g-bg-hi:rgba(255,255,255,.62); --g-line:rgba(255,255,255,.8); --g-edge:rgba(20,33,26,.10);
  --g-sep:rgba(20,33,26,.09); --g-blur:blur(22px) saturate(175%); --g-r:20px; --g-r-sm:12px;
  --g-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 -1px 0 rgba(255,255,255,.25) inset,0 12px 40px -10px rgba(20,33,26,.18),0 2px 6px rgba(20,33,26,.05);
  --g-shadow-hi:0 1px 0 #fff inset,0 26px 50px -14px rgba(20,33,26,.28),0 4px 10px rgba(20,33,26,.08);
  --g-sheen:linear-gradient(140deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 38%,rgba(255,255,255,.04) 62%,rgba(255,255,255,.28) 100%);
  --g-nav:rgba(240,246,236,.55); --g-glow:rgba(179,38,30,.30);
  --g-a:rgba(150,214,170,.55); --g-b:rgba(160,196,236,.50); --g-c:rgba(240,186,170,.42); --g-d:rgba(214,226,150,.38);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --g-bg:rgba(22,38,30,.48); --g-bg-hi:rgba(30,50,40,.66); --g-line:rgba(255,255,255,.10); --g-edge:rgba(0,0,0,.35);
  --g-sep:rgba(228,236,223,.08);
  --g-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 14px 40px -10px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3);
  --g-shadow-hi:0 1px 0 rgba(255,255,255,.12) inset,0 28px 56px -14px rgba(0,0,0,.7),0 4px 10px rgba(0,0,0,.35);
  --g-sheen:linear-gradient(140deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 40%,rgba(255,255,255,0) 62%,rgba(255,255,255,.05) 100%);
  --g-nav:rgba(14,23,18,.6); --g-glow:rgba(229,83,75,.35);
  --g-a:rgba(40,120,80,.40); --g-b:rgba(40,80,140,.38); --g-c:rgba(140,60,50,.30); --g-d:rgba(90,110,40,.25)}}
:root[data-theme="dark"]{
  --g-bg:rgba(22,38,30,.48); --g-bg-hi:rgba(30,50,40,.66); --g-line:rgba(255,255,255,.10); --g-edge:rgba(0,0,0,.35);
  --g-sep:rgba(228,236,223,.08);
  --g-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 14px 40px -10px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3);
  --g-shadow-hi:0 1px 0 rgba(255,255,255,.12) inset,0 28px 56px -14px rgba(0,0,0,.7),0 4px 10px rgba(0,0,0,.35);
  --g-sheen:linear-gradient(140deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 40%,rgba(255,255,255,0) 62%,rgba(255,255,255,.05) 100%);
  --g-nav:rgba(14,23,18,.6); --g-glow:rgba(229,83,75,.35);
  --g-a:rgba(40,120,80,.40); --g-b:rgba(40,80,140,.38); --g-c:rgba(140,60,50,.30); --g-d:rgba(90,110,40,.25)}

/* The colour behind the glass */
html{background-color:var(--paper);background-image:
  radial-gradient(42vw 42vw at 8% 10%,var(--g-a),transparent 70%),
  radial-gradient(38vw 38vw at 94% 18%,var(--g-b),transparent 70%),
  radial-gradient(36vw 36vw at 72% 88%,var(--g-c),transparent 70%),
  radial-gradient(30vw 30vw at 18% 92%,var(--g-d),transparent 70%);background-attachment:fixed}
body{background:transparent!important}

/* Glass surfaces */
.statement,.livestrip,.seal-box,.ob-box,.seq li,
.strip,.card,.colc,.pcard,.ccard,.dfacts,.verdict,.tip,
.idcard,.url,.usage,.group,.code,.out,.notice,.short,.win,.chat,.found,.earnart,.toast{
  background:var(--g-sheen),var(--g-bg)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid var(--g-line)!important;outline:1px solid var(--g-edge);outline-offset:-1px;
  box-shadow:var(--g-shadow)!important;border-radius:var(--g-r)}
.tip,.toast,.notice,.short,.url,.code,.out{border-radius:var(--g-r-sm)}
.statement,.strip,.dfacts,.code,.out,.usage,.win,.chat{overflow:hidden}
:is(.statement,.strip,.dfacts,.group,.verdict,.usage,.code,.out,.idcard) :is(div,li,tr,td,th,header,dl,dt,dd,hr,p,span,section){border-color:var(--g-sep)!important}

/* Nav bar */
.top{background:var(--g-nav)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border-bottom:1px solid var(--g-line)!important;box-shadow:0 8px 30px -18px rgba(20,33,26,.35)}

/* Cards that respond to the pointer */
.card,.colc,.group{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s}
.card:hover,.card:focus-visible,.colc:hover{transform:translateY(-4px)!important;background:var(--g-sheen),var(--g-bg-hi)!important;box-shadow:var(--g-shadow-hi)!important}
.card.flag{outline-color:color-mix(in srgb,var(--red) 40%,transparent)}
.card.flag:hover,.card.flag:focus-visible{box-shadow:0 1px 0 #fff inset,0 26px 50px -14px var(--g-glow)!important}

/* Pills: buttons, chips, tabs, search */
.btn,.fbtn,.pill,.sel select,.search,.eyebrow span,.chip-row span{border-radius:999px!important}
.btn{box-shadow:0 8px 20px -8px rgba(20,33,26,.45)}
.btn.ghost,.eyebrow span,.chip-row span,.search,.sel select,.fbtn{background:var(--g-bg)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-line)!important;box-shadow:var(--g-shadow)!important}
.search:focus-within{outline:2px solid var(--ink);outline-offset:1px}
.tabs,.seg{border-radius:999px!important;overflow:hidden;background:var(--g-bg)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-line)!important;box-shadow:var(--g-shadow)!important}
.tabs button,.seg button{border:0!important;border-radius:999px!important}

/* The five steps on the landing page: the line runs behind the glass, the current step lifts */
.seq li{padding:22px 20px 20px!important;margin-right:12px;z-index:1;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,background .5s!important}
.seq::before{top:44px!important;z-index:0;background:var(--g-sep)!important}
.seq .bar{top:42px!important;height:5px!important;border-radius:5px;z-index:0;box-shadow:0 0 18px rgba(20,33,26,.3)}
.seq .dot{border-radius:50%;background:var(--g-bg-hi)!important;border:1px solid var(--g-line)!important;box-shadow:0 4px 12px rgba(20,33,26,.12)}
.seq li.on .dot{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
.seq li.now .dot{background:var(--red)!important;color:#fff!important;border-color:var(--red)!important;box-shadow:0 0 0 6px color-mix(in srgb,var(--red) 15%,transparent),0 6px 16px var(--g-glow)!important}
.seq li.now{transform:translateY(-6px);background:var(--g-sheen),var(--g-bg-hi)!important;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 26px 50px -14px var(--g-glow),0 4px 12px rgba(20,33,26,.08)!important}
@media (max-width:860px){.seq li{margin-right:0}.seq::before{top:0!important;left:45px!important}.seq li.now{transform:none}}

/* Phones and older browsers: keep the frosted colour, drop the costly blur on the big lists */
@media (max-width:700px){.card,.colc,.pcard,.seq li{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--g-sheen),var(--g-bg-hi)!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .statement,.livestrip,.seal-box,.ob-box,.seq li,.strip,.card,.colc,.pcard,.ccard,.dfacts,.verdict,.tip,.idcard,.url,.usage,.group,.code,.out,.notice,.short,.win,.chat,.found,.earnart,.toast,.top{background:var(--card)!important}}
@media (prefers-reduced-motion:reduce){.card,.colc,.group,.seq li{transition:none!important}.card:hover,.colc:hover{transform:none!important}}