/* CSS variables */
:root {
  color-scheme: light;
  --bg-rgb: 255, 255, 255;
  --heading: black;
  --text-field: black;
  --text: rgba(0, 0, 0, 0.8);
  --secondary: rgba(0, 0, 0, 0.5);
  --hover: rgba(0, 0, 0, 0.03);
  --line: rgba(0, 0, 0, 0.15);
  --line-darker: rgba(0, 0, 0, 0.3);
  /* https://contrast-triangle.com/?linkColor=%23009da8&textColor=%23333333 */
  --link: #009da8;
  --link-transparent: #009da844;
  --focus: #029bfd;
  --focus-transparent: #029bfd66;
  --shadow-soft: rgba(0, 0, 0, 0.1);
  --shadow-hard: rgba(0, 0, 0, 0.2);
  --primary-btn-bg: none, linear-gradient(135deg, var(--grad1), var(--grad2));
  --primary-btn-blur-enabled: none;
  --outline-btn-bg: transparent;
  --outline-btn-bg-hover: rgba(0, 0, 0, 0.2);
  --outline-btn-bg-active: rgba(0, 0, 0, 0.4);
  /* https://contrast-triangle.com/?linkColor=%23fa002e&textColor=%23333333 */
  --error: #fa002e;
  --error-bg: #fa002e11;
  /* Icons from https://github.com/feathericons/feather/ converted to an inline
  URL by https://yoksel.github.io/url-encoder/ */
  --icon-dropdown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
  --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E");
  --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E");
  --icon-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E");
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.2)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12H19M12 5L19 12L12 19'/%3E%3C/svg%3E");
  --icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.2)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5V19M19 12L12 19L5 12'/%3E%3C/svg%3E");
  --icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");

  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");

  --grad1: #20de88;
  --grad2: #28bbe8;
  --grad2-transparent: #28bbe866;

  --bg: rgb(var(--bg-rgb));

  @media (prefers-color-scheme: dark) {
    color-scheme: dark;

    /* #0f172a from Tailwind */
    --bg-rgb: 15, 23, 42;
    --heading: rgba(255, 255, 255, 0.9);
    --text-field: rgba(255, 255, 255, 0.9);
    --text: rgba(255, 255, 255, 0.7);
    --secondary: rgba(255, 255, 255, 0.5);
    --hover: rgba(255, 255, 255, 0.05);
    --line: rgba(255, 255, 255, 0.15);
    --line-darker: rgba(255, 255, 255, 0.4);
    /* https://contrast-triangle.com/?bgColor=%230f172a&linkColor=%2300e0f0&textColor=%23B8BAC0 */
    /* does not pass but whatever */
    --link: #00e0f0;
    --link-transparent: #00e0f044;
    --focus: #029bfd;
    --focus-transparent: #029bfd66;
    --shadow-soft: transparent;
    --shadow-hard: transparent;
    --primary-btn-bg: linear-gradient(var(--bg), var(--bg)),
      linear-gradient(135deg, var(--grad1), var(--grad2));
    --primary-btn-blur-enabled: '';
    --outline-btn-bg: rgba(255, 255, 255, 0.05);
    --outline-btn-bg-hover: rgba(255, 255, 255, 0.1);
    --outline-btn-bg-active: rgba(255, 255, 255, 0.15);
    /* https://contrast-triangle.com/?linkColor=%23fa002e&textColor=%23333333 */
    --error: #fe6c87;
    --error-bg: #fe6c8711;

    --icon-dropdown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
    --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E");
    --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E");
    --icon-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E");
    --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.3)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12H19M12 5L19 12L12 19'/%3E%3C/svg%3E");
    --icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.3)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5V19M19 12L12 19L5 12'/%3E%3C/svg%3E");
    --icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  }
}

/* Global styles */
*,
::before,
::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
}
@media (prefers-reduced-motion) {
  *,
  ::before,
  ::after {
    transition: none !important;
    animation: none !important;
  }
}

/* html and body */
html {
  height: 100%;
  scroll-behavior: smooth;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.5;
  padding-bottom: 20px;

  &::before {
    content: '';
    display: block;
    height: 20px;
    flex: none;
    background-image: linear-gradient(
        180deg,
        transparent 50%,
        rgb(var(--bg-rgb), 0.75) 50%,
        rgb(var(--bg-rgb), 0.92),
        var(--bg)
      ),
      linear-gradient(90deg, var(--grad1), var(--grad2));
  }
}

