:root {
  --measure: 40rem;
  --s-xs: 0.4rem;
  --s-s: 0.75rem;
  --s-m: 1.5rem;
  --s-l: 2.5rem;
  --s-xl: 3.5rem;
  --font: Courier Prime, monospace;
  --font-special: Heydon Caps, cursive;
  --wave-square: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20"><path fill="none" d="M0 19, 20 19, 20 1, 39 1, 39.5 20.5" stroke="%23EEE" stroke-width="2" stroke-linecap="square"></path></svg>');
  --wave-triangle: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20"><path fill="none" d="M-1 19.5, 20 1.5, 41 19.5" stroke="%23EEE" stroke-width="2"></path></svg>');
  --wave-sawtooth: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20"><path fill="none" d="M-1 19.5, 39 1.5, 39 20" stroke="%23EEE" stroke-width="2"></path></svg>');
  --wave-sine: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20"><path fill="none" d="M-1,11.5 C 20,-20 20,40 41,8.9" stroke="%23eee" stroke-width="2"></path></svg>');
  color: var(--color-fore);
  font-family: var(--font);
  font-size: clamp(1rem, 3vmin, 1.4rem);
}

*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: inherit;
}

[hidden] {
  display: none !important;
}

audio {
  filter: grayscale(1) contrast(100);
}

:where(ol, ul):not([class]) {
  padding-inline-start: var(--s-l);
}

dl > div {
  display: flex;
  gap: var(--s-s);
  padding-block: var(--s-xs);
}

dt {
  font-weight: bold;
}

dt:after {
  content: '.........';
  font-weight: normal;
}

a {
  text-decoration-style: wavy;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.05em;
}

a:hover {
  text-underline-offset: 0.333em;
}

main [href*="/examples/"] {
  font-family: var(--font-special);
  font-size: 1.333em;
  line-height: 1;
  letter-spacing: 1px;
  text-decoration-thickness: 0.04em;
}

img, picture, video, canvas, svg {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  margin-inline: auto;
}

figcaption {
  padding-block: var(--s-l);
  font-size: 0.85rem;
  max-inline-size: 75%;
  margin-inline: auto;
  text-align: center;
}

:focus-visible {
  outline: 1px dashed var(--color-fore);
  outline-offset: 0.125em;
}

[tabindex="-1"]:focus-visible {
  outline: none;
}

input, button, textarea, select {
  font: inherit;
}

h1, h2, h3 {
  font-weight: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
  font-family: var(--font-special);
  line-height: 1;
}

h1 {
  font-size: 4rem;
  text-align: center;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 1.75rem;
}

strong {
  line-height: 1;
  font-size: 1.125em;
}

strong {
  letter-spacing: 1px;
}

table {
  border-collapse: collapse;
  inline-size: 100%;
  overflow-x: auto;
}

[scope="row"] {
  text-align: center;
  inline-size: 0;
}

th, td {
  border: 1px solid;
  padding: var(--s-s);
  text-align: left;
}

tr + tr td:not(:last-child) {
  text-align: center;
}

nav {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}

footer nav {
  margin-block-start: var(--s-s);
  margin-block-end: 0;
}

nav li:nth-child(odd), nav li:nth-child(even):hover {
  transform: rotate(1.5deg);
}

nav li:nth-child(even), nav li:nth-child(odd):hover {
  transform: rotate(-1.5deg);
}

nav a {
  font-weight: bold;
}

nav a:not(:hover) {
  text-decoration: none;
}

pre, .l-note {
  overflow-x: auto;
}

.l-view footer {
  margin-block-start: auto;
  padding: var(--s-m);
  text-align: center;
}

pre code {
  display: block;
  padding: var(--s-m) 0;
}

:where(pre, .l-note)::before,
:where(pre, .l-note)::after,
.l-index::after {
  content: '';
  display: block;
  block-size: 0.4rem;
  background-image: var(--wave-sine);
  inline-size: 100%;
}

.l-note::before,
.l-note::after {
  margin-block: var(--s-m);
  background-image: var(--wave-square);
}

code {
  font-family: Menlo, Monaco, Courier New, Courier, monospace;
  font-weight: bold;
}

code:not(pre > *) {
  border: 1px dotted;
  border-radius: 0.25em;
  font-size: 0.8em;
  padding: 0.125em 0.25rem;
}

pre code {
  font-weight: normal;
}

/* layouts */

.l-box {
  padding: var(--box-padding, var(--s-s));
}

.l-column > * {
  margin-inline: auto;
  max-inline-size: var(--measure);
}

.l-column > :where(img, svg, aside, hr, pre, form, table, h1:has(img), p:has(img), figure:has(img), .l-grid) {
  max-inline-size: calc(var(--measure) + 10rem);
}

hr {
  min-inline-size: 100%;
}

.l-fixed {
  position: fixed;
  inline-size: 100%;
  z-index: 100;
  inset-block-start: var(--fixed-start, 0);
}

