:root {
  color-scheme: light;
  --paper: #f5f4ee;
  --paper-deep: #efeee6;
  --ink: #354131;
  --muted: #8d9487;
  --olive: #404d36;
  --olive-dark: #2f3c27;
  --lime: #d5e79f;
  --line: #e4e7dc;
  --white: #fffefa;
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --hand: "Segoe Print", "Segoe Script", "Comic Sans MS", cursive;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { border: 0; background: none; }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [contenteditable]:focus-visible {
  outline: 2px solid #91a260;
  outline-offset: 4px;
}
button svg { flex: 0 0 auto; width: 20px; height: 20px; stroke-width: 1.7; }
button, a { touch-action: manipulation; }
a { color: inherit; }
[hidden], .hidden { display: none !important; }
.app-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); height: 100dvh; min-height: 480px; }
.sidebar {
  display: flex; flex-direction: column; padding: 32px 20px 22px;
  background: #fafbf7; border-right: 1px solid var(--line); position: relative; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px; margin-bottom: 33px; text-decoration: none; }
.brand-symbol {
  width: 38px; height: 38px; border-radius: 12px; background: var(--olive); color: var(--lime);
  display: grid; place-items: center; box-shadow: 0 2px 1px #26392312;
}
.brand-symbol svg { width: 24px; height: 24px; }
.brand-name { display: block; font-family: var(--serif); font-size: 26px; font-weight: 700; letter-spacing: -.9px; line-height: 1; }
.brand-caption { display: block; margin-top: 5px; font-size: 8px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: #9caa90; white-space: nowrap; }
.brand-dot { color: #98b35f; }
.brand-symbol { font-size: 27px; }
.new-board-button {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 10px; height: 43px; color: var(--olive-dark); background: var(--lime); font-size: 12px; font-weight: 650;
  transition: background .15s, transform .15s; box-shadow: inset 0 1px #ffffff55;
}
.new-board-button:hover { background: #cbe18c; transform: translateY(-1px); }
.new-board-button svg { width: 16px; height: 16px; }
.sidebar-label { display: flex; align-items: center; justify-content: space-between; margin: 29px 9px 13px; color: #98a18e; font-size: 9px; letter-spacing: 1.8px; font-weight: 700; text-transform: uppercase; }
.sidebar-label > span { color: #a2ae92; font-size: 8px; letter-spacing: 0; font-weight: 400; }
.board-list { display: flex; flex-direction: column; gap: 5px; }
.board-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 10px; border-radius: 8px;
  color: #7b8573; text-align: left; font-size: 12px; transition: background .15s, color .15s;
}
.board-item:hover { color: var(--olive); background: #eff3e8; }
.board-item.active { background: #edf2e4; color: var(--olive); font-weight: 650; }
.board-item svg { width: 17px; height: 17px; opacity: .8; }
.board-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.board-item .count, .board-count { color: #a2aa99; font-size: 10px; font-weight: 500; }
.board-item.active .count, .board-item.active .board-count { color: #849473; }
.sidebar-bottom { margin-top: auto; padding-top: 25px; }
.tip-card { padding: 16px 13px 14px; background: #f0f3e8; border: 1px solid #e7ecdb; border-radius: 11px; color: #829071; }
.tip-card > svg { color: #98a877; width: 19px; height: 19px; margin-bottom: 7px; }
.tip-spark { display: block; color: #a1b975; font-size: 23px; line-height: 1; margin-bottom: 10px; }
.tip-card h3, .tip-card strong { display: block; margin: 0 0 7px; color: #566449; font-size: 11px; font-weight: 650; }
.tip-card p { margin: 0; font-size: 10px; line-height: 1.8; }
.tip-card kbd { padding: 2px 5px; border: 1px solid #dae1cd; border-bottom-width: 2px; border-radius: 4px; background: #fbfcf7; color: #697559; font-family: var(--sans); font-size: 9px; }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; margin: 18px 5px 0; color: #a7ae9e; font-size: 9px; }
.help-button { display: inline-flex; align-items: center; gap: 6px; padding: 4px; color: #9ca68f; font-size: 10px; }
.help-button svg { width: 15px; height: 15px; }
.help-button:hover { color: var(--olive); }
.sidebar-bottom .help-button { margin-top: 17px; width: 100%; padding-left: 3px; font-size: 10px; }
.local-label { color: #a7b299; font-size: 8px; line-height: 1.7; margin: 14px 3px 0; }
.main-panel { min-width: 0; display: flex; flex-direction: column; height: 100dvh; }
.topbar {
  height: 88px; flex: 0 0 88px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 34px; background: #fffefa; border-bottom: 1px solid var(--line); gap: 20px; position: relative; z-index: 15;
}
.board-heading { min-width: 0; }
.eyebrow { font-size: 9px; font-weight: 650; letter-spacing: 2px; text-transform: uppercase; color: #a0a895; margin-bottom: 6px; }
.board-title { display: block; width: min(420px, 100%); margin: 0; padding: 0; border: 0; outline: 0; color: var(--olive-dark); background: none; font-family: var(--serif); font-size: 24px; font-weight: 400; letter-spacing: -.65px; line-height: 1.25; }
.board-title:focus { outline: none; box-shadow: 0 1px #a8ba8b; }
.header-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.icon-button { display: grid; place-items: center; width: 28px; height: 31px; padding: 4px; border-radius: 5px; color: #8d9b7b; }
.icon-button svg { width: 17px; height: 17px; }
.icon-button:hover { color: #5b7541; background: #f0f4e8; }
.export-wrap { position: relative; }
.export-wrap .dropdown-menu { left: auto; right: 0; min-width: 258px; }
.export-wrap .dropdown-menu span { color: #a4b096; font-size: 8px; margin-left: auto; }
.save-status { display: flex; align-items: center; gap: 6px; color: #9ba48f; font-size: 10px; white-space: nowrap; }
.save-status::before { content: ""; width: 5px; height: 5px; background: #a1b77a; border-radius: 50%; }
.save-status.saving::before { background: #c5a65c; }
.avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #e6ebd8; color: #7f8d62; font-size: 10px; font-weight: 700; }
.export-button, .presentation-button { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid #dfe5d4; border-radius: 7px; color: #71805f; font-size: 10px; font-weight: 600; background: #fffefa; transition: background .15s; }
.export-button svg, .presentation-button svg { width: 15px; height: 15px; }
.export-button:hover, .presentation-button:hover { background: #f2f5eb; border-color: #c7d4b4; }
.canvas-toolbar {
  height: 65px; flex: 0 0 65px; display: flex; align-items: center; gap: 19px;
  padding: 0 31px; background: #fffefa; border-bottom: 1px solid var(--line); position: relative; z-index: 14;
}
.tool-group { display: flex; align-items: center; gap: 6px; }
.canvas-toolbar #tools { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; touch-action: pan-x; }
.canvas-toolbar #tools::-webkit-scrollbar { display: none; }
.canvas-toolbar #tools .tool-button { flex: 0 0 auto; }
.history-tools { margin-left: auto; }
.history-tools { flex: 0 0 auto; }
.tool-button {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 8px 10px; border-radius: 7px; min-width: 35px; height: 34px; color: #819071;
  font-size: 11px; font-weight: 550; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s;
}
.tool-button:hover { background: #f0f3e8; color: var(--olive); }
.tool-button.active { color: #51613f; background: #ebf1de; box-shadow: inset 0 0 0 1px #e2eaca; }
.tool-button svg { width: 18px; height: 18px; }
.toolbar-divider { width: 1px; height: 23px; background: #e3e8d9; flex: 0 0 1px; }
.toolbar-hint { color: #a0a895; font-size: 10px; white-space: nowrap; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.toolbar-hint kbd { font: inherit; color: #7b8a67; }
.toolbar-dropdown { position: relative; }
.dropdown-menu {
  position: absolute; z-index: 70; top: calc(100% + 9px); left: 0; min-width: 180px; padding: 6px;
  border: 1px solid #e1e5d8; border-radius: 11px; background: #fffefa; box-shadow: 0 12px 30px #34412e14, 0 2px 5px #34412e08;
}
.dropdown-menu button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 10px; border-radius: 6px; font-size: 11px; color: #657452; }
.dropdown-menu button:hover { background: #f0f4e8; }
.dropdown-menu svg { width: 16px; height: 16px; }
.dropdown-menu .danger { color: #b67d69; }
.dropdown-menu .danger:hover { background: #f9efea; }
.board-more-menu { left: auto; right: 22px; min-width: 215px; top: calc(100% - 2px); }
.board-viewport {
  flex: 1; position: relative; min-height: 0; overflow: hidden; isolation: isolate; touch-action: none;
  --grid-size: 24px; --bg-x: 0px; --bg-y: 0px; --overlay-ink: #8e9a7d;
  background-color: var(--paper); background-image: radial-gradient(circle, #c4cab957 .9px, transparent 1px); background-size: var(--grid-size) var(--grid-size); background-position: var(--bg-x) var(--bg-y);
}
.board-viewport[data-bg], .background-swatch[data-bg] { --grid-size: 24px; --bg-x: 0px; --bg-y: 0px; background-position: var(--bg-x) var(--bg-y); }
:is(.board-viewport, .background-swatch)[data-bg="paper"] { --paper: #f5f4ee; background-color: #f5f4ee; background-image: radial-gradient(circle, #b9c2aa66 .9px, transparent 1px); background-size: var(--grid-size) var(--grid-size); }
:is(.board-viewport, .background-swatch)[data-bg="cream"] { --paper: #f7efde; background-color: #f7efde; background-image: radial-gradient(circle, #c8b69455 .85px, transparent 1px); background-size: var(--grid-size) var(--grid-size); }
:is(.board-viewport, .background-swatch)[data-bg="grid"] { --paper: #f1f2ea; background-color: #f1f2ea; background-image: linear-gradient(#a6b59a35 1px, transparent 1px), linear-gradient(90deg, #a6b59a35 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); }
:is(.board-viewport, .background-swatch)[data-bg="notebook"] { --paper: #fffdf5; background-color: #fffdf5; background-image: linear-gradient(90deg, transparent 0 64px, #dfa39466 64px 65px, transparent 65px), linear-gradient(#a5bcce44 1px, transparent 1px); background-size: 100% 100%, var(--grid-size) var(--grid-size); }
:is(.board-viewport, .background-swatch)[data-bg="cork"] { --paper: #be9e75; --overlay-ink: #6c5842; background-color: #be9e75; background-image: radial-gradient(ellipse at 15% 20%, #78573536 1px, transparent 2px), radial-gradient(ellipse at 75% 70%, #f0d9b657 1px, transparent 2px), radial-gradient(ellipse at 55% 40%, #6b4d2b23 .7px, transparent 1.7px); background-size: calc(var(--grid-size) / 2) calc(var(--grid-size) / 2), calc(var(--grid-size) / 3) calc(var(--grid-size) / 3), calc(var(--grid-size) / 1.4) calc(var(--grid-size) / 1.4); }
:is(.board-viewport, .background-swatch)[data-bg="sage"] { --paper: #dce6d4; --overlay-ink: #839773; background-color: #dce6d4; background-image: radial-gradient(circle, #a7b49767 .9px, transparent 1px); background-size: var(--grid-size) var(--grid-size); }
:is(.board-viewport, .background-swatch)[data-bg="mint"] { --paper: #e0f1e9; --overlay-ink: #7c9a8c; background-color: #e0f1e9; background-image: radial-gradient(circle, #9dbeb16b .85px, transparent 1px); background-size: var(--grid-size) var(--grid-size); }
:is(.board-viewport, .background-swatch)[data-bg="rose"] { --paper: #f2e3e2; --overlay-ink: #ab8b86; background-color: #f2e3e2; background-image: radial-gradient(circle, #c7a4a055 .85px, transparent 1px); background-size: var(--grid-size) var(--grid-size); }
:is(.board-viewport, .background-swatch)[data-bg="lavender"] { --paper: #eae5f2; --overlay-ink: #998bae; background-color: #eae5f2; background-image: radial-gradient(circle, #b8aac85c .85px, transparent 1px); background-size: var(--grid-size) var(--grid-size); }
:is(.board-viewport, .background-swatch)[data-bg="peach"] { --paper: #f6e4d7; --overlay-ink: #aa917a; background-color: #f6e4d7; background-image: radial-gradient(circle, #c7ab9355 .85px, transparent 1px); background-size: var(--grid-size) var(--grid-size); }
:is(.board-viewport, .background-swatch)[data-bg="sky"] { --paper: #e0eaf1; --overlay-ink: #869faf; background-color: #e0eaf1; background-image: radial-gradient(circle, #9eb7c66b .85px, transparent 1px); background-size: var(--grid-size) var(--grid-size); }
:is(.board-viewport, .background-swatch)[data-bg="sand"] { --paper: #eae1d0; --overlay-ink: #9e9177; background-color: #eae1d0; background-image: radial-gradient(circle, #b6aa9066 .85px, transparent 1px); background-size: var(--grid-size) var(--grid-size); }
:is(.board-viewport, .background-swatch)[data-bg="dark"] { --paper: #272e29; --ink: #d8e4cd; --overlay-ink: #a4b696; background-color: #272e29; background-image: radial-gradient(circle, #8b9a715c .9px, transparent 1px); background-size: var(--grid-size) var(--grid-size); }
:is(.board-viewport, .background-swatch)[data-bg="midnight"] { --paper: #1d2c3c; --ink: #d0deed; --overlay-ink: #91a7ba; background-color: #1d2c3c; background-image: radial-gradient(circle, #8aa1b54f .9px, transparent 1px); background-size: var(--grid-size) var(--grid-size); }
:is(.board-viewport, .background-swatch)[data-bg="blueprint"] { --paper: #244c6c; --ink: #d6e8f0; --overlay-ink: #a1bed0; background-color: #244c6c; background-image: linear-gradient(#b4d1e326 1px, transparent 1px), linear-gradient(90deg, #b4d1e326 1px, transparent 1px), linear-gradient(#b4d1e321 1px, transparent 1px), linear-gradient(90deg, #b4d1e321 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), calc(var(--grid-size) * 5) calc(var(--grid-size) * 5), calc(var(--grid-size) * 5) calc(var(--grid-size) * 5); }
:is(.board-viewport, .background-swatch)[data-bg="chalk"] { --paper: #35483c; --ink: #e0e7d6; --overlay-ink: #a2b69a; background-color: #35483c; background-image: radial-gradient(circle, #c7d4b825 .6px, transparent 1px), repeating-linear-gradient(12deg, #dae3d005 0 1px, transparent 1px 7px); background-size: calc(var(--grid-size) / 3) calc(var(--grid-size) / 3), calc(var(--grid-size) * 2) calc(var(--grid-size) * 2); }
:is(.board-viewport, .background-swatch)[data-bg="clean"] { --paper: #fffefa; background: #fffefa; }
:is(.board-viewport, .background-swatch)[data-bg="sunset"] { --paper: #f0ddd1; --overlay-ink: #aa8b80; background-color: #f0ddd1; background-image: radial-gradient(ellipse at 80% 20%, #f7e5b9 0, transparent 52%), linear-gradient(135deg, #f1dbdb 0%, #f4dfce 45%, #e4dcf0 100%); background-size: cover; background-position: center; }
.board-viewport .welcome-chip, .board-viewport .board-stats { color: var(--overlay-ink, #8e9a7d); }
.board-viewport:is([data-bg="dark"], [data-bg="midnight"], [data-bg="blueprint"], [data-bg="chalk"]) .welcome-chip strong { color: var(--ink); }
.board-viewport:is([data-bg="dark"], [data-bg="midnight"], [data-bg="blueprint"], [data-bg="chalk"]) .paste-hint { color: var(--overlay-ink); border-color: #d7e4cc25; }
.board-viewport:is([data-bg="dark"], [data-bg="midnight"], [data-bg="blueprint"], [data-bg="chalk"]) .paste-hint kbd { color: #d6e4c4; }
.board-viewport:is([data-bg="dark"], [data-bg="midnight"], [data-bg="blueprint"], [data-bg="chalk"]) .node-text { padding: 14px 18px; background: #fffefae8; border-radius: 4px; box-shadow: 0 3px 12px #09110b15; }
.board-viewport:is([data-bg="dark"], [data-bg="midnight"], [data-bg="blueprint"], [data-bg="chalk"]) .empty-state { color: var(--overlay-ink); }
.board-viewport:is([data-bg="dark"], [data-bg="midnight"], [data-bg="blueprint"], [data-bg="chalk"]) .empty-state h2 { color: var(--ink); }
.background-button { min-width: 34px; }
.background-picker { position: absolute; top: 58px; right: 20px; width: 360px; max-width: calc(100vw - 30px); max-height: min(540px, calc(100dvh - 175px)); overflow-y: auto; padding: 18px; border: 1px solid #e0e6d5; border-radius: 13px; background: #fffefa; box-shadow: 0 14px 35px #35452b1c; z-index: 80; scrollbar-width: thin; scrollbar-color: #c5d1b2 transparent; }
.background-picker .panel-heading { color: #6a8151; font-size: 11px; margin-bottom: 14px; }
.background-picker .panel-heading button { font-size: 19px; }
.background-picker > p { margin: -5px 0 15px; color: #a5b394; font-size: 9px; line-height: 1.6; }
.background-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.background-option { min-width: 0; padding: 5px; border: 1px solid transparent; border-radius: 9px; text-align: center; transition: border-color .15s, background .15s; }
.background-option:hover { background: #f2f6e9; border-color: #e1e9d3; }
.background-option.active, .background-option.selected { border-color: #b1c787; background: #edf4df; }
.background-swatch { display: block; width: 100%; height: 52px; border: 4px solid #fffefa; border-radius: 7px; box-shadow: 0 1px 3px #3b4f2613; }
.background-swatch[data-bg] { --grid-size: 13px; --bg-x: 0px; --bg-y: 0px; }
.background-option > span:not(.background-swatch), .background-option .background-label { display: block; margin: 6px 0 1px; color: #8b9b76; font-size: 9px; line-height: 1.4; }
.background-option.active > span:not(.background-swatch), .background-option.active .background-label { color: #6e874d; }
.board-viewport.panning, .board-viewport.pan-mode, .board-viewport.hand-tool, .board-viewport.space-pan { cursor: grab; }
.board-viewport.hand-tool .node, .board-viewport.space-pan .node { cursor: grab; }
.board-viewport.panning:active { cursor: grabbing; }
.board-viewport.connecting { cursor: crosshair; }
.board-world.connecting, .board-world.connecting .node, .board-world.connecting .node [contenteditable] { cursor: crosshair; }
.board-viewport.hand-tool .node [contenteditable], .board-viewport.space-pan .node [contenteditable] { cursor: grab; }
.board-world { position: absolute; left: 0; top: 0; width: 10000px; height: 10000px; transform-origin: 0 0; will-change: transform; }
.connections { position: absolute; left: 0; top: 0; width: 10000px; height: 10000px; overflow: visible; pointer-events: none; z-index: 0; }
.connections .edge { fill: none; stroke: #9aa58a; stroke-width: 1.8; stroke-linecap: round; }
.connections .edge-dashed { stroke-dasharray: 5 6; }
.connections .edge-selected { stroke: var(--olive); stroke-width: 2.7; }
.connections .edge rect, .connections .edge text { stroke: none; }
.connections .edge-hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; cursor: pointer; }
.connections .edge-label { fill: #748265; font-family: var(--sans); font-size: 10px; paint-order: stroke; stroke: var(--paper); stroke-width: 8px; stroke-linejoin: round; pointer-events: auto; cursor: pointer; }
.node {
  position: absolute; width: 258px; color: #424d38; border-radius: 3px; z-index: 2; cursor: grab;
  outline: 1.5px solid transparent; outline-offset: 7px; transition: outline-color .12s, filter .15s;
}
.node:hover { z-index: 5; }
.node.selected { outline-color: #8d9d6c; z-index: 8; }
.node.link-source { outline-color: #91aa4f; outline-style: dashed; }
.node.search-match { outline: 2px solid #b6ca68; outline-offset: 9px; box-shadow: 0 0 0 12px #d7e8a327; }
.node.dragging { cursor: grabbing; z-index: 10; filter: drop-shadow(0 10px 10px #37432f1c); transition: none; }
.node [contenteditable] { cursor: text; outline: none; min-height: 1em; overflow-wrap: anywhere; }
.node [contenteditable]:empty::before { content: attr(data-placeholder); color: #8a92746b; pointer-events: none; }
.node [contenteditable]:focus { border-radius: 2px; box-shadow: 0 1px #687b4455; }
.drag-handle { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 27px; height: 13px; display: grid; place-items: center; color: #73865c; background: #fffefa; border: 1px solid #d6dec9; border-radius: 5px; opacity: 0; transition: opacity .15s; cursor: grab; z-index: 5; }
.drag-handle svg { width: 15px; height: 9px; }
.node:hover .drag-handle, .node.selected .drag-handle { opacity: 1; }
.node-controls {
  position: absolute; right: -7px; top: -43px; display: flex; align-items: center; gap: 2px;
  padding: 4px; border: 1px solid #dfe5d4; border-radius: 8px; background: #fffefa; box-shadow: 0 4px 12px #4253390d;
  opacity: 0; pointer-events: none; transition: opacity .15s; white-space: nowrap; z-index: 20;
}
.node.selected .node-controls { opacity: 1; pointer-events: auto; }
.node-controls button { display: grid; place-items: center; width: 26px; height: 25px; border-radius: 4px; color: #83956c; }
.node-controls button:hover { background: #edf2e2; color: #4f643b; }
.node-controls button.danger:hover { color: #b6685d; background: #faeee9; }
.node-controls svg { width: 14px; height: 14px; }
.node-controls .drag-handle { position: static; transform: none; opacity: 1; width: 26px; height: 25px; border: 0; background: transparent; padding: 3px; border-radius: 4px; }
.node-controls .drag-handle:hover { background: #edf2e2; }
.node-controls .drag-handle svg { width: 14px; height: 14px; }
.node-resize { position: absolute; right: -10px; bottom: -10px; width: 12px; height: 12px; border: 2px solid #fffefa; border-radius: 3px; background: #849960; box-shadow: 0 0 0 1px #849960; cursor: nwse-resize; opacity: 0; z-index: 20; }
.node.selected .node-resize { opacity: 1; }
.connect-port { position: absolute; right: -13px; top: 50%; width: 12px; height: 12px; border-radius: 50%; border: 3px solid #fffefa; background: #9caf6b; box-shadow: 0 0 0 1px #aab990; opacity: 0; pointer-events: none; transform: translateY(-50%); z-index: 22; cursor: crosshair; }
.connecting .connect-port, .node.selected .connect-port { opacity: 1; pointer-events: auto; }
.connect-port:hover { background: #617b36; transform: translateY(-50%) scale(1.3); }
.connect-port.bottom { right: auto; left: 50%; top: auto; bottom: -13px; transform: translateX(-50%); }
.node-photo { background: #fffefa; padding: 13px 13px 15px; box-shadow: 0 5px 12px #3d483218, 0 1px 2px #3d48320c; }
.photo-frame { width: 100%; background: #e9eadf; overflow: hidden; }
.photo-frame img { display: block; width: 100%; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.photo-caption { font-family: var(--serif); font-size: 16px; font-style: italic; letter-spacing: -.35px; text-align: center; padding: 14px 4px 0; line-height: 1.45; color: #526040; }
.pin { position: absolute; top: -7px; left: 50%; width: 17px; height: 17px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 35% 27%, #d7e1ad 0%, #91a464 47%, #718849 100%); box-shadow: 1px 3px 2px #3b492945, inset -1px -1px 1px #52633c55; z-index: 6; pointer-events: none; }
.pin::after { content: ""; position: absolute; width: 5px; height: 5px; left: 4px; top: 3px; background: #f4f9df80; border-radius: 50%; filter: blur(.3px); }
.pin.red { background: radial-gradient(circle at 35% 27%, #ebad8c, #b96854 52%, #965446); box-shadow: 1px 3px 2px #603e3545, inset -1px -1px 1px #72483655; }
.pin.blue { background: radial-gradient(circle at 35% 27%, #d0e1e8, #859fad 52%, #5d7a89); }
.node-note, .node-list, .node-shape { background: var(--card-color, #e7edcf); padding: 24px 23px 20px; box-shadow: 0 5px 9px #3e482813, 0 1px 2px #3e48280a; border-radius: 2px; }
.node-note::after, .node-shape::after { content: ""; position: absolute; bottom: 0; right: 0; width: 18px; height: 18px; background: linear-gradient(135deg, transparent 50%, #38472b08 50%); pointer-events: none; }
.note-title { font-family: var(--serif); font-size: 23px; font-weight: 400; letter-spacing: -.7px; line-height: 1.28; }
.note-label { display: flex; align-items: center; gap: 5px; margin-bottom: 12px; font-family: var(--sans); font-size: 8px; color: #83936b; letter-spacing: 1px; }
.note-label span { font-size: 12px; color: #92a575; }
.note-body { margin-top: 13px; font-size: 12px; line-height: 1.85; color: #62704f; }
.note-body ul, .note-body ol { margin: 7px 0; padding-left: 18px; }
.note-title, .note-body, .photo-caption, .text-body, .list-title { white-space: pre-wrap; }
.node-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 20px; font-size: 9px; color: #839169; }
.node-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 4px; background: #ffffff44; color: #76885b; font-size: 8px; font-weight: 600; letter-spacing: .2px; }
.node-footer svg { width: 11px; height: 11px; }
.node-text { background: transparent; box-shadow: none; width: 310px; }
.text-body { font-family: var(--serif); font-size: 28px; color: var(--card-color, #66764f); line-height: 1.25; letter-spacing: -.9px; }
.node-text.small .text-body { font-size: 19px; }
.node-text .node-footer { margin-top: 12px; }
.node-list { width: 248px; padding: 22px 21px 18px; }
.list-heading { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.list-symbol { flex: 0 0 17px; color: #9da77d; display: flex; align-items: center; }
.list-symbol svg { width: 17px; height: 17px; stroke-width: 1.5; }
.list-title { font-family: var(--serif); font-size: 20px; line-height: 1.35; letter-spacing: -.5px; flex: 1; min-width: 0; }
.collapse-button { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 4px; color: #7a8b60; flex-shrink: 0; }
.collapse-button:hover { background: #ffffff44; }
.collapse-button svg { width: 14px; height: 14px; transition: transform .18s; }
.node-list.collapsed .collapse-button svg { transform: rotate(-90deg); }
.list-progress { margin-top: 11px; color: #a1a784; font-size: 8px; }
.list-progress > div { margin-top: 7px; height: 3px; border-radius: 2px; overflow: hidden; background: #6b795117; }
.list-progress i { display: block; height: 100%; background: #a4b47b; border-radius: 2px; transition: width .2s; }
.list-items { margin-top: 15px; display: flex; flex-direction: column; gap: 10px; }
.checklist-row { display: flex; align-items: flex-start; gap: 8px; min-height: 18px; }
.checklist-row input[type="checkbox"] { flex: 0 0 auto; width: 13px; height: 13px; margin: 3px 0 0; accent-color: #7a9153; cursor: pointer; border-radius: 3px; }
.item-text { flex: 1; min-width: 0; font-size: 11px; color: #62714f; line-height: 1.65; }
.checklist-row:has(input:checked) .item-text { color: #929f7e; text-decoration: line-through; text-decoration-color: #82956a88; }
.remove-item-btn { display: grid; place-items: center; width: 18px; height: 18px; font-size: 16px; color: #8e9c7b; opacity: 0; padding: 0; flex-shrink: 0; }
.checklist-row:hover .remove-item-btn { opacity: 1; }
.remove-item-btn:hover { color: #a4604e; }
.add-item-button { margin-top: 14px; padding: 4px 0; display: flex; align-items: center; gap: 4px; color: #8c9b75; font-size: 10px; }
.add-item-button svg { width: 12px; height: 12px; }
.add-item-button:hover { color: #536939; }
.node-list.collapsed .list-items, .node-list.collapsed .add-item-button { display: none; }
.node[data-font="sans"] .note-title, .node[data-font="sans"] .list-title, .node[data-font="sans"] .text-body, .node[data-font="sans"] .photo-caption { font-family: var(--sans); font-style: normal; letter-spacing: -.65px; }
.node[data-font="sans"] .note-body, .node[data-font="sans"] .item-text { font-family: var(--sans); }
.node[data-font="hand"] .note-title, .node[data-font="hand"] .note-body, .node[data-font="hand"] .list-title, .node[data-font="hand"] .item-text, .node[data-font="hand"] .text-body, .node[data-font="hand"] .photo-caption { font-family: var(--hand); font-style: normal; letter-spacing: -.55px; }
.node[data-font="serif"] .note-body, .node[data-font="serif"] .item-text { font-family: var(--serif); font-size: 13px; line-height: 1.75; }
.node[data-font="hand"] .note-body { font-size: 13px; line-height: 1.85; }
.node[data-font="hand"] .item-text { font-size: 12px; }
.node[data-font="hand"] .photo-caption { font-size: 15px; }
.node[data-size="s"] .note-title, .node[data-size="s"] .list-title { font-size: 18px; }
.node[data-size="s"] .note-body, .node[data-size="s"] .item-text { font-size: 11px; }
.node[data-size="s"] .photo-caption { font-size: 13px; }
.node[data-size="s"] .text-body { font-size: 21px; }
.node[data-size="l"] .note-title, .node[data-size="l"] .list-title { font-size: 28px; }
.node[data-size="l"] .note-body, .node[data-size="l"] .item-text { font-size: 15px; }
.node[data-size="l"] .photo-caption { font-size: 19px; }
.node[data-size="l"] .text-body { font-size: 40px; line-height: 1.2; letter-spacing: -1.2px; }
.node-quote { width: 380px; padding: 28px; border-radius: 4px; background: var(--card-color, #e6edd6); box-shadow: 0 5px 10px #3e482813, 0 1px 2px #3e48280a; }
.quote-mark { position: absolute; top: 10px; right: 20px; color: #789059; opacity: .18; font-family: var(--serif); font-size: 90px; line-height: 1; pointer-events: none; user-select: none; }
.quote-label { position: relative; margin-bottom: 22px; color: #93a67c; font-family: var(--sans); font-size: 8px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; }
.quote-body { position: relative; font-family: var(--serif); font-size: 32px; line-height: 1.35; letter-spacing: -.8px; color: #50633d; white-space: pre-wrap; }
.quote-footer { position: relative; margin-top: 24px; font-family: var(--serif); font-style: italic; font-size: 12px; line-height: 1.6; color: #8b9d74; white-space: pre-wrap; }
.node-quote[data-font="sans"] .quote-body, .node-quote[data-font="sans"] .quote-footer { font-family: var(--sans); }
.node-quote[data-font="hand"] .quote-body, .node-quote[data-font="hand"] .quote-footer { font-family: var(--hand); font-style: normal; }
.node-quote[data-font="hand"] .quote-body { line-height: 1.5; letter-spacing: -.9px; }
.node-quote[data-size="s"] .quote-body { font-size: 24px; }
.node-quote[data-size="m"] .quote-body { font-size: 32px; }
.node-quote[data-size="l"] .quote-body { font-size: 42px; line-height: 1.25; letter-spacing: -1.2px; }
.node-outline { width: 350px; padding: 22px 20px 18px; background: #fffefa; border-radius: 5px; box-shadow: 0 5px 12px #3e482811, 0 1px 2px #3e48280c; }
.outline-heading { display: flex; align-items: center; gap: 10px; }
.outline-title { flex: 1; min-width: 0; font-family: var(--serif); font-size: 24px; line-height: 1.35; color: #5c6f46; letter-spacing: -.6px; white-space: pre-wrap; }
.outline-actions { display: flex; flex-shrink: 0; gap: 3px; }
.outline-actions button { display: grid; place-items: center; width: 22px; height: 23px; padding: 4px; border-radius: 5px; color: #a4b194; font-size: 10px; }
.outline-actions button:hover { color: #6f8754; background: #eef3e4; }
.outline-actions svg { width: 12px; height: 12px; }
.outline-sections { margin-top: 18px; }
.outline-section { position: relative; padding: 12px; margin-top: 8px; border: 1px solid #edf0e5; border-radius: 10px; background: #f6f5ee; }
.outline-section-heading { display: flex; align-items: center; gap: 10px; }
.outline-toggle { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 0; }
.outline-section-toggle { display: flex; align-items: center; gap: 4px; flex: 0 0 43px; width: 43px; padding: 0; color: #9cac89; }
.outline-number { flex: 0 0 28px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e8eedb; color: #7e945f; font-family: var(--serif); font-size: 12px; }
.outline-section-title { flex: 1; min-width: 0; color: #74865d; font-size: 12px; font-weight: 550; line-height: 1.5; overflow-wrap: anywhere; }
.section-title { flex: 1; min-width: 0; color: #74865d; font-size: 12px; font-weight: 550; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.outline-section-heading > .outline-toggle { flex: 0 0 43px; width: 43px; gap: 4px; }
.outline-toggle > svg, .outline-section-toggle > svg { flex-shrink: 0; width: 11px; height: 11px; color: #a8b596; transition: transform .18s; }
.outline-toggle > svg { margin-left: auto; }
.outline-content { padding: 14px 0 2px 2px; font-size: 12px; color: #8a9779; line-height: 1.8; white-space: pre-wrap; }
.outline-body { min-height: 18px; white-space: pre-wrap; line-height: 1.8; }
.section-body { min-height: 18px; padding: 14px 0 2px 2px; font-size: 12px; color: #8a9779; white-space: pre-wrap; line-height: 1.8; }
.outline-section.collapsed .outline-content { display: none; }
.outline-section.collapsed .section-body { display: none; }
.outline-section.collapsed .outline-toggle > svg, .outline-section.collapsed .outline-section-toggle > svg { transform: rotate(-90deg); }
.outline-remove { flex-shrink: 0; display: grid; place-items: center; padding: 0; width: 17px; height: 21px; font-size: 15px; line-height: 1; color: #bac3ad; opacity: 0; transition: opacity .15s; }
.outline-section:hover .outline-remove, .node-outline.selected .outline-remove { opacity: 1; }
.outline-remove:hover { color: #ae7b66; }
.node-outline .add-item-button { margin-top: 13px; }
.node-outline[data-font="sans"] .outline-title, .node-outline[data-font="sans"] .outline-body { font-family: var(--sans); }
.node-outline[data-font="sans"] .section-title, .node-outline[data-font="sans"] .section-body { font-family: var(--sans); }
.node-outline[data-font="serif"] .outline-body { font-family: var(--serif); font-size: 13px; }
.node-outline[data-font="serif"] .section-body { font-family: var(--serif); font-size: 13px; }
.node-outline[data-font="hand"] .outline-title, .node-outline[data-font="hand"] .outline-body { font-family: var(--hand); }
.node-outline[data-font="hand"] .section-title, .node-outline[data-font="hand"] .section-body { font-family: var(--hand); }
.node-outline[data-size="s"] .outline-title { font-size: 20px; }
.node-outline[data-size="l"] .outline-title { font-size: 30px; }
.node-outline[data-size="l"] .outline-body { font-size: 14px; }
.node-outline[data-size="l"] .section-body { font-size: 14px; }
.node-drawing { width: 440px; padding: 16px; background: var(--card-color, #fffefa); border-radius: 5px; box-shadow: 0 5px 12px #3e482811, 0 1px 2px #3e48280c; }
.drawing-heading { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.drawing-title { flex: 1; min-width: 0; font-family: var(--serif); font-size: 18px; line-height: 1.4; color: #617449; letter-spacing: -.4px; }
.drawing-tag { color: #a3b292; font-size: 7px; letter-spacing: 1.4px; font-weight: 600; white-space: nowrap; }
.drawing-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 36px; margin: 10px 0 9px; padding: 4px 5px; border: 1px solid #e8eddf; border-radius: 7px; background: #f2f6e9; }
.drawing-tool { display: grid; place-items: center; width: 27px; height: 26px; padding: 5px; border-radius: 4px; color: #91a17d; }
.drawing-tool svg { width: 15px; height: 15px; }
.drawing-tool:hover { background: #e6eed8; color: #657e47; }
.drawing-tool.active { background: #819660; color: #fffdf5; }
.drawing-color { width: 23px; height: 23px; padding: 2px; margin: 0 3px; border: 1px solid #d9e3ca; border-radius: 5px; background: #fffefa; cursor: pointer; }
.drawing-width { width: 65px; height: 3px; margin: 0 4px; accent-color: #8da46b; cursor: pointer; }
.drawing-clear { display: grid; place-items: center; width: 26px; height: 26px; padding: 5px; margin-left: auto; border-radius: 4px; color: #adb69a; }
.drawing-clear svg { width: 14px; height: 14px; }
.drawing-clear:hover { color: #b17e64; background: #f9ece4; }
.drawing-surface { background: #fffefa; border: 1px solid #e5eadb; border-radius: 6px; overflow: hidden; }
.drawing-canvas { display: block; width: 100%; height: 280px; touch-action: none; cursor: crosshair; }
.drawing-size { margin-top: 9px; text-align: right; font-size: 7px; color: #b2bda3; line-height: 1.6; }
.node-drawing[data-font="sans"] .drawing-title { font-family: var(--sans); }
.node-drawing[data-font="hand"] .drawing-title { font-family: var(--hand); }
.node-drawing[data-size="s"] .drawing-title { font-size: 15px; }
.node-drawing[data-size="l"] .drawing-title { font-size: 24px; }
.branch-count { display: inline-flex; align-items: center; justify-content: center; padding: 2px 5px; min-width: 17px; min-height: 16px; border-radius: 9px; background: #e7edd9; color: #92a576; font-family: var(--sans); font-size: 8px; line-height: 1; }
.branch-fold, .branch-fold-button, .branch-collapse-button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 5px; background: #fffefa; color: #8ea574; font-size: 9px; }
.branch-fold:hover, .branch-fold-button:hover, .branch-collapse-button:hover { color: #648246; background: #f0f5e5; }
.branch-fold svg, .branch-fold-button svg, .branch-collapse-button svg { width: 12px; height: 12px; }
.node.branch-collapsed .branch-fold svg, .node.branch-collapsed .branch-fold-button svg { transform: rotate(-90deg); }
.branch-badge { position: absolute; bottom: -18px; left: 50%; display: flex; align-items: center; justify-content: center; gap: 4px; transform: translateX(-50%); white-space: nowrap; padding: 4px 8px; border: 1px solid #dce5cd; border-radius: 12px; background: #f9fbf3; color: #8da473; box-shadow: 0 2px 5px #3649280a; font-size: 8px; line-height: 1.2; }
.branch-badge svg { width: 10px; height: 10px; }
.branch-toggle svg { transition: transform .15s; }
.node.folded .branch-toggle svg { transform: rotate(-90deg); }
.node-magnet { width: 112px; height: auto; aspect-ratio: 1; container-type: inline-size; background: transparent; border-radius: 50%; padding: 0; }
.magnet-symbol { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; font-size: 76px; font-size: 70cqw; line-height: 1; filter: drop-shadow(0 5px 1px #40513214) drop-shadow(0 12px 8px #40513212); user-select: none; }
.node-magnet::before { content: ""; position: absolute; bottom: 3px; left: 50%; width: 90px; height: 12px; background: #54693c13; border-radius: 50%; filter: blur(5px); transform: translateX(-50%); }
.node-magnet .node-controls { right: -12px; }
.node-magnet .drag-handle { top: -10px; }
.magnet-picker { position: absolute; left: 380px; top: 57px; width: 288px; padding: 15px; background: #fffefa; border: 1px solid #e1e6d8; border-radius: 13px; box-shadow: 0 14px 32px #35442b19; z-index: 80; }
.magnet-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.magnet-option { display: grid; place-items: center; min-width: 0; height: 44px; font-size: 29px; border-radius: 8px; transition: background .12s, transform .12s; }
.magnet-option:hover { background: #edf3de; transform: scale(1.12); }
.magnet-picker .panel-heading { margin-bottom: 10px; }
.magnet-picker > p { color: #a0ac90; font-size: 9px; margin: -3px 0 12px; }
.color-green { --card-color: #e7edcf; }
.color-yellow { --card-color: #f3e8bd; }
.color-pink { --card-color: #f1ddd4; }
.color-blue { --card-color: #dde7e8; }
.color-white { --card-color: #fffefa; }
.floating-style, .connection-panel {
  position: absolute; top: 22px; right: 22px; width: 216px; padding: 16px 15px; border: 1px solid #e2e6d9;
  border-radius: 11px; background: #fffefaf5; box-shadow: 0 7px 20px #3a482d0b; z-index: 30; backdrop-filter: blur(10px); max-height: calc(100% - 90px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbd6b8 transparent;
}
.panel-heading { display: flex; align-items: center; justify-content: space-between; color: #6e7e5b; font-size: 10px; font-weight: 650; margin-bottom: 14px; }
.panel-heading button { padding: 0; color: #a1ad91; display: flex; }
.panel-heading svg { width: 14px; height: 14px; }
.panel-heading small { color: #a3ad94; font-size: 9px; font-weight: 400; }
.swatches { display: flex; align-items: center; justify-content: space-between; gap: 0; margin-bottom: 17px; }
.swatch { flex: 0 0 21px; width: 21px; height: 21px; background: var(--swatch, var(--card-color, #e7edcf)); border-radius: 50%; border: 1px solid #40512c12; position: relative; }
.swatch.selected::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #96a77a; }
.swatch:hover { transform: translateY(-1px); }
.custom-color { width: 21px; height: 21px; flex-shrink: 0; position: relative; display: grid; place-items: center; border: 1px dashed #c6d2b2; border-radius: 50%; color: #a0af8c; font-size: 16px; cursor: pointer; }
.custom-color input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.style-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; color: #9aa58b; font-size: 10px; }
.style-row label, .style-label { font-size: 9px; color: #95a187; }
.style-label { display: block; margin: 15px 0 7px; font-size: 8px; letter-spacing: 1px; }
.panel-heading + .style-label { margin-top: 3px; }
.style-row select, .style-select { max-width: 105px; background: #f3f6ec; border: 1px solid #e3e9d8; border-radius: 5px; padding: 5px 6px; color: #778963; font-size: 9px; outline-offset: 2px; }
.style-row input[type="range"] { width: 97px; height: 3px; accent-color: #93a96b; cursor: pointer; }
.style-row input[type="checkbox"] { width: 13px; height: 13px; accent-color: #93a96b; }
.style-row input[type="color"] { width: 27px; height: 22px; padding: 2px; border: 1px solid #dfe6d3; border-radius: 5px; background: #fffefa; cursor: pointer; }
.segmented { display: flex; align-items: center; padding: 2px; border-radius: 6px; background: #f1f4e9; border: 1px solid #e8eddf; }
.segmented button { display: grid; place-items: center; min-width: 25px; height: 25px; padding: 3px 6px; color: #9ba88b; font-size: 9px; border-radius: 4px; }
.segmented button { flex: 1; }
.segmented button[data-font="hand"] { font-family: var(--hand) !important; }
.segmented button:hover { color: #5f7548; }
.segmented button.active, .segmented button.selected { background: #fffefa; color: #617648; box-shadow: 0 1px 3px #2f412516; }
.segmented svg { width: 12px; height: 12px; }
.panel-divider { height: 1px; margin: 14px 0; background: #edf0e5; }
.panel-action { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; margin-top: 14px; padding: 8px 5px; font-size: 9px; color: #78935b; background: #edf3e2; border-radius: 5px; }
.panel-action svg { width: 13px; height: 13px; }
.style-actions { display: flex; flex-direction: column; gap: 3px; margin-top: 17px; padding-top: 10px; border-top: 1px solid #e7ecde; }
.style-actions button { display: flex; align-items: center; gap: 7px; padding: 7px 5px; text-align: left; color: #8da276; font-size: 9px; border-radius: 5px; }
.style-actions button:hover { background: #edf3e2; color: #668349; }
.style-actions button.danger { color: #b38a79; }
.style-actions button.danger:hover { background: #fbf0e8; color: #a86d54; }
.style-actions svg { width: 13px; height: 13px; }
.edge-label-input { width: 100%; min-width: 0; border: 1px solid #dfe7d2; border-radius: 6px; padding: 8px; background: #f7f9f2; color: #788e61; font-size: 9px; }
.edge-label-input::placeholder { color: #afbaa0; }
.welcome-chip { position: absolute; top: 22px; left: 26px; display: flex; align-items: center; gap: 7px; color: #a4ae96; font-size: 10px; z-index: 12; pointer-events: none; }
.welcome-chip svg { width: 14px; height: 14px; color: #aab995; }
.welcome-chip strong { font-weight: 550; color: #879973; }
.canvas-bottom { position: absolute; left: 24px; bottom: 22px; display: flex; align-items: center; gap: 17px; z-index: 25; pointer-events: none; }
.board-stats { display: flex; align-items: center; gap: 7px; color: #8e9a7d; font-size: 9px; }
.board-stats svg { width: 12px; height: 12px; color: #99a988; }
.paste-hint { padding-left: 15px; border-left: 1px solid #dde4d0; color: #a7b195; font-size: 9px; }
.paste-hint kbd { font: inherit; color: #8fa374; }
.zoom-controls { display: flex; align-items: center; position: absolute; right: 24px; bottom: 22px; z-index: 25; border: 1px solid #dfe5d5; border-radius: 8px; background: #fffefaf2; padding: 4px; height: 35px; box-shadow: 0 3px 9px #43512d08; }
.zoom-controls button { display: grid; place-items: center; width: 27px; height: 25px; border-radius: 4px; color: #8fa379; }
.zoom-controls button:hover { background: #eff4e3; color: #607945; }
.zoom-controls button svg { width: 13px; height: 13px; }
.zoom-value { min-width: 44px; text-align: center; color: #71865a; font-size: 9px; user-select: none; }
.zoom-divider { height: 15px; width: 1px; background: #e6ebdf; margin: 0 3px; }
.empty-state { position: absolute; top: 47%; left: 50%; width: min(360px, calc(100% - 48px)); text-align: center; transform: translate(-50%, -50%); color: #899575; pointer-events: none; }
.empty-state .empty-icon { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto 19px; color: #7e965d; background: #eaf0dc; border: 1px solid #dfe8ce; border-radius: 18px; transform: rotate(-7deg); }
.empty-state .empty-icon svg { width: 29px; height: 29px; }
.empty-state h2 { margin: 0 0 12px; font-family: var(--serif); color: #5f7347; font-size: 30px; font-weight: 400; letter-spacing: -.8px; }
.empty-state p { margin: 0; line-height: 1.8; font-size: 12px; }
.empty-state kbd { display: inline-block; background: #fffefa; border: 1px solid #dce5cf; border-bottom-width: 2px; padding: 2px 6px; border-radius: 4px; font-family: var(--sans); font-size: 10px; color: #607846; }
.empty-symbol { display: block; font-size: 60px; color: #a9c575; margin: 0 0 13px; line-height: 1; }
.empty-state .new-board-button { width: auto; margin: 24px auto 0; padding: 0 20px; pointer-events: auto; }
.drop-overlay { position: absolute; inset: 14px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: #f6f9eff2; border: 2px dashed #a4b97e; border-radius: 15px; color: #6c864e; z-index: 90; pointer-events: none; backdrop-filter: blur(3px); padding: 20px; }
.drop-overlay > div { text-align: center; }
.drop-overlay svg { width: 44px; height: 44px; margin-bottom: 12px; stroke-width: 1.2; }
.drop-overlay strong { display: block; font-family: var(--serif); font-size: 27px; font-weight: 400; }
.drop-overlay p { font-size: 12px; color: #92a677; }
.drop-overlay > span { font-size: 60px; font-family: var(--serif); line-height: 1; margin-bottom: 12px; }
.drop-overlay h2 { margin: 0; font-family: var(--serif); font-size: 27px; font-weight: 400; letter-spacing: -.5px; }
.search-panel { position: absolute; top: 17px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 12px; width: 370px; max-width: calc(100% - 40px); padding: 11px 12px; border: 1px solid #dfe7d1; border-radius: 9px; background: #fffefaf8; box-shadow: 0 6px 20px #3b4f2a16; backdrop-filter: blur(8px); }
.search-panel input { flex: 1; width: 0; min-width: 0; padding: 3px; border: 0; outline: none; background: transparent; color: #69804f; font-size: 11px; }
.search-panel input::placeholder { color: #a2af91; }
.search-panel > span { flex-shrink: 0; color: #a4b291; font-size: 9px; }
.search-panel button { color: #92a87a; font-size: 20px; line-height: 1; padding: 0 2px; }
.context-menu { position: fixed; z-index: 120; min-width: 185px; padding: 6px; border: 1px solid #dfe6d4; border-radius: 10px; background: #fffefa; box-shadow: 0 12px 32px #37442b1f; }
.context-menu button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 10px; color: #74885c; font-size: 11px; border-radius: 5px; }
.context-menu button:hover { background: #f0f4e7; }
.context-menu button.danger { color: #b37b68; }
.context-menu button.danger:hover { background: #fcf0ea; }
.context-menu svg { width: 15px; height: 15px; }
.context-menu kbd { margin-left: auto; font-family: var(--sans); color: #a8b296; font-size: 9px; }
.context-menu hr { border: 0; border-top: 1px solid #edf0e6; margin: 5px 6px; }
.toast-stack { position: fixed; bottom: 25px; left: calc(50% + 112px); transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { max-width: 420px; padding: 12px 19px; border-radius: 9px; background: #405133; color: #f4f8e9; box-shadow: 0 7px 25px #30442a25; font-size: 11px; line-height: 1.5; animation: toast-in .22s ease-out; }
.toast.error { background: #9a6755; }
.modal { position: fixed; width: min(470px, calc(100vw - 36px)); margin: auto; padding: 29px; color: var(--ink); background: #fffefa; border: 1px solid #dee6d2; border-radius: 17px; box-shadow: 0 30px 80px #2a3d2a25; }
.modal::backdrop { background: #2f3d2940; backdrop-filter: blur(5px); }
.modal-title { margin: 0 0 8px; font-family: var(--serif); font-size: 26px; font-weight: 400; color: #4c623c; letter-spacing: -.7px; }
.modal > p { color: #9ba78d; font-size: 12px; line-height: 1.7; margin: 0 0 23px; }
.modal-close { position: absolute; top: 18px; right: 18px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: #9cac8a; }
.modal-close:hover { background: #f0f4e8; }
.modal-close svg { width: 17px; height: 17px; }
.shortcut-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 20px; padding-top: 9px; color: #778b60; font-size: 11px; }
.shortcut-grid kbd, .shortcut-key { display: inline-block; justify-self: end; padding: 5px 8px; background: #f0f4e7; border: 1px solid #e0e8d2; border-bottom-width: 2px; border-radius: 5px; color: #7e9367; font-family: var(--sans); font-size: 10px; white-space: nowrap; }
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 26px; }
.modal-actions button { padding: 10px 15px; border-radius: 7px; font-size: 11px; background: #eef3e3; color: #7d9262; }
.modal-actions button.primary { background: var(--olive); color: #f4f7ed; }
.modal-actions button.primary:hover { background: #516442; }
.modal input[type="text"], .modal textarea { display: block; width: 100%; padding: 11px 12px; border: 1px solid #dde5d1; border-radius: 7px; color: var(--olive); background: #f7f9f1; font-size: 12px; }
.modal label { display: block; margin: 17px 0 7px; color: #8b9d78; font-size: 10px; }
.modal .modal-note { padding-top: 18px; margin: 20px 0; border-top: 1px solid #e8eddc; color: #a2ad95; font-size: 10px; line-height: 1.7; }
.modal .modal-actions .new-board-button { width: auto; color: #f3f7e9; background: #6e8352; }
.mobile-menu { display: none; width: 31px; height: 31px; padding: 5px; color: #81986a; }
.presentation-exit { display: none; position: fixed; top: 22px; right: 24px; z-index: 90; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid #dfe5d2; border-radius: 7px; background: #fffefae8; color: #7e9564; font-size: 10px; box-shadow: 0 3px 12px #3444260a; }
.presentation-exit svg { width: 14px; height: 14px; }
body.presentation .app-shell { grid-template-columns: 1fr; }
body.presentation .sidebar, body.presentation .topbar, body.presentation .canvas-toolbar,
body.presentation .floating-style, body.presentation .connection-panel, body.presentation .welcome-chip,
body.presentation .canvas-bottom, body.presentation .zoom-controls, body.presentation .node-controls,
body.presentation .drag-handle, body.presentation .node-resize, body.presentation .connect-port { display: none !important; }
body.presentation .presentation-exit { display: flex; }
body.presentation .node { outline: none; }
body.presentation .main-panel { height: 100dvh; }
body.presentation .board-viewport { height: 100dvh; flex: 1 1 auto; }
body.presentation .search-panel { display: none !important; }
body.presentation .presentation-exit kbd { padding: 2px 4px; border: 1px solid #dce5cd; border-radius: 4px; font-family: var(--sans); color: #a5b492; font-size: 8px; }
body.presentation .toast-stack { left: 50%; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1600px) {
  .app-shell { grid-template-columns: 244px minmax(0, 1fr); }
  .sidebar { padding-left: 24px; padding-right: 24px; }
  .topbar { padding-left: 39px; padding-right: 39px; }
  .canvas-toolbar { padding-left: 36px; }
  .toast-stack { left: calc(50% + 122px); }
}
@media (max-width: 1350px) {
  .toolbar-hint { display: none; }
  .tool-button span { display: none; }
  .tool-button[data-add="note"] span { display: inline; }
}
@media (max-width: 1150px) {
  .app-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .sidebar { padding-left: 16px; padding-right: 16px; }
  .brand-name { font-size: 24px; }
  .topbar { padding-left: 25px; padding-right: 25px; }
  .header-actions { gap: 12px; }
  .canvas-toolbar { padding-left: 20px; padding-right: 20px; gap: 12px; }
  .tool-group { gap: 3px; }
  .tool-button { padding-left: 8px; padding-right: 8px; }
  .toolbar-hint { display: none; }
  .floating-style, .connection-panel { width: 202px; }
  .toast-stack { left: calc(50% + 100px); }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 180px minmax(0, 1fr); }
  .sidebar { padding-top: 28px; padding-left: 13px; padding-right: 13px; }
  .brand { gap: 8px; padding: 0 4px; }
  .brand-symbol { width: 32px; height: 32px; border-radius: 10px; }
  .brand-name { font-size: 23px; }
  .brand-caption { font-size: 8px; letter-spacing: 1.3px; }
  .topbar { height: 78px; flex-basis: 78px; padding-left: 20px; padding-right: 20px; gap: 12px; }
  .board-title { font-size: 21px; }
  .save-status { display: none; }
  .header-actions { gap: 9px; }
  .avatar { display: none; }
  .canvas-toolbar { gap: 8px; height: 60px; flex-basis: 60px; }
  .tool-button { padding-left: 8px; padding-right: 8px; font-size: 10px; }
  .tool-button .tool-label, .tool-button span { display: none; }
  .tool-button[data-add="note"] span { display: none; }
  .tool-button { min-width: 33px; }
  .floating-style, .connection-panel { top: 16px; right: 16px; width: 188px; }
  .welcome-chip { top: 19px; left: 19px; font-size: 9px; }
  .paste-hint { display: none; }
  .magnet-picker { left: 240px; }
  .toast-stack { left: calc(50% + 90px); }
}
@media (max-width: 680px) {
  .app-shell { display: block; min-height: 0; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 224px; z-index: 100; transform: translateX(-100%); transition: transform .2s ease-out; box-shadow: 15px 0 40px #28352215; padding: 28px 20px 22px; }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }
  .app-shell.sidebar-open::after { content: ""; position: fixed; inset: 0; background: #2f3d2940; z-index: 90; }
  .app-shell.sidebar-open .mobile-menu { position: fixed; left: 236px; top: 21px; z-index: 101; margin: 0; background: #fffefa; box-shadow: 0 2px 10px #23331e1a; border-radius: 6px; }
  .brand-name { font-size: 26px; }
  .brand-symbol { width: 38px; height: 38px; }
  .mobile-menu { display: grid; place-items: center; margin-right: 3px; flex-shrink: 0; }
  .topbar { height: 72px; flex-basis: 72px; padding: 0 15px; gap: 9px; }
  .board-heading { flex: 1; }
  .board-title { font-size: 21px; max-width: 100%; }
  .eyebrow { font-size: 8px; margin-bottom: 4px; letter-spacing: 1.3px; }
  .header-actions { gap: 6px; }
  .export-button, .presentation-button { padding: 8px; border: 0; }
  .export-button span, .presentation-button span { display: none; }
  .export-button svg, .presentation-button svg { width: 18px; height: 18px; }
  .canvas-toolbar { padding: 0 12px; gap: 8px; height: 55px; flex-basis: 55px; }
  .tool-group { gap: 2px; }
  .history-tools #undo, .history-tools #redo { display: none; }
  .tool-button { width: 33px; padding: 7px; }
  .toolbar-divider { height: 20px; }
  .floating-style, .connection-panel { top: auto; bottom: 68px; right: 12px; width: 198px; padding: 13px; }
  .search-panel { top: 12px; max-width: calc(100% - 24px); }
  .welcome-chip { top: 15px; left: 16px; max-width: calc(100% - 32px); line-height: 1.5; }
  .welcome-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .canvas-bottom { left: 16px; bottom: 23px; }
  .zoom-controls { right: 12px; bottom: 16px; }
  .magnet-picker { left: 12px; top: 49px; width: 278px; }
  .background-picker { right: 12px; top: 49px; width: 338px; max-height: calc(100dvh - 150px); padding: 14px; }
  .toast-stack { bottom: 65px; left: 50%; width: calc(100% - 32px); }
  .toast { max-width: 100%; text-align: center; }
  .modal { padding: 24px; }
  .shortcut-grid { gap: 12px; font-size: 10px; }
  .shortcut-grid kbd { font-size: 9px; }
  .presentation-exit { top: 16px; right: 16px; }
}
@media (max-width: 390px) {
  .canvas-toolbar { gap: 5px; padding: 0 8px; }
  .tool-button { width: 30px; min-width: 30px; height: 31px; padding: 6px; }
  .tool-button svg { width: 17px; height: 17px; }
  .header-actions { gap: 0; }
  .board-title { font-size: 19px; }
  .floating-style, .connection-panel { width: 183px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Canvas movement is controlled by its transform, so focusing a card must not scroll the canvas. */
.board-viewport { overflow: clip; }