:root {
  --space-edge: 1rem;
  --space-stack: 1rem;
  --space-row: 0.5rem;
  --space-panel: 1rem;
  /* Single gap unit reused for the panel's outer inset and every inner
     padding/gap (cards, blocks, rows) so spacing stays visually consistent. */
  --panel-gap: 0.625rem;
  --card-pad: calc(var(--panel-gap) * 1.5);
  /* Vertical breathing room below a card header, before its content. */
  --card-header-gap: calc(var(--space-stack) * 1.5);
  --app-padding: var(--space-edge);
  --panel-inset: var(--panel-gap);
  --panel-padding: var(--space-panel);
  --control-gap: var(--space-row);
  /* Tighter gap for clustered buttons (segmented switches, style/case rows,
     header action groups) so they read as one grouped control. */
  --button-gap: 0.375rem;
  --section-gap: var(--space-row);
  --panel-radius: 1.375rem;
  --motion-panel: 460ms;
  --ease-panel: cubic-bezier(0.32, 0.72, 0, 1);
  --settings-width: clamp(320px, 29vw, 390px);
  --settings-track: calc(var(--settings-width) + var(--panel-inset) * 2);
  --control-size: 2rem;
  --chrome-size: 2.5rem;
  --swatch-size: 1.25rem;
  --mobile-dock-height: 0px;
  --sky-top: #0e376b;
  --sky-upper: #2f77b6;
  --sky-mid: #579ed1;
  --sky-horizon: #9ed5ef;
  --sky-bottom: #d7f2ff;
  --cloud-white: #f8fcff;
  --cloud-blue: #b9d9ff;
  --ink: rgba(255, 255, 255, 0.94);
  --ink-muted: rgba(255, 255, 255, 0.8);
  --line: rgba(255, 255, 255, 0.14);
  --glass: rgba(4, 18, 40, 0.22);
  --glass-strong: rgba(4, 18, 40, 0.42);
  --chrome-border: var(--line);
  --chrome-bg: var(--glass);
  --chrome-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 16px 40px rgba(2, 8, 20, 0.18);
  --chrome-blur: blur(22px) saturate(160%);
  --focus: rgba(255, 255, 255, 0.7);
  /* Barely-there soft halo that lifts text off bright cloud shades without
     reading as a visible shadow (Apple Liquid Glass keeps glyphs legible by
     subtly separating them from dynamic content). Kept very low-alpha so it
     stays invisible on solid pills and never looks "shadowed". */
  --text-shadow-legible: 0 0.5px 2px rgba(4, 12, 30, 0.34);
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", "Geist Mono", Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  --stage-left: 0px;
  position: relative;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-sans);
  background: var(--sky-bottom);
  text-shadow: var(--text-shadow-legible);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(116% 82% at 50% 112%, color-mix(in srgb, var(--sky-bottom) 76%, #fff 24%) 0%, color-mix(in srgb, var(--sky-bottom) 58%, transparent 42%) 37%, transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--sky-top) 88%, #000 12%) 0%,
      var(--sky-top) 17%,
      var(--sky-upper) 38%,
      var(--sky-mid) 60%,
      var(--sky-horizon) 82%,
      var(--sky-bottom) 96%,
      color-mix(in srgb, var(--sky-bottom) 72%, #fff 28%) 100%
    );
}

body::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.018;
  mix-blend-mode: soft-light;
  pointer-events: none;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

body.settings-open {
  /* Stage hugs the panel's right edge (only the panel's own outer inset, no
     extra gap) so the toolbar's own --space-edge becomes the spacing before the
     buttons — matching the gap they had from the screen edge when closed. */
  --stage-left: calc(var(--settings-width) + var(--panel-inset));
}

.liquid-sky-mirror {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(116% 82% at 50% 112%, color-mix(in srgb, var(--sky-bottom) 76%, #fff 24%) 0%, color-mix(in srgb, var(--sky-bottom) 58%, transparent 42%) 37%, transparent 72%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--sky-top) 88%, #000 12%) 0%,
      var(--sky-top) 17%,
      var(--sky-upper) 38%,
      var(--sky-mid) 60%,
      var(--sky-horizon) 82%,
      var(--sky-bottom) 96%,
      color-mix(in srgb, var(--sky-bottom) 72%, #fff 28%) 100%
    );
}

.liquid-glass-root {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.liquid-glass-root canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.liquid-glass-surface {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0.02) 100%),
    rgba(6, 17, 37, 0.46);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 24px 72px rgba(1, 7, 20, 0.28);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}

.liquid-glass-surface::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.18) 0%, transparent 36%, transparent 64%, rgba(255, 255, 255, 0.05) 100%);
}

.liquid-glass-surface > * {
  position: relative;
  z-index: 1;
}

body.liquid-dom-ready .liquid-glass-surface {
  border-color: rgba(255, 255, 255, 0.14);
  /* Keep a real dark scrim even when the WebGL glass layer handles the blur,
     so white UI text stays legible over bright sky/cloud shades (WCAG). */
  background: rgba(6, 17, 37, 0.38);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 24px 72px rgba(1, 7, 20, 0.2);
}

body.is-mobile-sheet-open {
  overflow: hidden;
}

button,
input {
  font: inherit;
}

/* The stage occupies the space NOT covered by the settings panel. When the
   panel opens it insets from the left by the panel track, and the fit-contain
   camera reflows the whole composition into the remaining space (it scales to
   fit, so content never crops — only the available stage edges bound it). */
#stage {
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--stage-left);
  overflow: hidden;
  background: transparent;
  transition: left var(--motion-panel) var(--ease-panel);
}

html[data-file-protocol="true"]::before {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 2rem;
  color: #fff;
  background: #061127;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  content: "AirCraft needs to be opened from the site URL, not file://. Use /lab/aircraft/ on the local or live server.";
}

#stage::before,
#stage::after {
  display: none;
}

