@font-face {
  font-family: 'VT323';
  src: url('fonts/VT323.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBMPlexMono-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Press Start 2P';
  src: url('fonts/PressStart2P.ttf') format('truetype');
  font-display: swap;
}

:root {
  --void: #050706;
  --screen: #0B120E;
  --screen-2: #0F1813;
  --screen-3: #132018;

  --phos: #7CFFB2;
  --phos-dim: #6FCB96;
  --phos-low: #4E8E6B;
  --phos-faint: rgba(124, 255, 178, .20);
  --phos-hair: rgba(124, 255, 178, .11);
  --phos-wash: rgba(124, 255, 178, .07);

  --chassis: #D7D1C1;
  --chassis-mid: #B6AF9E;
  --chassis-dark: #7E786A;

  --warn: #FFC46B;
  --ink: #050706;

  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --screenfont: 'VT323', ui-monospace, monospace;
  --pixel: 'Press Start 2P', var(--mono);

  --ease: cubic-bezier(.23, 1, .32, 1);
  --pad: clamp(16px, 4vw, 40px);
}

* { box-sizing: border-box; }

html { overflow-x: clip; }

[hidden] { display: none !important; }

:root {
  --face: #C0C0C0;
  --face-lit: #FFFFFF;
  --face-soft: #DFDFDF;
  --edge: #808080;
  --edge-dark: #3B3B3B;
  --title-a: #000082;
  --title-b: #1084D0;
  --title-off-a: #7F7F7F;
  --title-off-b: #B4B4B4;
  --face-ink: #101010;
  --teal: #0F8080;
  --teal-dot: #0B6666;

  --sans: Tahoma, Verdana, Geneva, 'DejaVu Sans', sans-serif;
  --pad: 14px;
}

body {
  margin: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, var(--teal-dot) 1px, transparent 0) 0 0 / 8px 8px,
    var(--teal);
  color: var(--phos-dim);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--phos); color: var(--ink); }
:focus-visible { outline: 2px solid var(--phos); outline-offset: 2px; }
.taskbar :focus-visible,
.startmenu :focus-visible,
.bar :focus-visible { outline: 1px dotted var(--face-ink); outline-offset: -4px; }

.desk { position: relative; flex: 1; min-height: 0; overflow: hidden; }

.win {
  position: absolute;
  width: var(--w, 380px);
  max-width: calc(100% - 16px);
  max-height: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  background: var(--face);
  border: 2px solid;
  border-color: var(--face-lit) var(--edge-dark) var(--edge-dark) var(--face-lit);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .40);
}
.win.dragging, .win.dragging * { user-select: none; -webkit-user-select: none; }

.bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px;
  padding: 4px 4px 4px 7px;
  background: linear-gradient(90deg, var(--title-off-a), var(--title-off-b));
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  cursor: default;
  touch-action: none;

  user-select: none;
  -webkit-user-select: none;
}
.win.focus .bar { background: linear-gradient(90deg, var(--title-a), var(--title-b)); }
.bar .t {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wbtn {
  flex: none;
  width: 20px;
  height: 17px;
  display: grid;
  place-items: center;
  padding: 0;
  font: 700 10px/1 var(--sans);
  color: var(--face-ink);
  background: var(--face);
  border: 1px solid;
  border-color: var(--face-lit) var(--edge-dark) var(--edge-dark) var(--face-lit);
  cursor: pointer;
}
.wbtn:active { border-color: var(--edge-dark) var(--face-lit) var(--face-lit) var(--edge-dark); }

.wbody {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 3px 3px;
  padding: var(--pad) var(--pad) 20px;
  background: var(--screen);
  border: 2px solid;
  border-color: var(--edge-dark) var(--face-lit) var(--face-lit) var(--edge-dark);
  scrollbar-color: var(--phos-low) var(--screen-2);
  scrollbar-width: thin;

  container-type: inline-size;
  container-name: win;
}

.desk.narrow .win {
  inset: 0;
  width: auto;
  max-width: none;
  max-height: none;
  box-shadow: none;
  border-width: 0;
}
.desk.narrow .bar { margin: 0; padding: 7px 8px; }
.desk.narrow .wbody { margin: 0; border-width: 2px 0 0; }

.desk.narrow .wbtn { display: none; }

.taskbar {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  background: var(--face);
  border-top: 2px solid var(--face-lit);
  font-family: var(--sans);
  font-size: 12px;
  color: var(--face-ink);
}

.taskbar > button,
.tasks button,
.startmenu #acct button,
.win.dialog button {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--face-ink);
  background: var(--face);
  border: 2px solid;
  border-color: var(--face-lit) var(--edge-dark) var(--edge-dark) var(--face-lit);
  cursor: pointer;
}
.start {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 5px;
  font-weight: 700;
}
.start[aria-expanded='true'] { border-color: var(--edge-dark) var(--face-lit) var(--face-lit) var(--edge-dark); }

