@charset "UTF-8";
*, ::after, ::before {
  box-sizing: border-box;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  position: relative;
}

div {
  border-color: currentColor;
}

blockquote, body, button, dd, dl, figcaption, figure, h1, h2, h3, h4, input, li, ol, p, ul {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation-duration: 0s !important;
            animation-duration: 0s !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
  }
}
.inset, :after, :before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

:after, :before {
  pointer-events: none;
}

.wrapper, article, section {
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0.75rem 2px;
}

.wrapper > * + *, article > * + *, footer > * + *, main header > * + *, section > * + * {
  margin-top: 1rem;
}

#tada-text, .block, .checkbox, .label-input, blockquote, figure, h1, h2, h3, h4, li, p, table {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 35rem;
  position: relative;
}

.action-button {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
  max-width: 35rem;
  position: relative;
}

.inline {
  display: initial;
  margin: initial;
  width: auto;
}

#tada-text, .center, .checkbox .check, .dropdown > label .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

footer {
  padding-top: 2.36rem;
}

ol, ul {
  padding: 0;
}

.inset {
  max-width: none;
}

:root {
  --t:#111;
  --g:#fff;
  --b:#F8F5F2;
  --ba:#F1EAE4;
  --s:#E2D7CA;
  --bo:#dcb;
  --bs:#ba9;
  --u:#acd;
  --uh:#9bd;
  --ut:#001;
  --ub:transparent;
  --ib:#acd;
  --it:#000;
  --i:#fff;
  --a:#e98;
  --ah:#e87;
  --at:#100;
  --ab:transparent;
  --as:#d54;
  --f:#31a ;
}

@media (prefers-color-scheme: dark) {
  :root {
    --t:#edd;
    --g:#433D3E;
    --b:#2D2A2A;
    --ba:#322E2F;
    --s:#231D1E;
    --bo:#181616;
    --bs:#000;
    --ib:#d82;
    --it:#fff;
    --i:#3D4340;
    --u:#d82;
    --uh:#c82;
    --ut:#000;
    --f:#fc4 ;
  }
}
body {
  background: #f1eae4;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #322e2f;
  }
}
* #dark:checked ~ * {
  --t:#edd;
  --t:#edd;
  --g:#615656;
  --b:#413A3A;
  --ba:#473F3F;
  --s:#322929;
  --bo:#221C1C;
  --bs:#000;
  --ib:#d82;
  --it:#fff;
  --i:#3D4340;
  --u:#d82;
  --uh:#c82;
  --ut:#000;
  --f:#EECC53 ;
}

@media (prefers-color-scheme: dark) {
  * #dark:checked ~ * {
    --t:#111;
    --g:#fff;
    --b:#F8F5F2;
    --ba:#F1EAE4;
    --s:#E2D7CA;
    --bo:#dcb;
    --bs:#ba9;
    --ib:#acd;
    --it:#000;
    --i:#fff;
    --u:#acd;
    --uh:#9bd;
    --ut:#001;
    --f:#31a ;
  }
}
#vegas:checked ~ * {
  --t:#FFF;
  --g:#064;
  --b:#004a3b;
  --ba:#054;
  --s:#043;
  --bo:#eff;
  --u:#912;
  --uh:#812;
  --ut:#fff;
  --ib:#912;
  --i:#043;
  --it:#fff;
  --a:#ea2;
  --ah:#e90;
  --at:#000;
  --as:#b61;
  --f:#fff ;
}

#party:checked ~ * {
  --t:#000;
  --g:#FDC3C9;
  --b:#FDA7AF;
  --ba:#FC9CA5;
  --s:#FA8995;
  --bo:#f78;
  --bs:#e46;
  --u:#63E3D4;
  --uh:#4dc;
  --ut:#000;
  --ub:transparent;
  --i:#FED7DB;
  --it:#000;
  --ib:#63E3D4;
  --a:#bdceeb;
  --ah:#A1B9E2;
  --at:#000;
  --as:#638BCF;
  --f:#018 ;
}

#dd:checked ~ * {
  --t:#DDCCBB;
  --g:#561D25;
  --b:#2E0F13;
  --ba:#270D10;
  --s:#17080A;
  --bo:#4D1920;
  --sh:#000;
  --u:#ba6;
  --uh:#a94;
  --ut:#000;
  --i:#ddc;
  --it:#000;
  --ib:#ba6;
  --a:#D0C7B3;
  --ah:#C9BEA6;
  --at:#600;
  --as:#65593E;
  --f:#eba ;
}

