/* Glossy buttons, shared by the homepage and the Ladder (not the nav).
   A glass body with a thin edge that catches the light: a bright arc on the border that turns toward the
   cursor when it comes near (specular.js sets --sa, the angle, and --si, the strength). Without a mouse the
   arc rests at the top left. The primary button is a solid blue glass in both themes; the ghost button is
   clear glass whose edge light is blue in light mode and white in dark mode. */
.btn{position:relative;isolation:isolate;--sa:-40deg;--si:.35;--sb-line:#fff;
  border-color:transparent!important;transition:transform .2s cubic-bezier(.2,.7,0,1),box-shadow .3s,background-color .3s}
.btn::before,.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity .35s}
/* the crisp lit edge, 1.2px wide */
.btn::before{opacity:var(--si);background:conic-gradient(from var(--sa),var(--sb-line) 0deg,var(--sb-line) 5deg,transparent 39deg,transparent 321deg,var(--sb-line) 355deg);padding:1.2px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* a soft light inside the glass where the edge is lit, only as the cursor comes near */
.btn::after{z-index:-1;opacity:calc(max(0,var(--si) - .35) * 1.4);
  background:radial-gradient(60px 30px at var(--gx,22%) var(--gy,8%),color-mix(in srgb,var(--sb-line) 38%,transparent),transparent 72%)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}

.btn.primary,.btn.beam{color:#fff;background-color:#2457cc;
  background-image:linear-gradient(to bottom,rgb(255 255 255 / .2),rgb(255 255 255 / .04) 48%,rgb(0 0 0 / 0) 52%,rgb(0 0 0 / .1));
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .16),inset 0 1px 0 rgb(255 255 255 / .35),0 10px 28px -10px rgb(36 87 204 / .75),0 2px 6px -2px rgb(5 7 15 / .35)}
.btn.primary:hover,.btn.beam:hover{background-color:#2a5fd8;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .2),inset 0 1px 0 rgb(255 255 255 / .4),0 14px 34px -10px rgb(36 87 204 / .9),0 2px 6px -2px rgb(5 7 15 / .35)}

.btn.ghost{--sb-line:#2457cc;color:var(--ink);background-color:color-mix(in srgb,var(--paper) 70%,transparent);
  background-image:linear-gradient(to bottom,rgb(255 255 255 / .55),rgb(255 255 255 / 0) 55%);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 14%,transparent),0 8px 22px -14px rgb(5 7 15 / .4)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,#2457cc 40%,transparent),0 10px 26px -14px rgb(36 87 204 / .55)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn.ghost{--sb-line:#fff;background-image:linear-gradient(to bottom,rgb(255 255 255 / .08),rgb(255 255 255 / 0) 55%);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .14),0 8px 22px -14px rgb(0 0 0 / .8)} }
:root[data-theme="dark"] .btn.ghost{--sb-line:#fff;background-image:linear-gradient(to bottom,rgb(255 255 255 / .08),rgb(255 255 255 / 0) 55%);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .14),0 8px 22px -14px rgb(0 0 0 / .8)}

.btn:disabled{transform:none}
.btn:disabled::before,.btn:disabled::after{opacity:0}
@media (prefers-reduced-motion: reduce){ .btn,.btn::before,.btn::after{transition:none} .btn:hover,.btn:active{transform:none} }
@media (forced-colors: active){ .btn{border-color:ButtonText!important} .btn::before,.btn::after{display:none} }