/* ============================================================
   Flow — Rosé Pine Dawn design system
   Palette: https://rosepinetheme.com (dawn)
   Fonts: Patrick Hand (hand), Caveat (script) — Google Fonts
   ============================================================ */

:root {
  /* -- Rosé Pine Dawn -- */
  --rp-base: #faf4ed;
  --rp-surface: #fffaf3;
  --rp-overlay: #f2e9e1;
  --rp-muted: #9893a5;
  --rp-subtle: #797593;
  --rp-text: #575279;
  --rp-love: #b4637a;
  --rp-gold: #ea9d34;
  --rp-rose: #d7827e;
  --rp-pine: #286983;
  --rp-foam: #56949f;
  --rp-iris: #907aa9;
  --rp-leaf: #6d8f89;
  --rp-hl-low: #f4ede8;
  --rp-hl-med: #dfdad9;
  --rp-hl-high: #cecacd;

  /* soft fills for branch colors */
  --rp-gold-soft: #f7e0b8; /* warmer amber — kept distinct from rose */
  --rp-rose-soft: #f5d4d8; /* clearer pink — kept distinct from gold */
  --rp-foam-soft: #d0e8f2; /* cool sky blue — kept distinct from pine */
  --rp-pine-soft: #d4edd8; /* clear leaf green — kept distinct from foam */
  --rp-iris-soft: #efe8f2;
  --rp-love-soft: #f6e4e0;

  /* -- app aliases -- */
  --mm-paper: var(--rp-base);
  --mm-card: var(--rp-surface);
  --mm-ink: var(--rp-text);
  --mm-ink-soft: var(--rp-subtle);
  --mm-ink-faint: var(--rp-muted);
  --mm-yellow: var(--rp-gold-soft);
  --mm-pink: var(--rp-rose-soft);
  --mm-blue: var(--rp-foam-soft);
  --mm-green: var(--rp-pine-soft);
  --mm-marker: var(--rp-rose);   /* accent: focus, hints, education */
  --mm-ok: var(--rp-pine);
  --mm-danger: var(--rp-love);
  --mm-ink-rgb: 87, 82, 121;
  --mm-marker-rgb: 215, 130, 126;
  --mm-gold-rgb: 234, 157, 52;

  /* -- typography -- */
  --mm-font-hand: "Patrick Hand", cursive;
  --mm-font-script: "Caveat", cursive;

  /* -- hand-drawn border radii ("wobbles") -- */
  --mm-wobble-1: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --mm-wobble-2: 225px 25px 255px 25px / 25px 255px 25px 225px;
  --mm-wobble-3: 100px 8px 100px 8px / 8px 100px 8px 100px;
  --mm-wobble-4: 100px 12px 100px 12px / 12px 100px 12px 100px;

  /* -- depth -- */
  --mm-shadow: 2.5px 3.5px 0 rgba(var(--mm-ink-rgb), .14);
  --mm-shadow-lift: 3.5px 5px 0 rgba(var(--mm-ink-rgb), .18);
  --mm-shadow-drag: 7px 10px 0 rgba(var(--mm-ink-rgb), .12);
}

/* ============================================================
   canvas surface
   ============================================================ */

.mm-canvas {
  position: fixed;
  inset: 0;
  background: var(--mm-paper);
}
.mm-canvas::before {
  /* paper grain */
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mm-canvas::after {
  /* vignette */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(1200px 800px at 50% 40%, transparent 55%, rgba(var(--mm-ink-rgb), .06));
}

/* ============================================================
   node
   Base class is layout-agnostic (the book shows nodes inline).
   Add .is-placed for absolute canvas positioning via left/top.
   Custom props: --r (rotation), --s (scale, set by states)
   ============================================================ */

.mm-node {
  position: relative;
  display: inline-block;
  --skew: 0deg;
  --shape-r: 0deg;
  transform: rotate(calc(var(--r, 0deg) + var(--shape-r))) skewX(var(--skew)) scale(var(--s, 1));
  background: var(--mm-card);
  border: 2.2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-1);
  padding: 9px 20px 7px;
  font-family: var(--mm-font-hand);
  font-size: 19px;
  line-height: 1.25;
  color: var(--mm-ink);
  width: max-content;
  max-width: 260px;
  text-align: center;
  /* an empty node (mid-edit) has no line box — never collapse below one line
     (1lh + vertical padding + border; border-box sizing) */
  min-height: calc(1lh + 16px + 4.4px);
  min-width: 64px;
  box-shadow: var(--mm-shadow);
  cursor: grab;
  transition: box-shadow .15s ease, transform .15s ease;
}
.mm-node.is-placed {
  position: absolute;
  transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + var(--shape-r))) skewX(var(--skew)) scale(var(--s, 1));
}

/* hierarchy variants */
.mm-node--root {
  font-family: var(--mm-font-script);
  font-size: 32px;
  font-weight: 700;
  padding: 10px 28px 8px;
  min-height: calc(1lh + 18px + 4.4px);
  min-width: 110px;
  background: var(--mm-yellow);
  border-radius: var(--mm-wobble-2);
}
.mm-node--leaf {
  font-size: 17px;
  color: var(--mm-ink-soft);
  background: transparent;
  box-shadow: none;
  border-width: 1.8px;
  border-color: rgba(var(--mm-ink-rgb), .55);
  min-height: calc(1lh + 16px + 3.6px);
}

/* branch colors */
.mm-node.b-yellow { background: var(--mm-yellow); }
.mm-node.b-pink   { background: var(--mm-pink); }
.mm-node.b-blue   { background: var(--mm-blue); }
.mm-node.b-green  { background: var(--mm-green); }

/* shape variants (cycled with X) */
.mm-node.shape-round {
  border-radius: 999px !important;
}
.mm-node.shape-para {
  --skew: -18deg;
  border-radius: 6px;
}
.mm-node.shape-para > .mm-label {
  display: inline-block;
  transform: skewX(18deg); /* keep text upright */
}

/* marks (cycled with V): badge only — ★ important / ! warning / ? question */
.mm-node.is-important::after,
.mm-node.is-warning::after,
.mm-node.is-question::after {
  position: absolute;
  top: -11px;
  right: -9px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  background: var(--mm-card);
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(8deg);
}
.mm-node.is-important::after {
  content: "★";
  color: var(--rp-gold);
  border: 1.8px solid var(--rp-gold);
  box-shadow: 1px 1.5px 0 rgba(234, 157, 52, .25);
}
.mm-node.is-warning::after {
  content: "!";
  font-family: var(--mm-font-hand);
  font-weight: 700;
  font-size: 15px;
  color: var(--rp-love);
  border: 1.8px solid var(--rp-love);
  box-shadow: 1px 1.5px 0 rgba(180, 99, 122, .25);
  transform: rotate(-6deg);
}
.mm-node.is-question::after {
  content: "?";
  font-family: var(--mm-font-hand);
  font-weight: 700;
  font-size: 15px;
  color: var(--rp-iris);
  border: 1.8px solid var(--rp-iris);
  box-shadow: 1px 1.5px 0 rgba(144, 122, 169, .25);
  transform: rotate(4deg);
}
.mm-node.is-important.mm-node--root::after,
.mm-node.is-warning.mm-node--root::after,
.mm-node.is-question.mm-node--root::after {
  width: 26px;
  height: 26px;
  font-size: 15px;
  top: -12px;
  right: -10px;
}
.mm-node.is-warning.mm-node--root::after,
.mm-node.is-question.mm-node--root::after { font-size: 17px; }

/* -- states -- */

.mm-node:hover,
.mm-node.is-hover {
  --s: 1.03;
  box-shadow: var(--mm-shadow-lift);
}

/* focused: the single keyboard-active node — soft left/right wiggle
   so selection feels alive without a loud accent color */
.mm-node.is-focused {
  --s: 1.09;
  /* thicker border simulated with a 0-spread shadow ring: changing
     border-width would shrink the content box and re-wrap the text */
  box-shadow: 0 0 0 1.3px var(--mm-ink), 5px 7px 0 rgba(var(--mm-ink-rgb), .24);
  animation: mm-focus-wiggle 1.35s ease-in-out infinite;
  transition: box-shadow .15s ease; /* don't fight the wiggle on transform */
}
@keyframes mm-focus-wiggle {
  0%, 100% {
    transform: translate(-50%, -50%)
      rotate(calc(var(--r, 0deg) + var(--shape-r) - 1.5deg))
      skewX(var(--skew))
      scale(var(--s, 1.09));
  }
  50% {
    transform: translate(-50%, -50%)
      rotate(calc(var(--r, 0deg) + var(--shape-r) + 1.5deg))
      skewX(var(--skew))
      scale(var(--s, 1.09));
  }
}
body.dragging-root .mm-node.is-focused,
body.ghosts-hidden .mm-node.is-focused {
  animation: none;
}
/* empty-canvas dismiss: settle to default size/border until hints return */
body.ghosts-hidden .mm-node.is-focused {
  --s: 1;
  box-shadow: var(--mm-shadow);
  border-color: var(--mm-ink);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
body.ghosts-hidden .mm-node.is-focused.mm-node--leaf {
  box-shadow: none;
  border-color: rgba(var(--mm-ink-rgb), .55);
}
@media (prefers-reduced-motion: reduce) {
  .mm-node.is-focused { animation: none; }
}

/* selected: part of a multi-selection; calm static outline */
.mm-node.is-selected::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px dashed rgba(var(--mm-ink-rgb), .45);
  border-radius: var(--mm-wobble-1);
  pointer-events: none;
}