#cloud-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

#cloud-canvas:focus {
  outline: none;
}

.stage-chrome {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.stage-toolbar {
  position: absolute;
  top: var(--space-edge);
  left: var(--space-edge);
  right: var(--space-edge);
  min-height: var(--chrome-size);
  pointer-events: none;
}

/* Dock is pinned to the true canvas centre — independent of left/right clusters. */
body.settings-open .stage-toolbar {
  left: var(--space-edge);
}

.stage-toolbar-left {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-row);
  min-width: 0;
  pointer-events: none;
}

.toolbar-center {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.375rem;
  max-width: calc(100% - var(--space-edge) * 2);
  transform: translateX(-50%);
  pointer-events: none;
}

body.settings-open .toolbar-center {
  left: 50%;
  transform: translateX(-50%);
}

.toolbar-center > * {
  pointer-events: auto;
}

.stage-toolbar > * {
  pointer-events: auto;
}

.stage-toolbar-left > *,
.right-tools > * {
  pointer-events: auto;
}

.settings-logo {
  display: block;
  width: 26px;
  height: 26px;
  color: rgba(255, 255, 255, 0.92);
}

/* Canvas tool dock — same chrome language as zoom widget and side actions. */
.canvas-dock {
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  max-width: min(100vw - var(--space-edge) * 2, 42rem);
  min-height: var(--chrome-size);
  padding: calc((var(--chrome-size) - var(--control-size)) / 2) 0.5rem;
  border: 1px solid var(--chrome-border);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  background: var(--chrome-bg);
  box-shadow: var(--chrome-shadow);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: opacity var(--motion-panel) var(--ease-panel), transform var(--motion-panel) var(--ease-panel);
  pointer-events: auto;
}

.toolbar-hint {
  margin: 0;
  max-width: min(92vw, 28rem);
  padding: 0 0.25rem;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 520;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 320ms cubic-bezier(0.2, 0, 0, 1), transform 320ms cubic-bezier(0.2, 0, 0, 1);
}

body.toolbar-hint-visible .toolbar-hint {
  opacity: 1;
  transform: translateY(0);
}

.canvas-dock::-webkit-scrollbar {
  display: none;
}

body.settings-open .canvas-dock {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.dock-indicator {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: var(--control-size);
  height: var(--control-size);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(2, 10, 28, 0.16);
  pointer-events: none;
  transform: translate(0, 0);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.dock-icon {
  display: block;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  flex-shrink: 0;
}

.dock-icon rect,
.dock-icon circle {
  fill: none;
}

.dock-tool svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.canvas-dock-divider {
  width: 1px;
  height: calc(var(--control-size) - 8px);
  margin: 0 2px;
  background: rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}

.dock-tool {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-size);
  height: var(--control-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.96);
  background: transparent;
  cursor: pointer;
  transition: color 280ms cubic-bezier(0.32, 0.72, 0, 1), background 180ms ease, transform 0.1s ease;
}

.dock-tool:hover:not([aria-pressed="true"]):not(.is-active):not(:disabled) {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

.dock-tool:active:not(:disabled) {
  transform: scale(0.96);
}

.dock-tool[aria-pressed="true"],
.dock-tool.is-active {
  color: #12141a;
  background: transparent;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .dock-indicator,
  .dock-tool {
    transition: none;
  }
}

.dock-tool[aria-pressed="true"] svg,
.dock-tool.is-active svg {
  filter: none;
}

.dock-tool:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Expanding segmented row: every tab shows its icon; only the active tab
   reveals its label and grows to fill the block, so the white backdrop appears
   to glide from one tab to the next as the flex weights animate. Single row at
   any width — no wrapping, no media-query label toggling. */
.tabs {
  position: absolute;
  z-index: 5;
  top: var(--app-padding);
  left: 50%;
  display: flex;
  justify-content: center;
  gap: 3px;
  align-items: stretch;
  width: auto;
  max-width: calc(100% - var(--app-padding) * 2);
  padding: 3px 6px;
  border-radius: 999px;
  transform: translateX(-50%);
  transition: opacity var(--motion-panel) var(--ease-panel), transform var(--motion-panel) var(--ease-panel);
  pointer-events: auto;
}

/* Sliding active backdrop. A single pill is positioned by JS each frame to the
   active tab's live geometry, so it glides (and grows) continuously between
   tabs instead of cross-fading. (.tabs is already position:absolute, which is a
   valid containing block, so only the panel row needs relative.) */
.settings-panel-tabs {
  position: relative;
}

.tab-highlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 18px rgba(2, 8, 20, 0.16);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform: translate(0, 0);
}

.tab-highlight.is-ready {
  opacity: 1;
}

body.settings-open .tabs {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -10px);
}

.tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 1 auto;
  flex-grow: 0;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--control-size) - 4px);
  height: calc(var(--control-size) - 4px);
  padding: 0 0.5rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.74);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  transition:
    flex-grow 420ms var(--ease-panel),
    background 320ms var(--ease-panel),
    color 220ms ease,
    transform 100ms ease;
}

.tab-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
}

.tab-label {
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition:
    max-width 420ms var(--ease-panel),
    margin-left 420ms var(--ease-panel),
    opacity 240ms ease;
}

.tab:hover:not(.is-active) {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.tab:active {
  transform: scale(0.98);
}

.tab:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus);
}

.tab.is-active {
  color: #07162f;
  background: transparent;
}

.tab.is-active .tab-label {
  max-width: 7rem;
  margin-left: 0.4rem;
  opacity: 1;
}

.hud {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: 0 1px 12px rgba(0, 8, 24, 0.32);
}

#instructions {
  left: 50%;
  bottom: var(--app-padding);
  width: min(92vw, 720px);
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  transform: translateX(-50%);
}

