/**
 * A—Vernalis presentation layer for the pinned CyberChef v11.4.0 DOM.
 * This file intentionally owns appearance and responsive composition only.
 */

:root,
:root.classic,
:root.solarizedLight {
  color-scheme: light;
  --av-canvas: #e8e1d3;
  --av-panel: #eee8dc;
  --av-panel-raised: #f3ede2;
  --av-ink: #292e28;
  --av-muted: #687469;
  --av-faint: #8a8f83;
  --av-accent: #765025;
  --av-accent-soft: rgba(118, 80, 37, 0.09);
  --av-line: rgba(48, 54, 45, 0.2);
  --av-line-strong: rgba(118, 80, 37, 0.42);
  --av-editor: #f6f0e6;
  --av-selection: rgba(118, 80, 37, 0.18);
  --av-on-accent: #fffaf0;
}

:root.dark,
:root.solarizedDark,
:root.geocities {
  color-scheme: dark;
  --av-canvas: #121713;
  --av-panel: #181e19;
  --av-panel-raised: #1e251f;
  --av-ink: #e8e1d3;
  --av-muted: #a1aa9b;
  --av-faint: #737d70;
  --av-accent: #c1a36b;
  --av-accent-soft: rgba(193, 163, 107, 0.09);
  --av-line: rgba(223, 214, 191, 0.18);
  --av-line-strong: rgba(193, 163, 107, 0.48);
  --av-editor: #101511;
  --av-selection: rgba(193, 163, 107, 0.25);
  --av-on-accent: #151914;
}

:root,
:root.classic,
:root.dark,
:root.geocities,
:root.solarizedDark,
:root.solarizedLight {
  --av-serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
  --av-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --av-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --primary-font-family: var(--av-sans);
  --primary-font-colour: var(--av-ink);
  --primary-font-size: 14px;
  --primary-line-height: 20px;
  --fixed-width-font-family: var(--av-mono);
  --fixed-width-font-colour: var(--av-ink);
  --fixed-width-font-size: 13px;
  --subtext-font-colour: var(--av-muted);
  --subtext-font-size: 12px;
  --primary-background-colour: var(--av-canvas);
  --secondary-background-colour: var(--av-panel);
  --primary-border-colour: var(--av-line);
  --secondary-border-colour: var(--av-line);
  --title-colour: var(--av-ink);
  --title-weight: 500;
  --title-size: 12px;
  --title-background-colour: var(--av-panel-raised);
  --banner-font-colour: var(--av-muted);
  --banner-bg-colour: var(--av-panel);
  --banner-url-colour: var(--av-accent);
  --category-list-font-colour: var(--av-muted);
  --loader-background-colour: var(--av-panel);
  --loader-outer-colour: var(--av-accent);
  --loader-middle-colour: var(--av-muted);
  --loader-inner-colour: var(--av-faint);
  --op-list-operation-font-colour: var(--av-ink);
  --op-list-operation-bg-colour: transparent;
  --op-list-operation-border-colour: var(--av-line);
  --rec-list-operation-font-colour: var(--av-ink);
  --rec-list-operation-bg-colour: var(--av-panel-raised);
  --rec-list-operation-border-colour: var(--av-line-strong);
  --selected-operation-font-color: var(--av-ink);
  --selected-operation-bg-colour: var(--av-accent-soft);
  --selected-operation-border-colour: var(--av-line-strong);
  --breakpoint-font-colour: var(--av-accent);
  --breakpoint-bg-colour: var(--av-accent-soft);
  --breakpoint-border-colour: var(--av-line-strong);
  --disabled-font-colour: var(--av-faint);
  --disabled-bg-colour: var(--av-panel);
  --disabled-border-colour: var(--av-line);
  --fc-operation-font-colour: var(--av-ink);
  --fc-operation-bg-colour: var(--av-panel-raised);
  --fc-operation-border-colour: var(--av-line-strong);
  --fc-breakpoint-operation-font-colour: var(--av-accent);
  --fc-breakpoint-operation-bg-colour: var(--av-accent-soft);
  --fc-breakpoint-operation-border-colour: var(--av-line-strong);
  --op-title-font-weight: 500;
  --arg-font-colour: var(--av-ink);
  --arg-background: var(--av-editor);
  --arg-border-colour: var(--av-line);
  --arg-disabled-background: var(--av-panel);
  --arg-label-colour: var(--av-muted);
  --disable-icon-colour: var(--av-faint);
  --disable-icon-selected-colour: var(--av-accent);
  --breakpoint-icon-colour: var(--av-faint);
  --breakpoint-icon-selected-colour: var(--av-accent);
  --btn-default-font-colour: var(--av-ink);
  --btn-default-bg-colour: transparent;
  --btn-default-border-colour: var(--av-line);
  --btn-default-hover-font-colour: var(--av-ink);
  --btn-default-hover-bg-colour: var(--av-accent-soft);
  --btn-default-hover-border-colour: var(--av-line-strong);
  --btn-success-font-colour: var(--av-on-accent);
  --btn-success-bg-colour: var(--av-accent);
  --btn-success-border-colour: var(--av-accent);
  --btn-success-hover-font-colour: var(--av-on-accent);
  --btn-success-hover-bg-colour: var(--av-accent);
  --btn-success-hover-border-colour: var(--av-accent);
  --hl1: var(--av-selection);
  --hl2: var(--av-selection);
  --hl3: var(--av-accent-soft);
  --hl4: var(--av-selection);
  --hl5: var(--av-selection);
  --scrollbar-track: var(--av-panel);
  --scrollbar-thumb: var(--av-faint);
  --scrollbar-hover: var(--av-accent);
  --drop-file-border-colour: var(--av-accent);
  --table-border-colour: var(--av-line);
  --popover-background: var(--av-panel-raised);
  --popover-border-colour: var(--av-line-strong);
  --code-background: var(--av-accent-soft);
  --code-font-colour: var(--av-ink);
  --input-highlight-colour: var(--av-accent);
  --input-border-colour: var(--av-line-strong);
  --title-height: 3.8rem;
  --tab-height: 2.75rem;
}

* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

*::selection {
  background: var(--av-selection);
  color: var(--av-ink);
}

body {
  background: var(--av-canvas);
  color: var(--av-ink);
  font-family: var(--av-sans);
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  border-radius: 0 !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid var(--av-accent) !important;
  outline-offset: -2px;
}

#banner {
  display: none !important;
}

.a-vernalis-integration {
  position: fixed;
  z-index: 10000;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(15rem, auto) 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  height: 2.75rem;
  box-sizing: border-box;
  padding: 0 clamp(1rem, 2.2vw, 2rem);
  border-bottom: 1px solid var(--av-line-strong);
  background: var(--av-panel);
  color: var(--av-muted);
  font: 600 0.55rem/1 var(--av-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.a-vernalis-identity,
.a-vernalis-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.a-vernalis-identity strong {
  color: var(--av-ink);
  font: 500 0.68rem/1 var(--av-serif);
  letter-spacing: 0.22em;
}

.a-vernalis-integration i {
  color: var(--av-accent);
  font-style: normal;
  opacity: 0.62;
}

.a-vernalis-hosting {
  justify-self: center;
  color: var(--av-faint);
}

.a-vernalis-actions {
  justify-self: end;
}

.a-vernalis-integration a,
.a-vernalis-settings {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  color: var(--av-accent);
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  text-transform: inherit;
  cursor: pointer;
}

.a-vernalis-settings {
  color: var(--av-muted);
}

.a-vernalis-integration a:hover,
.a-vernalis-integration a:focus-visible,
.a-vernalis-settings:hover,
.a-vernalis-settings:focus-visible {
  color: var(--av-ink);
}

.a-vernalis-compact,
.a-vernalis-mobile-workspace {
  display: none;
}

#content-wrapper {
  background: var(--av-canvas);
}

#workspace-wrapper {
  top: 2.75rem;
  border-right: 1px solid var(--av-line);
  border-bottom: 1px solid var(--av-line);
  border-left: 1px solid var(--av-line);
  background: var(--av-canvas);
}