/* editing: text input mode */
.mm-node.is-editing {
  background: var(--rp-surface);
  border-color: var(--rp-iris);
  box-shadow: 0 0 0 1.3px var(--rp-iris), 4px 5px 0 rgba(144, 122, 169, .22);
  cursor: text;
}

/* placeholder while a node is empty: during editing, and on the root even
   when a stray click blurred the editor before any text was typed
   (the :has(br) case covers browsers that pad empty contenteditables) */
.mm-node.is-editing:empty::before,
.mm-node.is-editing:has(> br:only-child)::before,
.mm-node--root:empty::before,
.mm-node .mm-label:empty::before {
  content: attr(data-ph);
  color: var(--mm-ink-faint);
  opacity: .75;
}

/* dragging — lifted node reads as a ghost; siblings ease into the gap */
.mm-node.is-dragging {
  opacity: .5;
  border-style: dashed;
  box-shadow: none;
  cursor: grabbing;
  z-index: 8;
  --s: 1.04;
}
body.dragging-sib #nodes .mm-node.is-placed:not(.is-dragging) {
  transition: left .18s ease, top .18s ease !important;
}
body.dragging-sib #nodes .mm-node.is-dragging {
  transition: none !important;
}

.mm-node.is-drop-target {
  border-color: var(--rp-iris);
  box-shadow:
    0 0 0 2px var(--rp-iris),
    4px 6px 0 rgba(144, 122, 169, .22);
}

/* collapsed-children badge, e.g. "+3" */
.mm-badge {
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%) rotate(4deg);
  min-width: 27px;
  height: 27px;
  padding: 1px 5px 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  background: var(--mm-card);
  border: 2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-4);
  box-shadow: 1.5px 2px 0 rgba(var(--mm-ink-rgb), .2);
  font-family: var(--mm-font-hand);
  font-size: 14px;
  color: var(--mm-ink);
}

/* small helper text under a node ("just start typing to edit") */
.mm-node-note {
  position: absolute;
  left: 50%;
  top: calc(100% + 16px);
  transform: translateX(-50%) rotate(-1.5deg);
  font-family: var(--mm-font-script);
  font-size: 17px;
  color: var(--mm-ink-faint);
  white-space: nowrap;
  pointer-events: none;
}

/* blinking caret for .is-editing (the app renders a real caret;
   this is for demos/placeholders) */
.mm-caret {
  display: inline-block;
  width: 2px;
  height: .95em;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--mm-marker);
  animation: mm-blink 1.1s steps(1) infinite;
}

/* ============================================================
   ghost nodes — keyboard education
   Dashed placeholders showing where Tab/Enter would create.
   .learn-1/.learn-2 fade as the user demonstrates the shortcut.
   ============================================================ */

.mm-ghost {
  position: relative;
  display: inline-block;
  transform: rotate(var(--r, 0deg));
  background: transparent;
  border: 2.2px dashed rgba(var(--mm-ink-rgb), .3); /* quiet muted — hints, not protagonists */
  border-radius: var(--mm-wobble-1);
  padding: 9px 20px 7px;
  font-family: var(--mm-font-hand);
  font-size: 17px;
  color: var(--mm-ink-faint);
  width: max-content;
  white-space: nowrap;
}
.mm-ghost.is-placed {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}
.mm-ghost.learn-1 { opacity: .55; }
.mm-ghost.learn-2 { opacity: .25; }

/* handwritten annotation attached to a ghost */
.mm-ghost-note {
  position: absolute;
  white-space: nowrap;
  font-family: var(--mm-font-script);
  font-size: 18px;
  font-weight: 500;
  color: var(--mm-marker);
  pointer-events: none;
}

