/* app.css */
:root {
  --color-magic: #f89321;
  --color-bg1: #1a1a1b;
  --color-bg2: #071016;
  --color-bg3: #0f1010;
  --color-bg3tx: rgba(15, 16, 16, 0.985);
  --color-bg4: #03070b;
  --sidebar-width: 22em;
  --ease-extreme-out: cubic-bezier(.05, .9, 0, 1);
  --z-module-list: 9;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
menu {
  background: transparent;
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}
html {
  font-size: 62.5%;
}
ul,
ol,
menu {
  list-style-type: none;
}
html {
  color: #fff;
  font-family: futura-pt;
}
body {
  background-color: var(--color-bg1);
  padding-left: calc(var(--sidebar-width) + 3em);
}
a {
  color: #fff;
}
#sidebar {
  --side-padding: 3em;
  background-color: #071016;
  bottom: 0;
  left: 0;
  padding: 0 var(--side-padding);
  position: fixed;
  top: 0;
  width: calc(var(--sidebar-width) - var(--side-padding)*2);
  h1 {
    position: absolute;
    text-indent: -9999px;
  }
  #textmark {
    margin-bottom: 3em;
    margin-left: -0.4em;
    margin-top: 6.5em;
    width: 12.5em;
  }
  menu {
    li > a {
      color: #fcfcfc;
      display: block;
      font-size: 1.6em;
      padding: 0.8rem 0;
      text-decoration: none;
      text-transform: uppercase;
    }
    #module-subtoc {
      border-right: 1px solid #fff;
      display: block;
      margin: 1em 0;
      margin-right: -1em;
      padding-right: 1.5em;
      text-align: right;
      &:empty {
        display: none;
      }
      h2 {
        font-size: 2.8em;
        font-style: italic;
        font-weight: 100;
        margin-bottom: 0.1em;
        a {
          color: #fff;
          text-decoration: none;
        }
      }
      li a {
        font-size: 1.3em;
        padding: 0.9rem 0;
      }
    }
  }
}
#logo-main {
  margin-bottom: 2em;
  margin-top: 3em;
  width: 9em;
}
article {
  padding-bottom: 70vh;
  h1,
  h2 {
    font-family: sharik-sans;
    font-size: 2em;
    margin-bottom: 1rem;
    padding-top: 0.6em;
    text-transform: lowercase;
    &:hover .self-link {
      color: #2b2b2b;
      transition: color 0.3s;
    }
    .self-link {
      color: #222;
      margin-left: 0.6em;
      text-decoration: none;
      transition: color 0.5s;
      &:hover {
        color: #666;
        transition: color 0.1s;
      }
    }
  }
  p {
    font-size: 1.6em;
    line-height: 1.25em;
    max-width: 32em;
    margin-bottom: 1em;
  }
  dl {
    margin-bottom: 2em;
    dt,
    dd {
      font-size: 1.3em;
      padding: 0.3em 0;
    }
    dt {
      color: #999;
      position: absolute;
      text-align: right;
      width: 10em;
    }
    dd {
      border-bottom: 1px solid #111;
      padding-left: 11em;
    }
  }
  #specs + dl {
    &,
    & + dl {
      max-width: 45em;
      width: calc(50vw - var(--sidebar-width) / 2 - 4em);
    }
    left: min(calc(var(--sidebar-width) + 45em), calc(50vw + var(--sidebar-width) / 2));
    position: absolute;
  }
  .page-thumb img {
    height: 8em;
  }
  .gallery {
    background-color: var(--color-bg3);
    margin-bottom: 1em;
    margin-left: -3em;
    padding: 3em 0 3em 3em;
    li {
      display: inline-block;
      padding-right: 2em;
    }
    img {
      border-radius: 1em;
    }
    &.large img {
      height: 20em;
    }
  }
  .list {
    list-style-type: circle;
    margin-bottom: 2em;
    li {
      font-size: 1.6em;
      margin-left: 1em;
      margin-bottom: 0.5em;
    }
  }
  .about {
    font-size: 2.1em;
    font-weight: 100;
    line-height: 1.4em;
    max-width: 24em;
    padding: 1em 0;
  }
  .greeting:after {
    content: "@";
  }
  #mailing-list {
    form {
      position: relative;
    }
    input {
      appearance: none;
      background: var(--color-bg3);
      border: none;
      border-radius: 0.8rem;
      color: #fff;
      font-family: futura-pt, sans-serif;
      font-size: 1.5em;
      padding: 0.5em 1em;
      width: 22em;
      &::placeholder {
        color: var(--background-color);
        font-style: italic;
      }
    }
    button {
      animation: 600s hrotate;
      animation-iteration-count: infinite;
      appearance: none;
      background: transparent;
      border: 2px solid var(--color-magic);
      border-radius: 0.6rem;
      color: var(--color-magic);
      cursor: pointer;
      font-family: "sharik-sans", sans-serif;
      font-size: 1em;
      left: calc(var(--sidebar-width) + 5.2em);
      letter-spacing: -0.02em;
      padding: 0.4em 1em;
      position: absolute;
      text-transform: lowercase;
      top: 0.4em;
    }
    p {
      filter: hue-rotate(160deg);
    }
  }
}
#panel-src {
  display: none;
}
@keyframes hrotate {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(180deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
.panel {
  .CU {
    position: absolute;
    svg {
      animation: 600s hrotate;
      animation-iteration-count: infinite;
    }
  }
  svg {
    &:first-child {
      position: absolute;
    }
  }
}
article {
  --offset-left: calc(var(--sidebar-width) + 58em);
  .panel-main {
    background-color: #131313;
    box-shadow: 0 10em 20em rgba(0, 0, 0, 0.3), 0 0.5em 2em rgba(0, 0, 0, 0.2);
    left: var(--offset-left);
    position: absolute;
  }
  .panel-main._2step svg {
    width: max(12em, min(18em, calc(100vw - var(--offset-left) - 5em)));
  }
  .panel-main.segmix svg {
    width: max(22em, min(42em, calc(100vw - var(--offset-left) - 5em)));
  }
  .panel._2step .CU {
    filter: hue-rotate(310deg);
  }
  .panel.segmix .CU {
    filter: hue-rotate(100deg);
  }
}
:root {
  --mlist-height: calc(100vh - var(--mlist-top) - 14em);
  --mlist-top: 18.1em;
}
#sidebar menu li > a#modules-close {
  display: none;
  font-size: 3em;
  position: absolute;
  right: 1.7rem;
  top: 13.7rem;
}
#module-sidebar {
  background-color: var(--color-bg4);
  height: var(--mlist-height);
  margin: 0 -3em 1em;
  overflow: hidden;
  padding: 0 2em;
  .module-widget {
    text-align: right;
    &:first-child {
      margin-top: 3em;
    }
    label {
      display: block;
      font-size: 1.4em;
      padding: 0.8rem 0;
      text-transform: uppercase;
    }
    .option-block {
      display: block;
      float: right;
      margin-left: 1em;
      padding-bottom: 2em;
      position: relative;
    }
    input[type=radio] {
      display: block;
      height: 100%;
      left: 0;
      margin: 0;
      opacity: 0;
      padding: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
    .option-thumb {
      border: 2px solid #aaa;
      border-radius: 1em;
      display: inline-block;
      height: 5em;
      overflow: hidden;
      transition: 0.3s border-color;
      width: 7em;
    }
    .option-label {
      font-size: 1.1em;
      position: absolute;
      right: 0.2em;
      text-transform: lowercase;
      top: calc(100% - 1.3em);
    }
    input:checked + .option-thumb {
      border-color: #fff;
    }
  }
  .display-outlines {
    pointer-events: none;
    transform: rotate(-15deg) translateY(-0.8em);
  }
}
#module-list {
  background-color: var(--color-bg3tx);
  box-shadow: 0 1em 0 0 rgba(0, 0, 0, .2);
  height: var(--mlist-height);
  left: var(--sidebar-width);
  overflow-y: auto;
  position: fixed;
  right: 0;
  top: var(--mlist-top);
  z-index: var(--z-module-list);
  &::-webkit-scrollbar {
    background: transparent;
    width: 2em;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 6);
    transition: 0.1s background;
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0);
    border-right: 1px solid #bbb;
    transition: 0.5s background;
  }
  .module {
    float: left;
    margin-bottom: 1.5em;
    margin-left: 6.5em;
    position: relative;
    text-decoration: none;
    top: 4em;
    .panel {
      border: 3px solid #222;
      border-radius: 0.5em;
      margin-bottom: 1em;
      svg {
        height: calc(var(--mlist-height) - 13em);
      }
    }
    p {
      font-size: 1.4em;
      text-align: right;
      text-transform: uppercase;
    }
    .module-description span {
      animation: 600s hrotate;
      animation-iteration-count: infinite;
      color: var(--color-magic);
    }
    .module-width {
      font-weight: 100;
    }
    &:nth-child(1) {
      .panel .CU,
      .module-description {
        filter: hue-rotate(270deg);
      }
    }
    &:nth-child(2) {
      .panel .CU,
      .module-description {
        filter: hue-rotate(320deg);
      }
    }
  }
}
@keyframes expand {
  from {
    height: calc(var(--mlist-height) - 20em);
  }
  to {
    height: calc(var(--mlist-height));
  }
}
@keyframes collapse {
  from {
    height: 20em;
  }
  to {
    height: 0;
  }
}
#module-sidebar,
#module-list {
  display: none;
}
.moduling {
  #module-sidebar,
  #module-list {
    animation: 1.5s expand;
    animation-iteration-count: 1;
    animation-timing-function: var(--ease-extreme-out);
    display: block;
  }
  #sidebar menu {
    #module-subtoc {
      display: none;
    }
    li > a#modules-close {
      display: block;
    }
  }
  &.unmoduling {
    #module-sidebar,
    #module-list {
      animation: 0.3s collapse;
      animation-iteration-count: 1;
      animation-timing-function: var(--ease-extreme-out);
    }
    #sidebar menu {
      #module-subtoc {
        display: block;
      }
      li > a#modules-close {
        opacity: 0;
        transition: 0.5s opacity;
      }
    }
  }
}
.permamoduling {
  #module-sidebar,
  #module-list {
    animation: none;
  }
  #modules-link {
    pointer-events: none;
  }
  #sidebar menu li > a#modules-close {
    display: none;
  }
}
/*# sourceMappingURL=app.css.map */