@font-face {
	font-family: 'BerkeleyMono';
	src: url('/public/fonts/BerkeleyMonoVariable-Regular.ttf') format("truetype-variations");
	font-weight: 100 700;
}

@font-face {
	font-family: 'BerkeleyMono';
	src: url('/public/fonts/BerkeleyMonoVariable-Italic.ttf') format("truetype-variations");
	font-style: italic;
}

@font-face {
	font-family: 'Sono';
	src: url('/public/fonts/sono.ttf') format("truetype-variations");
	font-weight: 200 800;
}

@font-face {
  font-family: 'Recursive';
  font-style: oblique 0deg 15deg;
  font-weight: 300 1000;
  font-display: swap;
  src: url('/public/fonts/Recursive_VF_1.085--subset-GF_latin_basic.woff2') format('woff2');
}

:focus {
    position: relative;
    outline: 1px solid var(--root-theme, dodgerblue);
    outline-offset: 2px;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 2px solid var(--root-theme, dodgerblue);
}


:root {
	--bg: var(--white);
	--fg: var(--black);

  --border-radius: 0;
	--color-link: hsl(230, 60%, 50%);
	--color-link-visited: hsl(290, 60%, 50%);
	--color-link-hover: hsl(230, 80%, 60%);
	--color-link-active: hsl(350, 60%, 50%);

	--focus-outline: 2px solid var(--theme, dodgerblue);
	--focus-outline-offset: 2px;
  --font-size-root: 16px;
	--font-family: 'Recursive', 'Avenir', 'Avenir Next', 'Helvetica Neue', 'Segoe UI', 'Verdana', sans-serif;
	--font-mono: 'BerkeleyMono', 'Monaco', 'Courier New', monospace;
	--font-heading: var(--font-family);
	--font-body: var(--font-family);

  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 4px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 52px;

	--wheel-0-0: rgb(18.743% 0% 7.0869%);
	--wheel-0-1: rgb(40.087% 0% 19.73%);
	--wheel-0-2: rgb(63.259% 0% 33.406%);
	--wheel-0-3: rgb(88.12% 8.0492% 48.136%);
	--wheel-0-4: rgb(100% 35.66% 63.251%);
	--wheel-0-5: rgb(100% 66.628% 78.515%);
	--wheel-0-6: rgb(100% 91.673% 94.539%);
	--wheel-1-0: rgb(16.391% 1.0015% 0%);
	--wheel-1-1: rgb(38.926% 2.8895% 7.137%);
	--wheel-1-2: rgb(61.648% 11.164% 15.112%);
	--wheel-1-3: rgb(86.036% 19.742% 23.714%);
	--wheel-1-4: rgb(100% 38.269% 37.593%);
	--wheel-1-5: rgb(100% 67.774% 64.063%);
	--wheel-1-6: rgb(100% 92.035% 90.708%);
	--wheel-2-0: rgb(11.524% 5.0406% 0%);
	--wheel-2-1: rgb(31.187% 13.977% 0%);
	--wheel-2-2: rgb(51.999% 23.885% 0%);
	--wheel-2-3: rgb(73.591% 35.256% 0%);
	--wheel-2-4: rgb(96.295% 47.419% 0%);
	--wheel-2-5: rgb(100% 69.548% 42.687%);
	--wheel-2-6: rgb(100% 92.505% 85.933%);
	--wheel-3-0: rgb(8.7217% 6.439% 0%);
	--wheel-3-1: rgb(22.537% 18.664% 0%);
	--wheel-3-2: rgb(37.553% 31.871% 0%);
	--wheel-3-3: rgb(53.895% 46.085% 0%);
	--wheel-3-4: rgb(71.202% 61.136% 0%);
	--wheel-3-5: rgb(89.332% 76.904% 0%);
	--wheel-3-6: rgb(100% 93.739% 61.831%);
	--wheel-4-0: rgb(4.6192% 7.6793% 0%);
	--wheel-4-1: rgb(11.668% 21.513% 0%);
	--wheel-4-2: rgb(20.026% 36.342% 0%);
	--wheel-4-3: rgb(30.029% 52.199% 0%);
	--wheel-4-4: rgb(40.639% 68.988% 0%);
	--wheel-4-5: rgb(51.767% 86.573% 0%);
	--wheel-4-6: rgb(68.27% 100% 8.4038%);
	--wheel-5-0: rgb(0% 8.9604% 0%);
	--wheel-5-1: rgb(0% 22.837% 8.1914%);
	--wheel-5-2: rgb(0% 38.174% 16.179%);
	--wheel-5-3: rgb(0% 54.668% 24.894%);
	--wheel-5-4: rgb(0% 72.15% 34.05%);
	--wheel-5-5: rgb(0% 90.46% 43.66%);
	--wheel-5-6: rgb(61.83% 100% 74.298%);
	--wheel-6-0: rgb(0% 8.5926% 6.438%);
	--wheel-6-1: rgb(0% 22.329% 18.661%);
	--wheel-6-2: rgb(0% 37.433% 31.85%);
	--wheel-6-3: rgb(0% 53.658% 46.062%);
	--wheel-6-4: rgb(0% 70.849% 61.111%);
	--wheel-6-5: rgb(0% 88.854% 76.877%);
	--wheel-6-6: rgb(59.837% 100% 93.734%);
	--wheel-7-0: rgb(0% 8.3497% 9.3092%);
	--wheel-7-1: rgb(0% 21.823% 24.693%);
	--wheel-7-2: rgb(0% 36.674% 41.031%);
	--wheel-7-3: rgb(0% 52.636% 58.541%);
	--wheel-7-4: rgb(0% 69.541% 77.089%);
	--wheel-7-5: rgb(0% 87.244% 96.505%);
	--wheel-7-6: rgb(74.739% 98.786% 100%);
	--wheel-8-0: rgb(0% 8.0121% 12.217%);
	--wheel-8-1: rgb(0% 21.189% 30.537%);
	--wheel-8-2: rgb(0% 35.692% 49.876%);
	--wheel-8-3: rgb(0% 51.284% 70.525%);
	--wheel-8-4: rgb(0% 67.803% 92.437%);
	--wheel-8-5: rgb(42.18% 82.876% 100%);
	--wheel-8-6: rgb(86.502% 95.953% 100%);
	--wheel-9-0: rgb(0% 7.0569% 17.933%);
	--wheel-9-1: rgb(0% 19.75% 39.946%);
	--wheel-9-2: rgb(0% 33.482% 63.926%);
	--wheel-9-3: rgb(0% 48.269% 89.635%);
	--wheel-9-4: rgb(25.409% 63.433% 100%);
	--wheel-9-5: rgb(63.438% 78.632% 100%);
	--wheel-9-6: rgb(91.474% 94.538% 100%);
	--wheel-10-0: rgb(8.0676% 3.3149% 20.362%);
	--wheel-10-1: rgb(20.617% 14.503% 41.794%);
	--wheel-10-2: rgb(35.087% 25.901% 65.459%);
	--wheel-10-3: rgb(50.657% 38.199% 90.84%);
	--wheel-10-4: rgb(67.507% 53.901% 100%);
	--wheel-10-5: rgb(82.742% 73.346% 100%);
	--wheel-10-6: rgb(96.197% 93.051% 100%);
	--wheel-11-0: rgb(16.202% 0% 14.766%);
	--wheel-11-1: rgb(34.575% 5.1914% 32.252%);
	--wheel-11-2: rgb(55.161% 13.775% 51.628%);
	--wheel-11-3: rgb(77.262% 22.858% 72.437%);
	--wheel-11-4: rgb(100% 32.449% 94.429%);
	--wheel-11-5: rgb(100% 64.101% 98.597%);
	--wheel-11-6: rgb(100% 91.07% 100%);

  --v-font-mono: 0;
  --v-font-casl: 0.5;
  --v-font-wght: 400;
  --v-font-slnt: 0;
  --v-font-crsv: 0.5;

  /* cutestrap variables */
  --border-radius: 0;
  --color-primary-tint1: dodgerblue;
  --color-primary: mediumseagreen;
  --color-primary-shade1: mediumpurple;
  --color-accent-tint1: hsl(170, 80%, 60%);
  --color-accent: hsl(170, 80%, 45%);
  --color-accent-shade1: hsl(170, 80%, 35%);
  --color-link: hsl(230, 60%, 50%);
  --color-link-visited: hsl(290, 60%, 50%);
  --color-link-hover: hsl(230, 80%, 60%);
  --color-link-active: hsl(350, 60%, 50%);
  --color-neutral-tint4: hsl(170, 10%, 98%);
  --color-neutral-tint3: hsl(170, 10%, 94%);
  --color-neutral-tint2: hsl(170, 10%, 85%);
  --color-neutral-tint1: hsl(170, 10%, 68%);
  --color-neutral: hsl(170, 10%, 55%);
  --color-neutral-shade1: hsl(170, 10%, 41%);
  --color-neutral-shade2: hsl(170, 10%, 30%);
  --color-neutral-shade3: hsl(170, 10%, 18%);
  --color-neutral-shade4: hsl(170, 10%, 2%);
  --focus-outline: 1px solid var(--root-theme, black);
  --focus-outline-offset: 2px;
  --font-heading: var(--font-family);
}