/* ============================================================
   connectors (SVG) — drawn by sketch.js
   ============================================================ */

.mm-link {
  fill: none;
  stroke: var(--mm-ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .75;
}
.mm-link--echo {
  stroke-width: 1.6;
  opacity: .18;
}
.mm-link--ghost {
  stroke: rgba(var(--mm-ink-rgb), .38);
  stroke-dasharray: 7 8;
  opacity: .65;
}
.mm-link.is-hot {
  stroke-width: 3.2;
  opacity: 1;
}

/* ============================================================
   keycaps & hint strip
   ============================================================ */

.mm-kbd {
  display: inline-block;
  font-family: var(--mm-font-hand);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--mm-ink);
  background: var(--mm-card);
  border: 1.8px solid var(--mm-ink);
  border-radius: var(--mm-wobble-3);
  box-shadow: 1.5px 2px 0 rgba(var(--mm-ink-rgb), .25);
  padding: 1px 8px 0;
}
.mm-kbd--accent {
  border-color: var(--rp-iris);
  color: var(--rp-iris);
  box-shadow: 1.5px 2px 0 rgba(144, 122, 169, .3);
}

.mm-hintstrip {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  background: var(--mm-card);
  border: 2.2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-1);
  box-shadow: var(--mm-shadow);
  padding: 9px 24px 7px;
  font-family: var(--mm-font-hand);
  font-size: 16px;
  color: var(--mm-ink-soft);
  transform: rotate(-.4deg);
}
.mm-hintstrip span { white-space: nowrap; }
.mm-hintstrip .mm-kbd { margin-right: 6px; }
.mm-hintstrip--fixed {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) rotate(-.4deg);
  z-index: 10;
}

/* ============================================================
   chrome
   ============================================================ */

.mm-wordmark {
  font-family: var(--mm-font-script);
  font-weight: 700;
  font-size: 30px;
  color: var(--mm-ink);
  transform: rotate(-1.5deg);
  display: inline-block;
}
.mm-wordmark::after { content: "."; color: var(--mm-marker); }
.mm-wordmark .mark {
  height: 30px;
  width: auto;
  vertical-align: -6px;
  margin-right: 7px;
}

.mm-zoom {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--mm-card);
  border: 2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-3);
  box-shadow: 2px 2.5px 0 rgba(var(--mm-ink-rgb), .16);
  padding: 5px 12px 3px;
  font-family: var(--mm-font-hand);
  font-size: 16px;
  color: var(--mm-ink-soft);
  transform: rotate(.5deg);
}
.mm-zoom button {
  all: unset;
  cursor: pointer;
  padding: 0 6px;
  font-family: inherit;
  font-size: 18px;
  color: var(--mm-ink-soft);
}
.mm-zoom button:hover { color: var(--mm-ink); }

.mm-help {
  width: 40px;
  height: 40px;
  background: var(--mm-card);
  border: 2.2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-4);
  box-shadow: 2px 2.5px 0 rgba(var(--mm-ink-rgb), .16);
  display: inline-grid;
  place-items: center;
  font-family: var(--mm-font-hand);
  font-size: 20px;
  color: var(--mm-ink);
  cursor: pointer;
  transform: rotate(-2deg);
}
.mm-help:hover { box-shadow: var(--mm-shadow-lift); }

.mm-newslink {
  all: unset;
  position: relative;
  cursor: pointer;
  font-family: var(--mm-font-script);
  font-size: 18px;
  color: var(--mm-ink);
  opacity: .45;
  transform: rotate(-1.5deg);
  transition: opacity .15s ease;
}
.mm-newslink:hover { opacity: .85; }
.mm-newslink.has-news { opacity: .8; }
.mm-newslink.has-news::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -10px;
  width: 7px;
  height: 7px;
  border-radius: 55% 45% 50% 60% / 45% 55% 60% 50%;
  background: var(--mm-marker);
}

/* ============================================================
   context menu
   ============================================================ */

.mm-menu {
  width: 230px;
  background: var(--mm-card);
  border: 2.2px solid var(--mm-ink);
  border-radius: 20px 8px 24px 8px / 8px 24px 8px 20px;
  box-shadow: var(--mm-shadow-lift);
  padding: 7px;
  font-family: var(--mm-font-hand);
  font-size: 16.5px;
  color: var(--mm-ink);
  transform: rotate(-.3deg);
}
.mm-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 12px 4px;
  border-radius: 14px 5px 16px 5px / 5px 16px 5px 14px;
  cursor: pointer;
}
.mm-menu-item:hover,
.mm-menu-item.is-active { background: rgba(var(--mm-gold-rgb), .55); }
.mm-menu-item .mm-kbd { font-size: 13px; }
.mm-menu-item--danger { color: var(--mm-danger); }
.mm-menu-sep {
  border: none;
  border-top: 2px dashed rgba(var(--mm-ink-rgb), .25);
  margin: 5px 10px;
}