#workspace-wrapper > #operations,
#workspace-wrapper > #recipe,
#workspace-wrapper > #IO,
#IO > #input {
  border-right: 1px solid var(--av-line);
}

.gutter {
  background: var(--av-line) !important;
  transition: background-color 160ms ease;
}

.gutter:hover {
  background: var(--av-accent) !important;
}

.title {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--title-height);
  padding: 0 0.85rem 0 3.4rem;
  border-bottom: 1px solid var(--av-line);
  background: var(--av-panel-raised);
  color: var(--av-ink);
  font: 600 0.68rem/1 var(--av-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.title::before {
  position: absolute;
  left: 1rem;
  color: var(--av-accent);
  font: 500 0.58rem/1 var(--av-serif);
  letter-spacing: 0.12em;
}

#operations > .title::before {
  content: "I";
}

#recipe > .title::before {
  content: "II";
}

#input > .title::before {
  content: "III";
}

#output > .title::before {
  content: "IV";
}

.title .op-count {
  position: absolute;
  right: 1rem;
  color: var(--av-faint);
  font: 500 0.52rem/1 var(--av-sans);
  letter-spacing: 0.12em;
}

.pane-controls {
  top: 0.7rem;
  right: 0.75rem;
  gap: 0.2rem;
}

.pane-controls .btn,
.bmd-btn-icon,
.btn {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.pane-controls .btn {
  display: inline-grid;
  width: 2.35rem;
  min-width: 2.35rem;
  height: 2.35rem;
  min-height: 2.35rem;
  margin: 0;
  place-items: center;
  border: 1px solid transparent;
  color: var(--av-muted);
}

.pane-controls .btn:hover,
.pane-controls .btn:focus-visible {
  border-color: var(--av-line-strong);
  background: var(--av-accent-soft);
  color: var(--av-ink);
}

.pane-controls .material-icons {
  font-size: 1.1rem;
}

#search {
  width: calc(100% - 2rem);
  min-height: 3.1rem;
  margin: 1rem;
  padding: 0.8rem 0.9rem !important;
  border: 1px solid var(--av-line-strong);
  background: var(--av-editor) !important;
  color: var(--av-ink);
  font: 400 0.94rem/1.2 var(--av-serif);
  letter-spacing: 0.035em;
}

#search::placeholder {
  color: var(--av-muted);
  opacity: 0.78;
}

#search:focus {
  border-color: var(--av-accent);
  box-shadow: inset 3px 0 var(--av-accent);
}

#categories {
  border-top: 1px solid var(--av-line);
}

#categories .category-title {
  min-height: 3rem;
  padding: 1rem;
  border-bottom: 1px solid var(--av-line);
  background: var(--av-panel);
  color: var(--av-muted);
  font: 600 0.58rem/1.35 var(--av-sans);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

#categories .category-title:hover,
#categories .category-title:focus-visible,
#categories .category-title[aria-expanded="true"] {
  background: var(--av-accent-soft);
  color: var(--av-ink);
  filter: none;
}

.op-list .operation {
  position: relative;
  min-height: 3rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--av-line);
  background: transparent;
  color: var(--av-ink);
  font: 400 0.9rem/1.35 var(--av-serif);
  letter-spacing: 0.035em;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    padding-left 150ms ease;
}

.op-list .operation::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--av-accent);
  transform: scaleY(0);
  transition: transform 150ms ease;
}

.op-list .operation:hover,
.op-list .operation:focus-visible,
.op-list .operation.selected-op {
  padding-left: 1.25rem;
  background: var(--av-accent-soft);
  color: var(--av-ink);
  filter: none;
}

.op-list .operation:hover::before,
.op-list .operation:focus-visible::before,
.op-list .operation.selected-op::before {
  transform: scaleY(1);
}

#rec-list {
  padding: 0.8rem;
  background: var(--av-canvas);
}

