/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Use and Imports
# Element Defaults
	## Typography
	## STRUCTURES & LAYOUTS 
		### Navigation 
		### Part Intros
		### Sections
		### Interlude
	## REFERENCE & FOOTNOTE STYLES 
	## FIGURE STYLE
	## MOTION STYLES 
	## SPLOT STYLES 
# SECTION AGNOSTIC OVERRIDES
  ## Structure
  ## Elements
# SECTION SPECIFIC OVERRIDES
  ## Structure
  ## Elements
--------------------------------------------------------------*/
/*
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
Use and Imports
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%  
*/
/*define fonts*/
@font-face {
  font-family: "OCCModernTextVF";
  src: url("../fonts/OCCModernTextVF_Roman.ttf") format("truetype-variations");
  font-style: normal;
  font-variation-settings: "wdth" var(--wdth), "wght" var(--wght), "CONT" var(--cont);
}
@font-face {
  font-family: "OCCModernTextVFItalic";
  src: url("../fonts/OCCModernTextVF_Italic.ttf") format("truetype-variations");
  font-style: italic;
  font-variation-settings: "wght" var(--wght);
}
@font-face {
  font-family: "OCCModernVF";
  src: url("../fonts/OCCModernVF_Roman.ttf") format("truetype-variations");
  font-style: normal;
  font-variation-settings: "wght" var(--wght);
}
@font-face {
  font-family: "OCCModernVFItalic";
  src: url("../fonts/OCCModernVF_Italic.ttf") format("truetype-variations");
  font-stretch: italic;
  font-variation-settings: "wdth" var(--wdth), "wght" var(--wght), "CONT" var(--cont);
}
@font-face {
  font-family: "OCCTabularBeta";
  src: url("../fonts/OCCTabularBeta-Medium.otf") format("opentype");
}
.text, body, select, em, .footnotes p, body.OCCModernTextVF main p, body.OCCModernTextVF .dial-tick {
  font-family: "OCCModernTextVF";
}

.display, main p, .dial-tick {
  font-family: "OCCModernVF";
}

.display-condensed {
  font-family: "OCCModernVF";
  font-style: normal !important;
  font-variation-settings: "wdth" var(--wdth-cond), "wght" var(--wght);
}

.display-condensed-italic {
  font-family: "OCCModernVFItalic";
  font-style: italic;
  font-variation-settings: "wdth" var(--wdth-cond), "wght" var(--wght);
}

.display-compressed {
  font-family: "OCCModernVF";
  font-style: normal !important;
  font-variation-settings: "wdth" var(--wdth-comp), "wght" var(--wght), "CONT" var(--cont);
}

.display-compressed-italic {
  font-family: "OCCModernVFItalic";
  font-style: italic;
  font-variation-settings: "wdth" var(--wdth-comp), "wght" var(--wght), "CONT" var(--cont);
}

.display-compressed {
  font-family: "OCCModernVF";
  font-style: normal !important;
  font-variation-settings: "wdth" var(--wdth-comp), "wght" var(--wght), "CONT" var(--cont);
}

.tabular, nav.inline .panel-wrapper h3,
nav.inline .panel-wrapper h4, .dial-value {
  font-family: "OCCTabularBeta";
  font-style: normal !important;
}

:root {
  /* font-sizes */
  --base-grid: 20px;
  --base-size: calc(var(--base-grid));
  --xxlarge-size: calc(var(--base-size)*5);
  --heading-size: calc(var(--base-size)*4);
  --xlarge-size: calc(var(--base-size)*3);
  --large-size: calc(var(--base-size)*2);
  --medium-size: calc(var(--base-size)*1.25);
  --caption-size: calc(var(--base-size)*.8);
  --small-size: calc(var(--base-size)*.6);
  --xs-size: calc(var(--base-size)*.5);
  --lineheight: 1.1;
  --lineheight-small: 1;
  --lineheight-large: 1.25;
  /* font weight variables */
  --wght:400;
  --wght-extra-light: 200;
  --wght-light: 300;
  --wght-semibold: 600;
  --wght-bold: 700;
  --wght-black: 900;
  --cont: 1;
  --wdth: 100;
  --wdth-cond: 75;
  --wdth-comp: 50;
  /* structures */
  --max-width: 1400px;
  --margin: calc(calc(100vw - var(--max-width)) / 2);
  --main-width: calc(100% - var(--pad-body)*2);
  /* spacing */
  --pad-section: calc(var(--base-grid) * 3.5);
  --pad-body: calc(var(--base-grid)*2);
  --pad: calc(var(--base-grid)*1.5);
  --pad-sm: calc(var(--base-grid)*1);
  --pad-xs: calc(var(--base-grid)*0.75);
  --pad-xxs: calc(var(--base-grid)*0.5);
  --color-default:rgb(26 26 26);
  --color-default-light: #2c2c2c;
  --color-default-lighter: #c2c2c2;
  --color-accent: rgb(250, 255, 154);
  --color-accent-light: rgb(248 250 219);
  --color-bg: #F3F3F3;
  --color-white: #FFFFFF;
  --color-orange: #f8bd1c;
  --color-grey-light: rgb(254 255 242);
  --inline-x: 30vw;
  --inline-y: 50px;
  --gutter: 24px;
  --height-nav: 35vh;
}
@media (max-width: 1700px) {
  :root {
    --margin: var(--pad-body);
    --width-text: calc(52vw - var(--pad-body)*2);
  }
}
@media (max-width: 1024px) {
  :root {
    --base-grid: 16px;
    --heading-size: calc(var(--base-size)*3);
    --height-nav: 35vh;
  }
}
@media (max-width: 850px) {
  :root {
    --width-text: calc(100vw - var(--pad-body)*4);
    --base-grid: 18px;
    --xlarge-size: calc(var(--base-size)*2.5);
    --height-cover: calc(var(--base-grid)*30);
    --height-header: 45px;
    --height-spans: calc(var(--base-grid)*30);
    --indent: 1.8rem;
    --height-figure: 600px;
  }
}
@media (max-width: 640px) {
  :root {
    --base-grid: 18px;
    --width-text: calc(100vw - var(--pad-body)*2);
    --large-size: calc(var(--base-size)* 2);
    --height-cover: 80vh;
    --height-figure: 350px;
    --pad-section: calc(var(--base-grid) *2);
    --lineheight: var(--lineheight-large);
    --heading-size: 2rem;
    --xlarge-size: 1.5rem;
    --medium-size: 1rem;
    --height-nav: 43vh;
  }
}

/*
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
Element Defaults
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%  
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-variation-settings: "wdth" var(--wdth), "wght" var(--wght);
}

html {
  font-size: var(--base-size);
}

body {
  width: 100%;
  font-size: var(--base-size);
  line-height: var(--lineheight);
  --wght: 400;
  --wdth: 100;
  font-variant-numeric: oldstyle-nums;
  --bgalpha: 0;
  background-color: var(--color-bg);
  color: var(--color-default);
}
body.play-all {
  --color-bg: var(--color-accent-light);
  --color-grey-light: rgb(252 255 204);
  --color-default:#3a3832;
}
body.play-all .dials, body.play-all .btn_audio, body.play-all .btn_reset,
body.play-all nav.inline .panel-wrapper h4,
body.play-all nav.inline .panel-wrapper h3,
body.play-all nav.inline .panel-wrapper ul,
body.play-all .panel-style #typeface,
body.play-all .sound.muted,
body.play-all #nav_close, body.play-all .drag-handle {
  --color-default: var(--color-default-lighter);
}
body.play-all nav.inline .btn_autoplay svg rect {
  stroke: var(--color-accent-light);
  fill: var(--color-accent-light);
}
body.play-all nav.inline .btn_autoplay {
  border: solid 1px var(--color-accent-light);
  color: var(--color-accent-light);
  background-color: var(--color-default);
}
body.play-all main span.active {
  background-color: transparent;
}
body.play-all main span:hover {
  background-color: transparent;
}
body.audio-all {
  --color-bg: var(--color-default-light);
  --color-white: var(--color-default-light);
  --color-grey-light: rgb(82 83 69);
  --color-default: var(--color-accent-light);
}
body.audio-all .dials, body.audio-all .btn_autoplay, body.audio-all .btn_reset,
body.audio-all nav.inline .panel-wrapper h4,
body.audio-all nav.inline .panel-wrapper h3,
body.audio-all nav.inline .panel-wrapper ul,
body.audio-all .panel-style #typeface,
body.audio-all .sound.muted,
body.audio-all #nav_close, body.audio-all .drag-handle {
  --color-default: #6b6967;
  --color-default-lighter: #6b6967;
  pointer-events: none;
}
body.audio-all nav.inline .btn_audio {
  background-color: var(--color-default);
}
body.audio-all nav.inline .btn_audio .label::after {
  color: var(--color-bg);
}
body.audio-all main p span.active {
  --color-accent: rgb(155 157 120);
}
body.audio-all nav.inline .btn_audio svg rect {
  fill: var(--color-bg);
  stroke: var(--color-bg);
}
body.audio-all nav.inline .btn_audio svg path, body.audio-all nav.inline .btn_audio svg line {
  stroke: var(--color-bg);
}
body.audio-all nav.inline .btn_autoplay {
  pointer-events: none;
}
body.audio-all main span:hover {
  background-color: transparent;
}

/*--------------------------------------------------------------*/
/* TYPOGRAPHY --------------------------------------------------*/
/*--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  --wght: var(--wght-bold);
  padding-bottom: 0;
  margin: 0;
  line-height: 0.9;
}
h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em {
  --wght: var(--wght-bold);
}

h1, h2 {
  font-size: var(--heading-size);
}

h3 {
  font-size: var(--base-size);
}

ins {
  background: #d4f4dd;
  text-decoration: none;
}

del {
  background: #f3f3f3;
  text-decoration: auto;
  color: #c2c2c2;
}

select {
  padding: 0.2em;
}

pre {
  font-size: var(--small-size);
}

#output {
  font-size: var(--heading-size);
  line-height: var(--lineheight);
}

p,
.content > ol li,
.content > ul li {
  line-height: var(--lineheight);
}
p strong,
.content > ol li strong,
.content > ul li strong {
  --wght: var(--wght-semibold);
  letter-spacing: 0.01em;
  padding-right: 2px;
}
p strong em,
.content > ol li strong em,
.content > ul li strong em {
  font-style: italic;
}
@media (max-width: 850px) {
  p,
  .content > ol li,
  .content > ul li {
    letter-spacing: 0.01em;
  }
}

em {
  font-style: italic;
}

strong {
  --wght: var(--wght-semibold);
}

a {
  cursor: pointer;
  color: var(--color-default);
  text-underline-offset: 2px;
  text-decoration: underline 1.5px;
}
a:hover {
  text-decoration: none;
  color: var(--color-orange);
}

blockquote {
  margin-left: var(--pad-section);
  padding-top: var(--pad-sm);
}

cite {
  display: inline-block;
  font-style: normal;
}
cite span {
  line-height: var(--lineheight-large);
}

li {
  list-style-type: none;
}

ol li {
  list-style-type: decimal;
}

code {
  font-family: "Courier New", Courier, monospace;
}

hr {
  border: 0;
  background: 0;
}

button {
  background: transparent;
  border: 0;
  cursor: pointer;
}

img {
  display: block;
  width: 100%;
}

video {
  width: 100%;
}

#title, #about, h4 {
  font-size: var(--base-size);
  font-family: "OCCModernTextVF";
  --wght: var(--wght);
  font-feature-settings: "smcp" 1;
  letter-spacing: 0.01em;
}

a.title, #about {
  cursor: pointer;
  text-decoration: none;
}
a.title:hover, #about:hover {
  color: var(--color-orange);
}

#title .subtitle {
  padding-left: calc(var(--pad-body) * 2);
}
@media (max-width: 414px) {
  #title .subtitle {
    padding-left: 0;
    display: block;
  }
}

.ligature {
  font-variant-ligatures: common-ligatures;
}

/*--------------------------------------------------------------*/
/* MAIN STRUCTURES & LAYOUTS ----------------------------------------*/
/*--------------------------------------------------------------*/
nav {
  max-width: var(--max-width);
  display: flex;
  margin: var(--pad) auto;
  justify-content: space-between;
}
@media (max-width: 1024px) {
  nav {
    position: fixed;
    margin: 0;
    top: var(--pad);
    width: calc(100% - var(--pad) * 2);
    z-index: 10;
  }
}

nav.inline {
  display: none;
  position: absolute;
  top: var(--inline-y);
  left: var(--inline-x);
  z-index: 100;
  cursor: move;
}
@media (max-width: 1024px) {
  nav.inline {
    display: block;
    position: fixed;
    left: 0;
    top: auto;
    bottom: 0;
    height: var(--height-nav);
    width: 100vw;
    margin: 0;
  }
}
@media (max-width: 640px) {
  nav.inline {
    left: 0;
  }
}
nav.inline.visible {
  display: block;
}
nav.inline .panel-wrapper {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: var(--gutter);
  grid-row-gap: var(--gutter);
  width: 100%;
  min-width: 420px;
  padding: 5px;
  border-radius: 4px;
  border: solid 1px var(--color-default);
  background-color: var(--color-bg);
  padding: 16px var(--pad) var(--pad-body) var(--pad);
}
@media (max-width: 1024px) {
  nav.inline .panel-wrapper {
    border: 0;
    border-top: solid 1px var(--color-default);
    border-radius: 0;
  }
}
nav.inline .panel-wrapper h3,
nav.inline .panel-wrapper h4 {
  color: var(--color-default);
  font-size: var(--xs-size);
  text-transform: uppercase;
  letter-spacing: 0rem;
  margin: 0.75em 0 0.75em 0;
}
nav.inline .panel-wrapper h4 {
  text-align: center;
  --wght:var(--wght);
}
@media (max-width: 640px) {
  nav.inline .panel-wrapper h4 {
    margin-top: 0.5em;
  }
}
nav.inline .panel-wrapper h3 {
  text-align: center;
}
nav.inline .panel-wrapper ul {
  display: flex;
}
nav.inline .panel-wrapper ul li {
  width: 50%;
}
nav.inline .panel-wrapper ul li:nth-child(2) {
  font-family: "OCCModernVFItalic";
}
nav.inline .panel-wrapper .sound {
  position: absolute;
  width: 34px;
  height: 32px;
  text-align: center;
  padding: 5px;
  right: 16px;
  border: solid 1px var(--color-default);
  border-radius: 20px;
  cursor: pointer;
}
@media (max-width: 1024px) {
  nav.inline .panel-wrapper .sound {
    top: 16px;
    right: var(--pad);
    height: 36px;
    padding: 7px;
  }
}
nav.inline .panel-wrapper .sound svg {
  stroke: var(--color-default);
  fill: var(--color-default);
}
nav.inline .panel-wrapper .sound.muted {
  --color-default: var(--color-default-lighter);
}
nav.inline [class^=btn_] {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  background-color: var(--color-grey-light);
  border-radius: 50%;
  height: 30px;
  width: 26px;
  border-radius: 4px;
  cursor: pointer;
}
nav.inline [class^=btn_]:hover {
  background-color: var(--grey-light);
}
nav.inline #nav_close {
  display: block;
  top: 28px;
  right: 13px;
  color: var(--color-default);
}
@media (max-width: 1024px) {
  nav.inline #nav_close {
    display: none;
  }
}
nav.inline .btn_autoplay, nav.inline .btn_reset, nav.inline .btn_audio {
  min-width: 100px;
  font-family: "OCCTabularBeta";
  font-size: var(--xs-size);
  text-transform: uppercase;
  letter-spacing: 0rem;
  position: relative;
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: var(--pad-xxs);
  padding: var(--pad-xs);
  border-radius: 20px;
  border: solid 1px var(--color-default);
  background-color: transparent;
}
@media (max-width: 1024px) {
  nav.inline .btn_autoplay, nav.inline .btn_reset, nav.inline .btn_audio {
    padding: var(--pad-xxs);
    margin-bottom: var(--pad-xs);
    width: 100%;
  }
}
@media (max-width: 640px) {
  nav.inline .btn_autoplay, nav.inline .btn_reset, nav.inline .btn_audio {
    margin-bottom: 0;
    min-width: 30px;
    width: auto;
  }
}
nav.inline .btn_autoplay svg, nav.inline .btn_reset svg, nav.inline .btn_audio svg {
  margin-right: calc(var(--pad-xxs) * 0.75);
}
@media (max-width: 1024px) {
  nav.inline .btn_autoplay svg, nav.inline .btn_reset svg, nav.inline .btn_audio svg {
    margin-right: calc(var(--pad-xxs) * 0.25);
  }
}
nav.inline .btn_autoplay svg .play, nav.inline .btn_reset svg .play, nav.inline .btn_audio svg .play {
  fill: var(--color-default);
}
nav.inline .btn_autoplay::after {
  content: "Play";
  color: vaR(--color-default);
}
nav.inline .btn_autoplay.active::after {
  content: "Stop";
  color: vaR(--color-bg);
}
nav.inline .btn_close {
  background-color: transparent;
}
nav.inline .btn_audio svg rect {
  fill: var(--color-default);
}
nav.inline .btn_audio .label::after {
  content: "Audio";
}
@media (max-width: 640px) {
  nav.inline .btn_audio {
    width: auto;
  }
}
nav.inline .btn_audio[aria-pressed=true] {
  background: #ff004c;
  border: #ff004c;
  color: var(--color-bg);
}
nav.inline .btn_audio[aria-pressed=true] svg rect {
  fill: var(--color-bg);
  stroke: var(--color-bg);
}
nav.inline .btn_audio[aria-pressed=true] svg path, nav.inline .btn_audio[aria-pressed=true] svg line {
  stroke: var(--color-bg);
}
nav.inline .btn_audio[aria-pressed=true] svg .label::after {
  content: "Stop";
}
nav.inline .btn_reset {
  margin-right: 0;
}
nav.inline .btn_reset .label::after {
  content: "Reset";
}
nav.inline .btns_variables {
  display: flex;
  padding: 0 0 var(--pad-xs) 0;
  border-bottom: var(--color-default-lighter) solid 1px;
  grid-column-start: 1;
  grid-column-end: 13;
  justify-content: space-around;
}
@media (max-width: 1024px) {
  nav.inline .btns_variables {
    position: relative;
    grid-column-start: 12;
    grid-column-end: 14;
    grid-row-start: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 23px;
    border-bottom: 0;
  }
}
@media (max-width: 640px) {
  nav.inline .btns_variables {
    grid-column-start: 1;
    grid-column-end: 9;
    grid-row-start: auto;
    display: flex;
    flex-direction: row;
    margin-top: 14px;
    justify-content: space-between;
  }
}
nav.inline [class^=btn_] svg path,
nav.inline [class^=btn_] svg rect,
nav.inline [class^=btn_] svg line,
nav.inline [class^=btn_] svg circle {
  stroke: var(--color-default);
}
nav.inline [class^=btn_] .label {
  color: var(--color-default);
}
nav.inline .drag-handle {
  width: 30px;
  height: 30px;
  color: var(--color-default);
  margin-top: 5px;
  margin-left: -15px;
  text-align: center;
}
@media (max-width: 1024px) {
  nav.inline .drag-handle {
    display: none;
  }
}

.btn_close {
  font-family: "OCCModernVF";
  font-size: 37px;
  line-height: 0;
  font-variation-settings: "wdth" 100, "wght" 200;
}

.drag-handle {
  grid-column-start: 1;
  grid-column-end: 2;
}

.panel-style {
  display: grid;
  grid-column-start: 2;
  grid-column-end: 11;
  padding-top: var(--pad-small);
}
.panel-style #typeface {
  grid-column-start: 1;
  grid-column-end: 2;
  height: 36px;
  border-radius: 18px;
  color: var(--color-default);
  background-color: var(--color-grey-light);
  border-color: var(--color-default);
}
.panel-style .style {
  grid-column-start: 3;
  grid-column-end: 6;
}
.panel-style input[type=radio] {
  display: none;
}
.panel-style label {
  display: block;
  width: 100%;
  height: 36px;
  text-align: center;
  color: var(--color-default);
  transition: background-color 0.3s;
  margin-bottom: 0;
  border: solid 1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--small-size);
}
.panel-style input[type=radio]:checked + label {
  background-color: var(--color-grey-light);
}
.panel-style li:first-child label {
  border-radius: 18px 0% 0% 18px;
  border-right: 0;
}
.panel-style li:nth-child(2) label {
  border-radius: 0% 18px 18px 0%;
}

.min, .max {
  width: 32px;
  text-align: center;
}

[data-axes=size] .min {
  font-size: 11px;
}

[data-axes] div {
  display: inline-block;
  text-align: center;
}

[data-axes=feedback] .dial-value {
  width: 111px;
}
@media (max-width: 1024px) {
  [data-axes=feedback] .dial-value {
    width: 100px;
  }
}
[data-axes=feedback] .dial-value::after {
  content: " Letters";
}

