@font-face { font-family: 'IBM Plex Sans'; src: url("ibm-plex-sans-200.woff2") format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url("ibm-plex-sans-300.woff2") format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url("ibm-plex-sans-400.woff2") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url("ibm-plex-sans-400-italic.woff2") format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url("ibm-plex-sans-500.woff2") format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url("ibm-plex-sans-600.woff2") format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url("ibm-plex-sans-700.woff2") format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'IBM Plex Mono'; src: url("ibm-plex-mono-300.woff2") format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url("ibm-plex-mono-400.woff2") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url("ibm-plex-mono-500.woff2") format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url("ibm-plex-mono-600.woff2") format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url("ibm-plex-mono-700.woff2") format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

html, body { margin: 0; background: #000; -webkit-font-smoothing: antialiased; }
a { color: #b0def0; text-decoration: none; }
a:hover { color: #5fe7e4; }
textarea::placeholder, input::placeholder { color: #454545; }
textarea:focus, input:focus { outline: none; border-color: #5fe7e4; }
button { transition: all .2s ease-in-out; }

/* Matches `.btn-primary:hover` on wizardsardine.com, using the full
   14-stop `--ws-gradient` from their variables.css rather than a
   three-stop approximation, which banded visibly. `!important`
   because the buttons carry their rest state in an inline style
   attribute, which outranks any class selector on its own. The
   `hover: hover` guard keeps the fill from sticking after a tap on a
   touch screen. There is deliberately no pressed state: the design
   system has none. */
@media (hover: hover) {
  .primary-btn:hover:not(:disabled) {
    background-image: linear-gradient(231.49deg, #61ffe1 32.13%, #60f8e1 37.38%, #5fe7e4 44.13%, #5ccbe8 52.39%, #59a4ee 60.64%, #5572f5 69.65%, #5133ff 79.4%, #5433ff 86.15%, #5d35ff 90.66%, #6e38ff 95.16%, #853cff 99.66%, #a341ff 103.41%, #ac43ff 104.16%) !important;
    color: #000 !important;
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .1));
  }
}

.remove-btn:hover:not(:disabled) { color: #ef445f !important; }

/* A button whose label changes must not resize under the pointer. The
   hidden sizer holds the widest label the button can show; the visible
   label is stacked on top of it in the same grid cell. */
.btn-stable { display: inline-grid; grid-template-areas: "label"; align-items: center; justify-items: center; }
.btn-stable > * { grid-area: label; }
.btn-stable > .btn-sizer { visibility: hidden; pointer-events: none; }

@keyframes wspulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }