/* code block */
  ${(function() {
    if ( document.documentElement.classList.contains('skeu') ) {
      v.sk = true;
      v.BBG = 'linear-gradient(160deg, var(--BC), var(--BCD))';
      v.BS = 'outset';
    } else {
      v.sk = false;
      v.BBG = 'var(--BCM)';
      v.BS = 'solid';
    }
    v.FBG = 'linear-gradient(160deg, purple, dodgerblue, aquamarine)';
    return '';
  }()) || ''}

/* layout & and demo presentation */
  :root {
    --PHI: 1.618rem;
    background: silver;
  }
  body {
    margin: 0;
    font-family: Tahoma, system-ui, Helvetica, Arial, sans-serif;
  }

  main > section {
    display: flex;
    flex-wrap: wrap;
    /*
    justify-content: space-around;
    */
    align-items: center;
    overflow: hidden;
  }

  section.fbps {
    position: relative;
    border: 0;
    margin: 0;
    padding: 0;
  }

  section.normal {
    display: block;
  }

  label {
    user-select: none;
  }

  div.card {
    display: grid;
    position: relative;
    overflow: hidden;
    grid-template-areas: "header"
      "content";
    grid-template-rows: 5em 9em;
    grid-template-columns: 1fr;
    max-width: 500px;
    min-width: 330px;
    width: 26%;
    border-radius: 1em;
    box-shadow: ${v.sk ? '0 0 1em grey' : 'none'};
    border: none;
    background: white;
    margin: 0.5em;
  }

  div.card header {
    grid-area: header;
    padding: 1em;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  div.card header h1 {
    margin: 0;
    line-height: 0.92;
  }

  div.card .content {
    grid-area: content;
    position: relative;
    overflow: hidden;
    padding: 1em;
    padding-top: 0;
  }

/* buttons */
  /* general */
    button {
      --BL: 55%;
      --BLC: calc(var(--BL) - 5%);
      --BLM: calc(var(--BL) - 10%);
      --BLD: calc(var(--BL) - 25%);
      --BC: hsla(var(--CH), 100%, var(--BLC), 90%);
      --BCD: hsla(var(--CH), 100%, var(--BLD), 90%);
      --BCM: hsla(var(--CH), 100%, var(--BLM), 90%);
      --BSH: ${v.sk ? '1px 2px 2px 0px #3b1b0b80' : ''};
      border-radius: 0.75em;
      padding: 0.2em 0.4em;
      border-color: var(--BC);
      border-style: ${v.BS};
      background: ${v.BBG};
      color: hsl(calc(var(--CH) + 195), 90%, calc(var(--BLC) + 50%));
      box-shadow: var(--BSH);
      transition: 0.15s ease-out box-shadow;
      text-align: center;
    }

    button:active {
      --BL: 45%;
      --BSH: ${v.sk ? '0 0 1px #0b0b0b80' : ''};
      ${v.sk ? 'transform: translateY(1px);' : ''}
    }

    button {
      --CH: 200;
    }

  /* types */
    button.warn {
      --CH: 15;
    }

    button.cta {
      font-size: x-large;
      --CH: 5;
    }

    button.OK {
      --CH: 135;
    }

    button.light {
      --BL: 80%;
      color: hsl(calc(var(--CH) + 195), 90%, calc(var(--BLC) - 65%));
    }

    button.dark {
      --BL: 20%;
    }

    button.icon {
      font-size: larger;
      border-radius: 0.3725em;
      padding: 0.2em;
      line-height: 1;
    }

    button.icon img {
      width: 1.3em;
      filter: invert(1.0);
    }

    button.icon.img {
      line-height: 0;
      padding: 0.05em;
    }

 
  /* type states */
    button.light:active {
      --BL: 65%;
    }

    button.dark:active {
      --BL: 30%;
    }

  /* type overrides */
    button.adjust-1 {
      padding: calc(0.2em - 1px) calc(0.25em - 1px) calc(0.2em + 1px);
    }

    button.adjust-2 {
      font-weight: bold;
      min-width: 2.8ch;
    }

/* fancy background panels */
  div.upswing {
    --SM: 51%;
    --EM: 61.8%;
    --MM: 80%;
    --V: var(--MM);
    --A: var(--V);
    --IA: calc(100% - var(--V));
    --CLR: aquamarine, dodgerblue, violet;
    top: 0;
    display: block;
    width: 100vw;
    z-index: -1;
    padding-top: 100%;
    height: 0;
    clip-path: polygon(100% 0, 100% var(--A), 0 100%, 0 var(--IA));
    background-color: transparent;
    background: linear-gradient(to top left, red, orange, yellow, lime, dodgerblue, purple, violet);
    background: linear-gradient(to top left, var(--CLR));
  }

  div.upswing.top {
    --A: 100%;
  }

  div.upswing.bottom {
    --IA: 0%;
  }

  div.half.upswing {
    padding-top: 30.9%;
  }

  div.deep.upswing {
    --V: var(--EM);
  }

/* fancy headings */
  h1 {
    max-width: 20ch;
    font-weight: 600;
    font-family: system-ui,Helvetica,Arial,sans-serif;
    font-size: min(8.01vmin, 2.641em);
    letter-spacing: -2.618px;
    line-height: 0.927;
    margin: 0.75em 0;
    /*
    background: silver;
    border: 1em solid orange;
    */
  }

  h1.short {
    max-width: 11ch;
    line-height: 1.1;
  }

  h1.small {
    font-size: var(--PHI);
    line-height: 1.1;
    letter-spacing: -0.309px;
    font-weight: 600;
  }

/* text */
  p {
    letter-spacing: 0.2px;
  }

/* fancy cards and background gradients */
  .card.full-bleed {
    background: ${v.FBG};
  }
  .card:not(.full-bleed) header {
    padding-bottom: 1em;
  }
  .card.header-bleed header,
  .card.full-bleed header {
    color: white;
  }
  .card.full-bleed.header {
    color: white;
  }

  .content-bleed .content {
    background: ${v.FBG};
  }

  .header-bleed header {
    background: ${v.FBG};
  }

/* animated backgrounds */
  .abg {
    width: 100%;
    padding-top: 100%;
    margin: 0;
  }

  .anim-1 {
    --X: 0.8;
    --Y: 0;
    --A: 255, 0, 0;
    --B: 0, 255, 0;
    --C: 0, 0, 255;
    --A0: rgba(var(--A),var(--X));
    --A1: rgba(var(--A),var(--Y));
    --B0: rgba(var(--B),var(--X));
    --B1: rgba(var(--B),var(--Y));
    --C0: rgba(var(--C),var(--X));
    --C1: rgba(var(--C),var(--Y));
    background: linear-gradient(217deg, var(--A0), var(--A1) 70.71%),
      linear-gradient(127deg, var(--B0), var(--B1) 70.71%),
      linear-gradient(336deg, var(--C0), var(--C1) 70.71%);
  }

	@keyframes g-anim-2 {
		0% {
			background-position: 25% 25%;
		}
		25% {
			background-position: 75% 25%;
		}
    50% {
			background-position: 75% 75%;
    }
		75% {
			background-position: 25% 75%;
    }
		100% {
			background-position: 25% 25%;
		}
	}
  .anim-2 {
		background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
		background-size: 400% 400%;
		animation: g-anim-2 15s ease infinite;
  }

  .anim-3 {
    position: relative;
    padding-top: 0;
    width: 100%;
    height: 100%;
    flex-grow: 0;
    flex-shrink: 0;
  }

  .anim-3 h1 {
    position: relative;
    mix-blend-mode: difference;
    z-index: 100;
    margin: 0 auto;
  }

  .anim-3 canvas {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
		--gradient-color-1: #ef008f; 
		--gradient-color-2: #6ec3f4; 
		--gradient-color-3: #7038ff;  
		--gradient-color-4: #ffba27;
		z-index:0;
  }

  .anim-4 {
    position: relative;
    padding-top: 0;
    width: 100vmax;
    height: 100vmax;
    flex-grow: 0;
    flex-shrink: 0;
  }

  .anim-4 h1 {
    position: relative;
    mix-blend-mode: difference;
    z-index: 100;
    color: #343434;
    margin: 0 auto;
  }

  .anim-4 canvas {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
		--gradient-color-1: #ef008f; 
		--gradient-color-2: #6ec3f4; 
		--gradient-color-3: #7038ff;  
		--gradient-color-4: #ffba27;
		z-index:0;
  }

/* complex cards */
  .show-1 {
    min-height: 600px;
  }
  .bgb {
    --CA: turquoise;
    --CB: navy;
    background: linear-gradient(0deg, var(--CA), var(--CA)),
      linear-gradient(0deg, var(--CB), var(--CB));
    background-blend-mode: multiply;
  }
  .cmplx {
    --cta: rgb(0, 212, 255);
    --hl: white;
    font-size: 0.9375rem;
    max-width: 270px;
  }

  .cmplx header > * {
    padding: 0 2rem 0 1rem;
  }
  .cmplx header h1 {
    font-size: inherit;
    font-weight: bold;
    letter-spacing: -0.3px;
    color: var(--hl);
    border-left: thin solid var(--cta);
  }

  .cmplx .body {
    color: grey;
    padding: 0 2rem 0 1rem;
  }

  .cmplx footer {
    padding: 0 2rem 0 1rem;
    transition: 150ms ease color, opacity, fill, background-color;
  }

  .cmplx footer a {
    text-decoration: none;
    font-weight: 500;
    color: var(--cta);
  }

  .cmplx footer svg {
    fill: var(--cta);
  }

  .cmplx footer:hover > a {
    color: var(--hl);
    fill: var(--hl);
  }

/* large cards */
  .large {
    max-width: 540px;
    padding: 0 7em 0 1em;
    box-sizing: border-box;
  }

  .large header h2 {
    color: var(--cta);
    font-size: 1.2em;
  }

  .large header h1 {
    font-size: 2.125em;
    border: 0;
  }

  .large .body p {
    font-size: 1.125em;
  }

  .large .body p a,
  .large footer a {
    font-size: 1.125em;
    font-weight: 425;
    color: var(--cta);
    text-decoration: none;
  }

  .large footer button {
    color: black;
    background: var(--cta);
    border-radius: 1em;
    font-weight: 500;
    font-size: 1em;
    padding: 0.2em 1em 0.375em 1em;
    box-shadow: none;
    border: none;
    cursor: pointer;
    transition: 150ms ease background-color;
  }

  .large footer button:hover {
    background: var(--hl);
    color: black;
  }

  .large p {
    margin: 1.25em 0;
  }