[data-axes=delay] .dial-value::after {
  content: "ms";
}
@media (max-width: 640px) {
  [data-axes=delay] {
    margin-top: 0.5em;
  }
}

.range {
  top: -4px;
  position: relative;
  -webkit-appearance: none;
  width: 70%;
  height: 1px;
  background: var(--color-default);
  outline: none;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

header, main {
  max-width: var(--max-width);
  margin: var(--pad-section) auto;
}
@media (max-width: 1400px) {
  header, main {
    max-width: 100%;
    padding: 0 var(--pad);
  }
}

header {
  margin: 0 auto;
}

@media (max-width: 1024px) {
  main {
    padding: calc(var(--pad-section) * 0.5) var(--pad);
    margin-bottom: var(--height-nav);
  }
}
@media (max-width: 640px) {
  main {
    margin-top: calc(var(--pad-section) * 2);
    padding: var(--pad-section) var(--pad);
  }
}
main p {
  font-size: var(--heading-size);
  line-height: var(--lineheight);
}
main p span {
  color: var(--color-default);
}
main blockquote p {
  font-size: var(--xlarge-size);
  line-height: var(--lineheight-large);
}
main blockquote p cite {
  padding-bottom: var(--pad-section);
  font-size: var(--medium-size);
  --wght: 500;
  line-height: 1.5;
  padding-top: var(--pad-sm);
}
main span:hover {
  cursor: pointer;
  background-color: var(--color-accent);
}
main span.active {
  background-color: var(--color-accent);
}

main p span {
  transition: font-variation-settings 260ms ease, background-color 240ms ease;
}

section {
  padding: var(--pad-section) 0;
  margin: 0;
}

/*--------------------------------------------------------------*/
/* FOOTNOTES ---------------------------------------------------*/
/*--------------------------------------------------------------*/
.footnote-ref {
  font-feature-settings: "liga" 0, "smcp" 0, "onum" 0, "tnum" 0, "lnum" 0, "calt" 0, "zero" 0;
  line-height: 0;
}
.footnote-ref a {
  color: var(--color-orange);
  text-decoration: none;
}
.footnote-ref a:hover {
  color: var(--color-default-lighter);
}

.footnotes {
  padding: 0;
}
.footnotes ::marker {
  font-size: var(--caption-size);
}
.footnotes p {
  font-size: var(--caption-size);
}
.footnotes .footnote-item {
  border: solid 1px red;
  display: none;
}

.footnote-backref {
  display: none;
}

#FNpopup {
  display: none;
  background-color: var(--color-bg);
  max-width: 500px;
  padding: var(--pad-sm);
  padding-right: calc(var(--pad-sm) * 1.8);
  border: solid 1px var(--color-default);
  border-radius: 3px;
  font-size: var(--caption-size);
  line-height: var(--lineheight-large);
}
#FNpopup.visible {
  display: block;
}
#FNpopup a {
  text-decoration: underline 1.2px;
}
#FNpopup a:hover {
  text-decoration: none;
}
#FNpopup em {
  font-family: "OCCModernTextVFItalic";
}

#FNclose {
  position: absolute;
  right: var(--pad-sm);
  top: var(--pad-sm);
  font-size: var(--medium-size);
  line-height: 0.8;
  cursor: pointer;
}

.fn-number {
  font-variation-settings: "wdth" var(--wdth), "wght" var(--wght-bold);
  color: var(--color-orange);
  padding-right: 1em;
  display: inline-block;
}

/*--------------------------------------------------------------*/
/* DIALS -------------------------------------------------------*/
/*--------------------------------------------------------------*/
.dials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: calc(var(--gutter) * 0.75);
}
.dial {
  --angle: 0deg;
  --angle-wobble: 0deg;
  position: relative;
  width: 100px;
  height: 100px;
  overflow: visible;
  border-radius: 9999px;
  border: 1px solid var(--color-default);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 16px 12px 0 12px;
  cursor: grab;
  outline: none;
  overflow: visible;
  /* needle */
}
@media (max-width: 1024px) {
  .dial {
    width: 85px;
    height: 85px;
  }
}
@media (max-width: 640px) {
  .dial {
    width: 80px;
    height: 80px;
    margin: 18px 12px 0 12px;
  }
}
.dial::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 50px;
  top: 6px;
  left: 50%;
  transform-origin: 50% calc(100% - 6px);
  transform: rotate(calc(var(--angle, -90deg) + var(--angle-wobble, 0deg)));
  background: var(--color-default);
  border-radius: 2px;
}
@media (max-width: 1024px) {
  .dial::after {
    height: 42.5px;
  }
}
@media (max-width: 640px) {
  .dial::after {
    height: 40px;
  }
}
.dial:focus-visible {
  box-shadow: 0 0 0 2px #222 inset;
}
.dial:active {
  cursor: grabbing;
}