.drop-panel {
  position: absolute;
  z-index: 5;
  right: var(--app-padding);
  bottom: var(--app-padding);
  display: grid;
  gap: var(--space-stack);
  width: min(270px, calc(100vw - var(--space-edge) * 2));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(var(--space-edge));
  transition: opacity 180ms cubic-bezier(0.2, 0, 0, 1), transform 180ms cubic-bezier(0.2, 0, 0, 1), visibility 180ms;
}

.settings-toggle,
.info-button {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--chrome-size);
  height: var(--chrome-size);
  border: 1px solid var(--chrome-border);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.82);
  background: var(--chrome-bg);
  box-shadow: var(--chrome-shadow);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  cursor: pointer;
  transition: color 180ms cubic-bezier(0.2, 0, 0, 1), background 180ms cubic-bezier(0.2, 0, 1), transform 100ms ease;
}

.info-anchor {
  position: relative;
  display: grid;
}

.info-popover {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 12;
  display: grid;
  gap: var(--space-stack);
  width: min(18rem, calc(100vw - var(--space-edge) * 2));
  padding: var(--space-stack);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.84);
  background: rgba(4, 15, 32, 0.94);
  box-shadow: 0 18px 48px rgba(1, 7, 20, 0.34);
  backdrop-filter: blur(20px) saturate(150%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 160ms cubic-bezier(0.2, 0, 0, 1), transform 160ms cubic-bezier(0.2, 0, 0, 1);
}

.info-popover.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.info-popover strong {
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0;
}

.info-popover p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 520;
  line-height: 1.45;
}

.right-tools {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-row);
  min-width: 0;
  flex-shrink: 0;
  pointer-events: none;
}

.zoom-widget {
  display: grid;
  grid-template-columns: var(--control-size) auto var(--control-size);
  align-items: center;
  gap: var(--space-stack);
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: var(--chrome-size);
  padding: 0 calc((var(--chrome-size) - var(--control-size)) / 2 + 0.25rem);
  border: 1px solid var(--chrome-border);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  background: var(--chrome-bg);
  box-shadow: var(--chrome-shadow);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
}

.share-button {
  display: grid;
  place-items: center;
  width: var(--chrome-size);
  height: var(--chrome-size);
  padding: 0;
  border: 1px solid var(--chrome-border);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.82);
  background: var(--chrome-bg);
  cursor: pointer;
  box-shadow: var(--chrome-shadow);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  transition: color 180ms cubic-bezier(0.2, 0, 0, 1), background 180ms cubic-bezier(0.2, 0, 0, 1), transform 100ms ease;
}

.clear-button {
  display: grid;
  place-items: center;
  width: var(--chrome-size);
  height: var(--chrome-size);
  padding: 0;
  border: 1px solid var(--chrome-border);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.82);
  background: var(--chrome-bg);
  box-shadow: var(--chrome-shadow);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  cursor: pointer;
  transition: color 180ms cubic-bezier(0.2, 0, 0, 1), background 180ms cubic-bezier(0.2, 0, 0, 1), transform 100ms ease;
}

.draw-tool-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  flex-shrink: 0;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 16px 40px rgba(2, 8, 20, 0.18);
  backdrop-filter: blur(22px) saturate(160%);
}

body.settings-open .draw-tool-switch--toolbar,
body:not([data-mode="draw"]) .draw-tool-switch--toolbar {
  display: none;
}

/* In-panel brush/eraser toggle: flat, sized to sit inline with the clear icon. */
.draw-tool-switch--panel {
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  background: rgba(255, 255, 255, 0.07);
}

.draw-tool-switch--panel .draw-tool-option {
  width: calc(var(--control-size) - 8px);
  height: calc(var(--control-size) - 8px);
}

.draw-tool-option {
  display: grid;
  place-items: center;
  width: calc(var(--control-size) - 4px);
  height: calc(var(--control-size) - 4px);
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.62);
  background: transparent;
  cursor: pointer;
  transition: color 160ms cubic-bezier(0.2, 0, 0, 1), background 160ms cubic-bezier(0.2, 0, 0, 1), transform 100ms ease;
}

.draw-tool-option svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
}

.draw-tool-option[aria-pressed="true"] {
  color: #07162f;
  background: rgba(255, 255, 255, 0.9);
}

.draw-tool-option:hover:not([aria-pressed="true"]) {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.draw-tool-option:active {
  transform: scale(0.97);
}

.draw-tool-option:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus);
}

.zoom-button {
  display: grid;
  place-items: center;
  width: var(--control-size);
  height: var(--control-size);
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.76);
  background: transparent;
  cursor: pointer;
  transition: color 180ms cubic-bezier(0.2, 0, 0, 1), transform 100ms ease;
}

.zoom-button svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

.zoom-slider {
  display: none;
}

.zoom-readout {
  box-sizing: border-box;
  /* Fixed 4-glyph text area (plus pill padding) so the readout — and the whole
     widget — never reflows as the percentage changes (85% → 100% → 400%). */
  width: calc(4ch + 0.9rem);
  min-width: 0;
  padding: 0.2rem 0.45rem;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  appearance: textfield;
  outline: 0;
  transition: background 160ms cubic-bezier(0.2, 0, 0, 1), color 160ms cubic-bezier(0.2, 0, 0, 1);
}

.zoom-readout::-webkit-outer-spin-button,
.zoom-readout::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.zoom-readout:hover {
  background: rgba(255, 255, 255, 0.08);
}

.zoom-readout:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.share-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.clear-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.zoom-button:active,
.clear-button:active,
.share-button:active,
.draw-tool-option:active {
  transform: scale(0.97);
}

.zoom-button:focus-visible,
.zoom-slider:focus-visible,
.zoom-readout:focus-visible,
.clear-button:focus-visible,
.share-button:focus-visible,
.draw-tool-option:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus);
}

