7.css

/* https://s9a.page/tape */
:root{--tape-filter:none;--tape-bluv:#11dff1;--tape-play:#fbbfff;--tape-loud:#eee833;--tape-luvu:#44f477;--tape-blaq:#0e0e0e;--tape-watt:#e0e0e0;--tape-hex:#e0e0e0;--tape-mix:transparent}.tape-watt{--tape-hex:var(--tape-watt)}.tape-luvu{--tape-hex:var(--tape-luvu)}.tape-loud{--tape-hex:var(--tape-loud)}.tape-play{--tape-hex:var(--tape-play)}.tape-bluv{--tape-hex:var(--tape-bluv)}.tape-flat{border-color:transparent}.tape-flap{border-color:currentColor}.tape-flow{--tape-remix:none}.tape-flow :not(.tape-skip){background-color:transparent;color:inherit}.tape-blaq,.tape-bluv,.tape-loud,.tape-luvu,.tape-play,.tape-watt{--tape-mix:var(--tape-hex);--tape-remix:none;color:var(--tape-blaq)!important;background-color:var(--tape-mix)!important;background-image:var(--tape-remix);filter:var(--tape-filter)}.tape-blaq{--tape-mix:var(--tape-blaq);color:var(--tape-hex)!important}.tape-erase,.tape-erase *{color:transparent!important}

/* play. */

:root {
  --tape-loud: dodgerblue;
  --tape-play: #a7e;
  --tape-bluv: deepskyblue; 
  --tape-blaq: midnightblue;
}

::selection {
  background: #808;
  color: #ec0;
}

:any-link {
  color: inherit;
  display: inline-flex;
  text-decoration-style: dotted;
}

:focus {
  box-shadow: 0 0 1ex 1ex #a7e;
  outline: thick dotted skyblue;
  text-decoration-style: solid;
}

:hover {
  text-decoration-style: double;
}

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  font-size: max(3ch, 4vmax + 1vmin);
  line-height: 1.618em;
}

body {
  margin: 0;
  overflow-wrap: anywhere;
  text-shadow: 1vw 1vh 1ch deepskyblue;
}

article {
  display: flex;
  flex-flow: column;
  contain: layout;
  padding: 1ch;
}

nav {
  align-items: flex-end;
  display: flex;
  flex-flow: column;
  contain: layout;
  font-size: 1.618em;
  margin-block: 1rem;
  min-height: 100vh;
  font-family: sans-serif;
}

nav a {
  box-shadow: 23.6vw 38.2vh 1ch;
  padding: 1ch;
}

h1 {
  font-family: sans-serif;
  box-shadow: -10vw -10vh 0 deepskyblue;
  order: 1111;
  margin: 0;
  margin-bottom: 1.618em;
}

cite {
  font: unset;
}

svg {
  border-radius: 100%;
  padding: 0;
  width: 61.8vw;
  flex-basis: 100%;
  height: auto;
  margin: auto;
}

.hoop {
  align-self: center;
  border-radius: 100%;
  contain: layout;
  z-index: -1;
}

[hidden] {
  display: none;
}