.flag {
  width: 14px; height: 13px;
  background:
    linear-gradient(#E03A3A 0 0) 0 0 / 6px 6px no-repeat,
    linear-gradient(#3AA83A 0 0) 8px 0 / 6px 6px no-repeat,
    linear-gradient(#2A5FD6 0 0) 0 7px / 6px 6px no-repeat,
    linear-gradient(#E8B23A 0 0) 8px 7px / 6px 6px no-repeat;
}
.tgrip {
  flex: none;
  width: 4px; height: 20px;
  border-left: 1px solid var(--face-lit);
  border-right: 1px solid var(--edge);
  margin: 0 2px;
}
.tasks { flex: 1; min-width: 0; display: flex; gap: 3px; overflow: hidden; }
.tbtn {
  flex: 1 1 0;
  min-width: 0;
  max-width: 168px;
  padding: 3px 8px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tbtn.down {
  font-weight: 700;
  border-color: var(--edge-dark) var(--face-lit) var(--face-lit) var(--edge-dark);
  background: var(--face-soft);
}
.tbtn.idle { color: #5A5A5A; }

.tray {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 3px 8px;
  font-family: var(--mono);
  font-size: 11px;
  border: 1px solid;
  border-color: var(--edge) var(--face-lit) var(--face-lit) var(--edge);
}
.tray div { display: flex; gap: 5px; }
.tray dt { color: #4A4A4A; }
.tray dd { margin: 0; font-weight: 700; }
.tray .clock { color: #4A4A4A; }
@media (max-width: 900px) { .tray .wide, .tray .clock { display: none; } }

@media (max-width: 760px) {
  .taskbar { flex-wrap: wrap; row-gap: 3px; }
  .tasks { order: -1; flex-basis: 100%; }
  .tbtn { max-width: none; text-align: center; padding: 4px 3px; font-size: 11.5px; }

  .tbtn.idle { color: var(--face-ink); }
  .tray { margin-left: auto; }
  .toast { bottom: 78px; }
}
@media (max-width: 560px) { .start span:not(.flag) { display: none; } .start { padding: 3px 6px; } }

.startmenu {
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: 400;
  width: min(320px, calc(100vw - 8px));
  max-height: min(560px, 80vh);
  display: flex;
  background: var(--face);
  border: 2px solid;
  border-color: var(--face-lit) var(--edge-dark) var(--edge-dark) var(--face-lit);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .40);
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--face-ink);
}
.spine {
  flex: none;
  width: 26px;
  background: linear-gradient(#000060, #1084D0);
}
.spine span {
  display: block;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  padding: 8px 0;
  font: 700 12px/1 var(--sans);
  color: #fff;
  letter-spacing: .12em;
}
.sitems { flex: 1; min-width: 0; padding: 4px; overflow-y: auto; }
.sitems hr { border: 0; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--face-lit); margin: 4px 2px; }
.srow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  text-align: left;
  color: var(--face-ink);
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.srow:hover, .srow:focus-visible { background: var(--title-a); color: #fff; }
.srow:hover a, .srow:hover .who { color: inherit; }
#acct { flex-wrap: wrap; gap: 6px; }
#acct:hover { background: none; color: inherit; }
#acct .who { font-weight: 700; }
#acct button {
  padding: 3px 8px;
  font-size: 11.5px;
  cursor: pointer;
}
.smallprint {
  margin: 6px 2px 2px;
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: #4A4A4A;
}

.modalwrap {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, .35);
}
.win.dialog {
  position: static;
  width: min(430px, 100%);
  max-height: none;
}
.win.dialog .bar { background: linear-gradient(90deg, var(--title-a), var(--title-b)); }
.win.dialog .wbody {
  background: var(--face);
  color: var(--face-ink);
  font-family: var(--sans);
  font-size: 13px;
  border-width: 0;
  margin: 0;
  padding: 16px 16px 12px;
  overflow: visible;
}
.dlgrow { display: flex; gap: 14px; align-items: flex-start; }
.dlgrow p { margin: 0 0 9px; line-height: 1.55; }
.dlgrow p:last-child { margin-bottom: 0; }

.dlgicon {
  flex: none;
  width: 34px; height: 30px;
  background:
    linear-gradient(#7CFFB2 0 0) 5px 5px / 24px 15px no-repeat,
    linear-gradient(var(--edge-dark) 0 0) 3px 3px / 28px 19px no-repeat,
    linear-gradient(var(--chassis) 0 0) 0 0 / 34px 24px no-repeat,
    linear-gradient(var(--chassis-mid) 0 0) 10px 25px / 14px 5px no-repeat;
}
.dlgfoot { display: flex; justify-content: flex-end; margin-top: 16px; }
.w95 {
  min-width: 92px;
  padding: 6px 18px;
  font: 700 12.5px var(--sans);
  color: var(--face-ink);
  background: var(--face);
  border: 2px solid;
  border-color: var(--face-lit) var(--edge-dark) var(--edge-dark) var(--face-lit);
  cursor: pointer;
}
.w95:active { border-color: var(--edge-dark) var(--face-lit) var(--face-lit) var(--edge-dark); }

.head {
  padding: 26px 0 16px;
  border-bottom: 1px solid var(--phos-hair);
  margin-bottom: 22px;
}
.head h2 {
  margin: 0;
  font-size: clamp(15px, 2.4vw, 18px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--phos);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.head p {
  margin: 8px 0 0;
  max-width: 62ch;
  color: var(--phos-low);
  font-size: 12.5px;
}

.note { color: var(--phos-low); font-size: 12px; }
.warn { color: var(--warn); }

.note.broke {
  margin-top: 12px;
  padding: 9px 11px;
  border-left: 2px solid var(--warn);
  background: rgba(255, 196, 107, .07);
  color: var(--warn);
  font-size: 12px;
  max-width: 62ch;
}

.col { max-width: 1020px; margin-inline: auto; }

.shoprow {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(240px, 1fr);
  gap: 18px;
  align-items: start;
}
@container win (max-width: 820px) { .shoprow { grid-template-columns: minmax(0, 1fr); } }

.shop { display: grid; gap: 10px; }

.history {
  position: sticky;
  top: 0;
  padding: 14px 16px;
  background: var(--screen-2);
  border: 1px solid var(--phos-hair);
}
.history h3 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--phos-low);
}
.history ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  max-height: 62vh;
  overflow-y: auto;
}
.history li { display: grid; gap: 1px; font-size: 12px; }
.history li + li { border-top: 1px solid rgba(124, 255, 178, .05); padding-top: 7px; }
.history .when {
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--phos-low);
}
.history .got { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
@container win (max-width: 820px) { .history { position: static; } }

.box {
  position: relative;
  padding: 16px;
  background: var(--screen-2);
  border: 1px solid var(--phos-hair);
}
.box h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--phos-dim);
}
.box.lead h3 { font-size: 15px; color: var(--phos); }
.box p { margin: 0 0 12px; color: var(--phos-low); font-size: 12px; max-width: 46ch; }

.rates { margin: 12px 0 4px; padding: 0; }
.rates figcaption {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--phos-low);
  margin-bottom: 6px;
}
.rates .cols { display: flex; align-items: end; gap: 4px; }
.rates .c { flex: 1; text-align: center; min-width: 0; }

.rates .rbar { height: 40px; display: flex; align-items: end; }
.rates .rbar i { display: block; width: 100%; }
.rates .c b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
  color: var(--phos);
}
.rates .c span {
  display: block;
  font-size: 9.5px;
  letter-spacing: .03em;
  color: var(--phos-low);
}
.rates .r1 { background: var(--phos-low); }
.rates .r2 { background: var(--phos-dim); }
.rates .r3 { background: var(--phos); }
.rates .r4 { background: #C8F5DC; }
.rates .r5 { background: var(--chassis); }

.buy { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin-top: 14px; }
.buy > * { margin: 0; }

.buy button.act, .buy select { height: 34px; }
.buy button.act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
label.field select { width: 100%; }

button.act,
select {
  font: inherit;
  font-size: 12.5px;
  padding: 8px 14px;
  background: transparent;
  color: var(--phos);
  border: 1px solid var(--phos-faint);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 140ms var(--ease), color 140ms var(--ease),
              border-color 140ms var(--ease), transform 90ms var(--ease);
}
button.act:hover:not(:disabled) { background: var(--phos); color: var(--ink); border-color: var(--phos); }
button.act:active:not(:disabled) { transform: translateY(1px); }
button.act:disabled { color: var(--phos-low); border-color: var(--phos-hair); cursor: not-allowed; }
button.act.primary { border-color: var(--phos); }
button.act.quiet { color: var(--phos-low); }
button.act.quiet:hover:not(:disabled) { color: var(--ink); }

select { color: var(--phos-dim); }
select:focus { color: var(--phos); border-color: var(--phos-faint); }
label.field { display: grid; gap: 4px; font-size: 10.5px; color: var(--phos-low); letter-spacing: .05em; }

.slotgroup { margin-bottom: 26px; }
.slotgroup > h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--phos-hair);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--phos-low);
}
.slotgroup > h3 b { color: var(--phos-dim); font-weight: 600; }