.type-caret {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 96px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 14px rgba(199, 232, 255, 0.55), 0 0 2px rgba(255, 255, 255, 0.9);
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  visibility: visible;
  transition: opacity 180ms cubic-bezier(0.2, 0, 0, 1), visibility 180ms cubic-bezier(0.2, 0, 0, 1), left 140ms cubic-bezier(0.2, 0, 0, 1), top 140ms cubic-bezier(0.2, 0, 0, 1), height 140ms cubic-bezier(0.2, 0, 0, 1);
  animation: caret-blink 1.05s steps(2, jump-none) infinite;
}

.text-selection-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.text-selection-segment {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(176, 220, 255, 0.23);
  box-shadow: 0 0 22px rgba(180, 224, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body:not([data-mode="text"]) .text-selection-layer {
  display: none;
}

body:not([data-mode="text"]):not([data-mix-tool="text"]) .type-caret,
body.typebar-hidden .type-caret {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

@keyframes caret-blink {
  0%, 46% { opacity: 0.92; }
  47%, 100% { opacity: 0.26; }
}

.info-button:hover,
.settings-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.info-button:active,
.settings-toggle:active {
  transform: scale(0.96);
}

.info-button:focus-visible,
.settings-toggle:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus);
}

.info-mark {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.settings-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  grid-area: 1 / 1;
  transition: opacity 180ms cubic-bezier(0.2, 0, 0, 1), transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

.settings-icon-close {
  opacity: 0;
  transform: rotate(-70deg) scale(0.72);
}

.zoom-button:hover {
  color: #fff;
}

.settings-icon-menu {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

body.settings-open .settings-icon-menu {
  opacity: 0;
  transform: rotate(80deg) scale(0.72);
}

body.settings-open .settings-icon-close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.settings-shell {
  position: fixed;
  z-index: 9;
  top: var(--panel-inset);
  left: var(--panel-inset);
  bottom: var(--panel-inset);
  width: var(--settings-width);
  transform: translate3d(calc(-100% - var(--panel-inset)), 0, 0);
  opacity: 1;
  pointer-events: none;
  transition: transform var(--motion-panel) var(--ease-panel);
  will-change: transform;
}

body.settings-open .settings-shell {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.settings-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--panel-radius);
  color: rgba(255, 255, 255, 0.86);
}

@media (min-width: 721px) {
  .settings-shell {
    visibility: visible;
  }
}

.settings-head {
  display: grid;
  gap: var(--space-stack);
  padding: var(--space-stack) var(--panel-gap) var(--panel-gap);
  border-bottom: 0;
}

.settings-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-stack);
}

.settings-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.settings-logo {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(2, 10, 28, 0.4));
}

.settings-title strong {
  color: #fff;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 720;
  letter-spacing: 0;
}

.settings-subtitle {
  padding-right: 0.5rem;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 560;
  letter-spacing: 0;
  text-align: right;
}

.settings-body {
  display: grid;
  align-content: start;
  gap: var(--panel-gap);
  min-height: 0;
  min-width: 0;
  padding: var(--panel-gap);
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.settings-body::-webkit-scrollbar {
  width: 6px;
}

.settings-body::-webkit-scrollbar-track {
  background: transparent;
}

.settings-body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  background-clip: padding-box;
}

.settings-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
  background-clip: padding-box;
}

.settings-backdrop {
  display: none;
}

.settings-sheet-handle {
  display: none;
}

.setting-group {
  display: flow-root;
  min-width: 0;
  margin: 0;
  padding: var(--card-pad);
  border: 0;
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 2px 8px rgba(2, 8, 20, 0.16);
}

.setting-group:last-child {
  border-bottom: 0;
}

/* Collapsed cards: drop the header's bottom margin so it sits centered. */
.setting-group.is-collapsed legend {
  margin-bottom: 0;
}

.setting-group legend {
  float: left;
  padding: 0;
  width: 100%;
  inline-size: 100%;
  /* Extra breathing room below each card header (does not affect the inner
     content's own stacks/grids, which keep their own gaps). */
  margin: 0 0 var(--card-header-gap);
  color: rgba(255, 255, 255, 0.74);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
}

.setting-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-stack);
  width: 100%;
  margin: 0;
  padding: 0;
}

.setting-group-actions {
  display: flex;
  align-items: center;
  gap: var(--button-gap);
  flex-shrink: 0;
}

.setting-section-clear {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--control-size);
  height: var(--control-size);
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.62);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: color 180ms cubic-bezier(0.2, 0, 0, 1), background 180ms cubic-bezier(0.2, 0, 0, 1), border-color 180ms cubic-bezier(0.2, 0, 0, 1), transform 100ms ease;
}

.setting-section-clear:hover {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.1);
}

.setting-section-clear:active {
  transform: scale(0.96);
}

.setting-section-clear:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus);
}

.setting-section-clear svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

.setting-group-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  color: rgba(255, 255, 255, 0.54);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  cursor: pointer;
  text-align: left;
  transition: color 180ms cubic-bezier(0.2, 0, 0, 1);
}

.setting-group-toggle > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setting-group-toggle:hover {
  color: rgba(255, 255, 255, 0.82);
}

.setting-group-toggle:focus-visible {
  outline: 0;
  border-radius: 6px;
  box-shadow: 0 0 0 3px var(--focus);
}

.setting-caret {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
}

.setting-group.is-collapsed .setting-caret {
  transform: rotate(-90deg);
}

.setting-group-body > :not(:first-child) {
  margin-top: var(--section-gap);
}

.clear-button svg,
.share-button svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

.setting-group.is-collapsed .setting-group-body {
  display: none;
}

.text-input-card {
  display: grid;
  padding: 0;
  cursor: text;
  overflow: hidden;
  min-height: 7.5rem;
  /* Darker, clearly-bounded input fill so typed white text has real contrast
     against the bright backdrop instead of floating on a pale wash. */
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.06), transparent 42%),
    rgba(5, 14, 32, 0.4);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.text-input-card:not(.is-empty) {
  aspect-ratio: auto;
  max-height: min(30vh, 15rem);
}

