/*
 * PowerMind visual system
 * -----------------------
 * Theme tokens come first, followed by shell, canvas, editor, interaction,
 * dialog, print, and responsive rules. Components should consume variables
 * instead of embedding accent colors so every theme remains coherent.
 */
:root {
  color-scheme: light;
  --accent: var(--nav-accent);
  --accent-hover: var(--nav-accent-hover);
  --accent-soft: var(--nav-accent-soft);
  --accent-foreground: #fff;
  --nav-accent:#c42b1c;
  --nav-accent-hover:#a4262c;
  --nav-accent-soft:#f8e1dc;
  --icon-red: #c42b1c;
  --icon-green: #16823b;
  --icon-yellow: #c58b00;
  --ink-auto-contrast:#171717;
  --ink-auto-inverse:#fff;
  --text: #1b1a19;
  --text-2: #5f5e5d;
  --text-3: #8a8886;
  --stroke: rgba(0, 0, 0, .12);
  --stroke-strong: rgba(0, 0, 0, .2);
  --fill: rgba(255, 255, 255, .68);
  --fill-solid: #fbfbfc;
  --fill-pane: rgba(246, 248, 252, .62);
  --fill-hover: rgba(0, 0, 0, .055);
  --fill-active: rgba(0, 0, 0, .085);
  --shadow-2: 0 2px 8px rgba(20, 28, 45, .12);
  --shadow-4: 0 4px 14px rgba(20, 28, 45, .16);
  --shadow-8: 0 12px 34px rgba(20, 28, 45, .2);
  --shadow-16: 0 16px 44px rgba(20, 28, 45, .26);
  --radius: 6px;
  --ease: cubic-bezier(.1, .9, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --accent: var(--nav-accent);
    --accent-hover: var(--nav-accent-hover);
    --accent-soft: var(--nav-accent-soft);
    --text: #f3f3f3;
    --text-2: #c8c6c4;
    --text-3: #979593;
    --stroke: rgba(255, 255, 255, .12);
    --stroke-strong: rgba(255, 255, 255, .2);
    --fill: rgba(35, 35, 38, .76);
    --fill-solid: #272729;
    --fill-pane: rgba(39, 39, 43, .7);
    --fill-hover: rgba(255, 255, 255, .075);
    --fill-active: rgba(255, 255, 255, .11);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, .3);
    --shadow-4: 0 4px 14px rgba(0, 0, 0, .38);
    --shadow-8: 0 14px 42px rgba(0, 0, 0, .5);
    --shadow-16: 0 18px 52px rgba(0, 0, 0, .6);
  }
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--system-chrome-color, #f5eee9);
  color: var(--text);
  font: 14px/1.45 "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select:none;
  -webkit-user-select:none;
}
.note-title,.block-content,.idea-node.editing textarea,.formula-dialog input,#dialogInput,textarea { user-select:text;-webkit-user-select:text; }
button,svg,.nav-pane,.notes-pane,.top-commandbar,.canvas-toolbar,.statusbar,.menu-surface,.app-dialog { user-select:none;-webkit-user-select:none; }
html:lang(zh) body { font-family: "Segoe UI Variable", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; }
html:lang(ja) body { font-family: "Segoe UI Variable", "Yu Gothic UI", "Meiryo UI", sans-serif; }
button, input, select { font: inherit; }
button { color: inherit; }
button:disabled { opacity: .4; pointer-events: none; }
.icon-sprite { position: fixed; width: 0; height: 0; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.startup-splash{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:color-mix(in srgb,var(--fill-solid) 74%,transparent);backdrop-filter:blur(44px) saturate(145%);-webkit-backdrop-filter:blur(44px) saturate(145%);opacity:1;visibility:visible;transition:opacity .32s var(--ease),visibility .32s}.startup-splash.is-hiding{opacity:0;visibility:hidden;pointer-events:none}.splash-brand{display:flex;flex-direction:column;align-items:center;gap:18px;animation:splash-enter .55s var(--ease) both}.splash-brand strong{font-size:19px;font-weight:650;letter-spacing:-.01em}.splash-mark{position:relative;overflow:hidden;width:76px;height:76px;display:grid;place-items:center;border:0;border-radius:18px;color:transparent;background:none;box-shadow:none}.splash-mark::before{display:none}.splash-mark svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 9px 12px rgba(38,31,25,.23))}@keyframes splash-enter{from{opacity:0;transform:scale(.94) translateY(5px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.startup-splash,.splash-brand{transition:none;animation:none}}
.folder-gate{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:24px;background:var(--fill-pane);backdrop-filter:blur(60px) saturate(150%);-webkit-backdrop-filter:blur(60px) saturate(150%)}.folder-gate[hidden]{display:none}.folder-gate-card{width:min(460px,100%);display:grid;justify-items:center;gap:22px;padding:38px 34px;text-align:center;border:1px solid var(--stroke);border-radius:12px;background:var(--fill-solid);box-shadow:var(--shadow-16)}.folder-gate-card h1{margin:0 0 8px;font-size:25px}.folder-gate-card p{margin:0;color:var(--text-2);line-height:1.55}.folder-gate-card .accent-button{width:auto;min-width:180px;justify-content:center}.folder-gate-card small{color:var(--text-3)}
body.platform-unsupported .app-shell{display:none}
.platform-gate-card{width:min(540px,100%)}.platform-gate-card h1{font-size:22px}
.platform-support{width:100%;display:grid;gap:8px;padding:15px 17px;text-align:left;border:1px solid var(--stroke);border-radius:10px;background:var(--fill-hover)}
.platform-support strong{font-size:11px;font-weight:650;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3)}
.platform-support ul{margin:0;padding-left:18px;color:var(--text-2);line-height:1.6}
.platform-support small{color:var(--text-3);line-height:1.55}
.platform-language{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text-2)}
.platform-language select{min-width:150px;height:34px;padding:0 9px;border:1px solid var(--stroke);border-bottom-color:var(--stroke-strong);border-radius:5px;background:var(--fill-solid);color:var(--text);cursor:pointer}

