/* Interface colours are independent of the board wallpaper and card style. */
body[data-app-theme] {
  --ui-base: #f4f2e9;
  --ui-sidebar: #f8f8f1;
  --ui-surface: #fffef9;
  --ui-raised: #fffefa;
  --ui-subtle: #f0f3e8;
  --ui-hover: #e9efdc;
  --ui-selected: #e3ebd2;
  --ui-text: #35452f;
  --ui-muted: #6b7a5e;
  --ui-faint: #6e7a63;
  --ui-border: #dce3d2;
  --ui-accent: #657e47;
  --ui-accent-bright: #7f9b5d;
  --ui-accent-bg: #dce7be;
  --ui-accent-ink: #3b4d27;
  --ui-danger: #ae6758;
  --ui-shadow: #2635221f;
  --ui-scrim: #25372066;
  --ink: var(--ui-text);
  --muted: var(--ui-muted);
  --olive: var(--ui-accent);
  --olive-dark: var(--ui-text);
  --lime: var(--ui-accent-bg);
  --line: var(--ui-border);
  --white: var(--ui-surface);
  color: var(--ui-text);
  background: var(--ui-base);
  color-scheme: light;
}
body[data-app-theme="graphite"] {
  --ui-base: #171b20; --ui-sidebar: #1c2229; --ui-surface: #242b33; --ui-raised: #2b343e;
  --ui-subtle: #20272f; --ui-hover: #303b45; --ui-selected: #344a45;
  --ui-text: #eff5f2; --ui-muted: #bbc7c5; --ui-faint: #9cadaa; --ui-border: #3b4952;
  --ui-accent: #a5cfb8; --ui-accent-bright: #c0e6cf; --ui-accent-bg: #a5cfb8; --ui-accent-ink: #152b24;
  --ui-danger: #efa99b; --ui-shadow: #02060d70; --ui-scrim: #070b1399; color-scheme: dark;
}
body[data-app-theme="midnight"] {
  --ui-base: #111c30; --ui-sidebar: #142139; --ui-surface: #1c2b45; --ui-raised: #243652;
  --ui-subtle: #18263d; --ui-hover: #2b3d5c; --ui-selected: #31466b;
  --ui-text: #edf3ff; --ui-muted: #bccbe3; --ui-faint: #9faecc; --ui-border: #3a4e6d;
  --ui-accent: #a8c4ff; --ui-accent-bright: #ceddff; --ui-accent-bg: #9bbcff; --ui-accent-ink: #182b4c;
  --ui-danger: #f3b0ad; --ui-shadow: #02071375; --ui-scrim: #030c1f9c; color-scheme: dark;
}
body[data-app-theme="forest"] {
  --ui-base: #152722; --ui-sidebar: #192e27; --ui-surface: #223b31; --ui-raised: #2b463a;
  --ui-subtle: #1c332b; --ui-hover: #344f40; --ui-selected: #3b5140;
  --ui-text: #f0f4e8; --ui-muted: #c2ceb9; --ui-faint: #acbba1; --ui-border: #445d4a;
  --ui-accent: #d3dba2; --ui-accent-bright: #e9eac2; --ui-accent-bg: #d3dba2; --ui-accent-ink: #28371e;
  --ui-danger: #edb59a; --ui-shadow: #020b0770; --ui-scrim: #071e169c; color-scheme: dark;
}
body[data-app-theme="plum"] {
  --ui-base: #271b2e; --ui-sidebar: #2e2037; --ui-surface: #3c2945; --ui-raised: #493451;
  --ui-subtle: #34243c; --ui-hover: #533c5d; --ui-selected: #65445c;
  --ui-text: #faf0f7; --ui-muted: #dcc3d8; --ui-faint: #c6adc3; --ui-border: #654a6b;
  --ui-accent: #e6b5ce; --ui-accent-bright: #f5cddd; --ui-accent-bg: #e6b5ce; --ui-accent-ink: #48273a;
  --ui-danger: #f3b59f; --ui-shadow: #0d031775; --ui-scrim: #16071e99; color-scheme: dark;
}
body[data-app-theme] :is(button, input, select, textarea, [contenteditable]):focus-visible {
  outline-color: var(--ui-accent);
}
body[data-app-theme] .sidebar { background: var(--ui-sidebar); border-color: var(--ui-border); }
body[data-app-theme] :is(.topbar, .canvas-toolbar) { background: var(--ui-surface); border-color: var(--ui-border); }
body[data-app-theme] .brand-symbol { background: var(--ui-accent-bg); color: var(--ui-accent-ink); }
body[data-app-theme] :is(.brand-caption, .sidebar-label, .sidebar-label>span, .sidebar-footer, .local-label, .eyebrow, .toolbar-hint, .toolbar-hint kbd, .save-status, .board-count, .board-item .count) { color: var(--ui-faint); }
body[data-app-theme] :is(.brand-dot, .help-button:hover, .icon-button:hover, .tip-spark, .tip-card>svg) { color: var(--ui-accent); }
body[data-app-theme] .board-title { color: var(--ui-text); }
body[data-app-theme] .board-title:focus { box-shadow: 0 1px var(--ui-accent); }
body[data-app-theme] :is(.board-item, .help-button, .icon-button, .tool-button, #studio-button) { color: var(--ui-muted); }
body[data-app-theme] :is(.board-item:hover, .icon-button:hover, .tool-button:hover, .residents-close:hover, .magnet-close:hover, .modal-close:hover) { background: var(--ui-hover); color: var(--ui-text); }
body[data-app-theme] :is(.board-item.active, .tool-button.active, #residents-button.residents-on) { background: var(--ui-selected); color: var(--ui-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent), transparent 80%); }
body[data-app-theme] :is(.board-item.active .count, .board-item.active .board-count) { color: var(--ui-accent); }
body[data-app-theme] .new-board-button { background: var(--ui-accent-bg); color: var(--ui-accent-ink); }
body[data-app-theme] .new-board-button:hover { background: color-mix(in srgb, var(--ui-accent-bg), white 12%); }
body[data-app-theme] :is(.tip-card, .studio-tip) { background: var(--ui-subtle); border-color: var(--ui-border); color: var(--ui-muted); }
body[data-app-theme] :is(.tip-card strong, .tip-card h3) { color: var(--ui-text); }
body[data-app-theme] :is(.tip-card kbd, .shortcut-grid kbd, .shortcut-key, .empty-state kbd) { background: var(--ui-raised); color: var(--ui-accent); border-color: var(--ui-border); }
body[data-app-theme] :is(.export-button, .presentation-button) { background: var(--ui-surface); color: var(--ui-muted); border-color: var(--ui-border); }
body[data-app-theme] :is(.export-button:hover, .presentation-button:hover) { background: var(--ui-hover); border-color: var(--ui-accent); }
body[data-app-theme] .avatar { background: var(--ui-selected); color: var(--ui-accent); }
body[data-app-theme] .save-status::before { background: var(--ui-accent); }
body[data-app-theme] :is(.toolbar-divider, .zoom-divider, .panel-divider) { background: var(--ui-border); }
body[data-app-theme] :is(.dropdown-menu, .context-menu, .background-picker, .floating-style, .connection-panel, .search-panel, .zoom-controls, .studio-panel, .residents-panel, .magnet-picker, .rich-bar, .story-hud, .story-notes, .resident-house-menu, .modal) {
  color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-border);
  box-shadow: 0 12px 36px var(--ui-shadow); scrollbar-color: var(--ui-border) transparent;
}
body[data-app-theme] :is(.dropdown-menu button, .context-menu button, .zoom-controls button, .zoom-value, .style-actions button, .panel-action, .presentation-exit, .panel-heading, .rich-bar, .story-buttons button, .resident-house-menu>button) { color: var(--ui-muted); }
body[data-app-theme] :is(.dropdown-menu button:hover, .context-menu button:hover, .zoom-controls button:hover, .style-actions button:hover, .rich-bar button:hover, .resident-house-menu>button:hover) { color: var(--ui-text); background: var(--ui-hover); }
body[data-app-theme] :is(.dropdown-menu .danger, .context-menu .danger, .style-actions .danger) { color: var(--ui-danger); }
body[data-app-theme] :is(.dropdown-menu .danger:hover, .context-menu .danger:hover, .style-actions .danger:hover) { background: color-mix(in srgb, var(--ui-danger), var(--ui-surface) 88%); }
body[data-app-theme] :is(.dropdown-menu>button>span, .context-menu kbd, .panel-heading small, .panel-heading button, .style-label, .style-row, .style-row label, .search-panel>span, .edge-label-input::placeholder, .search-panel input::placeholder, .modal>p, .modal .modal-note, .modal label, .shortcut-grid) { color: var(--ui-faint); }
body[data-app-theme] :is(.style-row select, .style-select, .edge-label-input, .modal input[type=text], .modal textarea, .studio-field input, .studio-field select, .studio-panel textarea, .residents-select select) { background: var(--ui-subtle); color: var(--ui-text); border-color: var(--ui-border); }
body[data-app-theme] :is(.segmented, .studio-tabs, .residents-segment) { background: var(--ui-subtle); border-color: var(--ui-border); }
body[data-app-theme] :is(.segmented button, .studio-tabs button, .residents-segment button) { color: var(--ui-muted); }
body[data-app-theme] :is(.segmented button.active, .segmented button.selected, .studio-tabs button.active, .residents-segment button[aria-pressed=true]) { color: var(--ui-accent); background: var(--ui-raised); }
body[data-app-theme] :is(.panel-action, .modal-actions button, .resident-house-menu>button) { background: var(--ui-subtle); border-color: var(--ui-border); }
body[data-app-theme] .style-actions { border-color: var(--ui-border); }
body[data-app-theme] :is(.context-menu hr, .modal .modal-note) { border-color: var(--ui-border); }
body[data-app-theme] :is(.search-panel input, .modal-title, .studio-heading h2, .residents-heading h2, .magnet-heading h2, .resident-house-menu>strong) { color: var(--ui-text); }
body[data-app-theme] :is(.search-panel button, .modal-close, .studio-heading>button, .residents-close, .magnet-close) { color: var(--ui-muted); }
body[data-app-theme] .modal::backdrop { background: var(--ui-scrim); }
body[data-app-theme] :is(.modal-actions button.primary, .modal .modal-actions .new-board-button) { background: var(--ui-accent-bg); color: var(--ui-accent-ink); }
body[data-app-theme] .toast { background: var(--ui-accent-bg); color: var(--ui-accent-ink); box-shadow: 0 8px 24px var(--ui-shadow); }
body[data-app-theme] .toast.error { background: var(--ui-danger); color: #24110e; }
body[data-app-theme] :is(.presentation-exit, .presentation-exit kbd) { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-muted); }
body[data-app-theme] .drop-overlay { background: color-mix(in srgb, var(--ui-surface), transparent 6%); border-color: var(--ui-accent); color: var(--ui-accent); }
body[data-app-theme] .drop-overlay p { color: var(--ui-muted); }
body[data-app-theme] :is(.style-row input[type=range], .style-row input[type=checkbox], .studio-check input, .residents-character input) { accent-color: var(--ui-accent); }

/* Appearance selector: compact live previews, readable even in narrow windows. */
body[data-app-theme] .background-picker { width: 410px; padding: 20px; max-height: min(760px, calc(100dvh - 175px)); }
.appearance-section { margin: 0 0 21px; }
.appearance-section:last-child { margin-bottom: 0; }
.appearance-section h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; font: 600 11px var(--sans); color: var(--ui-text); }
.appearance-section h3>span { font: 9px var(--sans); color: var(--ui-faint); }
.appearance-description { margin: 0 0 12px; color: var(--ui-faint); font: 9px/1.6 var(--sans); }
.theme-grid, .board-style-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 7px; }
.theme-option, .board-style-option { min-width: 0; padding: 5px; text-align: center; border: 1px solid transparent; border-radius: 10px; color: var(--ui-muted); }
.theme-option:hover, .board-style-option:hover { background: var(--ui-hover); border-color: var(--ui-border); }
.theme-option[aria-pressed=true], .board-style-option[aria-pressed=true] { background: var(--ui-selected); border-color: var(--ui-accent); color: var(--ui-accent); }
.theme-option>span:last-child, .board-style-option>span:last-child { display:block; font:9px/1.3 var(--sans); margin-top:7px; white-space:normal; min-height:23px; }
.theme-preview { display:block; position:relative; width:100%; height:47px; border-radius:7px; overflow:hidden; background:var(--theme-base,#171b20); border:1px solid #ffffff24; box-shadow:0 2px 4px #09121315; }
.theme-preview::before { content:''; position:absolute; width:26%; left:0; top:0; bottom:0; background:var(--theme-panel,#242b33); border-right:1px solid #ffffff1c; }
.theme-preview::after { content:''; position:absolute; width:39%; height:4px; left:38%; top:13px; border-radius:2px; background:var(--theme-accent,#a5cfb8); box-shadow:0 10px 0 color-mix(in srgb,var(--theme-accent,#a5cfb8),transparent 65%),0 18px 0 color-mix(in srgb,var(--theme-accent,#a5cfb8),transparent 82%); }
.theme-option[data-app-theme=linen] { --theme-base:#f4f2e9; --theme-panel:#faf9f3; --theme-accent:#697c50; }
.theme-option[data-app-theme=graphite] { --theme-base:#171b20; --theme-panel:#242b33; --theme-accent:#a5cfb8; }
.theme-option[data-app-theme=midnight] { --theme-base:#111c30; --theme-panel:#1c2b45; --theme-accent:#9bbcff; }
.theme-option[data-app-theme=forest] { --theme-base:#152722; --theme-panel:#223b31; --theme-accent:#d3dba2; }
.theme-option[data-app-theme=plum] { --theme-base:#271b2e; --theme-panel:#3c2945; --theme-accent:#e6b5ce; }
.board-style-preview { display:block; height:43px; margin:2px 3px; border-radius:3px; background:#e7edcf; border:1px solid #e0e6d5; box-shadow:0 3px 3px #26372315; position:relative; }
.board-style-preview::before { content:''; position:absolute; left:10px; right:10px; top:12px; height:3px; border-radius:2px; background:#73885a66; box-shadow:0 8px 0 #73885a33; }
.board-style-option[data-board-style=soft] .board-style-preview { border-radius:11px; background:#fff5e7; border-color:#e4dccb; box-shadow:0 4px 7px #78614826; }
.board-style-option[data-board-style=glass] .board-style-preview { border-radius:9px; background:linear-gradient(125deg,#cde5dfbb,#dae5facc); border-color:#ffffffb0; box-shadow:inset 0 1px 1px #fff,0 3px 5px #41577324; }
.board-style-option[data-board-style=night] .board-style-preview { border-radius:8px; background:#19242b; border-color:#597971; box-shadow:0 4px 6px #0003; }
.board-style-option[data-board-style=night] .board-style-preview::before { background:#c2dccdaa; box-shadow:0 8px 0 #c2dccd55; }
.board-style-option[data-board-style=blueprint] .board-style-preview { border-radius:4px; background:repeating-linear-gradient(0deg,#1c4260 0 7px,#d6eef91c 7px 8px); border:1px solid #8db8ce; }
.board-style-option[data-board-style=blueprint] .board-style-preview::before { background:#c5e5f3aa; box-shadow:0 8px 0 #c5e5f355; }
body[data-app-theme] .background-picker .panel-heading { color:var(--ui-text); }
body[data-app-theme] :is(.background-picker>p,.background-option .background-label,.background-option>span:not(.background-swatch)) { color:var(--ui-muted); }
body[data-app-theme] .background-option:hover { background:var(--ui-hover); border-color:var(--ui-border); }
body[data-app-theme] :is(.background-option.active,.background-option.selected,.background-option[aria-pressed=true]) { background:var(--ui-selected); border-color:var(--ui-accent); }
body[data-app-theme] :is(.background-option.active .background-label,.background-option[aria-pressed=true] .background-label) { color:var(--ui-accent); }
body[data-app-theme] .background-swatch { border-color:var(--ui-raised); }

/* Workshop, collection and resident controls share the application palette. */
body[data-app-theme] :is(.studio-heading>div>span,.studio-intro,.studio-hint,.studio-check,.studio-check small,.studio-label,.studio-field,.scene-item small,.scene-item details,.scene-order>span,.studio-group-list input:not([type=color]),.media-upload small,.template-card small,.template-card i,.version-card>small,.story-progress>span,.story-progress>small,.residents-eyebrow,.residents-intro,.residents-toggle small,.residents-character small,.residents-roster-meta,.residents-roster-meta button,.residents-select,.residents-tip,.residents-all-count,.magnet-eyebrow,.magnet-label,.magnet-footer,.magnet-results-heading>span,.magnet-search kbd,.resident-house-menu>p,.resident-house-menu>small) { color:var(--ui-muted); }
body[data-app-theme] :is(.studio-content>button:not(.media-upload),.studio-row button,.residents-all,.residents-actions button,.version-card button,.resident-quantity button) { color:var(--ui-muted); border-color:var(--ui-border); background:var(--ui-surface); }
body[data-app-theme] :is(.studio-content>button.studio-primary,.residents-all[aria-pressed=true],.residents-actions button[aria-pressed=true]) { color:var(--ui-accent-ink); background:var(--ui-accent-bg); border-color:var(--ui-accent-bg); }
body[data-app-theme] :is(.studio-empty,.studio-layouts button,.scene-item,.template-card,.media-upload,.residents-character,.residents-roster .residents-character,.magnet-search,.magnet-tile) { color:var(--ui-muted); background:var(--ui-subtle); border-color:var(--ui-border); }
body[data-app-theme] :is(.scene-item.active,.residents-roster .residents-character.chosen,.residents-character[aria-pressed=true]) { background:var(--ui-selected); border-color:var(--ui-accent); box-shadow:0 0 0 1px color-mix(in srgb,var(--ui-accent),transparent 70%); }
body[data-app-theme] :is(.scene-item>div>input,.template-card strong,.version-card>strong,.story-progress>strong,.magnet-results-heading strong) { color:var(--ui-text); }
body[data-app-theme] :is(.scene-number,.residents-toggle>i,.residents-segment) { color:var(--ui-accent); background:var(--ui-raised); }
body[data-app-theme] .residents-toggle input:checked+i { background:var(--ui-accent); }
body[data-app-theme] .residents-toggle>i::after { background:var(--ui-surface); }
body[data-app-theme] :is(.residents-bubbles-option,.residents-tip kbd,.version-card,.studio-group-list>div,.magnet-heading h2 span,.magnet-shortcuts,.magnet-footer,.magnet-search kbd) { border-color:var(--ui-border); }
body[data-app-theme] :is(.resident-quantity output,.magnet-shortcuts button,.magnet-categories button,.magnet-close,.magnet-search,.magnet-heading h2 span) { color:var(--ui-muted); }
body[data-app-theme] :is(.magnet-shortcuts button[aria-pressed=true],.magnet-categories button[aria-pressed=true]) { color:var(--ui-accent); background:var(--ui-selected); border-color:var(--ui-accent); }
body[data-app-theme] :is(.magnet-categories button:hover,.magnet-option:hover,.magnet-favorite:hover) { background:var(--ui-hover); }
body[data-app-theme] .magnet-search input { color:var(--ui-text); }
body[data-app-theme] .magnet-search input::placeholder { color:var(--ui-faint); }
body[data-app-theme] .magnet-search:focus-within { border-color:var(--ui-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent),transparent 90%); }
body[data-app-theme] .magnet-grid { scrollbar-color:var(--ui-border) transparent; }
body[data-app-theme] .magnet-favorite { color:var(--ui-faint); }
body[data-app-theme] .magnet-favorite[aria-pressed=true] { color:#e9c274; }
body[data-app-theme] .magnet-empty { color:var(--ui-muted); }
body[data-app-theme] .magnet-empty>span { color:var(--ui-accent); }
body[data-app-theme] :is(.resident-thought,.house-badge) { background:var(--ui-surface); border-color:var(--ui-border); color:var(--ui-text); box-shadow:0 5px 18px var(--ui-shadow); }
body[data-app-theme] :is(.node-controls,.drag-handle,.branch-badge,.branch-fold,.branch-fold-button,.branch-collapse-button) { background:var(--ui-surface); border-color:var(--ui-border); color:var(--ui-accent); }
body[data-app-theme] :is(.node-controls button,.branch-badge,.node-controls .drag-handle) { color:var(--ui-muted); }
body[data-app-theme] :is(.node-controls button:hover,.branch-fold:hover,.branch-fold-button:hover,.branch-collapse-button:hover) { background:var(--ui-hover); color:var(--ui-accent); }
body[data-app-theme] .node-controls .drag-handle { background:transparent; }
body[data-app-theme] :is(.node-resize,.connect-port) { border-color:var(--ui-surface); background:var(--ui-accent); box-shadow:0 0 0 1px var(--ui-accent); }
body[data-app-theme] .node.selected { outline-color:var(--ui-accent); }
body[data-app-theme] .node.link-source { outline-color:var(--ui-accent); }

/* Five card treatments. User colours remain as tints, without altering the board model. */
#viewport[data-board-style] { --board-text:#3d4d35; --board-secondary:#5e704f; --board-muted:#63734f; --board-line:#dfe6d6; --board-section:#f6f8ef; --board-accent:#819963; --board-surface:#fffefa; }
#viewport[data-board-style] :is(.node-note,.node-list,.node-shape,.node-quote,.node-outline,.node-drawing,.node-photo,.node-video,.node-audio) { color:var(--board-text); }
#viewport[data-board-style] :is(.note-title,.list-title,.outline-title,.drawing-title,.media-title,.quote-body,.photo-caption,.section-title,.outline-section-title) { color:var(--board-text); }
#viewport[data-board-style] :is(.note-body,.item-text,.section-body,.outline-body,.outline-content,.quote-footer) { color:var(--board-secondary); }
#viewport[data-board-style] :is(.node-footer,.note-label,.quote-label,.drawing-tag,.drawing-size,.list-progress,.media-kicker,.media-poster-button,.list-symbol,.outline-actions button,.outline-remove,.remove-item-btn,.add-item-button,.collapse-button) { color:var(--board-muted); }
#viewport[data-board-style] .outline-section { background:var(--board-section); border-color:var(--board-line); }
#viewport[data-board-style] .outline-number { color:var(--board-secondary); background:color-mix(in srgb,var(--board-accent),var(--board-surface) 80%); }
#viewport[data-board-style] :is(.outline-toggle>svg,.outline-section-toggle>svg) { color:var(--board-muted); }
#viewport[data-board-style] .list-progress i { background:var(--board-accent); }
#viewport[data-board-style] .list-progress>div { background:color-mix(in srgb,var(--board-accent),transparent 82%); }
#viewport[data-board-style] .checklist-row input { accent-color:var(--board-accent); }
#viewport[data-board-style] .checklist-row:has(input:checked) .item-text { color:var(--board-muted); text-decoration-color:color-mix(in srgb,var(--board-muted),transparent 35%); }
#viewport[data-board-style] .node-tag { background:color-mix(in srgb,var(--board-surface),transparent 52%); color:var(--board-secondary); }
#viewport[data-board-style] .quote-mark { color:var(--board-accent); }
#viewport[data-board-style] .drawing-tools { background:var(--board-section); border-color:var(--board-line); }
#viewport[data-board-style] .drawing-tool { color:var(--board-secondary); }
#viewport[data-board-style] .drawing-tool:hover { background:color-mix(in srgb,var(--board-accent),transparent 78%); }
#viewport[data-board-style] .drawing-tool.active { background:var(--board-accent); color:var(--board-surface); }
#viewport[data-board-style] .drawing-width { accent-color:var(--board-accent); }
#viewport[data-board-style] .audio-wave { background:var(--board-section); }
#viewport[data-board-style] .audio-wave i { background:var(--board-accent); }

#viewport[data-board-style=soft] { --board-text:#504c43; --board-secondary:#716b5c; --board-muted:#776951; --board-line:#e5dece; --board-section:#fcf8f0; --board-accent:#ad9268; --board-surface:#fffcf6; }
#viewport[data-board-style=soft] :is(.node-note,.node-list,.node-shape,.node-quote) { background:color-mix(in srgb,var(--card-color,#e7edcf),#fffcf5 55%); }
#viewport[data-board-style=soft] :is(.node-note,.node-list,.node-shape,.node-quote,.node-outline,.node-drawing,.node-photo,.node-video,.node-audio) { border:1px solid #ffffffc2; border-radius:19px; box-shadow:0 12px 23px #76644b22,0 2px 4px #76644b0c,inset 0 1px 0 #fff; }
#viewport[data-board-style=soft] :is(.node-outline,.node-drawing,.node-photo,.node-video,.node-audio) { background:var(--board-surface); }
#viewport[data-board-style=soft] .node-note::after,#viewport[data-board-style=soft] .node-shape::after { display:none; }
#viewport[data-board-style=soft] .photo-frame { border-radius:11px; }
#viewport[data-board-style=soft] .outline-section { border-radius:12px; }
#viewport[data-board-style=soft] .node-quote[data-quote-style=book] { border-left:7px double #cbb694; }

#viewport[data-board-style=glass] { --board-text:#294755; --board-secondary:#4b6470; --board-muted:#637b85; --board-line:#ffffff80; --board-section:#ffffff73; --board-accent:#6e9eae; --board-surface:#eaf2f8; }
#viewport[data-board-style=glass] :is(.node-note,.node-list,.node-shape,.node-quote,.node-outline,.node-drawing,.node-photo,.node-video,.node-audio) { background:linear-gradient(140deg,color-mix(in srgb,var(--card-color,#dce9ef),#ffffff 65%) 0%,#eaf4f8c7 100%); border:1px solid #ffffffe0; border-radius:16px; backdrop-filter:blur(18px); box-shadow:0 12px 30px #1a2f4940,inset 0 1px 1px #ffffff; }
#viewport[data-board-style=glass] .node-note::after,#viewport[data-board-style=glass] .node-shape::after { display:none; }
#viewport[data-board-style=glass] .photo-frame { border-radius:9px; }
#viewport[data-board-style=glass] .node-quote[data-quote-style=book] { border-left:7px double #a2beca; background:repeating-linear-gradient(#edf6f4ed 0 31px,#c3d8e4cc 31px 32px); }
#viewport[data-board-style=glass] .node-text { padding:14px 18px; border:1px solid #ffffff90; border-radius:13px; background:#edf5f9de; backdrop-filter:blur(12px); }
#viewport[data-board-style=glass] .text-body { color:var(--board-text); }

#viewport[data-board-style=night] { --board-text:#edf4ef; --board-secondary:#c9d9d0; --board-muted:#b0c3b8; --board-line:#50675d; --board-section:#22362e; --board-accent:#acd4bd; --board-surface:#19242b; }
#viewport[data-board-style=night] :is(.node-note,.node-list,.node-shape,.node-quote,.node-outline,.node-drawing,.node-photo,.node-video,.node-audio) { background:color-mix(in srgb,var(--card-color,#709e86) 12%,#19242b); border:1px solid #587766b5; border-radius:12px; box-shadow:0 13px 25px #02070c70,inset 0 1px 0 #a3c5b31a; color-scheme:dark; }
#viewport[data-board-style=night] .node-note::after,#viewport[data-board-style=night] .node-shape::after { display:none; }
#viewport[data-board-style=night] .photo-frame { background:#122027; border-radius:6px; }
#viewport[data-board-style=night] .node-quote[data-quote-style=glass] { background:linear-gradient(135deg,#243832e8,#243445e3); border-color:#78998caa; }
#viewport[data-board-style=night] .node-quote[data-quote-style=book] { background:repeating-linear-gradient(#24312d 0 31px,#56756555 31px 32px); border-left:7px double #87a292; box-shadow:4px 5px 0 #192621,7px 8px 0 #0d1914; }
#viewport[data-board-style=night] .node-text { background:#1b2b27e6; padding:14px 18px; border:1px solid #58776680; border-radius:9px; box-shadow:0 5px 15px #0003; }
#viewport[data-board-style=night] .text-body { color:var(--board-text); }
#viewport[data-board-style=night] [contenteditable]:empty::before { color:#b2c5b877; }
#viewport[data-board-style=night] .drawing-tool.active { color:#192b22; }
#viewport[data-board-style=night] .drawing-clear { color:var(--board-muted); }
#viewport[data-board-style=night] :is(.outline-actions button:hover,.collapse-button:hover) { background:#d8efdf15; }
#viewport[data-board-style=night] .group-heading { color:#e0eee1; }
#viewport[data-board-style=night] :is(.group-count,.group-grip,.group-resize::after) { color:#b3cebb; }
#viewport[data-board-style=night] .node-magnet .magnet-symbol { filter:drop-shadow(0 4px 1px #0003) drop-shadow(0 12px 8px #02051166); }

#viewport[data-board-style=blueprint] { --board-text:#eaf5fc; --board-secondary:#c3deed; --board-muted:#a9ccdf; --board-line:#688faf; --board-section:#224c6c; --board-accent:#9fd6ed; --board-surface:#1c4260; }
#viewport[data-board-style=blueprint] :is(.node-note,.node-list,.node-shape,.node-quote,.node-outline,.node-drawing,.node-photo,.node-video,.node-audio) { background-color:color-mix(in srgb,var(--card-color,#3c6f88) 8%,#1c4260); background-image:linear-gradient(#bedfeb0c 1px,transparent 1px),linear-gradient(90deg,#bedfeb0c 1px,transparent 1px); background-size:18px 18px; border:1px solid #8bbad2b3; border-radius:5px; box-shadow:5px 5px 0 #0e2c4555,0 12px 22px #061c3430; color-scheme:dark; }
#viewport[data-board-style=blueprint] .node-note::after,#viewport[data-board-style=blueprint] .node-shape::after { display:none; }
#viewport[data-board-style=blueprint] .node-text { background:#193d59e6; padding:14px 18px; border:1px solid #93bfd080; border-radius:4px; }
#viewport[data-board-style=blueprint] .text-body { color:var(--board-text); }
#viewport[data-board-style=blueprint] .node-quote[data-quote-style=glass] { background:linear-gradient(125deg,#245e7bde,#234768e6); border-color:#b3dbebba; }
#viewport[data-board-style=blueprint] .node-quote[data-quote-style=book] { border-left:7px double #99bdce; background:repeating-linear-gradient(#1e4561 0 31px,#70a6c53b 31px 32px); }
#viewport[data-board-style=blueprint] .photo-frame { background:#123047; }
#viewport[data-board-style=blueprint] .drawing-tool.active { color:#18364b; }
#viewport[data-board-style=blueprint] .drawing-clear { color:var(--board-muted); }
#viewport[data-board-style=blueprint] [contenteditable]:empty::before { color:#bed3e788; }
#viewport[data-board-style=blueprint] .group-heading { color:#e2f1f7; }
#viewport[data-board-style=blueprint] :is(.group-count,.group-grip,.group-resize::after) { color:#b1d3e6; }
#viewport:is([data-board-style=paper],[data-board-style=soft]):is([data-bg=dark],[data-bg=midnight],[data-bg=blueprint],[data-bg=chalk],[data-bg=aurora],[data-bg=nebula],[data-bg=obsidian],[data-bg=walnut],[data-bg=embers],[data-bg=deepsea]) .node-text { background:#fffefae8; padding:14px 18px; border-radius:7px; box-shadow:0 5px 15px #02070c25; }

/* Drawing remains a white sheet so old pen strokes keep their intended colours. */
#viewport[data-board-style] .drawing-surface { background:#fffefa; border-color:var(--board-line); }
#viewport[data-board-style] :is(.welcome-chip,.board-stats,.paste-hint,.empty-state) { color:var(--overlay-ink,#8e9a7d); }
#viewport[data-board-style] :is(.welcome-chip strong,.empty-state h2,.paste-hint kbd) { color:var(--overlay-ink,#8e9a7d); }
#viewport[data-board-style] .paste-hint { border-color:color-mix(in srgb,var(--overlay-ink,#8e9a7d),transparent 65%); }
#viewport[data-board-style] .empty-state .empty-icon { background:var(--ui-selected); color:var(--ui-accent); border-color:var(--ui-border); }

/* Twelve additional wallpapers, all generated by CSS and available offline. */
:is(.board-viewport,.background-swatch)[data-bg=aurora] { --paper:#102c35; --overlay-ink:#b9d3d4; background-color:#102c35; background-image:radial-gradient(ellipse at 15% 15%,#65bd9a78 0,transparent 48%),radial-gradient(ellipse at 80% 70%,#7a59bb77 0,transparent 54%),linear-gradient(145deg,#0d3035,#182244 60%,#152f37); background-size:cover; background-position:center; }
:is(.board-viewport,.background-swatch)[data-bg=nebula] { --paper:#261d3b; --overlay-ink:#d7c4e7; background-color:#261d3b; background-image:radial-gradient(ellipse at 82% 20%,#8a5d9866 0,transparent 53%),radial-gradient(ellipse at 20% 85%,#385d9459 0,transparent 58%),radial-gradient(circle,#e8d9fe45 .7px,transparent 1px),linear-gradient(135deg,#191d32,#40273f); background-size:cover,cover,calc(var(--grid-size)*3) calc(var(--grid-size)*3),cover; background-position:center,center,var(--bg-x) var(--bg-y),center; }
:is(.board-viewport,.background-swatch)[data-bg=obsidian] { --paper:#161b21; --overlay-ink:#aebac1; background-color:#161b21; background-image:linear-gradient(#9cafbb0d 1px,transparent 1px),linear-gradient(90deg,#9cafbb0d 1px,transparent 1px),radial-gradient(ellipse at 45% 35%,#38435255,transparent 70%); background-size:var(--grid-size) var(--grid-size),var(--grid-size) var(--grid-size),cover; }
:is(.board-viewport,.background-swatch)[data-bg=walnut] { --paper:#513a2e; --overlay-ink:#dfc4a7; background-color:#513a2e; background-image:repeating-linear-gradient(2deg,#1b100a17 0 1px,transparent 1px 5px),repeating-linear-gradient(88deg,#23140d1a 0 2px,transparent 2px 107px),linear-gradient(110deg,#3c3028,#72523c 55%,#4f3b2e); background-size:calc(var(--grid-size)*5) calc(var(--grid-size)*5),calc(var(--grid-size)*8) calc(var(--grid-size)*8),cover; }
:is(.board-viewport,.background-swatch)[data-bg=linen] { --paper:#eee8dc; --overlay-ink:#817565; background-color:#eee8dc; background-image:repeating-linear-gradient(0deg,#796b4410 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#ffffff57 0 1px,transparent 1px 3px),radial-gradient(ellipse at 30% 25%,#fffdf469,transparent 70%); background-size:calc(var(--grid-size)/3) calc(var(--grid-size)/3),calc(var(--grid-size)/3) calc(var(--grid-size)/3),cover; }
:is(.board-viewport,.background-swatch)[data-bg=terrazzo] { --paper:#f0ece3; --overlay-ink:#8a7e75; background-color:#f0ece3; background-image:radial-gradient(ellipse at 14% 20%,#ccafa184 0 2px,transparent 3px),radial-gradient(ellipse at 73% 58%,#9baa9780 0 3px,transparent 4px),radial-gradient(ellipse at 46% 83%,#b4bac784 0 2px,transparent 3px),radial-gradient(ellipse at 94% 15%,#d7c39599 0 1.5px,transparent 2.5px); background-size:calc(var(--grid-size)*2.7) calc(var(--grid-size)*2.7),calc(var(--grid-size)*3.9) calc(var(--grid-size)*3.9),calc(var(--grid-size)*4.3) calc(var(--grid-size)*4.3),calc(var(--grid-size)*2.9) calc(var(--grid-size)*2.9); }
:is(.board-viewport,.background-swatch)[data-bg=waves] { --paper:#c9e2e2; --overlay-ink:#617c83; background-color:#c9e2e2; background-image:radial-gradient(ellipse at 18% 105%,#90c5bfaa 0 40%,transparent 40.3%),radial-gradient(ellipse at 90% -8%,#e5f1e0b3 0 48%,transparent 48.3%),linear-gradient(130deg,#c2dbea,#d1e9e0); background-size:cover; background-position:center; }
:is(.board-viewport,.background-swatch)[data-bg=contour] { --paper:#dbe3d5; --overlay-ink:#728265; background-color:#dbe3d5; background-image:repeating-radial-gradient(ellipse at 30% 30%,transparent 0 23px,#788a6c28 24px 25px,transparent 26px 47px),radial-gradient(ellipse at 78% 80%,#c2d4b97d,transparent 60%); background-size:calc(var(--grid-size)*24) calc(var(--grid-size)*18),cover; }
:is(.board-viewport,.background-swatch)[data-bg=checker] { --paper:#e9d7ba; --overlay-ink:#8f7658; background-color:#e9d7ba; background-image:conic-gradient(#b4967033 25%,transparent 0 50%,#b4967033 0 75%,transparent 0); background-size:calc(var(--grid-size)*4) calc(var(--grid-size)*4); }
:is(.board-viewport,.background-swatch)[data-bg=honeycomb] { --paper:#eee0bc; --overlay-ink:#95804e; background-color:#eee0bc; background-image:linear-gradient(30deg,#b99c5d22 12%,transparent 12.5%,transparent 87%,#b99c5d22 87.5%),linear-gradient(150deg,#b99c5d22 12%,transparent 12.5%,transparent 87%,#b99c5d22 87.5%),linear-gradient(30deg,#b99c5d22 12%,transparent 12.5%,transparent 87%,#b99c5d22 87.5%),linear-gradient(150deg,#b99c5d22 12%,transparent 12.5%,transparent 87%,#b99c5d22 87.5%),linear-gradient(60deg,#b99c5d17 25%,transparent 25.5%,transparent 75%,#b99c5d17 75%); background-size:calc(var(--grid-size)*2.2) calc(var(--grid-size)*3.8); background-position:var(--bg-x) var(--bg-y),var(--bg-x) var(--bg-y),calc(var(--bg-x) + var(--grid-size)*1.1) calc(var(--bg-y) + var(--grid-size)*1.9),calc(var(--bg-x) + var(--grid-size)*1.1) calc(var(--bg-y) + var(--grid-size)*1.9),var(--bg-x) var(--bg-y); }
:is(.board-viewport,.background-swatch)[data-bg=embers] { --paper:#38252a; --overlay-ink:#e0c0a3; background-color:#38252a; background-image:radial-gradient(ellipse at 95% 90%,#b9753675 0,transparent 60%),radial-gradient(ellipse at 25% 15%,#8c446952 0,transparent 53%),linear-gradient(140deg,#261f2d,#51352b); background-size:cover; background-position:center; }
:is(.board-viewport,.background-swatch)[data-bg=deepsea] { --paper:#102e3a; --overlay-ink:#adcdd3; background-color:#102e3a; background-image:radial-gradient(ellipse at 30% 0%,#268e9580 0,transparent 68%),radial-gradient(ellipse at 90% 90%,#132639 0,transparent 65%),linear-gradient(165deg,#193749,#0a2930); background-size:cover; background-position:center; }

/* The live picker has three tabs, with a separate scrolling gallery. */
body[data-app-theme] .appearance-panel { display:flex; flex-direction:column; width:430px; gap:0; overflow:hidden; max-height:calc(100dvh - 165px); border-radius:18px; padding:21px; }
.appearance-header { display:flex; flex-shrink:0; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.appearance-eyebrow { font:8px var(--sans); letter-spacing:1.8px; color:var(--ui-faint); }
.appearance-header h2 { margin:8px 0 0; font:26px/1.25 var(--serif); letter-spacing:-.65px; color:var(--ui-text); }
.appearance-close { display:grid; place-items:center; width:27px; height:27px; padding:0; border-radius:7px; color:var(--ui-muted); font:24px/1 var(--sans); }
.appearance-close:hover { color:var(--ui-text); background:var(--ui-hover); }
.appearance-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:4px; gap:4px; border:1px solid var(--ui-border); border-radius:10px; background:var(--ui-subtle); flex-shrink:0; margin-bottom:17px; }
.appearance-tabs button { padding:9px 3px; border-radius:7px; color:var(--ui-muted); font:10px var(--sans); white-space:nowrap; }
.appearance-tabs button>span { display:inline-block; margin-left:3px; font:8px var(--sans); opacity:.6; }
.appearance-tabs button:hover { color:var(--ui-text); }
.appearance-tabs button[aria-selected=true] { color:var(--ui-accent); background:var(--ui-raised); box-shadow:0 2px 4px var(--ui-shadow); }
.appearance-content { min-height:0; overflow-y:auto; padding:1px 3px 5px 1px; scrollbar-width:thin; scrollbar-color:var(--ui-border) transparent; }
.appearance-panel .appearance-section { margin-bottom:0; }
.appearance-panel .appearance-description { font:10px/1.7 var(--sans); margin-bottom:15px; }
.appearance-panel :is(.theme-grid,.board-style-grid) { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.appearance-panel :is(.theme-option,.board-style-option) { padding:8px; border:1px solid var(--ui-border); border-radius:12px; display:flex; flex-direction:column; align-items:stretch; background:var(--ui-subtle); }
.appearance-panel :is(.theme-option:hover,.board-style-option:hover) { background:var(--ui-hover); }
.appearance-panel :is(.theme-option[aria-pressed=true],.board-style-option[aria-pressed=true]) { border-color:var(--ui-accent); background:var(--ui-selected); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-accent),transparent 60%); }
.appearance-panel .theme-preview { height:58px; flex-shrink:0; }
.appearance-panel .theme-preview::after { width:43%; left:38%; top:16px; box-shadow:0 11px 0 color-mix(in srgb,var(--theme-accent,#a5cfb8),transparent 65%),0 20px 0 color-mix(in srgb,var(--theme-accent,#a5cfb8),transparent 82%); }
.appearance-panel .board-style-preview { height:54px; margin:2px 3px; flex-shrink:0; }
.appearance-panel .board-style-preview::before { top:16px; box-shadow:0 10px 0 #73885a33; }
.appearance-panel .board-style-option[data-board-style=night] .board-style-preview::before { box-shadow:0 10px 0 #c2dccd55; }
.appearance-panel .board-style-option[data-board-style=blueprint] .board-style-preview::before { box-shadow:0 10px 0 #c5e5f355; }
.appearance-panel :is(.theme-preview,.board-style-preview)>:is(i,b,em) { display:none; }
.appearance-choice-title { display:block; margin:10px 0 5px; font:600 11px/1.35 var(--sans); color:var(--ui-text); min-height:29px; text-align:left; }
.appearance-panel :is(.theme-option,.board-style-option)>small { display:block; font:9px/1.6 var(--sans); color:var(--ui-muted); min-height:57px; text-align:left; }
.appearance-panel :is(.theme-option[aria-pressed=true],.board-style-option[aria-pressed=true]) .appearance-choice-title { color:var(--ui-accent); }
.appearance-footnote { display:flex; align-items:center; gap:10px; flex-shrink:0; border-top:1px solid var(--ui-border); padding-top:14px; margin-top:16px; color:var(--ui-faint); font:9px/1.6 var(--sans); }
.appearance-footnote>span:first-child { display:grid; place-items:center; width:22px; height:22px; flex-shrink:0; border:1px solid var(--ui-border); border-radius:50%; color:var(--ui-accent); background:var(--ui-subtle); font-size:11px; }
@media(max-width:680px) { body[data-app-theme] .background-picker { width:calc(100vw - 28px); padding:15px; max-height:calc(100dvh - 150px); } .theme-grid,.board-style-grid { gap:3px; } .theme-option,.board-style-option { padding:4px; } .theme-option>span:last-child,.board-style-option>span:last-child { font-size:8px; } .appearance-header h2{font-size:23px}.appearance-panel :is(.theme-grid,.board-style-grid){gap:6px}.appearance-panel :is(.theme-option,.board-style-option){padding:6px}.appearance-panel :is(.theme-option,.board-style-option)>small{font-size:8px;min-height:65px}.appearance-choice-title{font-size:10px}.appearance-tabs button{font-size:9px} }
@media(prefers-reduced-motion:reduce) { .theme-option,.board-style-option { transition:none; } }
#viewport:is([data-board-style=paper],[data-board-style=soft],[data-board-style=glass]) .node { color-scheme:light; }