.text-input-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 7.5rem;
  /* Symmetric inset so typed text keeps clear of the card's clipped rounded
     edge instead of being cropped before the visible boundary. */
  padding: var(--space-stack);
  box-sizing: border-box;
}

.text-input-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  padding: var(--space-stack);
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 540;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}

.text-input-card:not(.is-empty) .text-input-placeholder {
  display: none;
}

.text-input-field {
  display: block;
  flex: 0 1 auto;
  z-index: 1;
  width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 2px 0;
  border: 0;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 520;
  line-height: 1.5;
  text-align: center;
  outline: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.text-input-field::-webkit-scrollbar {
  width: 4px;
}

.text-input-field::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.text-input-card.is-empty .text-input-field {
  color: transparent;
  caret-color: rgba(255, 255, 255, 0.9);
}

.text-input-card.is-empty .text-input-field:focus,
.text-input-card.is-empty .text-input-field:not(:placeholder-shown) {
  color: rgba(255, 255, 255, 0.9);
}

.text-input-card.is-empty:has(.text-input-field:focus) .text-input-placeholder {
  opacity: 0;
}

.text-input-card:not(.is-empty) .text-input-field {
  color: rgba(255, 255, 255, 0.9);
}

.text-input-field::placeholder {
  color: transparent;
}

.draw-pad-body {
  padding: 0;
}

.draw-pad {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.1), transparent 40%),
    rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  cursor: crosshair;
  touch-action: none;
}

.draw-pad-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.draw-pad.has-strokes .draw-pad-empty {
  display: none;
}

.draw-pad-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.draw-pad-empty svg {
  width: min(52%, 10rem);
  height: auto;
  stroke: rgba(255, 255, 255, 0.28);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.setting-group legend + .setting-group-body,
.setting-group legend + .setting-rows {
  clear: both;
}

.setting-group-body > .setting-group-body > :not(:first-child),
.setting-group > :not(legend):not(.setting-group-body) + :not(legend):not(.setting-group-body) {
  margin-top: var(--section-gap);
}

.setting-inline-meta {
  color: rgba(255, 255, 255, 0.64);
  font-weight: 600;
}

.setting-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-stack);
}

.setting-header-value {
  min-width: 0;
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setting-row {
  display: grid;
  gap: var(--space-stack);
  margin: 0;
}

.setting-row:has(input[type="range"]) {
  position: relative;
  min-height: var(--control-size);
  align-items: center;
  gap: 0;
  padding: 0 var(--panel-gap);
  overflow: hidden;
  border: 0;
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, 0.09);
}

.setting-label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-stack);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 650;
}

.setting-row:has(input[type="range"]) .setting-label {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.setting-value {
  color: rgba(255, 255, 255, 0.54);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  pointer-events: auto;
  cursor: text;
  text-align: right;
  white-space: nowrap;
}

.setting-value:hover {
  color: rgba(255, 255, 255, 0.86);
}

.setting-value:focus-visible {
  outline: 0;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

.setting-value-input {
  width: 58px;
  max-width: 16vw;
  height: 22px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  color: #07162f;
  background: rgba(255, 255, 255, 0.92);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 750;
  text-align: right;
  outline: 0;
}

.mode-card {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 0;
  padding: var(--panel-gap);
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.86);
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.1), transparent 40%),
    rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.mode-card-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  height: 100%;
  text-align: center;
}

.mode-card-title,
.mode-card-meta {
  position: relative;
  z-index: 1;
}

.mode-card-meta {
  margin-top: 0;
}

.mode-upload-card::before {
  position: absolute;
  inset: var(--space-stack);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  content: "";
}

.mode-upload-card:hover,
.mode-upload-card.is-hot {
  border-color: rgba(255, 255, 255, 0.32);
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
}

.mode-upload-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mode-card-title {
  font-size: 15px;
  font-weight: 700;
}

.mode-card-meta {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 540;
}

.cloud-preset-grid,
.color-preset-grid,
.library-grid {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-row);
  --swatch-size: clamp(0.875rem, 24cqi, 1.25rem);
}

.library-grid {
  row-gap: var(--space-stack);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* ~20% larger than the default preset swatch grid (100cqi / 4.8 → / 4). */
  --library-cell: calc(100cqi / 4);
}

.library-card {
  cursor: grab;
  width: 100%;
  aspect-ratio: 1;
  min-height: var(--library-cell, 4.5rem);
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--sky-top, #0f3f73) 0%,
    var(--sky-mid, #3f79b8) 55%,
    var(--sky-bottom, #cfe7ff) 100%
  );
}

.library-card .cloud-preset-thumb {
  background: transparent;
  box-shadow: none;
}

.library-card:active {
  cursor: grabbing;
}

.preset-picker {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  --picker-ring: 2px;
  --check-orbit: calc((50% + var(--picker-ring) / 2) / sqrt(2));
  transition: transform 100ms ease, box-shadow 160ms cubic-bezier(0.2, 0, 0, 1), opacity 160ms cubic-bezier(0.2, 0, 0, 1);
}

.cloud-preset-card.preset-picker {
  border-radius: 50%;
}

.preset-picker:hover {
  opacity: 0.92;
}

.preset-picker[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #fff;
}

.preset-picker:active {
  transform: scale(0.98);
}

.preset-picker:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus);
}

.preset-picker:focus-visible[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--focus);
}

.preset-picker-check {
  position: absolute;
  top: calc(50% - var(--check-orbit) - var(--swatch-size) / 2);
  right: calc(50% - var(--check-orbit) - var(--swatch-size) / 2);
  z-index: 2;
  display: none;
  place-items: center;
  width: var(--swatch-size);
  height: var(--swatch-size);
  border-radius: 50%;
  background: #fff;
  color: #07162f;
  box-shadow: 0 1px 4px rgba(2, 8, 20, 0.2);
  pointer-events: none;
}

