:root {
  --unit: 18rem;
  --u1: 0.25rem;
  --u2: 0.5rem;
  --sup: rgba(255, 255, 0, 0.5);
  --sub: rgba(255, 0, 0, 0.25);
  --med: rgba(128, 128, 128, 0.125);
  --active: rgba(0, 255, 0, 0.25);
  --baseKey: 1;
}

html,
body {
  height: 100%;
  z-index: -9;
  background-color: #fff;
}

main {
  /* 
  RESET */
  &,
  * {
    box-sizing: border-box;
  }
  &,
  h2,
  h3,
  p,
  form {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: monospace;
    font-size: 1rem;
  }

  /* 
  STRUCTURE */
  &,
  section,
  article,
  aside,
  fieldset {
    padding: var(--u2);
  }
  section,
  aside,
  h2,
  p,
  ul,
  ol,
  form,
  table {
    margin-bottom: var(--u2);
  }
  .resize,
  .scroll {
    will-change: scroll-position;
  }
  .resize {
    resize: both;
    overflow: hidden;
    overflow-y: auto;
  }
  .scroll {
    overflow: hidden;
    overflow-y: auto;
    max-height: 12rem;
  }

  & {
    /*user-select: none;*/
    /*position: absolute;*/
    position: relative;
    z-index: 2;
    margin: var(--u2);
    width: 16rem;
    max-width: var(--unit);
  }
  #static {
    /*position: absolute;*/
  }

  aside {
    position: absolute;
    left: 100%;
    background: var(--med);
  }

  /* counter */
  counter-reset: section;
  section,
  article {
    &:after {
      /* fix overflow height */
      counter-increment: section;
      content: '::' counter(section);
      display: block;
      clear: both;
      /* and troubleshoot toSvg */
      font-size: 0.5rem;
      color: #808080;
    }
  }

  /* form */
  input,
  select {
    border: 0.125rem solid transparent;
    border-radius: 0;
  }
  input[type='text'],
  input[type='button'],
  input[type='reset'],
  button,
  select {
    appearance: none;
    border-color: var(--med);
  }

  table {
    border-collapse: collapse;
    text-align: left;
    tr:nth-child(odd) {
      background-color: var(--med);
    }
    td,
    th {
      padding: var(--u1);
    }
  }

  ul {
    padding-left: 1.75em;
  }

  table tr,
  li,
  summary {
    &:hover,
    &:focus {
      background-color: var(--active);
    }
  }

  main {
    line-height: 1;
  }

  /*
  STYLE */

  #thread {
    font-size: 1.5em;
    margin: 1rem 0 var(--u2);
    min-height: 5rem;
    background-color: rgba(255, 255, 128, 0.5);
    div,
    span,
    section {
      width: 50%;
      float: left;
      text-align: center;
      background-color: rgba(128, 128, 128, 0.25);
    }
  }

  /* accents */
  h2,
  details {
    border-top: var(--u1) solid var(--sup);
    font-style: normal;
    font-weight: normal;
  }
  .sup,
  h2 span,
  summary span {
    background-color: var(--sup);
  }
  .sub {
    background-color: var(--sub);
  }

  /* LIVE MEDIA */

  .slides {
    margin: 0;
    align-items: center;
    display: flex;
    justify-content: center;
    .track {
      flex-grow: 1;
      flex-shrink: 4;
      flex-basis: 0;
      contain: inline-size;

      /* off */
      position: relative;
      transition: flex-grow 1.5s;
      opacity: 50%;
      img,
      picture,
      video {
        display: block;
        width: 100%;
        height: 8em;
        image-rendering: pixelated;
        background-blend-mode: multiply;
        /*background-attachment: fixed; toCanvas style conflicts inconsistent */
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2Nk+M/QwMDI0MAABYxgGkkQIoAkiBCACgIABm4HhEEa4PgAAAAASUVORK5CYII=');
        background-size: auto 10vmin; /* 10vmin may be more compatible */
        background-position: -10vmin -10vmin;
        animation: media 6s linear infinite;
        animation-play-state: paused;
      }

      &:hover,
      &:active,
      &:focus {
        /* on (filter doesn't toCanvas) */
        flex-grow: 4;
        opacity: 100%;
        animation: slider 3s linear infinite;
        img,
        source,
        video {
          border-radius: 0.5em;
        }
      }
    }

    figcaption {
      position: absolute;
      top: 0;
      z-index: 1;
      transform: rotate(90deg);
      transform-origin: left bottom;
      white-space: nowrap;
      /* consistent */
      background-color: #fff;
    }
  }

  /*
LAYOUT (may need global scope for css3d?) */
  .w25,
  .w33,
  .w50,
  .w66,
  .w75 {
    float: left;
    max-width: 12rem;
  }
  .w25 {
    width: 25%;
  }
  .w33 {
    width: 33.3%;
  }
  .w50 {
    width: 50%;
  }
  .w66 {
    width: 66.6%;
  }
  .w75 {
    width: 75%;
  }
  .w100 {
    width: 100%;
  }
  img {
    width: 100%;
    height: auto;
  }

  /* ANIMATIONS */
  .tilt {
    transform: rotate(-15deg);
  }
  .hinge {
    position: relative;
    /*animation: hinge 6s linear infinite alternate;*/
  }
  .cycle {
    animation: cycle 3s steps(1, start) infinite;
  }
  .blink {
    border: 0.125rem dashed red;
    animation: blink 3s linear infinite;
    opacity: 1;
  }
}