#hc:checked ~ * {
  --t:#fff;
  --g:#000;
  --b:#000;
  --ba:#000;
  --s:#000;
  --bo:#fff;
  --bs:#000;
  --u:#000;
  --uh:#000;
  --ub:#ff0;
  --ut:#fff;
  --ib:#ff0;
  --it:#fff;
  --i:#000;
  --a:#000;
  --ah:#000;
  --ab:#f0f;
  --at:#f0f;
  --as:#f0f;
  --f:#0f0 ;
}

#hc:checked ~ * ::-moz-selection {
  color: #000;
  background: #fff;
}

#hc:checked ~ * ::selection {
  color: #000;
  background: #fff;
}

#hc:checked ~ * a {
  color: #0ff;
  -webkit-text-decoration-style: solid;
          text-decoration-style: solid;
}

#hc:checked ~ * .header-box {
  padding-left: 0;
}

.bg-base {
  background: #fff;
}

.bg-base-alt {
  background: #fff;
}

.bg-glare {
  background: #fff;
}

.bg-shade {
  background: #fff;
}

.fill-shade {
  fill: #e2d7ca;
  fill: var(--s);
}

.fill-base {
  fill: #f8f5f2;
  fill: var(--b);
}

.fill-glare {
  fill: #fff;
  fill: var(--g);
}

.stroke-text {
  stroke: #111;
  stroke: var(--t);
}

:root {
  line-height: 1.5;
  font-size: 16px;
  font-size: clamp(12px, 2vw, 18px);
}

.font-base, :root, code {
  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
}

.font-text, .text-content li, .text-content p {
  font-family: BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}

h1 {
  font-size: 2.36rem;
}

a {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  color: #111;
  color: var(--t);
}

a:hover {
  -webkit-text-decoration: underline solid;
          text-decoration: underline solid;
}

.text-content {
  padding: 3.15rem 0.75rem;
  width: 100%;
  background: #f8f5f2;
  background: var(--b);
}

.text-content > * {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.text-content > * + h2, .text-content > * + h3, .text-content > * + h4 {
  margin-top: 3.15rem;
}

.text-content ul {
  list-style: none;
  padding: 0;
}

code {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: #f1eae4;
  background: var(--ba);
  padding: 0.1em 0.2em;
  font-size: 0.75rem;
  border-radius: 4px;
}

pre code {
  display: block;
  white-space: pre;
  overflow-x: scroll;
}

table {
  display: table;
  border-collapse: collapse;
  border-style: hidden;
}

th {
  text-align: left;
}

table td, table th {
  border-top: solid 2px #f1eae4;
  border-top: solid 2px var(--ba);
  padding: 4px 8px 4px 0;
}

.input, input, textarea {
  border: solid 2px #000;
  border: solid 2px var(--ib);
  box-shadow: inset 0 2px #dcb, 0 2px #dcb;
  box-shadow: inset 0 2px var(--bs), 0 2px var(--bs);
  background: #fff;
  background: var(--i);
  color: #000;
  color: var(--it);
  font-size: 1rem;
  border-radius: 4px;
  padding: 0.42rem;
  margin: 0;
}

.label-input {
  padding: 0.56rem;
  background: #f1eae4;
  background: var(--ba);
  border: solid 2px #ba9;
  border: solid 2px var(--bo);
  border-radius: 6px;
}

.checkbox label, .label-input label {
  margin-right: auto;
  cursor: pointer;
}

.hint {
  font-size: 0.75rem;
  display: block;
}

#dark:focus ~ * #dark-label, #dd:focus ~ * #dd-label, #hc:focus ~ * #hc-label, #light:focus ~ * #light-label, #party:focus ~ * #party-label, #vegas:focus ~ * #vegas-label, .checkbox:focus-within, .focus, .label-input:focus-within, :focus, input[type=checkbox]:focus + label {
  outline: 2px dashed #31a;
  outline: 2px dashed var(--f);
  outline-offset: 2px;
  z-index: 100;
}

.site-head {
  padding: 4px 0.56rem 4px 4px;
  background: var(--head);
  display: flex;
  background: #f1eae4;
  background: var(--ba);
  border-bottom: dotted 2px #ba9;
  border-bottom: dotted 2px var(--bo);
  gap: 1em;
}

.site-head a {
  display: inline-flex;
  align-items: center;
  color: var(--t);
  height: 3.15rem;
  font-size: 1rem;
  margin-top: 3px;
}