.preset-picker-check svg {
  width: calc(var(--swatch-size) * 0.52);
  height: calc(var(--swatch-size) * 0.52);
  stroke: currentColor;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.preset-picker[aria-pressed="true"] .preset-picker-check {
  display: grid;
}

.cloud-preset-card .cloud-preset-thumb,
.cloud-preset-card .preset-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #0f3f73;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
  overflow: hidden;
}

.color-selector-row {
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--control-gap);
  /* Clear breathing room below the fore/background row before the presets. */
  margin-bottom: var(--space-stack);
}

.color-selector {
  --swatch-size: clamp(1rem, min(1.25rem, 14cqi), 1.25rem);
  --swatch-pad: calc((var(--control-size) - var(--swatch-size)) / 2);
  display: grid;
  grid-template-columns: 1fr var(--swatch-size);
  align-items: center;
  gap: var(--space-stack);
  min-height: var(--control-size);
  /* Right inner padding matches the top/bottom gap so the swatch circle is
     equidistant from the top, right, and bottom edges. */
  padding: var(--swatch-pad) var(--swatch-pad) var(--swatch-pad) var(--panel-gap);
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 600;
  transition: box-shadow 160ms cubic-bezier(0.2, 0, 0, 1), background 160ms cubic-bezier(0.2, 0, 0, 1);
}

.color-selector:hover {
  background: rgba(255, 255, 255, 0.13);
}

/* White ring marks the active (focused) color selection without a hard border. */
.color-selector:focus-within {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.92);
}

.color-selector input[type="color"] {
  width: var(--swatch-size);
  height: var(--swatch-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  outline: 0;
}

.color-selector:focus-within input[type="color"]::-webkit-color-swatch {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.color-selector:focus-within input[type="color"]::-moz-color-swatch {
  border-color: #fff;
}

.color-selector input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-selector input[type="color"]::-webkit-color-swatch {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}

.color-selector input[type="color"]::-moz-color-swatch {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}

.color-preset-button.preset-picker {
  border-radius: 50%;
  background: #0b2b5a;
}

.color-preset-thumb {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
  pointer-events: none;
}

.text-style-rows {
  display: grid;
  gap: var(--button-gap);
  min-width: 0;
}

.text-style-row {
  display: grid;
  gap: var(--button-gap);
  min-width: 0;
}

.text-style-row--transform {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.text-style-row--fonts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.text-style-button {
  min-width: 0;
  max-width: 100%;
  height: var(--control-size);
  padding: 0 0.3rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.09);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0;
  cursor: pointer;
  transition: color 160ms cubic-bezier(0.2, 0, 0, 1), background 160ms cubic-bezier(0.2, 0, 0, 1), border-color 160ms cubic-bezier(0.2, 0, 0, 1), transform 100ms ease;
}

.text-style-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-style-button[data-font-type] {
  font-weight: 700;
}

.text-style-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
}

.text-style-button[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.42);
  color: #07162f;
  background: rgba(255, 255, 255, 0.9);
}

.text-style-button:active {
  transform: scale(0.98);
}

.text-style-button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus);
}

.text-transform-black {
  font-weight: 900;
}

.underline-mark {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.setting-row input[type="range"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  --fill: 50%;
}

.setting-row input[type="range"]:focus-visible {
  outline: 0;
}

.setting-row input[type="range"]::-webkit-slider-runnable-track {
  height: 100%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.22) calc(var(--fill) - 1px), rgba(255, 255, 255, 0) var(--fill), rgba(255, 255, 255, 0) 100%);
}

.setting-row input[type="range"]::-webkit-slider-thumb {
  width: 24px;
  height: 36px;
  margin-top: 0;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: ew-resize;
}

.setting-row input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: none;
}

.setting-row input[type="range"]::-moz-range-track {
  height: 100%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.22) calc(var(--fill) - 1px), rgba(255, 255, 255, 0) var(--fill), rgba(255, 255, 255, 0) 100%);
}

.setting-row input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: ew-resize;
}

.setting-row input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: none;
}

.setting-toggle-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-stack);
  min-height: var(--control-size);
  padding: 0 2px;
}

.setting-row input[type="checkbox"] {
  --switch-w: 2.5rem;
  --switch-h: 1.5rem;
  --switch-pad: 3px;
  --switch-knob: calc(var(--switch-h) - (var(--switch-pad) * 2));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--switch-w);
  height: var(--switch-h);
  margin: 0;
  padding: var(--switch-pad);
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 2px rgba(2, 8, 20, 0.3);
  cursor: pointer;
  transition: background 220ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.setting-row input[type="checkbox"]::before {
  flex: 0 0 auto;
  width: var(--switch-knob);
  height: var(--switch-knob);
  margin: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 8, 24, 0.35);
  content: "";
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1), background 240ms cubic-bezier(0.32, 0.72, 0, 1);
}

.setting-row input[type="checkbox"]:checked {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

.setting-row input[type="checkbox"]:checked::before {
  background: #07162f;
  box-shadow: 0 1px 3px rgba(0, 8, 24, 0.28);
  transform: translateX(calc(var(--switch-w) - var(--switch-knob) - (var(--switch-pad) * 2)));
}

.setting-row input[type="checkbox"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus);
}

.drop-panel.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

body.settings-open .drop-panel {
  opacity: 0;
  pointer-events: none;
}

.drop-zone {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--panel-gap);
  min-height: 42px;
  padding: var(--panel-gap);
  border: 1px dashed rgba(255, 255, 255, 0.36);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.78);
  background: var(--glass-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(160%);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  transition: border-color 180ms cubic-bezier(0.2, 0, 0, 1), color 180ms cubic-bezier(0.2, 0, 0, 1), transform 100ms ease;
}

