@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: block;
  src: url(assets/fonts/fraunces-roman.woff2) format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: block;
  src: url(assets/fonts/fraunces-italic.woff2) format("woff2");
}
:root {
  --page:#e4ddd2;
  --ink:#2b2d2f;
  --mute:#5f605a;
  --rule:rgba(43,45,47,.19);
  --ivory:#ebe5d8;
  --card:#ece6da;
  --hover:#e5ded1;
  --press:#dcd4c6;
  --acc:#d9703f;
  --dash:rgba(43,45,47,.35);
  --sq-lt:#e2dac8;
  --sq-dk:#d7d0bf;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Nimbus Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --u:calc(100cqw/1600);
}
:root {
  --surround:#2a2824;
}
html {
  height: 100%;
  background: var(--surround);
}
html::before {
  content: "";
  position: fixed;
  inset: -60px;
  background: var(--surround) url(assets/backdrop.jpg) center/cover no-repeat;
}
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: transparent;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  overscroll-behavior: none;
}
img {
  -webkit-user-drag: none;
  user-select: none;
}
input,
textarea,
[contenteditable=true] {
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}
button {
  font: inherit;
  color: inherit;
}
.frame {
  position: absolute;
  inset: 0;
  margin: auto;
  --m:clamp(12px,2.2vh,52px);
  --tw:min(calc(100vw - 2*var(--m)),calc((100vh - 2*var(--m))*16/9));
  width: var(--tw);
  height: calc(var(--tw)*9/16);
  border-radius: clamp(8px, .6vw, 18px);
  overflow: hidden;
  container-type: size;
  background: var(--page);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    0 0 0 2px rgba(217, 112, 63, .32),
    0 30px 80px rgba(0, 0, 0, .6);
}
:focus {
  outline: none;
}
:focus-visible {
  outline: calc(2*var(--u)) solid var(--ink);
  outline-offset: calc(3*var(--u));
}
.word {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--serif);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.01em;
  color: var(--ink);
}
.word .w1 {
  font-style: italic;
}
.word .w2 {
  font-style: normal;
}
.word .dot {
  display: inline-block;
  width: .15em;
  height: .15em;
  margin-left: .07em;
  border-radius: 50%;
  background: var(--acc);
}
.ld {
  position: fixed;
  inset: 0;
  background: transparent;
}
.ld .ldbg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.ld .ldglow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle calc(1200*var(--u)) at 50% 50%,
      rgba(228, 221, 210, 0) 40%,
      rgba(228, 221, 210, .55) 100%),
    radial-gradient(
      circle calc(576*var(--u)) at 50% 50%,
      rgba(228, 221, 210, .92) 0%,
      rgba(228, 221, 210, .55) 55%,
      rgba(228, 221, 210, 0) 100%);
}
.ld .ld-mid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(40*var(--u));
}
.ld .word {
  font-size: calc(112*var(--u));
}
.ld .bars {
  position: relative;
  width: calc(300*var(--u));
  height: calc(13*var(--u));
  background: rgba(43, 45, 47, .14);
  overflow: hidden;
  clip-path: polygon(0% 100%, 0.966% 0%, 31.648% 0%, 30.682% 100%, 34.091% 100%, 35.057% 0%, 65.739% 0%, 64.773% 100%, 68.182% 100%, 69.148% 0%, 99.83% 0%, 98.864% 100%);
}
.ld .bars i {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: 0 50%;
  transform: scaleX(0);
  will-change: transform;
}
#boot {
  z-index: 60;
  transition: opacity .8s ease;
}
#boot.gone {
  opacity: 0;
  pointer-events: none;
}
#bootFill {
  animation: btFill 3s cubic-bezier(.3, .62, .34, 1) .15s forwards, btCreep 40s 3.15s linear forwards;
}
@keyframes btFill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(.9);
  }
}
@keyframes btCreep {
  from {
    transform: scaleX(.9);
  }
  to {
    transform: scaleX(.985);
  }
}
#loader {
  z-index: 59;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .32s ease;
}
#loader.on {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
#loader.off {
  visibility: visible;
  transition-duration: .48s;
}
#loader.rest {
  visibility: hidden;
}
html.booting #menu {
  opacity: 0;
}
#menu {
  transition: opacity .9s ease .1s;
}
@media (prefers-reduced-motion: reduce) {
  #bootFill {
    animation-duration: .01s, 40s;
  }
  #menu {
    transition: none;
  }
}
#menu {
  position: absolute;
  inset: 0;
}
[hidden] {
  display: none !important;
}
.bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(84*var(--u));
  background: var(--ink);
  display: grid;
  grid-template-columns: calc(370*var(--u)) calc(650*var(--u)) 1fr;
  column-gap: calc(48*var(--u));
  align-items: center;
  padding: 0 calc(56*var(--u));
  box-sizing: border-box;
  color: var(--ivory);
}
.bc {
  display: flex;
  align-items: center;
  min-width: 0;
}
.bc2 {
  gap: calc(26*var(--u));
}
.bc2 .ib + .ib {
  margin-left: calc(-12*var(--u));
}
.bc3 {
  justify-content: flex-end;
  gap: calc(12*var(--u));
}
.bc > * {
  flex: none;
}
.bc > .grow {
  flex: 1;
}
.bar .word {
  flex-direction: row;
  align-items: baseline;
  gap: .22em;
  font-size: calc(34*var(--u));
  line-height: 1;
  color: var(--ivory);
  margin-right: calc(18*var(--u));
}
.bar .word .dot {
  margin-left: .04em;
}
.nav {
  display: inline-flex;
  align-items: center;
  gap: calc(8*var(--u));
  padding: calc(8*var(--u)) 0;
  border: 0;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  font: italic 600 calc(19*var(--u))/1 var(--serif);
  color: rgba(235, 229, 216, .82);
}
.nav:hover {
  color: var(--ivory);
}
.nav.tut {
  color: var(--ivory);
}
.nav.tut::after {
  content: "";
  width: calc(8*var(--u));
  height: calc(8*var(--u));
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 calc(10*var(--u)) var(--acc);
}
.nav.tut.glow::after {
  animation: tutGlow 2.6s ease-in-out infinite;
}
@keyframes tutGlow {
  0%, 100% {
    box-shadow: 0 0 calc(4*var(--u)) rgba(217, 112, 63, .55);
  }
  50% {
    box-shadow: 0 0 calc(16*var(--u)) rgba(217, 112, 63, .95), 0 0 0 calc(3*var(--u)) rgba(217, 112, 63, .30);
  }
}
.nav:not(.glow).tut::after {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav.tut.glow::after {
    animation: none;
  }
}
.pip {
  display: inline-block;
  width: calc(7*var(--u));
  height: calc(7*var(--u));
  border-radius: 50%;
  background: var(--acc);
}
.cnt {
  font: 700 calc(11*var(--u))/1 var(--sans);
  font-style: normal;
  background: var(--acc);
  color: var(--ink);
  border-radius: 999px;
  padding: calc(3*var(--u)) calc(7*var(--u));
}
.grow {
  flex: 1;
}
.lab .live {
  display: inline-flex;
  align-items: center;
  gap: calc(7*var(--u));
  white-space: nowrap;
}
.lab .live b {
  color: var(--ink);
  font-weight: 700;
}
.lab .live::after {
  content: "";
  width: calc(7*var(--u));
  height: calc(7*var(--u));
  border-radius: 50%;
  background: var(--acc);
}
.ib {
  flex: none;
  width: calc(42*var(--u));
  height: calc(42*var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: calc(4*var(--u));
  background: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 calc(1.5*var(--u)) rgba(235, 229, 216, .28);
  color: var(--ivory);
  text-decoration: none;
}
.ib:hover {
  background: rgba(235, 229, 216, .10);
}
.ib svg {
  width: calc(20*var(--u));
  height: calc(20*var(--u));
  display: block;
}
.ib .off {
  display: none;
}
.ib.muted .on {
  display: none;
}
.ib.muted .off {
  display: inline;
}
.ib .fsout {
  display: none;
}
.ib.full .fsin {
  display: none;
}
.ib.full .fsout {
  display: inline;
}
.prof {
  height: calc(42*var(--u));
  display: inline-flex;
  align-items: center;
  gap: calc(10*var(--u));
  padding: 0 calc(16*var(--u));
  border: 0;
  border-radius: calc(4*var(--u));
  cursor: pointer;
  white-space: nowrap;
  background: rgba(235, 229, 216, .10);
  box-shadow: inset 0 0 0 calc(1.5*var(--u)) rgba(235, 229, 216, .28);
  font: italic 700 calc(18*var(--u))/1 var(--serif);
  color: var(--ivory);
}
.prof:hover {
  background: rgba(235, 229, 216, .16);
}
.prof .lock {
  display: none;
  width: calc(15*var(--u));
  height: calc(15*var(--u));
  color: rgba(235, 229, 216, .65);
}
.prof.locked .lock {
  display: block;
}
.sign {
  height: calc(42*var(--u));
  padding: 0 calc(16*var(--u));
  border: 0;
  border-radius: calc(4*var(--u));
  cursor: pointer;
  white-space: nowrap;
  background: var(--ivory);
  color: var(--ink);
  font: italic 700 calc(17*var(--u))/1 var(--serif);
}
.sign:hover {
  background: #fff8ea;
}
.sign:active {
  background: var(--press);
}
.sign.quiet {
  background: none;
  box-shadow: inset 0 0 0 calc(1.5*var(--u)) rgba(235, 229, 216, .28);
  color: var(--ivory);
}
.sign.quiet:hover {
  background: rgba(235, 229, 216, .10);
}
.under {
  position: absolute;
  left: calc(56*var(--u));
  right: calc(56*var(--u));
  top: calc(132*var(--u));
  bottom: calc(48*var(--u));
  display: grid;
  grid-template-columns: calc(370*var(--u)) calc(650*var(--u)) 1fr;
  column-gap: calc(48*var(--u));
}
.col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.lab {
  flex: none;
  display: flex;
  justify-content: space-between;
  margin: 0 0 calc(12*var(--u));
  font: 700 calc(12*var(--u))/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.sp {
  flex: none;
  height: calc(32*var(--u));
}
.rows {
  display: flex;
  flex-direction: column;
  gap: calc(12*var(--u));
}
.rows.fill {
  flex: 1;
  min-height: 0;
}
.rows.fill > .row {
  flex: 1;
  height: auto;
}
.grp {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.grp + .grp {
  margin-top: calc(32*var(--u));
}
.grp .row b {
  font-size: calc(30*var(--u));
}
.grp .row .dia {
  width: calc(44*var(--u));
  height: calc(44*var(--u));
}
.grp .row .dia i {
  font-size: calc(19*var(--u));
}
.row {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(12*var(--u));
  width: 100%;
  height: calc(66*var(--u));
  padding: 0 calc(22*var(--u));
  box-sizing: border-box;
  border: calc(1.5*var(--u)) solid var(--ink);
  border-radius: calc(4*var(--u));
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.row:hover {
  background: var(--hover);
}
.row:active {
  background: var(--press);
}
.row b {
  font: italic 700 calc(26*var(--u))/1 var(--serif);
  white-space: nowrap;
}
.row.hero {
  height: calc(112*var(--u));
}
.row.hero b {
  font-size: calc(34*var(--u));
}
.row.soon {
  border-style: dashed;
  border-color: var(--dash);
  background: transparent;
  cursor: default;
}
.row.soon:hover,
.row.soon:active {
  background: transparent;
}
.row.soon b {
  color: var(--mute);
}
.row .ch {
  margin-left: auto;
  font: 400 calc(30*var(--u))/1 var(--sans);
  color: var(--mute);
}
.tagp {
  flex: none;
  font: 700 calc(11*var(--u))/1 var(--sans);
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: calc(5*var(--u)) calc(9*var(--u));
  border-radius: 999px;
  background: var(--ink);
  color: var(--ivory);
  white-space: nowrap;
}
.row.soon .tagp {
  background: var(--mute);
}
.dia {
  flex: none;
  margin-left: auto;
  margin-right: calc(6*var(--u));
  width: calc(36*var(--u));
  height: calc(36*var(--u));
  box-sizing: border-box;
  border: calc(1.5*var(--u)) solid var(--ink);
  border-radius: calc(2*var(--u));
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dia i {
  display: block;
  transform: rotate(-45deg);
  font: italic 700 calc(16*var(--u))/1 var(--serif);
  font-style: italic;
}
.soon .dia {
  border-style: dashed;
  border-color: var(--dash);
}
.soon .dia i {
  color: var(--mute);
}
.rate {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: calc(8*var(--u));
  white-space: nowrap;
  font: 700 calc(11.5*var(--u))/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}
.rate i {
  font: italic 700 calc(22*var(--u))/1 var(--serif);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.rate .prov {
  font: italic 700 calc(16*var(--u))/1 var(--serif);
  color: var(--mute);
  margin-left: calc(-5*var(--u));
  letter-spacing: 0;
}
.row.t2 .tt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(10*var(--u));
  min-width: 0;
}
.row.t2 b {
  font-size: calc(30*var(--u));
}
.row.t2 .sub {
  display: flex;
  align-items: center;
  gap: calc(10*var(--u));
  white-space: nowrap;
  font: 400 calc(15*var(--u))/1 var(--sans);
  color: var(--mute);
}
.row.t2 .sub:empty {
  display: none;
}
.row.t2 .dia {
  width: calc(44*var(--u));
  height: calc(44*var(--u));
}
.row.t2 .dia i {
  font-size: calc(19*var(--u));
}
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(12*var(--u));
}
.pair > .row {
  width: auto;
}
.pair .car {
  margin-right: calc(8*var(--u));
}
.pair .car .lvl {
  min-width: calc(62*var(--u));
}
.pair .car .arr {
  width: calc(30*var(--u));
}
.row.carousel {
  padding: 0;
  cursor: default;
}
.row.carousel:hover,
.row.carousel:active {
  background: var(--card);
}
.row.carousel .rowbtn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 calc(22*var(--u));
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.row.carousel .rowbtn:hover {
  background: var(--hover);
}
.row.carousel .rowbtn:active {
  background: var(--press);
}
.car {
  position: relative;
  z-index: 1;
  margin-left: auto;
  margin-right: calc(12*var(--u));
  display: inline-flex;
  align-items: center;
}
.car .lvl {
  min-width: calc(64*var(--u));
  text-align: center;
  font: 700 calc(11.5*var(--u))/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  pointer-events: none;
}
.car .arr {
  width: calc(36*var(--u));
  height: calc(36*var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: calc(4*var(--u));
  background: transparent;
  cursor: pointer;
  color: var(--mute);
}
.car .arr svg {
  width: calc(7*var(--u));
  height: calc(9*var(--u));
  display: block;
}
.car .arr:hover {
  background: rgba(43, 45, 47, .08);
  color: var(--ink);
}
.car .arr:disabled {
  opacity: .28;
  cursor: default;
  background: transparent;
}
.daily {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(14*var(--u));
  padding: calc(30*var(--u));
  box-sizing: border-box;
  border: calc(1.5*var(--u)) solid var(--ink);
  border-radius: calc(6*var(--u));
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.daily:hover {
  background: var(--hover);
}
.daily:active {
  background: var(--press);
}
.ddate {
  font: 700 calc(12*var(--u))/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.dk {
  font: italic 700 calc(40*var(--u))/1.02 var(--serif);
  white-space: nowrap;
}
.dname {
  font: italic 500 calc(22*var(--u))/1.1 var(--serif);
  color: var(--mute);
}
.bwrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dboard {
  display: block;
  width: calc(306*var(--u));
  height: calc(306*var(--u));
}
.dstat {
  display: flex;
  align-items: center;
  gap: calc(16*var(--u));
  white-space: nowrap;
  font: 400 calc(15*var(--u))/1 var(--sans);
  color: var(--mute);
}
.dstat b {
  font: italic 700 calc(18*var(--u))/1 var(--serif);
  color: var(--ink);
}
.tries {
  display: inline-flex;
  gap: calc(9*var(--u));
  align-items: center;
}
.tries i {
  display: block;
  width: calc(11*var(--u));
  height: calc(11*var(--u));
  transform: rotate(45deg);
  box-sizing: border-box;
  border: calc(1.6*var(--u)) solid var(--ink);
  border-radius: calc(1.5*var(--u));
  opacity: .3;
}
.tries i.lost {
  background: var(--ink);
  opacity: 1;
}
.tries i.won {
  background: var(--acc);
  border-color: var(--acc);
  opacity: 1;
}
.stamp {
  position: absolute;
  right: calc(-12*var(--u));
  top: calc(-12*var(--u));
  padding: calc(7*var(--u)) calc(11*var(--u));
  border-radius: calc(4*var(--u));
  background: var(--acc);
  color: var(--ivory);
  font: 700 calc(12*var(--u))/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(4deg);
}
.recent {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rrow {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(9*var(--u));
  height: calc(46*var(--u));
  padding: 0 calc(8*var(--u));
  box-sizing: border-box;
  border: 0;
  border-radius: calc(4*var(--u));
  background: transparent;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  font: 400 calc(15*var(--u))/1 var(--sans);
  color: var(--mute);
}
.rrow:hover {
  background: rgba(43, 45, 47, .05);
}
.rrow:active {
  background: rgba(43, 45, 47, .09);
}
.rrow .nm {
  font: italic 700 calc(18*var(--u))/1 var(--serif);
  color: var(--ink);
}
.rrow .rt {
  font: 400 calc(13*var(--u))/1 var(--sans);
  color: var(--mute);
}
.rrow .go {
  margin-left: auto;
  font: 400 calc(26*var(--u))/1 var(--sans);
  color: var(--mute);
}
.recent .empty {
  height: calc(46*var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(8*var(--u));
  font: 400 calc(15*var(--u))/1 var(--sans);
  color: var(--mute);
}
.lnk {
  padding: calc(6*var(--u)) calc(14*var(--u));
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: calc(4*var(--u));
  text-decoration-thickness: calc(1.2*var(--u));
  font: 400 calc(15*var(--u))/1 var(--sans);
  color: var(--mute);
}
.lnk:hover {
  color: var(--ink);
}
#game {
  position: absolute;
  inset: 0;
}
#board {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: default;
}
.res {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  background: var(--page);
  animation: resIn .15s linear;
}
@keyframes resIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.e8 {
  --e:calc(1.15*var(--u));
  width: calc(368*var(--e));
  height: 100%;
  box-sizing: border-box;
  padding: calc(40*var(--e)) 0 calc(24*var(--e));
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.e8 > * {
  flex: none;
}
.e8 .lbl {
  margin: 0;
  text-align: center;
  font: 700 calc(11*var(--e))/calc(14*var(--e)) var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.e8 h2 {
  margin: calc(6*var(--e)) 0 0;
  text-align: center;
  white-space: nowrap;
  font: italic 700 calc(46*var(--e))/calc(52*var(--e)) var(--serif);
  color: var(--ink);
}
.e8 h2 .dotc {
  color: var(--acc);
}
.e8-climb {
  margin-top: calc(16*var(--e));
  display: flex;
  justify-content: center;
  align-items: center;
}
.e8-dia {
  position: relative;
  width: calc(64*var(--e));
  height: calc(64*var(--e));
  display: flex;
  align-items: center;
  justify-content: center;
}
.e8-dia::before {
  content: "";
  position: absolute;
  inset: calc(9*var(--e));
  box-sizing: border-box;
  border: calc(2*var(--e)) solid var(--ink);
  transform: rotate(45deg);
  background: var(--page);
}
.e8-dia.new::before {
  background: var(--ink);
}
.e8-dia b {
  position: relative;
  font: italic 700 calc(18*var(--e))/1 var(--serif);
  color: var(--ink);
}
.e8-dia.new b {
  color: var(--ivory);
}
.e8-arrow {
  position: relative;
  width: calc(104*var(--e));
  height: calc(54*var(--e));
}
.e8-arrow::before {
  content: "";
  position: absolute;
  left: calc(8*var(--e));
  right: calc(12*var(--e));
  top: calc(26*var(--e));
  height: calc(2*var(--e));
  background: var(--ink);
  transform-origin: 0 50%;
}
.e8-arrow::after {
  content: "";
  position: absolute;
  right: calc(8*var(--e));
  top: calc(21*var(--e));
  border-left: calc(10*var(--e)) solid var(--ink);
  border-top: calc(6*var(--e)) solid transparent;
  border-bottom: calc(6*var(--e)) solid transparent;
}
.e8-arrow i {
  position: absolute;
  top: calc(14*var(--e));
  left: 50%;
  transform: translateX(-50%);
  padding: calc(3*var(--e)) calc(9*var(--e));
  border-radius: 999px;
  background: var(--acc);
  color: var(--ivory);
  font: italic 700 calc(15*var(--e))/calc(20*var(--e)) var(--serif);
  white-space: nowrap;
  opacity: 0;
}
.e8-arrow i.down {
  background: var(--ink);
}
.e8-arrow i.in {
  opacity: 1;
  animation: rsPill .24s ease-out;
}
@keyframes rsPill {
  0% {
    transform: translateX(-50%) scale(.6);
  }
  60% {
    transform: translateX(-50%) scale(1.15);
  }
  100% {
    transform: translateX(-50%);
  }
}
.e8-army {
  margin-top: calc(18*var(--e));
}
.e8.noclimb .e8-army {
  margin-top: calc(26*var(--e));
}
.e8-strip {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}
.e8-gap {
  height: calc(10*var(--e));
}
.e8-strip i {
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: var(--sq-lt);
}
.e8-strip i.dk {
  background: var(--sq-dk);
}
.e8-strip img {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  display: block;
}
.e8-strip i.dead img {
  opacity: .28;
}
.e8-strip svg {
  position: absolute;
  inset: 18%;
  width: 64%;
  height: 64%;
  opacity: 0;
  transition: opacity .14s;
}
.e8-army.xs svg {
  opacity: 1;
}
.e8-strip svg path {
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
}
.e8-rows {
  margin-top: calc(10*var(--e));
}
.e8-rows .r {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: calc(11*var(--e)) 0;
  border-top: 1px solid var(--rule);
  font: 400 calc(15*var(--e))/calc(20*var(--e)) var(--sans);
  color: var(--mute);
}
.e8-rows .r:last-child {
  border-bottom: 1px solid var(--rule);
}
.e8-rows .r b {
  font: italic 700 calc(17*var(--e))/calc(20*var(--e)) var(--serif);
  color: var(--ink);
}
.e8-grow {
  flex: 1;
  min-height: calc(12*var(--e));
}
.e8-btns {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.e8-main {
  min-height: calc(54*var(--e));
  margin-top: calc(12*var(--e));
  padding: calc(12*var(--e)) calc(16*var(--e));
  border: 0;
  border-radius: calc(4*var(--e));
  background: var(--ink);
  color: var(--ivory);
  cursor: pointer;
  font: 700 calc(16*var(--e))/calc(20*var(--e)) var(--sans);
}
.e8-main:active {
  background: #202224;
}
.e8-home {
  min-height: calc(44*var(--e));
  margin-top: calc(14*var(--e));
  padding: calc(8*var(--e)) calc(16*var(--e));
  border: 0;
  background: none;
  cursor: pointer;
  font: 400 calc(16*var(--e))/calc(22*var(--e)) var(--sans);
  color: var(--ink);
}
.e8 .rv {
  opacity: 0;
  transform: translateY(calc(6*var(--e)));
}
.e8 .rv.in {
  opacity: 1;
  transform: none;
  transition: opacity .16s ease-out, transform .16s ease-out;
}
.e8 h2.in {
  animation: rsPop .22s ease-out;
}
@keyframes rsPop {
  from {
    transform: scale(1.12);
  }
  to {
    transform: none;
  }
}
.e8-arrow.rv.in::before {
  animation: rsGrow .22s ease-out;
}
@keyframes rsGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.e8 .e8-btns {
  pointer-events: none;
}
.e8.done .e8-btns {
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .res {
    animation: none;
  }
  .e8 .rv {
    opacity: 1;
    transform: none;
  }
  .e8 h2.in,
  .e8-arrow.rv.in::before,
  .e8-arrow i.in {
    animation: none;
  }
}
.gover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(228, 221, 210, .80);
}
.gcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16*var(--u));
  min-width: calc(440*var(--u));
  padding: calc(38*var(--u)) calc(50*var(--u)) calc(26*var(--u));
  box-sizing: border-box;
  background: var(--card);
  border: calc(1.5*var(--u)) solid var(--ink);
  border-radius: calc(6*var(--u));
}
.gcard h2 {
  margin: 0 0 calc(4*var(--u));
  font: italic 700 calc(66*var(--u))/1 var(--serif);
  color: var(--ink);
}
.gcard h2 .dotc {
  color: var(--acc);
}
.gcard p {
  margin: 0;
  font: 400 calc(18*var(--u))/1.3 var(--sans);
  color: var(--mute);
}
.gcard p:empty {
  display: none;
}
.big {
  width: 100%;
  height: calc(58*var(--u));
  border: 0;
  border-radius: calc(4*var(--u));
  background: var(--ink);
  color: var(--ivory);
  font: italic 700 calc(22*var(--u))/1 var(--serif);
  cursor: pointer;
}
.big:hover {
  background: #3a3d40;
}
.big:active {
  background: #1f2123;
}
:root {
  --spot-promo:#a3812f;
  --spot-surv:#4e7a74;
}
#menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(84*var(--u));
  bottom: 0;
  pointer-events: none;
  opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .18 0 0 0 0 .18 .55 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/240px 240px;
}
.under > .col:last-child .grp,
.under > .col:last-child .rows.fill {
  flex: none;
}
.under > .col:last-child .rows.fill > .row {
  flex: none;
  height: calc(112*var(--u));
}
#mEvo {
  --spot:var(--spot-promo);
}
#mSurv {
  --spot:var(--spot-surv);
}
#mEvo,
#mSurv {
  overflow: hidden;
}
#mEvo::before,
#mSurv::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(
      circle,
      var(--spot) 0 calc(1.05*var(--u)),
      transparent calc(1.3*var(--u))) 0 0/calc(7*var(--u)) calc(7*var(--u));
  opacity: .42;
  -webkit-mask-image:
    linear-gradient(
      to left,
      #000 0,
      rgba(0, 0, 0, .55) 22%,
      transparent 58%);
  mask-image:
    linear-gradient(
      to left,
      #000 0,
      rgba(0, 0, 0, .55) 22%,
      transparent 58%);
}
#mEvo > *,
#mSurv > * {
  position: relative;
}
#mEvo .tagp,
#mSurv .tagp {
  background: var(--spot);
  color: var(--ivory);
}
#mEvo .dia,
#mSurv .dia {
  border-color: var(--spot);
  background: var(--card);
}
#mEvo .dia i,
#mSurv .dia i {
  color: var(--spot);
}
.dnote {
  flex: none;
  margin: calc(32*var(--u)) 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: calc(7*var(--u));
  padding: 0 calc(2*var(--u));
}
.dnote .dl {
  font: italic 700 calc(22*var(--u))/1.1 var(--serif);
  color: var(--ink);
}
.dnote a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: calc(1.6*var(--u));
  text-underline-offset: calc(4*var(--u));
  text-decoration-color: var(--acc);
}
.dnote a:hover {
  color: var(--acc);
}
.dnote .ds {
  font: 400 calc(15*var(--u))/1.35 var(--sans);
  color: var(--mute);
}
#freePg {
  z-index: 6;
}
.fp .fph {
  margin: 0;
  text-align: left;
  font: 300 calc(29*var(--e))/calc(35*var(--e)) var(--serif);
  color: var(--ink);
}
.fp .fpd {
  margin: calc(4*var(--e)) 0 0;
  font: 400 calc(15*var(--e))/calc(21*var(--e)) var(--sans);
  color: var(--mute);
}
.fp-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(28*var(--e)) 0 calc(20*var(--e));
}
.fp-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14*var(--e));
}
.fp-big {
  position: relative;
  flex: none;
  width: calc(128*var(--e));
  height: calc(128*var(--e));
}
.fp-big::before {
  content: "";
  position: absolute;
  inset: calc(19*var(--e));
  box-sizing: border-box;
  border: calc(2.4*var(--e)) solid var(--ink);
  transform: rotate(45deg);
  background: var(--page);
}
.fp-big b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: italic 700 calc(40*var(--e))/1 var(--serif);
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.fp-step {
  position: relative;
  flex: none;
  width: calc(48*var(--e));
  height: calc(48*var(--e));
  padding: 0;
  border: 0;
  border-radius: calc(4*var(--e));
  background: transparent;
  cursor: pointer;
}
.fp-step:hover {
  background: rgba(43, 45, 47, .06);
}
.fp-step::before,
.fp-step::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(18*var(--e));
  height: calc(2*var(--e));
  margin: calc(-1*var(--e)) 0 0 calc(-9*var(--e));
  border-radius: 1px;
  background: var(--ink);
}
.fp-step::after {
  display: none;
}
.fp-step.up::after {
  display: block;
  transform: rotate(90deg);
}
.fp-slide {
  margin-top: calc(40*var(--e));
}
#fpRange {
  --p:100%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: calc(44*var(--e));
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
#fpRange::-webkit-slider-runnable-track {
  height: calc(2*var(--e));
  border-radius: 1px;
  background:
    linear-gradient(
      to right,
      var(--ink) 0 var(--p),
      var(--rule) var(--p) 100%);
}
#fpRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: calc(26*var(--e));
  height: calc(26*var(--e));
  margin-top: calc(-12*var(--e));
  border: 0;
  background: var(--ink);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