.mica-backdrop {
  position:fixed;inset:-64px;z-index:-3;overflow:hidden;
  background:
    radial-gradient(ellipse 70% 82% at 2% 0%,color-mix(in srgb,var(--nav-accent) 30%,#f6b7a8) 0%,transparent 68%),
    radial-gradient(ellipse 54% 68% at 100% 100%,color-mix(in srgb,var(--nav-accent) 18%,#e8cf72) 0%,transparent 72%),
    radial-gradient(ellipse 48% 56% at 68% 18%,rgba(255,255,255,.52) 0%,transparent 72%),
    linear-gradient(128deg,#e7b7ad 0%,#e9e0c8 48%,#bed7c1 100%);
  filter:saturate(1.12);transition:background .28s var(--ease),filter .28s var(--ease);
}
.mica-backdrop::after{content:"";position:absolute;inset:0;opacity:.12;mix-blend-mode:soft-light;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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.mica-layer {
  position: fixed; inset: 0; z-index: -2;
  background: rgba(238, 243, 250, .43);
  backdrop-filter: blur(54px) saturate(165%);
  -webkit-backdrop-filter: blur(54px) saturate(165%);
}
body.theme-dark .mica-layer { background: rgba(23, 24, 29, .58); }
body.theme-dark .mica-backdrop{background:radial-gradient(ellipse 72% 84% at 0% 0%,color-mix(in srgb,var(--nav-accent) 28%,#4b2421) 0%,transparent 68%),radial-gradient(ellipse 58% 70% at 100% 100%,color-mix(in srgb,var(--nav-accent) 13%,#494129) 0%,transparent 73%),linear-gradient(132deg,#302426,#25282b 54%,#202c28);filter:saturate(.82) brightness(.74)}

.app-shell { --navigation-pane-width:clamp(260px,18vw,292px);--notes-pane-width:clamp(286px,20vw,326px);width:100vw;height:100vh;display:grid;grid-template-columns:var(--navigation-pane-width) var(--notes-pane-width) minmax(0,1fr);background:rgba(255,255,255,.08); }
body .app-shell.nav-collapsed { grid-template-columns:0 var(--notes-pane-width) minmax(0,1fr); }
body .app-shell.notes-collapsed { grid-template-columns:var(--navigation-pane-width) 0 minmax(0,1fr); }
body .app-shell.nav-collapsed.notes-collapsed,body .app-shell.focus-mode { grid-template-columns:0 0 minmax(0,1fr); }
.app-shell.nav-collapsed .nav-pane,.app-shell.notes-collapsed .notes-pane,.app-shell.focus-mode .nav-pane,.app-shell.focus-mode .notes-pane { visibility:hidden; opacity:0; pointer-events:none; transform:translateX(-12px); }
.nav-pane, .notes-pane, .work-pane { min-height: 0; }
.nav-pane { display: flex; flex-direction: column; padding: 16px 10px 10px; border-right: 1px solid var(--stroke); background: var(--fill-pane); backdrop-filter: blur(34px) saturate(140%); transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s; }
.brand-row { height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 8px; margin-bottom: 15px; }
.app-mark { position:relative;isolation:isolate;overflow:hidden;width:29px;height:29px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.48);border-radius:8px;color:white;background:linear-gradient(145deg,#d52f27,#d79418 52%,#16853d);box-shadow:inset 0 1px rgba(255,255,255,.62),0 2px 7px rgba(54,31,20,.34); }
.app-mark::before { content:"";position:absolute;z-index:-1;inset:-9px;background:radial-gradient(circle at 20% 20%,#ff4035 0 28%,transparent 52%),radial-gradient(circle at 82% 18%,#ffd33f 0 25%,transparent 51%),radial-gradient(circle at 62% 90%,#20b957 0 31%,transparent 57%);filter:blur(3px); }
.app-mark svg { width: 18px;stroke-width:2.1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-size: 14px; font-weight: 650; }
.brand-copy span { margin-top: 3px; color: var(--text-2); font-size: 11px; }
.mobile-only { display: none !important; margin-left: auto; }
.nav-scrim{display:none;position:fixed;inset:0;z-index:79;padding:0;border:0;background:rgba(0,0,0,.22);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);cursor:default}
.desktop-pane-toggle { margin-left:auto; }
#navMenuSlot,.top-commandbar #workMenuSlot { display:contents; }.desktop-pane-toggle.in-work-pane { margin-left:0;margin-right:5px; }

.icon-button, .more-button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; transition: background .1s, transform .1s; }
.icon-button:hover, .more-button:hover { background: var(--fill-hover); }
.icon-button:active, .more-button:active { background: var(--fill-active); transform: scale(.96); }
.icon-button.small { width: 26px; height: 26px; }
.icon-button.small svg { width: 16px; }
.accent-button { width: 100%; height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 5px; background: var(--nav-accent); color: white; box-shadow: 0 1px 2px rgba(0,0,0,.2); font-weight: 600; cursor: pointer; transition: filter .12s, transform .12s; }
.accent-button:hover { filter: brightness(1.08); }
.accent-button:active { transform: scale(.99); }
.accent-button svg { width: 18px; }
.search-box { position:relative;height:34px;display:flex;align-items:center;gap:7px;margin:12px 2px 14px;padding:0 8px;border:1px solid var(--stroke);border-bottom-color:var(--stroke-strong);border-radius:5px;background:rgba(255,255,255,.5);color:var(--text-2);overflow:hidden;transition:background .12s,border-color .12s; }
.search-box::after { content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;height:2px;border-radius:0 0 5px 5px;background:var(--nav-accent);transform:scaleX(0);transform-origin:center;transition:transform .14s var(--ease);pointer-events:none; }
.search-box:focus-within { border-color:var(--stroke);border-bottom-color:var(--stroke-strong);background:var(--fill-solid); }
.search-box:focus-within::after { transform:scaleX(1); }
.search-box svg { width: 17px; }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); }

.nav-list { display: grid; gap: 2px; }
.nav-item { position: relative; width: 100%; height: 35px; display: flex; align-items: center; gap: 10px; padding: 0 9px; border: 0; border-radius: 5px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.nav-item:hover { background: var(--fill-hover); }
.nav-item.selected { background: var(--fill-active); font-weight: 600; }
.nav-item.selected::before { content: ""; position: absolute; left: 0; width: 3px; height: 16px; border-radius: 3px; background: var(--nav-accent); }
.nav-item svg { width: 18px; color: var(--text-2); }
.nav-item em { margin-left: auto; color: var(--text-3); font-size: 11px; font-style: normal; font-weight: 400; }
.section-label { height: 26px; display: flex; align-items: center; justify-content: space-between; margin: 15px 5px 3px 9px; color: var(--text-3); font-size: 11px; font-weight: 650; letter-spacing: .55px; }
.folders-label { margin-top: 11px; }
.workspace-picker { height: 35px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.workspace-picker:hover { background: var(--fill-hover); }
.workspace-picker i { width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg,var(--icon-red) 0 34%,var(--icon-yellow) 34% 67%,var(--icon-green) 67%); }
.workspace-picker .chevron { width:16px;height:16px;margin-left:auto;color:var(--text-3);stroke-width:1.6; }
.folder-list { overflow: auto; }
.folder-item .folder-glyph { width: 16px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px; color: var(--text-2); }
.folder-item .folder-more,.note-card .note-more { width:26px;height:26px;display:grid;place-items:center;margin-left:auto;padding:0 0 2px;border:0;border-radius:4px;background:transparent;color:var(--text-2);cursor:pointer;opacity:0;line-height:1; }
.folder-item:hover .folder-more,.folder-item.selected .folder-more,.note-card:hover .note-more,.note-card.active .note-more,.folder-more:focus-visible,.note-more:focus-visible { opacity:1; }
.folder-item > em { margin-left:0; }
.nav-footer { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--stroke); }
.storage-indicator { display: flex; align-items: center; gap: 7px; padding: 4px 10px 8px; color: var(--text-3); font-size: 11px; }
.storage-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #3ca65a; }

.notes-pane { display: flex; flex-direction: column; border-right: 1px solid var(--stroke); background: rgba(255,255,255,.45); backdrop-filter: blur(26px); transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s; }
.pane-header { height: 84px; display: flex; align-items: center; gap: 9px; padding: 15px 16px 8px 20px; }
.pane-header > div { min-width: 0; flex: 1; }
.pane-header h1 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pane-header p { margin: 4px 0 0; color: var(--text-3); font-size: 12px; }
.mobile-nav-button { display: none; }
.accent-soft { background: var(--nav-accent-soft); color: var(--nav-accent); }
#newNoteCompact { background:var(--nav-accent-soft);color:var(--nav-accent); }
.list-toolbar { height: 38px; display: flex; align-items: center; padding:0 10px; color:var(--text-3); }
.list-sort-button { width:100%;height:30px;display:flex;align-items:center;gap:8px;padding:0 8px;border:0;border-radius:4px;background:transparent;color:var(--text-2);cursor:pointer;text-align:left;font-size:11px;font-weight:600; }.list-sort-button:hover { background:var(--fill-hover); }.list-sort-button > svg:first-child { width:15px; }.list-sort-button span { flex:1; }.list-sort-button .select-chevron { width:14px; }
.more-button { font-weight: 700; letter-spacing: 1px; }
.notes-list { min-height: 0; flex: 1; overflow: auto; padding: 0 8px 12px; }
.notes-list[hidden]{display:none}
.note-card { position: relative; min-height: 91px; margin: 2px 0; padding: 11px 12px 10px 14px; border-radius: 6px; cursor: pointer; transition: background .12s; }
.note-card:hover { background: var(--fill-hover); }
.note-card.active { background: var(--fill-active); }
.note-card.active::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--nav-accent); }
.note-card[draggable="true"] { cursor:grab; }.note-card.dragging { opacity:.45; }.note-card.drop-before { box-shadow:inset 0 2px var(--nav-accent); }.note-card.drop-after { box-shadow:inset 0 -2px var(--nav-accent); }
.note-card-head { display: flex; align-items: center; gap: 6px; }
.note-card h3 { min-width: 0; flex: 1; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.note-card-head svg { width: 13px; color: #d39500; fill: currentColor; }
.note-card p { margin: 5px 0 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--text-2); font-size: 12px; line-height: 1.35; }
.note-card footer { display: flex; gap: 6px; margin-top: 7px; color: var(--text-3); font-size: 11px; }
.note-card footer .folder { color: var(--nav-accent); }
.empty-state { display: none; flex: 1 1 auto; min-height:0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding:24px; color: var(--text-3); text-align: center; }
.empty-state.show { display: flex; }
.empty-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 5px; border-radius: 50%; background: var(--fill-hover); }
.empty-state strong { color: var(--text-2); }
.empty-state span { font-size: 12px; }
.empty-state .empty-create{width:auto;min-width:126px;margin-top:9px}

.work-pane { min-width: 0; display: flex; flex-direction: column; container-type: inline-size; background: rgba(255,255,255,.3); }
.focus-button { flex:0 0 auto; }
@media (pointer:coarse){.folder-item .folder-more,.note-card .note-more{opacity:1;min-width:32px;min-height:32px;}}
@media (pointer:coarse){.idea-node .node-tools{display:flex;right:-34px}.idea-node .node-tools button{width:28px;height:28px}}
/* The narrow-screen picker overrides that lived here were shadowed by the later
   .fluent-options rule, but their leftover `bottom` still applied and collapsed every
   settings dropdown to a 10px sliver. The base rule below is now self-contained. */
.top-commandbar { height: 50px; display: flex; align-items: center; gap: 3px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--stroke); background: rgba(255,255,255,.28); }
.work-notes-button { display: none; margin-right: 5px; }
.breadcrumb { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 12px; }
.save-state { display: flex; align-items: center; gap: 6px; margin-right: 6px; color: var(--text-3); font-size: 11px; }
.save-state i { width: 7px; height: 7px; border-radius: 50%; background: #3ca65a; }
.save-state.saving i { background: #d49a19; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.command-more { margin-left: 3px; }

.canvas-toolbar { min-height:48px;display:flex;align-items:center;gap:7px;padding:0 12px;border-bottom:1px solid var(--stroke);background:rgba(255,255,255,.36);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;white-space:nowrap;touch-action:pan-x; }.canvas-toolbar::-webkit-scrollbar{display:none}
.segmented { display: flex;flex:0 0 auto; padding: 2px; border: 1px solid var(--stroke); border-radius: 6px; background: rgba(255,255,255,.3); }
.tool-button, .command-button, .subtle-button { height: 30px;flex:0 0 auto; display: flex; align-items: center; gap: 6px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: var(--text-2); cursor: pointer;white-space:nowrap; }
.tool-button:hover, .command-button:hover, .subtle-button:hover { background: var(--fill-hover); color: var(--text); }
.tool-button.active { background: var(--fill-solid); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.tool-button svg, .command-button svg { width: 17px; }
#addCard svg,#addIdea svg,#layoutMindMap svg,#insertImage svg,#formulaButton strong,#blockFormulaButton { color:inherit; }
.toolbar-separator { height: 22px; border-left: 1px solid var(--stroke); margin: 0 2px; }
.ink-options { display:none;flex:0 0 auto;min-width:max-content;align-items:center;gap:7px; }
.ink-options.show { display: flex; }
.ink-mode-picker { display: flex; padding: 2px; border: 1px solid var(--stroke); border-radius: 5px; background: rgba(255,255,255,.25); }
.ink-mode { min-width: 0; height: 25px; padding: 0 7px; border: 0; border-radius: 3px; background: transparent; color: var(--text-2); cursor: pointer; font-size: 11px; white-space: nowrap; }
.ink-mode:hover { background: var(--fill-hover); }
.ink-mode.selected { background: var(--fill-solid); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.13); }
.color-chip { appearance: none; -webkit-appearance: none; width: 18px !important; min-width: 18px; max-width: 18px; height: 18px !important; min-height: 18px; max-height: 18px; flex: 0 0 18px; aspect-ratio: 1 / 1; padding: 0; border: 2px solid var(--fill-solid); border-radius: 999px; outline: 1px solid transparent; background: var(--chip); cursor: pointer; }
.color-chip.selected { outline-color: var(--nav-accent); }
.ink-options.erasing .color-chip { opacity: .28; pointer-events: none; }
.custom-color { position: relative; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: conic-gradient(#e33,#ec3,#3b6,#29e,#83d,#e33); padding: 2px; cursor: pointer; }
.custom-color input { position: absolute; width: 0; height: 0; opacity: 0; }
.custom-color span { display: block; width: 100%; height: 100%; border: 2px solid var(--fill-solid); border-radius: 50%; background: transparent; }
.formula-command strong { font: 650 14px Georgia,serif; }
#penSize { width: 74px; accent-color: var(--nav-accent); }
.zoom-control { flex:0 0 auto;display:flex;align-items:center;overflow:hidden;margin-left:auto;border:1px solid var(--stroke);border-radius:5px;background:rgba(255,255,255,.35); }
.zoom-control button { height: 28px; min-width: 28px; padding: 0 7px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; }
.zoom-control button:hover { background: var(--fill-hover); }
.zoom-control span { width: 44px; text-align: center; color: var(--text-2); font-size: 11px; }

.canvas-viewport { position: relative; min-height: 0; flex: 1; overflow: hidden; outline: 0; cursor: default; touch-action: none; background-color: rgba(245,248,252,.42); background-image: radial-gradient(circle, rgba(65,76,92,.25) .75px, transparent .8px); background-size: 20px 20px; }
.canvas-viewport[data-tool="pan"] { cursor: grab; }
.canvas-viewport.panning { cursor: grabbing; }
.canvas-viewport[data-tool="ink"] { cursor: crosshair; }
.work-empty { position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 6px; color: var(--text-3); text-align: center; background: color-mix(in srgb, var(--fill-pane) 58%, transparent); backdrop-filter: blur(10px); }
.work-empty.show { display: flex; }
.work-empty strong { color: var(--text-2); font-size: 16px; }
.work-empty > span { margin-bottom: 12px; font-size: 12px; }
.work-empty .accent-button { width: auto; min-width: 126px; }
.work-empty .accent-button { background:var(--nav-accent);color:var(--accent-foreground); }
.canvas-world { position: absolute; left: 0; top: 0; width: 4000px; height: 3000px; transform-origin: 0 0; will-change: transform; contain:layout style; backface-visibility:hidden; }
.connection-layer { position: absolute; inset: 0; z-index: 89; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.connection-path { fill: none; stroke: color-mix(in srgb, var(--nav-accent) 76%, var(--text)); stroke-width: 2.35; filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--text) 18%,transparent)); }
#inkCanvas { position: absolute; inset: 0; z-index: 100; width: 4000px; height: 3000px; pointer-events: none; touch-action: none; }
.canvas-viewport[data-tool="ink"] #inkCanvas { pointer-events: auto; }
#inkOverlay{position:absolute;inset:0;z-index:101;width:4000px;height:3000px;pointer-events:none}
.ink-selection-box{position:absolute;z-index:10;border:2px dashed var(--nav-accent);border-radius:7px;pointer-events:auto;touch-action:none;cursor:move}.ink-selection-box[hidden]{display:none}.ink-selection-menu{position:absolute;left:50%;bottom:calc(100% + 9px);display:flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--stroke);border-radius:7px;background:var(--fill-solid);box-shadow:var(--shadow-8);transform:translateX(-50%);cursor:default;white-space:nowrap}.ink-selection-menu button,.ink-selection-menu label{width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:4px;background:transparent;color:var(--text-2);cursor:pointer}.ink-selection-menu button:hover,.ink-selection-menu label:hover{background:var(--fill-hover);color:var(--text)}.ink-selection-menu button[data-ink-action="delete"]:hover{color:#c42b1c}.ink-selection-menu svg{width:17px}.ink-selection-menu label{position:relative}.ink-selection-menu label::before{content:"";width:16px;height:16px;border:2px solid var(--fill-solid);border-radius:50%;background:conic-gradient(#e33,#ec3,#3b6,#29e,#83d,#e33);box-shadow:0 0 0 1px var(--stroke)}.ink-selection-menu input{position:absolute;width:1px;height:1px;opacity:0}
.ink-mode svg{width:15px;height:15px}.ink-mode[data-ink-mode="lasso"]{gap:5px}
.document-card { position:absolute;left:550px;top:400px;z-index:3;width:620px;min-width:360px;max-width:1400px;height:auto;min-height:410px;padding:25px 30px 30px;border:2px solid color-mix(in srgb,var(--nav-accent) 48%,var(--stroke-strong));border-radius:9px;background:rgba(255,255,255,.88);box-shadow:0 12px 34px rgba(30,45,70,.18);backdrop-filter:blur(22px) saturate(150%);box-sizing:border-box;overflow:auto;container:document / inline-size; }
.document-card.selected { box-shadow:0 12px 34px rgba(30,45,70,.18); }
.document-resize-frame { position:absolute;inset:0;z-index:7;border:6px solid color-mix(in srgb,var(--nav-accent) 70%,var(--fill-solid));border-radius:8px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nav-accent) 88%,transparent);pointer-events:none;opacity:.72;transition:opacity .14s var(--ease),border-color .14s var(--ease); }
.document-card:hover .document-resize-frame,.document-card.selected .document-resize-frame { opacity:1; }
.card-drag-handle { position:absolute;left:5px;top:7px;width:17px;display:grid;grid-template-columns:repeat(2,3px);gap:3px;padding:4px;opacity:0;cursor:grab;touch-action:none; }
.document-card:hover .card-drag-handle { opacity: .55; }
.card-drag-handle span { width: 3px; height: 3px; border-radius: 50%; background: var(--text-2); }
.document-resize-handle { position:absolute;z-index:8;touch-action:none;opacity:.82;transition:opacity .12s;background:transparent; }.document-card:hover .document-resize-handle,.document-card.selected .document-resize-handle{opacity:1}.resize-east{top:7px;right:0;bottom:7px;width:24px;cursor:ew-resize}.resize-south{left:7px;right:7px;bottom:0;height:24px;cursor:ns-resize}.resize-corner{right:3px;bottom:3px;width:34px;height:34px;cursor:nwse-resize;background:var(--nav-accent);border:4px solid var(--fill-solid);border-radius:9px;box-shadow:0 3px 9px #0004}.resize-east::after{content:"";position:absolute;top:50%;right:5px;width:6px;height:48px;border-radius:5px;background:var(--nav-accent);transform:translateY(-50%)}.resize-south::after{content:"";position:absolute;left:50%;bottom:5px;width:48px;height:6px;border-radius:5px;background:var(--nav-accent);transform:translateX(-50%)}.resize-corner::after{content:"";position:absolute;right:6px;bottom:6px;width:11px;height:11px;border-right:3px solid var(--accent-foreground);border-bottom:3px solid var(--accent-foreground);border-radius:1px}
.note-title { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 650 29px/1.25 "Segoe UI Variable", "Segoe UI", sans-serif; letter-spacing: -.015em; }
.note-title::placeholder { color: var(--text-3); }
.note-meta { height: 34px; display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 11px; }
.note-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.note-meta button { padding: 3px 5px; border: 0; border-radius: 3px; background: transparent; color: var(--nav-accent); font: inherit; cursor: pointer; }
.note-meta button:hover { background: var(--fill-hover); }
.format-bar { min-height:35px;display:flex;align-items:center;gap:2px;margin:10px 0 14px;padding-bottom:2px;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-color:color-mix(in srgb,var(--nav-accent) 65%,transparent) transparent;scrollbar-width:thin;touch-action:pan-x; }
.format-bar::-webkit-scrollbar{height:6px}.format-bar::-webkit-scrollbar-thumb{border-radius:9px;background:color-mix(in srgb,var(--nav-accent) 65%,transparent)}.format-bar::-webkit-scrollbar-track{background:transparent}
.format-bar button { height: 27px; min-width: 28px;flex:0 0 auto; padding: 0 7px; border: 0; border-radius: 4px; background: transparent; color: var(--text-2); cursor: pointer; font-size: 12px;white-space:nowrap; }
.format-bar button:hover { background: var(--fill-hover); color: var(--text); }
.format-bar > span { height: 17px; margin: 0 4px; border-left: 1px solid var(--stroke); }
.block-list { display:grid;gap:0;align-content:start;outline:0;caret-color:var(--text);user-select:text;-webkit-user-select:text; }
.content-block { position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: start; margin-left: -21px; border-radius: 4px; }
.content-block:hover { background:transparent; }
.block-handle { width: 18px; height: 27px; display: grid; place-items: center; opacity: 0; color: var(--text-3); cursor: grab; font-size: 13px; }
.block-handle::before { content: ""; width: 10px; height: 18px; background-image: radial-gradient(circle, currentColor 1.25px, transparent 1.5px); background-size: 5px 5px; }
.content-block:hover .block-handle { opacity: .65; }
.block-content { min-height: 27px; padding: 1px 3px; outline: 0; touch-action: manipulation; font-size:var(--body-font-size,16px); line-height: 1.55; word-break: break-word; }
.block-content:empty::before { content: attr(data-placeholder); color: var(--text-3); pointer-events: none; }
.content-block[data-type="heading1"] .block-content { margin:12px 0 4px; font-size:calc(var(--body-font-size,16px) * 2); line-height:1.2; font-weight:700; letter-spacing:-.02em; }
.content-block[data-type="heading"] .block-content { margin: 8px 0 3px; font-size: 22px; line-height: 1.35; font-weight: 650; }
.content-block[data-type="heading"] .block-content { font-size:calc(var(--body-font-size,16px) * 1.5); }
.content-block[data-type="heading3"] .block-content { margin:7px 0 2px; font-size:calc(var(--body-font-size,16px) * 1.2); line-height:1.35; font-weight:650; }
.content-block[data-type="quote"] { border-left: 3px solid var(--nav-accent); padding-left: 7px; }
.content-block[data-type="quote"] .block-content { color: var(--text-2); font-style: italic; }
.content-block[data-type="code"] .block-content { margin: 4px 0; padding: 9px 11px; border: 1px solid var(--stroke); border-radius: 5px; background: color-mix(in srgb,var(--fill-solid) 70%,#767676 8%); font: 13px/1.55 Consolas,"SFMono-Regular",monospace; white-space: pre-wrap; }
.content-block[data-type="formula"] { display: block; margin: 8px 0 8px 18px; }
.content-block[data-type="image"] { display:block; margin:12px 0 12px 18px; }
.image-block { display:block; width:100%; overflow:hidden; padding:0; border:1px solid var(--stroke); border-radius:6px; background:var(--fill-solid); cursor:zoom-in; }
.image-block img { display:block; width:100%; max-height:480px; object-fit:contain; background:color-mix(in srgb,var(--fill-hover) 70%,transparent); }
.formula-block { min-height: 52px; display: flex; align-items: center; justify-content: center; padding: 10px 14px; border: 1px solid var(--stroke); border-radius: 6px; background: color-mix(in srgb,var(--fill-solid) 80%,transparent); cursor: text; overflow-x: auto; }
.formula-block math { font-size: 21px; }
.content-block[data-type="todo"] { grid-template-columns: 18px 22px minmax(0,1fr); }
.content-block[data-type="bullets"] { grid-template-columns: 18px 19px minmax(0,1fr); }
.bullet-marker { padding-top: 1px; color: var(--text-2); font-size: 18px; line-height: 25px; text-align: center; }
.todo-check { width: 16px; height: 16px; margin-top: 5px; border: 1px solid var(--stroke-strong); border-radius: 3px; background: transparent; cursor: pointer; }
.content-block.done .todo-check { background: var(--nav-accent); border-color: var(--nav-accent); }
.content-block.done .todo-check::after { content: "✓"; display: block; color: white; text-align: center; font-size: 11px; line-height: 14px; }
.content-block.done .block-content { text-decoration: line-through; color: var(--text-3); }
.content-block[data-type="divider"] { display:grid;grid-template-columns:18px minmax(0,1fr) 28px;align-items:center;height:30px;padding:5px 0; }
.block-divider{width:100%;margin:0;border:0;border-top:1px solid var(--stroke-strong)}
.divider-delete{width:26px;height:26px;display:grid;place-items:center;padding:0;border:0;border-radius:4px;background:transparent;color:var(--text-3);cursor:pointer;opacity:0}.content-block[data-type="divider"]:hover .divider-delete,.divider-delete:focus-visible{opacity:1}.divider-delete:hover{background:var(--fill-hover);color:var(--text)}
.add-block-row { width: 100%; height: 32px; display: flex; align-items: center; gap: 7px; margin-top: 7px; padding: 0 3px; border: 0; border-radius: 4px; background: transparent; color: var(--text-3); cursor: pointer; text-align: left; }
.add-block-row:hover { background: var(--fill-hover); color: var(--text-2); }
.add-block-row svg { width: 16px; }
.secondary-document-card{position:absolute;z-index:3;box-sizing:border-box;display:flex;flex-direction:column;min-width:360px;min-height:410px;padding:25px 30px 30px;border:2px solid color-mix(in srgb,var(--nav-accent) 48%,var(--stroke-strong));border-radius:9px;background:rgba(255,255,255,.88);box-shadow:0 12px 34px rgba(30,45,70,.18);backdrop-filter:blur(22px) saturate(150%);overflow:visible;container:secondary / inline-size}.secondary-resize-frame{position:absolute;inset:0;z-index:7;border:6px solid color-mix(in srgb,var(--nav-accent) 70%,var(--fill-solid));border-radius:8px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nav-accent) 88%,transparent);pointer-events:none;opacity:.72}.secondary-document-card.selected .secondary-resize-frame,.secondary-document-card:hover .secondary-resize-frame{opacity:1}.secondary-editor-head{position:relative;z-index:8;min-height:38px;display:flex;align-items:center;gap:8px;cursor:grab;touch-action:none}.secondary-editor-grip{width:18px;height:24px;flex:0 0 auto;background-image:radial-gradient(circle,var(--text-3) 1.2px,transparent 1.5px);background-size:6px 6px}.secondary-editor-head input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);font:650 29px/1.25 "Segoe UI Variable","Segoe UI",sans-serif;letter-spacing:-.015em}.secondary-editor-delete{width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:5px;background:transparent;color:var(--text-3);cursor:pointer}.secondary-editor-delete:hover{background:var(--fill-hover);color:#c42b1c}.secondary-editor-delete svg{width:17px}.secondary-format-bar{display:flex;align-items:center;gap:2px;min-height:35px;margin:10px 0 14px;padding-bottom:2px;border-block:1px solid var(--stroke);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--nav-accent) 60%,transparent) transparent;touch-action:pan-x;white-space:nowrap}.secondary-format-bar>span{height:17px;margin:0 4px;border-left:1px solid var(--stroke)}.secondary-format-bar button{min-width:28px;height:27px;flex:0 0 auto;padding:0 7px;border:0;border-radius:4px;background:transparent;color:var(--text-2);cursor:pointer}.secondary-format-bar button:hover{background:var(--fill-hover);color:var(--text)}.secondary-format-bar button svg{width:16px}.secondary-block-list{min-height:0;flex:1;overflow:auto;padding:2px 3px}.secondary-block{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);align-items:start;min-height:29px;margin-left:-21px;border-radius:4px}.secondary-block:hover{background:color-mix(in srgb,var(--nav-accent) 4%,transparent)}.secondary-block[data-type="todo"]{grid-template-columns:18px 22px minmax(0,1fr)}.secondary-block[data-type="bullets"]{grid-template-columns:18px 19px minmax(0,1fr)}.secondary-block[data-type="formula"],.secondary-block[data-type="image"],.secondary-block[data-type="divider"]{grid-template-columns:18px minmax(0,1fr) 28px}.secondary-block-handle{width:18px;height:27px;padding:0;border:0;background:transparent;opacity:0;cursor:grab}.secondary-block-handle::before{content:"";display:block;width:10px;height:18px;background-image:radial-gradient(circle,var(--text-3) 1.25px,transparent 1.5px);background-size:5px 5px}.secondary-block:hover .secondary-block-handle{opacity:.65}.secondary-block-delete{width:26px;height:26px;display:grid;place-items:center;padding:0;border:0;border-radius:4px;background:transparent;color:var(--text-3);opacity:0;cursor:pointer}.secondary-block:hover .secondary-block-delete{opacity:.8}.secondary-block-delete svg{width:15px}.secondary-block-content{min-width:0;min-height:27px;padding:1px 3px;outline:0;font-size:var(--body-font-size,16px);line-height:1.55;word-break:break-word}.secondary-block-content:empty::before{content:attr(data-placeholder);color:var(--text-3);pointer-events:none}.secondary-block[data-type="heading1"] .secondary-block-content{margin:12px 0 4px;font-size:calc(var(--body-font-size,16px) * 2);line-height:1.2;font-weight:700}.secondary-block[data-type="heading"] .secondary-block-content{margin:8px 0 3px;font-size:calc(var(--body-font-size,16px) * 1.5);font-weight:650}.secondary-block[data-type="heading3"] .secondary-block-content{margin:7px 0 2px;font-size:calc(var(--body-font-size,16px) * 1.2);font-weight:650}.secondary-block[data-type="quote"]{border-left:3px solid var(--nav-accent);padding-left:7px}.secondary-block[data-type="quote"] .secondary-block-content{color:var(--text-2);font-style:italic}.secondary-block[data-type="code"] .secondary-block-content{margin:4px 0;padding:9px 11px;border:1px solid var(--stroke);border-radius:5px;background:var(--fill-hover);font:13px/1.55 Consolas,monospace;white-space:pre-wrap}.secondary-block[data-type="divider"]{align-items:center;height:29px}.secondary-block[data-type="divider"] hr{width:100%;border:0;border-top:1px solid var(--stroke-strong)}.secondary-block.done .secondary-block-content{text-decoration:line-through;color:var(--text-3)}.secondary-add-row{height:32px;display:flex;align-items:center;gap:7px;padding:0 5px;border:0;border-radius:4px;background:transparent;color:var(--text-3);cursor:pointer}.secondary-add-row:hover{background:var(--fill-hover);color:var(--text-2)}.secondary-add-row svg{width:16px}.secondary-resize-handle{position:absolute;z-index:9;touch-action:none;opacity:.85}.secondary-resize-east{top:7px;right:0;bottom:7px;width:24px;cursor:ew-resize}.secondary-resize-south{left:7px;right:7px;bottom:0;height:24px;cursor:ns-resize}.secondary-resize-corner{right:3px;bottom:3px;width:34px;height:34px;border:4px solid var(--fill-solid);border-radius:9px;background:var(--nav-accent);box-shadow:0 3px 9px #0004;cursor:nwse-resize}.secondary-resize-east::after{content:"";position:absolute;top:50%;right:5px;width:6px;height:48px;border-radius:5px;background:var(--nav-accent);transform:translateY(-50%)}.secondary-resize-south::after{content:"";position:absolute;left:50%;bottom:5px;width:48px;height:6px;border-radius:5px;background:var(--nav-accent);transform:translateX(-50%)}.secondary-resize-corner::after{content:"";position:absolute;right:6px;bottom:6px;width:11px;height:11px;border-right:3px solid var(--accent-foreground);border-bottom:3px solid var(--accent-foreground)}
.wiki-link { color:var(--nav-accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--nav-accent) 38%,transparent); cursor:pointer; }
.wiki-link:hover { border-bottom-color:var(--nav-accent); }
.backlinks { display:none; margin-top:22px; padding-top:12px; border-top:1px solid var(--stroke); }
.backlinks.show { display:block; }
.backlinks strong { display:block; margin-bottom:5px; color:var(--text-3); font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.backlinks button { display:block; width:100%; padding:5px 7px; border:0; border-radius:4px; background:transparent; color:var(--nav-accent); text-align:left; cursor:pointer; }
.backlinks button:hover { background:var(--fill-hover); }
.idea-node { position:absolute;z-index:90;min-width:160px;min-height:52px;max-width:720px;display:flex;align-items:center;padding:13px 16px;border:1.5px solid color-mix(in srgb,var(--text) 28%,transparent);border-radius:7px;background:color-mix(in srgb,var(--fill-solid) 92%,var(--text) 8%);box-shadow:0 4px 14px rgba(15,20,28,.2);box-sizing:border-box;cursor:grab;user-select:none;touch-action:none; }
.idea-node:hover { border-color: color-mix(in srgb,var(--text) 48%,transparent);box-shadow:0 6px 18px rgba(15,20,28,.25); }
.idea-node.selected { z-index:91;border-color:var(--text-2);box-shadow:0 0 0 2px color-mix(in srgb,var(--fill-solid) 74%,transparent),0 0 0 4px color-mix(in srgb,var(--nav-accent) 70%,transparent),0 6px 18px rgba(15,20,28,.25); }
.idea-node.dragging { cursor:grabbing; }
.idea-node.group-dragging { border-color:color-mix(in srgb,var(--nav-accent) 55%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--nav-accent) 30%,transparent); }
.idea-node.root { border-color:rgba(255,255,255,.68);background:linear-gradient(135deg,#075da8,#4c51b8);color:white;box-shadow:0 6px 20px rgba(8,52,104,.36); }
.idea-text{width:100%;color:inherit;font:600 14px/1.42 inherit;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;pointer-events:none}.idea-node textarea{display:none;box-sizing:border-box;width:100%;min-height:54px;resize:none;border:0;outline:0;background:transparent;color:inherit;font:600 14px/1.42 inherit;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}.idea-node.editing .idea-text{display:none}.idea-node.editing textarea{display:block;pointer-events:auto;user-select:text}
.idea-node .node-tools { position:absolute;top:50%;right:-29px;display:none;flex-direction:column;gap:3px;transform:translateY(-50%); }
.idea-node:hover .node-tools,.idea-node.selected .node-tools { display:flex; }
.idea-node .node-tools button { width: 22px; height: 22px; display: grid; place-items:center; padding:0; border:1px solid var(--stroke); border-radius:50%; background:var(--fill-solid); color:var(--nav-accent); cursor:pointer; box-shadow:var(--shadow-2); }
.idea-resize{position:absolute;right:-9px;bottom:-9px;width:24px;height:24px;border:3px solid var(--fill-solid);border-radius:7px;background:var(--nav-accent);box-shadow:0 2px 7px #0004;opacity:0;touch-action:none;cursor:nwse-resize}.idea-resize::after{content:"";position:absolute;right:5px;bottom:5px;width:8px;height:8px;border-right:2px solid var(--accent-foreground);border-bottom:2px solid var(--accent-foreground)}.idea-node:hover .idea-resize,.idea-node.selected .idea-resize{opacity:1}
.idea-node.formula-node { min-width: 180px; text-align:center; }
.idea-node.formula-node math { font-size: 18px; }
.idea-node.collapsed::after { content:"…"; position:absolute; right:8px; bottom:-15px; padding:0 6px; border-radius:8px; background:var(--nav-accent); color:white; font-size:10px; }
/* Pan and pinch stay on the compositor. Expensive Fluent effects return as soon as the gesture ends. */
.canvas-viewport.navigating .document-card { backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;transition:none!important; }
.canvas-viewport.navigating .idea-node { box-shadow:none!important;transition:none!important; }
.canvas-viewport.navigating .document-card.dragging,.canvas-viewport.navigating .idea-node.dragging,.canvas-viewport.navigating .idea-node.group-dragging { will-change:transform; }
.canvas-viewport.navigating .connection-path { filter:none!important; }
.canvas-viewport.navigating .document-resize-frame,.canvas-viewport.navigating .document-resize-handle,.canvas-viewport.navigating .node-tools { opacity:0!important;transition:none!important; }
.canvas-mode-badge { position: absolute; left: 50%; bottom: 15px; z-index: 20; padding: 6px 10px; border-radius: 5px; background: rgba(28,28,30,.88); color: white; box-shadow: var(--shadow-2); opacity: 0; transform: translate(-50%,8px); transition: opacity .16s, transform .16s; pointer-events: none; font-size: 11px; }
.canvas-mode-badge.show { opacity: 1; transform: translate(-50%,0); }
.statusbar { height: 25px; display: flex; align-items: center; gap: 18px; padding: 0 12px; border-top: 1px solid var(--stroke); background: rgba(255,255,255,.35); color: var(--text-3); font-size: 10px; }
.statusbar span:last-child { margin-left: auto; }

.menu-surface, .slash-menu { position: fixed; z-index: 100; display: none; min-width: 190px; padding: 4px; border: 1px solid var(--stroke); border-radius: 7px; background: var(--fill); box-shadow: var(--shadow-8); backdrop-filter: blur(28px) saturate(170%); animation: menu-in .12s var(--ease); }
.menu-surface.open, .slash-menu.open { display: block; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
button:focus-visible,input:focus-visible,[contenteditable]:focus-visible { outline:0; }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.menu-surface button, .slash-menu button { width: 100%; min-height: 33px; display: flex; align-items: center; gap: 9px; padding: 5px 9px; border: 0; border-radius: 4px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.menu-surface button:hover, .slash-menu button:hover,.slash-menu button.keyboard-selected { background: var(--fill-hover); }
.slash-menu button.keyboard-selected { color:var(--nav-accent); }
.menu-surface button svg { width: 17px; color: var(--text-2); }.menu-surface button .menu-check { margin-left:auto;color:var(--nav-accent);stroke-width:2.2; }
.menu-surface hr { margin: 4px; border: 0; border-top: 1px solid var(--stroke); }
.workspace-color-menu { display:grid;grid-template-columns:repeat(4,30px);gap:7px;padding:7px; }
.menu-surface .workspace-color-menu button { width:30px;min-height:30px;height:30px;padding:0;border-radius:50%;background:var(--workspace-color);box-shadow:inset 0 0 0 1px #0003; }
.menu-surface .workspace-color-menu button:hover { filter:brightness(1.1);background:var(--workspace-color); }
.menu-surface .workspace-color-menu button.selected { outline:2px solid var(--nav-accent);outline-offset:2px; }
.danger { color: #c42b1c !important; }

.app-dialog { width: min(410px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--stroke); border-radius: 8px; background: var(--fill); color: var(--text); box-shadow: var(--shadow-8); backdrop-filter: blur(38px) saturate(170%); }
.app-dialog::backdrop { background: rgba(0,0,0,.22); backdrop-filter: blur(3px); }
.app-dialog form { padding: 18px; }
.dialog-head { display: flex; align-items: center; margin-bottom: 17px; }
.dialog-head h2 { flex: 1; margin: 0; font-size: 19px; font-weight: 650; }
.app-dialog input:not([type="file"]):not([type="range"]), .app-dialog select { width: 100%; height: 34px; padding: 0 9px; border: 1px solid var(--stroke); border-bottom-color: var(--stroke-strong); border-radius: 5px; outline: 0; background: var(--fill-solid); color: var(--text); }
.app-dialog input:not([type="range"]):focus, .app-dialog select:focus { border-color:var(--stroke);border-bottom:2px solid var(--nav-accent);caret-color:var(--nav-accent); }
.app-dialog select option { background: var(--fill-solid); color: var(--text); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 19px; }
.primary-action, .secondary-action { min-width: 80px; height: 32px; border-radius: 5px; cursor: pointer; }
.primary-action { border: 0; background: var(--nav-accent); color: var(--accent-foreground); }
.secondary-action { border: 1px solid var(--stroke); background: var(--fill-solid); color: var(--text); }
.settings-dialog label { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; margin: 10px 0; color: var(--text-2); }
.settings-dialog,.settings-dialog form { overflow:visible; }
.settings-dialog{width:min(560px,calc(100vw - 28px))}
.settings-dialog .setting-row { display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:14px;margin:14px 0;color:var(--text-2); }
.fluent-picker { position:relative;min-width:0; }
.fluent-select { width:100%;height:34px;display:flex;align-items:center;gap:9px;padding:0 9px;border:1px solid var(--stroke);border-bottom-color:var(--stroke-strong);border-radius:5px;background:var(--fill-solid);color:var(--text);cursor:pointer;text-align:left; }
.fluent-select:hover { background:var(--fill-hover); }
.fluent-select:focus-visible,.fluent-select[aria-expanded="true"] { outline:0;border-bottom:2px solid var(--nav-accent); }
.fluent-select i,.accent-options i { width:14px;height:14px;flex:0 0 auto;border-radius:50%;background:var(--option-color,var(--nav-accent));box-shadow:inset 0 0 0 1px #0002; }
.fluent-select span { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.select-chevron { width:16px;height:16px;flex:0 0 auto;color:var(--text-3);transition:transform .15s; }
.fluent-select[aria-expanded="true"] .select-chevron { transform:rotate(180deg); }
.fluent-options { position:absolute;z-index:220;top:38px;bottom:auto;left:0;right:0;display:none;max-height:220px;overflow:auto;padding:4px;border:1px solid var(--stroke);border-radius:7px;background:var(--fill-solid);box-shadow:var(--shadow-8); }
.accent-options { max-height:260px; }
.fluent-options.open { display:block;animation:menu-in .14s var(--ease); }
.fluent-options button { width:100%;min-height:34px;display:flex;align-items:center;gap:9px;padding:5px 9px;border:0;border-radius:4px;background:transparent;color:var(--text);cursor:pointer;text-align:left; }
.fluent-options button:hover,.fluent-options button:focus-visible { background:var(--fill-hover);outline:0; }
.fluent-options button span { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.fluent-options button svg { width:15px;opacity:0; }
.fluent-options button.selected { background:var(--fill-active); }
.fluent-options button.selected svg { opacity:1;color:var(--nav-accent); }
.accent-options [data-picker-value="red"] i { --option-color:#c42b1c; }.accent-options [data-picker-value="orange"] i { --option-color:#d05d00; }.accent-options [data-picker-value="yellow"] i { --option-color:#e5ad14; }.accent-options [data-picker-value="green"] i { --option-color:#107c10; }.accent-options [data-picker-value="teal"] i { --option-color:#008272; }.accent-options [data-picker-value="blue"] i { --option-color:#0f6cbd; }.accent-options [data-picker-value="purple"] i { --option-color:#744da9; }
.settings-dialog input[type="file"] { min-width: 0; color: var(--text-2); }
.slider-control { display:flex; align-items:center; gap:12px; min-width:0; }.slider-control input { min-width:0; flex:1; accent-color:var(--nav-accent); }.slider-control output { min-width:43px; color:var(--text-2); font-size:12px; font-variant-numeric:tabular-nums; }
.setting-actions { display:flex;gap:8px;flex-wrap:wrap; }.setting-actions button { min-width:0;padding-inline:12px; }
.folder-setting-card{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px 12px;margin-top:18px;padding:13px;border:1px solid var(--stroke);border-radius:8px;background:color-mix(in srgb,var(--fill-solid) 70%,transparent)}.folder-setting-icon{grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;border-radius:7px;background:var(--fill-hover);color:var(--nav-accent)}.folder-setting-icon svg{width:20px}.folder-storage-copy{display:grid;gap:3px;min-width:0}.folder-storage-copy strong{color:var(--text);font-weight:600}.folder-storage-copy small{color:var(--text-2);overflow-wrap:anywhere;line-height:1.35}.folder-setting-actions{grid-column:2;display:flex;gap:7px;flex-wrap:wrap}.folder-setting-actions button{min-width:0;white-space:nowrap}.danger-action{color:#c42b1c}
.folder-setting-actions>[hidden]{display:none!important}
@media(max-width:430px){.folder-setting-card{grid-template-columns:34px minmax(0,1fr);padding:11px}.folder-setting-icon{width:34px;height:34px}.folder-setting-actions{grid-column:1/-1}.folder-setting-actions button{flex:1}}
.formula-dialog { width:min(620px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; }
.formula-dialog > * { margin-inline:18px; }
.formula-dialog .dialog-head { margin-top:18px; }
.formula-dialog .dialog-head h2 { margin:0; }
.formula-dialog .dialog-head p { margin:2px 0 0; color:var(--text-3); font-size:11px; }
.formula-target { display:flex; width:max-content; margin-bottom:10px; padding:2px; border:1px solid var(--stroke); border-radius:5px; }
.formula-target button { height:27px; padding:0 11px; border:0; border-radius:3px; background:transparent; color:var(--text-2); cursor:pointer; }
.formula-target button.selected { background:var(--fill-solid); color:var(--nav-accent); box-shadow:0 1px 2px #0002; }
#formulaInput { width:calc(100% - 36px); margin-inline:18px; font:14px Consolas,monospace; }
.formula-preview { min-height:66px; display:flex; align-items:center; justify-content:center; margin-top:10px; padding:10px; border:1px solid var(--stroke); border-radius:6px; background:var(--fill-solid); overflow-x:auto; }
.formula-preview math { font-size:24px; }
.formula-keyboard { display:grid; grid-template-columns:repeat(10,minmax(38px,1fr)); gap:5px; margin-top:10px; }
.formula-keyboard button { min-height:35px; padding:3px; border:1px solid var(--stroke); border-radius:4px; background:var(--fill-solid); color:var(--text); cursor:pointer; font:14px Cambria Math,serif; }
.formula-keyboard button:hover { background:var(--fill-hover); }
.formula-dialog .dialog-actions { margin:15px 18px 18px; }
.image-viewer { width:min(1100px,calc(100vw - 24px)); height:min(760px,calc(100dvh - 24px)); padding:0; overflow:hidden; border:1px solid var(--stroke); border-radius:8px; background:color-mix(in srgb,var(--fill-solid) 82%,#000); color:var(--text); box-shadow:var(--shadow-8); }
.image-viewer::backdrop { background:rgba(0,0,0,.62);backdrop-filter:blur(5px); }.image-viewer-bar { height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 16px;border-bottom:1px solid var(--stroke);background:var(--fill); }.image-viewer-bar > span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);font-size:12px; }.image-viewer-bar > div { display:flex;align-items:center;gap:2px; }.image-viewer-bar #imageZoomReset { width:48px;font-size:11px; }
.image-viewer-stage { position:relative; height:calc(100% - 48px); overflow:hidden; display:grid; place-items:center; touch-action:none; cursor:grab; background:repeating-conic-gradient(#0000000a 0 25%,transparent 0 50%) 50% / 18px 18px; }.image-viewer-stage.panning { cursor:grabbing; }.image-viewer-stage img { max-width:92%; max-height:88%; object-fit:contain; transform:translate(var(--image-x,0),var(--image-y,0)) scale(var(--image-zoom,1)); transform-origin:center; user-select:none; pointer-events:none; transition:transform .12s var(--ease); }.image-viewer-stage.panning img{transition:none}
.work-pane.reading-mode .canvas-toolbar,.work-pane.reading-mode .format-bar,.work-pane.reading-mode .add-block-row,.work-pane.reading-mode .block-handle,.work-pane.reading-mode .divider-delete,.work-pane.reading-mode .card-drag-handle,.work-pane.reading-mode .document-resize-handle,.work-pane.reading-mode .idea-node .node-tools,.work-pane.reading-mode .idea-resize { display:none!important; }.work-pane.reading-mode .document-card { border-color:color-mix(in srgb,var(--stroke) 70%,transparent); }.work-pane.reading-mode .note-title,.work-pane.reading-mode .block-content { cursor:default; }.work-pane.reading-mode .idea-node { cursor:default; }.work-pane.reading-mode #readingModeButton { background:var(--fill-active);color:var(--text); }.work-pane.reading-mode .content-block{grid-template-columns:minmax(0,1fr);margin-left:0}.work-pane.reading-mode .content-block[data-type="todo"]{grid-template-columns:22px minmax(0,1fr)}.work-pane.reading-mode .content-block[data-type="bullets"]{grid-template-columns:19px minmax(0,1fr)}.work-pane.reading-mode .content-block[data-type="divider"]{grid-template-columns:minmax(0,1fr)}
.work-pane.reading-mode .document-resize-frame,.work-pane.reading-mode .secondary-resize-frame,.work-pane.reading-mode .secondary-resize-handle,.work-pane.reading-mode .secondary-format-bar,.work-pane.reading-mode .secondary-add-row,.work-pane.reading-mode .secondary-editor-delete,.work-pane.reading-mode .secondary-editor-grip{display:none!important}.work-pane.reading-mode .secondary-document-card{border-color:color-mix(in srgb,var(--stroke) 70%,transparent)}.work-pane.reading-mode .secondary-editor-head,.work-pane.reading-mode .secondary-block-content{cursor:default}
@container document (max-width:520px){.note-title{font-size:25px}.document-card .format-bar{gap:1px;margin-block:8px 11px}.document-card .format-bar button{min-width:27px;padding-inline:5px}.document-card .content-block{margin-left:-17px;grid-template-columns:16px minmax(0,1fr)}.document-card .block-handle{width:16px}.document-card .content-block[data-type="todo"]{grid-template-columns:16px 22px minmax(0,1fr)}.document-card .content-block[data-type="bullets"]{grid-template-columns:16px 19px minmax(0,1fr)}}
@container document (max-width:410px){.note-meta{height:auto;min-height:32px;flex-wrap:wrap}.document-card .format-bar{padding-right:4px}.document-card .backlinks{margin-top:14px}.document-card .add-block-row{margin-top:4px}}
.toast { position: fixed; left: 50%; bottom: 35px; z-index: 200; max-width: 360px; padding: 9px 14px; border-radius: 5px; background: rgba(30,30,32,.94); color: white; box-shadow: var(--shadow-8); opacity: 0; transform: translate(-50%,12px); transition: opacity .18s, transform .18s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

body.theme-dark {
  color-scheme: dark;
  --accent:var(--nav-accent);--accent-hover:var(--nav-accent-hover);--accent-soft:var(--nav-accent-soft);--accent-foreground:#10212b;
  --text: #f3f3f3; --text-2: #c8c6c4; --text-3: #979593;
  --stroke: rgba(255,255,255,.12); --stroke-strong: rgba(255,255,255,.2);
  --fill: rgba(35,35,38,.78); --fill-solid:#29292c; --fill-pane:rgba(38,38,42,.72);
  --fill-hover:rgba(255,255,255,.075); --fill-active:rgba(255,255,255,.11);
  --ink-auto-contrast:#fff;--ink-auto-inverse:#171717;
}
body.theme-light {
  color-scheme: light;
  --accent:var(--nav-accent);--accent-hover:var(--nav-accent-hover);--accent-soft:var(--nav-accent-soft);
  --text:#1b1a19; --text-2:#5f5e5d; --text-3:#8a8886;
  --stroke:rgba(0,0,0,.12); --stroke-strong:rgba(0,0,0,.2);
  --fill:rgba(255,255,255,.68); --fill-solid:#fbfbfc; --fill-pane:rgba(246,248,252,.62);
  --fill-hover:rgba(0,0,0,.055); --fill-active:rgba(0,0,0,.085);
}
body[data-accent="red"] { --nav-accent:#c42b1c;--nav-accent-hover:#a4262c;--nav-accent-soft:#f8e1dc; }
body[data-accent="orange"] { --nav-accent:#d05d00;--nav-accent-hover:#b34f00;--nav-accent-soft:#fbe7d2; }
body[data-accent="green"] { --nav-accent:#107c10;--nav-accent-hover:#0b6a0b;--nav-accent-soft:#dff1df; }
body[data-accent="yellow"] { --nav-accent:#9a6700;--nav-accent-hover:#7a5200;--nav-accent-soft:#fff0bd; }
body[data-accent="teal"] { --nav-accent:#007f72;--nav-accent-hover:#006b60;--nav-accent-soft:#d5f0ed; }
body[data-accent="blue"] { --nav-accent:#095ea7;--nav-accent-hover:#074f8e;--nav-accent-soft:#dcecff; }
body[data-accent="purple"] { --nav-accent:#744da9;--nav-accent-hover:#644294;--nav-accent-soft:#ede4f6; }
body.theme-dark[data-accent="red"] { --nav-accent:#ff8c7e;--nav-accent-hover:#ffab9f;--nav-accent-soft:#52201d; }
body.theme-dark[data-accent="orange"] { --nav-accent:#ff9f52;--nav-accent-hover:#ffb477;--nav-accent-soft:#512b14; }
body.theme-dark[data-accent="green"] { --nav-accent:#54b054;--nav-accent-hover:#6ec46e;--nav-accent-soft:#173d1b; }
body.theme-dark[data-accent="yellow"] { --nav-accent:#f2c94c;--nav-accent-hover:#ffda68;--nav-accent-soft:#493b13; }
body.theme-dark[data-accent="teal"] { --nav-accent:#4cc2b4;--nav-accent-hover:#6fd3c7;--nav-accent-soft:#123d39; }
body.theme-dark[data-accent="blue"] { --nav-accent:#1469a8;--nav-accent-hover:#1a78ba;--nav-accent-soft:#173f59; }
body.theme-dark[data-accent="purple"] { --nav-accent:#c6a0f6;--nav-accent-hover:#d5b8f8;--nav-accent-soft:#38264d; }
body.theme-dark .search-box, body.theme-dark .notes-pane, body.theme-dark .top-commandbar, body.theme-dark .canvas-toolbar, body.theme-dark .statusbar { background: rgba(30,30,33,.42); }
body.theme-dark .document-card { background: rgba(38,38,41,.91); border-color:color-mix(in srgb,var(--nav-accent) 42%,rgba(255,255,255,.2)); }
body.theme-dark .secondary-document-card{background:rgba(38,38,41,.93);border-color:color-mix(in srgb,var(--nav-accent) 44%,rgba(255,255,255,.2))}
.ink-selection-box{z-index:102}
body.theme-dark .canvas-viewport { background-color: rgba(20,20,23,.44); background-image: radial-gradient(circle, rgba(210,218,230,.2) .75px, transparent .8px); }
body.theme-dark .primary-action { color: var(--accent-foreground); }

@media (forced-colors: active) {
  .mica-backdrop, .mica-layer { display: none; }
  .app-shell, .nav-pane, .notes-pane, .work-pane { background: Canvas; }
  .nav-item.selected::before { background: Highlight; }
}
@media (max-width: 1050px) {
  .app-shell { --navigation-pane-width:250px;--notes-pane-width:274px; }
}

@container (max-width: 900px) {
  .ink-mode { width:auto;padding-inline:7px; }
}

@container (max-width: 650px) {
  .canvas-toolbar { gap: 4px; padding-inline: 7px; }
  .ink-options { gap: 4px; }
}

#printSheet { display:none; }
@media print {
  @page { size:auto;margin:11mm; }
  body { overflow:visible!important;background:#fff!important;color:#111!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important; }
  body > :not(#printSheet) { display:none!important; }
  #printSheet { display:block!important;width:100%;font:14px/1.45 "Segoe UI Variable","Segoe UI",sans-serif;color:#171717;color-scheme:light;--text:#171717;--text-2:#41464f;--text-3:#626872;--fill:#fff;--fill-solid:#fff;--fill-hover:#f1f3f5;--fill-active:#e8ebef;--stroke:#c4c8ce;--stroke-strong:#858b94;--accent-foreground:#fff; }
  .print-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 8mm;padding-bottom:3mm;border-bottom:1px solid #aaa}.print-heading strong{font-size:18px}.print-heading span{color:#666;font-size:10px}
  .print-canvas-board{position:relative;overflow:hidden;margin:0 auto;border:1px solid #aaa;border-radius:8px;background-color:#f3f5f8;background-image:radial-gradient(circle,#8d96a6 0.65px,transparent .75px);background-size:20px 20px;break-inside:avoid;box-shadow:0 5px 18px #0002}
  .print-canvas-scene{position:absolute;transform-origin:0 0;color:#171717;color-scheme:light;--text:#171717;--text-2:#41464f;--text-3:#626872;--fill:#fff;--fill-solid:#fff;--fill-hover:#f1f3f5;--fill-active:#e8ebef;--stroke:#c4c8ce;--stroke-strong:#858b94}.print-canvas-scene .connection-layer{display:block}.print-canvas-scene .connection-path{filter:none}.print-canvas-scene .document-card,.print-canvas-scene .secondary-document-card{overflow:visible!important;background:#fff!important;border-color:#9ca3ad!important;box-shadow:0 6px 18px #0002!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:#171717!important}.print-canvas-scene .document-card .block-content,.print-canvas-scene .secondary-block-content{color:var(--block-color,var(--text))}.print-canvas-scene .idea-node{display:flex;background:#fff!important;border-color:#747b85!important;color:#171717!important;box-shadow:0 3px 10px #0002!important}.print-canvas-scene .idea-node.root{border-color:#315d91!important;background:linear-gradient(135deg,#075da8,#4c51b8)!important;color:#fff!important}.print-canvas-scene a{color:#075da8!important;text-decoration:underline}.print-canvas-scene .content-block[data-type="code"] .block-content,.print-canvas-scene .secondary-block[data-type="code"] .secondary-block-content{background:#f1f3f5!important;border-color:#c4c8ce!important}.print-canvas-scene hr{border-color:#858b94!important}.print-ink{position:absolute;inset:0;width:4000px!important;height:3000px!important;max-width:none!important;max-height:none!important;margin:0!important;z-index:5;pointer-events:none}.print-note-title{margin:0;color:#171717!important;font-size:29px;line-height:1.25}.print-canvas-scene input{border:0;background:transparent;color:inherit}
}

html:lang(zh) body,html:lang(ja) body,html:lang(ko) body { line-height:1.5; }
html:lang(zh) .nav-item,html:lang(ja) .nav-item,html:lang(ko) .nav-item { letter-spacing:.015em; }
html:lang(zh) .section-label,html:lang(ja) .section-label,html:lang(ko) .section-label { letter-spacing:.12em; }
html:lang(zh) .tool-button, html:lang(ja) .tool-button,
html:lang(ko) .tool-button,html:lang(zh) .command-button,html:lang(ja) .command-button,html:lang(ko) .command-button { padding-inline:8px; }
html:lang(zh) .settings-dialog label,html:lang(ja) .settings-dialog label,html:lang(ko) .settings-dialog label,html:lang(zh) .settings-dialog .setting-row,html:lang(ja) .settings-dialog .setting-row,html:lang(ko) .settings-dialog .setting-row { grid-template-columns:minmax(72px,92px) minmax(0,1fr); }
html:lang(ja) .app-shell,html:lang(ko) .app-shell { --navigation-pane-width:clamp(272px,19vw,304px);--notes-pane-width:clamp(294px,21vw,334px); }
html:lang(de) .app-shell,html:lang(pt) .app-shell { --navigation-pane-width:clamp(280px,20vw,314px);--notes-pane-width:clamp(300px,21vw,342px); }
html:lang(ja) .accent-button,html:lang(ja) .workspace-picker,html:lang(ja) .nav-item,html:lang(ko) .accent-button,html:lang(ko) .workspace-picker,html:lang(ko) .nav-item { min-height:37px;height:auto;padding-block:7px; }
@media (max-width: 800px) {
  .app-shell { grid-template-columns: 280px minmax(0,1fr); }
  .nav-pane { position: fixed; inset: 0 auto 0 0; z-index: 80; width: 280px; box-shadow: var(--shadow-8); transform: translateX(-105%); transition: transform .22s var(--ease); }
  .nav-pane.open { transform: translateX(0); }
  .nav-pane.open + .nav-scrim { display:block; }
  #collapseNav { display:none; }
  .mobile-only, .mobile-nav-button { display: grid !important; }
  .notes-pane { grid-column: 1; }
  .work-pane { grid-column: 2; }
}
@media (max-width: 600px) {
  .app-shell { display: block; }
  .notes-pane { position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(320px, calc(100vw - 44px)); display: flex; box-shadow: var(--shadow-8); transform: translateX(-105%); transition: transform .22s var(--ease); }
  .notes-pane.mobile-open { transform: translateX(0); }
  .work-pane { width: 100%; height: 100%; }
  .work-notes-button { display: grid; }
  .save-state { display: none; }
  .canvas-toolbar { overflow-x: auto; }
  .zoom-control { margin-left: auto; }
  .document-card { width:min(620px,calc(100vw - 52px)); }
}

@media (max-width: 430px) {
  .canvas-toolbar { gap:3px;padding-inline:6px;scroll-snap-type:x proximity; }
  .canvas-toolbar > button,.canvas-toolbar > div { scroll-snap-align:start; }
  .zoom-control { margin-left:3px;flex:0 0 auto; }
  .zoom-control button { min-width:28px;padding-inline:6px; }
  .zoom-control span { min-width:42px; }
  #zoomReset { display:none; }
}

@media (orientation: portrait) and (pointer: coarse) {
  .app-shell { display:block; }
  .notes-pane { position:fixed; inset:0 auto 0 0; z-index:70; width:min(340px,86vw); box-shadow:var(--shadow-8); transform:translateX(-105%); transition:transform .22s var(--ease); }
  .notes-pane.mobile-open { transform:translateX(0); }
  .work-pane { width:100%; height:100%; }
  .work-notes-button { display:grid; }
  .canvas-toolbar { height:54px; overflow-x:auto; scrollbar-width:none; }
  .tool-button,.command-button { min-width:42px; min-height:38px; justify-content:center; }
  .format-bar { min-height:42px;overflow-x:auto;scrollbar-width:thin; }
  .format-bar button { min-width:38px; min-height:34px; flex:0 0 auto; }
  .document-card { width:min(620px,88vw); }
  .idea-node { min-height:44px; padding-block:12px; }
  .document-resize-frame { opacity:1;inset:-13px;border-width:2px; }
  .document-resize-handle { opacity:1; }.resize-east{right:-16px;width:30px}.resize-south{bottom:-16px;height:30px}.resize-corner{right:-18px;bottom:-18px;width:40px;height:40px}
  .canvas-toolbar.ink-active { height:112px;min-height:112px;align-content:center;flex-wrap:wrap;gap:5px;padding-block:5px;overflow:hidden; }
  .canvas-toolbar.ink-active #toolSelector { order:1;flex:0 0 auto; }
  .canvas-toolbar.ink-active .zoom-control { order:2;margin-left:auto;flex:0 0 auto; }
  .canvas-toolbar.ink-active #inkOptions { order:3;display:flex;flex:0 0 100%;width:100%;min-width:0!important;max-width:100%;min-height:39px;padding:2px 0 5px;overflow-x:auto;overflow-y:hidden;gap:7px;scrollbar-width:thin;overscroll-behavior-x:contain;touch-action:pan-x; }
  .canvas-toolbar.ink-active #inkOptions::-webkit-scrollbar{height:5px}.canvas-toolbar.ink-active #inkOptions::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--nav-accent) 65%,transparent);border-radius:6px}
  .canvas-toolbar.ink-active .ink-mode-picker { display:flex;flex:0 0 auto; }
  .canvas-toolbar.ink-active .ink-mode { min-width:52px;height:31px;padding-inline:9px;font-size:12px; }
  .canvas-toolbar.ink-active .color-chip,.canvas-toolbar.ink-active .color-chip:nth-of-type(n+5) { display:block;width:22px!important;min-width:22px;max-width:22px;height:22px!important;min-height:22px;max-height:22px;flex-basis:22px; }
  .canvas-toolbar.ink-active #penSize { display:block;width:84px;flex:0 0 auto; }
  .canvas-toolbar.ink-active .subtle-button { display:inline-flex;max-width:none;flex:0 0 auto;min-height:32px;align-items:center; }
  .formula-keyboard { grid-template-columns:repeat(6,minmax(42px,1fr)); }
  .formula-keyboard button { min-height:44px; }
}

/* Portrait is a three-page flow: workspace home, note list, then editor. */
@media (max-width:1100px) and (orientation:portrait) {
  .app-shell { display:block; }
  /* Desktop collapse preferences must never hide a full-screen mobile stage. */
  .app-shell.nav-collapsed .nav-pane,.app-shell.notes-collapsed .notes-pane,.app-shell.focus-mode .nav-pane,.app-shell.focus-mode .notes-pane { visibility:visible;opacity:1;pointer-events:auto; }
  .nav-pane,.notes-pane { position:fixed;inset:0;width:100dvw;height:100dvh;box-sizing:border-box;border-right:0; }
  .nav-pane { z-index:120;transform:translateX(-105%);padding:16px 12px calc(10px + env(safe-area-inset-bottom));transition:transform .28s var(--ease); }
  .notes-pane { z-index:110;transform:translateX(105%);background:var(--fill-pane);padding-bottom:env(safe-area-inset-bottom);transition:transform .28s var(--ease); }
  .work-pane { position:fixed;inset:0;z-index:100;transform:translateX(105%);transition:transform .28s var(--ease);background:var(--fill-pane); }
  .app-shell[data-mobile-stage="workspace"] .nav-pane { transform:translateX(0); }
  .app-shell[data-mobile-stage="notes"] .notes-pane { transform:translateX(0); }
  .app-shell[data-mobile-stage="editor"] .nav-pane,.app-shell[data-mobile-stage="editor"] .notes-pane { transform:translateX(-105%); }
  .app-shell[data-mobile-stage="editor"] .work-pane { transform:translateX(0); }
  .nav-pane.open { transform:translateX(0); }
  .notes-pane.mobile-open { transform:translateX(0); }
  .nav-scrim { display:none!important; }
  .desktop-pane-toggle { display:none!important; }
  .mobile-only,.mobile-nav-button,.work-notes-button { display:grid!important; }
  .menu-surface,.slash-menu { z-index:240; }
  .document-resize-frame { opacity:1;inset:-13px;border-width:2px; }
  .document-resize-handle { opacity:1; }.resize-east{right:-16px;width:30px}.resize-south{bottom:-16px;height:30px}.resize-corner{right:-18px;bottom:-18px;width:40px;height:40px}
  .format-bar { min-height:42px; }
  .format-bar button { flex:0 0 auto; }
  .canvas-toolbar.ink-active { height:112px;min-height:112px;align-content:center;flex-wrap:wrap;gap:5px;padding-block:5px;overflow:hidden; }
  .canvas-toolbar.ink-active #toolSelector { order:1;flex:0 0 auto; }
  .canvas-toolbar.ink-active .zoom-control { order:2;margin-left:auto;flex:0 0 auto; }
  .canvas-toolbar.ink-active #inkOptions { order:3;display:flex;flex:0 0 100%;width:100%;min-width:0!important;max-width:100%;min-height:39px;padding:2px 0 5px;overflow-x:auto;overflow-y:hidden;gap:7px;scrollbar-width:thin;overscroll-behavior-x:contain;touch-action:pan-x; }
  .canvas-toolbar.ink-active #inkOptions::-webkit-scrollbar{height:5px}.canvas-toolbar.ink-active #inkOptions::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--nav-accent) 65%,transparent);border-radius:6px}
  .canvas-toolbar.ink-active .ink-mode-picker { display:flex;flex:0 0 auto; }
  .canvas-toolbar.ink-active .ink-mode { min-width:52px;height:31px;padding-inline:9px;font-size:12px; }
  .canvas-toolbar.ink-active .color-chip,.canvas-toolbar.ink-active .color-chip:nth-of-type(n+5) { display:block;width:22px!important;min-width:22px;max-width:22px;height:22px!important;min-height:22px;max-height:22px;flex-basis:22px; }
  .canvas-toolbar.ink-active #penSize { display:block;width:84px;flex:0 0 auto; }
  .canvas-toolbar.ink-active .subtle-button { display:inline-flex;max-width:none;flex:0 0 auto;min-height:32px;align-items:center; }
  .pane-header { padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right)); }
}

/* Resize affordances stay inside the saved card rectangle, so they never create canvas-card scrollbars. */
.secondary-block-content,.secondary-editor-head input{user-select:text;-webkit-user-select:text;overflow-wrap:anywhere;min-width:0}
.secondary-format-bar{overflow-x:auto;overscroll-behavior:contain;touch-action:pan-x;scrollbar-width:thin}
.secondary-format-bar>button{flex-shrink:0}
.work-pane.reading-mode .todo-check{pointer-events:none}
@media print{
  .print-canvas-scene .content-block{grid-template-columns:minmax(0,1fr);margin-left:0}
  .print-canvas-scene .content-block[data-type="todo"]{grid-template-columns:22px minmax(0,1fr)}
  .print-canvas-scene .content-block[data-type="bullets"]{grid-template-columns:19px minmax(0,1fr)}
  .print-canvas-scene .secondary-block-list{overflow:visible;flex:none}
  .print-canvas-scene .secondary-document-card{height:auto!important;min-height:250px}
  .print-canvas-scene .secondary-block [data-secondary-delete]{display:none}
}
.secondary-resize-frame{inset:0;border-width:6px;border-radius:9px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nav-accent) 88%,transparent);opacity:.72}.secondary-resize-east{top:7px;right:0;bottom:7px;width:24px}.secondary-resize-south{left:7px;right:7px;bottom:0;height:24px}.secondary-resize-corner{right:3px;bottom:3px;width:34px;height:34px;border-radius:9px}.secondary-resize-corner::after{right:6px;bottom:6px;width:11px;height:11px}
@media (max-width:1100px) and (orientation:portrait){.document-resize-frame,.secondary-resize-frame{inset:0;border-width:6px}.resize-east,.secondary-resize-east{right:0;width:28px}.resize-south,.secondary-resize-south{bottom:0;height:28px}.resize-corner,.secondary-resize-corner{right:3px;bottom:3px;width:38px;height:38px}}
@media (max-width:1100px) and (orientation:portrait){.canvas-toolbar.ink-active{height:56px;min-height:56px;flex-wrap:nowrap;align-content:normal;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x;-webkit-overflow-scrolling:touch}.canvas-toolbar.ink-active #toolSelector,.canvas-toolbar.ink-active .zoom-control,.canvas-toolbar.ink-active #inkOptions{order:initial;flex:0 0 auto}.canvas-toolbar.ink-active #inkOptions{display:flex;width:auto;min-width:max-content!important;max-width:none;min-height:0;padding:0;overflow:visible;touch-action:pan-x}.canvas-toolbar.ink-active .ink-mode{min-width:54px;min-height:36px}.canvas-toolbar.ink-active .color-chip{width:26px!important;min-width:26px;max-width:26px;height:26px!important;min-height:26px;max-height:26px;flex-basis:26px}.canvas-toolbar.ink-active #penSize{width:96px;min-height:36px}.canvas-toolbar.ink-active .subtle-button{min-height:38px;padding-inline:12px}}
@media (max-width:800px) and (pointer:coarse){.nav-item,.folder-item{min-height:42px;height:auto}.pane-header .icon-button,.top-commandbar .icon-button{width:42px;height:42px}.folder-item .folder-more,.note-card .note-more{width:36px;height:36px}.ink-selection-menu{max-width:calc(100vw - 24px);overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.ink-selection-menu button,.ink-selection-menu label{width:38px;height:38px;flex:0 0 38px}}

/* The editor stores structured blocks internally, but presents them as one continuous document. */
.unified-editor-card .secondary-block-list{padding:0;overflow:auto}
.unified-editor-card .content-block,.unified-editor-card .secondary-block{display:grid;grid-template-columns:minmax(0,1fr);min-height:0;margin:0;background:transparent!important;border-radius:0}
.unified-editor-card .content-block[data-type="todo"],.unified-editor-card .secondary-block[data-type="todo"]{grid-template-columns:22px minmax(0,1fr)}
.unified-editor-card .content-block[data-type="bullets"],.unified-editor-card .secondary-block[data-type="bullets"]{grid-template-columns:19px minmax(0,1fr)}
.unified-editor-card .content-block[data-type="formula"],.unified-editor-card .content-block[data-type="image"],.unified-editor-card .content-block[data-type="divider"],.unified-editor-card .secondary-block[data-type="formula"],.unified-editor-card .secondary-block[data-type="image"],.unified-editor-card .secondary-block[data-type="divider"]{display:block;margin:8px 0}
.unified-editor-card .block-handle,.unified-editor-card .secondary-block-handle,.unified-editor-card .secondary-block-delete,.unified-editor-card .divider-delete{display:none!important}
.unified-editor-card .secondary-block-content{min-height:27px;padding:1px 0;font-size:var(--body-font-size,16px);line-height:1.62}
.unified-editor-card .content-block[data-type="heading1"] .secondary-block-content{margin:15px 0 5px}
.unified-editor-card .content-block[data-type="heading"] .secondary-block-content{margin:11px 0 4px}
.unified-editor-card .content-block[data-type="heading3"] .secondary-block-content{margin:9px 0 3px}
.unified-editor-card .content-block[data-type="quote"],.unified-editor-card .secondary-block[data-type="quote"]{margin:8px 0;padding-left:11px}
.unified-editor-card .content-block[data-type="code"] .secondary-block-content{margin:7px 0}
.unified-editor-card .content-block[data-type="divider"]{height:auto;padding:8px 0}

/* Fluent Office-style ribbon: groups stay one stable height in every mode. */
.canvas-toolbar{height:72px;min-height:72px;padding:0 8px;gap:0;align-items:stretch;background:color-mix(in srgb,var(--fill-pane) 84%,transparent);backdrop-filter:blur(24px) saturate(145%);box-shadow:inset 0 1px color-mix(in srgb,#fff 38%,transparent)}
.ribbon-group{position:relative;display:flex;flex:0 0 auto;align-items:center;gap:4px;height:100%;padding:4px 10px 18px;border-right:1px solid var(--stroke);box-sizing:border-box}
.ribbon-group-label{position:absolute;left:8px;right:8px;bottom:2px;overflow:hidden;color:var(--text-3);font-size:10px;line-height:14px;text-align:center;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.ribbon-mode-group{padding-inline:7px}.ribbon-insert-group{padding-inline:8px}
.canvas-toolbar .segmented{height:38px;box-sizing:border-box}
.canvas-toolbar .tool-button,.canvas-toolbar .command-button{height:36px;min-width:42px;padding:0 8px;flex-direction:column;justify-content:center;gap:2px;font-size:10px;line-height:1}
.canvas-toolbar .tool-button svg,.canvas-toolbar .command-button svg{width:18px;height:18px}
.canvas-toolbar .formula-command strong{height:18px;font-size:16px;line-height:18px}
.ribbon-group.ink-options{display:none;padding-inline:8px}.ribbon-group.ink-options.show{display:flex}
.ink-mode-picker{height:38px;align-items:center;box-sizing:border-box}
.ink-mode{height:32px;min-width:40px;display:flex;align-items:center;justify-content:center;gap:4px;padding-inline:7px}
.ink-mode svg,.ink-guide-button svg{width:16px;height:16px}
.ink-guide-picker{display:flex;align-items:center;gap:2px;padding-left:5px;border-left:1px solid var(--stroke)}
.ink-guide-button{height:34px;min-width:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 6px;border:0;border-radius:4px;background:transparent;color:var(--text-2);font-size:9px;cursor:pointer}
.ink-guide-button:hover{background:var(--fill-hover);color:var(--text)}.ink-guide-button.selected{background:var(--nav-accent-soft);color:var(--text)}
.ribbon-view-group{margin-left:auto;border-right:0}.ribbon-view-group .zoom-control{margin-left:0}
.canvas-toolbar.ink-active{height:72px!important;min-height:72px!important;flex-wrap:nowrap!important;align-content:normal!important;overflow-x:auto!important;overflow-y:hidden!important}
.canvas-toolbar.ink-active #inkOptions{display:flex!important;width:auto!important;min-width:max-content!important;max-width:none!important;min-height:72px!important;padding-block:4px 18px!important;overflow:visible!important}
.ink-guide{position:absolute;z-index:180;left:1800px;top:1350px;width:360px;height:58px;border:1px solid color-mix(in srgb,#986b16 65%,var(--stroke));border-radius:5px;background:linear-gradient(180deg,rgba(255,218,112,.78),rgba(239,184,57,.68));box-shadow:0 8px 24px #0003,inset 0 1px #fff9;transform-origin:center;touch-action:none;cursor:move;backdrop-filter:blur(5px)}
.ink-guide::before{content:"";position:absolute;inset:8px;background:repeating-linear-gradient(90deg,transparent 0 9px,#694810 9px 10px,transparent 10px 19px);opacity:.5}
.ink-guide[data-guide="triangle"]{width:300px;height:210px;border-radius:7px;clip-path:polygon(0 100%,100% 100%,0 0);background:rgba(255,211,90,.66)}
.ink-guide[data-guide="triangle"]::before{inset:25px;clip-path:polygon(0 100%,100% 100%,0 0);background:var(--fill-pane);opacity:.74}
.ink-guide[data-guide="compass"]{width:280px;height:280px;border:2px dashed color-mix(in srgb,var(--nav-accent) 72%,var(--text));border-radius:50%;background:color-mix(in srgb,var(--nav-accent-soft) 35%,transparent)}
.ink-guide[data-guide="compass"]::before{inset:50%;width:8px;height:8px;border-radius:50%;background:var(--nav-accent);transform:translate(-50%,-50%);opacity:1}
.guide-grip{position:absolute;left:50%;top:50%;width:34px;height:8px;border-radius:8px;background:#68470f66;transform:translate(-50%,-50%)}
@media (pointer:coarse){.folder-item .folder-more,.note-card .note-more{opacity:1!important}.canvas-toolbar .tool-button,.canvas-toolbar .command-button,.ink-guide-button{min-width:46px}.ink-guide{min-width:280px}.ribbon-group{padding-inline:8px}}
@media (max-width:800px){.canvas-toolbar{height:64px!important;min-height:64px!important;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}.ribbon-group{height:64px;padding-top:3px;padding-bottom:16px}.canvas-toolbar.ink-active{height:64px!important;min-height:64px!important}.canvas-toolbar.ink-active #inkOptions{min-height:64px!important;padding-top:3px!important;padding-bottom:16px!important}.canvas-toolbar .tool-button,.canvas-toolbar .command-button{height:40px}.ribbon-view-group{margin-left:0}.ink-mode{height:36px;min-width:48px}.color-chip{width:24px!important;min-width:24px;max-width:24px;height:24px!important;min-height:24px;max-height:24px;flex-basis:24px}}

/* Production ribbon refinements and canvas-owned zoom. */
.canvas-toolbar{height:60px;min-height:60px;padding-inline:6px;background:color-mix(in srgb,var(--fill-solid) 72%,transparent)}
.ribbon-group{height:60px;padding:3px 8px 15px;gap:3px}.ribbon-group-label{bottom:1px;font-size:9px;letter-spacing:.01em}
.canvas-toolbar .segmented{height:36px;background:transparent}.canvas-toolbar .tool-button,.canvas-toolbar .command-button{height:34px;min-width:40px;padding-inline:7px}
.canvas-toolbar.ink-active{height:60px!important;min-height:60px!important}.canvas-toolbar.ink-active #inkOptions{min-height:60px!important;padding:3px 8px 15px!important}
.canvas-zoom{position:absolute;right:14px;bottom:14px;z-index:210;padding:3px;border:1px solid var(--stroke);border-radius:7px;background:color-mix(in srgb,var(--fill-solid) 88%,transparent);box-shadow:var(--shadow-8);backdrop-filter:blur(18px)}.canvas-zoom .zoom-control{margin:0;border:0;background:transparent}
.workspace-picker-row{display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:center;gap:3px}.workspace-more{width:32px;height:32px;display:grid;place-items:center;padding:0 0 5px;border:0;border-radius:5px;background:transparent;color:var(--text-2);font:700 16px/1 "Segoe UI",sans-serif;cursor:pointer}.workspace-more:hover{background:var(--fill-hover);color:var(--text)}
.editor-title-row{position:relative;z-index:8;display:flex;align-items:center;gap:8px}.editor-title-row .note-title{min-width:0;flex:1}.editor-title-row .secondary-editor-delete{flex:0 0 32px;opacity:.72}.editor-title-row .secondary-editor-delete:hover{opacity:1}
.accent-button{color:var(--accent-foreground)}
body.theme-light,body.theme-dark{--accent-foreground:#fff}
body.theme-dark[data-accent="orange"],body.theme-dark[data-accent="yellow"],body.theme-dark[data-accent="green"],body.theme-dark[data-accent="teal"],body.theme-dark[data-accent="purple"]{--accent-foreground:#111}
.primary-action,.accent-button,.resize-corner::after,.secondary-resize-corner::after{color:var(--accent-foreground)}

/* Measured drafting scales. Minor divisions are 2 mm; numbered marks are centimetres. */
.ink-guide{overflow:visible}.ink-guide::before{display:none}.ruler-scale,.triangle-scale{position:absolute;display:block;pointer-events:none}.ruler-scale{inset:0 5px auto;height:26px}.metric-tick{position:absolute;left:calc(var(--tick) * 10px);top:0;width:1px;height:8px;background:#5c3d0d99}.metric-tick.major-true{height:16px;background:#493109}.metric-tick b{position:absolute;top:17px;left:-3px;color:#4d3309;font:600 8px/1 "Segoe UI",sans-serif}.triangle-scale.horizontal{left:6px;bottom:5px;width:260px;height:25px}.triangle-scale.horizontal .metric-tick{top:auto;bottom:0}.triangle-scale.horizontal .metric-tick b{top:auto;bottom:17px}.triangle-scale.vertical{left:5px;bottom:5px;width:180px;height:25px;transform:rotate(-90deg);transform-origin:left bottom}.guide-cutout{position:absolute;left:38px;bottom:34px;width:150px;height:100px;clip-path:polygon(0 100%,100% 100%,0 0);background:var(--fill-pane);opacity:.78}.degree-tick{position:absolute;left:50%;top:50%;width:1px;height:50%;transform-origin:50% 0;transform:rotate(var(--degree));background:linear-gradient(#425064 0 8px,transparent 8px);pointer-events:none}.degree-tick:nth-of-type(3n){background:linear-gradient(#26384f 0 14px,transparent 14px)}.degree-tick b{position:absolute;top:15px;left:-6px;color:var(--text-2);font:600 7px/1 "Segoe UI",sans-serif;transform:rotate(calc(-1 * var(--degree)))}.guide-center{position:absolute;left:50%;top:50%;width:9px;height:9px;border:2px solid var(--nav-accent);border-radius:50%;transform:translate(-50%,-50%)}
@media (pointer:coarse){.workspace-more{display:grid;opacity:1}.editor-title-row .secondary-editor-delete{width:40px;height:40px;flex-basis:40px}.canvas-zoom{right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom))}}
@media (max-width:800px){.canvas-toolbar,.canvas-toolbar.ink-active{height:58px!important;min-height:58px!important}.ribbon-group{height:58px;padding-bottom:14px}.canvas-toolbar.ink-active #inkOptions{min-height:58px!important;padding-bottom:14px!important}.canvas-zoom #zoomReset{display:none}.canvas-zoom{bottom:12px}.workspace-picker-row{grid-template-columns:minmax(0,1fr) 44px}.workspace-more{width:44px;height:44px}}

/* One Fluent overflow-button component across navigation, lists and commands. */
.overflow-button,.folder-item .overflow-button,.note-card .overflow-button{width:32px;height:32px;min-width:32px;min-height:32px;display:grid;place-items:center;margin-left:auto;padding:0;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--text-2);opacity:1;cursor:pointer;line-height:1;transition:background .1s var(--ease),border-color .1s var(--ease),color .1s var(--ease),transform .08s var(--ease)}
.overflow-button svg,.folder-item .overflow-button svg,.note-card .overflow-button svg{width:18px;height:18px;display:block;overflow:visible;stroke:none;fill:currentColor}
.overflow-button:hover,.folder-item .overflow-button:hover,.note-card .overflow-button:hover{border-color:var(--stroke);background:var(--fill-hover);color:var(--text)}
.overflow-button:active,.folder-item .overflow-button:active,.note-card .overflow-button:active{background:var(--fill-active);transform:scale(.96)}
.overflow-button:focus-visible{outline:2px solid color-mix(in srgb,var(--nav-accent) 72%,transparent);outline-offset:1px}
.command-more{margin-left:3px}.workspace-more{font:inherit}
@media (pointer:coarse){.overflow-button,.folder-item .overflow-button,.note-card .overflow-button{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:6px}.overflow-button svg,.folder-item .overflow-button svg,.note-card .overflow-button svg{width:20px;height:20px}}
@media (max-width:800px) and (pointer:coarse){.workspace-picker-row{grid-template-columns:minmax(0,1fr) 44px}.workspace-more.overflow-button{width:44px;height:44px;min-width:44px;min-height:44px}.top-commandbar .overflow-button{width:42px;height:42px;min-width:42px;min-height:42px}}

/* Balanced ribbon density without the redundant group captions. */
.canvas-toolbar{height:62px;min-height:62px;padding-inline:9px;gap:2px}
.ribbon-group{height:62px;gap:6px;padding:7px 12px;border-right-color:color-mix(in srgb,var(--stroke) 78%,transparent)}
.ribbon-group-label{display:none}
.ribbon-mode-group{padding-inline:8px 12px}.ribbon-insert-group{padding-inline:12px 14px}
.canvas-toolbar .segmented{height:42px;padding:3px;gap:2px}
.canvas-toolbar .tool-button,.canvas-toolbar .command-button{height:36px;min-width:46px;padding-inline:10px;gap:3px}
.ink-mode-picker{height:42px;padding:3px;gap:2px}.ink-mode{height:34px;padding-inline:9px}
.ink-guide-picker{gap:4px;padding-left:8px}.ink-guide-button{height:38px;min-width:44px;padding-inline:8px}
.canvas-toolbar.ink-active{height:62px!important;min-height:62px!important}.canvas-toolbar.ink-active #inkOptions{min-height:62px!important;padding:7px 12px!important;gap:8px!important}
@media (max-width:800px){.canvas-toolbar,.canvas-toolbar.ink-active{height:60px!important;min-height:60px!important;padding-inline:7px}.ribbon-group{height:60px;padding:6px 9px;gap:5px}.canvas-toolbar .tool-button,.canvas-toolbar .command-button{height:40px;min-width:48px;padding-inline:9px}.canvas-toolbar.ink-active #inkOptions{min-height:60px!important;padding:6px 9px!important}.ink-mode-picker{height:42px}.ink-mode{height:36px;padding-inline:9px}}

/* Settings becomes a vertical, scrollable sheet on narrow portrait screens. This
   keeps long localized labels and folder actions inside their own touch targets. */
@media (max-width:600px) and (orientation:portrait){
  .settings-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);overflow:hidden}
  .settings-dialog form{max-height:calc(100dvh - 20px);padding:16px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .settings-dialog .dialog-head{margin-bottom:14px}
  .settings-dialog .setting-row{grid-template-columns:minmax(0,1fr);gap:6px;margin:17px 0}
  .settings-dialog .setting-row>span{min-width:0;line-height:1.35;overflow-wrap:anywhere}
  .settings-dialog .fluent-select{min-height:40px;height:auto;padding-block:3px}
  .settings-dialog .slider-control{min-height:40px}
  .settings-dialog .folder-setting-card{grid-template-columns:36px minmax(0,1fr);gap:10px;margin-top:20px;padding:12px}
  .settings-dialog .folder-setting-icon{width:36px;height:36px}
  .settings-dialog .folder-setting-actions{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:2px}
  .settings-dialog .folder-setting-actions button{width:100%;min-height:42px;height:auto;padding:8px 12px;white-space:normal;line-height:1.28;overflow-wrap:anywhere}
}

/* Clean, scale-free drafting guides. The ruler extends beyond the whole canvas. */
.ink-guide[data-guide="ruler"]{width:5200px;height:68px;border-inline:0;border-radius:0;background:linear-gradient(90deg,transparent 0,rgba(245,194,70,.7) 6%,rgba(255,218,112,.82) 18% 82%,rgba(245,194,70,.7) 94%,transparent 100%);box-shadow:0 8px 24px #0003,inset 0 1px #fff9,inset 0 -1px #754b1670}
.ruler-scale,.triangle-scale,.metric-tick,.degree-tick{display:none!important}
.guide-rotate{position:absolute;left:50%;top:-24px;width:28px;height:28px;border:2px solid color-mix(in srgb,var(--nav-accent) 72%,var(--text));border-radius:50%;background:var(--fill-solid);box-shadow:var(--shadow-4);transform:translateX(-50%);cursor:grab;touch-action:none}
.guide-rotate::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.ink-guide[data-guide="ruler"] .guide-grip{width:84px;height:46px}.ink-guide[data-guide="triangle"]{clip-path:none;border:0;background:transparent;box-shadow:none}.ink-guide[data-guide="triangle"]::after{content:"";position:absolute;inset:0;z-index:-2;clip-path:polygon(0 100%,100% 100%,0 0);background:rgba(255,211,90,.72);filter:drop-shadow(0 8px 12px #0003)}.ink-guide[data-guide="triangle"] .guide-rotate{left:50%;top:-22px}.ink-guide[data-guide="triangle"] .guide-grip{width:76px;height:48px}.ink-guide[data-guide="compass"] .guide-rotate{top:-18px}
.ink-guide{pointer-events:none}.ink-guide .guide-grip,.ink-guide .guide-rotate{pointer-events:auto}
.ink-guide .guide-grip{z-index:3;width:72px;height:44px;background:transparent;cursor:move}.ink-guide .guide-grip::before{content:"";position:absolute;left:50%;top:50%;width:54px;height:9px;border-radius:8px;background:#68470f88;transform:translate(-50%,-50%)}
.ink-guide .guide-rotate{z-index:4;width:34px;height:34px}.ink-guide[data-guide="ruler"] .guide-grip{width:92px;height:48px}

/* A paragraph break uses the same vertical rhythm as a wrapped body-text line. */
.unified-editor-card .block-list,.unified-editor-card .secondary-block-list{gap:0;align-content:start;grid-auto-rows:max-content}
.unified-editor-card .content-block[data-type="text"],.unified-editor-card .secondary-block[data-type="text"]{min-height:calc(var(--body-font-size,16px) * 1.62)}
.unified-editor-card .content-block[data-type="text"] .block-content,.unified-editor-card .secondary-block[data-type="text"] .secondary-block-content{min-height:calc(var(--body-font-size,16px) * 1.62);padding-top:0;padding-bottom:0;line-height:1.62}

/* Prevent portrait ribbon geometry and scroll anchoring from changing by mode. */
@media (max-width:1100px) and (orientation:portrait){
  .canvas-toolbar,.canvas-toolbar.ink-active{height:60px!important;min-height:60px!important;max-height:60px!important;padding:0 7px!important;gap:2px!important;align-items:center!important;align-content:normal!important;flex-wrap:nowrap!important;scroll-snap-type:none!important;overflow-anchor:none;overflow-x:auto!important;overflow-y:hidden!important}
  .canvas-toolbar .ribbon-group,.canvas-toolbar.ink-active .ribbon-group,.canvas-toolbar.ink-active #inkOptions{height:60px!important;min-height:60px!important;max-height:60px!important;padding:6px 9px!important;gap:5px!important;align-items:center!important;align-content:normal!important;box-sizing:border-box!important}
  .canvas-toolbar #toolSelector,.canvas-toolbar.ink-active #toolSelector{width:auto!important;height:42px!important;min-height:42px!important;flex:0 0 auto!important;padding:3px!important;transform:none!important}
  .canvas-toolbar .tool-button,.canvas-toolbar.ink-active .tool-button{height:36px!important;min-height:36px!important;min-width:48px!important;padding:0 9px!important;font-size:10px!important;transform:none}
  .canvas-toolbar .tool-button svg,.canvas-toolbar.ink-active .tool-button svg{width:18px!important;height:18px!important}
}

/* Ink is a contextual ribbon: replace Insert tools instead of appending after them. */
.canvas-toolbar.ink-active .ribbon-insert-group{display:none}
.canvas-toolbar.ink-active #inkOptions{order:2}
.canvas-toolbar.ink-active .ribbon-mode-group{order:1}
@media (pointer:fine){.canvas-viewport[data-tool="ink"],.canvas-viewport[data-tool="ink"] #inkCanvas{cursor:none}}

/* Precise mouse feedback for ink without showing the distracting system crosshair. */
.ink-cursor{position:absolute;z-index:260;left:0;top:0;width:var(--ink-cursor-size,5px);height:var(--ink-cursor-size,5px);border:1px solid color-mix(in srgb,var(--ink-cursor-color) 55%,var(--fill-solid));border-radius:50%;background:var(--ink-cursor-color,#111);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink-cursor-color) 55%,transparent);opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:opacity 60ms linear}
.ink-cursor.show{opacity:1}.ink-cursor.eraser{border:2px solid var(--text-2);background:color-mix(in srgb,var(--fill-solid) 55%,transparent);box-shadow:0 1px 4px #0003}
@media (pointer:coarse){.ink-cursor{display:none}}

/* Shared alignment feedback for editors and mind-map nodes. */
.alignment-layer{position:absolute;inset:0;z-index:96;width:4000px;height:3000px;overflow:visible;pointer-events:none}
.alignment-layer line{stroke:var(--nav-accent);stroke-width:1.5;stroke-dasharray:6 4;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px color-mix(in srgb,var(--nav-accent) 65%,transparent))}

/* Keep body paragraphs and soft line breaks on one stable baseline rhythm. */
.unified-editor-card .content-block[data-type="text"],.unified-editor-card .secondary-block[data-type="text"]{min-height:1.6em;margin-block:0}
.unified-editor-card .content-block[data-type="text"] .block-content,.unified-editor-card .secondary-block[data-type="text"] .secondary-block-content{min-height:1.6em;margin:0;padding-block:0;line-height:1.6}
.unified-editor-card .block-content>div,.unified-editor-card .block-content>p{margin:0;padding:0;line-height:inherit}