@media (prefers-color-scheme: dark) {
	:root {
		--bg: var(--black);
		--fg: var(--white);
	}
}

* {
	text-rendering: geometricPrecision;
	box-sizing: border-box;
	transition: font-variation-settings 500ms ease-in-out;

  /* cutestrap */
  --rhythm: 2rem;
  --rhythm-quadruple: calc(4 * var(--rhythm));
  --rhythm-triple: calc(3 * var(--rhythm));
  --rhythm-double: calc(2 * var(--rhythm));
  --rhythm-half: calc((1/2) * var(--rhythm));
  --rhythm-third: calc((1/3) * var(--rhythm));
  --rhythm-fourth: calc((1/4) * var(--rhythm));
  --rhythm-sixth: calc((1/6) * var(--rhythm));
  --rhythm-eighth: calc((1/8) * var(--rhythm));
  --rhythm-twelfth: calc((1/12) * var(--rhythm));
  --rhythm-sixteenth: calc((1/16) * var(--rhythm));
  --line-height: 1.5;
  --font-size: var(--font-size-root);
}

html {
  font-family: 'Recursive';
	overflow-x: hidden;
}

html,
body {
	box-sizing: border-box;
  height: 100%;
	min-height: 100%;
}

body {
  font-size: var(--font-size-root);
  line-height: var(--line-height);
	font-family: var(--font-body);
  position: relative;
  overflow: hidden;
}

iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

a:link {
	color: var(--color-link);
}

a:visited {
	color: var(--color-link-visited);
}

a:hover,
a:focus {
	color: var(--color-link-hover);
}

a:active {
	color: var(--color-link-active);
}

img,
video,
svg{
  height: auto;
  max-height: 100%;
	max-width: 100%;
	vertical-align: top;
}

hr {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, .15);
	width: 100%;
}

menu-resource {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
}

menu-user {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 1rem;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

.button {
  --border-color: transparent;
  --border-color-hover: transparent;
  --background-color: dodgerblue;
  --background-color-hover: rebeccapurple;
  --text-color: rgba(255,255,255,.85);
  --text-color-hover: white;

  align-items: center;
  align-content: center;
  background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.5));
  background-color: var(--background-color);
  border: var(--border-thickness) solid var(--border-color);
  border-radius: var(--border-radius);
  box-sizing: border-box;
  color: var(--text-color);
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  justify-content: center;
  line-height: 1rem;
  max-width: 100%;
  min-height: 2rem;
  padding: 1rem;
  text-align: center;
  transition-duration: 250ms;
  transition-property: all;
  user-select: none;
  width: auto;
  vertical-align: middle;
  font-size: 1rem;
}

.button::-moz-focus-inner {
	border: 0;
}

.button:link,
.button:visited {
	color: var(--text-color);
	text-decoration: none;
}

.button:focus,
.button:hover {
	background-color: var(--background-color-hover);
	border-color: var(--border-color-hover);
	color: var(--text-color-hover);
}

.button:active {
	background-color: var(--background-color);
	color: var(--text-color);
}

.button:disabled {
	opacity: .5;
	pointer-events: none;
}

.button--outlined {
	--background-color: transparent;
	--background-color-hover: var(--color-primary-shade1);
	--border-color: var(--color-primary);
	--border-color-hover: var(--color-primary-shade1);
	--text-color: var(--color-primary);
}