.drop-zone:hover,
.drop-zone.is-hot {
  border-color: rgba(255, 255, 255, 0.72);
  color: #fff;
}

.drop-zone:active {
  transform: scale(0.985);
}

.drop-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.drop-zone small {
  color: rgba(255, 255, 255, 0.52);
  font-family: var(--font-sans);
  font-size: 10px;
}

.share-modal {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: var(--space-edge);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
}

.share-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.share-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(2, 8, 20, 0.58);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.share-modal-sheet {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-stack);
  width: min(100%, 22rem);
  padding: var(--space-edge);
  border-radius: var(--panel-radius);
  color: rgba(255, 255, 255, 0.9);
  transform: translateY(var(--space-edge)) scale(0.98);
  transition: transform var(--motion-panel) var(--ease-panel);
}

.share-modal.is-open .share-modal-sheet {
  transform: translateY(0) scale(1);
}

.share-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-stack);
}

.share-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.share-modal-close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  margin: -0.25rem -0.25rem -0.25rem 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  cursor: pointer;
  transition: color 160ms cubic-bezier(0.2, 0, 0, 1), background 160ms cubic-bezier(0.2, 0, 0, 1);
}

.share-modal-close svg {
  width: 1.05rem;
  height: 1.05rem;
  stroke: currentColor;
}

.share-modal-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.share-modal-close:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus);
}

.share-modal-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: calc(var(--panel-radius) - 6px);
  background: rgba(255, 255, 255, 0.04);
}

.share-modal-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.share-modal-desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.45;
}

.share-modal-actions {
  display: grid;
  gap: var(--space-stack);
}

.share-modal-action {
  display: grid;
  place-items: center;
  min-height: var(--control-size);
  padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  transition: color 160ms cubic-bezier(0.2, 0, 0, 1), background 160ms cubic-bezier(0.2, 0, 0, 1), transform 100ms ease;
}

.share-modal-action:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.share-modal-action:active {
  transform: scale(0.98);
}

.share-modal-action:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus);
}

.share-modal-action--primary {
  color: #07162f;
  background: rgba(255, 255, 255, 0.92);
  border-color: transparent;
}

.share-modal-action--primary:hover {
  color: #07162f;
  background: #fff;
}

.share-modal-action--ghost {
  color: rgba(255, 255, 255, 0.62);
  background: transparent;
  border-color: transparent;
}