.site-head a svg {
  height: 3.15rem;
  margin: 0 4px 0 0;
}

.site-head a:first-child {
  margin-right: auto;
}

@media (prefers-color-scheme: dark) {
  .dark-mode-hide {
    display: none;
  }
}
.light-mode-hide {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .light-mode-hide {
    display: initial;
  }
}
@media (max-width: 420px) {
  .mobile-hide {
    display: none !important;
  }
}
#tada-text, .center, .checkbox .check, .dropdown > label .icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-self {
  margin-left: auto;
  margin-right: auto;
}

.full {
  width: 100%;
}

.control-box > * + *, .flow > * + *, .hidden-items > * + *, .text-content > * + * {
  margin-top: 1rem;
}

.column {
  display: flex;
  flex-direction: column;
}

.grow {
  flex-grow: 1;
}

.action-button > *, .pattern > * {
  position: relative;
  z-index: 1;
}

.action-button:before, .pattern:before {
  content: "";
  background-color: #e2d7ca;
  background-color: var(--set, var(--s));
  position: absolute;
  display: block;
  z-index: 0;
  max-width: none;
}

.action-button:before, .stripes:before {
  --stripes:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpattern id='s' width='4' height='4' viewBox='0 0 4 4' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Cpath d='M -1 2 h6 v2 h-6z'/%3E%3C/pattern%3E%3Crect fill='url(%23s)' height='100%25' width='100%25'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--stripes);
  mask-image: var(--stripes);
}

.pin-stripes:before {
  --pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='e' width='4' height='4' viewBox='0 0 8 8' patternUnits='userSpaceOnUse' patternTransform='rotate(45) '%3E%3Cpath fill='%23E1DACB' d='M -1 2 h9 v2 h-9z'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23e)' height='100%25' width='100%25'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--pin);
  mask-image: var(--pin);
}

.hide {
  display: none;
}

.h-borders {
  border-top: solid 1px var(--set, var(--s));
  border-bottom: solid 1px var(--set, var(--s));
}

.b-border {
  border-bottom: solid 1px var(--set);
}

.borders {
  border: solid 2px var(--set);
}

.header-box {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.2em 0.4em;
  background: #fff;
  background: var(--g);
}

.tool {
  display: flex;
  flex-direction: column;
  position: relative;
  flex-grow: 1;
}

.tool > * {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.result-text {
  border-radius: 4px;
  border: dashed 2px var(--s);
  padding: 0.75rem;
  width: 100%;
  font-size: 1.77rem;
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
}

.radio > label {
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px;
  box-sizing: border-box;
  border: solid 2px transparent;
  background: #f8f5f2;
  background: var(--b);
}

.radio > label:hover {
  background: #fff;
  background: var(--g);
  border: solid 2px transparent;
  border: solid 2px var(--ub);
}

.radio > label:after {
  content: "";
  position: relative;
  display: flex;
  height: 18px;
  width: 18px;
  border-radius: 2rem;
  margin-left: 1rem;
  border: solid 2px #111;
  border: solid 2px var(--t);
  box-shadow: 0 2px #e2d7ca, inset 0 2px #e2d7ca;
  box-shadow: 0 2px var(--s), inset 0 2px var(--s);
}

#dark:checked ~ * #dark-label:after, #dd:checked ~ * #dd-label:after, #hc:checked ~ * #hc-label:after, #light:checked ~ * #light-label:after, #party:checked ~ * #party-label:after, #vegas:checked ~ * #vegas-label:after, .radio-checked, .radio > input:checked + label:after {
  box-shadow: 0 2px #e2d7ca, inset 0 2px #e2d7ca, inset 0 0 0 3px #f8f5f2, inset 0 0 0 1rem #111;
  box-shadow: 0 2px var(--s), inset 0 2px var(--s), inset 0 0 0 3px var(--b), inset 0 0 0 1rem var(--t);
}

.dropdown {
  background: #f1eae4;
  background: var(--ba);
  border-radius: 6px;
}

.dropdown > input[type=checkbox] {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
}

.dropdown > label {
  padding: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  border: solid 2px #ba9;
  border: solid 2px var(--bo);
}

.dropdown > label:hover {
  background: #e2d7ca;
  background: var(--s);
}

.dropdown > label .icon {
  background: #acd;
  background: var(--u);
  box-shadow: 0 2px #e2d7ca;
  box-shadow: 0 2px var(--s);
  color: #001;
  color: var(--ut);
  height: 1.77rem;
  width: 1.77rem;
  border-radius: 2rem;
  border: solid 2px var(--ui-border);
  position: relative;
  margin-left: 1rem;
}

