:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #101216;
  color: #e8eaf0;
  --toolbar-height: 3.25rem;
  --dock-width: clamp(21rem, 28vw, 30rem);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { min-width: 20rem; }

input, select, textarea, button { font: inherit; min-width: 0; }
input:not([type="checkbox"]):not([type="range"]), select, textarea, button {
  background: #0f1116;
  border: 1px solid #4a5262;
  border-radius: .25rem;
  color: inherit;
  padding: .42rem .52rem;
}
select { display: block; max-width: 100%; width: 100%; }
button { cursor: pointer; white-space: nowrap; }
button:disabled { cursor: not-allowed; opacity: .55; }
button.primary { background: #315fab; border-color: #5682ce; }
small { color: #aeb5c4; overflow-wrap: anywhere; }

.editor { height: 100%; }
.editor[data-drop-active="true"]::after {
  align-items: center;
  background: rgb(15 22 34 / 88%);
  border: .3rem dashed #8db7ff;
  color: #eaf2ff;
  content: "Drop image to open";
  display: flex;
  font-size: clamp(1.4rem, 4vw, 3rem);
  font-weight: 700;
  inset: 1rem;
  justify-content: center;
  pointer-events: none;
  position: fixed;
  z-index: 1000;
}
.app-toolbar {
  align-items: center;
  background: #191c23;
  border-bottom: 1px solid #343a47;
  display: flex;
  gap: .75rem;
  height: var(--toolbar-height);
  padding: .45rem .75rem;
}
.brand { font-size: 1.15rem; font-weight: 750; margin-right: .3rem; }
.file-button {
  background: #0f1116;
  border: 1px solid #4a5262;
  border-radius: .25rem;
  cursor: pointer;
  padding: .42rem .6rem;
  white-space: nowrap;
}
.file-button input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.toolbar-field, .toolbar-toggle { align-items: center; display: flex; gap: .4rem; white-space: nowrap; }
.toolbar-field select { width: 8.5rem; }
#status {
  align-items: center;
  color: #aeb5c4;
  display: flex;
  gap: .5rem;
  margin: 0 0 0 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#status[data-error="true"] { color: #ff9a9a; }
#status[data-busy="true"] { color: #dbe7ff; font-weight: 650; }
#status[data-busy="true"]::before {
  animation: status-spin .75s linear infinite;
  border: 2px solid #596577;
  border-radius: 50%;
  border-top-color: #8db7ff;
  content: "";
  flex: 0 0 auto;
  height: 1rem;
  width: 1rem;
}

@keyframes status-spin { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
  #status[data-busy="true"]::before { animation: none; border-color: #8db7ff; }
}

.workspace {
  display: grid;
  grid-template-columns: var(--dock-width) minmax(0, 1fr);
  height: calc(100% - var(--toolbar-height));
  min-height: 0;
}
.control-dock {
  background: #15181e;
  border-right: 1px solid #343a47;
  min-height: 0;
  overflow: auto;
}
.source-panel {
  align-items: center;
  background: #0c0e12;
  border-bottom: 1px solid #343a47;
  display: flex;
  justify-content: center;
  min-height: 8rem;
  padding: .75rem;
}
#source-preview { max-height: 13rem; max-width: 100%; object-fit: contain; }
#source-placeholder, #output-placeholder { color: #747d90; margin: 1rem; }

.control-panel { border-bottom: 1px solid #343a47; padding: .8rem; }
.control-panel > summary { cursor: pointer; font-size: 1.05rem; font-weight: 650; margin-bottom: .8rem; }
label { display: grid; gap: .28rem; min-width: 0; }
.label-caption { align-items: center; display: inline-flex; gap: .35rem; min-width: 0; }
.info-button {
  align-items: center;
  background: #414b5c;
  border: 1px solid #7b879d;
  border-radius: 50%;
  color: #eef3fc;
  cursor: help;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: ui-serif, Georgia, serif;
  font-size: .62rem;
  font-style: italic;
  font-weight: 700;
  height: .9rem;
  justify-content: center;
  line-height: 1;
  padding: 0;
  user-select: none;
  width: .9rem;
}
.info-button:focus-visible { outline: 2px solid #8db7ff; outline-offset: 2px; }
.control-help-tooltip {
  background: #252b35;
  border: 1px solid #657085;
  border-radius: .35rem;
  box-shadow: 0 .4rem 1.2rem rgb(0 0 0 / 45%);
  color: #f0f3f9;
  font-size: .86rem;
  line-height: 1.35;
  max-width: min(20rem, calc(100vw - 1rem));
  padding: .55rem .65rem;
  pointer-events: none;
  position: fixed;
  width: max-content;
  z-index: 1100;
}
.control-grid { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wide-control { grid-column: 1 / -1; }
fieldset { border: 1px solid #343a47; margin: .9rem 0 0; padding: .7rem; }
.conditional { margin-top: .7rem; }

.range-grid { display: grid; gap: .62rem; }
.range-grid label { align-items: center; grid-template-columns: 8.6rem minmax(4rem, 1fr) 3rem; }
.range-grid output { font-variant-numeric: tabular-nums; text-align: right; }
.toggle-grid { display: grid; gap: .55rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: .9rem 0; }
.toggle-grid label, .inline-control { align-items: center; display: flex; gap: .42rem; }
.button-row { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .7rem; }
.glyph-panel label { margin-bottom: .65rem; }
.glyph-groups { border: 1px solid #343a47; max-height: 18rem; overflow: auto; margin: .65rem 0; }
.glyph-row {
  align-items: center;
  display: grid;
  gap: .45rem;
  grid-template-columns: auto minmax(7rem, auto) 3rem minmax(4rem, 1fr);
  margin: 0;
  padding: .32rem .45rem;
}
.glyph-row:nth-child(even) { background: #11141a; }
.glyph-row code { color: #b9c9f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glyph-count { color: #aeb5c4; text-align: right; }

.document-area { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-height: 0; min-width: 0; }
.document-toolbar {
  align-items: center;
  background: #191c23;
  border-bottom: 1px solid #343a47;
  display: flex;
  gap: .55rem;
  min-height: 3rem;
  padding: .45rem .65rem;
}
.toolbar-spacer { flex: 1; }
#output-size { color: #aeb5c4; }
.output-font-size {
  align-items: center;
  display: flex;
  gap: .35rem;
  white-space: nowrap;
}
.output-font-size input { width: 4.5rem; }
.canvas-viewport {
  align-items: start;
  background: #08090b;
  display: flex;
  justify-content: start;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding: 1rem;
}
#output-canvas {
  background: #000;
  display: block;
  flex: none;
  image-rendering: pixelated;
}
.raw-output-panel { background: #15181e; border-top: 1px solid #343a47; padding: .55rem .7rem; }
.raw-output-panel summary { cursor: pointer; }
#raw-output { margin-top: .55rem; resize: vertical; width: 100%; }
.render-stats {
  align-items: center;
  background: #242a34;
  border-top: 1px solid #465064;
  color: #c4cad6;
  display: flex;
  flex-wrap: wrap;
  font-size: .82rem;
  gap: .25rem .8rem;
  min-height: 2rem;
  padding: .35rem .65rem;
}
.render-stat { white-space: nowrap; }
.render-stat strong { color: #f0f3f9; font-weight: 650; }

@media (max-width: 62rem) {
  html, body { height: auto; min-height: 100%; overflow: auto; }
  .editor { height: auto; }
  .app-toolbar { flex-wrap: wrap; height: auto; min-height: var(--toolbar-height); }
  #status { flex-basis: 100%; margin-left: 0; }
  .workspace { grid-template-columns: 1fr; height: auto; }
  .control-dock { border-right: 0; max-height: none; }
  .document-area { min-height: 35rem; }
}

@media (max-width: 34rem) {
  .toolbar-toggle { order: 5; }
  .control-grid, .toggle-grid { grid-template-columns: 1fr; }
  .wide-control { grid-column: auto; }
  .range-grid label { grid-template-columns: 1fr 3rem; }
  .range-grid input { grid-column: 1; }
  .range-grid output { grid-column: 2; grid-row: 1 / span 2; }
  .glyph-row { grid-template-columns: auto minmax(0, 1fr) 3rem; }
  .glyph-row code { grid-column: 2 / 4; }
  .document-toolbar { align-items: stretch; flex-wrap: wrap; }
  .document-toolbar .toolbar-spacer { display: none; }
}