[data-axes=feedback] .dial,
[data-axes=delay] .dial {
  width: 50px;
  height: 50px;
  margin: 8px 12px 8px 12px;
}
@media (max-width: 1024px) {
  [data-axes=feedback] .dial,
  [data-axes=delay] .dial {
    margin: 28px 12px 28px 12px;
  }
}
@media (max-width: 640px) {
  [data-axes=feedback] .dial,
  [data-axes=delay] .dial {
    width: 46px;
    height: 46px;
    margin: 0px 12px 32px 12px;
    margin-top: 0;
  }
}
[data-axes=feedback] .dial::after,
[data-axes=delay] .dial::after {
  height: 23px;
}
[data-axes=feedback] .dials,
[data-axes=delay] .dials {
  margin-bottom: 52px;
}
@media (max-width: 1024px) {
  [data-axes=feedback] .dials,
  [data-axes=delay] .dials {
    margin-bottom: 38px;
  }
}
[data-axes=feedback] .dial-value,
[data-axes=delay] .dial-value {
  margin-bottom: -42px;
}
@media (max-width: 1024px) {
  [data-axes=feedback] .dial-value,
  [data-axes=delay] .dial-value {
    margin-bottom: -60px;
  }
}
@media (max-width: 640px) {
  [data-axes=feedback] .dial-value,
  [data-axes=delay] .dial-value {
    margin-bottom: -32px;
  }
}

nav.inline input[type=range] {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
  padding: 0;
  margin: 0;
}

.dial-value {
  display: inline-block;
  position: absolute;
  bottom: 0;
  place-items: center;
  user-select: none;
  pointer-events: none;
  color: var(--color-default);
  margin-bottom: -38px;
  background-color: var(--color-grey-light);
  border-radius: 25px;
  padding: var(--pad-xxs);
  font-size: var(--xs-size);
  text-transform: uppercase;
}

.dials {
  margin-bottom: 38px;
}
@media (max-width: 640px) {
  .dials {
    margin-bottom: 26px;
  }
}

.dial-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
}

.dial-labels span {
  position: absolute;
  font-size: 10px;
  transform: translate(-50%, -50%);
  user-select: none;
}

/* ring labels */
.dial-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dial-tick {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--small-size);
}

.dial-tick > span {
  left: 0;
  top: 0;
  transform: rotate(var(--angle)) translate(var(--label-radius)) rotate(calc(var(--angle) * -1)); /* keep upright */
  transform-origin: 0 0;
  line-height: 1;
  font-family: "OCCModernVF", system-ui, sans-serif;
  font-variation-settings: "wght" var(--wght, 400), "wdth" var(--wdth, 100);
  color: var(--color-default);
  user-select: none;
  white-space: nowrap;
}

