:root:root {

  --paper: #0A0D11;
  --paper-2: #0E1217;

  --surface: rgba(255, 255, 255, .045);

  --ink: #F2EEE4;
  --ink-2: rgba(242, 238, 228, .78);
  --ink-3: rgba(242, 238, 228, .60);
  --ink-4: rgba(242, 238, 228, .42);

  --dark: #12161C;
  --dark-2: #171C23;
  --dark-3: #0C1015;
  --on-dark: #F2EEE4;
  --on-dark-2: rgba(242, 238, 228, .76);
  --on-dark-3: rgba(242, 238, 228, .60);

  --accent: #93C7BE;
  --accent-hi: #B4DBD3;
  --accent-dk: #1C4E4A;

  --hair: rgba(242, 238, 228, .13);
  --hair-strong: rgba(242, 238, 228, .24);
  --hair-lit: rgba(255, 255, 255, .07);
  --hair-dark: rgba(242, 238, 228, .11);
  --hair-dark-2: rgba(242, 238, 228, .20);
  --hair-dark-lit: rgba(255, 255, 255, .05);

  --glass-blur: 22px;
  --glass-sat: 1.5;
  --glass-fill: rgba(255, 255, 255, .055);
  --glass-fill-2: rgba(255, 255, 255, .085);
  --glass-edge: rgba(255, 255, 255, .11);

  color-scheme: dark;
}

html { background: var(--paper); }

html.has-glbg body { background: transparent; }

.nav {
  background: rgba(10, 13, 17, .55);
  backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
  border-bottom: var(--hair-w) solid var(--hair);
}
@supports not (backdrop-filter: blur(1px)) {
  .nav { background: rgba(10, 13, 17, .92); }
}

.btn-p,
.btn.btn-p {
  background: var(--glass-fill-2);
  backdrop-filter: saturate(var(--glass-sat)) blur(16px);
  -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(16px);
  border: 1px solid var(--glass-edge);
  color: var(--ink);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .10),
              0 1px 24px -6px rgba(0, 0, 0, .6);
}
.btn-p:hover,
.btn.btn-p:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .20);
  color: var(--ink);
}

.btn-s,
.btn.btn-s {
  background: var(--glass-fill);
  backdrop-filter: saturate(var(--glass-sat)) blur(14px);
  -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(14px);
  border: 1px solid var(--hair);
  color: var(--ink-2);
}
.btn-s:hover,
.btn.btn-s:hover { border-color: var(--hair-strong); color: var(--ink); }

.load { background: var(--paper); }
.load-mk .lk-gr { fill: var(--ink); }
.load-mk .lk-la { fill: var(--ink-3); }

.nav-mk .lk-gr, .foot-lk .lk-gr { fill: var(--ink); }
.nav-mk .lk-la, .foot-lk .lk-la { fill: var(--ink-3); }

.sec,
.sec-alt,
main > section,
.wrap { background: transparent; }

.card,
.tier,
.wpanel,
.qa,
.stat,
.note,
.panel {
  background: var(--surface);
  border: 1px solid var(--hair);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .06);
}

input, textarea, select {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--hair-strong);
  color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--ink-4); }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, .06);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection { background: var(--accent); color: var(--paper); }

img, iframe, .embed, .shot {
  background: rgba(255, 255, 255, .03);
}

.hero, .hero-in { background: transparent; }
.hero h1, .hero .lead {
  text-shadow: 0 1px 20px rgba(6, 8, 11, .85), 0 0 52px rgba(6, 8, 11, .55);
}

@media print {
  :root:root {
    --paper: #fff; --paper-2: #fff; --surface: #fff;
    --ink: #000; --ink-2: #222; --ink-3: #444; --ink-4: #666;
    --hair: #ccc; --hair-strong: #999;
    --accent: #1C4E4A;
  }
  html, body { background: #fff; }
  .nav, .btn-p, .btn-s { background: none; backdrop-filter: none; }
}

.nav-prog { height: 1px; background: color-mix(in srgb, var(--accent) 55%, transparent); }