/* Reset */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  color: inherit;
  margin: 0;
  border: none;
  padding: 0;
  background: none;
}
textarea {
  resize: vertical;
}
button,
select {
  cursor: pointer;
}
option {
  background-color: var(--bg);
}
:disabled {
  cursor: default;
}
a {
  text-decoration: unset;
  color: unset;
}

/* Utility classes */
.hidden-accessible {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Opiniated styles */
h1 {
  font-weight: lighter;
  font-size: 56px;
  line-height: 1;
  margin-top: 40px;
  margin-bottom: 20px;
  color: var(--heading);
}
p,
pre {
  margin: 0;
  margin-bottom: 10px;
}
pre {
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 10px;
  line-height: 1.4;
  font-size: 14px;
}
ol,
ul {
  margin: 0;
  padding-left: 3ch;
}
li::marker {
  color: var(--secondary);
}
.main {
  padding: 0 20px;

  & > h1,
  & > p,
  & > ol,
  & > ul,
  & > pre,
  & > .radio-set,
  & > .radio-label,
  & > .field-label,
  & > .cols,
  & > .col-io,
  & > .button-row {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
  }
  & > .radio-label {
    margin-bottom: 10px;
  }
}
.label-primary,
.label-secondary {
  display: block;
  margin: 0;
}
.label-primary {
  font-weight: bold;
  color: var(--heading);
}
.field-label {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.cols {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 10px;
}
.link {
  color: var(--link);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--link-transparent);

  &:focus {
    outline: none;
  }
  &:hover,
  &:focus-visible {
    text-decoration-color: var(--link);
  }
}
pre,
code,
.code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
[type='text'],
[type='url'],
[type='number'],
select {
  border: 1px solid var(--line);
  padding: 0 15px;
  height: 40px;
  border-radius: 10px;
  color: var(--text-field);
  margin: 5px 0;
  align-self: flex-start;
  transition: border-color 0.2s, box-shadow 0.2s;

  &:focus {
    outline: none;
  }
  &:focus-visible {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px var(--focus-transparent);
  }
}
select {
  background-image: var(--icon-dropdown);
  background-size: 24px;
  background-position: right 10px center;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* Icons */
.icon {
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  span& {
    display: inline-block;
    width: 24px;
    height: 24px;
  }
  button&,
  &.icon-btn {
    width: 48px;
    height: 48px;
  }
}
.icon-upload {
  background-image: var(--icon-upload);
}
.icon-download {
  background-image: var(--icon-download);
}
.icon-copy {
  background-image: var(--icon-copy);
}
.icon-share {
  background-image: var(--icon-share);
}

/* Settings */
.radio-set {
  border: none;
  padding: 0;
  margin-bottom: 10px;
}
.radio-set legend {
  padding: 0;
}
.radio-label {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
}
.radio-button {
  /* Assumes there will only be 4 lines at most. It's small so I know the limit
  is there if I ever need to go over it. (1 / -1 doesn't work with an implicit
  grid)  */
  grid-row: 1 / span 4;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  border: 1px solid var(--line-darker);
  border-radius: 50%;
  background-origin: border-box;
  position: relative;
  cursor: pointer;
  margin-top: 5px;
  transition: border-color 0.2s, box-shadow 0.2s;

  &::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background-image: linear-gradient(135deg, var(--grad1), var(--grad2));
    filter: blur(3px);
  }
}
[type='checkbox'] + .radio-button {
  border-radius: 4px;
}
[type='radio'] + .radio-button::after {
  border-radius: 50%;
  background-color: white;
  width: 6px;
  height: 6px;
}
[type='checkbox'] + .radio-button::after {
  position: absolute;
  inset: 0;
  background-image: var(--icon-check);
  background-size: contain;
}
:checked + .radio-button {
  border: 0;
  background-image: linear-gradient(135deg, var(--grad1), var(--grad2));

  /* TEMP: ::before is hidden for now for consistency with the range input */
  &::after {
    content: '';
    display: block;
  }
}
:focus-visible + .radio-button {
  border-color: var(--focus);
  box-shadow: 0 0 0 5px var(--focus-transparent);
}
.range-wrapper {
  flex-direction: row;
  gap: 20px;

  & [type='number'],
  & [inputmode='numeric'] {
    width: 100px;
    margin: 0;
    margin-top: auto;
  }
}
[type='range'] {
  cursor: ew-resize;
  height: 40px;

  &:focus {
    outline: none;
  }
}
::-webkit-slider-runnable-track {
  background-color: var(--line);
  height: 5px;
  border-radius: 10px;
  background-image: linear-gradient(
    to right,
    var(--grad1),
    var(--grad2) var(--progress),
    transparent var(--progress)
  );
}
/* Must be kept a separate rule or it won't parse. :is() doesn't work with
::-webkit-slider-runnable-track */
::-moz-range-track {
  background-color: var(--line);
  height: 5px;
  border-radius: 10px;
  background-image: linear-gradient(
    to right,
    var(--grad1),
    var(--grad2) var(--progress),
    transparent var(--progress)
  );
}
::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  background-color: var(--grad2);
  border-radius: 50%;
  margin-top: -5px;
  transition: box-shadow 0.2s;
}
:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 10px var(--grad2-transparent);
}
::-moz-range-thumb {
  border: none;
  width: 15px;
  height: 15px;
  background-color: var(--grad2);
  border-radius: 50%;
  transition: box-shadow 0.2s;
}
:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 10px var(--grad2-transparent);
}
.range-label {
  flex: auto;
  display: flex;
  flex-direction: column;
}