.part {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 7px 0;
}
.part + .part { border-top: 1px solid rgba(124, 255, 178, .05); }
.part .name { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.part .pts {
  font-family: var(--screenfont);
  font-size: 21px;
  line-height: 1;
  color: var(--phos);
  min-width: 46px;
  text-align: right;
}
@container win (max-width: 430px) {
  .part { grid-template-columns: 1fr auto; }
  .part .name { grid-column: 1 / -1; }
}

.t1 { color: var(--phos-low); }
.t2 { color: var(--phos-dim); }
.t3 { color: var(--phos); }
.t4 { color: #C8F5DC; }
.t5 { color: var(--chassis); }

.cond { display: inline-flex; gap: 2px; align-items: center; }
.cond i { width: 4px; height: 10px; background: var(--phos-hair); }
.cond i.on { background: var(--phos-dim); }
.cond.mint i.on { background: var(--phos); }
.cond-text { font-size: 10.5px; color: var(--phos-low); letter-spacing: .03em; }

.build { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }

@container win (max-width: 820px) {
  .build { display: flex; flex-direction: column; }

  .build > * { width: 100%; }
  .readout { order: -1; }
}

.readout {
  position: sticky;
  top: 0;
  padding: 18px;
  background: var(--screen-3);
  border: 1px solid var(--phos-faint);
}
.readout .total {
  font-family: var(--screenfont);
  font-size: 68px;
  line-height: .9;
  color: var(--phos);
  text-shadow: 0 0 22px rgba(124, 255, 178, .35);
}
.readout .total.idle { color: var(--phos-low); text-shadow: none; }
.readout .unit { font-family: var(--mono); font-size: 12px; color: var(--phos-low); letter-spacing: .08em; }
.readout dl { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 12px; }
.readout dt { color: var(--phos-low); }
.readout dd { margin: 0; color: var(--phos-dim); text-align: right; }
.readout .cls {
  font-family: var(--screenfont);
  font-size: 17px;
  line-height: 1;
  color: var(--chassis);
}

.penalty {
  margin-top: 12px;
  padding: 9px 11px;
  border-left: 2px solid var(--warn);
  background: rgba(255, 196, 107, .07);
  color: var(--warn);
  font-size: 11.5px;
}

.commit { margin-top: 16px; display: grid; gap: 8px; }
.commit .caution { font-size: 11px; color: var(--warn); line-height: 1.5; }

.slots { display: grid; gap: 8px; grid-template-columns: repeat(5, minmax(0, 1fr)); }

@container win (max-width: 1000px) {
  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container win (max-width: 620px) {
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container win (max-width: 330px) {
  .slots { grid-template-columns: minmax(0, 1fr); }
}
.slot {
  padding: 9px 11px;
  background: var(--screen-2);
  border: 1px solid var(--phos-hair);
}

.slot.vacant { border-style: dashed; }

.slot .art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  margin-bottom: 6px;
}

.slot .art.ghost { opacity: .3; }
.slot .art svg { display: block; }

.slot .cat {
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--phos-low);
  margin-bottom: 5px;
}
.slot select {
  width: 100%;

  padding: 5px 20px 5px 6px;
  font-size: 12px;
}
.slot .fitted { margin-top: 5px; display: flex; align-items: center; gap: 7px; }

.shopside { display: flex; flex-direction: column; gap: 18px; }
.pull {
  background: var(--screen-2);
  border: 1px solid var(--phos-hair);
  padding: 14px 16px 16px;
}
.pull h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--phos-low);
}
.pull-art { display: flex; align-items: center; justify-content: center; height: 84px; }
.pull-art svg { display: block; }
.pull-name { margin-top: 10px; font-size: 13px; }
.pull-meta { margin-top: 5px; display: flex; align-items: center; gap: 8px; }