.l-fixed--end {
  --fixed-start: auto;
  inset-block-end: var(--fixed-end, 0);
}

.l-grid {
  list-style: none;
  display: grid;
  gap: var(--s-m);
  --grid-min: 18rem;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
  text-align: center;
}

.l-card {
  padding: var(--s-m);
  border: 1px solid;
  display: flex;
  flex-direction: column;
  position: relative;
  gap: var(--s-s);
}

.l-card--no-border {
  padding: var(--s-s);
  border: 0;
}

.l-card:nth-child(even) {
  transform: rotate(1.5deg)
}

.l-card:nth-child(3n) {
  transform: rotate(-1.5deg)
}

.l-card-no-border {
  border: 0;
}

@keyframes outline {
  0% {
    outline: 0 solid;
  }
  50% {
    outline: var(--s-xs) solid; 
    outline-offset: 0;
  }
  100% {
    outline: 0 solid;
    outline-offset: var(--s-xs);
  }
}

.l-card:has(a):hover, .l-card:focus-within {
  animation: outline 0.666s linear infinite;
}

p a:hover img,
.l-card:hover img, 
.l-card:focus-within img {
  animation: squiggle 0.25s linear infinite;
}

.l-card a:focus {
  outline: none;
}

.l-card a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.l-frame {
  position: relative;
  flex-grow: 1;
  container-type: size;
}

.l-frame__framed {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.l-loading {
  background-color: var(--color-back);
  flex-direction: row;
}

.l-cluster {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  gap: var(--cluster-gap, var(--s-m));
  justify-content: center;
}

.l-index {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-m);
  font-size: 1.5rem;
  font-family: var(--font-special);
  line-height: 1;
}

.l-index a:not(:hover) {
  text-decoration: none;
}

.l-index::after {
  margin-block-start: var(--s-m);
}