.dropdown > label .icon:after {
  content: "";
  position: static;
  width: 0.56rem;
  height: 0.56rem;
  transform: rotate(135deg);
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  margin-top: -2px;
}

.dropdown > label:active {
  transform: translateY(1px);
}

.dropdown input[type=checkbox]:checked + label {
  border-radius: 4px 4px 0 0;
}

.dropdown input[type=checkbox]:checked + label .icon:after {
  transform: rotate(-45deg);
  margin-top: 3px;
}

.dropdown input[type=checkbox]:checked + label .closed-label {
  display: none;
}

.dropdown input[type=checkbox]:checked + label .open-label {
  display: inline;
}

.open-label {
  display: none;
}

.hidden-items {
  display: none;
  padding: 0.56rem;
  background: #f8f5f2;
  background: var(--b);
  border: solid 2px #ba9;
  border: solid 2px var(--bo);
  border-top: 0;
  border-radius: 0 0 4px 4px;
}

input[type=checkbox]:checked ~ .hidden-items {
  display: block;
}

.color-picker .hidden-items {
  left: 0;
  right: 0;
}

@media (min-width: 80em) {
  .color-picker .hidden-items {
    position: absolute;
    z-index: 99;
  }
}
.color-picker, .theme-box {
  display: none;
}

@supports (--v:a) {
  .color-picker, .theme-box {
    display: block;
  }
}
.control-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.control-box > * {
  width: 100%;
  max-width: 35rem;
  margin-left: auto;
  margin-right: auto;
}

.action-button {
  --set:var(--a);
  position: relative;
  background: 0 0;
  color: #fff;
  border-radius: 6px;
  border: 0;
  box-shadow: inset 0 -8px 0 0 #d54, 0 2px #dcb;
  box-shadow: inset 0 -8px 0 0 var(--as), 0 2px var(--bs);
  padding: 0.6rem;
  font-size: 1.2rem;
  font-weight: 700;
  overflow: hidden;
}

.action-button:before {
  content: "";
  position: absolute;
  top: auto;
  bottom: 2px;
  left: 2px;
  right: 2px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  z-index: 4;
}

.action-button:after {
  content: "";
  position: absolute;
  background-color: #ff6c18;
  border: solid 2px transparent;
  border: solid 2px var(--ab);
  border-radius: 6px;
  bottom: 8px;
}

.action-button span {
  display: block;
}

.action-button:hover {
  box-shadow: inset 0 -7px 0 0 #d54, 0 1px #dcb;
  box-shadow: inset 0 -7px 0 0 var(--as), 0 1px var(--bs);
}

.action-button:hover:after {
  background-color: #e87;
  background-color: var(--ah);
  transform: translateY(1px);
}

.action-button:hover:before {
  height: 3px;
}

.action-button:hover > span {
  transform: translateY(1px);
}

.action-button:active {
  box-shadow: inset 0 -5px 0 0 #d54;
  box-shadow: inset 0 -5px 0 0 var(--as);
}

.action-button:active:before {
  height: 1px;
}

.action-button:active:after {
  transform: translateY(3px);
}

.action-button:active > span {
  transform: translateY(3px);
}

textarea {
  width: 100%;
  resize: vertical;
  min-height: 8.4rem;
  margin-top: 0.75rem;
}

.btn {
  touch-action: manipulation;
  color: #001;
  color: var(--ut);
  background: #acd;
  background: var(--u);
  box-shadow: 0 2px #dcb;
  box-shadow: 0 2px var(--bs);
  border: solid 2px transparent;
  border: solid 2px var(--ub);
  border-radius: 4px;
}

.btn:hover {
  transform: translateY(1px);
  box-shadow: 0 1px #dcb;
  box-shadow: 0 1px var(--bs);
  background: #9bd;
  background: var(--uh);
}

.btn:active {
  transform: translateY(2px);
  box-shadow: none;
}

.btn:disabled {
  background: #e2d7ca;
  background: var(--s);
  color: #111;
  color: var(--t);
  box-shadow: none;
}

.btn:disabled:hover {
  transform: translateY(0);
  box-shadow: none;
}

.btn:disabled:active {
  transform: translateY(0);
  box-shadow: none;
}

#results {
  padding: 0.75rem 0;
  pointer-events: none;
}