#rec-list:empty::after {
  content: "RECIPE EMPTY  ·  ADD AN OPERATION FROM THE LIBRARY";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(18rem, calc(100% - 2rem));
  color: var(--av-faint);
  font: 600 0.55rem/1.7 var(--av-sans);
  letter-spacing: 0.17em;
  text-align: center;
  transform: translate(-50%, -50%);
}

#rec-list .operation {
  margin-bottom: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--av-line);
  border-left: 2px solid var(--av-accent);
  background: var(--av-panel-raised);
  color: var(--av-ink);
}

#rec-list .op-title {
  padding-right: 5.5rem;
  color: var(--av-ink);
  font: 500 1rem/1.25 var(--av-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#rec-list .ingredients {
  column-gap: 0.75rem;
}

#rec-list .ingredients .form-group {
  margin-top: 0.85rem;
}

#rec-list .operation .form-control {
  min-height: 2.75rem;
  padding: 1.1rem 0.7rem 0.3rem !important;
  border: 1px solid var(--av-line) !important;
  border-radius: 0 !important;
  background: var(--av-editor) !important;
  color: var(--av-ink);
}

#rec-list .operation .form-control:hover,
#rec-list .operation .form-control:focus {
  border-color: var(--av-line-strong) !important;
  background-image: none;
  filter: none;
}

#rec-list .operation label,
#rec-list .operation .checkbox label {
  color: var(--av-muted);
  font: 600 0.58rem/1 var(--av-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#rec-list .recip-icons {
  top: 0.65rem;
  right: 0.65rem;
}

#rec-list .recip-icons .material-icons {
  color: var(--av-faint);
  font-size: 1.05rem;
}

#controls {
  padding: 0.65rem;
  border-top: 1px solid var(--av-line-strong);
  background: var(--av-panel);
}

#controls-content {
  gap: 0.55rem;
}

#controls .btn {
  min-height: 2.9rem;
  border: 1px solid var(--av-line-strong);
  font: 600 0.61rem/1 var(--av-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#controls #step {
  color: var(--av-muted);
  background: transparent;
}

#controls #bake {
  background: var(--av-accent);
  color: var(--av-on-accent);
}

#controls #bake:hover,
#controls #bake:focus-visible {
  filter: brightness(1.08);
}

#controls #bake img {
  display: none !important;
}