nav.inline .panel-wrapper.vertical {
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: calc(var(--gutter) * 0.5);
  grid-row-gap: calc(var(--gutter) * 0.5);
}
@media (max-width: 1024px) {
  nav.inline .panel-wrapper.vertical {
    height: var(--height-nav);
    grid-template-rows: 1fr 2fr 2fr;
    grid-template-columns: repeat(13, 1fr);
  }
}
@media (max-width: 640px) {
  nav.inline .panel-wrapper.vertical {
    grid-template-columns: repeat(12, 1fr);
  }
}
nav.inline .panel-wrapper.vertical .panel-style {
  grid-column-start: 2;
  grid-column-end: 12;
  grid-row-gap: calc(var(--gutter) * 0.5);
}
@media (max-width: 1024px) {
  nav.inline .panel-wrapper.vertical .panel-style {
    grid-column-start: 1;
    grid-column-end: 13;
    grid-column-gap: 18px;
  }
}
@media (max-width: 1024px) {
  nav.inline .panel-wrapper.vertical .panel-style {
    grid-column-start: 1;
    grid-column-end: 11;
    grid-column-gap: 26px;
  }
}
nav.inline .panel-wrapper.vertical .panel-style #typeface, nav.inline .panel-wrapper.vertical .panel-style .style {
  grid-column-start: 2;
  grid-column-end: 12;
}
@media (max-width: 1024px) {
  nav.inline .panel-wrapper.vertical .panel-style #typeface {
    grid-column-start: 1;
    grid-column-end: 7;
  }
}
@media (max-width: 640px) {
  nav.inline .panel-wrapper.vertical .panel-style #typeface {
    grid-column-end: 6;
  }
}
@media (max-width: 1024px) {
  nav.inline .panel-wrapper.vertical .panel-style .style {
    grid-column-start: 7;
    grid-column-end: 12;
  }
}
@media (max-width: 640px) {
  nav.inline .panel-wrapper.vertical .panel-style .style {
    grid-column-start: 6;
    grid-column-end: 11;
  }
}
nav.inline .panel-wrapper.vertical .panel-variables {
  margin-top: 0;
  padding-top: var(--pad-xxs);
  border-top: var(--color-default-lighter) solid 1px;
  grid-column-start: 1;
  grid-column-end: 13;
  text-align: center;
}
@media (max-width: 1024px) {
  nav.inline .panel-wrapper.vertical .panel-variables {
    grid-column-start: 1;
    grid-column-end: 6;
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
  }
}
@media (max-width: 640px) {
  nav.inline .panel-wrapper.vertical .panel-variables {
    grid-column-start: 1;
    grid-column-end: 9;
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
    grid-row-start: 2;
    grid-row-end: 3;
  }
}
nav.inline .panel-wrapper.vertical .panel-effects {
  grid-column-start: 2;
  grid-column-end: 12;
  padding-top: var(--pad-small);
  text-align: center;
}
@media (max-width: 1024px) {
  nav.inline .panel-wrapper.vertical .panel-effects {
    grid-column-start: 7;
    grid-column-end: 11;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  nav.inline .panel-wrapper.vertical .panel-effects .dials {
    display: grid;
  }
}
@media (max-width: 640px) {
  nav.inline .panel-wrapper.vertical .panel-effects {
    grid-column-start: 9;
    grid-column-end: 13;
    grid-row-start: 2;
    grid-row-end: 4;
  }
  nav.inline .panel-wrapper.vertical .panel-effects .dials {
    display: flex;
    flex-direction: column;
  }
}

#about {
  cursor: pointer;
}

.introduction {
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100vh;
  padding: var(--pad);
  padding-right: calc(var(--pad) + 60px);
  border-left: var(--color-default) 1px solid;
  -webkit-transform: translateX(50vw);
  -ms-transform: translateX(50vw);
  -o-transform: translateX(50vw);
  transform: translateX(50vw);
  transition: transform ease-in 0.2s;
  z-index: 300;
  overflow-y: auto;
  background-color: var(--color-bg);
}
@media (max-width: 1024px) {
  .introduction {
    padding-right: calc(var(--pad) + 30px);
    width: 60vw;
    -webkit-transform: translateX(60vw);
    -ms-transform: translateX(60vw);
    -o-transform: translateX(60vw);
    transform: translateX(60vw);
  }
}
@media (max-width: 640px) {
  .introduction {
    padding-right: calc(var(--pad) + 30px);
    width: 100vw;
    -webkit-transform: translateX(100vw);
    -ms-transform: translateX(100vw);
    -o-transform: translateX(100vw);
    transform: translateX(100vw);
    border-left: 0;
  }
}
.introduction #intro_close {
  position: absolute;
  right: var(--pad);
  top: var(--pad);
  line-height: 0.5;
  cursor: pointer;
}
.introduction.open {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.introduction p {
  line-height: var(--lineheight-large);
  padding-bottom: calc(var(--base-size) * var(--lineheight-large));
}

#menutoggle {
  position: fixed;
  display: none;
  background-color: var(--color-default);
  opacity: 0;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 200;
  transition: all ease-in 0.2s;
}
#menutoggle.open {
  display: block;
}

body.OCCModernTextVF [data-axes=wdth] {
  display: none;
}
body.OCCModernTextVF .panel-variables .dials {
  grid-template-columns: repeat(1, 1fr);
}

/*# sourceMappingURL=main.css.map */