.rigs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.plate { background: var(--screen-2); border: 1px solid var(--phos-hair); padding: 16px; }

.plate-art {
  display: flex;
  justify-content: center;
  margin: -4px 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--phos-hair);
}
.plate-art svg { display: block; width: 100%; height: auto; }
.plate .score {
  font-family: var(--screenfont);
  font-size: 46px;
  line-height: .9;
  color: var(--phos);
}
.plate .cls {
  font-family: var(--screenfont);
  font-size: 20px;
  line-height: 1;
  color: var(--chassis);
  letter-spacing: .06em;
}
.plate .spec { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 11.5px; }
.plate .spec dt { color: var(--phos-low); }
.plate .spec dd { margin: 0; }

.boards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.board { background: var(--screen-2); border: 1px solid var(--phos-hair); padding: 14px 16px; }
.board h3 {
  margin: 0 0 10px;
  font-family: var(--screenfont);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--chassis);
}
.board ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 12.5px; }
.board li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: baseline; }
.board li .rank { color: var(--phos-low); font-size: 11px; }
.board li .val { font-family: var(--screenfont); font-size: 18px; line-height: 1; color: var(--phos-dim); }
.board li.me .val, .board li.me { color: var(--phos); }

.empty {
  padding: 40px 0;
  max-width: 52ch;
}
.empty .big {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--phos-dim);
  margin-bottom: 10px;
}
.empty p { margin: 0 0 14px; color: var(--phos-low); font-size: 12.5px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 14px;

  background: var(--face);
  color: var(--face-ink);
  font-family: var(--sans);
  border: 2px solid;
  border-color: var(--face-lit) var(--edge-dark) var(--edge-dark) var(--face-lit);
  font-size: 12.5px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .40);
}
.toast .cond-text { color: var(--title-a); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: rise 220ms var(--ease); }
  @keyframes rise {
    from { opacity: 0; transform: translate(-50%, 8px); }
  }
}