.share-modal-status {
  min-height: 1.1rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.drop-zone[data-kind="video"],
.drop-zone[data-kind="image"] {
  display: none;
}

body[data-mode="image"] .drop-zone[data-kind="image"],
body[data-mode="video"] .drop-zone[data-kind="video"],
body[data-mode="image"] .drop-zone[data-kind="depth"],
body[data-mode="video"] .drop-zone[data-kind="depth"],
body[data-mode="mix"] .drop-zone[data-kind="image"],
body[data-mode="mix"] .drop-zone[data-kind="video"] {
  display: grid;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#sample-canvas,
#video-source {
  display: none;
}

@media (max-width: 720px) {
  :root {
    --mobile-dock-height: calc(var(--control-size) * 2 + var(--space-edge) * 2 + var(--space-stack) + env(safe-area-inset-bottom, 0px));
  }

  body.settings-open {
    --stage-left: 0px;
  }

  .settings-shell {
    z-index: 11;
    top: auto;
    right: var(--panel-inset);
    left: var(--panel-inset);
    bottom: var(--panel-inset);
    width: auto;
    max-height: min(88vh, 780px);
    transform: translate3d(0, calc(100% + var(--panel-inset)), 0);
  }

  body.settings-open .settings-shell {
    transform: translate3d(0, 0, 0);
  }

  .stage-chrome {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    gap: var(--control-gap);
    padding: var(--app-padding);
    padding-bottom: max(var(--app-padding), env(safe-area-inset-bottom));
    pointer-events: none;
    transition: opacity 180ms cubic-bezier(0.2, 0, 0, 1), transform 180ms cubic-bezier(0.2, 0, 0, 1);
  }

  body.settings-open .stage-chrome {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
  }

  .stage-toolbar {
    position: absolute;
    top: var(--space-edge);
    left: var(--space-edge);
    right: var(--space-edge);
    min-height: var(--control-size);
    pointer-events: none;
  }

  .toolbar-center {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - var(--space-edge) * 2);
  }

  .stage-toolbar-left {
    position: absolute;
    top: 0;
    left: 0;
  }

  .right-tools {
    position: absolute;
    top: 0;
    right: 0;
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
  }

  .zoom-widget {
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 11rem;
  }

  .tabs {
    position: static;
    width: 100%;
    max-width: none;
    transform: none;
    pointer-events: auto;
  }

  body.settings-open .tabs {
    transform: none;
  }

  #instructions {
    bottom: calc(var(--mobile-dock-height) + var(--space-edge));
    width: calc(100vw - var(--space-edge) * 2);
    font-size: 11px;
  }

  .drop-panel {
    right: var(--space-edge);
    bottom: calc(var(--mobile-dock-height) + var(--space-edge));
    width: calc(100vw - var(--space-edge) * 2);
  }

  .settings-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: block;
    border: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    background: rgba(2, 8, 20, 0.56);
    pointer-events: none;
    transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1);
    cursor: pointer;
  }

  body.settings-open .settings-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .settings-panel {
    border-radius: var(--panel-radius);
  }

  .settings-sheet-handle {
    display: block;
    width: 2.5rem;
    height: 0.25rem;
    margin: 0 auto var(--space-stack);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
  }

  .settings-head {
    gap: var(--space-row);
    padding: var(--panel-padding);
  }

  .setting-group {
    padding: var(--panel-padding);
  }

  .setting-section-clear {
    width: var(--control-size);
    height: var(--control-size);
  }

  .setting-header-value {
    max-width: 42%;
  }

  .mode-card-title,
  .mode-card-meta,
  .mode-card-empty,
  .text-input-placeholder {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .text-input-field {
    word-break: break-word;
  }

  .info-popover {
    position: fixed;
    top: auto;
    bottom: calc(var(--mobile-dock-height) + 0.5rem);
    left: var(--app-padding);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab,
  #stage,
  .drop-panel,
  .drop-zone,
  .clear-button,
  .share-button,
  .zoom-button,
  .settings-panel,
  .settings-shell,
  .settings-toggle,
  .info-button,
  .info-popover,
  .settings-backdrop,
  .share-modal,
  .share-modal-sheet,
  .stage-chrome {
    transition: none;
  }
}

/* ---- Mix mode: element tools, layer list, on-canvas selection ---- */
/* Mix tool switch: reuses the draw-tool-switch chrome but holds 4 tools. */
.mix-tool-switch {
  grid-template-columns: repeat(3, 1fr);
}

/* Floating canvas tool bar for Mix mode — anchored just below the top tab row,
   only visible when the side panel is closed (the panel header carries the same
   tools when it's open). The bar holds two pills: content tools (text/brush/
   eraser) and a separate navigation pill (move/select ⇄ hand/pan). */
.mix-floating-bar {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: calc(var(--app-padding) + var(--control-size) + 0.85rem);
  display: none;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity var(--motion-panel) var(--ease-panel), transform var(--motion-panel) var(--ease-panel);
  pointer-events: none;
}

body[data-mode="mix"]:not(.settings-open) .mix-floating-bar {
  display: inline-flex;
  opacity: 1;
}

.mix-floating-tools,
.mix-floating-nav {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 3px;
  padding: 4px;
  border-radius: 999px;
  pointer-events: auto;
}

.mix-floating-tools .draw-tool-option,
.mix-floating-nav .draw-tool-option {
  width: var(--control-size);
  height: var(--control-size);
  color: rgba(255, 255, 255, 0.82);
}

.mix-floating-tools .draw-tool-option svg,
.mix-floating-nav .draw-tool-option svg {
  width: 16px;
  height: 16px;
}

.mix-floating-tools .draw-tool-option:hover:not([aria-pressed="true"]),
.mix-floating-nav .draw-tool-option:hover:not([aria-pressed="true"]) {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

/* Strong, unmistakable contrast for the active tool. */
.mix-floating-tools .draw-tool-option[aria-pressed="true"],
.mix-floating-nav .draw-tool-option[aria-pressed="true"] {
  color: #0a1c3a;
  background: #ffffff;
  box-shadow: 0 2px 9px rgba(2, 10, 28, 0.3);
}

/* The nav pill swaps between an arrow (move/select) and a hand (pan). Only one
   glyph shows at a time; the active sub-mode is reflected by the .is-pan flag. */
.mix-nav-tool {
  position: relative;
}
.mix-nav-tool .nav-icon-pan { display: none; }
.mix-nav-tool.is-pan .nav-icon-select { display: none; }
.mix-nav-tool.is-pan .nav-icon-pan { display: block; }

/* Panel variant of the nav toggle (sits beside the content tool switch). */
.mix-nav-switch {
  grid-template-columns: repeat(2, 1fr);
  flex: 0 0 auto;
}

.mix-hint {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

/* Empty canvas shows cloud-rendered "Hey!" via JS — no in-canvas DOM overlay. */

/* On-canvas selection box (lives inside #stage, projected each frame) */
.mix-select-box {
  position: absolute;
  z-index: 7;
  display: none;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(8, 18, 38, 0.45), 0 8px 28px rgba(2, 8, 22, 0.32);
  pointer-events: none;
}

.mix-select-box.is-visible {
  display: block;
}

.mix-select-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1.5px solid rgba(10, 24, 48, 0.7);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(2, 8, 22, 0.35);
  pointer-events: auto;
  cursor: nwse-resize;
}

.mix-floating-bar {
  display: none !important;
}

.mix-select-handle--nw { top: -7px; left: -7px; cursor: nwse-resize; }
.mix-select-handle--ne { top: -7px; right: -7px; cursor: nesw-resize; }
.mix-select-handle--se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.mix-select-handle--sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.mix-select-handle--n { top: -5px; left: 50%; transform: translateX(-50%); width: 28px; height: 10px; border-radius: 999px; cursor: ns-resize; }
.mix-select-handle--s { bottom: -5px; left: 50%; transform: translateX(-50%); width: 28px; height: 10px; border-radius: 999px; cursor: ns-resize; }
.mix-select-handle--e { right: -5px; top: 50%; transform: translateY(-50%); width: 10px; height: 28px; border-radius: 999px; cursor: ew-resize; }
.mix-select-handle--w { left: -5px; top: 50%; transform: translateY(-50%); width: 10px; height: 28px; border-radius: 999px; cursor: ew-resize; }

.mix-select-delete {
  position: absolute;
  top: -14px;
  right: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(225, 70, 70, 0.95);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(2, 8, 22, 0.4);
  text-shadow: none;
}

.mix-select-delete:hover {
  background: rgb(235, 80, 80);
}

/* Contextual action bar floating above the selection (Figma-style). */
.mix-select-actions {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: var(--chrome-size);
  padding: calc((var(--chrome-size) - var(--control-size)) / 2) 0.5rem;
  border: 1px solid var(--chrome-border);
  border-radius: 999px;
  background: var(--chrome-bg);
  box-shadow: var(--chrome-shadow);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  pointer-events: auto;
  white-space: nowrap;
}

.mix-select-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-size);
  height: var(--control-size);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(245, 249, 255, 0.92);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, transform 120ms ease;
}

.mix-select-action svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
}

.mix-select-action:hover {
  background: rgba(255, 255, 255, 0.16);
}

.mix-select-action:active {
  transform: scale(0.94);
}

.mix-select-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(150, 196, 255, 0.85);
}