:root {
  /* Font */
  --font-family: Inter, Arial;
  --font-size: 14px;
  --title-font-family: Roboto, Arial;
  --title-font-size: 24px;

  /* Container */
  --max-width: 600px;
  --border-radius: 16px;
  --gap: 8px;
  --margin: 16px;
  --padding: 16px;
  --container-background-color: #ffffff;
  --text-color: #4d4d4d;

  /* Toolbar */
  --toolbar-background-color: #08060d;
  --toolbar-text-color: #ffffff;

  /* Input */
  --input-border-radius: 8px;
  --input-padding: 8px 16px;
  --input-label-gap: 4px;
  --input-font-family: var(--font-family);
  --input-font-size: var(--font-size);
  --input-background-color: transparent;
  --input-hover-background-color: #eeeeee;
  --input-color: var(--text-color);

  /* Button */
  --button-background-color: var(--toolbar-background-color);
  --button-hover-background-color: #323232;
  --button-color: white;

  font-family: var(--font-family);

  @media (max-width: 1024px) {
    font-size: 16px;
  }
}

.dark {
  & > * {
    --container-background-color: #ffffff;
    --text-color: #b6b6b6;

    /* Toolbar */
    --toolbar-background-color: #ffffff;
    --toolbar-text-color: #000000;

    /* Input */
    --input-background-color: transparent;
    --input-hover-background-color: #161616;
    --input-color: var(--text-color);

    /* Button */
    --button-background-color: var(--toolbar-background-color);
    --button-hover-background-color: #323232;
    --button-color: var(--text-color);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #9ca3af;
    --text-h: #f3f4f6;
    --bg: #16171d;
    --border: #2e303a;
    --code-bg: #1f2028;
    --accent: #c084fc;
    --accent-bg: rgba(192, 132, 252, 0.15);
    --accent-border: rgba(192, 132, 252, 0.5);
    --social-bg: rgba(47, 48, 58, 0.5);
    --shadow:
      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
  }

  #social .button-icon {
    filter: invert(1) brightness(2);
  }
}

html,
body,
#root {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.editor {
  height: 100%;

  & > div {
    height: 100%;
    & > div {
      height: 100%;
      & > div {
        height: 100%;
      }
    }
  }
}
.b92uw4f{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:var(--gap);-webkit-text-decoration:none;text-decoration:none;border:var(--b92uw4f-0);background-color:var(--b92uw4f-1);color:var(--b92uw4f-2);border-radius:var(--input-border-radius);padding:var(--input-padding);cursor:pointer;font-family:var(--input-font-family);font-size:var(--input-font-size);line-height:normal;}.b92uw4f svg{width:calc(var(--input-font-size) * 1.1);height:calc(var(--input-font-size) * 1.1);}.b92uw4f:hover,.b92uw4f:focus{background-color:var(--input-hover-background-color);}
.c93pfi1{max-width:var(--max-width);margin:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;padding:var(--padding);background-color:var(--container-background-color);color:var(--text-color);border-radius:var(--border-radius);}
.c1ts46fq{width:100%;height:100%;fill:1;margin:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:var(--padding);}
.p1n6p7lm{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;background-color:var(--background-color);color:var(--text-color);overflow:auto;-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}
.s1e037uf{border:var(--s1e037uf-0);background-color:var(--s1e037uf-1);border-radius:var(--input-border-radius);padding:var(--input-padding);font-family:var(--input-font-family);font-size:var(--input-font-size);}.s1e037uf:hover,.s1e037uf:focus{background-color:var(--input-hover-background-color);}
.t18rxkz6{height:58px;max-height:58px;width:100%;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;background-color:var(--toolbar-background-color);color:var(--toolbar-text-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;padding:0px var(--padding);gap:var(--gap);box-sizing:border-box;}
.c1ghugyb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;min-height:100vh;padding:2rem;background-color:#f5f5f5;color:#333;}
.v1o0r8bc{-webkit-flex:1;-ms-flex:1;flex:1;}
.rjn2ldf{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:var(--gap);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
.i175lfyk{var(--i175lfyk-0) var(--i175lfyk-1) var(--i175lfyk-2) var(--i175lfyk-3) overflow:hidden;}
.shlbpu3{width:100%;padding:var(--padding) 0px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--gap);-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}
.m9ku3w5{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--gap);-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;margin:auto;max-width:var(--max-width);}
.b1cb9caz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:var(--gap);border:var(--b1cb9caz-0);background-color:var(--b1cb9caz-1);color:var(--b1cb9caz-2);border-radius:var(--input-border-radius);padding:var(--input-padding);cursor:pointer;font-family:var(--input-font-family);font-size:var(--input-font-size);}.b1cb9caz svg{width:calc(var(--input-font-size) * 1.1);height:calc(var(--input-font-size) * 1.1);}.b1cb9caz:hover,.b1cb9caz:focus{background-color:var(--button-hover-background-color);}
.f2dqi0j{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;gap:var(--gap);width:100%;}
.iiydouz{border:1px solid #ccc;border-radius:var(--input-border-radius);padding:var(--input-padding);font-family:var(--input-font-family);font-size:var(--input-font-size);background-color:var(--input-background-color);color:var(--input-color);}.iiydouz:hover,.iiydouz:focus{background-color:var(--input-hover-background-color);}
.l1bo2f3z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--input-label-gap);width:100%;}
.bxw1k92{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);z-index:1000;}
.chsyv35{position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);z-index:1010;width:600px;max-width:100%;height:400px;max-height:100%;padding:var(--padding);background-color:var(--container-background-color);color:var(--text-color);border-radius:var(--border-radius);}
.s1gicmgf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}