.button--secondary {
	--background-color: var(--color-neutral-tint2);
	--background-color-hover: var(--color-neutral-tint1);
	--border-color: var(--color-neutral-tint2);
	--border-color-hover: var(--color-neutral-tint1);
	--text-color: var(--color-neutral-shade3);
	--text-color-hover: var(--color-neutral-shade3);
}

.button--link {
	--background-color: transparent;
	--background-color-hover: transparent;
	--border-color: transparent;
	--border-color-hover: transparent;
	--text-color: var(--color-link);
	--text-color-hover: var(--color-link-hover);

	text-decoration: underline;
}

.button--block {
	display: block;
	width: 100%;
}

.button--small {
	--border-thickness: 1px;

	font-size: .75rem;
	line-height: 1rem;
	min-height: 1rem;
	padding: .5rem;
}

.button--large {
	--border-thickness: 6rem;

	font-size: 1.25rem;
	line-height: 1.5rem;
	min-height: 3rem;
	padding: 1rem 2rem;
}

.nonce {
  background: lemonchiffon;
  border: none;
  border-radius: none;
  max-width: 10rem;
  max-height: 10rem;
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
  position: relative;
  min-height: 1rem;
  min-width: 1rem;
  display: inline-block;
}

.nonce::before {
  position: absolute;
  inset: 0%;
  content: '';
  display: block;
  width: 60%;
  aspect-ratio: 1;
  background-color: #E83FB8;
  border-radius: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.nonce:hover,
.nonce:focus{
  background-color: #E83FB8;
}

.nonce:hover::before,
.nonce:focus::before{
  background-color: lemonchiffon;
}


.actions {
  z-index: 10;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: none;
}

@media screen {
  .actions {
    display: flex;
  }
}

.actions .menu-item {
  position: relative;
  max-height: 100%;
}

.actions .menu-item.disabled {
  filter: grayscale(1);
  opacity: .5;
  pointer-events: none;
}

.actions .menu-actions {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(100%);
}

.actions [data-menu-target].active + .menu-actions {
  display: block;
}

.actions .menu-actions  button {
  width: 100%;
  text-align: left;
  white-space: nowrap;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  padding: .5rem;
  gap: .5rem;
  text-align: left;
  display: block;
}



.actions button {
  background: lemonchiffon;
  color: saddlebrown;
  border: none;
  padding: .5rem;
  font-size: 1rem;
  --v-font-mono: 1;
  --v-font-casl: 0;
  --v-font-wght: 400;
  --v-font-slnt: 0;
  --v-font-crsv: 0;
  font-variation-settings: "MONO" var(--v-font-mono), "CASL" var(--v-font-casl), "wght" var(--v-font-wght), "slnt" var(--v-font-slnt), "CRSV" var(--v-font-crsv);
  font-family: "Recursive";
  transition: background 200ms ease-in-out;
}

.actions button:focus,
.actions button.active,
.actions button:hover {
  color: #fff;
}

.toolbelt-actions {
  z-index: 10;
  background: transparent;
  position: absolute;
  bottom: 0;
  right: 0;
  display: none;
  max-width: 100%;
  width: 100%;
}


.field [disabled] + *,
[disabled] {
	cursor: default;
	opacity: .5;
	pointer-events: none;
}

.field {
	display: block;
	margin-bottom: 1rem;
	position: relative;
	text-align: left;
}

.field .label {
	z-index: 2;
  padding: .25rem;
  font-size: .9rem;
  line-height: 1rem;
  display: inline-block;
  background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,.5) 100%), lightgray;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.2),
              0 1px 2px 2px rgba(0,0,0,.1);
  border-radius: 3px;
  position: relative;
  left: .25rem;
  color: rgba(0,0,0,.65);
  letter-spacing: 1px;
}

.field [type=checkbox] + .label,
.field [type=radio] + .label {
	cursor: pointer;
	display: inline-block;
	padding: .25rem .25rem .25rem 1.5rem;
}

.field *:not([type=radio]):not([type=checkbox]) + .label {
	line-height: 1;
	padding: 0 .5rem .5rem;
}

.field input,
.field textarea,
.field select {
	background-color: var(--color-neutral-tint4);
	border-radius: var(--border-radius);
	box-sizing: border-box;
  color: rgba(0, 0, 0, .85);
  font-size: 1.1rem;
	margin-top: -2px;
	padding: .5rem;
	position: relative;
	width: 100%;
  padding: .25rem .5rem;
  border-radius: 5px;
  border: none;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),
              0 1px 3px 3px rgba(0,0,0,.05);
  border-bottom: 3px solid rgba(0,0,0,.2);
  z-index: 2;

}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-bottom-color: rgba(0,0,0,.4);
}

