/* This should prolly be on the Theme but for some reason it doesn't work. */
  @import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500&display=swap');

  .actions.svelte-wfsvce, .mode.svelte-wfsvce, .title.svelte-wfsvce {
    flex-grow: 1;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .actions.svelte-wfsvce {
    box-sizing: border-box;
    width: 300px;
    padding: 0 1.5rem;
  }
  .mode.svelte-wfsvce {
    justify-content: flex-end;
  }
  .title.svelte-wfsvce {
    padding: 0 1rem;
    white-space: nowrap;
    text-align: center;
  }
  .editor.svelte-wfsvce {
    height: 100%;
    overflow: hidden;
    background: #000;
    display: grid;
  }
  .editor.horizontal.svelte-wfsvce {
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr;
    grid-template-areas: 'viewport ui';
  }
  .editor.vertical.svelte-wfsvce {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: 'viewport' 'ui';
  }
  .viewport.svelte-wfsvce {
    position: relative;
    grid-area: viewport;
    overflow: hidden;
  }
  .toolbar.svelte-wfsvce {
    position: absolute;
    top: 1rem;
    left: 1rem;
  }
  .requests.svelte-wfsvce {
    position: absolute;
    top: 1rem;
    right: 1rem;
  }
  .ui.svelte-wfsvce {
    grid-area: ui;
    position: relative;
    background: var(--background);
    overflow: hidden;
  }
  .editor.horizontal.svelte-wfsvce .ui:where(.svelte-wfsvce) {
    width: 300px;
  }
  .editor.vertical.svelte-wfsvce .ui:where(.svelte-wfsvce) {
    height: 300px;
  }

  .wrapper.svelte-k7c1sj {
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'nav listing';
  }
  .nav.svelte-k7c1sj {
    grid-area: nav;
  }
  .listing.svelte-k7c1sj {
    grid-area: listing;
    overflow: hidden;
  }
  .header.svelte-k7c1sj {
    display: flex;
    align-items: center;
  }
  .header.svelte-k7c1sj button:where(.svelte-k7c1sj) {
    margin-left: 1rem;
    font-size: 0.8rem;
  }

  .wrapper.svelte-tcvuzq {
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'info viewport';
  }

  @media (max-width: 700px) {
    .wrapper.svelte-tcvuzq {
      grid-template-columns: 1fr;
      grid-template-rows: 2fr 3fr;
      grid-template-areas: 'viewport' 'info';
    }
    .info.svelte-tcvuzq {
      border-top: 1px solid #000;
      border-right: 0;
    }
  }

  .brand.svelte-tcvuzq  {
    margin-bottom: 1rem;
  }

  h2.svelte-tcvuzq {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4em;
    text-align: center;
    margin: 1rem;
  }

  .info.svelte-tcvuzq {
    grid-area: info;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    background: #1a1a1a;
    color: #fff;
    border-right: 1px solid #000;
  }

  .login.svelte-tcvuzq {
    margin: 2rem 0 1rem;
  }

  .viewport.svelte-tcvuzq {
    grid-area: viewport;
    background: #000;
    overflow: hidden;
  }

  .wrapper.svelte-1345yjv {
    background: #000;
  }
  .wrapper.svelte-1345yjv, .viewport.svelte-1345yjv {
    height: 100%;
  }
  .viewport.svelte-1345yjv {
    position: relative;
    overflow: hidden;
  }
  .toolbar.svelte-1345yjv {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 1rem;
  }
  .info.svelte-1345yjv {
    grid-area: info;
    color: #fff;
  }
  .creator.svelte-1345yjv {
    color: #eee;
  }
  .animations.svelte-1345yjv {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
  }
  .animations.svelte-1345yjv > div:where(.svelte-1345yjv) {
    background: var(--background);
    border-radius: 2px;
    width: 150px;
  }
  .animations.svelte-1345yjv .toggle:where(.svelte-1345yjv), .animations.svelte-1345yjv .action:where(.svelte-1345yjv) {
    display: flex;
    align-items: center;
  }
  .animations.svelte-1345yjv .action:where(.svelte-1345yjv) {
    padding: 0.25rem;
    border: 1px solid transparent;
    cursor: pointer;
  }
  .animations.svelte-1345yjv .action:where(.svelte-1345yjv):hover {
    border-color: var(--primary-strong);
  }
  .animations.svelte-1345yjv .action.active:where(.svelte-1345yjv) {
    background: var(--primary-strong);
    color: var(--header-color);
  }
  .brand.svelte-1345yjv, .actions.svelte-1345yjv {
    margin-left: auto;
    display: flex;
  }
  .brand.svelte-1345yjv > a:where(.svelte-1345yjv) {
    color: #fff;
  }
  .actions.svelte-1345yjv {
    font-size: 1.5em;
    align-items: center;
  }
  .actions.svelte-1345yjv > div:where(.svelte-1345yjv):first-child {
    margin-right: 0.25rem;
  }
  .actions.svelte-1345yjv > div:where(.svelte-1345yjv):last-child {
    margin-left: 0.25rem;
  }
  .actions.svelte-1345yjv > div:where(.svelte-1345yjv) > button:where(.svelte-1345yjv) {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    flex-grow: 0;
    background: var(--primary-strong);
    color: var(--header-color);
    padding: 0.5rem;
    border-radius: 2px;
  }
  .icon.svelte-1345yjv {
    display: flex;
    margin-right: 0.5rem;
  }

  :root {
    font-size: 16px; /* 1 rem === 16px */

    --header-background: #111;
    --header-color: #fff;
    --error: #F36262;
    --primary-strong: #32C09E;
    --primary-normal: #DCEFEA;
    --primary-light: #EAF2F0;

    --background: #F1F1F1;
    --gray-strong-1: #595959;
    --gray-strong-2: #828282;
    --gray-light-1: #C4C4C4;
    --gray-light-2: #DBDBDB;
    --secondary-strong: #ACB4F8;
    --secondary-normal: #D7D9EB;
    --secondary-light: #EAEBF2;
  }

  :root.dark {
    --background: #161616;
    --gray-strong-1: #F7F7F7;
    --gray-strong-2: #C2C2C2;
    --gray-light-1: #797979;
    --gray-light-2: #4E4E4E;
    --secondary-strong: #47426C;
    --secondary-normal: #57536E;
    --secondary-light: #6B687D;
  }

  body {
    cursor: default;
    margin: 0;
    user-select: none;
    overflow: hidden;
    font-family: 'Jost', Arial, sans-serif;
    font-size: 0.75rem; /* 12px */
    font-weight: 400;
    background: var(--background);
    color: var(--gray-strong-1);
  }

  button, input, textarea {
    background: transparent;
    color: inherit;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
  }

  button {
    cursor: pointer;
    white-space: nowrap;
  }

  button:disabled, input:disabled, textarea:disabled {
    opacity: 0.5;
    cursor: default;
  }

  input, textarea {
    width: 100%;
  }

  input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  canvas, img, svg {
    vertical-align: middle;
  }

  svg {
    fill: currentColor;
  }

  ::-webkit-scrollbar {
    width: 8px;
    background-color: rgba(0, 0, 0, 0);
  }

  ::-webkit-scrollbar:hover {
    background-color: rgba(0, 0, 0, 0);
  }

  ::-webkit-scrollbar-thumb:vertical {
    background: var(--gray-light-1);
    border-radius: 100px;
  }

  ::-webkit-scrollbar-thumb:vertical:active {
    background: var(--gray-strong-2);
  }

  .tooltip.svelte-1k5ej8o {
    position: absolute;
    display: flex;
    background: var(--gray-strong-1);
    color: var(--gray-light-2);
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, .5));
    border-radius: 4px;
    padding: 0.5rem;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
  }
  
  .tip.svelte-1k5ej8o {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0px;
    height: 0px;
    border-left: 8px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 8px solid var(--gray-strong-1);
  }

  .left.svelte-1k5ej8o .tip:where(.svelte-1k5ej8o) {
    transform: translate(-150%, -100%);
  }

  .center.svelte-1k5ej8o {
    transform: translate(-50%, 0);
  }

  .center.svelte-1k5ej8o .tip:where(.svelte-1k5ej8o) {
    transform: translate(-50%, -100%);
  }

  .right.svelte-1k5ej8o {
    transform: translate(-100%, 0);
  }

  .right.svelte-1k5ej8o .tip:where(.svelte-1k5ej8o) {
    transform: translate(100%, -100%);
  }

  iframe.svelte-1y1xj1w {
    display: none;
  }

  .debug.svelte-1ld52wu {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #fff;
    text-align: right;
  }

  .debug.svelte-1ld52wu > a:where(.svelte-1ld52wu) {
    cursor: pointer;
    text-decoration: underline;
  }

  button.svelte-9zjz52 {
    display: flex;
    align-items: center;
    background: var(--primary-strong);
    color: var(--header-color);
    padding: 0.5rem;
    border-radius: 2px;
  }

  .icon.svelte-9zjz52 {
    margin-right: 0.75rem;
    filter: drop-shadow(0px 0px 2px rgba(234, 242, 240,0.6));
  }

  .wrapper.svelte-1syckee {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 'header' 'route';
  }

  .header.svelte-1syckee {
    grid-area: header;
  }

  .route.svelte-1syckee {
    grid-area: route;
    overflow-y: overlay;
  }

  .action.svelte-1x9nctc {
    box-sizing: border-box;
    width: 50%;
    display: flex;
  }

  .left.svelte-1x9nctc {
    padding-right: 0.5rem;
  }

  .right.svelte-1x9nctc {
    padding-left: 0.5rem;
  }

  .action.svelte-1x9nctc > button:where(.svelte-1x9nctc) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    padding: 0.25rem;
    border-radius: 2px;
    border: 1px solid var(--gray-light-1);
  }

  .action.svelte-1x9nctc .icon:where(.svelte-1x9nctc) {
    display: flex;
    margin-right: 0.5rem;
  }

  .action.svelte-1x9nctc > button.active:where(.svelte-1x9nctc) {
    border-color: var(--primary-strong);
    background: var(--primary-strong);
    color: var(--header-color);
  }

  .toggle.svelte-1ojr2t2 {
    box-sizing: border-box;
    height: 100%;
    display: flex;
    align-items: center;
    text-transform: capitalize;
    min-width: 150px;
    height: 100%;
    padding: 0 1rem;
  }

  .icon.svelte-1ojr2t2 {
    display: flex;
    margin-left: auto;
  }

  .option.svelte-1ojr2t2 {
    padding: 0.5rem;
    text-transform: capitalize;
    border: 1px solid transparent;
    text-align: left;
  }

  .option.svelte-1ojr2t2:hover {
    border-color: var(--primary-strong);
  }

  .option.active.svelte-1ojr2t2 {
    background: var(--primary-strong);
    color: var(--header-color);
  }

  .request.svelte-cvakev {
    display: flex;
    flex-direction: column;
    background: #222;
    box-sizing: border-box;
    padding: 0.5rem;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .5);
  }

  .info.svelte-cvakev {
    text-align: center;
    margin-bottom: 0.5rem;
  }

  .toolbar.svelte-1gppyuk {
    display: flex;
    flex-direction: column;
    background: var(--background);
    box-sizing: border-box;
    padding: 0.25rem;
    width: 60px;
    font-size: 0.85em;
    border-radius: 4px;
    box-shadow: 0 0 8px rgb(0, 0, 0, .5);
  }
  button.svelte-1gppyuk {
    padding: 0.5rem 0;
  }
  .active.svelte-1gppyuk {
    background: var(--primary-strong);
    color: #fff;
    cursor: default;
  }

  .wrapper.svelte-1mfqx1f {
    height: 100%;
    overflow: hidden;
  }

  .wrapper.svelte-ra5pc0 {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .message.svelte-ra5pc0 {
    font-size: 1.25rem;
    padding: 1rem;
    text-align: center;
  }

  .wrapper.svelte-jbcqsa {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 'header' 'scenes';
  }
  .header.svelte-jbcqsa {
    grid-area: header;
    position: relative;
    z-index: 1;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--header-background);
    color: var(--header-color);
  }
  .header.svelte-jbcqsa h2:where(.svelte-jbcqsa) {
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0;
  }
  .scenes.svelte-jbcqsa {
    grid-area: scenes;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem;
    overflow-y: overlay;
  }
  .scene.svelte-jbcqsa {
    margin: 1rem;
    display: flex;
    width: 384px;
    height: 384px;
    background: #000;
    color: #fff;
    border-radius: 4px;
    position: relative;
  }
  .screenshot.svelte-jbcqsa {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    border-radius: 4px;
  }
  .info.svelte-jbcqsa {
    position: absolute;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 1rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, .2);
    border-radius: 0 0 4px 4px;
    backdrop-filter: blur(4px);
  }
  .creator.svelte-jbcqsa {
    color: #eee;
  }
  .favorites.svelte-jbcqsa {
    display: flex;
    align-items: center;
    color: #ddd;
  }
  .lock.svelte-jbcqsa {
    display: flex;
    margin-right: 0.25rem;
  }
  .filters.svelte-jbcqsa {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .filter.svelte-jbcqsa {
    width: 100px;
    margin-right: 1.5rem;
  }
  .toggle.svelte-jbcqsa, .action.svelte-jbcqsa {
    display: flex;
    align-items: center;
  }
  .action.svelte-jbcqsa {
    padding: 0.25rem;
    border: 1px solid transparent;
    cursor: pointer;
  }
  .action.svelte-jbcqsa:hover {
    border-color: var(--primary-strong);
  }
  .action.active.svelte-jbcqsa {
    background: var(--primary-strong);
    color: var(--header-color);
  }
  .pagination.svelte-jbcqsa {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .page.svelte-jbcqsa {
    min-width: 26px;
    margin: 0 1rem;
    text-align: center;
  }

  .nav.svelte-plbroz {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--header-background);
    color: var(--header-color);
  }
  .nav.svelte-plbroz .link:where(.svelte-plbroz) {
    position: relative;
    display: flex;
    padding: 1.25rem 2rem;
  }
  .nav.svelte-plbroz .active:where(.svelte-plbroz) {
    background: rgba(50, 192, 158, 0.1);
  }
  .nav.svelte-plbroz .active:where(.svelte-plbroz)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 100%;
    background: var(--primary-strong);
  }

  .count.svelte-1dj4z0r {
    margin-left: 0.5rem;
  }

  .select.svelte-18r22d0 {
    flex-grow: 1;
    position: relative;
  }

  .toggle.svelte-18r22d0 {
    display: flex;
    align-items: center;
    height: 24px;
    border: 1px solid transparent;
    border-radius: 2px;
    padding: 0 0.25rem;
    cursor: pointer;
  }

  .icon.svelte-18r22d0 {
    margin-left: 0.5rem;
    color: var(--gray-light-1);
  }

  .toggle.disabled.svelte-18r22d0 {
    opacity: 0.5;
  }

  .toggle.open.svelte-18r22d0, .toggle.svelte-18r22d0:hover {
    border-color: var(--gray-light-1);
  }

  .toggle.open.svelte-18r22d0 {
    border-radius: 2px 2px 0 0;
  }

  .toggle.open.svelte-18r22d0 .icon:where(.svelte-18r22d0), .toggle.svelte-18r22d0:hover .icon:where(.svelte-18r22d0) {
    margin-left: auto;
    color: var(--gray-strong-1);
  }

  .actions.svelte-18r22d0 {
    box-sizing: border-box;
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 0;
    width: 100%;
    background: var(--background);
    color: var(--gray-strong-1);
    border: 1px solid var(--gray-light-1);
    border-radius: 0 0 2px 2px;
    z-index: 50;
  }

  .actions.bottom.svelte-18r22d0 {
    top: 100%;
    border-top: 0;
  }

  .actions.top.svelte-18r22d0 {
    bottom: 100%;
    border-bottom: 0;
  }

  .wrapper.svelte-1ya2jza {
    padding: 1rem;
  }

  .field.svelte-1ya2jza {
    margin-bottom: 0.5rem;
  }

  .field.svelte-1ya2jza:last-child {
    margin-bottom: 0;
  }

  .field.svelte-1ya2jza h3:where(.svelte-1ya2jza) {
    font-weight: 500;
    margin: 0;
  }

  .visibility.svelte-1ya2jza {
    display: flex;
    align-items: center;
  }

  .visibility.svelte-1ya2jza > label:where(.svelte-1ya2jza) {
    margin: 0.5rem;
    cursor: pointer;
  }

  .wrapper.svelte-15sohbw {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 'toolbar' 'animation' 'viewport';
  }
  
  .toolbar.svelte-15sohbw, .viewport.svelte-15sohbw {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .toolbar.svelte-15sohbw { 
    grid-area: toolbar;
    background: var(--header-background);
    color: var(--header-color);
    padding: 0.5rem 0;
    z-index: 3;
  }

  .time.svelte-15sohbw {
    width: 220px;
    display: flex;
    justify-content: center;
  }

  .time.svelte-15sohbw > div:where(.svelte-15sohbw) {
    width: 52px;
  }

  .controls.svelte-15sohbw {
    display: flex;
  }

  .controls.svelte-15sohbw > button:where(.svelte-15sohbw) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 0.5rem;
    border-radius: 2px;
  }

  .actions.svelte-15sohbw {
    display: flex;
    align-items: center;
    margin-left: auto;
    width: 150px;
    padding-right: 1rem;
  }

  .actions.svelte-15sohbw .toggle:where(.svelte-15sohbw), .actions.svelte-15sohbw .action:where(.svelte-15sohbw) {
    display: flex;
    align-items: center;
  }
  .actions.svelte-15sohbw .action:where(.svelte-15sohbw) {
    padding: 0.25rem;
    border: 1px solid transparent;
    cursor: pointer;
  }
  .actions.svelte-15sohbw .action:where(.svelte-15sohbw):hover {
    border-color: var(--primary-strong);
  }
  .actions.svelte-15sohbw .action.active:where(.svelte-15sohbw), .controls.svelte-15sohbw > button.active:where(.svelte-15sohbw) {
    background: var(--primary-strong);
    color: var(--header-color);
  }

  .viewport.svelte-15sohbw {
    grid-area: viewport;
    background: var(--background);
    z-index: 3;
  }

  .animation.svelte-15sohbw {
    grid-area: animation;
    overflow: hidden;
    overflow-y: scroll;
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'items timeline';
  }

  .items.svelte-15sohbw {
    grid-area: items;
    position: relative;
    background: var(--background);
    z-index: 1;
  }

  .timeline.svelte-15sohbw {
    grid-area: timeline;
    overflow: hidden;
  }

  .pan.svelte-15sohbw {
    position: relative;
    min-height: 100%;
    background-image: 
      repeating-linear-gradient(90deg, rgba(0, 0, 0, .1) -1px, rgba(0, 0, 0, .1) 1px, transparent 1px, transparent var(--notch)),
      repeating-linear-gradient(90deg, rgba(0, 0, 0, .1) -1px, rgba(0, 0, 0, .1) 1px, transparent 1px, transparent var(--second));
  }

  .layer.svelte-15sohbw, .item.svelte-15sohbw {
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 220px;
    height: 32px;
    padding: 0 1rem 0 1.5rem;
    border: 1px solid transparent;
    overflow: hidden;
  }

  .layer.hover.svelte-15sohbw, .item.hover.svelte-15sohbw {
    border-color: var(--primary-strong);
  }

  .item.active.svelte-15sohbw {
    background: var(--secondary-light);
  }

  .layer.svelte-15sohbw {
    padding: 0;
  }

  .layer.svelte-15sohbw > div:where(.svelte-15sohbw) {
    display: flex;
    align-items: center;
    height: 100%;
  }

  .layer.svelte-15sohbw > div:where(.svelte-15sohbw):first-child {
    padding: 0 0.4375rem;
  }

  .layer.svelte-15sohbw > div:where(.svelte-15sohbw):last-child {
    padding-right: 1rem;
  }

  .layer.svelte-15sohbw > div:where(.svelte-15sohbw):nth-child(2) {
    flex-grow: 1;
  }
  
  .name.svelte-15sohbw {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lock.svelte-15sohbw {
    margin-left: auto;
    display: none;
    color: var(--gray-strong-2);
    cursor: pointer;
  }

  .layer.svelte-15sohbw:hover .lock:where(.svelte-15sohbw), .item.svelte-15sohbw:hover .lock:where(.svelte-15sohbw), .lock.enabled.svelte-15sohbw {
    display: flex;
  }

  .primitive.svelte-15sohbw {
    display: flex;
    margin-right: 0.5rem;
  }

  .playhead.svelte-15sohbw {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    margin-left: -2px;
    background: var(--primary-strong);
    z-index: 2;
  }

  .selected.svelte-15sohbw {
    background: var(--secondary-normal);
  }

  .selected.svelte-15sohbw .lock.enabled:where(.svelte-15sohbw) {
    color: #fff;
  }

  .top.svelte-4ty12m {
    transform: rotate(-90deg);
  }
  .bottom.svelte-4ty12m {
    transform: rotate(90deg);
  }
  .right.svelte-4ty12m {
    transform: rotate(180deg);
  }

  .dropdown.svelte-h2ho2c {
    position: relative;
    height: 100%;
  }

  .actions.svelte-h2ho2c {
    box-sizing: border-box;
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 100%;
    width: 100%;
    min-width: 150px;
    background: var(--background);
    color: var(--gray-strong-1);
    border: 1px solid var(--gray-light-1);
    border-radius: 0 0 2px 2px;
    z-index: 50;
  }

  .actions.left.svelte-h2ho2c {
    left: 0;
  }

  .actions.center.svelte-h2ho2c {
    left: 50%;
  }

  .actions.right.svelte-h2ho2c {
    right: 0;
  }

  a.svelte-18jn23n {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    outline: none;
    text-decoration: none;
  }

  .dialog.svelte-y1g1i3 {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(4px);
    z-index: 100;
  }

  .wrapper.svelte-y1g1i3 {
    position: absolute;
    border-radius: 4px;
    left: 50%;
    top: 20%;
    color: var(--gray-strong-1);
    background: var(--background);
    box-shadow: 0 0 8px rgba(0, 0, 0, .5);
    width: 400px;
    margin-left: -200px;
  }

  .small.svelte-y1g1i3 {
    width: 320px;
    margin-left: -160px;
  }

  .wide.svelte-y1g1i3 {
    width: 700px;
    margin-left: -350px;
  }

  .header.svelte-y1g1i3 {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    padding-left: 1rem;
    background: var(--header-background);
    color: var(--header-color);
    border-radius: 4px 4px 0 0;
    font-weight: 500;
    z-index: 1;
  }

  .close.svelte-y1g1i3 {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    height: 100%;
    cursor: pointer;
  }

  .copiable.svelte-18d9b8w {
    display: flex;
    position: relative;
  }
  .feedback.svelte-18d9b8w {
    position: absolute;
    padding: 0.5rem 1rem;
    right: 0;
    top: 100%;
    background: #111;
    color: #fff;
    border: #000;
    box-shadow: 0 0 8px rgba(0, 0, 0, .5);
    z-index: 1;
  }
  button.svelte-18d9b8w {
    display: flex;
    align-items: center;
    background: var(--primary-strong);
    color: var(--header-color);
    padding: 0.5rem;
    border-radius: 0 2px 2px 0;
  }
  input.svelte-18d9b8w, textarea.svelte-18d9b8w {
    box-sizing: border-box;
    padding: 0.25rem;
    border: 1px solid var(--gray-light-2);
    border-radius: 2px 0 0 2px;
  }
  textarea.svelte-18d9b8w {
    height: 94px;
    resize: none;
  }
@keyframes spinner-line-fade-more {
  0%, 100% {
    opacity: 0; /* minimum opacity */
  }
  1% {
    opacity: 1;
  }
}

@keyframes spinner-line-fade-quick {
  0%, 39%, 100% {
    opacity: 0.25; /* minimum opacity */
  }
  40% {
    opacity: 1;
  }
}

@keyframes spinner-line-fade-default {
  0%, 100% {
    opacity: 0.22; /* minimum opacity */
  }
  1% {
    opacity: 1;
  }
}

@keyframes spinner-line-shrink {
  0%, 25%, 100% {
    /* minimum scale and opacity */
    transform: scale(0.5);
    opacity: 0.25;
  }
  26% {
    transform: scale(1);
    opacity: 1;
  }
}

  .wrapper.svelte-9jtj10 {
    position: relative;
    z-index: 10;
    background: var(--header-background);
    color: var(--header-color);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr;
    grid-template-areas: 'header actions';
  }

  .header.svelte-9jtj10 {
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'nav title mode';
  }

  .mode.svelte-9jtj10 {
    grid-area: mode;
    display: flex;
    align-items: center;
  }

  .nav.svelte-9jtj10 {
    grid-area: nav;
    display: flex;
  }

  .brand.svelte-9jtj10 {
    padding: 0.5rem 0.75rem;
    display: flex;
  }

  .alpha.svelte-9jtj10 {
    font-size: 0.6em;
    padding-top: 0.25rem;
    vertical-align: top;
    font-weight: 400;
  }

  .toggle.svelte-9jtj10 {
    padding-left: 1rem;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .action.svelte-9jtj10 {
    padding: 0.5rem;
    border: 1px solid transparent;
    text-align: left;
  }

  .action.svelte-9jtj10:hover {
    border-color: var(--primary-strong);
  }

  .title.svelte-9jtj10 {
    grid-area: title;
    display: flex;
    align-items: center;
  }

  .actions.svelte-9jtj10 {
    grid-area: actions;
    display: flex;
    align-items: center;
  }

  .login.svelte-9jtj10 {
    background: var(--primary-strong);
    color: var(--header-color);
    margin-left: auto;
    margin-right: 1rem;
    padding: 0.5rem;
    border-radius: 2px;
  }

  .wrapper.svelte-k29tf6 {
    padding: 1rem;
  }
  .downloader.svelte-k29tf6 {
    display: none;
  }
  .instructions.svelte-k29tf6, .field.svelte-k29tf6 {
    margin-bottom: 1rem;
  }
  .instructions.svelte-k29tf6 > a:where(.svelte-k29tf6) {
    color: inherit;
  }
  label.svelte-k29tf6 {
    font-weight: 500;
    margin-bottom: 0.5rem;
  }
  .toggle.svelte-k29tf6, .action.svelte-k29tf6 {
    display: flex;
    align-items: center;
  }
  .action.svelte-k29tf6 {
    padding: 0.25rem;
    border: 1px solid transparent;
    cursor: pointer;
  }
  .action.svelte-k29tf6:hover {
    border-color: var(--primary-strong);
  }
  .action.active.svelte-k29tf6 {
    background: var(--primary-strong);
    color: var(--header-color);
  }
  .download.svelte-k29tf6 {
    display: flex;
    justify-content: center;
  }
  .download.svelte-k29tf6 > button:where(.svelte-k29tf6) {
    margin: 0 0.25rem;
    display: flex;
    align-items: center;
    background: var(--primary-strong);
    color: var(--header-color);
    padding: 0.5rem;
    border-radius: 2px;
  }
  .processing.svelte-k29tf6 {
    padding: 2rem 1rem;
  }
  .processing.svelte-k29tf6 > progress:where(.svelte-k29tf6) {
    width: 100%;
  }

  .wrapper.svelte-3lup02 {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'viewport options';
  }

  .viewport.svelte-3lup02 {
    grid-area: viewport;
    position: relative;
    background: #000;
    width: 480px;
    height: 480px;
  }

  .options.svelte-3lup02 {
    grid-area: options;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    position: relative;
  }

  .field.svelte-3lup02 {
    margin-bottom: 1rem;
  }

  .field.svelte-3lup02 input:where(.svelte-3lup02) {
    box-sizing: border-box;
    padding: 0.25rem;
    border: 1px solid var(--gray-light-2);
    border-radius: 2px;
  }

  .resolution.svelte-3lup02 {
    display: flex;
    align-items: center;
  }

  .resolution.svelte-3lup02 input:where(.svelte-3lup02):first-child {
    margin-right: 0.25rem;
  }

  .resolution.svelte-3lup02 input:where(.svelte-3lup02):last-child {
    margin-left: 0.25rem;
  }

  .submit.svelte-3lup02 {
    display: flex;
    margin-top: auto;
  }

  .submit.svelte-3lup02 > button:where(.svelte-3lup02) {
    flex-grow: 1;
    background: var(--primary-strong);
    color: var(--header-color);
    padding: 0.5rem;
    border-radius: 2px;
  }

  .controls.svelte-3lup02 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem;
    display: flex;
  }

  .controls.svelte-3lup02 > button:where(.svelte-3lup02) {
    margin-right: 1rem;
    color: var(--header-color);
  }

  .processing.svelte-3lup02 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(4px);
  }

  .feedback.svelte-3lup02 {
    position: absolute;
    left: 0;
    top: 40%;
    width: 100%;
    text-align: center;
  }

  .processing.svelte-3lup02 > progress:where(.svelte-3lup02) {
    position: absolute;
    left: 10%;
    top: 50%;
    width: 80%;
    transform: translate(0, -50%);
  }

  .edit.svelte-1vtjfv0 {
    cursor: pointer;
  }

  input.svelte-1vtjfv0, .edit.svelte-1vtjfv0 {
    width: 100%;
  }

  input.svelte-1vtjfv0 {
    text-align: center;
  }

  .wrapper.svelte-149hd9l {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr 1fr;
    grid-template-areas: 'scene' 'list' 'properties';
  }
  .scene.svelte-149hd9l {
    grid-area: scene;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.5rem 0.5rem;
  }
  .scene.svelte-149hd9l, .list.svelte-149hd9l {
    border-bottom: 1px solid var(--gray-strong-2);
  }
  .list.svelte-149hd9l, .properties.svelte-149hd9l  {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .list.svelte-149hd9l {
    grid-area: list;
  }
  .properties.svelte-149hd9l {
    grid-area: properties;
  }
  .lights.svelte-149hd9l {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .create.svelte-149hd9l {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 31px;
  }
  .floor.svelte-149hd9l {
    padding: 0.25rem 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
  }
  .floor.svelte-149hd9l:hover {
    border-color: var(--primary-strong);
  }
  .floor.active.svelte-149hd9l {
    background: var(--primary-strong);
    color: var(--header-color);
  }
  .light.svelte-149hd9l {
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    height: 30px;
    padding: 0 1.5rem;
  }
  .light.svelte-149hd9l:hover {
    border-color: var(--primary-strong);
  }
  .light.selected.svelte-149hd9l {
    background: var(--secondary-normal);
  }
  .icon.svelte-149hd9l {
    display: flex;
    margin-right: 0.5rem;
  }

  .wrapper.svelte-1om7sca {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 'layers' 'properties';
  }
  .layers.svelte-1om7sca, .properties.svelte-1om7sca {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .layers.svelte-1om7sca {
    grid-area: layers;
    border-bottom: 1px solid var(--gray-strong-2);
  }
  .properties.svelte-1om7sca {
    grid-area: properties;
  }

  .wrapper.svelte-134o8cu {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .invite.svelte-134o8cu {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-strong-2);
  }
  .label.svelte-134o8cu {
    margin-bottom: 0.5rem;
  }
  .peers.svelte-134o8cu > div:where(.svelte-134o8cu) {
    padding: 0.5rem 1rem;
  }

  .keyframes.svelte-lvpk69 {
    position: relative;
    height: 32px;
  }

  .keyframes.svelte-lvpk69:nth-child(even) {
    background: rgba(127, 127, 127, 0.06);
  }

  .keyframe.svelte-lvpk69 {
    position: absolute;
    z-index: 3;
    box-sizing: border-box;
    top: 11px;
    margin-left: -4px;
    width: 8px;
    height: 8px;
    background: var(--gray-strong-2);
    border: 1px solid transparent;
    border-radius: 50%;
  }

  .locked.svelte-lvpk69 {
    pointer-events: none;
    opacity: 0.5;
  }

  .selected.svelte-lvpk69 {
    background: var(--primary-strong);
  }

  .area.svelte-9d6r5g {
    flex-grow: 1;
    position: relative;
    box-sizing: border-box;
    height: 10px;
  }

  .view.svelte-9d6r5g {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    background: var(--gray-light-1);
  }

  .handler.svelte-9d6r5g {
    width: 10px;
    cursor: ew-resize;
  }

  .handler.left.svelte-9d6r5g {
    border-right: 1px solid var(--background);
  }

  .handler.right.svelte-9d6r5g {
    margin-left: auto;
    border-left: 1px solid var(--background);
  }

  .tabs.svelte-j4whdz {
    display: flex;
  }

  .tabs.svelte-j4whdz button:where(.svelte-j4whdz) {
    padding: 0.75rem 1rem;
    flex-grow: 1;
    border-radius: 0;
    border-top: 0;
    border-left: 0;
    border-bottom: 0;
    background: var(--header-background);
    color: var(--header-color);
  }

  .tabs.svelte-j4whdz button:where(.svelte-j4whdz):last-child {
    border-right: 0;
  }

  .tabs.svelte-j4whdz button.active:where(.svelte-j4whdz) {
    background: transparent;
    color: inherit;
    cursor: default;
  }

  .wrapper.svelte-nxxrfo {
    padding: 1rem;
  }

  .field.svelte-nxxrfo {
    margin-bottom: 1rem;
  }

  .field.svelte-nxxrfo > label:where(.svelte-nxxrfo) {
    display: block;
    margin-bottom: 0.25rem;
  }

  .field.svelte-nxxrfo > input:where(.svelte-nxxrfo) {
    box-sizing: border-box;
    padding: 0.25rem;
    border: 1px solid var(--gray-light-2);
    border-radius: 2px;
  }

  .google.svelte-nxxrfo {
    display: flex;
    justify-content: center;
    padding-bottom: 0.5rem;
  }

  .alternative.svelte-nxxrfo {
    margin: 1rem 0;
    position: relative;
    height: 1px;
    background: var(--gray-light-1);
  }

  .alternative.svelte-nxxrfo > div:where(.svelte-nxxrfo) {
    position: absolute;
    background: var(--background);
    padding: 0 0.5rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .error.svelte-nxxrfo {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0 1rem;
    color: #936;
  }

  .link.svelte-nxxrfo {
    border-top: 1px solid var(--gray-light-1);
    margin-top: 1rem;
    padding-top: 1rem;
    display: flex;
    justify-content: center;
  }

  .link.svelte-nxxrfo > a:where(.svelte-nxxrfo) {
    color: var(--primary-strong);
    cursor: pointer;
  }

  .submit.svelte-nxxrfo {
    display: flex;
    justify-content: center;
  }

  .submit.svelte-nxxrfo > button:where(.svelte-nxxrfo) {
    display: flex;
    align-items: center;
    background: var(--primary-strong);
    color: var(--header-color);
    padding: 0.5rem;
    border-radius: 2px;
  }

  .wrapper.svelte-8ctagu {
    padding: 1rem 1rem 0;
  }

  .field.svelte-8ctagu {
    width: 100%;
    margin: 0 0.25rem 1rem;
  }
  
  .field.svelte-8ctagu label:where(.svelte-8ctagu) {
    display: block;
    margin-bottom: 0.25rem;
  }

  .field.svelte-8ctagu input:where(.svelte-8ctagu) {
    box-sizing: border-box;
    padding: 0.25rem;
    border: 1px solid var(--gray-light-2);
    border-radius: 2px;
  }

  .field.svelte-8ctagu:first-child {
    margin-left: 0;
  }

  .field.svelte-8ctagu:last-child {
    margin-right: 0;
  }

  .group.svelte-8ctagu {
    display: flex;
  }

  .group.svelte-8ctagu > button:where(.svelte-8ctagu) {
    flex-grow: 1;
    padding: 0.5rem;
    border: 1px solid var(--gray-light-2);
    border-left-width: 0;
  }

  .group.svelte-8ctagu > button:where(.svelte-8ctagu):first-child {
    border-left-width: 1px;
    border-radius: 4px 0 0 4px;
  }
  .group.svelte-8ctagu > button:where(.svelte-8ctagu):last-child {
    border-radius: 0 4px 4px 0;
  }

  .active.svelte-8ctagu {
    background: var(--primary-strong);
    color: var(--header-color);
  }

  .header.svelte-wwpo00 {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--gray-strong-2);
    padding: 0 1rem 0 1.5rem;
    box-sizing: border-box;
    min-height: 32px;
    font-weight: 500;
  }

  .actions.svelte-wwpo00 {
    display: flex;
    margin-left: auto;
  }

  .color.svelte-1wndjcv {
    flex-grow: 1;
    display: flex;
    align-items: center;
  }
  input[type="text"].svelte-1wndjcv {
    flex-shrink: 0;
    width: 33%;
    box-sizing: border-box;
    padding: 0.25rem;
    margin-right: 0.25rem;
    border: 1px solid transparent;
    border-radius: 2px;
  }
  input[type="text"].svelte-1wndjcv:focus, input[type="text"].svelte-1wndjcv:hover {
    border-color: var(--gray-light-1);
  }
  input[type="color"].svelte-1wndjcv {
    -webkit-appearance: none;
    flex-grow: 1;
    margin-left: 0.25rem;
    height: 18px;
    cursor: pointer;
  }
  input[type="color"].svelte-1wndjcv::-webkit-color-swatch-wrapper {
    padding: 0;
  }
  input[type="color"].svelte-1wndjcv::-webkit-color-swatch {
    border: 1px solid var(--gray-light-2);
  }

  .field.svelte-1qfz0uc {
    display: flex;
    align-items: center;
    padding-bottom: 0.5rem;
  }
  .field.column.svelte-1qfz0uc {
    flex-direction: column;
    align-items: flex-start;
  }
  .field.svelte-1qfz0uc > label:where(.svelte-1qfz0uc) {
    flex-shrink: 0;
    width: 80px;
    color: var(--gray-strong-2);
  }
  .field.column.svelte-1qfz0uc > label:where(.svelte-1qfz0uc) {
    margin-bottom: 0.5rem;
  }
  .field.svelte-1qfz0uc > div:where(.svelte-1qfz0uc) {
    flex-grow: 1;
    display: flex;
  }
  .field.column.svelte-1qfz0uc > div:where(.svelte-1qfz0uc) {
    margin: 0 -0.25rem;
  }

  .range.svelte-86h9a5 {
    flex-grow: 1;
    display: flex;
    align-items: center;
  }
  .percent.svelte-86h9a5 {
    flex-shrink: 0;
    width: 33%;
    position: relative;
  }
  .symbol.svelte-86h9a5 {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-100%, -50%);
    color: var(--gray-light-1);
    pointer-events: none;
  }
  input[type="number"].svelte-86h9a5 {
    box-sizing: border-box;
    padding: 0.25rem;
    padding-right: 1.5rem;
    margin-right: 0.5rem;
    border: 1px solid transparent;
    border-radius: 2px;
  }
  input[type="number"].svelte-86h9a5:focus, input[type="number"].svelte-86h9a5:hover {
    border-color: var(--gray-light-1);
  }
  input[type="number"].svelte-86h9a5:disabled {
    border-color: transparent;
  }
  input[type="range"].svelte-86h9a5 {
		-webkit-appearance: none;
    flex-grow: 1;
    margin-left: 0.5rem;
    cursor: pointer;
  }
  input[type="range"].svelte-86h9a5:disabled {
    cursor: default;
  }
  input[type="range"].svelte-86h9a5::-webkit-slider-runnable-track {
    background: var(--gray-light-2);
    border-radius: 2px;
    height: 6px;
  }
  input[type="range"].svelte-86h9a5::-webkit-slider-thumb {
		-webkit-appearance: none;
    box-sizing: border-box;
    border: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gray-light-1);
    margin-top: -3px;
  }

  .layers.svelte-1r2l2bv {
    flex-grow: 1;
    overflow-y: overlay;
  }
  .shapes.svelte-1r2l2bv {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .layer.svelte-1r2l2bv, .shape.svelte-1r2l2bv {
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    height: 30px;
    padding-right: 1rem;
  }
  .layer.svelte-1r2l2bv {
    padding-left: 1rem;
  }
  .shape.svelte-1r2l2bv {
    padding-left: 2.5rem;
  }
  .name.svelte-1r2l2bv {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
   }
  .toggle.svelte-1r2l2bv {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
    width: 24px;
    font-size: 0.875em;
  }
  .layer.hover.svelte-1r2l2bv, .shape.hover.svelte-1r2l2bv {
    border-color: var(--primary-strong);
  }
  .shape.active.svelte-1r2l2bv {
    background: var(--secondary-light);
  }
  .layer.selected.svelte-1r2l2bv, .shape.selected.svelte-1r2l2bv {
    background: var(--secondary-normal);
  }
  .action.svelte-1r2l2bv {
    display: flex;
    flex-shrink: 0;
    width: 24px;
    height: 100%;
    justify-content: center;
  }
  .action.svelte-1r2l2bv > button:where(.svelte-1r2l2bv) {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .action.lock.svelte-1r2l2bv {
    display: none;
  }
  .layer.svelte-1r2l2bv:hover .action.lock:where(.svelte-1r2l2bv), .shape.svelte-1r2l2bv:hover .action.lock:where(.svelte-1r2l2bv), .action.lock.enabled.svelte-1r2l2bv {
    display: flex;
  }
  .lock.svelte-1r2l2bv > button:where(.svelte-1r2l2bv) {
    color: var(--gray-strong-2);
  }
  .create.svelte-1r2l2bv {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 31px;
  }
  .primitive.svelte-1r2l2bv {
    display: flex;
    margin-right: 0.5rem;
  }

  .light.svelte-2v3nbf {
    flex-grow: 1;
    padding: 1rem 1.5rem 0;
    overflow-y: overlay;
  }
  .input.svelte-2v3nbf {
    box-sizing: border-box;
    padding: 0.25rem;
    margin-right: 0.25rem;
    border: 1px solid transparent;
    border-radius: 2px;
  }
  .input.svelte-2v3nbf:focus, .input.svelte-2v3nbf:hover {
    border-color: var(--gray-light-1);
  }
  .toggle.svelte-2v3nbf, .action.svelte-2v3nbf {
    display: flex;
    align-items: center;
  }
  .action.svelte-2v3nbf {
    padding: 0.25rem;
    border: 1px solid transparent;
    cursor: pointer;
  }
  .action.svelte-2v3nbf:hover {
    border-color: var(--primary-strong);
  }
  .action.active.svelte-2v3nbf {
    background: var(--primary-strong);
    color: var(--header-color);
  }
  .icon.svelte-2v3nbf {
    margin-right: 0.5rem;
  }

  .multiple.svelte-me4x3 {
    flex-grow: 1;
    padding: 2rem 1.5rem;
    overflow-y: overlay;
  }
  .feedback.svelte-me4x3 {
    text-align: center;
    margin-bottom: 0.25rem;
  }

  .layer.svelte-1agd93i {
    flex-grow: 1;
    padding: 1rem 1.5rem 0;
    overflow-y: overlay;
  }
  .input.svelte-1agd93i {
    box-sizing: border-box;
    padding: 0.25rem;
    margin-right: 0.25rem;
    border: 1px solid transparent;
    border-radius: 2px;
  }
  .input.svelte-1agd93i:focus, .input.svelte-1agd93i:hover {
    border-color: var(--gray-light-1);
  }

  .shape.svelte-1yf2vme {
    flex-grow: 1;
    padding: 1rem 1.5rem 0;
    overflow-y: overlay;
  }
  .input.svelte-1yf2vme {
    box-sizing: border-box;
    padding: 0.25rem;
    margin-right: 0.25rem;
    border: 1px solid transparent;
    border-radius: 2px;
  }
  .input.svelte-1yf2vme:focus, .input.svelte-1yf2vme:hover {
    border-color: var(--gray-light-1);
  }
  .toggle.svelte-1yf2vme, .action.svelte-1yf2vme {
    display: flex;
    align-items: center;
  }
  .action.svelte-1yf2vme {
    padding: 0.25rem;
    border: 1px solid transparent;
    cursor: pointer;
  }
  .action.svelte-1yf2vme:hover {
    border-color: var(--primary-strong);
  }
  .action.active.svelte-1yf2vme {
    background: var(--primary-strong);
    color: var(--header-color);
  }
  .icon.svelte-1yf2vme {
    margin-right: 0.5rem;
  }

  button.svelte-1u1me5g {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 31px;
  }

  .group.svelte-14akw25 {
    margin-bottom: 1rem;
  }
  .name.svelte-14akw25 {
    margin-bottom: 1rem;
    font-weight: 500;
  }

  .number.svelte-qnhqyr {
    flex-grow: 1;
    position: relative;
    display: flex;
    align-items: center;
  }
  input.svelte-qnhqyr {
    flex-grow: 1;
    box-sizing: border-box;
    padding: 0.25rem;
    border: 1px solid transparent;
    border-radius: 2px;
  }
  input.svelte-qnhqyr:focus, .number.svelte-qnhqyr:hover input:where(.svelte-qnhqyr) {
    border-color: var(--gray-light-1);
  }
  input.label.svelte-qnhqyr {
    padding-left: 1.5rem;
  }
  div.label.svelte-qnhqyr {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(100%, -50%);
    color: var(--gray-light-1);
    pointer-events: none;
  }
  .actions.svelte-qnhqyr {
    position: absolute;
    right: 0;
    top: 0;
    flex-direction: column;
    background: var(--background);
    height: 100%;
    display: none;
  }
  .number.svelte-qnhqyr:hover .actions:where(.svelte-qnhqyr) {
    display: flex;
  }
  .actions.svelte-qnhqyr > button:where(.svelte-qnhqyr) {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-grow: 0;
    padding: 0 0.5rem;
    border: 1px solid var(--gray-light-1);
    height: 50%;
  }
  .actions.svelte-qnhqyr > button:where(.svelte-qnhqyr):first-child {
    border-bottom: 0;
  }

  .toggle.svelte-1vur3ge, .operation.svelte-1vur3ge {
    display: flex;
    align-items: center;
  }
  .toggle.disabled.svelte-1vur3ge {
    padding: 0 0.25rem;
    height: 24px;
    border: 1px solid transparent;
    color: var(--gray-light-1);
  }
  .operation.svelte-1vur3ge {
    padding: 0.25rem 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
  }
  .operation.svelte-1vur3ge:hover {
    border-color: var(--primary-strong);
  }
  .operation.active.svelte-1vur3ge {
    background: var(--primary-strong);
    color: var(--header-color);
  }
  .icon.svelte-1vur3ge {
    margin-right: 0.5rem;
  }