@font-face {
  font-family: LeagueMono;
  src: url("/assets/fonts/league-mono/WOFF2/LeagueMono-VF.woff2");
  font-display: auto;
}
:root {
  /* colors */
  --primary: var(--override-primary, 162);
  --secondary: calc(var(--primary) + 120);
  --terciary: calc(var(--primary) + 240);
  --contrast: calc(var(--primary) + 180);
  --saturation: 90%;
  --spot: 98%;
  --falloff-step: -29%;
  --backdrop: hsl(var(--primary) 5% calc(var(--spot) + calc(3 * var(--falloff-step))));
  --fill: hsl(var(--primary) 10% var(--spot));
  --highlight: hsl(var(--primary) var(--saturation) calc(var(--spot) + var(--falloff-step)));
  --unit: 1.5em;
  --multiplier: 1.5;
  /* timings */
  --short: 300ms;
  --mid: calc(3 * var(--short));
  --long: calc(3 * var(--mid));
  --font-width: 95;
  --font-size: calc(1.2vmin + 5pt);
  --sine-wave: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 100"><path fill="currentColor" stroke="currentColor" stroke-width="3" d="M0 50 C 40 10, 60 10, 100 50 C 140 90, 160 90, 200 50 C 240 10, 260 10, 300 50 C 340 90, 360 90, 400 50 L 400 100 L 0 100 Z"/></svg>');
  font-variation-settings: "wdth" var(--font-width);
}
@media (prefers-color-scheme: light) {
  :root {
    --spot: 20%;
    --falloff-step: +23%;
  }
}
@media (orientation: portrait) {
  .p-column { flex-direction: column; }
  .p-w5 { width: calc(var(--unit) * var(--multiplier) * var(--multiplier) * var(--multiplier) * var(--multiplier) * var(--multiplier)); }
  .p-tc { text-align: center; }
}
[data-theme="light"] {
  --spot: 20%;
  --falloff-step: +25%;
}
[data-theme="dark"] {
  --spot: 98%;
  --falloff-step: -27%;
}
input[type=range] { -webkit-appearance: slider-vertical; }
input[type=range]::-webkit-slider-thumb, input::-moz-range-thumb { 
  -webkit-appearance: none;
  border: .1em solid var(--backdrop);
  height: 1em;
  width: 1em;
  margin-top: -.6em;
  border-radius: 50%;
  background: var(--highlight);
  cursor: pointer;
}
input[type=range]:focus::-webkit-slider-thumb, input:focus::-moz-range-thumb,
input:not([type=range]):focus,
textarea:focus,
button:focus,
a:focus h4 {
  box-shadow: 0px 0px .3rem .3rem var(--backdrop), 0px 0px .3rem .3rem var(--highlight), 0px 0px .3rem .3rem var(--fill);
}
input[type=range]::-webkit-slider-runnable-track, input::-moz-range-track {
  cursor: pointer;
  box-shadow: 1px 1px 1px hsla(var(--primary), 5%, calc(var(--spot) + var(--falloff-step)), .66), 0px 0px 1px hsla(var(--primary), 5%, calc(var(--spot) + var(--falloff-step)), .66);
  border: none;
  background: hsla(var(--primary), 5%, calc(var(--spot) + var(--falloff-step)), .66);
}
::selection {
  background-color: hsl(var(--contrast) var(--saturation) calc(var(--spot) + var(--falloff-step)));
  text-shadow: none;
  color: var(--backdrop);
}
h1,h2,h3,label,input { font-family: LeagueMono, monospace; }
a, :visited {
  color: var(--highlight);
  text-decoration: none;
}
details:not([open]) > .right-marker::marker { transform: rotate(.5turn); }
.bb { box-sizing: border-box; }
.sticky { position: sticky; } 
.absolute { position: absolute; }
.relative { position: relative; }
.dn { display: none; }
.db { display: block; }
.df { display: flex; }
.dg { display: grid; }
.dif { display: inline-flex; }
.dib { display: inline-block; }
.column { flex-direction: column; }
.column-reverse { flex-direction: column-reverse; }
.row-reverse { flex-direction: row-reverse; }
.order-2 { order: 2; }
.wrap { flex-wrap: wrap; }
.flex { flex: auto; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-stretch { justify-content: stretch; }
.justify-self-stretch { justify-self: stretch; }
.justify-self-center{ justify-self: center; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-self-end { align-self: flex-end; }
.ss-y-proximity { scroll-snap-type-y: proximity;;}
.bg-backdrop { background-color: var(--backdrop); }
.bg-highlight { background-color: var(--highlight); }
.bg-secondary { background-color: hsl(var(--secondary) var(--saturation) calc(var(--spot) + var(--falloff-step))); }
.bg-contrast { background-color: hsl(var(--contrast) var(--saturation) calc(var(--spot) + var(--falloff-step))); }
.bg-terciary { background-color: hsl(var(--terciary) var(--saturation) calc(var(--spot) + var(--falloff-step))); }
.bg-darkener { background-color: hsla(var(--primary), 5%, calc(var(--spot) + calc(4 * var(--falloff-step))), .66); }
.bg-lightener { background-color: hsla(var(--primary), 5%, calc(var(--spot) + var(--falloff-step)), .66); }
.bg-transparent { background-color: transparent; }
.bg-lighten { background-color: rgba(255, 255, 255, .8); }
.bg-ry { background-repeat: repeat-y; }
.backdrop { color: var(--backdrop); }
.spotlight { color: var(--fill); }
.highlight { color: var(--highlight); }
.glow-text { text-shadow: 0 0 1em var(--highlight),0 0 2em var(--highlight),0 0 5em var(--highlight); }
.secondary { color: hsl(var(--secondary) var(--saturation) calc(var(--spot) + var(--falloff-step))); }
.contrast { color: hsl(var(--contrast) var(--saturation) calc(var(--spot) + var(--falloff-step))); }
.terciary { color: hsl(var(--terciary) var(--saturation) calc(var(--spot) + var(--falloff-step))); }
.mbm-luminocity-not-hover:not(:hover) { mix-blend-mode: luminosity; }
.f-160 { font-size: 160%; }
.f-100 { font-size: var(--font-size, 100%); }
.f-80 { font-size: 80%; }
.f-60 { font-size: 60%; }
.normal { font-weight: normal; }
.light { font-weight: 300; }
.b { font-weight: bold; }
.ff-mono { font-family: LeagueMono, monospace; }
.ff-sans { font-family: sans-serif; }
.small-caps { font-variant: small-caps; }
.td-none { text-decoration: none; }
.underline { text-decoration-line: underline; }
.dashed { text-decoration-style: dashed; }
.writing-vrl { writing-mode: vertical-rl; }
.nowrap { white-space: nowrap; }
.list { list-style: none; }
.tr { text-align: right; }
.tl { text-align: left; }
.tc { text-align: center; }
.b0 { border-width: 0; }
.b1 { border-width: .25rem; }
.bs { border-style: solid; }
.b-spotlight { border-color: var(--spotlight); }
.b-highlight { border-color: var(--highlight); }
.outline-hover:hover { outline-color: inherit; outline-width: 1px; outline-style: solid; }
.outline-focus-0:focus { outline-width: 0; }
.outline-color-highlight:focus { outline-color: var(--highlight); }
.b-focus-0:focus { border-width: 0; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.right-0 { right: 0; }
.left-0 { left: 0; }
.w2 { width: calc(var(--unit) * var(--multiplier) * var(--multiplier)); }
.w3 { width: calc(var(--unit) * var(--multiplier) * var(--multiplier) * var(--multiplier)); }
.h3 { height: calc(var(--unit) * (var(--multiplier) * (var(--multiplier) * var(--multiplier)))); }
.w-100 { width: 100%; }
.h-100vh { height: 100vh; }
.h-100 { height: 100%; }
.max-body-width { max-width: 85ch; }
.max-body-height { max-height: 85ch; }
.z-1 { z-index: -1; }
.z0 { z-index: 0; }
.z1 { z-index: 1; }
.m0 { margin: 0; }
.ml2 { margin-left: 1em; }
.m2 { margin: 1em; }
.mv2 { margin-top: 1em; margin-bottom: 1em; }
.mh2 { margin-left: 1em; margin-right: 1em; }
.mt3 { margin-top: 1.5em; }
.p0 { padding: 0; }
.pl0 { padding-left: 0; }
.p1 { padding: .5em; }
.p2 { padding: 1em; }
.pv2 { padding-top: 1em; padding-bottom: 1em; }
.p5 { padding: 2.5em; }
.gg2 { grid-gap: 1em; }
.gg4 { grid-gap: 2em; }
.gg5 { grid-gap: 2.5em; }
.lh-copy { line-height: 1.5; }
.lh-title { line-height: 1.75; }
.lowercase { text-transform: lowercase; }
.uppercase { text-transform: uppercase; }
.br1 { border-radius: .5rem; }
.o-5 { opacity: .5; }
.o-0 { opacity: .0; }
.t { transition-property: var(--transition-property, transform); }
.to-bottom { transform-origin: bottom; }
.to-top { transform-origin: bottom; }
.t-ease { transition-timing-function: ease; }
.t-duration-short { transition-duration: var(--short); }
.t-duration { transition-duration: var(--mid); }
.t-duration-long { transition-duration: var(--long); }
.a-name-from-to { animation-name: var; }
.a-name-mask-slide { animation-name: mask-slide; }
.a-name-spin { animation-name: spin; }
.a-name-rise { animation-name: rise; }
.a-name-spin-hover:hover { animation-name: spin; }
.a-duration-short { animation-duration: var(--short); }
.a-duration { animation-duration: var(--mid); }
.a-duration-long { animation-duration: var(--long); }
.a-fill-both { animation-fill-mode: both;  }
.a-infinite { animation-iteration-count: infinite;  }
.a-once { animation-iteration-count: once; }
.a-ease { animation-timing-function: ease; }
.a-linear { animation-timing-function: linear; }
.before-text:before { content: attr(data-before); }
.after-text:after{ content: attr(data-after); }
.transform { transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) rotate(var(--rotate, 0)) scale(var(--scale, 1)); }
.hover-weight-bold:hover { font-weight: 800; }
.hover-weight-light:hover { font-weight: 200; }
.resize-v { resize: vertical; }
.pointer { cursor: pointer; }
@keyframes rise {
  from { transform: scaleY(0)}
  to { transform: scaleY(.5)}
}
@keyframes spin {
  from { transform: rotate(0); }
  to { transform: rotate(1turn); }
}
@keyframes var {
  from { transform: var(--a-from); }
  to { transform: var(--a-to); }
}
@keyframes mask-slide {
  from { mask-position-x: 0%; -webkit-mask-position-x: 0%; }
  to { mask-position-x: -24vmin; -webkit-mask-position-x: -24vmin; }
}