/* 
EFFECTS, ANIMATION */
@keyframes media {
  100% {
    background-position: 0 0;
  }
}
@keyframes slider {
  50% {
    transform: translate(0, -0.5em);
  }
}

@keyframes hinge {
  25% {
    z-index: 0;
    transform: rotate(0deg) scale(var(--baseKey));
  }

  50% {
    z-index: 99;
    transform: rotate(-15deg) scale(var(--baseKey));
  }

  75% {
    z-index: -3;
    transform: rotate(0deg) scale(var(--baseKey));
  }

  100% {
    z-index: 0;
  }
}

@keyframes cycle {
  33% {
    background-color: rgba(255, 0, 0, 0.5);
  }
  66% {
    background-color: rgba(0, 255, 0, 0.5);
  }
  100% {
    background-color: rgba(0, 0, 255, 0.5);
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/*
  COMMON STRUCTURE */

/* containers (may be cloned out of parent hierarchy) */
.yt iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.yt {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
model-viewer {
  width: 100%;
  height: 6em;
  position: relative;
  contain: strict;
}

.bgnormal {
  background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5)),
    linear-gradient(to bottom, rgba(0, 255, 0, 0), rgba(0, 255, 0, 0.5)), linear-gradient(rgb(128, 128, 255), rgb(128, 128, 255));
}

.lil-gui.root {
  .title {
    overflow: hidden;
  }
  div:before,
  div:after {
    /* CDN serves garbage after throttling (arrow) */
    content: '' !important;
  }
}

/* test: reflow, update */
.mp-unstyle {
  .hinge {
    animation: hinge 12s linear infinite;
  }
  .march mp {
    animation-play-state: running;
  }
  span.mp-poster {
    box-shadow: inset 0 -0.125em 0 0 var(--sub);
  }

  .slides .track {
    img,
    picture,
    video {
      animation-play-state: running;
    }
  }
}

:focus,
:active,
.active,
.pulse {
  box-shadow: inset 0 0 0.125em 0.125em var(--active);
  animation: active 0.5s linear infinite alternate;
}
@keyframes active {
  to {
    box-shadow: inset 0 0 0em 0.125em cyan;
  }
}

/* TEST STYLES */

.w33 {
  &:hover {
    --baseKey: 2;
    transform: scale(var(--baseKey));
  }

  transition: 3s transform;
}

#dynamic img.w50:hover {
  width: 100%;
  transition: width 2s;
}

.gpuForce {
  transform: translate3d(0, 0, 0);
}

.stage {
  position: relative;
  overflow: visible;
}