@media (max-height: 860px) {
  .readout { position: static; }
  .readout .total { font-size: 54px; }
}

.wbody {
  --screen: var(--face);
  --screen-2: #FFFFFF;
  --screen-3: #ECECEC;

  --phos: #0A0A0A;
  --phos-dim: #1E1E1E;
  --phos-low: #5B5B5B;
  --phos-faint: #8C8C8C;
  --phos-hair: #B8B8B8;
  --phos-wash: rgba(0, 0, 0, .05);

  --chassis: #8A3E00;
  --chassis-mid: #A9713C;
  --warn: #8A5A00;
  --ink: #FFFFFF;

  color: var(--phos-dim);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12.5px;
  scrollbar-color: var(--edge) var(--face-soft);
}
.wbody ::selection { background: var(--title-a); color: #fff; }

.wbody .note,
.wbody .cond-text,
.wbody .rates-key,
.wbody .history .when,
.wbody .spec,
.wbody .readout dl { font-family: var(--mono); }

.wbody .head {
  padding: 2px 0 12px;
  border-bottom: 1px solid var(--edge);
  box-shadow: 0 1px 0 var(--face-lit);
  margin-bottom: 18px;
}
.wbody .head h2 { font-family: var(--sans); font-weight: 700; letter-spacing: .10em; }
.wbody .head p { font-size: 12px; }
.wbody h3 { font-family: var(--sans); }

.wbody .box,
.wbody .history,
.wbody .pull,
.wbody .plate,
.wbody .board,
.wbody .slot,
.wbody .readout {
  background: var(--screen-2);
  border: 2px solid;
  border-color: var(--edge) var(--face-lit) var(--face-lit) var(--edge);
}
.wbody .slot.vacant { border-style: solid; background: var(--face-soft); }
.wbody .box.lead { background: #FFFFE8; }
.wbody .part + .part,
.wbody .history li + li { border-top: 1px solid #E4E4E4; }

.wbody button.act {
  background: var(--face);
  color: var(--face-ink);
  border: 2px solid;
  border-color: var(--face-lit) var(--edge-dark) var(--edge-dark) var(--face-lit);
  border-radius: 0;
  padding: 6px 14px;
  font-family: var(--sans);
  font-size: 12.5px;
  transition: none;
}
.wbody button.act:hover:not(:disabled) { background: var(--face-soft); color: var(--face-ink); }
.wbody button.act:active:not(:disabled) {
  transform: none;
  border-color: var(--edge-dark) var(--face-lit) var(--face-lit) var(--edge-dark);
}
.wbody button.act.primary { font-weight: 700; }
.wbody button.act.quiet { color: #4A4A4A; }
.wbody button.act:disabled { color: var(--edge); background: var(--face); }

.wbody button.act.done, button.act.done {
  color: var(--phos);
  border-style: solid;
  cursor: default;
  opacity: 1;
}
.wbody button.act.done { color: var(--face-ink); background: var(--face-soft); }
button.act.done::before { content: "\2713\00a0"; }
.wbody select {
  background: #fff;
  color: var(--face-ink);
  font-family: var(--sans);
  border: 2px solid;
  border-color: var(--edge) var(--face-lit) var(--face-lit) var(--edge);
  border-radius: 0;
  padding: 5px 6px;
}
.wbody label.field { font-family: var(--mono); color: var(--phos-low); }

.wbody .t1 { color: #6E6E6E; }
.wbody .t2 { color: #4A4A4A; }
.wbody .t3 { color: #232323; }
.wbody .t4 { color: #000000; font-weight: 700; }
.wbody .t5 { color: var(--chassis); }

.wbody .rates .rbar { border-bottom: 1px solid var(--edge); }
.wbody .rates .rbar i { border: 1px solid #fff; border-bottom: 0; }
.wbody .rates .r1 { background: #D2D2D2; }
.wbody .rates .r2 { background: #A8A8A8; }
.wbody .rates .r3 { background: #6E6E6E; }
.wbody .rates .r4 { background: #303030; }
.wbody .rates .r5 { background: var(--chassis); }

.wbody .cond i { background: #D8D8D8; }
.wbody .cond i.on { background: #4A4A4A; }
.wbody .cond.mint i.on { background: #0A0A0A; }

.wbody .penalty,
.wbody .note.broke {
  background: #FFF8DC;
  border-left: 3px solid var(--chassis);
  color: #4A3000;
}
.wbody .warn, .wbody .commit .caution { color: #8A2A00; }

.wbody .slot .art,
.wbody .pull-art,
.wbody .plate-art,
.wbody .readout {
  --screen-2: #0F1813;
  --screen-3: #132018;
  --phos: #7CFFB2;
  --phos-dim: #6FCB96;
  --phos-low: #4E8E6B;
  --phos-faint: rgba(124, 255, 178, .20);
  --phos-hair: rgba(124, 255, 178, .11);
  --chassis: #D7D1C1;
  --warn: #FFC46B;
  background: #0B120E;
  border: 2px solid;
  border-color: var(--edge) var(--face-lit) var(--face-lit) var(--edge);
  color: var(--phos-dim);
}
.wbody .slot .art { margin: -1px -1px 6px; height: 70px; }

.wbody .slot .art.ghost { opacity: 1; }
.wbody .slot .art.ghost svg { opacity: .34; }
.wbody .pull-art { height: 96px; }
.wbody .plate-art { margin: 0 0 12px; padding: 8px; border-bottom: 2px solid var(--edge); }
.wbody .readout { padding: 14px; }
.wbody .readout dt, .wbody .readout .unit { color: #4E8E6B; }
.wbody .readout dd { color: #6FCB96; }
.wbody .readout .total { color: #7CFFB2; }
.wbody .readout .total.idle { color: #4E8E6B; }
.wbody .readout .cls { color: #D7D1C1; }

.wbody .readout .commit {
  margin: 14px -14px -14px;
  padding: 12px 14px;
  background: var(--face);
  border-top: 2px solid var(--face-lit);
  color: var(--face-ink);
}
.wbody .readout .commit .caution { color: #8A2A00; font-family: var(--sans); }

.wbody .part .pts,
.wbody .plate .score { color: var(--phos); }
.wbody .plate .cls,
.wbody .board h3 { color: var(--chassis); }
.wbody .board li .val { color: #2B2B2B; }
.wbody .board li.me { background: #FFF3B0; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}