#fpRange::-moz-range-track {
  height: calc(2*var(--e));
  border: 0;
  background: var(--rule);
}
#fpRange::-moz-range-progress {
  height: calc(2*var(--e));
  background: var(--ink);
}
#fpRange::-moz-range-thumb {
  width: calc(26*var(--e));
  height: calc(26*var(--e));
  border: 0;
  border-radius: 0;
  background: var(--ink);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.fp-ends {
  display: flex;
  justify-content: space-between;
  margin-top: calc(4*var(--e));
}
.fp-ends span {
  display: flex;
  flex-direction: column;
  gap: calc(3*var(--e));
  font: 700 calc(10.5*var(--e))/calc(14*var(--e)) var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
.fp-ends span:last-child {
  align-items: flex-end;
}
.fp-ends i {
  font: italic 700 calc(17*var(--e))/calc(20*var(--e)) var(--serif);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.fp-none {
  margin: calc(28*var(--e)) 0 0;
  font: 400 calc(15*var(--e))/calc(21*var(--e)) var(--sans);
  color: var(--mute);
  text-align: center;
}
.fp .e8-home {
  align-self: center;
}
.tipbox {
  flex: none;
  display: block;
  width: 100%;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tipbox .tk {
  display: flex;
  align-items: center;
  gap: calc(14*var(--u));
  font: 700 calc(12*var(--u))/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.tipbox .tk::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.tipbox .tq {
  display: block;
  margin-top: calc(12*var(--u));
  min-height: calc(2*1.3*20*var(--u));
  font: italic 500 calc(20*var(--u))/1.3 var(--serif);
  color: var(--ink);
  transition: opacity .16s ease;
}
.tipbox .nobr {
  white-space: nowrap;
}
.tipbox .tq.out {
  opacity: 0;
}
.tipbox .tq.slow {
  transition: opacity .8s ease;
}
.tipbox .nx {
  display: inline-block;
  width: calc(9*var(--u));
  height: calc(12*var(--u));
  margin-left: calc(3*var(--u));
  fill: var(--acc);
  transition: transform .15s;
}
.tipbox:hover .nx,
.tipbox:focus-visible .nx {
  transform: translateX(calc(2*var(--u)));
}
.tipbox:focus {
  outline: none;
}
.tipbox:focus-visible {
  outline: calc(2*var(--u)) solid var(--ink);
  outline-offset: calc(6*var(--u));
  border-radius: calc(2*var(--u));
}
@media (prefers-reduced-motion: reduce) {
  .tipbox .tq,
  .tipbox .nx {
    transition: none;
  }
}
.dres {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
}
.dres .dr {
  position: absolute;
  left: calc(72*var(--u));
  right: calc(72*var(--u));
  top: calc(60*var(--u));
  bottom: calc(56*var(--u));
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.dres .cap {
  font: 700 calc(12*var(--u))/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}
.dres .crown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14*var(--u));
}
.dres .head {
  margin: 0;
  font: italic 700 calc(96*var(--u))/.95 var(--serif);
  white-space: nowrap;
  color: var(--ink);
}
.dres .head .dotc {
  display: inline-block;
  color: var(--acc);
}
.dres .how {
  font: 400 calc(16*var(--u))/1.3 var(--sans);
  color: var(--mute);
  white-space: nowrap;
}
.dres .face {
  display: grid;
  grid-template-columns: 1fr calc(380*var(--u)) 1fr;
  align-items: center;
  margin: auto 0;
}
.dres .side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(14*var(--u));
}
.dres .side.r {
  align-items: flex-end;
  text-align: right;
}
.dres .nm {
  font: italic 700 calc(44*var(--u))/1 var(--serif);
  white-space: nowrap;
  color: var(--ink);
}
.dres .rline {
  display: flex;
  align-items: center;
  gap: calc(10*var(--u));
  min-height: calc(26*var(--u));
}
.dres .rt {
  font: italic 700 calc(26*var(--u))/1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}
.dres .rt .prov {
  font-style: italic;
  color: var(--mute);
}
.dres .chg {
  display: inline-block;
  padding: calc(4*var(--u)) calc(9*var(--u));
  border-radius: 999px;
  font: 700 calc(13*var(--u))/1 var(--sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--acc);
  color: var(--ivory);
}
.dres .chg.down {
  background: var(--ink);
}
.dres .pcs {
  --sq:calc(54*var(--u));
  margin-top: calc(16*var(--u));
  display: grid;
  grid-template-columns: repeat(8, var(--sq));
}
.dres .pcs i {
  position: relative;
  display: block;
  width: var(--sq);
  height: var(--sq);
  background: var(--sq-lt);
}
.dres .pcs i.dk {
  background: var(--sq-dk);
}
.dres .pcs img {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  display: block;
}
.dres .pcs i.dead img {
  opacity: .28;
}
.dres .pcs svg {
  position: absolute;
  inset: 18%;
  width: 64%;
  height: 64%;
}
.dres .pcs svg path {
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 8;
}
.dres .tape {
  display: flex;
  flex-direction: column;
  padding-top: calc(4*var(--u));
}
.dres .tr {
  position: relative;
  display: grid;
  grid-template-columns: 1fr calc(150*var(--u)) 1fr;
  align-items: center;
  height: calc(52*var(--u));
}
.dres .tr b {
  font: italic 700 calc(30*var(--u))/1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.dres .tr b:first-child {
  text-align: right;
}
.dres .tr .cap {
  text-align: center;
}
.dres .foot {
  display: flex;
  justify-content: center;
}
.dres .btns {
  display: flex;
  align-items: center;
  gap: calc(12*var(--u));
}
.dres .bmain,
.dres .bsec {
  height: calc(58*var(--u));
  padding: 0 calc(26*var(--u));
  border-radius: calc(4*var(--u));
  font: italic 700 calc(22*var(--u))/1 var(--serif);
  cursor: pointer;
  white-space: nowrap;
}
.dres .bmain {
  border: 0;
  background: var(--ink);
  color: var(--ivory);
}
.dres .bmain:hover {
  background: #202224;
}
.dres .bsec {
  border: calc(1.5*var(--u)) solid var(--ink);
  background: var(--card);
  color: var(--ink);
}
.dres .bsec:hover {
  background: var(--hover);
}
.dres .blink {
  display: inline-flex;
  align-items: center;
  gap: calc(8*var(--u));
  height: calc(58*var(--u));
  padding: 0 calc(10*var(--u));
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 calc(17*var(--u))/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
}
.dres .blink kbd {
  font: 700 calc(10*var(--u))/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}
.dres .blink:hover {
  text-decoration: underline;
  text-underline-offset: calc(4*var(--u));
}
.dres button:focus {
  outline: none;
}
.dres button:focus-visible {
  outline: calc(2*var(--u)) solid var(--ink);
  outline-offset: calc(4*var(--u));
}
.dres .ent {
  animation: drUp .32s cubic-bezier(.2, .8, .2, 1) var(--d,0ms) both;
}
.dres .lbl {
  animation: drSpace .44s cubic-bezier(.2, .8, .2, 1) var(--d,0ms) both;
}
.dres .wm {
  display: inline-block;
  overflow: hidden;
  padding: 0 .12em .16em;
  margin: 0 -.12em -.16em;
  vertical-align: bottom;
}
.dres .wm .w {
  display: inline-block;
  animation: drRise .58s cubic-bezier(.16, 1, .3, 1) var(--d,0ms) both;
}
.dres .head .dotc {
  animation: drPop .34s cubic-bezier(.3, 1.6, .5, 1) var(--dd,0ms) both;
}
.dres .side.l {
  animation: drInL .54s cubic-bezier(.2, .9, .25, 1) var(--d,0ms) both;
}
.dres .side.r {
  animation: drInR .54s cubic-bezier(.2, .9, .25, 1) var(--d,0ms) both;
}
.dres .pcs i {
  animation: drSq .26s cubic-bezier(.2, .9, .3, 1.25) var(--d,0ms) both;
}
.dres .pcs i.dead img {
  animation: drDim .28s ease var(--dx,0ms) both;
}
.dres .pcs i.dead svg path {
  animation: drX .28s ease-out var(--dx,0ms) both;
}
.dres .tr .cap,
.dres .tr b {
  animation: drFade .3s ease var(--d,0ms) both;
}
.dres .chg {
  animation: drPop .3s cubic-bezier(.3, 1.6, .5, 1) var(--d,0ms) both;
}
.dres .btns > * {
  animation: drUp .34s cubic-bezier(.2, .8, .2, 1) var(--d,0ms) both;
}
.dres.done *:not(.late),
.dres.done *::before,
.dres.done *::after {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .dres *,
  .dres *::before,
  .dres *::after {
    animation: none !important;
  }
}
@keyframes drUp {
  from {
    opacity: 0;
    transform: translateY(calc(10*var(--u)));
  }
}
@keyframes drFade {
  from {
    opacity: 0;
  }
}
@keyframes drSpace {
  from {
    opacity: 0;
    letter-spacing: .6em;
  }
}
@keyframes drRise {
  from {
    transform: translateY(112%);
  }
}
@keyframes drPop {
  0% {
    transform: scale(0);
  }
  62% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes drInL {
  from {
    opacity: 0;
    transform: translateX(calc(-64*var(--u)));
  }
}
@keyframes drInR {
  from {
    opacity: 0;
    transform: translateX(calc(64*var(--u)));
  }
}
@keyframes drSq {
  from {
    opacity: 0;
    transform: scale(.5);
  }
}
@keyframes drDim {
  from {
    opacity: 1;
  }
}
@keyframes drX {
  from {
    stroke-dashoffset: 8;
  }
}
.dres .pcs[data-cols] {
  grid-template-columns: repeat(var(--cols), var(--sq));
}
.dres .pcs.one {
  --sq:calc(108*var(--u));
}
.dres .pcs i.up img {
  opacity: .28;
}
.dres .pcs .rung {
  position: absolute;
  left: 50%;
  bottom: calc(-18*var(--u));
  width: calc(10*var(--u));
  height: calc(10*var(--u));
  margin-left: calc(-5*var(--u));
  animation: drPop .3s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d,0ms) + 240ms) both;
}
.dres .pcs .rung::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(1.5*var(--u));
  background: var(--acc);
  transform: rotate(45deg);
}
.dres .rk {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(34*var(--u));
  height: calc(34*var(--u));
  margin: 0 calc(10*var(--u)) 0 calc(7*var(--u));
  box-sizing: border-box;
  border: calc(1.5*var(--u)) solid var(--ink);
  border-radius: calc(2*var(--u));
  transform: rotate(45deg);
}
.dres .rk i {
  display: block;
  transform: rotate(-45deg);
  font: italic 700 calc(17*var(--u))/1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.dres .chg.ms {
  background: none;
  box-shadow: inset 0 0 0 calc(1.5*var(--u)) var(--acc);
  color: var(--acc);
}
.dres .crown .chg {
  padding: calc(6*var(--u)) calc(13*var(--u));
  font-size: calc(14*var(--u));
  letter-spacing: .04em;
}
.dres .rline .tries {
  gap: calc(11*var(--u));
}
.dres .rline .tries i {
  width: calc(14*var(--u));
  height: calc(14*var(--u));
  animation: drDia .3s cubic-bezier(.3, 1.6, .5, 1) var(--d,0ms) both;
}
.dres .stk {
  display: inline-flex;
  align-items: baseline;
  gap: calc(8*var(--u));
  margin-left: calc(16*var(--u));
}
.dres .stk b {
  font: italic 700 calc(26*var(--u))/1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.dres .frm {
  font: 400 calc(16*var(--u))/1 var(--sans);
  color: var(--mute);
  white-space: nowrap;
}
.dres .tr.one {
  grid-template-columns: 1fr 1fr;
}
.dres .tr.one .cap {
  text-align: right;
  padding-right: calc(16*var(--u));
}
.dres .tr.one b {
  text-align: left;
  padding-left: calc(16*var(--u));
}
.dres .head .num {
  font-variant-numeric: lining-nums tabular-nums;
}
@keyframes drDia {
  0% {
    transform: rotate(45deg) scale(0);
  }
  62% {
    transform: rotate(45deg) scale(1.3);
  }
  100% {
    transform: rotate(45deg) scale(1);
  }
}
.gcard .gnet {
  margin: calc(6*var(--u)) 0 calc(18*var(--u));
  max-width: calc(520*var(--u));
  font: 400 calc(17*var(--u))/1.4 var(--sans);
  color: var(--mute);
  text-align: center;
}
#onlinePg {
  z-index: 6;
}
.ol .ol-mid {
  align-items: center;
  gap: calc(16*var(--e));
}
.ol-code {
  min-height: calc(86*var(--e));
  font: italic 700 calc(78*var(--e))/1 var(--serif);
  letter-spacing: .06em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.ol-st {
  margin: 0;
  min-height: calc(21*var(--e));
  font: 400 calc(15*var(--e))/calc(21*var(--e)) var(--sans);
  color: var(--mute);
  text-align: center;
}
.ol .e8-main {
  min-width: calc(240*var(--e));
}
.ol-join {
  display: flex;
  align-items: center;
  gap: calc(10*var(--e));
  margin-top: calc(22*var(--e));
}
.ol-cap {
  font: 700 calc(11*var(--e))/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
#olIn {
  width: calc(110*var(--e));
  height: calc(44*var(--e));
  box-sizing: border-box;
  padding: 0 calc(10*var(--e));
  border: 0;
  border-bottom: calc(2*var(--e)) solid var(--ink);
  background: transparent;
  font: italic 700 calc(26*var(--e))/1 var(--serif);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  outline: none;
}
#olIn:focus {
  border-bottom-color: var(--acc);
}
.ol-go {
  height: calc(44*var(--e));
  padding: 0 calc(18*var(--e));
  border: calc(1.5*var(--e)) solid var(--ink);
  border-radius: calc(4*var(--e));
  background: var(--card);
  font: italic 700 calc(18*var(--e))/1 var(--serif);
  color: var(--ink);
  cursor: pointer;
}
.ol-go:hover {
  background: var(--hover);
}
.ol.search .ol-tiles,
.ol.search .ol-join,
.ol.invite .ol-tiles,
.ol.invite .ol-join {
  display: none;
}
.ol:not(.search) .ol-clock {
  display: none;
}
.ol-clock {
  font: italic 700 calc(78*var(--e))/1 var(--serif);
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.ol-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(12*var(--e));
  width: 100%;
}
.ol-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(7*var(--e));
  min-height: calc(150*var(--e));
  padding: calc(14*var(--e)) calc(10*var(--e));
  border: calc(1.5*var(--e)) solid var(--ink);
  border-radius: calc(6*var(--e));
  background: var(--card);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.ol-tile:hover:not(:disabled) {
  background: var(--hover);
}
.ol-tile:disabled {
  cursor: default;
  opacity: .55;
}
.ol-tile:focus-visible {
  outline: calc(2*var(--e)) solid var(--acc);
  outline-offset: calc(2*var(--e));
}
.ol-tile svg {
  width: calc(42*var(--e));
  height: calc(42*var(--e));
  fill: currentColor;
}
.ol-tile b {
  font: italic 700 calc(21*var(--e))/1.1 var(--serif);
}
.ol-tile span {
  font: 400 calc(13*var(--e))/1.3 var(--sans);
  color: var(--mute);
}
.ol-tile .ol-code {
  min-height: calc(42*var(--e));
  font: italic 700 calc(40*var(--e))/1.05 var(--serif);
  letter-spacing: .06em;
  color: var(--ink);
}
.dres .chg.even {
  background: var(--mute);
}
#phone {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: var(--page);
  color: var(--ink);
  text-align: center;
}
html.phone #phone {
  display: flex;
}
html.phone #boot,
html.phone #loader,
html.phone #stage {
  display: none !important;
}
html.phone,
html.phone body {
  height: auto;
  min-height: 100%;
  overflow: auto;
  background: var(--page);
}
html.phone::before {
  display: none;
}
#phone .ph-mid {
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
#phone .word {
  font-size: 58px;
  margin-bottom: 12px;
  text-align: left;
}
#phone .ph-t {
  margin: 0;
  font: italic 700 24px/1.25 var(--serif);
  text-wrap: balance;
}
#phone .ph-copy {
  margin-top: 12px;
  height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 4px;
  background: var(--ink);
  color: var(--ivory);
  font: italic 700 20px/1 var(--serif);
  cursor: pointer;
}
#phone .ph-copy:active {
  background: #202224;
}
#phone .ph-tip {
  min-height: 16px;
  font: 700 12px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acc);
}
#phone .ph-dc {
  margin-top: 6px;
  font: italic 700 18px/1.2 var(--serif);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--acc);
  text-decoration-thickness: 1.6px;
  text-underline-offset: 4px;
}
.e8-strip.d8-board {
  width: min(100%, calc(312*var(--e)));
  margin: 0 auto;
}
.e8-strip[hidden],
.e8-gap[hidden] {
  display: none;
}
.rpbar {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: calc(12*var(--u));
  z-index: 3;
  transition: opacity .35s ease;
}
.rpbar.idle {
  opacity: 0;
}
.rpbar.idle * {
  pointer-events: none;
}
.rp-row {
  display: flex;
  align-items: center;
  gap: calc(10*var(--u));
}
.rp-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(46*var(--u));
  height: calc(40*var(--u));
  padding: 0;
  border: 0;
  border-radius: calc(4*var(--u));
  background: var(--ink);
  cursor: pointer;
}
.rp-ico:hover {
  background: #3a3d40;
}
.rp-ico svg {
  width: calc(15*var(--u));
  height: calc(15*var(--u));
  fill: var(--ivory);
}
.rp-ico .gp,
.rp-ico.paused .gs {
  display: none;
}
.rp-ico.paused .gp {
  display: block;
}
.rp-tl {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(2*var(--u));
}
.rp-step,
.rp-arr {
  flex: none;
  position: relative;
  width: calc(22*var(--u));
  height: calc(32*var(--u));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.rp-step::before,
.rp-arr::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: calc(-6*var(--u)) 0 0 calc(-4*var(--u));
  border-style: solid;
  border-width: calc(6*var(--u)) calc(8*var(--u)) calc(6*var(--u)) 0;
  border-color: transparent var(--ink) transparent transparent;
}
.rp-step.r::before,
.rp-arr.r::before {
  border-width: calc(6*var(--u)) 0 calc(6*var(--u)) calc(8*var(--u));
  border-color: transparent transparent transparent var(--ink);
}
.rp-step:hover::before,
.rp-arr:hover::before {
  opacity: .65;
}
.rp-arr.off {
  opacity: .25;
  pointer-events: none;
}
.rp-track {
  position: relative;
  flex: 1;
  min-width: 0;
  height: calc(32*var(--u));
  --tag:calc(68*var(--u));
}
.rp-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: calc(2*var(--u));
  margin-top: calc(-1*var(--u));
  background: var(--rule);
}
.rp-track::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: calc(2*var(--u));
  margin-top: calc(-1*var(--u));
  width: calc((100% - var(--tag)) * var(--vn,0) + var(--tag) / 2);
  background: var(--ink);
}
.rp-track b {
  position: absolute;
  z-index: 1;
  top: calc(5*var(--u));
  bottom: calc(5*var(--u));
  left: calc((100% - var(--tag)) * var(--vn,0));
  width: var(--tag);
  display: grid;
  place-items: center;
  border-radius: calc(3*var(--u));
  background: var(--ink);
  color: var(--ivory);
  font: 700 calc(12*var(--u))/1 var(--sans);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.rp-track input {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.rp-track input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--tag);
  height: calc(32*var(--u));
}
.rp-track input::-moz-range-thumb {
  width: var(--tag);
  height: calc(32*var(--u));
  border: 0;
  border-radius: 0;
  background: transparent;
}
.rp-len {
  flex: none;
  min-width: calc(60*var(--u));
  font: 600 calc(13*var(--u))/1 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--mute);
  text-align: right;
}
.rp-car {
  display: flex;
  align-items: center;
}
.rp-car b {
  min-width: calc(36*var(--u));
  text-align: center;
  font: italic 700 calc(18*var(--u))/1 var(--serif);
  color: var(--ink);
}
.rp-b {
  height: calc(40*var(--u));
  padding: 0 calc(16*var(--u));
  border: calc(1.5*var(--u)) solid var(--ink);
  border-radius: calc(4*var(--u));
  background: var(--card);
  font: italic 700 calc(17*var(--u))/1 var(--serif);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.rp-b:hover {
  background: var(--hover);
}
.rp-b[hidden] {
  display: none;
}
.rp-note {
  font: 400 calc(13*var(--u))/1.3 var(--sans);
  color: var(--acc);
}
.rp-note:empty {
  display: none;
}
#loginPg {
  z-index: 6;
}
.lg .lg-mid {
  align-items: center;
  gap: calc(14*var(--e));
}
.lg .lg-b {
  min-width: calc(300*var(--e));
}
.lg-dev {
  border: 0;
  background: none;
  font: 400 calc(14*var(--e))/1 var(--sans);
  color: var(--mute);
  text-decoration: underline;
  cursor: pointer;
}
.wpg {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
}
.wp {
  position: absolute;
  left: calc(96*var(--u));
  right: calc(96*var(--u));
  top: calc(56*var(--u));
  bottom: calc(48*var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(18*var(--u));
}
.wp .cap {
  font: 700 calc(12*var(--u))/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.wp-head {
  display: flex;
  flex-direction: column;
  gap: calc(8*var(--u));
}
.wp-h {
  margin: 0;
  font: italic 700 calc(56*var(--u))/1 var(--serif);
  color: var(--ink);
  white-space: nowrap;
}
.wp-sub {
  font: 400 calc(16*var(--u))/1.3 var(--sans);
  color: var(--mute);
}
.pf-stats {
  display: flex;
  gap: calc(44*var(--u));
  padding: calc(16*var(--u)) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pf-stats div {
  display: flex;
  flex-direction: column;
  gap: calc(8*var(--u));
}
.pf-stats b {
  font: italic 700 calc(34*var(--u))/1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.pf-stats b i {
  font-style: italic;
  color: var(--mute);
}
.pf-cap {
  margin-top: calc(6*var(--u));
}
.wp-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(43, 45, 47, .32) transparent;
}
.wp-list.scrolls {
  padding-right: calc(18*var(--u));
}
.wr {
  display: grid;
  grid-template-columns: calc(110*var(--u)) calc(170*var(--u)) 1fr calc(110*var(--u)) calc(90*var(--u)) calc(90*var(--u));
  align-items: center;
  min-height: calc(48*var(--u));
  border-bottom: 1px solid var(--rule);
  font: 400 calc(16*var(--u))/1.2 var(--sans);
  color: var(--ink);
}
.wr .d {
  color: var(--mute);
}
.wr .k {
  font: 700 calc(11*var(--u))/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
.wr .o b {
  font: italic 700 calc(22*var(--u))/1 var(--serif);
}
.wr .o span {
  margin-left: calc(8*var(--u));
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.wr .rs {
  font: italic 700 calc(20*var(--u))/1 var(--serif);
}
.wr .rs.win {
  color: var(--acc);
}
.wr .chg {
  justify-self: start;
  padding: calc(4*var(--u)) calc(9*var(--u));
  border-radius: 999px;
  font: 700 calc(13*var(--u))/1 var(--sans);
  background: var(--acc);
  color: var(--ivory);
}
.wr .chg.down {
  background: var(--ink);
}
.wr .chg.even {
  background: var(--mute);
}
.wr .w {
  justify-self: end;
  border: 0;
  background: none;
  font: 400 calc(16*var(--u))/1 var(--sans);
  color: var(--ink);
  cursor: pointer;
}
.wr .w:hover {
  text-decoration: underline;
  text-underline-offset: calc(4*var(--u));
}
.wr .w:disabled {
  color: var(--mute);
  cursor: default;
  text-decoration: none;
}
.wp-empty {
  padding: calc(24*var(--u)) 0;
  font: 400 calc(16*var(--u))/1.4 var(--sans);
  color: var(--mute);
}
.bd-list .wr {
  grid-template-columns: calc(80*var(--u)) 1fr calc(140*var(--u)) calc(120*var(--u));
}
.bd-list .wr.me {
  background: var(--card);
}
.bd-list .wr .n {
  font: italic 700 calc(24*var(--u))/1 var(--serif);
}
.bd-list .wr .rk {
  font: italic 700 calc(22*var(--u))/1 var(--serif);
  color: var(--mute);
}
.bd-list .wr.h {
  min-height: calc(30*var(--u));
}
.bd-list .wr.h span {
  font: 700 calc(11*var(--u))/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
.wp-foot {
  display: flex;
  align-items: center;
  gap: calc(18*var(--u));
}
.wp-more {
  height: calc(44*var(--u));
  padding: 0 calc(18*var(--u));
  border: calc(1.5*var(--u)) solid var(--ink);
  border-radius: calc(4*var(--u));
  background: var(--card);
  font: italic 700 calc(18*var(--u))/1 var(--serif);
  color: var(--ink);
  cursor: pointer;
}
.wp-back {
  display: inline-flex;
  align-items: center;
  gap: calc(8*var(--u));
  border: 0;
  background: none;
  font: 400 calc(17*var(--u))/1 var(--sans);
  color: var(--ink);
  cursor: pointer;
}
.wp-back kbd {
  font: 700 calc(10*var(--u))/1 var(--sans);
  letter-spacing: .1em;
  color: var(--mute);
}
#namePg {
  z-index: 7;
}
#nmIn {
  width: 100%;
  height: calc(56*var(--e));
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-bottom: calc(2*var(--e)) solid var(--ink);
  background: transparent;
  font: italic 700 calc(30*var(--e))/1 var(--serif);
  color: var(--ink);
  text-align: center;
  outline: none;
}
#nmIn:focus {
  border-bottom-color: var(--acc);
}
.e8-sub {
  margin: calc(6*var(--e)) 0 0;
  text-align: center;
  font: 400 calc(15*var(--e))/calc(20*var(--e)) var(--sans);
  color: var(--mute);
}
.e8 h2.wrap {
  white-space: normal;
  text-wrap: balance;
}
#mSurvBest {
  margin-left: auto;
  margin-right: calc(6*var(--u));
}
#mEvo .stamp {
  position: relative;
  right: auto;
  top: auto;
  margin-left: auto;
  margin-right: calc(6*var(--u));
}
.fr-add {
  display: flex;
  align-items: center;
  gap: calc(12*var(--u));
}
#frName {
  width: calc(300*var(--u));
  height: calc(44*var(--u));
  box-sizing: border-box;
  padding: 0 calc(6*var(--u));
  border: 0;
  border-bottom: calc(2*var(--u)) solid var(--ink);
  background: transparent;
  font: italic 700 calc(24*var(--u))/1 var(--serif);
  color: var(--ink);
  outline: none;
}
#frName::placeholder {
  color: var(--mute);
  font-weight: 400;
}
#frName:focus {
  border-bottom-color: var(--acc);
}
.fr-msg {
  font: 400 calc(15*var(--u))/1.3 var(--sans);
  color: var(--mute);
}
.fr-msg.ok {
  color: var(--ink);
}
.fr-msg.bad {
  color: #b4462f;
}
.fr-sec {
  display: flex;
  align-items: center;
  gap: calc(8*var(--u));
  margin-top: calc(14*var(--u));
  padding: calc(6*var(--u)) 0;
  border: 0;
  background: none;
  font: 700 calc(12*var(--u))/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
  cursor: pointer;
  text-align: left;
}
.fr-sec::before {
  content: "";
  width: 0;
  height: 0;
  border-left: calc(5*var(--u)) solid transparent;
  border-right: calc(5*var(--u)) solid transparent;
  border-top: calc(6*var(--u)) solid var(--mute);
  transition: transform .15s;
}
.fr-sec.shut::before {
  transform: rotate(-90deg);
}
.fr-list .wr {
  grid-template-columns: 1fr calc(240*var(--u)) calc(240*var(--u));
}
.fr-who {
  display: flex;
  align-items: center;
  gap: calc(12*var(--u));
  min-width: 0;
}
.fr-who b {
  font: italic 700 calc(24*var(--u))/1 var(--serif);
  white-space: nowrap;
  color: var(--ink);
}
.frdot {
  flex: none;
  width: calc(9*var(--u));
  height: calc(9*var(--u));
  border-radius: 50%;
  box-sizing: border-box;
  border: calc(1.5*var(--u)) solid var(--rule);
}
.frdot.on {
  border: 0;
  background: var(--acc);
}
.frdot.game {
  border: 0;
  background: var(--ink);
}
.fr-st {
  color: var(--mute);
}
.wr.off .fr-who b {
  color: var(--mute);
}
.fr-act {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: calc(10*var(--u));
}
.fr-b {
  height: calc(36*var(--u));
  padding: 0 calc(14*var(--u));
  border: calc(1.5*var(--u)) solid var(--ink);
  border-radius: calc(4*var(--u));
  background: var(--card);
  font: italic 700 calc(16*var(--u))/1 var(--serif);
  color: var(--ink);
  cursor: pointer;
}
.fr-b:hover {
  background: var(--hover);
}
.fr-b.warn {
  background: var(--ink);
  color: var(--ivory);
}
.fr-ic {
  width: calc(36*var(--u));
  height: calc(36*var(--u));
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: calc(1.5*var(--u)) solid var(--ink);
  border-radius: calc(4*var(--u));
  background: var(--card);
  cursor: pointer;
}
.fr-ic:hover {
  background: var(--hover);
}
.fr-ic svg {
  width: calc(16*var(--u));
  height: calc(16*var(--u));
}
.fr-ic path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fr-lnk {
  border: 0;
  background: none;
  padding: 0;
  font: 400 calc(15*var(--u))/1 var(--sans);
  color: var(--ink);
  cursor: pointer;
}
.fr-lnk:hover {
  text-decoration: underline;
  text-underline-offset: calc(4*var(--u));
}
.wr.rm {
  background: var(--card);
}
.fr-hint {
  font: 400 calc(13*var(--u))/1 var(--sans);
  color: var(--mute);
}
.nav .lock {
  display: none;
  width: calc(13*var(--u));
  height: calc(13*var(--u));
  color: rgba(235, 229, 216, .65);
}
.nav.locked .lock {
  display: block;
}
.fr-cards {
  position: absolute;
  left: calc(800*var(--u));
  top: calc(96*var(--u));
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: calc(10*var(--u));
  pointer-events: none;
}
.fr-card {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  width: calc(360*var(--u));
  box-sizing: border-box;
  padding: calc(16*var(--u)) calc(20*var(--u)) calc(18*var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(6*var(--u));
  background: var(--ink);
  color: var(--ivory);
  border-radius: calc(6*var(--u));
  box-shadow: 0 calc(14*var(--u)) calc(36*var(--u)) rgba(0, 0, 0, .32);
  animation: frIn .22s ease-out both;
}
@keyframes frIn {
  from {
    opacity: 0;
    transform: translateY(calc(-6*var(--u)));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fr-card .cap {
  font: 700 calc(11*var(--u))/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(235, 229, 216, .6);
}
.fr-cn {
  font: italic 700 calc(28*var(--u))/1.1 var(--serif);
  white-space: nowrap;
  color: var(--ivory);
}
.fr-cs {
  font: 400 calc(15*var(--u))/1.3 var(--sans);
  color: rgba(235, 229, 216, .72);
}
.fr-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(3*var(--u));
  background: rgba(235, 229, 216, .14);
}
.fr-rail i {
  display: block;
  height: 100%;
  background: var(--acc);
  transform-origin: left center;
  transition: transform .25s linear;
}
.fr-cb {
  display: flex;
  align-items: center;
  gap: calc(18*var(--u));
  margin-top: calc(8*var(--u));
}
.fr-acc {
  height: calc(42*var(--u));
  padding: 0 calc(20*var(--u));
  border: 0;
  border-radius: calc(4*var(--u));
  background: var(--ivory);
  color: var(--ink);
  font: italic 700 calc(18*var(--u))/1 var(--serif);
  cursor: pointer;
}
.fr-acc:hover {
  background: #fff8ea;
}
.fr-acc:active {
  background: var(--press);
}
.fr-acc:disabled {
  opacity: .6;
  cursor: default;
}
.fr-card .fr-lnk {
  color: var(--ivory);
}
.fr-left {
  margin-left: auto;
  font: 600 calc(14*var(--u))/1 var(--sans);
  font-variant-numeric: tabular-nums;
  color: rgba(235, 229, 216, .6);
}
@media (prefers-reduced-motion: reduce) {
  .fr-card {
    animation: none;
  }
  .fr-rail i {
    transition: none;
  }
}
.nw-list {
  gap: 0;
}
.nw {
  display: flex;
  flex-direction: column;
  gap: calc(10*var(--u));
  padding: calc(20*var(--u)) 0 calc(22*var(--u));
  border-top: 1px solid var(--rule);
}
.nw:last-child {
  border-bottom: 1px solid var(--rule);
}
.nw-h {
  display: flex;
  align-items: baseline;
  gap: calc(16*var(--u));
}
.nw-h b {
  font: italic 700 calc(30*var(--u))/1 var(--serif);
  color: var(--ink);
}
.nw-h span {
  font: 700 calc(12*var(--u))/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.nw ul {
  margin: 0;
  padding: 0 0 0 calc(20*var(--u));
  max-width: calc(760*var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(6*var(--u));
}
.nw li {
  font: 400 calc(18*var(--u))/1.45 var(--sans);
  color: var(--ink);
}
.mfoot {
  position: absolute;
  left: calc(56*var(--u));
  right: calc(56*var(--u));
  bottom: calc(14*var(--u));
  display: flex;
  align-items: center;
  gap: calc(22*var(--u));
  font: 400 calc(13*var(--u))/1 var(--sans);
  color: var(--mute);
}
.mfoot .fl {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.mfoot .fl:hover,
.mfoot .fl:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: calc(3*var(--u));
}
.mfoot .rt {
  margin-left: auto;
}
.lg-pp {
  font: 400 calc(13*var(--e))/1 var(--sans);
  color: var(--mute);
}
.lg-pp:hover {
  color: var(--ink);
}
.sign.upd {
  position: absolute;
  left: 50%;
  top: calc(100% + 10*var(--u));
  transform: translateX(-50%);
  z-index: 3;
  background: var(--acc);
  color: var(--ivory);
  box-shadow: 0 calc(8*var(--u)) calc(22*var(--u)) rgba(0, 0, 0, .22);
}
.sign.upd:hover {
  background: #e07d4c;
}
.res.pop {
  align-items: center;
  background: rgba(26, 27, 29, .55);
  animation: popFade .16s linear;
}
.res.pop > .e8 {
  width: calc(432*var(--e));
  height: auto;
  max-height: calc(100% - 48*var(--u));
  padding: calc(30*var(--e)) calc(32*var(--e)) calc(16*var(--e));
  background: var(--page);
  border-radius: calc(6*var(--u));
  box-shadow: 0 calc(18*var(--u)) calc(48*var(--u)) rgba(0, 0, 0, .35);
  animation: popIn .18s ease-out;
}
.res.pop .fph {
  text-align: center;
}
.res.pop .fp-mid {
  flex: none;
  padding: calc(24*var(--e)) 0 calc(8*var(--e));
}
.res.pop .e8-home {
  margin-top: calc(6*var(--e));
}
@keyframes popFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(calc(8*var(--u))) scale(.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .res.pop,
  .res.pop > .e8 {
    animation: none;
  }
}
.hw-list {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hw-list li {
  padding: calc(18*var(--u)) 0;
  border-top: 1px solid var(--rule);
  font: 400 calc(22*var(--u))/1.3 var(--sans);
  color: var(--ink);
}
.hw-list li:last-child {
  border-bottom: 1px solid var(--rule);
}
.wpg.pop {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 27, 29, .55);
  animation: popFade .16s linear;
}
.wpg.pop[hidden] {
  display: none;
}
.wpg.pop > .wp {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: calc(900*var(--u));
  max-height: calc(100% - 80*var(--u));
  box-sizing: border-box;
  padding: calc(34*var(--u)) calc(44*var(--u)) calc(22*var(--u));
  background: var(--page);
  border-radius: calc(6*var(--u));
  box-shadow: 0 calc(18*var(--u)) calc(48*var(--u)) rgba(0, 0, 0, .35);
  animation: popIn .18s ease-out;
}
.wpg.pop .wp-h {
  font-size: calc(44*var(--u));
}
.wpg.pop .wp-list {
  flex: 0 1 auto;
}
@media (prefers-reduced-motion: reduce) {
  .wpg.pop,
  .wpg.pop > .wp {
    animation: none;
  }
}
.gover.rj {
  z-index: 9;
}
.gover.rj .gnet {
  font-variant-numeric: tabular-nums;
}
.ol:not(.newer) #olRefresh {
  display: none;
}
.ol.newer .ol-tiles,
.ol.newer .ol-join,
.ol.newer .ol-clock {
  display: none;
}
.wpg.pop .bd-list {
  flex: none;
  height: calc(31*var(--u) + 11*49*var(--u) + 14*var(--u));
  overflow: hidden;
}
.bd-list .bd-load {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 calc(18*var(--u))/1 var(--sans);
  color: var(--mute);
}
.bd-list .wr.out {
  margin-top: calc(14*var(--u));
  border-top: 1px solid var(--rule);
}
.dres .dr.one {
  justify-content: center;
  gap: calc(48*var(--u));
}
.dres .dr.one .face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(30*var(--u));
  margin: 0;
}
.dres .dr.one .tape {
  width: calc(380*var(--u));
}
.dres .fur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4*var(--u));
}
.dres .fur .pcs {
  margin-top: calc(8*var(--u));
}
.dres .dr.pz {
  justify-content: center;
  gap: calc(48*var(--u));
}
.dres .dr.pz .face {
  margin: 0;
  column-gap: calc(48*var(--u));
  grid-template-columns: 1fr calc(380*var(--u)) 1fr;
}
.dres .dr.pz .side.l {
  align-items: flex-end;
}
.dres .dr.pz .side.r {
  align-items: flex-start;
}
.dres .dr.pz .side .pcs {
  margin-top: 0;
}
.dres .crown .pzr {
  display: flex;
  align-items: center;
  gap: calc(10*var(--u));
  margin-top: calc(4*var(--u));
}
.wpg.pop > .wp.st {
  width: calc(620*var(--u));
}
.st-list {
  display: flex;
  flex-direction: column;
}
.st-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24*var(--u));
  min-height: calc(52*var(--u));
  border-bottom: 1px solid var(--rule);
}
.st-row.gap {
  margin-top: calc(22*var(--u));
}
.st-l {
  font: 400 calc(17*var(--u))/1.2 var(--sans);
  color: var(--ink);
  cursor: pointer;
}
span.st-l {
  cursor: default;
}
.st-vol {
  display: flex;
  align-items: center;
  gap: calc(14*var(--u));
}
.st-vol b {
  min-width: calc(34*var(--u));
  text-align: right;
  font: 700 calc(15*var(--u))/1 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.st-vol input {
  -webkit-appearance: none;
  appearance: none;
  width: calc(240*var(--u));
  height: calc(24*var(--u));
  margin: 0;
  background: none;
  cursor: pointer;
  --v:100%;
}
.st-vol input::-webkit-slider-runnable-track {
  height: calc(4*var(--u));
  border-radius: 999px;
  background:
    linear-gradient(
      to right,
      var(--ink) var(--v),
      var(--rule) var(--v));
}
.st-vol input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: calc(18*var(--u));
  height: calc(18*var(--u));
  margin-top: calc(-7*var(--u));
  border: 0;
  border-radius: 50%;
  background: var(--ink);
}
.st-vol input::-moz-range-track {
  height: calc(4*var(--u));
  border-radius: 999px;
  background: var(--rule);
}
.st-vol input::-moz-range-progress {
  height: calc(4*var(--u));
  border-radius: 999px;
  background: var(--ink);
}
.st-vol input::-moz-range-thumb {
  width: calc(18*var(--u));
  height: calc(18*var(--u));
  border: 0;
  border-radius: 50%;
  background: var(--ink);
}
.st-sw {
  position: relative;
  flex: none;
  width: calc(48*var(--u));
  height: calc(26*var(--u));
  padding: 0;
  border: calc(1.5*var(--u)) solid var(--ink);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background-color .14s;
}
.st-sw i {
  position: absolute;
  top: calc(3*var(--u));
  left: calc(3*var(--u));
  width: calc(17*var(--u));
  height: calc(17*var(--u));
  border-radius: 50%;
  background: var(--ink);
  transition: transform .14s, background-color .14s;
}
.st-sw[aria-checked=true] {
  background: var(--ink);
}
.st-sw[aria-checked=true] i {
  background: var(--ivory);
  transform: translateX(calc(22*var(--u)));
}
.st-seg {
  display: flex;
  flex: none;
  border: calc(1.5*var(--u)) solid var(--ink);
  border-radius: calc(4*var(--u));
  overflow: hidden;
}
.st-seg button {
  height: calc(34*var(--u));
  padding: 0 calc(14*var(--u));
  border: 0;
  background: none;
  font: 400 calc(15*var(--u))/1 var(--sans);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.st-seg button + button {
  border-left: calc(1.5*var(--u)) solid var(--ink);
}
.st-seg button[aria-checked=true] {
  background: var(--ink);
  color: var(--ivory);
}
.st-seg button:not([aria-checked=true]):hover {
  background: var(--hover);
}
.wp-more:disabled {
  opacity: .4;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .st-sw,
  .st-sw i {
    transition: none;
  }
}
#pfList .wr {
  grid-template-columns: calc(110*var(--u)) calc(170*var(--u)) 1fr calc(110*var(--u)) calc(90*var(--u)) calc(150*var(--u));
}
.gover.gwait {
  z-index: 8;
  background: rgba(228, 221, 210, .45);
  pointer-events: none;
}
.gwait .gcard {
  gap: calc(12*var(--u));
  padding: calc(30*var(--u)) calc(44*var(--u));
}
.gwait .gcard h2 {
  margin: 0;
  font-size: calc(44*var(--u));
}
.gwait .cap {
  font: 700 calc(12*var(--u))/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.gw-spin {
  width: calc(34*var(--u));
  height: calc(34*var(--u));
  box-sizing: border-box;
  border-radius: 50%;
  border: calc(2.5*var(--u)) solid var(--rule);
  border-top-color: var(--acc);
  animation: gwSpin .9s linear infinite;
}
@keyframes gwSpin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gw-spin {
    animation-duration: 2.4s;
  }
}
.cpop {
  position: absolute;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: calc(10*var(--u));
  min-width: calc(320*var(--u));
  max-width: calc(520*var(--u));
  padding: calc(14*var(--u)) calc(16*var(--u)) calc(16*var(--u));
  box-sizing: border-box;
  background: var(--card);
  border: calc(1.5*var(--u)) solid var(--ink);
  border-radius: calc(6*var(--u));
  box-shadow: 0 calc(10*var(--u)) calc(28*var(--u)) rgba(26, 27, 29, .18);
  color: var(--ink);
  font-family: var(--sans);
}
.cpop[hidden] {
  display: none;
}
.cpop-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12*var(--u));
}
.cpop .cap {
  font: 700 calc(12*var(--u))/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.cpop-x {
  border: 0;
  background: none;
  padding: 0 calc(2*var(--u));
  font: 400 calc(22*var(--u))/1 var(--sans);
  color: var(--ink);
  cursor: pointer;
}
.cpop-t {
  font: 400 calc(15*var(--u))/1.35 var(--sans);
  color: var(--ink);
  word-break: break-all;
  user-select: all;
}
.cpop-t.pre {
  white-space: pre-line;
  word-break: normal;
}
.cpop-b {
  align-self: flex-start;
  height: calc(40*var(--u));
  padding: 0 calc(16*var(--u));
  border: calc(1.5*var(--u)) solid var(--ink);
  border-radius: calc(4*var(--u));
  background: var(--card);
  font: italic 700 calc(17*var(--u))/1 var(--serif);
  color: var(--ink);
  cursor: pointer;
}
.cpop-b:hover {
  background: var(--hover);
}
.dres .foot {
  flex-direction: column;
  align-items: center;
  gap: calc(6*var(--u));
}
.dres .dlinks {
  display: flex;
  align-items: center;
  gap: calc(14*var(--u));
}
.dres .dlinks[hidden] {
  display: none;
}
.dres .dlk {
  height: calc(36*var(--u));
  padding: 0 calc(6*var(--u));
  border: 0;
  background: none;
  font: 400 calc(16*var(--u))/1 var(--sans);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.dres .dlk:hover {
  text-decoration: underline;
  text-underline-offset: calc(4*var(--u));
}
.dres .dsep {
  display: block;
  width: calc(6*var(--u));
  height: calc(6*var(--u));
  border-radius: calc(1*var(--u));
  background: var(--acc);
  transform: rotate(45deg);
}
.gover.rs {
  z-index: 7;
}
.gover.rs .cap {
  font: 700 calc(12*var(--u))/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}
.gover.rs .rs-names {
  display: flex;
  align-items: baseline;
  gap: calc(16*var(--u));
  margin: calc(4*var(--u)) 0 calc(12*var(--u));
  font: italic 700 calc(44*var(--u))/1.05 var(--serif);
  color: var(--ink);
  white-space: nowrap;
}
.gover.rs .rs-names i {
  font: 400 calc(18*var(--u))/1 var(--sans);
  color: var(--mute);
}
.gover.rs .rs-row {
  display: flex;
  gap: calc(14*var(--u));
}
.gover.rs .big {
  width: auto;
  min-width: calc(250*var(--u));
  padding: 0 calc(28*var(--u));
}
.gcard .big.q {
  background: var(--card);
  color: var(--ink);
  box-shadow: inset 0 0 0 calc(1.5*var(--u)) var(--ink);
}
.gcard .big.q:hover {
  background: var(--hover);
}
.rpend {
  position: absolute;
  z-index: 4;
  transform: translateY(-50%);
}
.rpend[hidden] {
  display: none;
}
.rpend .gcard {
  min-width: 0;
  width: 100%;
  gap: calc(12*var(--u));
  padding: calc(26*var(--u)) calc(30*var(--u));
  box-shadow: 0 calc(14*var(--u)) calc(36*var(--u)) rgba(0, 0, 0, .16);
  animation: popIn .18s ease-out;
}
.rpend .gcard h2 {
  margin: 0 0 calc(6*var(--u));
  font-size: calc(46*var(--u));
}
#pfList .wr,
#pfList .wr-h {
  grid-template-columns: calc(110*var(--u)) calc(170*var(--u)) 1fr calc(110*var(--u)) calc(90*var(--u)) calc(190*var(--u));
}
#pfList .wr-h {
  display: grid;
  align-items: end;
  min-height: calc(28*var(--u));
  padding-bottom: calc(6*var(--u));
  border-bottom: 1px solid var(--rule);
}
#pfList .wr-h .rph {
  justify-self: end;
  font: 700 calc(11*var(--u))/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
#pfList .rpc {
  justify-self: end;
  display: flex;
  gap: calc(8*var(--u));
}
#pfList .rpc button {
  height: calc(34*var(--u));
  padding: 0 calc(13*var(--u));
  border: calc(1.5*var(--u)) solid var(--ink);
  border-radius: calc(4*var(--u));
  background: var(--card);
  font: italic 700 calc(16*var(--u))/1 var(--serif);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}
#pfList .rpc button:hover {
  background: var(--hover);
}
#pfList .rpc button:disabled {
  opacity: .35;
  cursor: default;
  background: var(--card);
}
@media (prefers-reduced-motion: reduce) {
  .rpend .gcard {
    animation: none;
  }
  .rpbar {
    transition: none;
  }
}
.dres.leaving .dr {
  opacity: 0;
  transition: opacity .12s linear;
}