/* Input and output */
.two-col-io {
  margin: 0 auto;
  margin-bottom: 10px;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    'input-controls arrow output-controls'
    'input-content arrow output-content';

  &::after {
    content: '';
    display: inline-block;
    grid-area: arrow;
    background-image: var(--icon-arrow-right);
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    margin: 10px;
    align-self: center;
    justify-self: center;
  }

  @media (max-width: 700px) {
    grid-template-columns: 1fr;
    grid-template-areas:
      'input-controls'
      'input-content'
      'arrow'
      'output-controls'
      'output-content';

    &::after {
      background-image: var(--icon-arrow-down);
    }
  }
}
textarea.input-content,
textarea.output-content {
  padding: 20px;
  min-height: 400px;
  transition: border-color 0.2s, box-shadow 0.2s;
  &:focus {
    outline: none;
  }
  &:focus-visible {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px var(--focus-transparent);
  }

  @media (max-width: 700px) {
    min-height: 150px;
  }
}
.col-io {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.col-output {
  flex-direction: column-reverse;

  textarea.output-content {
    min-height: 150px;
  }
}
.input-controls,
.output-controls {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 1px solid var(--line);

  .no-contents & {
    border-radius: 10px;
  }
}
.input-controls {
  grid-area: input-controls;
}
.output-controls {
  grid-area: output-controls;
  display: flex;

  & :first-child {
    border-top-left-radius: 10px;

    &:is(button) {
      flex: auto;
      display: flex;
      padding: 5px;
      align-items: center;

      & .icon {
        margin: 0 10px;
      }
    }
  }

  & :last-child {
    border-top-right-radius: 10px;
  }

  & > .icon {
    border-left: 1px solid var(--line);
    min-height: 48px;
    height: 100%;
  }
}
.file {
  flex: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'icon label'
    'icon name';
  align-items: center;
  padding: 5px;
  padding-left: 0;

  label& {
    cursor: pointer;
  }

  & .icon {
    grid-area: icon;
    margin: 0 10px;
  }
}
label.file,
.file[href],
.output-controls button,
.output-controls .icon-btn[href] {
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  &:hover {
    background-color: var(--hover);
  }
}
label.file:has(:focus-visible) {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-transparent);
}
.file[href],
.output-controls button,
.output-controls .icon-btn[href] {
  &:focus {
    outline: none;
  }
  &:focus-visible {
    box-shadow: 0 0 0 3px var(--focus-transparent);
  }
}
.file-label {
  grid-area: label;
  align-self: end;
  line-height: 1;
  margin-top: 0.1em;

  .download & {
    font-weight: bold;
  }
}
.file-name {
  grid-area: name;
  color: var(--secondary);
  font-size: 0.8em;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: start;
  transition: color 0.2s;
}
.file-error {
  color: var(--error);
}
.input-content,
.output-content {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 1px solid var(--line);
  border-top-width: 0;
  position: relative;
}
.input-content {
  grid-area: input-content;
}
.output-content {
  grid-area: output-content;

  .no-output-controls & {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-top-width: 1px;
    margin-top: -1px;
  }
}
.image-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow: hidden;

  &::after {
    content: '';
    display: block;
    background-image: linear-gradient(-45deg, var(--grad1), var(--grad2));
    height: 200px;
    border-radius: 200px;
    position: absolute;
    left: 50px;
    right: 50px;
    top: -50px;
    filter: blur(50px);
    opacity: 0.3;
    z-index: -1;
  }

  & canvas,
  & img,
  & svg,
  & video {
    border: 1px solid var(--line);
    border-radius: 10px;
    max-width: 100%;
    max-height: 70vh;
  }
}
.input-controls,
.input-content {
  transition: border-color 0.2s, background-color 0.2s;

  .drag-over &,
  &.drag-over {
    border-color: var(--link);
    background-color: var(--link-transparent);
  }
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
  gap: 10px;
}
.button {
  border-radius: 10px;
  height: 40px;
  padding: 0 15px;
  border: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;

  &:focus {
    outline: none;
  }
  &:focus-visible {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px var(--focus-transparent);
  }
  &:disabled {
    opacity: 0.5;
  }
}
.primary-btn {
  background-image: var(--primary-btn-bg);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: white;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 5px var(--shadow-soft);
  position: relative;
  &:disabled {
    border-color: var(--line);
    background-image: none;
    color: inherit;
    text-shadow: none;
  }

  &:not(:disabled)::before {
    content: var(--primary-btn-blur-enabled);
    display: block;
    position: absolute;
    z-index: -1;
    inset: -1px;
    border-radius: 10px;
    background-image: linear-gradient(135deg, var(--grad1), var(--grad2));
    filter: blur(10px);
    opacity: 0.3;
    transition: opacity 0.2s;
  }

  &:not(:disabled):hover {
    box-shadow: 0 3px 10px var(--shadow-hard);

    &::before {
      opacity: 0.5;
    }
  }
  &:not(:disabled):active {
    box-shadow: 0 0 0 var(--shadow-hard);
    &::before {
      opacity: 0.1;
    }
  }
}
.outline-btn {
  border-color: var(--line);
  background-color: var(--outline-btn-bg);
  &:disabled {
    background-color: transparent;
  }
  &:not(:disabled):hover {
    background-color: var(--outline-btn-bg-hover);
  }
  &:not(:disabled):active {
    background-color: var(--outline-btn-bg-active);
  }
}
.text-btn {
  padding: 0 5px;
  &:not(:disabled):hover {
    text-decoration: underline;
    text-decoration-color: var(--line);
  }
}

.error-count-wrapper,
.error-wrapper {
  margin: 0 auto;
  max-width: 800px;
}
.error-count-wrapper {
  width: 100%;
  position: sticky;
  bottom: 80px;
  font-weight: normal;
  font-size: 1em;
  animation: error-appeared 0.2s;
}
.error-count {
  margin: 0;
  border: 1px solid var(--error);
  background-color: var(--error-bg);
  backdrop-filter: blur(15px);
  border-radius: 80px;
  margin: 20px;
  position: absolute;
  top: 0;
  height: 40px;
  display: flex;
  align-items: center;
  padding-right: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;

  &:focus {
    outline: none;
  }
  &:focus-visible {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px var(--focus-transparent);
  }

  &::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background-image: var(--icon-error);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
  }
}
@keyframes error-appeared {
  from {
    bottom: 0;
  }
  to {
    bottom: 80px;
  }
}
.error-wrapper {
  border: 1px solid var(--error);
  padding: 20px;
  background-color: var(--error-bg);
  border-radius: 10px;
  padding-top: 80px;
}
.error-note {
  margin-bottom: 20px;
}
.error-log {
  white-space: pre-wrap;
  font-size: 0.8em;
  margin: 0;
}