:root {
  --main: #111;
  --muted: #9a9a9a;
  --subtle: #e5e5e5;
  --panel: #fff;
  --danger: #c91818;
  --success: #15803d;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #fff;
  color: var(--main);
  font: 13px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
  gap: 18px;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 18px;
  overflow: hidden;
}

.control-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 2px solid var(--main);
  background: var(--panel);
}

.control-form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
}

.settings-scroll {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.generator-header {
  margin-bottom: 16px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: -5px -7px 9px;
  padding: 5px 7px;
  color: var(--main);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}

.back-link:hover {
  background: var(--main);
  color: #fff;
}

.back-link:focus-visible {
  outline: 2px solid var(--main);
  outline-offset: 3px;
}

.back-link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.generator-header h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.generator-header p {
  margin: 8px 0 0;
  color: #777;
  font-size: 12px;
}

a[href^="http"] {
  color: #777;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

a[href^="http"]:active {
  background: var(--main);
  color: #fff;
  text-decoration: none;
}

@media (hover: hover) {
  a[href^="http"]:hover {
    background: var(--main);
    color: #fff;
    text-decoration: none;
  }
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset:disabled {
  opacity: .42;
}

.control {
  display: block;
  margin: 0 0 16px;
}

.control-label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .01em;
}

.control-help {
  display: block;
  margin: 4px 0 8px;
  color: #777;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
}

.control-help strong {
  font-weight: 700;
}

.iteration-stamp {
  display: block;
  width: 25%;
  aspect-ratio: 1;
  margin: 0 auto;
  border: 1px solid var(--main);
  background: #fff;
}

.iteration-readout {
  margin: 8px 0;
  color: #777;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

.iterate-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.iterate-actions + .control-help,
.toggle-group + .control-help {
  margin-top: 8px;
  margin-bottom: 0;
}

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.icon-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.companion-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.companion-slot {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
}

.companion-button {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.companion-button:hover:enabled {
  background: #fff;
  color: var(--main);
}

.companion-button.is-off,
.companion-button.is-off:hover:enabled {
  background: var(--subtle);
  color: var(--main);
}

.companion-button.is-off canvas {
  filter: grayscale(1);
  opacity: .55;
}

.companion-button[aria-checked="true"] {
  outline: 2px solid var(--main);
  outline-offset: 1px;
}

.companion-button canvas {
  display: block;
  width: 68%;
  height: 68%;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.companion-status {
  font-size: 10px;
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
}

.companion-status.is-enabled {
  color: var(--success);
}

.companion-status.is-disabled {
  color: var(--danger);
}

.companion-editor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  align-items: start;
  margin-top: 10px;
}

.companion-editor .color-swatch-button {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: auto;
  margin: 0;
}

.companion-editor-name {
  grid-column: 2;
  grid-row: 1;
  display: block;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .01em;
}

.companion-editor .control-help {
  grid-column: 2;
  grid-row: 2;
  margin: 2px 0 6px;
}

.companion-editor .companion-check {
  grid-column: 2;
  grid-row: 3;
}

button.companion-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #777;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}

button.companion-check:hover:enabled {
  background: none;
  color: #777;
}

.companion-check-box {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  margin-top: 2px;
  border: 1px solid var(--main);
  background: #fff;
}

button.companion-check[aria-pressed="true"] .companion-check-box {
  background: var(--main);
}

.advanced {
  margin-top: 2px;
  border-top: 1px solid var(--main);
}

.advanced summary {
  padding: 13px 0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.advanced-content {
  padding-top: 5px;
}

.advanced-content > .control:not(:last-child) {
  margin-bottom: 28px;
}

.toggle-group {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--main);
  isolation: isolate;
}

.toggle-group button {
  display: flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-right: 1px solid var(--main);
  border-radius: 0;
  background: #fff;
  color: var(--main);
  cursor: pointer;
  user-select: none;
}

.toggle-group button:last-child {
  border-right: 0;
}

.toggle-group button:hover:enabled {
  background: #fff;
  color: var(--main);
}

.toggle-group button[aria-pressed="true"],
.toggle-group button[aria-pressed="true"]:hover:enabled {
  background: var(--main);
  color: #fff;
}

.toggle-group button:focus-visible {
  z-index: 1;
  outline: 2px solid var(--main);
  outline-offset: 2px;
}

.toggle-group.three-up button,
.toggle-group.four-up button {
  min-height: 34px;
  padding: 6px 6px;
}

.color-row {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.color-row .control {
  margin-bottom: 0;
}

.icon-group svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  stroke: none;
}

.icon-group svg.is-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-group button[aria-pressed="true"] svg [fill="#fff"] {
  fill: var(--main);
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(17, 17, 17, .48);
}

.confirm-overlay[hidden] {
  display: none;
}

.confirm-modal {
  width: min(440px, 100%);
  padding: 18px 18px 16px;
  border: 2px solid var(--main);
  background: var(--panel);
  box-shadow: 6px 6px 0 rgba(17, 17, 17, .22);
}

.confirm-modal h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.confirm-modal p {
  margin: 10px 0 0;
  color: #555;
  font-size: 13px;
  line-height: 1.45;
}

.confirm-modal p strong {
  color: var(--main);
}

.confirm-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

button.danger-action {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

button.danger-action:hover:enabled {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

button {
  min-height: 36px;
  padding: 7px 8px;
  border: 1px solid var(--main);
  border-radius: 0;
  background: #fff;
  color: var(--main);
  cursor: pointer;
}

button:hover:enabled,
.primary-action {
  background: var(--main);
  color: #fff;
}

.primary-action:hover:enabled {
  background: #333;
}

button:disabled {
  opacity: .35;
  cursor: default;
}

.control-footer {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--main);
  background: #fff;
}

.color-choice:disabled,
.color-choice[aria-disabled="true"] {
  opacity: .38;
  cursor: default;
}

.color-choice:disabled .color-swatch,
.color-choice[aria-disabled="true"] .color-swatch {
  filter: grayscale(1);
}

.canvas-stage {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.canvas-wrap {
  position: relative;
  width: min(100%, calc(100vh - 36px));
  max-height: calc(100vh - 36px);
  aspect-ratio: 1;
}

.canvas-wrap > canvas {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid var(--main);
  background: #fff;
  cursor: grab;
  touch-action: none;
}

.canvas-wrap > canvas.is-dragging {
  cursor: grabbing;
}

.canvas-wrap.is-exploring > canvas {
  cursor: default;
}

.canvas-wrap.is-exploring > canvas.is-over-volume {
  cursor: crosshair;
}

.explore-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 2px solid transparent;
}

.explore-hud[hidden] {
  display: none;
}

.hud-stack {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  gap: 4px;
  width: calc(76px + 24ch);
  padding: 8px 10px;
  border: 1px solid var(--main);
  background: rgba(255, 255, 255, .92);
  color: var(--main);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.hud-row {
  display: grid;
  grid-template-columns: 44px 24ch;
  gap: 10px;
}

.hud-row span:first-child {
  color: #777;
  font-weight: 700;
}

.hud-row span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-sel-row {
  position: relative;
  pointer-events: auto;
}

.hud-sel-row.has-tip {
  cursor: help;
}

.hud-sel-tooltip {
  position: absolute;
  left: calc(100% + 22px);
  top: 50%;
  z-index: 6;
  display: grid;
  gap: 4px;
  min-width: 28ch;
  max-width: 36ch;
  padding: 6px 8px;
  border: 1px solid var(--main);
  background: rgba(255, 255, 255, .96);
  color: var(--main);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
  pointer-events: none;
  transform: translateY(-50%);
  visibility: hidden;
}

.hud-sel-tooltip[hidden] {
  display: none;
}

.hud-sel-row:hover .hud-sel-tooltip:not([hidden]) {
  visibility: visible;
}

.hud-sel-tip-head {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--main);
  color: #777;
  font-size: 8px;
}

.hud-sel-tip-line {
  display: grid;
  grid-template-columns: 1.1em 1fr;
  gap: 8px;
  align-items: start;
}

.hud-sel-tip-line b {
  font-weight: 700;
}

.hud-grain {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  pointer-events: auto;
}

.hud-grain input[type="range"] {
  display: block;
  width: 100%;
  margin: 2px 0 0;
  accent-color: var(--main);
  cursor: pointer;
}

.hud-grain-stops {
  position: relative;
  display: block;
  height: 12px;
  margin: 0 8px;
  color: #777;
  font-size: 9px;
  font-weight: 700;
}

.hud-grain-stops span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  cursor: pointer;
}

.hud-grain-stops span[hidden] {
  display: none;
}

.hud-grain-stops span.is-active {
  color: var(--main);
}

.hud-miniship {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 66px;
  height: 66px;
}

.hud-miniship canvas {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: default;
}

.hud-fleet {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: grid;
  gap: 5px;
  min-width: 168px;
  padding: 8px 10px;
  border: 1px solid var(--main);
  background: rgba(255, 255, 255, .92);
  color: var(--main);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.hud-fleet-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.hud-fleet-swatch {
  width: 8px;
  height: 8px;
  border: 1px solid var(--main);
  background: #fff;
}

.hud-fleet-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-fleet-row.is-you .hud-fleet-name {
  font-weight: 700;
}

.hud-fleet-token {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hud-pad {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 8px;
  border: 1px solid var(--main);
  background: rgba(255, 255, 255, .92);
  color: var(--main);
  overflow: hidden;
  pointer-events: auto;
  transform-origin: right bottom;
  transition: width .22s ease, height .22s ease, padding .22s ease, max-height .22s ease;
}

.hud-pad.is-collapsed {
  width: 48px;
  height: 48px;
  max-height: 48px;
  padding: 0;
  cursor: pointer;
}

.hud-pad:not(.is-collapsed) {
  width: max-content;
  height: auto;
  max-height: 420px;
}

.hud-pad-toggle {
  appearance: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  -webkit-text-fill-color: inherit;
  font: inherit;
  font-size: 20px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
}

.hud-pad.is-collapsed .hud-pad-toggle {
  display: flex;
}

.hud-pad.is-collapsed:hover,
.hud-pad.is-collapsed:focus-within {
  background: var(--main);
  color: #fff;
}

.hud-pad.is-collapsed:hover .hud-pad-toggle,
.hud-pad.is-collapsed:focus-within .hud-pad-toggle,
.hud-pad-toggle:hover:enabled {
  background: transparent;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.hud-pad-body {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.hud-pad:not(.is-collapsed) .hud-pad-body {
  opacity: 1;
  pointer-events: auto;
}

.hud-pad.is-collapsed .hud-pad-body {
  position: absolute;
  right: 0;
  bottom: 0;
  visibility: hidden;
}

.hud-pad-close {
  appearance: none;
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.hud-pad-close:hover:enabled {
  background: var(--main);
  color: #fff;
}

.hud-pad-label {
  margin: 0 24px 8px 0;
  color: #777;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
}

.hud-keys {
  display: grid;
  grid-template-columns: repeat(4, 58px);
  grid-template-areas:
    "view roll-l pitch-up roll-r"
    "boost yaw-l thrust yaw-r"
    "lift-up . pitch-dn ."
    "lift-dn strafe-l reverse strafe-r";
  gap: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--main);
}

.hud-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 3px 2px;
  border: 1px solid var(--main);
  text-align: center;
}

.hud-key-lift-up { grid-area: lift-up; }
.hud-key-lift-dn { grid-area: lift-dn; }
.hud-key-roll-l { grid-area: roll-l; }
.hud-key-pitch-up { grid-area: pitch-up; }
.hud-key-roll-r { grid-area: roll-r; }
.hud-key-yaw-l { grid-area: yaw-l; }
.hud-key-thrust { grid-area: thrust; }
.hud-key-yaw-r { grid-area: yaw-r; }
.hud-key-pitch-dn { grid-area: pitch-dn; }
.hud-key-strafe-l { grid-area: strafe-l; }
.hud-key-reverse { grid-area: reverse; }
.hud-key-strafe-r { grid-area: strafe-r; }
.hud-key-boost { grid-area: boost; }
.hud-key-view { grid-area: view; }

.hud-key-cap {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
}

.hud-key-fn {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.hud-key.is-down {
  background: var(--main);
  color: #fff;
}

.hud-chunk-tag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 3px 6px;
  border: 1px solid var(--main);
  background: rgba(255, 255, 255, .94);
  color: var(--main);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  transform: translate(-50%, -120%);
  white-space: nowrap;
}

.hud-chunk-tag[hidden] {
  display: none;
}

.hud-axis-lock {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px 3px;
  border: 1px solid var(--main);
  background: rgba(255, 255, 255, .94);
  color: var(--main);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

.hud-axis-lock[hidden] {
  display: none;
}

.hud-axis-lock-arrow {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.color-swatch-button,
.color-choice {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--main);
}

.color-swatch-button {
  width: 72px;
}

.color-swatch-button:hover:enabled,
.color-choice:hover:enabled,
.color-swatch-button:disabled,
.color-choice:disabled {
  background: transparent;
  color: var(--main);
}

.color-swatch-button:focus-visible,
.color-choice:focus-visible {
  outline: 2px solid var(--main);
  outline-offset: 2px;
}

.color-swatch {
  display: block;
  width: 36px;
  height: 36px;
  border: 2px solid var(--main);
  background: #fff;
}

.color-swatch-pinwheel {
  background: conic-gradient(
    from .5turn,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
}

.color-swatch-name {
  display: block;
  width: 100%;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
}

.color-popover {
  position: fixed;
  z-index: 12;
  padding: 12px;
  border: 2px solid var(--main);
  background: #fff;
  box-shadow: 4px 4px 0 rgba(17, 17, 17, .18);
}

.color-popover[hidden] {
  display: none;
}

.color-palette-layout {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 16px;
}

.color-palette-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto;
  gap: 8px 10px;
}

.color-choice[aria-selected="true"] .color-swatch {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--main);
}

.color-hsv-popover {
  z-index: 13;
  width: 248px;
}

.hsv-plane {
  position: relative;
  width: 220px;
  height: 176px;
  border: 1px solid var(--main);
  background:
    linear-gradient(to bottom, transparent, #000),
    linear-gradient(to right, #fff, var(--hsv-hue, #f00));
  cursor: crosshair;
  touch-action: none;
}

.hsv-plane-cursor {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--main);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hsv-hue {
  position: relative;
  width: 220px;
  height: 16px;
  margin-top: 10px;
  border: 1px solid var(--main);
  background: linear-gradient(
    to right,
    #f00,
    #ff0,
    #0f0,
    #0ff,
    #00f,
    #f0f,
    #f00
  );
  cursor: pointer;
  touch-action: none;
}

.hsv-hue-thumb {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 22px;
  border: 2px solid var(--main);
  background: #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hsv-hex {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.hsv-hex-input {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--main);
  border-radius: 0;
  outline-offset: 2px;
  background: #fff;
  color: var(--main);
  font-variant-numeric: tabular-nums;
}

.hsv-actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.hsv-actions button {
  min-width: 88px;
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: minmax(280px, 48vw) minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }
}