.field select + .label::after {
	content: '';
	border-left: .25rem solid transparent;
	border-right: .25rem solid transparent;
	border-top: .25rem solid var(--color-neutral-shade1);
	bottom: -.75rem;
	height: 0;
	pointer-events: none;
	position: absolute;
	right: .5rem;
	width: 0;
}

.field option[disabled] {
	background-color: var(--color-neutral-tint3);
	color: var(--color-neutral-shade2);
}

.field.-inline {
	display: inline-block;
	margin-right: .5rem;
  margin-bottom: .5rem;
}

.field [type=checkbox],
.field [type=radio] {
	opacity: 0;
	position: absolute;
	z-index: 0;
}

.field [type=checkbox] + .label::before,
.field [type=radio] + .label::before {
	background-color: white;
	border: 2px solid rgba(0,0,0,.35);
	content: '';
	height: 12px;
	left: 3px;
	position: absolute;
	top: 3px;
	transform: translateY(1px);
	width: 12px;
}

.field [type=checkbox] + .label::after,
.field [type=radio] + .label::after {
	background-color: var(--root-theme, mediumseagreen);
	border: 2px solid transparent;
	color: var(--color-neutral-tint4);
	height: 6px;
	left: 6px;
	position: absolute;
	top: 6px;
	transform: translateY(1px);
	width: 6px;
}

.field [type=checkbox] + .label::before {
	border-radius: 3px;
}
.field [type=checkbox] + .label::after {
	border-radius: 1px;
}

.field [type=radio] + .label::before,
.field [type=radio] + .label::after {
	border-radius: 1rem;
}

.field [type=radio]:focus + .label::before,
.field [type=checkbox]:focus + .label::before {
	outline: var(--focus-outline);
	outline-offset: var(--focus-outline-offset);
}

.field [type=checkbox]:checked + .label::before,
.field [type=radio]:checked + .label::before {
	border: 2px solid rgba(0,0,0,.65);
}



.field [type=checkbox]:checked + .label::after,
.field [type=radio]:checked + .label::after {
	content: '';
}

.field textarea {
	margin-top: 0;
	min-height: 4rem;
}
.visually-hidden {
	position: absolute !important;
	height: 1px; 
	width: 1px;
	overflow: hidden;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap; /* added line */
}

.markdown {
  max-width: 6in;
  margin: 0 auto;
  padding: 1in 1rem;
}

.darkroom {
  background: #54796d;
  height: 100%;
  overflow: auto;
}

.screenplay {
  background: white;
  margin: auto;
  color: rgba(0,0,0,.85);
  font-size: 12pt;
  font-family: courier;
  padding: 1in 1rem;
  position: relative;
  min-height: 100%;
}
@media (min-width: 768px) {
  .screenplay {
    max-width: 8.5in;
    padding: 1in 1in 1in 1.5in;
  }
}
@media print {
  .screenplay {
    max-width: 8.5in;
    padding: 1in 1in 1in 1.5in;
  }
}



.screenplay xml-html {
  overflow: auto;
  max-height: 100%;

}
.screenplay xml-html { display: block; overflow: auto; }
sillonious-brand > xml-html {
  height: 100%;
}

.screenplay xml-html > a {
  display: block;
  margin: 1rem 0;
}

.call-to-action {
  background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.5));
  background-color: dodgerblue;
  text-shadow: 1px 1px rgba(0,0,0,.85);
  border: none;
  border-radius: 1rem;
  color: white;
  transition: background-color 200ms ease-in-out;
  padding: 1rem;
  width: 100%;
  max-width: 320px;
  margin: 1rem auto;
  display: block;
}

.call-to-action:hover,
.call-to-action:focus {
  background-color: rebeccapurple;
}


.file-reference .interactive-directory,
.file-reference .interactive-file {
  background: lemonchiffon;
  color: saddlebrown;
  border: none;
  border-radius: 0;
  display: grid;
  place-items: center;
}


