:root {
  --bgColor: #ff0058;
  --bgInvertColor: #57ff00;
  --gdColor: #fff;
  --gdInvertColor: #000;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

::selection {
  background: var(--bgInvertColor);
  color: var(--gdInvertColor);
}

html, body {
  background: var(--bgColor);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  letter-spacing: .05em;
  font-family: Space Mono, monospace;
  font-size: 1.04167vw;
  font-weight: 400;
  line-height: 1.5em;
}

@media (width <= 800px) {
  body {
    font-size: 4.8vw;
  }
}

a {
  color: inherit;
  border-bottom: .15em solid #0000;
  text-decoration: none;
}

a:hover {
  border-bottom: .15em dotted;
}

ul {
  list-style: none;
}

a.is-active {
  cursor: default;
  border-bottom: .15em solid;
}

.drag {
  cursor: grab;
  fill: var(--bgColor);
  touch-action: none;
  stroke: #ff005880;
}

.drag:active {
  cursor: grabbing;
}

.drag__handler {
  fill: #0000;
}

.app {
  isolation: isolate;
  height: 100%;
  display: flex;
  position: relative;
}

@media (width <= 800px) {
  .app {
    flex-direction: column;
  }
}

.app__menu {
  margin-bottom: 2em;
}

.app__menu li {
  margin-right: .5em;
  display: inline-block;
}

.app__widget, .app__info {
  z-index: 2;
  opacity: 1;
  flex-direction: column;
  flex: 1;
  transition: opacity .22s ease-out;
  display: flex;
  position: relative;
}

.app--about-open .app__widget, .app--about-open .app__info {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .app__widget, .app__info {
    transition: none;
  }
}

@media (width <= 800px) {
  .app__widget {
    flex: .5;
  }
}

.app__gd {
  fill: var(--gdColor);
  stroke: #ff005880;
}

.app__logo {
  cursor: pointer;
  color: var(--gdColor);
  z-index: 2;
  background: none;
  border: 0;
  width: 25vw;
  margin: auto;
  padding: 0;
  display: block;
  position: relative;
}

@media (width <= 800px) {
  .app__logo {
    width: 60%;
    margin-bottom: 2em;
  }
}

.app__logo:focus-visible {
  outline-offset: 12px;
  outline: 2px solid;
}

.app__logo svg {
  display: block;
}

.app__card {
  z-index: 2;
  width: 50%;
  margin: auto;
  position: relative;
}

@media (width >= 801px) {
  .app__card {
    padding-top: 1.25em;
  }
}

@media (width <= 800px) {
  .app__card {
    width: 60%;
    margin-top: 13%;
  }
}

.app__card p, .app__card a {
  display: inline-block;
}

.app__info {
  color: var(--gdColor);
  text-shadow: 0 0 4em #ff005880;
}

.app__info p {
  color: inherit;
  margin-bottom: 1.25em;
}

.app__info a {
  font-size: 80%;
}

.wave-grid {
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.debug-launcher {
  right: calc(8px + env(safe-area-inset-right, 0px));
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 1010;
  cursor: pointer;
  background: var(--bgColor);
  height: 44px;
  color: var(--gdColor);
  letter-spacing: -.08em;
  border: 1px solid;
  border-radius: 12px;
  align-items: center;
  padding: 0;
  font: 400 12px / 1 Space Mono, monospace;
  display: flex;
  position: fixed;
  overflow: hidden;
}

.debug-launcher__icon {
  flex: 0 0 42px;
  place-items: center;
  height: 42px;
  display: grid;
}

.debug-launcher__label {
  opacity: 0;
  white-space: nowrap;
  letter-spacing: normal;
  max-width: 0;
  font-size: 12px;
  transition: max-width .25s, padding-left .25s, opacity .2s, transform .25s;
  overflow: hidden;
  transform: translateX(8px);
}

@media (prefers-reduced-motion: reduce) {
  .debug-launcher__label {
    transition: none;
  }
}

.debug-launcher[aria-pressed="true"] {
  background: var(--gdColor);
  color: var(--bgColor);
}

.debug-launcher:hover, .debug-launcher:focus-visible {
  background: var(--gdColor);
  color: var(--bgColor);
  box-shadow: none;
  text-decoration: none;
}

.debug-launcher:hover .debug-launcher__label, .debug-launcher:focus-visible .debug-launcher__label {
  opacity: 1;
  max-width: 180px;
  padding-left: 14px;
  transform: translateX(0);
}

.debug-launcher:focus-visible {
  outline: 2px solid var(--gdColor);
  outline-offset: 3px;
}

.light-switch {
  --unit: 1px;
  right: calc(8px + env(safe-area-inset-right, 0px));
  top: calc(8px + env(safe-area-inset-top, 0px));
  z-index: 101;
  align-items: center;
  gap: calc(6 * var(--unit));
  min-height: 44px;
  padding: 0 calc(8 * var(--unit));
  color: var(--gdColor);
  cursor: pointer;
  appearance: none;
  background: none;
  border: none;
  display: flex;
  position: fixed;
}

@media (width >= 801px) {
  .light-switch {
    --unit: calc(100vw / 1440);
  }
}

.light-switch[hidden] {
  display: none;
}

.light-switch:focus-visible {
  outline-offset: 3px;
  outline: 2px solid;
}

.light-switch__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.light-switch__track {
  border: 2px solid;
  border-radius: 20px;
  width: 30px;
  height: 20px;
  padding: 3px;
}

.light-switch__track:after {
  content: "";
  background: currentColor;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  transition: transform .2s;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .light-switch__track:after {
    transition: none;
  }
}

.light-switch[aria-checked="true"] .light-switch__track:after {
  transform: translateX(12px);
}

.wave-debug.dg {
  z-index: 100;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 84px - env(safe-area-inset-bottom, 0px));
  letter-spacing: normal;
  position: fixed;
  top: 12px;
  right: 12px;
  overflow-y: auto;
}

.wave-debug.dg .property-name {
  width: 52%;
}

.wave-debug.dg .c {
  width: 48%;
}

.wave-debug.dg .close-button {
  max-width: 100%;
}

.about {
  --about-tile-color: #000;
  --about-icon-filter: brightness(0);
  --bento-unit: 1px;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  padding: calc(40 * var(--bento-unit)) calc(24 * var(--bento-unit));
  overscroll-behavior: contain;
  color: var(--gdColor);
  font: 400 calc(14 * var(--bento-unit))/1.55 "Space Mono", monospace;
  letter-spacing: -.025em;
  z-index: 200;
  pointer-events: none;
  background: none;
  border: 0;
  margin: 0;
  position: fixed;
  inset: 0;
  overflow-y: auto;
}

@media (width <= 700px) {
  .about {
    pointer-events: auto;
    padding: max(16 * var(--bento-unit), env(safe-area-inset-top)) calc(16 * var(--bento-unit)) max(24 * var(--bento-unit), env(safe-area-inset-bottom));
  }
}

@media (width >= 701px) {
  .about {
    --bento-unit: min(100vw / 1440, 100dvh / 898);
  }
}

.about[data-open="true"] {
  display: grid;
}

.about[data-surface="fuchsia"] {
  --about-tile-color: #fff;
  --about-icon-filter: brightness(0) invert(1);
}

.about[data-flight="true"] {
  display: grid;
  overflow-x: clip;
}

.about[hidden] {
  display: none;
}

.about:focus {
  outline: none;
}

.about::selection {
  color: #351322;
  background: #fff;
}

.about a {
  border: 0;
}

.about a:hover {
  text-underline-offset: calc(5 * var(--bento-unit));
  text-decoration: underline;
}

.about :focus-visible {
  outline: calc(2 * var(--bento-unit)) solid currentColor;
  outline-offset: calc(5 * var(--bento-unit));
}

.about__shell {
  width: min(1060 * var(--bento-unit), 100%);
  margin: auto;
}

@media (width <= 700px) {
  .about__shell {
    margin: 0 auto;
  }
}

.about__header, .about__footer {
  pointer-events: auto;
  justify-content: space-between;
  align-items: center;
  gap: calc(20 * var(--bento-unit));
  display: flex;
}

.about__header {
  margin-bottom: calc(16 * var(--bento-unit));
  font-size: calc(11 * var(--bento-unit));
  letter-spacing: .04em;
}

@media (width <= 700px) {
  .about__header {
    z-index: 2;
    gap: calc(8 * var(--bento-unit));
    padding-left: calc(12 * var(--bento-unit));
    border-radius: calc(24 * var(--bento-unit));
    color: #fff;
    backdrop-filter: blur(calc(12 * var(--bento-unit)));
    background: #19040fcc;
    position: sticky;
    top: 0;
  }
}

.about__header-title {
  align-items: center;
  display: flex;
}

.about__header > span > span {
  margin: 0 calc(14 * var(--bento-unit));
  opacity: .45;
}

@media (width <= 700px) {
  .about__header > span > span {
    margin: 0 calc(8 * var(--bento-unit));
  }
}

.about__close {
  width: calc(44 * var(--bento-unit));
  height: calc(44 * var(--bento-unit));
  flex: 0 0 calc(44 * var(--bento-unit));
  border: calc(1 * var(--bento-unit)) solid #fff6;
  color: inherit;
  cursor: pointer;
  font: 300 calc(30 * var(--bento-unit))/1 sans-serif;
  background: #ffffff14;
  border-radius: 50%;
  place-items: center;
  transition: background .2s;
  display: grid;
}

.about__close:hover {
  background: #fff3;
}

.about__grid {
  pointer-events: auto;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas: "design design code motion apps apps"
                       "craft craft intro intro partners partners"
                       "craft craft intro intro partners partners"
                       "note note intro intro contact contact"
                       "social social social social social social";
  grid-template-rows: calc(150 * var(--bento-unit)) calc(155 * var(--bento-unit)) calc(155 * var(--bento-unit)) calc(140 * var(--bento-unit)) calc(110 * var(--bento-unit));
  gap: calc(12 * var(--bento-unit));
  display: grid;
}

@media (width <= 700px) {
  .about__grid {
    gap: calc(12 * var(--bento-unit));
    grid-template-rows: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "intro intro"
                         "design note"
                         "craft craft"
                         "code motion"
                         "partners partners"
                         "apps apps"
                         "contact contact"
                         "social social";
  }
}

.about h1, .about h2 {
  font-weight: 500;
  line-height: 1.02;
}

.about h1 {
  margin: calc(32 * var(--bento-unit)) 0 calc(24 * var(--bento-unit));
  font-size: clamp(40 * var(--bento-unit), 5.1vw, 66 * var(--bento-unit));
}

@media (width <= 700px) {
  .about h1 {
    font-size: clamp(38 * var(--bento-unit), 10vw, 62 * var(--bento-unit));
  }
}

.about h2 {
  margin: calc(24 * var(--bento-unit)) 0 calc(18 * var(--bento-unit));
  font-size: calc(32 * var(--bento-unit));
}

.about__typewriter {
  white-space: nowrap;
  min-height: 1.02em;
}

.about__typewriter:after {
  content: "";
  vertical-align: -.05em;
  background: currentColor;
  width: .045em;
  height: .9em;
  margin-left: .08em;
  animation: .8s step-end infinite about-caret;
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .about__typewriter:after {
    display: none;
  }
}

.about__headr-title {
  align-items: center;
  display: flex;
}

.about__logo {
  width: calc(48 * var(--bento-unit));
  display: inline-block;
}

.about__lead {
  max-width: calc(460 * var(--bento-unit));
  font-size: calc(16 * var(--bento-unit));
}

.about__signature {
  margin-top: calc(28 * var(--bento-unit));
  font-size: calc(10 * var(--bento-unit));
  opacity: .65;
  display: block;
}

.about__tags {
  gap: calc(7 * var(--bento-unit));
  padding-top: calc(28 * var(--bento-unit));
  flex-wrap: wrap;
  margin-top: auto;
  display: flex;
}

.about__tags li {
  padding: calc(5 * var(--bento-unit)) calc(9 * var(--bento-unit));
  border: calc(1 * var(--bento-unit)) solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: calc(30 * var(--bento-unit));
  font-size: calc(10 * var(--bento-unit));
}

.about__contact {
  justify-content: space-between;
  gap: calc(6 * var(--bento-unit));
  flex-wrap: wrap;
  margin: auto 0;
  display: flex;
}

.about__contact span {
  font-size: calc(18 * var(--bento-unit));
}

.about__apps {
  align-items: center;
  gap: calc(28 * var(--bento-unit));
  min-height: calc(96 * var(--bento-unit));
  justify-content: center;
  display: flex;
}

.about__apps img {
  width: auto;
  height: calc(52 * var(--bento-unit));
  filter: var(--about-icon-filter);
  display: block;
}

.about__partners {
  gap: calc(9 * var(--bento-unit)) calc(18 * var(--bento-unit));
  margin-top: calc(20 * var(--bento-unit));
  flex-wrap: wrap;
  display: flex;
}

.about__symbol {
  font-size: calc(48 * var(--bento-unit));
  margin: auto;
}

.about__circles {
  margin: calc(12 * var(--bento-unit)) auto;
}

.about__circles svg {
  width: calc(64 * var(--bento-unit));
  overflow: visible;
}

.about__circles circle {
  --circle-step: 0;
  transform: translate(calc(var(--circle-step) * 320.741px), calc(var(--circle-step) * 384.324px));
  animation: 8s linear infinite about-circle-queue;
  animation-delay: calc((var(--circle-step) + 1) * -2s);
}

.about__circles circle:nth-child(2) {
  --circle-step: 1;
}

.about__circles circle:nth-child(3) {
  --circle-step: 2;
}

.about__circles circle:nth-child(4) {
  --circle-step: -1;
}

@media (prefers-reduced-motion: reduce) {
  .about__circles circle {
    animation: none;
  }
}

.about__socials {
  gap: calc(16 * var(--bento-unit)) calc(28 * var(--bento-unit));
  font-size: calc(13 * var(--bento-unit));
  flex-wrap: wrap;
  display: flex;
}

@media (width <= 700px) {
  .about__socials {
    grid-template-columns: 1fr 1fr;
    width: 100%;
    display: grid;
  }
}

.about__socials li > span {
  opacity: .55;
}

@keyframes about-caret {
  50% {
    opacity: 0;
  }
}

@keyframes about-circle-queue {
  0% {
    opacity: 0;
    transform: translate(-320.741px, -384.324px);
  }

  25% {
    opacity: .5;
  }

  75% {
    opacity: .5;
  }

  100% {
    opacity: 0;
    transform: translate(962.223px, 1152.97px);
  }
}

.about-tile {
  color: var(--about-tile-color);
  padding: calc(24 * var(--bento-unit));
  border-radius: calc(48 * var(--bento-unit));
  border: calc(1 * var(--bento-unit)) solid color-mix(in srgb, currentColor 20%, transparent);
  background: var(--gdColor);
  box-shadow: inset 0 calc(1 * var(--bento-unit)) calc(1 * var(--bento-unit)) #fff6, inset 0 calc(-1 * var(--bento-unit)) calc(1 * var(--bento-unit)) #ffffff1f, 0 calc(12 * var(--bento-unit)) calc(32 * var(--bento-unit)) #14000c1f;
  corner-shape: squircle;
  -webkit-corner-shape: squircle;
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

@supports not ((corner-shape: squircle) or (-webkit-corner-shape: squircle)) {
  .about-tile {
    border-radius: calc(24 * var(--bento-unit));
  }
}

@media (width <= 700px) {
  .about-tile {
    min-height: calc(150 * var(--bento-unit));
    padding: calc(22 * var(--bento-unit));
  }
}

.about-tile--intro {
  --arrival-delay: .3s;
  grid-area: intro;
  justify-content: center;
}

@media (width <= 700px) {
  .about-tile--intro {
    min-height: calc(360 * var(--bento-unit));
  }
}

.about-tile--intro svg {
  width: 65%;
  margin: 0 auto auto;
}

.about-tile--visual h2 {
  margin-top: calc(12 * var(--bento-unit));
}

.about-tile h2 {
  margin: 0 0 calc(12 * var(--bento-unit));
  font-size: calc(30 * var(--bento-unit));
  letter-spacing: -.05em;
}

@media (width <= 700px) {
  .about-tile h2 {
    font-size: calc(16 * var(--bento-unit));
  }
}

.about-tile p {
  font-size: calc(12 * var(--bento-unit));
}

.about-tile .about__apps {
  min-height: 0;
  font-size: calc(48 * var(--bento-unit));
  margin: 0 0 auto;
}

.about-tile .about__partners {
  gap: calc(12 * var(--bento-unit));
  margin-top: auto;
}

.about-tile .about__tags {
  padding-top: calc(18 * var(--bento-unit));
}

.about-tile--design {
  --arrival-delay: 0s;
  grid-area: design;
}

.about-tile--code {
  --arrival-delay: 60ms;
  grid-area: code;
}

.about-tile--motion {
  --arrival-delay: .12s;
  grid-area: motion;
}

.about-tile--apps {
  --arrival-delay: .18s;
  text-align: center;
  grid-area: apps;
}

.about-tile--craft {
  --arrival-delay: .24s;
  grid-area: craft;
}

.about-tile--partners {
  --arrival-delay: .36s;
  grid-area: partners;
}

@media (width <= 700px) {
  .about-tile--partners {
    justify-content: space-between;
    align-items: flex-end;
    gap: calc(36 * var(--bento-unit));
    flex-direction: row;
  }
}

.about-tile--note {
  --arrival-delay: .42s;
  justify-content: space-between;
  align-items: center;
  gap: calc(12 * var(--bento-unit));
  flex-direction: row;
  grid-area: note;
}

@media (width <= 700px) {
  .about-tile--note {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}

@media (width >= 801px) {
  .about-tile--note h2 {
    font-size: calc(24 * var(--bento-unit));
    margin: auto 0;
  }
}

@media (width <= 700px) {
  .about-tile--note h2 {
    font-size: calc(16 * var(--bento-unit));
  }
}

.about-tile__sphere {
  width: calc(68 * var(--bento-unit));
  height: calc(68 * var(--bento-unit));
  pointer-events: none;
  flex-shrink: 0;
  display: block;
}

.about-tile__sphere path {
  stroke-width: 2px;
}

.about-tile--contact {
  --arrival-delay: .48s;
  grid-area: contact;
}

.about-tile--social {
  --arrival-delay: .54s;
  justify-content: space-between;
  align-items: center;
  gap: calc(24 * var(--bento-unit));
  flex-direction: row;
  grid-area: social;
}

@media (width <= 700px) {
  .about-tile--social {
    flex-direction: column;
    align-items: flex-start;
  }
}

.about-tile--intro h1 {
  font-size: calc(36 * var(--bento-unit));
  margin: 0 0 calc(28 * var(--bento-unit));
  letter-spacing: -.05em;
}

@media (width <= 700px) {
  .about-tile--intro h1 {
    font-size: calc(29 * var(--bento-unit));
    text-align: center;
    margin-top: calc(12 * var(--bento-unit));
  }
}

.about-tile--intro .about__lead {
  font-size: calc(15 * var(--bento-unit));
}

.about-tile--intro .about__signature {
  margin-top: calc(30 * var(--bento-unit));
  line-height: 1.7;
}

.about-tile--craft h2, .about-tile--partners h2 {
  font-size: calc(30 * var(--bento-unit));
}

.about-tile--code, .about-tile--motion {
  text-align: center;
  padding: calc(16 * var(--bento-unit)) calc(8 * var(--bento-unit));
  justify-content: center;
}

@media (width <= 700px) {
  .about-tile--code, .about-tile--motion {
    padding: calc(22 * var(--bento-unit));
  }
}

.about-tile--code h2, .about-tile--motion h2 {
  font: calc(11 * var(--bento-unit))/1.4 "Space Mono", monospace;
  letter-spacing: -.05em;
  margin: 0 0 calc(10 * var(--bento-unit));
}

@media (width <= 700px) {
  .about-tile--craft {
    min-height: calc(280 * var(--bento-unit));
  }

  .about-tile--contact .about__contact {
    font-size: calc(18 * var(--bento-unit));
  }
}

.about-tile--social h2 {
  margin-bottom: 0;
}
/*# sourceMappingURL=app.css.map */