#spinner {
  position: relative;
  height: 53rem;
  width: 100%;
}

#spinner-background, #spinner-inner, #ticker {
  position: absolute;
  top: 0;
  bottom: 0;
}

#spinner-inner, #ticker {
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

#spinner-background {
  display: none;
  overflow: visible;
  align-items: center;
}

#spinner-background svg {
  display: block;
  margin: auto;
}

@media (min-width: 320px) {
  #spinner-background {
    display: flex;
    width: 100%;
  }
}
#spinner-inner {
  border-radius: 99rem;
  overflow: hidden;
}

.results {
  padding-bottom: 0;
}

.results + div {
  margin-top: 0;
}

:root {
  --c0:#A1BAB4;
  --c1:#f28482;
  --c2:#f6bd60;
  --c3:#f7ede2;
  --c0-bg:#84a59d;
  --c1-bg:#F0B1A8;
  --c2-bg:#F8CF8B;
  --c3-bg:#FFF;
  --wheel:#F4F0EB;
  --wheel-shade:#E6DCD1;
  --wheel-border:#000;
  --pins:#1E1E24;
  --ticker:#E6DCD1;
  --ticker-border:#000;
  --spinner-bg:#F8F5F2 ;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c0:#688D8D;
    --c0-bg:#5F8181;
    --c1:#964A4A;
    --c1-bg:#894343;
    --c2:#79627F;
    --c2-bg:#6E5973;
    --c3:#698C6D;
    --c3-bg:#608064;
    --wheel:#564E4F;
    --wheel-shade:#555;
    --wheel-border:#000;
    --pins:#d82;
    --ticker:#d82;
    --ticker-border:#000;
    --spinner-bg:#433D3E ;
  }
}
* #dark:checked ~ * {
  --c0:#688D8D;
  --c0-bg:#5F8181;
  --c1:#964A4A;
  --c1-bg:#894343;
  --c2:#79627F;
  --c2-bg:#6E5973;
  --c3:#698C6D;
  --c3-bg:#608064;
  --wheel:#564E4F;
  --wheel-shade:#555;
  --wheel-border:#000;
  --pins:#d82;
  --ticker:#d82;
  --ticker-border:#000;
  --spinner-bg:#433D3E ;
}

@media (prefers-color-scheme: dark) {
  * #dark:checked ~ * {
    --c0:#A1BAB4;
    --c1:#f28482;
    --c2:#f6bd60;
    --c3:#f7ede2;
    --c0-bg:#84a59d;
    --c1-bg:#F0B1A8;
    --c2-bg:#F8CF8B;
    --c3-bg:#FFF;
    --wheel:#F4F0EB;
    --wheel-shade:#E6DCD1;
    --wheel-border:#000;
    --pins:#1E1E24;
    --ticker:#E6DCD1;
    --ticker-border:#000;
    --spinner-bg:#F8F5F2 ;
  }
}
#vegas:checked ~ * {
  --c0:#96031A;
  --c1:#1B1B1E;
  --c2:#96031A;
  --c3:#1B1B1E;
  --c0-bg:#8C0317;
  --c1-bg:#131315;
  --c2-bg:#8C0317;
  --c3-bg:#131315;
  --wheel:#330F0A;
  --wheel-shade:#220A07;
  --wheel-border:#c90;
  --pins:#c90;
  --ticker:#c90;
  --ticker-border:#000;
  --spinner-bg:#007A62 ;
}

#party:checked ~ * {
  --c0:#FFBF81;
  --c0-bg:#FFAD5C;
  --c1:#FFA3A5;
  --c1-bg:#FF8587;
  --c2:#FF86C8;
  --c2-bg:#FF5CB6;
  --c3:#FFDC5E;
  --c3-bg:#FFD747;
  --wheel:#FFC8B0;
  --wheel-shade:#FFB899;
  --wheel-border:#fff;
  --ticker:#63E3D4;
  --ticker-border:#000;
  --pins:#000;
  --spinner-bg:#F97683 ;
}

#dd:checked ~ * {
  --c0:#2E0F13;
  --c0-bg:#1F0A0D;
  --c1:#573C36;
  --c1-bg:#4B342F;
  --c2:#570F12;
  --c2-bg:#460C0F;
  --c3:#5B4620;
  --c3-bg:#4B3A1B;
  --wheel:#362D1C;
  --wheel-shade:#0D0A07;
  --wheel-border:#000;
  --ticker:#E3DAC9;
  --ticker-border:#000;
  --pins:#E3DAC9;
  --spinner-bg:#270d10 ;
}