.nonce {
  background: lemonchiffon;
  border: none;
  border-radius: none;
  box-shadow: var(--shadow);
  max-width: 10rem;
  aspect-ratio: 1;
  width: 100%;
  position: relative;
  min-height: 1rem;
  min-width: 1rem;
  box-shadow: none;
}

.nonce::before {
  position: absolute;
  inset: 0%;
  content: '';
  display: block;
  width: 60%;
  aspect-ratio: 1;
  background-color: #E83FB8;
  border-radius: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.card {
  padding: 0;
  pointer-events: all;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  display: block;
  width: 2.5in;
  height: 3.5in;
  line-height: 1;
  border: none;
  background: transparent;
  border-radius: .25in;
}

.frontside,
.backside {
  height: 100%;
  width: 100%;
  box-shadow: 0 0 4px 1px lemonchiffon;
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  border-radius: .25in;
  box-sizing: border-box;
  backface-visibility: hidden;
  opacity: .9999;
  overflow: hidden;
}

.frontside {
  background: lemonchiffon;
  color: rgba(255,255,255,.85);
  border: .05in solid var(--color);
  padding: .05in;
  transform: rotateY(180deg);
  background-blend-mode: multiply;
  display: grid;
  place-items: center;
}

.backside {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  background: lemonchiffon;
  z-index: 1;
  transform: rotateY(0deg);
}

.card:hover > .frontside,
.card:focus > .frontside,
.card.active > .frontside {
  pointer-events: none;
  transform: rotateY(0deg);
  opacity: 1;
}

.card:hover > .backside,
.card:focus > .backside,
.card.active > .backside {
  transform: rotateY(180deg);
}

.card.spin {
  animation: spin 10000ms linear infinite alternate-reverse;
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }

  1% {
    transform: rotateY(180deg);
  }

  50% {
    transform: rotateY(180deg);
  }

  51% {
    transform: rotateY(360deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

.deck {
  white-space: nowrap;
  transform: translateX(var(--hand-offset));
  transition: transform 100ms ease-in-out;
  position: absolute;
  left: calc(50% - 1.25in);
  bottom: 0;
  z-index: 3;
}

.deck .sleeve {
  display: inline-block;
  width: .5in;
}

.deck .card {
  transform: translateY(6rem);
  transition: transfokm 250ms ease-in-out;
}

.deck .card.active {
  transform: translateY(0);
  z-index: 2;
  position: relative;
}

.mega-footer {
  padding: 1rem 0;
}

.mega-footer-header {
  font-size: 1.5rem;
  padding: 0 .5rem;
  font-weight: bold;
}

.mega-footer-section {
  padding: 0 .5rem;
}

.mega-footer-title {
  padding: .5rem 0 4px;
  color: rgba(0,0,0,.5);
}

.mega-footer-list {
  overflow: auto;
  flex-wrap: wrap;
  display: flex;
  gap: .5rem;
  padding: 0 0 .5rem;
}

.mega-footer-item {
  display: inline-block;
}

.old-button:link {
  display: inline-block;
}
.old-button:link,
.old-button:visited {
  background: rgba(0,0,0,.1);
  border: 2px solid;
  border-top-color: rgba(255,255,255,.5);
  border-left-color: rgba(255,255,255,.5);
  border-bottom-color: rgba(0,0,0,.5);
  border-right-color: rgba(0,0,0,.5);
  text-decoration: none;
  padding: .25rem .5rem;
  color: rgba(0,0,0,.85);
}

.old-button:hover,
.old-button:focus {
  background: rgba(0,0,0,.2);
}

.old-button:active {
  text-decoration: none;
  background: rgba(0,0,0,.4);
  border-bottom-color: rgba(255,255,255,.5);
  border-right-color: rgba(255,255,255,.5);
  border-top-color: rgba(0,0,0,.5);
  border-left-color: rgba(0,0,0,.5);
}

.av.-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  background: rgba(0,0,0,.85);
  color: rgba(255,255,255,.65);
  gap: .5rem;
  padding: .5rem;
}

.av.-snapshot {
  color: rgba(0,0,0,.65);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem;
}

.av.-chip {
  color: rgba(0,0,0,.65);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem;
  border-radius: .5rem;
}

.av.-banner .av-cta {
  place-self: center;
}

.av-title {
  font-weight: 1000;
}

.av.-chip .av-title {
  font-weight: 100;
}

.av-description {
  font-weight: 100;
}

.field input,
.field textarea,
.field select,
.standard-button,
.standard-input,
::part(button) {
  background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,.5) 100%), var(--root-theme, mediumseagreen);
  pointer-events: all;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.1),
              0 1px 2px 2px rgba(0,0,0,.05);
  background-size: 1px 100%;
  background-repeat: repeat-x;
  font-weight: 400;
  padding: .5rem;
  transition: background 200ms ease-in-out;
  line-height: 1.25;
  border: none;
  padding: .5rem;
  color: rgba(0,0,0,.85);
  border-bottom: 3px solid var(--root-theme, mediumseagreen);
  text-decoration: none;
  display: inline-grid;
  border-radius: 5px;
  place-items: center start;
}

