:root {
  --bg:#090e16;
  --text:#eef5ff;
  --muted:#9cacc2;
  --accent:#8ac5ff;
}
body {
  background: #090e16;
  font-size: 12px;
}
.app {
  height: 100vh;
  min-height: 0;
  max-width: 960px;
  padding: 16px 16px 0;
  background:
    radial-gradient(
      ellipse at 90% -5%,
      #27487555,
      transparent 40%),
    linear-gradient(
      130deg,
      #111c2a77,
      transparent 60%);
  overflow: hidden;
}
header {
  margin: 0 0 15px;
  flex-shrink: 0;
}
.wordmark {
  grid-gap: 10px;
  gap: 10px;
}
.brand-mark {
  width: 37px;
  height: 38px;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.brand-mark svg {
  width: 32px;
  height: 32px;
  stroke: #94cdff;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 8px #5a9eff44);
}
h1 {
  font-size: 17px;
  letter-spacing: -.65px;
}
h1 span {
  font-size: 7px;
  letter-spacing: 1.1px;
  color: #8399b7;
  margin-top: 3px;
}
.header-command {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #abcfff25;
  background: rgba(24, 40, 59, .5);
  border-radius: 8px;
}
.header-command svg {
  width: 14px;
  height: 14px;
}
.context {
  flex-shrink: 0;
  border: 1px solid #9ec6ff18;
  border-left: 2px solid #74c9c0;
  border-radius: 4px;
  background:
    linear-gradient(
      90deg,
      rgba(28, 56, 64, .275),
      rgba(24, 41, 59, .15));
  padding: 10px;
  margin-bottom: 12px;
  grid-gap: 8px;
  gap: 8px;
}
#comp-name {
  font-size: 11px;
  color: #d4e4f6;
}
.dot {
  width: 5px;
  height: 5px;
}
.dot.connected {
  box-shadow: 0 0 10px rgba(118, 223, 201, .333);
}
#selection-count {
  font-size: 9px;
  color: #b7d9ff;
  background: rgba(133, 185, 255, .082);
  border: 1px solid #8cbaff1c;
  border-radius: 3px;
  padding: 2px 6px;
}
nav {
  flex-shrink: 0;
  position: relative;
  isolation: isolate;
  grid-gap: 0;
  gap: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #93b3df24;
  border-radius: 0;
  padding: 0;
  margin: 0 0 18px;
  box-shadow: none;
}
.tab {
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 10px;
  color: #9cb0cc;
  padding: 11px 1px;
  position: relative;
  z-index: 1;
}
.tab.active {
  background: none;
  border: 0;
  box-shadow: none;
  color: #e4f3ff;
}
.tab:hover:not(:disabled) {
  background: rgba(106, 163, 226, .043);
  box-shadow: none;
  border: 0;
}
.nav-marker {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      #8ecaff,
      #80e1d1);
  box-shadow: 0 0 9px rgba(137, 202, 255, .3);
  transform: translateX(var(--nav-x,0px));
  width: var(--nav-width,55px);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), width .28s;
  pointer-events: none;
  z-index: 2;
}
main {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  padding: 1px 3px 18px 1px;
  scrollbar-gutter: stable;
}
.view-title {
  margin-bottom: 17px;
}
h2 {
  font-size: 21px;
  letter-spacing: -.65px;
  font-weight: 600;
}
h3 {
  font-size: 12px;
}
.eyebrow {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #7c9bbd;
  margin-bottom: 7px;
}
.layer-actions {
  display: flex;
  flex-direction: column;
  grid-gap: 17px;
  gap: 17px;
}
.create-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
}
.group-caption {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 8px;
  letter-spacing: 1.3px;
  color: #9ab0cb;
  margin: 0 0 3px;
}
.group-caption > span {
  color: #516e93;
  font-size: 8px;
  letter-spacing: 1px;
}
.tool {
  border-radius: 7px;
  min-height: 0;
  grid-gap: 12px;
  gap: 12px;
  padding: 14px 12px;
  font-size: 12px;
  line-height: 1.35;
  background:
    linear-gradient(
      135deg,
      rgba(41, 67, 97, .584),
      rgba(21, 34, 51, .8));
  border: 1px solid #a9d3ff26;
  box-shadow: inset 0 1px rgba(225, 242, 255, .03), 0 5px 12px rgba(0, 0, 0, .133);
  color: #e2efff;
  will-change: auto;
}
.tool svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
  color: #a8d4ff;
}
.tool small {
  font-size: 9px;
  color: #94abc7;
  margin-top: 5px;
  line-height: 1.45;
}
.tool:after {
  border: 0;
  background:
    linear-gradient(
      125deg,
      #8dcaff09,
      transparent 40%);
  border-radius: inherit;
}
.tool:before {
  background:
    radial-gradient(
      180px circle at var(--mx,50%) var(--my,50%),
      #abd8ff30,
      transparent 75%);
}
.tool:hover:not(:disabled) {
  border-color: rgba(185, 223, 255, .42);
  box-shadow: inset 0 1px rgba(233, 247, 255, .09), 0 7px 20px rgba(0, 0, 0, .2);
  background-color: #25425c;
}
.create-group > .tool {
  min-height: 108px;
  justify-content: space-between;
}
.compose-group {
  display: flex;
  flex-direction: column;
  grid-gap: 0;
  gap: 0;
  border: 1px solid #a3cfff20;
  border-radius: 8px;
  background:
    linear-gradient(
      110deg,
      rgba(29, 43, 61, .85),
      rgba(16, 28, 43, .9));
  overflow: visible;
}
.compose-group > .group-caption {
  padding: 10px 12px;
  margin: 0;
  background: rgba(131, 185, 251, .027);
  border-bottom: 1px solid #adcfff16;
  border-radius: 8px 8px 0 0;
}
.compose-group > .tool {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  min-height: 66px;
  border: 0;
  border-bottom: 1px solid #a3cfff13;
  border-radius: 0;
  padding: 13px 12px;
  background: transparent;
  box-shadow: none;
  grid-gap: 13px;
  gap: 13px;
}
.compose-group > .tool:last-child {
  border-bottom: 0;
  border-radius: 0 0 8px 8px;
}
.compose-group > .tool svg {
  width: 18px;
  height: 18px;
  color: #90bff0;
}
.compose-group > .tool > span {
  flex: 1;
}
.compose-group > .tool:after {
  content: "↗";
  position: static;
  width: 14px;
  height: auto;
  background: none;
  opacity: .45;
  font-size: 13px;
  transform: translate(0, 0);
  transition: opacity .2s, transform .2s;
  color: #aed7ff;
}
.compose-group > .tool:hover:after {
  opacity: 1;
  transform: translate(2px, -2px);
}
.compose-group > .tool:hover {
  background: rgba(121, 180, 255, .035);
}
.compose-group .tool small {
  font-size: 9px;
  margin-top: 3px;
}
.null-precomp {
  grid-column: auto;
}
.hint {
  font-size: 10px;
  color: #90a7c3;
  line-height: 1.6;
}
.section-label {
  color: #9ab1cd;
  font-size: 8px;
  letter-spacing: 1.3px;
}
.second {
  margin-top: 22px;
}
.animation-links {
  border: 0;
  border-left: 1px solid #83b8f139;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.animation-links button {
  padding: 10px 11px;
  border-bottom: 0;
  font-size: 11px;
  color: #b3c9e4;
  background: none;
}
.animation-links button > span:last-child {
  color: #71b7f8;
  transition: transform .2s;
}
.animation-links button:hover > span:last-child {
  transform: translateX(3px);
}
.animation-links button:hover {
  background: rgba(95, 155, 235, .035);
}
.feature-group {
  border: 1px solid #a0c9fc1d;
  border-radius: 8px;
  background:
    linear-gradient(
      105deg,
      rgba(32, 48, 71, .41),
      rgba(18, 32, 53, .59));
  padding: 13px;
  margin: 14px 0;
}
.feature-group > summary {
  font-size: 11px;
  color: #d1e6ff;
  outline-offset: 6px;
}
.feature-group > summary > span {
  font-size: 8px;
  color: #849dbd;
}
.feature-group[open] > :not(summary) {
  animation: section-in .24s ease-out;
}
@keyframes section-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.card {
  border-radius: 8px;
  border-color: rgba(160, 201, 255, .12);
  background:
    linear-gradient(
      115deg,
      rgba(37, 57, 81, .44),
      rgba(18, 31, 48, .667));
}
.search {
  background: rgba(9, 17, 30, .78);
  border-radius: 6px;
  border-color: rgba(139, 188, 255, .17);
}
.search input {
  font-size: 12px;
  color: #deeeff;
}
.preset-list {
  border-radius: 7px;
  border-color: rgba(146, 182, 224, .13);
}
.preset-row {
  min-height: 54px;
}
.preset-select strong {
  font-size: 12px;
}
.preset-select small {
  font-size: 9px;
  color: #93a8c3;
}
.preset-row.chosen {
  background:
    linear-gradient(
      90deg,
      rgba(65, 139, 230, .192),
      rgba(96, 175, 255, .035));
}
.preset-row.chosen .preset-select strong {
  color: #dbedff;
}
.selection-tray {
  border-radius: 7px;
}
.primary {
  border-radius: 6px;
  background:
    linear-gradient(
      120deg,
      #a4d4ff,
      #81baf1);
  color: #102b45;
  border-color: rgba(209, 234, 255, .333);
  box-shadow: inset 0 1px rgba(239, 250, 255, .333), 0 4px 14px rgba(30, 121, 222, .125);
  min-height: 40px;
}
.primary:hover:not(:disabled) {
  box-shadow: inset 0 1px rgba(255, 255, 255, .533), 0 5px 22px rgba(53, 133, 215, .22);
  background:
    linear-gradient(
      120deg,
      #c2e5ff,
      #91c8ff);
}
.segmented {
  border-radius: 6px;
}
.segmented button {
  border-radius: 4px;
}
.segmented button.selected {
  background:
    linear-gradient(
      130deg,
      #34516f,
      #263e5b);
  border-color: rgba(162, 210, 255, .173);
}
.curve-graph {
  border-radius: 5px;
}
.curve-graph .curve {
  stroke: #9ed5ff;
}
.curve-graph .endpoint {
  fill: #90e2d2;
}
.curve-card .view-title:before {
  content: "";
  width: 4px;
  height: 12px;
  background: #83bfff;
  border-radius: 1px;
}
.curve-card[data-curve=out] .view-title:before {
  background: #8bdccb;
}
.curve-card .view-title h3 {
  flex: 1;
}
.saved-row {
  border-color: rgba(173, 207, 255, .094);
}
.row-actions button,
.command-row button {
  border-radius: 5px;
}
.command-row > button:first-child {
  background:
    linear-gradient(
      110deg,
      rgba(35, 57, 81, .44),
      rgba(21, 35, 53, .627));
  border-color: rgba(161, 200, 255, .1);
  padding: 11px;
}
.motion-preview {
  border-radius: 6px;
}
.fields input,
.fields select {
  font-size: 11px;
}
.preview {
  margin-bottom: 10px;
  flex-shrink: 0;
}
footer {
  position: relative;
  flex-shrink: 0;
  border-top: 1px solid #a3caff21;
  background:
    linear-gradient(
      90deg,
      rgba(20, 35, 57, .85),
      rgba(11, 22, 36, .9));
  padding: 11px 10px 12px;
  margin: 0 -16px;
  box-shadow: 0 -8px 22px rgba(8, 13, 22, .24);
  z-index: 3;
}
#status {
  font-size: 10px;
  line-height: 1.5;
  min-height: 15px;
  color: #adc7e8;
}
#status.error {
  color: #ffb4a7;
}
.status-update {
  animation: status-in .22s ease-out;
}
@keyframes status-in {
  from {
    opacity: .3;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
footer > div {
  font-size: 8px;
  color: #7a97bb;
  margin-top: 7px;
}
kbd {
  font: 8px "Segoe UI", sans-serif;
  background: rgba(169, 207, 255, .043);
  border: 1px solid #a9cfff24;
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 3px;
  color: #adcaec;
}
.working footer:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      #9cddff,
      transparent);
  animation: work-sheen 1.4s ease-in-out infinite;
}
@keyframes work-sheen {
  from {
    transform: scaleX(.1);
    opacity: .3;
  }
  50% {
    opacity: 1;
  }
  to {
    transform: scaleX(1);
    opacity: .3;
  }
}
.button-pressed:not(:disabled) {
  animation: press-feedback .22s ease-out;
}
@keyframes press-feedback {
  50% {
    filter: brightness(1.15);
  }
}
button:focus-visible,
summary:focus-visible {
  outline: 2px solid #9bccff;
  outline-offset: 3px;
}
button:disabled {
  color: #8fa3bd;
  background-color: #1b2a3b;
  border-color: rgba(173, 207, 255, .082);
}
@media (min-width: 520px) {
  .app {
    padding: 22px 24px 0;
  }
  .layer-actions {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.2fr);
    grid-gap: 16px;
    gap: 16px;
    align-items: start;
  }
  .create-group {
    grid-template-columns: 1fr;
  }
  .create-group > .tool {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 91px;
  }
  .create-group > .tool > span {
    flex: 1;
  }
  .compose-group > .tool {
    min-height: 68px;
  }
  .group-caption {
    min-height: 23px;
  }
  .compose-group > .group-caption {
    min-height: 34px;
  }
  .tab {
    font-size: 12px;
  }
  footer {
    margin: 0 -24px;
    padding: 12px 24px;
  }
  .view {
    max-width: 850px;
    margin: auto;
  }
  .feature-group > summary {
    font-size: 12px;
  }
  .feature-group > summary > span {
    font-size: 10px;
  }
}
@media (max-width: 310px) {
  .app {
    padding: 12px 10px 0;
  }
  footer {
    margin: 0 -10px;
    padding: 10px;
  }
  .tool {
    padding: 12px 9px;
    font-size: 11px;
  }
  .tool small {
    font-size: 8px;
  }
  .create-group {
    grid-gap: 7px;
    gap: 7px;
  }
  .create-group > .tool {
    min-height: 103px;
  }
  h2 {
    font-size: 19px;
  }
  .tab {
    font-size: 9px;
  }
  .context {
    padding: 8px;
  }
  h1 {
    font-size: 16px;
  }
  .compose-group > .tool {
    min-height: 63px;
  }
  .group-caption {
    font-size: 7px;
  }
  .feature-group {
    padding: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-marker {
    transition: none;
  }
  .status-update,
  .working footer:before,
  .button-pressed,
  .feature-group[open] > :not(summary) {
    animation: none !important;
  }
}