:root {
    --danger: #dc2626; /*input selection, */
    --yellow: yellow; /*thumbnail selection*/
    --dark: rgb(37, 35, 35); /*primary text*/
    --medium: rgb(173, 173, 173); /*secondary text, carets, icons*/
    --light: #f1f5f9; /*borders, lines, disabled toggle*/
}

@font-face {
  font-family: "neue-montreal-mono";
  src:
    url("/fonts/PPNeueMontrealMono-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: "neue-montreal-mono", sans-serif;
}

/* ---------- text*/
.txt-lg {
    font-size: .875rem;
}
.txt-m {
    font-size:0.75rem;
}
.txt-sm {
    font-size: .5rem;
}
.input-text::placeholder {
    color: var(--medium);
    font-size: 0.75rem;
}
.txt-red {
    color: var(--danger);
}
.txt-dark {
    color: var(--dark);
}

.txt-medium {
    color: var(--medium);
}

.scrollbar {
    scrollbar-gutter: stable;
}

/* ---------- meta buttons*/
#add:hover {
    background-color: var(--light);
}
#share:hover {
    background-color: var(--light);
}
#download:hover {
    background-color: var(--light);
}
#download {
    display:none;
}

.vert-align {
    display: flex;
    align-items: center;
}

/* ---------- Layer position buttons*/
.icon-btn {
  height: 2.5rem; border-radius: .5rem;
  display: grid; place-items: center;
  border: 1px solid rgb(203 213 225);
  padding: .25rem .5rem;
}
.icon-btn:hover { background: #f8fafc; }
.icon-danger { border-color: #fecaca; color: #dc2626; }
.icon-danger:hover { background: #fff1f2; }

/* ---------- Input fields*/
input, select { outline: none; }
input:focus, select:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 1);
}

/* ---------- Toggle*/
.switch {
  position: relative;
  width: 44px; height: 24px;
  background: #e5e7eb; border-radius: 9999px; /*Disabled*/
  transition: background .15s;
}
.switch > i {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; background: #fff; border-radius: 9999px; /*Circle*/
  transition: transform .15s;
}
.switch[data-on="1"] { background: #272e25; } /*Enabled*/
.switch[data-on="1"] > i { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid rgba(15,23,42,.35); outline-offset: 2px; }

/* ---------- Collapsible caret*/
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.caret-btn { border-radius: .375rem; padding: .125rem; display: inline-flex; align-items: center; justify-content: center; }
.caret-btn:hover { background: var(--light); }
.caret-svg { transition: transform .15s ease; }
details > summary .caret-svg { transform: rotate(0deg); transition: transform .2s ease; }
details[open] > summary .caret-svg { transform: rotate(180deg); }

/* ---------- Canvas*/
#out {
    min-height: 0;
    overflow: auto;
}
#out img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}