.field input,
.field textarea,
.field select,
.standard-input {
  background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,.5) 100%), lightgray;
}

.field input:active,
.field textarea:active,
.field select:active,
.standard-button:active,
.standard-button.active,
.standard-input:active {
  border-top: 3px solid rgba(255,255,255,.25);
  border-bottom: none;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.1) inset,
              0 1px 2px 2px rgba(0,0,0,.05) inset;
}

.standard-button.bias-positive {
  --root-theme: var(--green, mediumseagreen);
}

.standard-button.bias-link {
  --root-theme: var(--blue, dodgerblue);
}

.standard-button.bias-generic {
  --root-theme: dimgray;
}

.standard-button.bias-negative {
  --root-theme: var(--red, firebrick);
}


.standard-button:link,
.standard-button:visited {
  color: rgba(0,0,0,.85);
}

.standard-button:hover,
.standard-button:focus,
.standard-button.active,
.standard-button:active {
  color: rgba(255,255,255,.85);
  background: linear-gradient(rgba(255,255,255,.5) 0%, rgba(0,0,0,.25) 100%), var(--root-theme, mediumseagreen);
}

.standard-button.active,
.standard-button:active {
  color: rgba(0,0,0,.85);
  background: linear-gradient(rgba(255,255,255,.85) 0%, rgba(255,255,255,.85) 100%), var(--root-theme, mediumseagreen);
  border-color: rgba(0,0,0,.85);
}

.standard-input:active {
  color: rgba(0,0,0,.85);
  border-color: rgba(0,0,0,.85);
  background: linear-gradient(rgba(255,255,255,.85) 0%, rgba(255,255,255,.85) 100%), lightgray;
}


.field input,
.field textarea,
.field select,
.standard-input {
  width: 100%;
  padding: .25rem .5rem;
  border-radius: 5px;
  border: none;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),
              0 1px 3px 3px rgba(0,0,0,.05);
  border-bottom: 3px solid rgba(0,0,0,.2);
  line-height: 1.25;
  resize: none;
  place-items: center start;
}

.standard-button * {
  pointer-events: none;
}

.standard-input:focus {
  border-bottom-color: rgba(0,0,0,.4);
}

.standard-input.-small,
.standard-button.-small {
  padding: .25rem .5rem;
  font-size: 1rem;
}

.standard-input.-large,
.standard-button.-large {
  padding: .75rem;
  font-size: 1.25rem;
}


.standard-input.-smol,
.standard-button.-smol,
.old-button.-smol {
  padding: 2px 4px;
  font-size: 13px;
  font-weight: normal;
}

.standard-input.-stealth,
.standard-button.-stealth,
.old-button.-stealth {
  background: white;
  border-bottom-color: rgba(0,0,0,.05);
}

.standard-button.-stealth:hover,
.standard-button.-stealth:focus,
.standard-button.-stealth.active,
.standard-button.-stealth:active {
  color: rgba(255,255,255,.85);
  background: linear-gradient(rgba(255,255,255,.5) 0%, rgba(0,0,0,.25) 100%), var(--root-theme, mediumseagreen);
}

.standard-button.-soft {
  border-radius: .5rem;
}
.standard-button.-round {
  border-radius: 100%;
  aspect-ratio: 1;
}

.button-container {
  display: flex;
  gap: .5rem;
}

.wizard {
  margin: 0 auto;
  max-width: 480px;
  padding: 3rem .5rem 3rem;
}

.form-title {
  margin-top: 2rem;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.form-subtitle {
  margin-top: 2rem;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.form-description {
  margin-bottom: 1rem;
}