.l-split {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.l-scroll__main {
  padding-block-end: 200vh;
}

.l-scroll__intersectable {
  display: block;
  block-size: 100dvh;
  margin-block-start: 200dvh;
  margin-inline: 2rem;
}

.l-scroll__circle {
  background-image: url(circle.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80% 80%;
}

.l-examples {
  list-style: none;
}

.l-examples > * + * {
  padding-block-start: var(--s-s);
}

:where(.l-stack, .l-note) > * + * {
  margin-block-start: var(--stack-gap, var(--s-m));
}

.l-log {
  font-size: 0.75rem;
  overflow: auto;
  justify-content: center;
}

.l-log ul {
  padding: 0;
}

.l-log li {
  text-align: center;
  list-style: none;
}

/* components */
.c-logo {
  display: inline-block;
}

.c-logo svg {
  max-inline-size: 10rem;
  margin-block: var(--s-s);
}

.c-logo-small svg {
  max-inline-size: 7rem;
}

.c-logo:where(:hover, :focus) svg {
  animation: squiggle 0.25s linear infinite;
}

.c-logo:where(:hover, :focus) .transmit {
  animation: flash 0.6s steps(1) infinite;
}

.transmit.two { animation-delay: 0.2s }

.transmit.three { animation-delay: 0.4s }

/* basic utilities */

.u-fit > * {
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: contain;
}

.u-fit video {
  box-shadow: inset  0 0 0 3rem var(--color-back);
}

.u-list-inline {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 0.5em;
}

.u-list-inline li:not(:last-child)::after {
  content: ',';
}

.u-chevrons {
  background-image: url(chevrons.svg), url(chevrons.svg);
  background-position: 0.5rem, calc(100% - 0.5rem);
  background-repeat: repeat-y;
  background-size: 1.125rem auto;
}

.u-blend-difference {
  mix-blend-mode: difference;
}

.u-font-special {
  font-family: var(--font-special);
}

.u-font-special-inline {
  font-family: var(--font-special);
  font-size: 1.333rem;
  line-height: 1;
}

.u-font-larger {
  font-size: 2rem;
}

.u-font-smaller {
  font-size: 0.75rem;
}

.u-glyph-icon {
  font-family: var(--font-special);
  padding: 0.25rem;
  font-weight: normal;
}

.u-backed {
  background-color: var(--color-back);
}

.u-note {
  font-style: italic;
}

.u-note__shout {
  display: inline-block;
  font-size: 1.5rem;
  transform: rotate(2deg);
  font-family: var(--font-special);
}

.u-flash {
  animation: flash 0.5s steps(1) infinite;
}

.u-scroll-y {
  overflow-y: auto;
}

.u-vh {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* form controls */

input, button {
  cursor: pointer;
}

button svg {
  inline-size: 2.25em;
  block-size: 2.25em;
  fill: currentColor;
  pointer-events: none;
}

[aria-pressed="true"] .off,
[aria-pressed="false"] .on {
  display: revert;
}

[aria-pressed="true"] .on,
[aria-pressed="false"] .off {
  display: none;
}

form {
  border: 1px solid;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  padding: var(--s-m);
  gap: var(--s-m);
}

label {
  display: flex;
  gap: var(--s-xs);
  line-height: 1;
  align-items: center;
  text-align: right;
}

button {
  background-color: var(--color-back);
  border: 2px solid;
  border-radius: 0.25rem;
  padding: 0.333em 0.666em;
  line-height: 1.125;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
}

button.u-round {
  padding: 0.666em;
  border-radius: 50%;
}

button.u-ghost {
  padding: 0;
  border: 0;
}

button:hover {
  filter: invert(1);
}

button:active {
  transform: scale(0.95);
}

[type="range"] { 
  accent-color: white; 
  filter: brightness(1000);
  inline-size: 100%;
  max-inline-size: 8rem;
}

[type="checkbox"] {
  appearance: none;
  position: relative;
  inline-size: 1.75rem;
  block-size: 0.5rem;
  border-radius: 0.125rem;
  background-color: var(--color-fore);
  display: flex;
  align-items: center;
}

[type="checkbox"]::before {
  content: '';
  display: inline-block;
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: 100%;
  border: 3px solid;
  background-color: var(--color-back);
  outline: 3px solid var(--color-back);
}

[type="checkbox"]:checked {
  justify-content: flex-end;
}

fieldset:has([type="radio"]) {
  display: flex;
  border: 0;
}

[type="radio"] {
  display: none;
}

label:has([type="radio"]) {
  padding: calc(var(--s-xs) / 2) var(--s-xs);
  border: 2px solid var(--color-fore);
  background-color: var(--color-back);
  cursor: pointer;
}

label:has([type="radio"]) + label {
  border-inline-start: 0;
}

label:has([type="radio"]:checked) {
  background-color: var(--color-fore);
  color: var(--color-back);
}

.u-legend {
  display: inline;
  padding: 0 var(--s-xs);
}

/* dialogs */

dialog {
  background-color: var(--color-back);
  border-width: 1px;
  padding: var(--s-m);
  position: absolute;
  inline-size: auto;
  margin-inline: auto;
  margin-block: auto;
  border-radius: 0.25rem;
  max-inline-size: var(--measure);
  inset-inline: 6vw;
}

dialog header {
  text-align: right;
  padding-block-end: var(--s-m);
}

dialog > div {
  max-block-size: 60vh;
  overflow-y: auto;
}

/* animations */

[class*="u-wave"] {
  border: 0;
  block-size: 3.5rem;
  background-size: auto 50%;
  background-repeat: repeat-x;
  background-position: 0 center;
  animation: osc auto ease-in-out, amp auto linear;
  animation-timeline: view();
  filter: url(#noise-big-1);
}

.u-wave-square {
  background-image: var(--wave-square);
}

.u-wave-triangle {
  background-image: var(--wave-triangle);
}

.u-wave-sawtooth {
  background-image: var(--wave-sawtooth);
}

.u-wave-sine {
  background-image: var(--wave-sine);
}

@keyframes osc {
  0% {
    background-position: 0 center;
  }
  40% {
    background-position: 36rem center;
  }
  100% {
    background-position: 0 center;
  }
}

@keyframes amp {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.125);
  }
  100% {
    transform: scaleY(1);
  }
}

.u-squiggle, main img[src*="/illustration"] {
  animation: squiggle 0.25s linear infinite;
}

.u-squiggle--big {
  animation: squiggleBig 0.25s linear infinite;
}

@keyframes squiggle {
  0% {
    filter: url("#noise-1");
  }
  33% {
    filter: url("#noise-2");
  }
  66% {
    filter: url("#noise-3");
  }
}

@keyframes squiggleBig {
  0% {
    filter: url("#noise-big-1");
  }
  33% {
    filter: url("#noise-big-2");
  }
  66% {
    filter: url("#noise-big-3");
  }
}

@keyframes flash {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* page transitions */

@keyframes distort-in {
  0% {
    filter: url(#distort-3);
    opacity: 1;
  }
  33% {
    filter: url(#distort-1);
  }
  66% {
    filter: url(#distort-2);
  }
  100% {
    opacity: 0.5;
  }
}

@keyframes distort-out {
  0% {
    filter: url(#distort-1);
    opacity: 0.5;
  }
  33% {
    filter: url(#distort-3);
  }
  66% {
    filter: url(#distort-2);
  }
  100% {
     opacity: 1;
  }
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 0.25s ease-in both distort-in;
}

::view-transition-new(root) {
  animation: 0.25s ease-in both distort-out;
}

/* css-blam testing */

props-blam > div {
  display: flex;
  align-items: center;
  flex-direction: row !important;
  animation: squiggle 0.25s linear infinite;
  gap: 0.125rem;
}

props-blam > div > div {
  inline-size: calc(100cqw / 32);
  background-color: var(--color-fore);
  block-size: calc(var(--snareVis-freq) * 100cqh);
  transition: block-size var(--snareVis-interval) linear;
}

/* HYPERBLAM elements */

audio-blam, media-blam, kbd-blam, blam-blam {
  display: contents;
}