#hc:checked ~ * {
  --c0:#000;
  --c1:#000;
  --c2:#000;
  --c3:#000;
  --c0-bg:#00f;
  --c1-bg:#00f;
  --c2-bg:#00f;
  --c3-bg:#00f;
  --wheel-shade:#00f;
  --wheel:#00f;
  --spinner-bg:transparent;
  --ticker:#ff0;
  --ticker-border:#ff0;
  --pins:#ff0 ;
}

#hc:checked ~ * .spinner-sector {
  stroke: #00f;
  stroke-width: 2;
}

#hc:checked ~ * text {
  fill: #fff;
}

.tada {
  padding: 0;
  background: #fff;
  background: var(--g);
  border-top: solid 2px #ba9;
  border-top: solid 2px var(--bo);
  text-align: center;
  font-size: 1.33rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px;
  align-items: center;
}

.tada.highlight #tada-text {
  border: 8px dotted #e98;
  border: 8px dotted var(--a);
}

#tada-text {
  display: inline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.25rem;
  background: #fff;
  background: var(--g);
  border-radius: 4px;
  text-transform: uppercase;
}

.text-only-btn {
  color: var(--t);
}

.text-only-btn:hover {
  text-decoration: underline;
}

.checkbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.checkbox:hover {
  background: #e2d7ca;
  background: var(--s);
}

.checkbox .check {
  padding: 0;
  float: right;
  height: 1.33em;
  width: 1.33em;
  position: relative;
  transform: translateY(-1px);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background: #fff;
  background: var(--i);
  color: transparent;
  box-shadow: inset 0 2px #dcb, 0 2px #dcb;
  box-shadow: inset 0 2px var(--bs), 0 2px var(--bs);
}

.checkbox input[type=checkbox]:checked + .check {
  box-shadow: inset 0 1px #dcb, 0 1px #dcb;
  box-shadow: inset 0 1px var(--bs), 0 1px var(--bs);
  transform: translateY(0);
  color: #000;
  color: var(--it);
}

.copy-box input {
  display: block;
  width: 100%;
  margin-top: 0.56rem;
  padding-right: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copy-box button {
  position: absolute;
  bottom: calc(0.56rem - 3px);
  right: 0.56rem;
  z-index: 101;
}

.text-content ol, .text-content ul {
  list-style: none;
  padding-left: 1.77rem;
}

.text-content ol li:before, .text-content ul li:before {
  position: relative;
  float: left;
  margin-left: -1.77rem;
}

.text-content ul li:before {
  content: "▸";
  color: #e98;
  color: var(--a);
}

.text-content ol {
  counter-reset: x;
}

.text-content ol li:before {
  counter-increment: x;
  content: counter(x);
  border-radius: 1rem;
  width: 1rem;
  height: 1rem;
  font-size: 0.75rem;
  margin-top: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e2d7ca;
  background: var(--s);
}

.text-content li + li {
  margin-top: 1.33rem;
}

.label-form {
  text-align: left;
  font-size: 13px;
  margin-top: 10px;
  font-weight: 500;
  padding-left: 0;
}

.form-control_sm {
  font-size: 13px;
  padding-left: 8px;
  background: #F3F3F3;
  border: 1px solid #e6e6e6;
  box-shadow: none;
}

.color_required {
  color: #FA612B;
}

.btn__btn__sm {
  display: inline-block;
  background-color: #f60;
  border: 1px solid #f60;
  margin-top: 10px;
  border-radius: 5px;
  color: #FFFFFF;
  padding: 7px 65px;
  margin-bottom: 10px;
}

@media (max-width: 1200px) {
  #spinner-background, #spinner-inner, #ticker {
    bottom: auto !important;
  }
}
@media (max-width: 950px) {
  #spinner {
    height: 50rem;
  }
}
@media (max-width: 900px) {
  #spinner {
    height: 50rem;
  }
}
@media (max-width: 850px) {
  #spinner {
    height: 48rem;
  }
}
@media (max-width: 570px) {
  #spinner {
    height: 45rem;
  }
}
@media (max-width: 530px) {
  #spinner {
    height: 42rem;
  }
}
@media (max-width: 500px) {
  #spinner {
    height: 40rem;
  }
}
@media (max-width: 450px) {
  #spinner {
    height: 35rem;
  }
}
@media (max-width: 420px) {
  #spinner {
    height: 32rem;
  }
}