/* ============================================================
   overlay panel (shortcuts screen)
   ============================================================ */

.mm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--mm-ink-rgb), .25);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  z-index: 100;
}

.mm-panel {
  width: min(620px, 92vw);
  background: var(--mm-card);
  border: 2.6px solid var(--mm-ink);
  border-radius: var(--mm-wobble-2);
  box-shadow: 5px 7px 0 rgba(var(--mm-ink-rgb), .18);
  padding: 26px 32px 28px;
  font-family: var(--mm-font-hand);
  color: var(--mm-ink);
  transform: rotate(-.4deg);
}
.mm-panel-title {
  font-family: var(--mm-font-script);
  font-size: 34px;
  font-weight: 700;
  margin: 0 0 18px;
}
.mm-panel-title small {
  font-size: 18px;
  font-weight: 500;
  color: var(--mm-ink-faint);
  margin-left: 12px;
}
.mm-panel-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 40px;
}
.mm-panel-group h4 {
  font-family: var(--mm-font-script);
  font-size: 20px;
  font-weight: 700;
  color: var(--mm-marker);
  margin: 12px 0 6px;
}
.mm-shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 3px 0;
  font-size: 16.5px;
  color: var(--mm-ink-soft);
}
.mm-shortcut-row .keys { white-space: nowrap; }
.mm-shortcut-row .mm-kbd { margin-left: 4px; }

/* scrollable region inside panels — quiet, ink-toned scrollbar.
   Standard props cover Chrome + Firefox; ::-webkit-* covers Safari. */
.mm-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--mm-ink-rgb), .3) transparent;
}
.mm-scroll::-webkit-scrollbar { width: 8px; }
.mm-scroll::-webkit-scrollbar-track { background: transparent; }
.mm-scroll::-webkit-scrollbar-thumb {
  background: rgba(var(--mm-ink-rgb), .3);
  border-radius: 8px 5px 9px 5px / 5px 9px 5px 8px;
}
.mm-scroll::-webkit-scrollbar-thumb:hover { background: rgba(var(--mm-ink-rgb), .5); }

.mm-changelog {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 55vh;
  padding-right: 6px;
}
.mm-changelog-entry h4 {
  font-family: var(--mm-font-script);
  font-size: 21px;
  font-weight: 700;
  color: var(--mm-marker);
  margin: 0 0 4px;
}
.mm-changelog-entry ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mm-changelog-entry li {
  font-size: 16.5px;
  color: var(--mm-ink-soft);
  padding: 2px 0;
}
.mm-changelog-entry li::before {
  content: "✦";
  color: var(--mm-marker);
  opacity: .65;
  margin-right: 9px;
  font-size: 13px;
}

/* footer strip inside a panel — one quiet afterthought line */
.mm-panel-foot {
  margin-top: 22px;
  padding-top: 12px;
  border-top: 2px dashed rgba(var(--mm-ink-rgb), .18);
  text-align: center;
}
.mm-textlink {
  all: unset;
  cursor: pointer;
  font-family: var(--mm-font-script);
  font-size: 17.5px;
  color: var(--mm-ink-faint);
  transition: color .15s ease;
}
.mm-textlink:hover { color: var(--mm-marker); }

/* about panel — a few handwritten paragraphs of philosophy.
   Lead-ins use <b> restyled as script+marker to echo the panel h4s
   (Patrick Hand has no real bold; synthetic bold looks off-brand). */
.mm-about p {
  font-size: 17px;
  line-height: 1.5;
  color: var(--mm-ink-soft);
  margin: 0 0 13px;
}
.mm-about b {
  font-family: var(--mm-font-script);
  font-weight: 700;
  font-size: 18.5px;
  color: var(--mm-marker);
  margin-right: 3px; /* Caveat's slant eats the following space */
}
.mm-about a {
  color: var(--mm-marker);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.mm-about .sig {
  font-family: var(--mm-font-script);
  font-size: 18px;
  color: var(--mm-ink-faint);
  text-align: right;
  margin: 16px 0 0;
  transform: rotate(-1deg);
}

/* ============================================================
   toast
   ============================================================ */

.mm-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--mm-card);
  border: 2.2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-1);
  box-shadow: var(--mm-shadow);
  padding: 8px 20px 6px;
  font-family: var(--mm-font-hand);
  font-size: 16.5px;
  color: var(--mm-ink);
  transform: rotate(-.5deg);
  animation: mm-rise .45s ease backwards;
}
.mm-toast--fixed {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) rotate(-.5deg);
  z-index: 50;
}