#auto-bake-label {
  color: var(--av-muted);
  font: 600 0.56rem/1.25 var(--av-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#input-wrapper,
#output-wrapper,
#input-text,
#output-text,
.cm-editor,
.cm-scroller,
.cm-gutters {
  background: var(--av-editor) !important;
}

.cm-editor {
  color: var(--av-ink);
}

.cm-editor .cm-content {
  padding: 1rem 0;
  color: var(--av-ink);
  font: 400 0.82rem/1.65 var(--av-mono);
}

.cm-editor .cm-line {
  padding-inline: 1rem;
}

.cm-editor .cm-gutters {
  border-right: 1px solid var(--av-line);
  color: var(--av-faint);
}

.cm-editor .cm-activeLine,
.cm-editor .cm-activeLineGutter {
  background: var(--av-accent-soft) !important;
}

.cm-editor.cm-focused {
  outline: inset 1px var(--av-line-strong);
}

.cm-status-bar,
.cm-panels,
.cm-side-panels {
  border-color: var(--av-line) !important;
  background: var(--av-panel) !important;
  color: var(--av-muted) !important;
  font: 500 0.55rem/1 var(--av-mono);
}

#input-tabs-wrapper #input-tabs,
#output-tabs-wrapper #output-tabs,
.input-tab-buttons,
.output-tab-buttons {
  border-color: var(--av-line);
  background: var(--av-panel);
  color: var(--av-muted);
}

#input-tabs li,
#output-tabs li {
  border-color: var(--av-line);
  font: 600 0.56rem/1 var(--av-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.active-input-tab,
.active-output-tab,
#input-tabs li:hover,
#output-tabs li:hover,
.input-tab-buttons:hover,
.output-tab-buttons:hover {
  background: var(--av-accent-soft) !important;
  color: var(--av-ink);
}

.modal-content {
  border: 1px solid var(--av-line-strong);
  border-radius: 0;
  background: var(--av-canvas);
  color: var(--av-ink);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.24);
}

.modal-header,
.modal-footer {
  border-color: var(--av-line);
  background: var(--av-panel);
}

.modal-title {
  color: var(--av-ink);
  font: 500 1.3rem/1 var(--av-serif);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.modal-body {
  color: var(--av-ink);
}

.modal .form-control,
.dropdown-menu {
  border: 1px solid var(--av-line);
  border-radius: 0;
  background: var(--av-editor) !important;
  color: var(--av-ink);
}

.modal .btn,
.dropdown-menu .dropdown-item {
  border-radius: 0;
}

.nav-tabs {
  border-color: var(--av-line);
}

.nav-tabs .nav-link {
  border-radius: 0;
  color: var(--av-muted);
  font: 600 0.58rem/1 var(--av-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-tabs > li > a.nav-link.active,
.nav-tabs > li > a.nav-link.active:focus,
.nav-tabs > li > a.nav-link.active:hover {
  border-color: var(--av-line);
  border-bottom-color: var(--av-canvas);
  background: var(--av-canvas);
  color: var(--av-ink);
}

.popover,
.tooltip-inner,
.toast {
  border-radius: 0 !important;
}

.popover {
  color: var(--av-ink);
  font-family: var(--av-sans);
}

@media (max-width: 70rem) {
  .a-vernalis-full {
    display: none;
  }

  .a-vernalis-compact {
    display: inline;
  }
}

@media (max-width: 48rem), (max-width: 56rem) and (max-height: 31rem) {
  :root,
  :root.classic,
  :root.dark,
  :root.geocities,
  :root.solarizedDark,
  :root.solarizedLight {
    --title-height: 3.35rem;
  }

  .a-vernalis-integration {
    grid-template-columns: auto 1fr auto;
    gap: 0.55rem;
    height: 2.75rem;
    padding-inline: max(0.65rem, env(safe-area-inset-left))
      max(0.65rem, env(safe-area-inset-right));
    font-size: 0.48rem;
    letter-spacing: 0.12em;
  }

  .a-vernalis-identity {
    gap: 0.48rem;
  }

  .a-vernalis-identity strong {
    font-size: 0.57rem;
    letter-spacing: 0.15em;
  }

  .a-vernalis-hosting {
    justify-self: center;
    overflow: hidden;
    color: var(--av-faint);
    text-overflow: ellipsis;
  }

  .a-vernalis-integration a,
  .a-vernalis-settings {
    min-height: 2.75rem;
  }

  .a-vernalis-mobile-workspace {
    position: fixed;
    z-index: 9999;
    top: 2.75rem;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    height: 3.35rem;
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
    border-bottom: 1px solid var(--av-line-strong);
    background: var(--av-panel-raised);
  }

  .a-vernalis-mobile-workspace button {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-content: center;
    gap: 0.42rem;
    min-width: 0;
    min-height: 3.35rem;
    padding: 0.35rem 0.2rem;
    border: 0;
    border-right: 1px solid var(--av-line);
    border-radius: 0;
    background: transparent;
    color: var(--av-faint);
    font: 600 0.56rem/1.1 var(--av-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    touch-action: manipulation;
  }

  .a-vernalis-mobile-workspace button > span {
    color: var(--av-accent);
    font-family: var(--av-serif);
    font-weight: 500;
  }

  .a-vernalis-mobile-workspace button:last-of-type {
    border-right: 0;
  }

  .a-vernalis-mobile-workspace button[aria-pressed="true"] {
    background: var(--av-accent-soft);
    box-shadow: inset 0 -2px var(--av-accent);
    color: var(--av-ink);
  }

  .a-vernalis-mobile-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #workspace-wrapper {
    top: 6.1rem !important;
    min-width: 0;
    overflow: hidden;
    border-top: 0;
  }

  #workspace-wrapper > .gutter,
  #IO > .gutter {
    display: none !important;
  }

  #workspace-wrapper > #operations,
  #workspace-wrapper > #recipe,
  #workspace-wrapper > #IO,
  #IO > #input,
  #IO > #output {
    position: absolute !important;
    inset: 0 !important;
    display: none;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    border-right: 0;
  }

  body[data-a-vernalis-pane="operations"] #operations,
  body[data-a-vernalis-pane="recipe"] #recipe,
  body[data-a-vernalis-pane="input"] #IO,
  body[data-a-vernalis-pane="output"] #IO,
  body[data-a-vernalis-pane="input"] #input,
  body[data-a-vernalis-pane="output"] #output {
    display: block !important;
  }

  #operations {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .title {
    padding-left: 3rem;
  }

  .title::before {
    left: 0.85rem;
  }

  #search {
    width: calc(100% - 1.4rem);
    min-height: 3rem;
    margin: 0.7rem;
    font-size: 1rem;
  }

  #categories .category-title,
  .op-list li.operation {
    min-height: 3rem;
    touch-action: manipulation;
  }

  .op-list li.operation[data-a-vernalis-mobile-target] {
    position: relative;
    padding-top: 0.85rem;
    padding-right: 4.35rem;
    padding-bottom: 0.85rem;
    cursor: pointer;
  }

  .op-list li.operation[data-a-vernalis-mobile-target]::after {
    content: "ADD +";
    position: absolute;
    top: 50%;
    right: 0.8rem;
    color: var(--av-accent);
    font: 700 0.52rem/1 var(--av-sans);
    letter-spacing: 0.12em;
    transform: translateY(-50%);
    pointer-events: none;
  }

  #recipe {
    overflow: hidden;
  }

  #recipe #rec-list {
    right: 0;
    bottom: 4.85rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #recipe #controls {
    min-height: 4.85rem;
    padding: 0.55rem;
  }

  #recipe #controls-content {
    justify-content: center;
  }

  #recipe #controls .btn {
    min-height: 2.85rem;
  }

  #input,
  #output,
  #input-wrapper,
  #output-wrapper,
  #input-text,
  #output-text {
    min-width: 0;
    max-width: 100%;
  }

  #input-wrapper,
  #output-wrapper {
    overflow: hidden;
  }

  #input-text .cm-editor,
  #output-text .cm-editor {
    max-width: 100%;
  }

  #input-text .cm-scroller,
  #output-text .cm-scroller {
    overscroll-behavior: contain;
  }

  #input .pane-controls,
  #output .pane-controls {
    top: 0.3rem;
    max-width: calc(100% - 4.5rem);
    overflow-x: auto;
    scrollbar-width: thin;
  }

  #input .pane-controls .btn,
  #output .pane-controls .btn,
  #copy-output {
    flex: 0 0 auto;
    min-width: 2.75rem;
    min-height: 2.75rem;
    touch-action: manipulation;
  }

  .modal-dialog {
    width: calc(100% - 1.25rem);
    max-width: none;
    margin: 0.625rem auto;
  }

  .modal-backdrop {
    z-index: 10001 !important;
  }

  .modal {
    z-index: 10002 !important;
  }
}

@media (max-width: 27rem) {
  .a-vernalis-integration {
    grid-template-columns: auto 1fr;
  }

  .a-vernalis-mobile-workspace button {
    grid-template-columns: 1fr;
    gap: 0.16rem;
    font-size: 0.5rem;
  }

  .a-vernalis-hosting {
    display: none;
  }

  .a-vernalis-actions {
    gap: 0.2rem;
  }

  .a-vernalis-upstream {
    letter-spacing: 0.08em !important;
  }
}

@media (max-width: 56rem) and (max-height: 31rem) {
  .a-vernalis-mobile-workspace {
    height: 2.75rem;
  }

  .a-vernalis-mobile-workspace button {
    min-height: 2.75rem;
  }

  #workspace-wrapper {
    top: 5.5rem !important;
  }

  #rec-list .ingredients .form-group {
    margin-top: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}