/* ============================================================
   selection marquee
   ============================================================ */

.mm-marquee {
  position: absolute;
  border: 2px dashed var(--mm-marker);
  border-radius: 6px;
  background: rgba(var(--mm-marker-rgb), .07);
  pointer-events: none;
}

/* ============================================================
   empty canvas welcome
   ============================================================ */

.mm-empty {
  text-align: center;
  font-family: var(--mm-font-hand);
  color: var(--mm-ink);
}
.mm-empty-title {
  font-family: var(--mm-font-script);
  font-size: 44px;
  font-weight: 700;
  margin: 0 0 26px;
  transform: rotate(-1deg);
}
.mm-empty-note {
  font-family: var(--mm-font-script);
  font-size: 20px;
  color: var(--mm-ink-faint);
  margin-top: 24px;
  transform: rotate(-.6deg);
}

/* ============================================================
   mobile controls
   Touch replaces the keyboard: ghosts become tap targets, and
   a contextual action bar sits in the thumb zone.
   ============================================================ */

/* tappable ghost — same dashed placeholder, but it IS the button, so it
   keeps the marker affordance (gray would read as disabled).
   Bigger padding => ≥44px touch target. */
.mm-ghost--tap {
  border-color: var(--mm-marker);
  color: var(--mm-ink-soft);
  background: rgba(var(--mm-marker-rgb), .08);
  box-shadow: 2px 2.5px 0 rgba(var(--mm-marker-rgb), .2);
  padding: 12px 20px 10px;
  cursor: pointer;
}
.mm-ghost--tap:active { box-shadow: none; translate: 2px 2px; }

/* contextual action bar (bottom thumb zone when a node is active) */
.mm-actionbar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--mm-card);
  border: 2.2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-1);
  box-shadow: var(--mm-shadow);
  padding: 8px 12px;
  transform: rotate(-.4deg);
}
.mm-action {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 58px;
  height: 52px;
  border: 2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-4);
  background: var(--mm-card);
  box-shadow: 1.5px 2px 0 rgba(var(--mm-ink-rgb), .2);
  font-family: var(--mm-font-hand);
  color: var(--mm-ink);
  cursor: pointer;
}
.mm-action:active { box-shadow: none; translate: 1.5px 2px; }
.mm-action .glyph { font-size: 17px; line-height: 1.1; }
.mm-action .label { font-size: 11.5px; color: var(--mm-ink-soft); line-height: 1; }
.mm-action--accent { border-color: var(--mm-marker); }
.mm-action--accent .glyph { color: var(--mm-marker); }
.mm-action--danger { border-color: var(--mm-danger); }
.mm-action--danger .glyph, .mm-action--danger .label { color: var(--mm-danger); }

/* satellite buttons — round controls floating around the active node */
.mm-satellite {
  position: absolute;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  background: var(--mm-card);
  border: 2.2px solid var(--mm-ink);
  border-radius: var(--mm-wobble-4);
  box-shadow: 2px 2.5px 0 rgba(var(--mm-ink-rgb), .2);
  display: grid;
  place-items: center;
  font-family: var(--mm-font-hand);
  font-size: 20px;
  color: var(--mm-ink);
  cursor: pointer;
}
.mm-satellite--accent { border-color: var(--mm-marker); color: var(--mm-marker); }
.mm-satellite--danger { border-color: var(--mm-danger); color: var(--mm-danger); }
.mm-satellite-label {
  position: absolute;
  transform: translate(-50%, 0);
  font-family: var(--mm-font-script);
  font-size: 15px;
  color: var(--mm-ink-faint);
  white-space: nowrap;
  pointer-events: none;
}

/* ============================================================
   animations
   ============================================================ */

@keyframes mm-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}
@keyframes mm-pop {
  from { opacity: 0; transform: rotate(var(--r, 0deg)) scale(.8); }
}
@keyframes mm-rise {
  from { opacity: 0; translate: 0 10px; }
}